@glasshome/ui 1.6.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.6.0",
+	"version": "2.0.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",
@@ -68,7 +68,8 @@
 		"lint": "biome check .",
 		"test": "vitest run",
 		"test:watch": "vitest",
-		"dev:gallery": "vite --config vite.dev.config.ts"
+		"dev:gallery": "vite --config vite.dev.config.ts",
+		"gallery:shots": "node dev/shoot.mjs"
 	},
 	"peerDependencies": {
 		"astro": ">=4",
@@ -78,7 +79,7 @@
 	},
 	"dependencies": {
 		"@iconify-icon/solid": "^3.0.3",
-		"@kobalte/core": "^0.13.11",
+		"@kobalte/core": "^0.13.13",
 		"clsx": "^2.1.1",
 		"cva": "^1.0.0-beta.4",
 		"embla-carousel": "^8.5.1",
@@ -96,6 +97,7 @@
 		"@types/node": "^25.2.2",
 		"fallow": "3.17.0",
 		"happy-dom": "^20.11.0",
+		"playwright": "^1.60.0",
 		"publint": "^0.3.21",
 		"tailwindcss": "^4.1.13",
 		"tw-animate-css": "^1.4.0",

package/src/lib/alert-tones.ts

@@ -46,21 +46,26 @@ export const alertFill = (c: string) => `color-mix(in srgb, ${c} 9%, transparent
 export const alertIconFill = (c: string) => `color-mix(in srgb, ${c} 16%, transparent)`;
 
 export const ALERT_CLASS =
-	"relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
+	"relative overflow-hidden flex items-start gap-3 rounded-lg p-3 backdrop-blur-sm";
 /* gh-alert-* svg chrome lives in globals.css as real CSS: an arbitrary variant
  * here only works if the consumer's Tailwind scans package source. */
 export const ALERT_ICON_CLASS =
 	"gh-alert-icon flex size-8 shrink-0 items-center justify-center rounded-md";
 export const ALERT_ICON_BG_CLASS =
 	"gh-alert-icon-bg pointer-events-none absolute -right-3 -bottom-4";
-export function alertIconBgStyle(color: string): Record<string, string> {
+export function iconBgMaskStyle(color: string): Record<string, string> {
 	return {
 		color,
-		opacity: "0.32",
 		"-webkit-mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
 		"mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
 	};
 }
+export function alertIconBgStyle(color: string): Record<string, string> {
+	return {
+		...iconBgMaskStyle(color),
+		opacity: "0.32",
+	};
+}
 export const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
 export const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
 export const ALERT_DESCRIPTION_CLASS = "gh-alert-desc text-foreground/80 text-sm leading-snug";

package/src/lib/badge-tone.ts

@@ -1,4 +1,11 @@
+import { NEUTRAL_KNOBS } from "./glass-tone.js";
+import { CHIP } from "./pill-classes.js";
+
 export const BADGE_DEFAULT_TONE = "var(--primary)";
 
-export const BADGE_TONE_CLASS =
-	"inline-flex w-fit shrink-0 cursor-default select-none items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-0.5 font-medium text-xs";
+/** @deprecated CHIP from lib/pill-classes.ts */
+export const BADGE_TONE_CLASS = CHIP;
+
+/* The neutral chip also drops the tint sheen: at chip size it reads as a
+ * milky cap over the text. */
+export const BADGE_NEUTRAL_KNOBS = `${NEUTRAL_KNOBS} [--glass-light:0.08]`;

package/src/lib/button-variants.ts

@@ -1,5 +1,10 @@
 import { cva } from "cva";
 
+/* One outline material, worn by the pill and by Toggle: `glass` owns the
+ * element's background and border, so a real border-input box is a no-op. */
+export const OUTLINE_SURFACE =
+	"glass [--glass-edge:var(--border)] hover:[--glass-base:var(--muted)] dark:[--glass-base:var(--input)] dark:hover:[--glass-base:var(--muted)]";
+
 /* Buttons are glass pills on an OPAQUE --card base: a translucent fill goes
  * muddy over dark heroes/sections. Every class is literal for Tailwind's
  * scanner. `size: none` is sizeless for callers that own height/padding. */
@@ -7,7 +12,7 @@ export const buttonVariants = cva({
 	// structural-ok: the [&_svg]: utilities stay in Tailwind's utility layer so a
 	// caller's own [&_svg]:size-* override can still win; unlayered real CSS in
 	// globals.css would beat every consumer utility regardless of specificity.
-	base: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	base: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium text-sm outline-none transition-glass focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	variants: {
 		variant: {
 			default:
@@ -16,8 +21,7 @@ export const buttonVariants = cva({
 				"glass glass-tint [--glass-text:61%] [--glass-tone:var(--destructive)] [--glass-wash:30%] focus-visible:ring-destructive/30 hover:[--glass-edge:color-mix(in_srgb,var(--destructive)_60%,transparent)] hover:[--glass-wash:40%]",
 			secondary:
 				"glass glass-tint [--glass-tone:var(--accent)] [--glass-wash:30%] hover:[--glass-edge:color-mix(in_srgb,var(--accent)_60%,transparent)] hover:[--glass-wash:40%]",
-			outline:
-				"glass [--glass-edge:var(--border)] hover:[--glass-base:var(--muted)] dark:[--glass-base:var(--input)] dark:hover:[--glass-base:var(--muted)]",
+			outline: OUTLINE_SURFACE,
 			ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
 			link: "text-primary underline-offset-4 hover:underline",
 		},
@@ -44,4 +48,4 @@ export const BUTTON_OUTLINE_CLASS = buttonVariants({ variant: "outline", size: "
 /* Round ghost icon button (copy buttons, small icon actions). Size and text
  * color stay at the call site. */
 export const ICON_BUTTON_CLASS =
-	"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-all duration-150 hover:bg-primary/10 active:scale-90";
+	"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-glass duration-150 hover:bg-primary/10 active:scale-[0.97]";

package/src/lib/card-classes.ts

@@ -13,25 +13,30 @@ export const CARD_SURFACE = `${CARD_SURFACE_BASE} ${CARD_BLUR}`;
  * contexts where backdrop-blur can't run. */
 export const CARD_SURFACE_OPAQUE = CARD_KNOBS;
 
+/* Rows inside a section: the card material again, one step in, so a row never
+ * reads as a flat plate on a glass panel. */
+export const SECTION_ROW_SURFACE =
+	"glass [--glass-rim:0.3] [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)]";
+
 /* Recessed track frame (tabs, segmented controls). */
 export const TRACK_SURFACE = "border border-border/50 bg-card/40 backdrop-blur-sm";
 
 export const CARD_PADDING = {
-	slots: "flex flex-col gap-3 py-3 md:gap-4 md:py-4",
-	md: "p-4",
-	sm: "p-3",
+	slots: "flex flex-col gap-3 p-3 md:gap-4 md:p-4",
+	md: "flex flex-col gap-3 p-4",
+	sm: "flex flex-col gap-2 p-3",
 	none: "",
 } as const;
 
 export type CardPadding = keyof typeof CARD_PADDING;
 
 export const CARD_INTERACTIVE =
-	"cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border";
+	"cursor-pointer transition-glass hover:[--glass-light:0.09] focus-within:[--glass-edge:var(--border)]";
 
 export const CARD_HEADER_CLASS =
-	"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] md:px-4";
+	"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]";
 export const CARD_TITLE_CLASS = "font-semibold leading-none";
 export const CARD_DESCRIPTION_CLASS = "text-muted-foreground text-sm";
 export const CARD_ACTION_CLASS = "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
-export const CARD_CONTENT_CLASS = "px-3 md:px-4";
-export const CARD_FOOTER_CLASS = "flex items-center px-3 md:px-4 [.border-t]:pt-6";
+export const CARD_CONTENT_CLASS = "min-w-0";
+export const CARD_FOOTER_CLASS = "flex items-center";

package/src/lib/carousel-classes.ts

@@ -1,6 +1,7 @@
 /* Shared by the Solid <Carousel> and astro/Carousel.astro so the two render the
  * same markup. Astro renders slides server-side (SEO, LCP) and enhances them on
  * the client with the same embla engine. */
+import { POSITION_BAR, POSITION_BAR_LIT } from "./position-bar-classes.js";
 
 export type CarouselTransition = "slide" | "fade" | "wipe";
 
@@ -40,7 +41,5 @@ export function carouselItem(
 export const CAROUSEL_DOTS = "flex items-center justify-center gap-2";
 
 export function carouselDot(active: boolean) {
-	return `h-1.5 rounded-full transition-all hover:bg-foreground/70 ${
-		active ? "w-6 bg-foreground/80" : "w-1.5 bg-foreground/40"
-	}`;
+	return `${POSITION_BAR} ${active ? `w-6 ${POSITION_BAR_LIT}` : "w-2.5 hover:[--glass-light:0.12]"}`;
 }

package/src/lib/glass-tone.ts

@@ -21,3 +21,11 @@ export function toneTextMix(color: string): number {
 export function glassToneText(color: string): string {
 	return `color-mix(in oklab, ${color} ${toneTextMix(color)}%, var(--foreground))`;
 }
+
+/* The neutral tone every "no verdict" surface passes (neutral badges,
+ * HeroOption's default accent). Through the tint formula a light grey tone
+ * lifts the fill to the same grey as its text, so a neutral surface sinks
+ * its wash to keep the text on a deeper ground. */
+const NEUTRAL_TONE = "var(--muted-foreground)";
+export const NEUTRAL_KNOBS = "[--glass-wash:12%]";
+export const isNeutralTone = (tone: string | undefined) => tone === NEUTRAL_TONE;

package/src/lib/input-classes.ts

@@ -17,4 +17,26 @@ export const INPUT_SURFACE =
  * in the light theme. */
 export const FIELD_CHROME = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
 
-export const INPUT_CLASS = `flex h-9 w-full min-w-0 rounded-md ${INPUT_SURFACE} px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`;
+/* Focus on a glass element: border utilities are no-ops there, so the edge
+ * moves through the knob and the ring paints outside. */
+export const FOCUS_RING =
+	"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:[--glass-edge:var(--ring)]";
+
+export const INVALID_RING =
+	"aria-invalid:[--glass-edge:var(--destructive)] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
+
+/* The three control heights every field, trigger and button shares. */
+export const CONTROL_H = {
+	sm: "h-8",
+	default: "h-9",
+	lg: "h-10",
+} as const;
+
+/* Field type: 16px on touch so iOS does not zoom, 14px from md up. */
+export const FIELD_TEXT = "text-base md:text-sm";
+
+/* Trigger-shaped fields (Select, pickers) compose from these; the text input
+ * adds file:* and selection styling on top. */
+export const FIELD_CONTROL = `flex w-full min-w-0 rounded-md ${INPUT_SURFACE} px-3 ${FIELD_TEXT} transition-[color,box-shadow] placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ${FOCUS_RING} ${INVALID_RING}`;
+
+export const INPUT_CLASS = `${FIELD_CONTROL} ${CONTROL_H.default} py-1 selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm`;

package/src/lib/layers.ts

@@ -0,0 +1,12 @@
+/* Stacking order for floating surfaces. Sheets sit under popovers so a
+ * dropdown opened inside a sheet stacks naturally. Class strings stay literal
+ * for Tailwind's scanner; numbers are for inline styles. */
+export const Z = {
+	sheet: 40,
+	overlay: 50,
+} as const;
+
+export const Z_CLASS = {
+	sheet: "z-40",
+	overlay: "z-50",
+} as const satisfies Record<keyof typeof Z, string>;

package/src/lib/menu-classes.ts

@@ -0,0 +1,21 @@
+/* One menu row, label and separator for every listbox and menu (Select,
+ * DropdownMenu, ContextMenu, pickers). Highlight comes from SlidingIndicator,
+ * so the row itself paints no background. A toned row (MenuItemPart sets
+ * data-tone) guards off the muted svg color so its icon inherits the row's
+ * own currentColor instead.
+ *
+ * The horizontal padding is a separate term: an indented row (checkbox, radio)
+ * needs pl-8 pr-2, and tailwind-merge does not cancel px-2 for a more specific
+ * pl-8/pr-2 pair, so both would stay in the class list and the visible result
+ * would come down to CSS emit order. Such a row composes MENU_ITEM_BASE. */
+export const MENU_ITEM_BASE =
+	// structural-ok: guards an svg color rule on a sibling data attribute this package always renders, not a class the consumer must also scan
+	"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 text-sm outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&:not([data-tone])_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>iconify-icon]:shrink-0 [&>iconify-icon]:text-[16px]";
+
+export const MENU_ITEM_X = "px-2";
+
+export const MENU_ITEM = `${MENU_ITEM_BASE} ${MENU_ITEM_X}`;
+
+export const MENU_LABEL = "px-2 py-1.5 font-medium text-muted-foreground text-xs";
+
+export const MENU_SEPARATOR = "-mx-1 my-1 h-px bg-border";

package/src/lib/motion-classes.ts

@@ -0,0 +1,40 @@
+/* The motion vocabulary. A thing arrives one of three ways and leaves the
+ * same way in reverse, faster. Durations and curves are theme tokens, so
+ * prefers-reduced-motion zeroes all of it in one place. */
+
+const ARRIVE =
+	"data-[expanded]:animate-in data-[expanded]:duration-(--duration-expand) data-[expanded]:ease-(--ease-expand)";
+const LEAVE =
+	"data-[closed]:animate-out data-[closed]:duration-(--duration-micro) data-[closed]:ease-(--ease-contract)";
+
+/* Anchored panels (menu, popover, tooltip, hover card): unfold from the
+ * trigger edge. Kobalte writes the origin per placement. */
+export const OVERLAY_MOTION = `origin-(--kb-popper-content-transform-origin) ${ARRIVE} data-[expanded]:fade-in-0 data-[expanded]:zoom-in-90 ${LEAVE} data-[closed]:fade-out-0 data-[closed]:zoom-out-95`;
+
+/* Field pickers: paired with gutter={0} + anchorToTriggerTop, the clip-path
+ * reveal is what makes the panel read as the field expanding, not a box
+ * dropping in. */
+export const FIELD_MOTION = "data-[closed]:animate-select-out data-[expanded]:animate-select-in";
+
+/* Anchored panels that own their trigger (dropdown menu): the panel covers
+ * the trigger (gutter 0 + anchorToTriggerTop) and unrolls out of the
+ * trigger's box; the content writes --morph-h/--morph-radius from the
+ * trigger it replaces, --morph-w is kobalte's anchor width. */
+export const MORPH_MOTION =
+	"[--morph-w:var(--kb-popper-anchor-width)] min-w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-morph-in data-[closed]:animate-morph-out";
+
+/* Children of a panel arrive staggered through the `gh-stagger` class
+ * (globals.css): one door, no per-row index, mount-only. */
+export const STAGGER = "gh-stagger";
+
+/* Modals: rise into place. Sheets keep their slide. */
+export const MODAL_MOTION = `${ARRIVE} data-[expanded]:fade-in-0 data-[expanded]:zoom-in-[0.94] data-[expanded]:slide-in-from-bottom-2 ${LEAVE} data-[closed]:fade-out-0 data-[closed]:zoom-out-[0.96]`;
+
+export const SCRIM_MOTION = `${ARRIVE} data-[expanded]:fade-in-0 ${LEAVE} data-[closed]:fade-out-0`;
+
+/* Content that swaps in place (tab panel, a row added to a list). */
+export const SETTLE_MOTION =
+	"animate-in fade-in-0 slide-in-from-bottom-1 duration-(--duration-state) ease-(--ease-expand)";
+
+/* Every pressable dips the same amount. */
+export const PRESS_DIP = "active:scale-[0.97]";

package/src/lib/overlay-classes.ts

@@ -1,13 +1,16 @@
-/* Rim/sheen raised above card level (0.3/0.05) so the bevel and highlight read
- * on large panels instead of smearing into a flat matte gray. */
+import { Z_CLASS } from "./layers.js";
+
+/* Flat frost. No corner sheen: on a panel this size the 120% radial is a
+ * 13-step grey ramp that bands and washes half the surface, so the glass read
+ * comes from the rim line, the blur and the grain instead. */
 const OVERLAY_KNOBS =
-	"glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)]";
+	"glass glass-frost [--glass-rim:0.5] [--glass-lift:0.6] [--glass-light:0] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)]";
 
 /* Split from the surface the way CARD_BLUR is, so a host can gate it off and
  * paint a precomputed frost instead. */
-export const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
+export const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.2]";
 
-export const OVERLAY_SURFACE_BASE = `${OVERLAY_KNOBS} [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)]`;
+export const OVERLAY_SURFACE_BASE = `${OVERLAY_KNOBS} [--glass-base:color-mix(in_srgb,var(--popover)_92%,transparent)]`;
 
 /* Floating-panel glass: translucent popover fill over a blur, so a menu reads
  * as glass and not as a flat plate. */
@@ -21,3 +24,17 @@ export const OVERLAY_SURFACE_OPAQUE = `${OVERLAY_KNOBS} [--glass-base:var(--popo
 /* Modal scrim behind dialogs/sheets. BottomSheet keeps its own unblurred scrim
  * (backdrop-blur is too slow on mobile). */
 export const SCRIM_CLASS = "bg-background/70 backdrop-blur-md";
+
+/* The floating panel every anchored surface wears. Padding is the caller's:
+ * menus add p-1, popovers p-4, pickers none. */
+export const FLOATING_PANEL = `${OVERLAY_SURFACE} relative ${Z_CLASS.overlay} rounded-md text-popover-foreground outline-hidden`;
+
+/* Zero-height rect on the trigger's top edge. With gutter 0 and the panel
+ * width bound to --kb-popper-anchor-width, the panel covers the trigger and
+ * grows downward from it. */
+export const anchorToTriggerTop = (anchor?: HTMLElement) => {
+	const r = anchor?.getBoundingClientRect();
+	return r
+		? { x: r.left, y: r.top, width: r.width, height: 0 }
+		: { x: 0, y: 0, width: 0, height: 0 };
+};

package/src/lib/picker-classes.ts

@@ -0,0 +1,17 @@
+import { CONTROL_H, FIELD_CONTROL } from "./input-classes.js";
+
+/* The one trigger every field-shaped picker wears (Select, AreaPicker,
+ * EntitySelector, IconPicker, ImagePicker). While the panel is open it covers
+ * the trigger at the same width and radius, so the trigger drops its own edge
+ * and focus ring: leaving them on paints a double border at the corners and a
+ * ring halo down the sides of the panel. The compound data+focus variants are
+ * needed because the trigger keeps focus while the panel is open. */
+export const PICKER_TRIGGER = `${FIELD_CONTROL} ${CONTROL_H.default} items-center justify-between gap-2 text-left hover:[--glass-light:0.09] disabled:hover:[--glass-light:0.04] data-[expanded]:ring-0 data-[expanded]:[--glass-edge:transparent] data-[expanded]:focus-visible:ring-0 data-[expanded]:focus-visible:[--glass-edge:transparent]`;
+
+/* Every picker list scrolls at the same size, on the list itself, never on the
+ * panel: a max-height on the panel clips the search row and the footer too. */
+export const PICKER_LIST = "max-h-[min(70vh,400px)] overflow-y-auto gh-scroll";
+
+/* 44 px: the minimum comfortable touch target, for the search row when a picker
+ * opens as a sheet. CONTROL_H has no touch step yet, so it is named here. */
+export const CONTROL_H_TOUCH = "h-11";

package/src/lib/pill-classes.ts

@@ -0,0 +1,13 @@
+/* Small tinted things share the Badge material. A chip is a rounded-full glass
+ * pill (Badge, CountPill, scope chips); an icon pill is the square-ish glass
+ * well behind a glyph (SectionIcon, ItemMedia, EmptyMedia). Tone comes from the
+ * caller's --glass-tone (via Badge's style or a [--glass-tone:…] utility);
+ * neutral wells set none and read as foreground glass. */
+export const CHIP =
+	"glass glass-tint inline-flex w-fit shrink-0 select-none items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 font-medium text-xs";
+
+export const ICON_PILL =
+	"glass flex shrink-0 items-center justify-center [--glass-rim:0.4] [--glass-light:0.08] [--glass-base:color-mix(in_srgb,var(--foreground)_10%,transparent)]";
+
+export const ICON_PILL_TINT =
+	"glass glass-tint flex shrink-0 items-center justify-center [--glass-rim:0.4] [--glass-wash:18%]";

package/src/lib/position-bar-classes.ts

@@ -0,0 +1,10 @@
+import { FIELD_CHROME } from "./input-classes.js";
+
+/* One short bar per position among siblings (Carousel pagination,
+ * StepIndicator): the slider's rail, lit with the slider's fill. Width is the
+ * caller's (a stepper keeps every bar equal, a carousel stretches the current
+ * one). */
+export const POSITION_BAR = `${FIELD_CHROME} h-1.5 rounded-full transition-glass duration-(--duration-morph) ease-(--ease-morph)`;
+
+export const POSITION_BAR_LIT =
+	"glass glass-tint [--glass-tone:var(--primary)] [--glass-wash:70%] [--glass-drop:0%]";

package/src/lib/section-tokens.ts

@@ -1,8 +1,13 @@
-/* Concentric radius: inner = outer - padding, clamped for tiny --radius themes. */
+/* Concentric radius: inner = outer - padding, clamped for tiny --radius themes.
+ * The padding term is 3 spacing units, the same number SECTION_PADDING's p-3
+ * resolves to, so the two cannot drift apart. */
 export const SECTION_OUTER_RADIUS = "rounded-[var(--radius)]";
-export const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-0.75rem))]";
+export const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-var(--spacing)*3))]";
 export const SECTION_PADDING = "p-3";
 
-const SECTION_ROW_SURFACE = `${SECTION_INNER_RADIUS} border border-border/60 bg-card/60`;
+/* Not card-classes' SECTION_ROW_SURFACE: this is the flat pre-glass fill, kept
+ * only for the deprecated class below. */
+const LEGACY_SECTION_ROW_SURFACE = `${SECTION_INNER_RADIUS} border border-border/60 bg-card/60`;
 
-export const SECTION_ROW_CLASS = `${SECTION_ROW_SURFACE} ${SECTION_PADDING}`;
+/** @deprecated Render `SectionRow`, or compose `SECTION_ROW_SURFACE` from card-classes. */
+export const SECTION_ROW_CLASS = `${LEGACY_SECTION_ROW_SURFACE} ${SECTION_PADDING}`;

package/src/lib/segment-classes.ts

@@ -0,0 +1,7 @@
+import { CONTROL_H, FOCUS_RING } from "./input-classes.js";
+
+/* One segmented-item look shared by TabsTrigger and ToggleGroupItem (via
+ * toggleVariants' base): both sit inside a TRACK_SURFACE track and pick one
+ * of a few siblings, so they share height, type and focus ring. Callers still
+ * layer their own variant/size classes on top through cn()'s tailwind-merge. */
+export const SEGMENT_ITEM = `inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md ${CONTROL_H.sm} px-3 font-medium text-sm outline-none transition-glass active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 ${FOCUS_RING}`;

package/src/lib/thumb-classes.ts

@@ -0,0 +1,21 @@
+/* The size-7 below in px (7 x --spacing, 0.27rem at a 16px root), rounded up:
+ * the colour wheel takes its ring thickness as a number, and a ring thinner
+ * than the thumb riding it lets the thumb overhang. */
+export const THUMB_SIZE = 31;
+
+/* The one draggable knob: switch, slider, colour slider, colour wheel. Colour
+ * is the caller's (state, per-thumb tint, live channel value), everything else
+ * is this recipe, so the four controls read as the same physical object. The
+ * focus ring is not part of it: on a slider the thumb takes focus, on a switch
+ * the track does. */
+export const THUMB_CLASS =
+	"block size-7 shrink-0 rounded-xl shadow-[0_2px_5px_oklch(0_0_0/0.35),inset_0_1px_0_oklch(1_0_0/0.35),inset_0_-2px_3px_oklch(0_0_0/0.2)]";
+
+/* A rail pads by half a thumb so the knob stays inside the track at both ends;
+ * the fill cancels the same inset to reach the rounded edges. */
+/* A thumb painted the live channel colour sits on a track of that same colour,
+ * so it needs its own edge to be found. */
+export const THUMB_COLOR_RING = "border-2 border-white/90";
+
+export const THUMB_RAIL_PAD = "px-3.5";
+export const THUMB_RAIL_BLEED = "-mx-3.5";

package/src/lib/use-is-mobile.ts

@@ -1,15 +1,19 @@
 import { createSignal, onCleanup, onMount } from "solid-js";
 
-const MOBILE_BREAKPOINT = 768;
+/* Tailwind's `sm` edge, so the JS branch (dialog → bottom sheet, picker →
+ * sheet, toast position) flips where the `sm:` utilities flip. */
+export const MOBILE_BREAKPOINT = 640;
 
-export function createIsMobile() {
-	const [isMobile, setIsMobile] = createSignal<boolean | undefined>(undefined);
+export function createIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {
+	const [isMobile, setIsMobile] = createSignal<boolean | undefined>(
+		typeof window !== "undefined" ? window.innerWidth < breakpoint : undefined,
+	);
 
 	onMount(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+		const onChange = () => setIsMobile(window.innerWidth < breakpoint);
 		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		setIsMobile(window.innerWidth < breakpoint);
 		onCleanup(() => mql.removeEventListener("change", onChange));
 	});
 

package/src/styles/globals.css

@@ -76,12 +76,42 @@
 	inherits: false;
 }
 
+/* Top-most layer: a tiled noise slice over the fill. Untyped for the same
+ * reason as --glass-frost. */
+@property --glass-grain {
+	syntax: "*";
+	inherits: false;
+}
+
 /* --glass-base and --glass-edge need var() defaults, which @property forbids,
  * so they reset here instead. MUST stay in @layer base so [--glass-*] utilities
  * and inline style knobs still win. Rim shadows are declared on .glass (not
  * :root) so calc(var(--glass-rim)) resolves per element, not frozen at :root. */
+:root {
+	/* biome-ignore-start lint/correctness/noMissingVarFunction: transition-property takes property names, and these are the registered knobs */
+	--glass-transition:
+		--glass-tone, --glass-wash, --glass-light, --glass-shade, --glass-rim, --glass-lift,
+		--glass-glow, --glass-drop, --glass-text, color, background-color, border-color, box-shadow,
+		opacity, transform, translate, scale, width, height;
+	/* biome-ignore-end lint/correctness/noMissingVarFunction: see above */
+}
+
+@layer utilities {
+	.transition-glass {
+		transition-property: var(--glass-transition);
+	}
+}
+
 @layer base {
 	:where(.glass) {
+		/* State never cuts: the registered knobs interpolate, so a tone, wash or
+		 * sheen swap (checked, selected, hover) morphs on the state duration.
+		 * Layered, so a surface that names its own transition keeps it; such a
+		 * surface says transition-glass, never transition-all: Chromium's `all`
+		 * does not cover registered custom properties. */
+		transition-property: var(--glass-transition);
+		transition-duration: var(--duration-state);
+		transition-timing-function: var(--ease-emphasis);
 		--glass-base: var(--card);
 		--glass-edge: color-mix(in srgb, var(--border) 60%, transparent);
 		--glass-rim-raise:
@@ -102,6 +132,12 @@
 	:where(.glass-sink) {
 		--glass-rim-shine: var(--glass-rim-sink);
 	}
+	/* Frosted: large translucent panels (dialogs, sheets, menus). A fine grey
+	 * grain on top breaks the 8-bit banding a wide low-alpha gradient shows,
+	 * and reads as frost instead of a flat plate. */
+	:where(.glass-frost) {
+		--glass-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0.05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
+	}
 }
 
 /* The ONE glass formula. Neutral by default (--glass-tone transparent makes
@@ -128,9 +164,10 @@
 	border: 1px solid var(--glass-edge);
 	/* Base is a gradient layer (not background-color) so the frost slice can sit
 	 * BELOW it — background-color always paints under every image layer, which
-	 * would put the frost above the fill. Layer order top→bottom: light, shade,
-	 * tone wash, base fill, frost. */
+	 * would put the frost above the fill. Layer order top→bottom: grain, light,
+	 * shade, tone wash, base fill, frost. */
 	background:
+		var(--glass-grain, none),
 		radial-gradient(
 			var(--glass-sheen, 120% 120%) at 22% 8%,
 			oklch(1 0 0 / var(--glass-light)),
@@ -176,21 +213,6 @@
 	pointer-events: none;
 }
 
-/* PageHeader banner surface: bespoke three-stop card gradient (its material
- * predates the one-glass formula) over the same frost slot .glass uses, so
- * hosts wire the performant-blur engine identically on both. Frost defaults
- * to none → plain gradient banner. */
-:where(.glass-banner) {
-	background:
-		linear-gradient(
-			to bottom right,
-			color-mix(in srgb, var(--card) 55%, transparent),
-			color-mix(in srgb, var(--card) 25%, transparent),
-			color-mix(in srgb, var(--card) 10%, transparent)
-		),
-		var(--glass-frost, none);
-}
-
 /**
  * Consistent, theme-aware overlay scrollbar across browsers. Firefox uses
  * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos
@@ -198,11 +220,17 @@
  * scroll surface that isn't a bare page — <ScrollArea>, dialogs, sheets.
  */
 .gh-scroll {
+	/* The width the bar reserves, published so a scroll container can subtract it
+	   from its own inset and keep its content column aligned with the panel's
+	   other parts. Blink and Gecko decide that width from scrollbar-width: thin
+	   and ignore the pseudo below; 10px is what they reserve, and the pseudo uses
+	   the same number so a WebKit build without scrollbar-width matches. */
+	--scrollbar-w: 10px;
 	scrollbar-width: thin;
 	scrollbar-color: color-mix(in srgb, var(--foreground) 22%, transparent) transparent;
 	&::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
+		width: var(--scrollbar-w);
+		height: var(--scrollbar-w);
 	}
 	&::-webkit-scrollbar-track {
 		background: transparent;
@@ -284,3 +312,46 @@
 		animation: none;
 	}
 }
+
+/* Children arrive one after another. Mount-only (a CSS animation runs when
+ * the child is inserted), so a live re-render never re-staggers; a child
+ * added later takes its own slot, capped so a long list never waits. The
+ * travel is `translate`, never `transform`, so a positioned child (the
+ * sliding indicator) keeps its own transform. A group is transparent: its
+ * rows take slots, it does not. Slots come from --i: nth-child below for a
+ * flat list, or written inline by a part that knows its true order. */
+@keyframes stagger-in {
+	from {
+		opacity: 0;
+		/* Upward: a child of a scroll container must not extend its scrollable
+		 * height mid-animation, and rows trail a downward-growing edge. */
+		translate: 0 -8px;
+	}
+	to {
+		opacity: 1;
+		translate: 0 0;
+	}
+}
+.gh-stagger > :not([role="group"]),
+.gh-stagger > [role="group"] > * {
+	animation: stagger-in calc(var(--duration-morph) * 0.5) var(--ease-emphasis) both;
+	animation-delay: calc(var(--stagger-base, 80ms) + var(--i, 0) * var(--stagger-step, 60ms));
+}
+.gh-stagger > :nth-child(2) {
+	--i: 1;
+}
+.gh-stagger > :nth-child(3) {
+	--i: 2;
+}
+.gh-stagger > :nth-child(4) {
+	--i: 3;
+}
+.gh-stagger > :nth-child(5) {
+	--i: 4;
+}
+.gh-stagger > :nth-child(6) {
+	--i: 5;
+}
+.gh-stagger > :nth-child(n + 7) {
+	--i: 6;
+}