v0.13.0

Sheet drags from anywhere, and the tab bar lens swings past its tab.

Install

npm install @onlymoein/liquidglass

Fixed

• Sheet moves to a drag that starts anywhere in it (#7). Before, only the grabber at the top did. Now a drag on the content resizes the sheet, a longer upward drag hands over to scrolling the content, and down from the top of the content shrinks or dismisses it. Sliders, text fields and sideways drags keep their own behaviour, and data-lg-no-sheet-drag marks anything else that should.
• TabBar lens slides on a springy spring (#8). A tap used to carry the lens across on the stiff spring meant for following a finger, so it was over in about 100 ms with no bounce. It now takes about 170 ms to cover nine tenths of the way, swings a little past its tab and settles. Dragging is unchanged.

Also in this release

• The held tab lens's labels bend at its rim, and part their colours on a dark page.
• A toolbar group's whole glass grows when one of its buttons is pressed.

The new tab bar and sheet timings were chosen by feel, not measured on the iOS 27 simulator; the tab bar's are in one file, src/internal/tab-motion.ts.

Thanks to Jannis for reporting #7 and #8.

v0.12.0

Two new components and a security fix.

Install

npm install @onlymoein/liquidglass

Added

• PageControl: the iOS page dots on a capsule of glass. Click a dot or use the arrow keys, Home and End; focus follows the page. Works controlled or uncontrolled.
• NavigationBar: the bar at the top of a screen, with a back chevron, a centred title and leading and trailing actions. The large title scrolls away with the content while its small twin fades into the bar, over a frosted band. The phone demo now uses it on every tab.

Security

• Menu and TabBar refuse unsafe links: an href of javascript:, data:, vbscript:, blob: or file: (including tab- or newline-disguised forms) is no longer followed or rendered as a link. Relative, http(s), mailto, tel and sms links work as before. A tab with an unsafe link renders as a plain tab.
• Site workflow hardened: the Pages build runs read-only, publishing rights sit in a separate job that runs no repo code, and every action is pinned to a commit.

Dimensions in PageControl and NavigationBar follow Apple's known defaults and have not been measured in the simulator.

0.11.2

Fixes from a side-by-side with the real iOS 27 controls, and from trying the new live demo on iPhone and Mac.

Install

npm install @onlymoein/liquidglass

Added

• SegmentedControl: under a finger the thumb lifts into a clear lens that follows a drag and drops on the choice you let go on. A tapped choice is reached by the lens, which settles flat when it arrives. Its size and layout are measured from the real control.

Fixed

• Switch and slider lenses in Chromium: they never bent, because an invalid filter value made the browser throw the whole effect away.
• TabBar: no more grey copy of the tab behind the lens while dragging. The tab underneath is now cut away along the lens's edge, as on iOS. A bar going from a selection to none no longer loses a tab.
• GlassGroup in Safari: it no longer flashes while its pieces move.
• GlassGroup in Chromium: it keeps its frost inside a parent with rounded corners and overflow: hidden.
• Mac Safari: continuous corners now use the same route as iOS Safari, because Mac Safari's corner-shape looks to leave the frost square at the corners. The new route is confirmed to run on Mac WebKit, but its rendering there hasn't been captured, so please report anything odd.
• Dark mode in Safari: glass was too bright and too saturated. Menus are closer to iOS over dark backgrounds: 36 over black where iOS is 32, and it was 46. A menu's "Delete" is now iOS's red instead of pink.

Behaviour changes

• New token --lg-menu-destructive colours destructive menu rows. Setting --lg-destructive-ink on a menu still works.
• SegmentedControl has no padding of its own now. Its thumb is 4pt narrower than its segment.
• TabBar tabs have an extra .lg-tab-face element around their content.

Known limits

• Safari still can't bend what's behind glass, so lenses there have the right shape, motion and rim but no bend.
• Dark glass in Safari is still too bright over white backdrops: 176 where iOS is 121. Mid-dark greys came out slightly darker than before.
• Menu inside a ToolbarGroup still draws its own ring. Put it beside the group.

0.11.1

Includes everything from 0.11.0, plus one fix: the selected word in a plain TabBar stays at full strength in dark mode. The new selection filter was dimming it to 75%.

0.11.0 was never published to npm, so 0.11.1 is the version to install.

Controls, motion and corners refitted against a frame-by-frame side-by-side with the iOS 27 simulator.

Install

npm install @onlymoein/liquidglass

Changed

• Menu: the pill squeezes to a ball, swells open and closes as a droplet into its trigger. The doubled label after closing is fixed.
• Tab bar: the selection deepens the colour instead of greying it, a quick tap still lifts the lens, and the bar swells 5% under a finger.
• Switch and slider: a sharp clear lens with a dark outline, no ring at rest, and native sizes.
• Buttons: the glass press washes out and fades its label, and padding is now 12/20, so a regular "Continue" button is 94pt wide.
• Alert: measured size, scale-in and red. The stray focus ring on the first button is gone.
• Sheet: the motion is refitted, and it rests 451pt tall with an 8pt inset and a 57×4pt grabber.
• Corners: continuous in Safari and Chromium. Alerts and menus use a radius of 33, sheets 38.

Behaviour changes

• Menu opens when the finger lifts on touch.
• Slider on touch ignores taps on the track and drags relative to where you grabbed it.
• Filled buttons are opaque.
• Primary text is pure black.
• New token --lg-destructive-ink colours destructive labels. --lg-destructive is still used for fills.

How close it is

On the iOS 27 simulator, light mode:

• Menu opening: height and position match native, and width is within 4pt.
• Sheet: within about 2pt once it's moving.
• Corners: within about ¼pt on the shapes measured.
• Glass panel over grey: 196 against 197 out of 255.

Still different from native:

• Safari has no edge bend, including the rings on clear glass and the warped track inside the switch lens.
• Native lets a faint blocky ghost of the background through its glass, most visibly in dark mode. CSS blur is smooth, so dark mode glass is the biggest remaining difference.
• The menu droplet joins its trigger with a straight seam for about 100ms.
• Secondary text and the grabber only approximate native's colour pickup, and the dark mode press is slightly greyer.
• The first frame or two of a sheet or alert are lost on the simulator.
• The native sheet's small sideways drift isn't implemented.
• ContextMenu doesn't have the new morph.

Not checked in this pass:

• Segmented control, stepper, progress, spinner, toolbar and merged glass weren't re-checked.
• Switch, slider and tab lens motion was compared by eye only.
• Chromium motion wasn't compared.
• Performance wasn't re-measured.
• Firefox keeps circular corners and, like real iPhones, hasn't been tested.

parity/PLAN.md has the numbers and the full list.

0.11.0

Not published to npm. Use 0.11.1, which fixes a dimmed tab label in dark mode.

Controls, motion and corners refitted against a frame-by-frame side-by-side with the iOS 27 simulator.

Install

npm install @onlymoein/liquidglass

Changed

• Menu: the pill squeezes to a ball, swells open and closes as a droplet into its trigger. The doubled label after closing is fixed.
• Tab bar: the selection deepens the colour instead of greying it, a quick tap still lifts the lens, and the bar swells 5% under a finger.
• Switch and slider: a sharp clear lens with a dark outline, no ring at rest, and native sizes.
• Buttons: the glass press washes out and fades its label, and padding is now 12/20, so a regular "Continue" button is 94pt wide.
• Alert: measured size, scale-in and red. The stray focus ring on the first button is gone.
• Sheet: the motion is refitted, and it rests 451pt tall with an 8pt inset and a 57×4pt grabber.
• Corners: continuous in Safari and Chromium. Alerts and menus use a radius of 33, sheets 38.

Behaviour changes

• Menu opens when the finger lifts on touch.
• Slider on touch ignores taps on the track and drags relative to where you grabbed it.
• Filled buttons are opaque.
• Primary text is pure black.
• New token --lg-destructive-ink colours destructive labels. --lg-destructive is still used for fills.

How close it is

On the iOS 27 simulator, light mode:

• Menu opening: height and position match native, and width is within 4pt.
• Sheet: within about 2pt once it's moving.
• Corners: within about ¼pt on the shapes measured.
• Glass panel over grey: 196 against 197 out of 255.

Still different from native:

• Safari has no edge bend, including the rings on clear glass and the warped track inside the switch lens.
• Native lets a faint blocky ghost of the background through its glass, most visibly in dark mode. CSS blur is smooth, so dark mode glass is the biggest remaining difference.
• The menu droplet joins its trigger with a straight seam for about 100ms.
• Secondary text and the grabber only approximate native's colour pickup, and the dark mode press is slightly greyer.
• The first frame or two of a sheet or alert are lost on the simulator.
• The native sheet's small sideways drift isn't implemented.
• ContextMenu doesn't have the new morph.

Not checked in this pass:

• Segmented control, stepper, progress, spinner, toolbar and merged glass weren't re-checked.
• Switch, slider and tab lens motion was compared by eye only.
• Chromium motion wasn't compared.
• Performance wasn't re-measured.
• Firefox keeps circular corners and, like real iPhones, hasn't been tested.

parity/PLAN.md has the numbers and the full list.

0.10.0

The glass now follows numbers measured from real iOS 27 controls on the iPhone 17 simulator, and the library gains the controls it was missing.

Install

npm install @onlymoein/liquidglass

New

• SegmentedControl, Stepper, Progress, Spinner
• Alert, Sheet, ContextMenu, GlassGroup
• Button takes a size, Input takes variant="fill", and TabBar takes icon, minimized and onExpand

Changed

• New glass material: blur, tone, edge bend, rim and shadow are all measured, and they change with the size of the control.
• Switch and Slider have clear-glass thumbs.
• Menu is now a glass surface that opens centred, using measured springs.

Breaking

• Menu now defaults to align: "center" and no chevron. Pass chevron to get it back.

How close it is

Colour difference from native, in levels out of 255: about 2 in Chromium in both themes, about 2 in Safari light mode, and about 27 in Safari dark mode (worst on bright backgrounds).

Still open:

• Safari has no edge bend.
• Sheet, alert, switch, slider and tab lens motion isn't fitted yet.
• Corners aren't continuous yet.
• Firefox and real iPhones haven't been tested.

parity/PLAN.md has the numbers and the full list.