@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/components/constellation/index.d.ts

@@ -2,5 +2,5 @@ export { default as Constellation } from "./Constellation.vue";
 export { seedField, stepField, refitField, buildEdges, appendPointerWeb, parallaxNodePos, BASE_WIDTH, } from "./constellationField";
 export { DEFAULT_K_FLOOR, DEFAULT_PARALLAX, MAX_NODES, MAX_DEGREE, E_MAX, } from "./constants";
 export { stepWell, nearestNode, readInteractionConfig, warpStep, warpTo, setWarpTarget, warpSettled, pickWanderTarget, stepPinnedDrift, makePinnedDrift, DEFAULT_WELL_CONFIG, DEFAULT_WANDER_IDLE, DEFAULT_WANDER_JITTER, DEFAULT_PINNED_DRIFT_FRAC, DEFAULT_PINNED_DRIFT_DUR, DEFAULT_PINNED_DRIFT_IDLE, DEFAULT_PINNED_DRIFT_JITTER, WARP_RESPONSE, WARP_ZETA, fireBurst, BURST_FIRE_THRESHOLD, } from "./constellationInteraction";
-export { kVisOf, readPalette, parseColorRGBA, DEFAULT_PALETTE, } from "./constellationRender";
+export { kVisOf, readPalette, DEFAULT_PALETTE, } from "./constellationRender";
 export type { ConstellationNode, ConstellationEdge, ConstellationRipple, ConstellationPointer, ConstellationPalette, ConstellationField, ConstellationWarp, ConstellationWarpConfig, ConstellationWander, ConstellationWell, ConstellationWellConfig, ConstellationPinnedDrift, ConstellationProps, } from "./constellationTypes";

package/dist/components/controls/DarkModeToggle.vue.d.ts

@@ -1,6 +1,5 @@
 type DarkModeToggleSize = "sm" | "md" | "lg" | "control" | "dock";
 type __VLS_Props = {
-    passive?: boolean;
     /**
      * Button size. `sm` = 28px, `md` = 36px (default), `lg` = 44px.
      * `control` follows generic control CSS variables; `dock` follows
@@ -26,7 +25,6 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: DarkModeToggleSize;
-    passive: boolean;
     disableTransitions: boolean;
     eclipse: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/data-table/DataTable.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableColumn, DataTableSort } from "./types";
+import type { DataTableColumn, DataTableRowAttrs, DataTableRowRef, DataTableSort } from "./types";
 declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         columns: DataTableColumn<T>[];
@@ -8,7 +8,18 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         isLoading?: boolean;
         rowKey?: string;
         getRowId?: (row: T) => PropertyKey | null | undefined;
+        role?: "grid";
+        ariaLabel?: string;
+        ariaColCount?: number;
+        ariaRowCount?: number;
+        getRowAttrs?: DataTableRowAttrs<T>;
+        rowRef?: DataTableRowRef<T>;
+        tabbableRowId?: PropertyKey | null;
         sort?: DataTableSort;
+        /** Enables the controlled single-row selection contract. */
+        selectable?: boolean;
+        /** Stable identity of the selected row when `selectable` is true. */
+        selectedRowId?: PropertyKey | null;
         infinite?: boolean;
         hasMore?: boolean;
         /**
@@ -36,6 +47,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         onSelect?: ((row: T) => any) | undefined;
         "onUpdate:page"?: ((value: number) => any) | undefined;
         "onUpdate:sort"?: ((sort: DataTableSort) => any) | undefined;
+        "onUpdate:selectedRowId"?: ((id: PropertyKey) => any) | undefined;
         "onLoad-more"?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -69,7 +81,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
     } & {
         sentinel?: (props: {}) => any;
     };
-    emit: (((evt: "select", row: T) => void) & ((evt: "update:sort", sort: DataTableSort) => void) & ((evt: "load-more") => void)) & ((event: "update:page", value: number) => void);
+    emit: (((evt: "select", row: T) => void) & ((evt: "update:sort", sort: DataTableSort) => void) & ((evt: "update:selectedRowId", id: PropertyKey) => void) & ((evt: "load-more") => void)) & ((event: "update:page", value: number) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/data-table/index.d.ts

@@ -1,3 +1,2 @@
 export { default as DataTable } from "./DataTable.vue";
-export { default as DataTablePagination } from "./DataTablePagination.vue";
-export type { DataTableColumn, DataTableSort, DataTableProps } from "./types";
+export type { DataTableColumn, DataTableSort, DataTableProps, DataTableRowAttrs, DataTableRowRef, } from "./types";

package/dist/components/data-table/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 export interface DataTableColumn<T = any> {
     /** Unique key matching a property on the row object */
     key: string;
@@ -21,6 +21,10 @@ export interface DataTableSort {
     key: string;
     direction: "asc" | "desc";
 }
+/** Caller-owned bindings for a mounted data row. */
+export type DataTableRowAttrs<T> = (row: T, index: number) => HTMLAttributes | undefined;
+/** Receives each mounted row element and `null` when that row leaves the DOM. */
+export type DataTableRowRef<T> = (element: HTMLElement | null, row: T, index: number) => void;
 export interface DataTableProps<T = any> {
     /** Column definitions */
     columns: DataTableColumn<T>[];
@@ -38,8 +42,29 @@ export interface DataTableProps<T = any> {
     rowKey?: string;
     /** Optional resolver for stable unique row identities. Takes precedence over rowKey. */
     getRowId?: (row: T) => PropertyKey | null | undefined;
+    /** Opt into grid semantics on the native table projection. */
+    role?: "grid";
+    /** Accessible name applied to the native table projection. */
+    ariaLabel?: string;
+    /** Logical column count applied to the native table projection. */
+    ariaColCount?: number;
+    /** Native-table logical row count, including any header row. */
+    ariaRowCount?: number;
+    /**
+     * Attributes and handlers for each caller-windowed row. `aria-rowindex`
+     * applies only to the native-table projection and is omitted from cards.
+     */
+    getRowAttrs?: DataTableRowAttrs<T>;
+    /** Mounted row element callback for measurement or focus. */
+    rowRef?: DataTableRowRef<T>;
+    /** Stable id of the sole mounted row placed in the tab order. */
+    tabbableRowId?: PropertyKey | null;
     /** Current sort state */
     sort?: DataTableSort;
+    /** Enables controlled single-row selection and row keyboard activation. */
+    selectable?: boolean;
+    /** Stable identity of the selected row when selection is enabled. */
+    selectedRowId?: PropertyKey | null;
     /** When true, hides pagination and shows infinite scroll sentinel */
     infinite?: boolean;
     /** Whether more data is available (for infinite scroll mode) */

package/dist/components/deck/constants.d.ts

@@ -1,13 +1,3 @@
-/** SwiftUI `.smooth` — the deck's slide-transition + count-up curve: a calm settle
-    with a barely-there micro-overshoot, the right cadence for a content deck (the
-    page change reads as a settle, not a bounce). It is the SAME family the
-    `--spring-smooth` token derives from (`springLinearStops()` output), so the deck
-    inherits the constellation's iOS curve instead of forking a third easing
-    vocabulary — `--spring-deck: var(--spring-smooth)`. */
-export declare const DECK_SPRING: {
-    readonly response: 0.5;
-    readonly dampingFraction: 0.85;
-};
 /** The focused-control selector the keyboard handler tests: when a control (button
     / link / field) is focused, Space + digit jumps reach that control's native
     activation instead of being stolen for navigation (the C6 correctness fix). */

package/dist/components/deck/index.d.ts

@@ -2,7 +2,6 @@ export { useDeck } from "./composables/useDeck";
 export type { DeckCore, UseDeckOptions } from "./composables/useDeck";
 export { useDeckKeyboard, handleDeckKey } from "./composables/useDeckKeyboard";
 export type { DeckMoves, DeckKeyOptions, UseDeckKeyboardOptions, } from "./composables/useDeckKeyboard";
-export { installDeckSpring, deckEase, DECK_SPRING, } from "./composables/useDeckSpring";
 export { default as DeckPager } from "./DeckPager.vue";
 export { CONTROL_SELECTOR } from "./constants";
 export type { PagerWindow } from "../pager-dots/pagerWindow";

package/dist/components/dialog/DialogContent.vue.d.ts

@@ -35,7 +35,7 @@ type __VLS_Props = DialogContentProps & {
      * ease-in-out infinite"`); the rule
      * `[data-scrim-animation] { animation: var(--scrim-animation, none) }`
      * in `animations.css` consumes it on the portaled overlay element.
-     * Composes with the default `animate="fade"` enter/exit (distinct
+     * Composes with the default `.sheet-animate` enter/exit (distinct
      * selectors: `[data-state]` keys the fade, `[data-scrim-animation]`
      * keys the breath — no cascade fight).
      *
@@ -72,6 +72,11 @@ type __VLS_Props = DialogContentProps & {
      * double-up. The default keeps every existing mount byte-identical.
      */
     showClose?: boolean;
+    /**
+     * Bound the dialog to the viewport and make its content the single vertical
+     * scroll owner.
+     */
+    scroll?: boolean;
     /**
      * BD.W-OVERLAY-STAGE-COUPLE — the scene-staging enum for the centered modal band.
      * `none` (default — byte-identical to HEAD) leaves the page untouched; `dim`/
@@ -101,6 +106,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     surface: Surface;
+    scroll: boolean;
     placement: Placement;
     showClose: boolean;
     stage: "none" | "dim" | "scale" | "immersive";

package/dist/components/dialog/index.d.ts

@@ -5,5 +5,4 @@ export { default as DialogHeader } from './DialogHeader.vue';
 export { default as DialogTitle } from './DialogTitle.vue';
 export { default as DialogDescription } from './DialogDescription.vue';
 export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogScrollContent } from './DialogScrollContent.vue';
 export { default as DialogFooter } from './DialogFooter.vue';

package/dist/components/dock/DockControl.vue.d.ts

@@ -50,18 +50,18 @@ type __VLS_Props = {
     asChild?: boolean;
     class?: HTMLAttributes["class"];
 };
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    active: boolean;
     type: "button" | "reset" | "submit";
-    compact: boolean;
     disabled: boolean;
     asChild: boolean;
     as: string | Component;
     shape: "icon" | "tab";
+    compact: boolean;
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/dock/DockStack.vue.d.ts

@@ -64,10 +64,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:selected"?: ((value: string | undefined) => any) | undefined;
 }>, {
     position: "start" | "end";
-    wrap: boolean;
     mode: "stack" | "facets";
-    visibleCount: number;
+    wrap: boolean;
     coreLabel: string;
+    visibleCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/dock/GlassDock.vue.d.ts

@@ -21,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<DockProps, {
     keepOpen: () => void;
     release: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DockProps> & Readonly<{}>, {
+    backdropMode: import(".").DockBackdropMode;
     autoLuminance: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/dock/composables/dockMorphContext.d.ts

@@ -79,6 +79,8 @@ export interface UseDockMorphOrchestratorReturn {
     context: DockMorphContext;
     /** The outer pair's post-swap active layer id (call-site parity). */
     outerCurrentLayer: Readonly<Ref<string>>;
+    /** The outer pair's fading pane id, or null once settled. */
+    outerLeavingLayer: Readonly<Ref<string | null>>;
 }
 /**
  * The ONE morph engine for a dock instance. Drives a single `useDockSpring` handle

package/dist/components/dock/composables/dockMorphMeasure.d.ts

@@ -62,6 +62,16 @@ export interface UseDockExpandedSizeOptions {
      */
     expanded: Ref<boolean>;
 }
+export interface DockMorphMeasureFailure {
+    readonly code: "invalid-morph-min";
+    readonly token: string;
+}
+export interface UseDockExpandedSizeReturn {
+    /** The single fail-closed state for an unreadable semantic geometry token. */
+    failure: Readonly<Ref<DockMorphMeasureFailure | null>>;
+}
+/** Resolve the inherited semantic token through CSS itself, including max()/rem/var(). */
+export declare function resolveDockMorphMin(root: HTMLElement): number | null;
 /**
  * BD.W-DOCK-CORE — capture the two convex-blend endpoints ONCE PER STATE off the
  * ROOT box.
@@ -83,4 +93,4 @@ export interface UseDockExpandedSizeOptions {
  * expanded. So the FIRST morph from a freshly-mounted expanded dock already has a
  * real expanded endpoint + a sane collapsed floor — bounded by construction.
  */
-export declare function useDockExpandedSize(options: UseDockExpandedSizeOptions): void;
+export declare function useDockExpandedSize(options: UseDockExpandedSizeOptions): UseDockExpandedSizeReturn;

package/dist/components/dock/composables/useDockClickIntegrity.d.ts

@@ -2,10 +2,14 @@ import { type Ref } from "vue";
 export interface DockClickIntegrity {
     /** Capture-phase `pointerdown` handler — records the press-time element + state. */
     onPointerDownCapture: (event: PointerEvent) => void;
+    /** Capture-phase `pointercancel` handler — clears an abandoned press identity. */
+    onPointerCancelCapture: () => void;
     /** Capture-phase `click` handler — swallows an identity-changed post-swap click. */
     onClickCapture: (event: MouseEvent) => void;
     /** Mark the collapsed→expanded flip so the settle window opens (call on expand). */
     markExpandFlip: () => void;
+    /** The outer pane retained for the witnessed press, or null. */
+    pressKeepaliveLayer: Readonly<Ref<"full" | null>>;
 }
 export interface UseDockClickIntegrityOptions {
     /** The dock root element ref — the morph-state owner (`[data-morphing]`). */

package/dist/components/dock/composables/useDockOverflowFit.d.ts

@@ -3,14 +3,14 @@ import { type Ref } from "vue";
  * useDockOverflowFit — the fits-vs-scrollable mode resolution for the dock's native
  * scroll track (BI.W-DOCK-OVERFLOW, PASS-1 §2.5). A MEASURED branch (the wave's "single
  * container-query / measured branch"): it toggles `[data-dock-overflow]` on the dock root
- * when the active full layer's over-cap inline content exceeds its clamped port width.
+ * when content exceeds the horizontal full-layer port or vertical root scroll host.
  * The overflow.css scroll track + FadingScroll edge mask engage ONLY under that attr, so
  * at rest (fits) the mask is `none` (T-52 a — no 0px-fade shave) and the fisheye is FREE
  * (fisheye.css gates on `:not([data-dock-overflow])`, the exclusive-mode ruling).
  *
  * G9 / O5 — ZERO SCROLL LISTENER. The measure is RESIZE- and CONTENT-driven (a
- * `ResizeObserver` on the dock + the port, plus a `MutationObserver` on the port's
- * content). It never listens to `scroll` — the traveling indicator (`useSelectionIndicator`)
+ * `ResizeObserver` on the dock + the port, plus a narrowly filtered `MutationObserver`
+ * on dock content). It never listens to `scroll` — the traveling indicator (`useSelectionIndicator`)
  * lives inside the scroll port and travels WITH scroll in content coordinates, needing no
  * scroll listener; this fit measure adds none either.
  *

package/dist/components/dock/composables/useDockPopover.d.ts

@@ -48,6 +48,8 @@ export interface UseDockPopoverReturn {
     onFocusIn: () => void;
     /** Focus left the anchor+surface subtree → hide (focus stays while traversing members). */
     onFocusOut: (event: FocusEvent) => void;
+    /** Close the active popover and consume Escape so an ancestor layer stays open. */
+    onEscape: (event: KeyboardEvent) => void;
 }
 /**
  * Wire a dock-anchored top-layer popover: the native `popover` show/hide, the JS one-shot

package/dist/components/dock/composables/useDockShellProps.d.ts

@@ -1,5 +1,6 @@
 import { type ComputedRef } from "vue";
 export type DockSize = "sm" | "md" | "lg" | "xl";
+export type DockBackdropMode = "live" | "static";
 /**
  * The ONE GlassDock prop shape (AZ.W-DOCK-TAXONOMY — the discriminated union is
  * gone). Every dock — horizontal or vertical — reads the SAME surface; orientation
@@ -8,6 +9,12 @@ export type DockSize = "sm" | "md" | "lg" | "xl";
 export interface DockProps {
     fitContent?: boolean;
     position?: "fixed" | "inline" | "sticky";
+    /**
+     * Backdrop material mode. `"live"` (default) samples and filters the painted
+     * backdrop; `"static"` uses a solid plate with no luminance observer or
+     * backdrop-filter work.
+     */
+    backdropMode?: DockBackdropMode;
     /**
      * Never collapse — render permanently expanded; the single opt-OUT of the
      * collapse↔expand machinery. Default `false` (every dock is collapsible).

package/dist/components/dock/composables/useDockState.d.ts

@@ -60,8 +60,8 @@ export interface UseDockStateReturn {
  *   PINNED ──(clickOutside)──→ COLLAPSED
  *   Any ──(alwaysExpanded=true)──→ PINNED
  *
- * keepOpen/release ref-counting prevents TIMER-BASED collapse
- * but NOT explicit click-away dismissal (onPointerDownOutside).
+ * keepOpen/release ref-counting prevents both timer-based collapse and
+ * click-away dismissal while a descendant owns an active hold.
  *
  * Teleported targets (reka-ui portals, floating panels, dock popovers)
  * are treated as "inside the dock" for mouse/focus/click-away purposes.

package/dist/components/dock/constants.d.ts

@@ -75,23 +75,11 @@ export declare const DOCK_SPRING: {
     readonly response: number;
     readonly dampingFraction: number;
 };
-/**
- * BG.NF.1 W-FALLBACK-EXCISE — the JS token-mirror constants (the NO-MASKING-FALLBACK
- * single-source floor). The dock composables read a live root token but need a value
- * when the root is not yet mounted; that value lives HERE ONCE (never a bare drift-prone
- * literal duplicated at the read site — the 1.14/44 that had already drifted 1.08→1.14).
- */
 /**
  * The shape-morph squish cap — mirrors `--dock-morph-max-stretch` (density.css). The
  * lifted iOS-27 register (BD.W-MOTION-WEIGHT C1·R3 drift fix: the prior 1.08 was stale).
  */
 export declare const DOCK_MORPH_MAX_STRETCH = 1.14;
-/**
- * The collapsed-endpoint floor in px — mirrors `--dock-morph-min`'s `2.75rem` = the
- * WCAG 2.5.5 touch floor at the 16px root (density.css). Used until the collapsed
- * state has been captured at rest.
- */
-export declare const DOCK_TAP_FLOOR_PX = 44;
 /** `Symbol()` label for the `DockContext` injection key (`dockContext.ts`). */
 export declare const DOCK_CONTEXT_LABEL = "glass-ui:dock-context";
 /** `Symbol()` label for the `DockCrossfadeContext` injection key (`dockCrossfadeContext.ts`). */

package/dist/components/dock/index.d.ts

@@ -1,4 +1,5 @@
 export { default as GlassDock } from "./GlassDock.vue";
+export type { DockBackdropMode } from "./composables/useDockShellProps";
 export { default as DockLayerGroup } from "./DockLayerGroup.vue";
 export { default as DockLayer } from "./DockLayer.vue";
 export { default as DockCrossfade } from "./DockCrossfade.vue";

package/dist/components/dock/styles/adaptive-legibility.css

@@ -0,0 +1 @@
+@layer components { :where(.glass-dock) { --glass-tint-source: var(--glass-tint-ink-dock); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max( 0, ( var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee) ) / (1 - var(--glass-backdrop-luma-knee)) ) ), var(--glass-tint-strength-aa) ); --dock-fg-on-aurora: var(--glass-tint-ink); --muted-foreground: var(--foreground); } @container style(--glass-backdrop: light) { .glass-dock { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --dock-fg-on-aurora: var(--glass-tint-ink); } } @supports (color: contrast-color(white)) { :where(.glass-dock) { --dock-fg-on-aurora: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } @container style(--glass-backdrop: light) { .glass-dock { --dock-fg-on-aurora: contrast-color(var(--card)); } } } .glass-dock[data-backdrop-mode="static"] { --glass-level: 0; --glass-tint-strength: 0%; --glass-backdrop-luma: 0; --glass-ambient-hue: transparent; --glass-ambient-strength: 0%; } .glass-dock[data-backdrop-mode="static"] .dock-plate { background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .glass-dock, .glass-dock[data-morphing] { --dock-reveal-blur: 0px; } }

package/dist/components/dock/styles/controls/icon-button.css

@@ -0,0 +1 @@
+@layer components { @property --dock-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } .dock-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; scale: 1; width: var(--dock-control-size, var(--size-icon-btn)); height: var(--dock-control-size, var(--size-icon-btn)); padding: var(--dock-icon-padding, 0); cursor: pointer; border: none; background: transparent; border-radius: var(--dock-control-radius, var(--radius-pill)); color: color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) calc(var(--opacity-icon-muted) * 100%), transparent ); outline: none; transition: background-color var(--dock-motion-fast), color var(--dock-motion-fast), scale var(--dock-press-spring), opacity var(--dock-motion-fast), box-shadow var(--dock-motion-fast); --glass-btn-press-t: var(--dock-press-t, 0); filter: brightness(calc(1 - var(--dock-press-t, 0) * 0.04)); &:hover:not(:disabled) { background: var(--dock-icon-hover-bg, var(--dock-control-hover-bg)); color: var(--btn-hover-color, var(--foreground)); scale: var(--scale-hover-dock); } &:active:not(:disabled) { background: var(--dock-control-press-bg); } &:active:not(:disabled):not([data-press-armed]) { scale: var(--scale-press-dock); } &:disabled { opacity: var(--opacity-disabled, 0.4); pointer-events: none; cursor: default; } &:focus:not(:focus-visible) { box-shadow: none; outline: none; } &:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) { background: var(--dock-active-bg); color: var(--dock-active-color); scale: var(--dock-active-scale); border: var(--dock-active-border); box-shadow: var(--dock-active-shadow); } &[data-active] { --glass-capsule-fill: var( --dock-control-active-bg, var(--glass-bg-floating) ); background: var(--glass-capsule-fill); color: var(--dock-fg-on-aurora, var(--foreground)); } } .dock-icon-button > svg { width: var(--dock-icon-glyph, 1.25rem); height: var(--dock-icon-glyph, 1.25rem); } .dock-icon-button--compact { width: var(--dock-compact-control-size, auto); height: var(--dock-compact-control-size, auto); min-width: var(--dock-compact-control-min-width, 0); padding: var(--dock-compact-control-padding, 0.25rem); } }

package/dist/{styles/dock-controls → components/dock/styles/controls}/touch-floor.css

@@ -1 +1 @@
-@layer components { @media (pointer: coarse) { .dock-icon-button:not(.dock-icon-button--compact):not(:where(.glass-dock *)) { min-block-size: var(--dock-touch-target, 2.75rem); min-inline-size: var(--dock-touch-target, 2.75rem); } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger) { position: relative; } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max(100%, var(--dock-touch-target, 2.75rem)); block-size: max(100%, var(--dock-touch-target, 2.75rem)); transform: translate(-50%, -50%); } } .glass-dock.vertical .dock-icon-button { position: relative; } .glass-dock.vertical .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) { --dock-active-color: var(--foreground); color: var(--foreground); } .glass-dock.vertical .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"])::before { content: ""; position: absolute; inset-block: var(--dock-rail-accent-inset, 18%); inset-inline-start: calc( -1 * var(--dock-rail-accent-width, 3px) - var(--dock-rail-accent-gap, 2px) ); width: var(--dock-rail-accent-width, 3px); border-radius: var(--radius-pill); background: var(--dock-selected-accent); pointer-events: none; } }
+@layer components { @media (pointer: coarse) { .dock-icon-button:not(.dock-icon-button--compact):not(:where(.glass-dock *)) { min-block-size: var(--dock-touch-target, 2.75rem); min-inline-size: var(--dock-touch-target, 2.75rem); } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger) { position: relative; } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max(100%, var(--dock-touch-target, 2.75rem)); block-size: max(100%, var(--dock-touch-target, 2.75rem)); transform: translate(-50%, -50%); } } .glass-dock.vertical .dock-icon-button { position: relative; } .glass-dock.vertical .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) { --dock-active-color: var(--foreground); color: var(--foreground); } .glass-dock.vertical .dock-icon-button:is( .is-active, [aria-current="page"], [aria-pressed="true"] )::before { content: ""; position: absolute; inset-block: var(--dock-rail-accent-inset, 18%); inset-inline-start: calc( -1 * var(--dock-rail-accent-width, 3px) - var(--dock-rail-accent-gap, 2px) ); width: var(--dock-rail-accent-width, 3px); border-radius: var(--radius-pill); background: var(--dock-selected-accent); pointer-events: none; } }

package/dist/components/dock/styles/controls.css

@@ -0,0 +1 @@
+@import "./controls/icon-button.css"; @import "../../controls/dark-mode-toggle.css"; @import "./controls/tab-button.css"; @import "./controls/triggers.css"; @import "./controls/touch-floor.css"; @layer components { .glass-dock.dock-items-draggable:not(.vertical) .dock-icon-button.glass-drag-lift { scale: var(--stretch, 1) calc(1 / var(--stretch, 1)); } .glass-dock.dock-items-draggable.vertical .dock-icon-button.glass-drag-lift { scale: calc(1 / var(--stretch, 1)) var(--stretch, 1); } :where( .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --glass-specular-size: var(--dock-control-specular-size, 22%); } }

package/dist/{styles/dock → components/dock/styles}/density.css

@@ -1 +1 @@
-:root { --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem); --dock-shape-from: var(--radius-dock, 9999px); --dock-shape-to: var(--radius-dock, 9999px); --dock-shape-clip-from: none; --dock-shape-clip-to: none; --dock-morph-max-stretch: 1.14; --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px)); --dock-search-shrink-start: calc(0rem * var(--dock-scale)); --dock-search-shrink-end: calc(7.25rem * var(--dock-scale)); } @layer components { .glass-dock[data-size="sm"] { --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.375rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); } .glass-dock[data-size="md"] { --dock-padding-block: calc( var(--dock-density-comfortable-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-comfortable-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-comfortable-control-size, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-comfortable-layer-height, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-comfortable-trigger-padding-block, 0.25rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-comfortable-tab-padding-block, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-comfortable-tab-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-tab-h: calc(38px * var(--dock-scale)); } .glass-dock[data-size="lg"] { --dock-padding-block: calc( var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-spacious-padding-inline, 1rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-spacious-trigger-padding-block, 0.375rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-spacious-trigger-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-spacious-tab-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-tab-h: calc(44px * var(--dock-scale)); } .glass-dock[data-size="xl"] { --dock-padding-block: calc( var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-audacious-trigger-padding-block, 0.625rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-audacious-trigger-padding-inline, 1rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-audacious-tab-padding-inline, 1.5rem) * var(--dock-scale) ); --dock-tab-min-height: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); --dock-tab-h: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); } .glass-dock[data-preset="cockpit"] { --dock-control-size: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale) ); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); --dock-label-ratio: 0.275; --dock-icon-glyph: max( calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } .glass-dock[data-size] { --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } @container dock (max-width: 29.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 14px; } } @container dock (min-width: 30rem) and (max-width: 44.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 15px; } } }
+:root { --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem); --dock-shape-from: var(--radius-dock, 9999px); --dock-shape-to: var(--radius-dock, 9999px); --dock-shape-clip-from: none; --dock-shape-clip-to: none; --dock-morph-max-stretch: 1.14; --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px)); --dock-search-shrink-start: calc(0rem * var(--dock-scale)); --dock-search-shrink-end: calc(7.25rem * var(--dock-scale)); } @layer components { .glass-dock[data-size="sm"] { --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.375rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); } .glass-dock[data-size="md"] { --dock-padding-block: calc( var(--dock-density-comfortable-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-comfortable-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-comfortable-control-size, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-comfortable-layer-height, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-comfortable-trigger-padding-block, 0.25rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-comfortable-tab-padding-block, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-comfortable-tab-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-tab-h: calc(38px * var(--dock-scale)); } .glass-dock[data-size="lg"] { --dock-padding-block: calc( var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-spacious-padding-inline, 1rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-spacious-trigger-padding-block, 0.375rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-spacious-trigger-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-spacious-tab-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-tab-h: calc(44px * var(--dock-scale)); } .glass-dock[data-size="xl"] { --dock-padding-block: calc( var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-audacious-trigger-padding-block, 0.625rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-audacious-trigger-padding-inline, 1rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-audacious-tab-padding-inline, 1.5rem) * var(--dock-scale) ); --dock-tab-min-height: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); --dock-tab-h: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); } .glass-dock[data-preset="cockpit"] { --dock-control-size: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale) ); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); --dock-label-ratio: 0.275; --dock-icon-glyph: max( calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } .glass-dock[data-size] { --dock-icon-glyph: max( calc( var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio) ), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } @container dock (max-width: 29.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 14px; } } @container dock (min-width: 30rem) and (max-width: 44.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 15px; } } }

package/dist/components/dock/styles/dock.css

@@ -0,0 +1 @@
+@layer components { .dock-plate { position: absolute; inset: 0; z-index: -1; pointer-events: auto; border-radius: inherit; -webkit-backdrop-filter: var(--dock-surface-blur); backdrop-filter: var(--dock-surface-blur); background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting)); --dock-t: var(--dock-morph-t); --dock-plate-inset-inline: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset, 0px) ); --dock-plate-inset-block: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset-block, 0px) ); clip-path: inset(var(--dock-plate-inset-block) var(--dock-plate-inset-inline)); } .dock-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paper-clean-texture); background-repeat: repeat; background-size: var(--paper-texture-size); opacity: var(--glass-grain-opacity); pointer-events: none; mix-blend-mode: overlay; } .dark .dock-plate::after { mix-blend-mode: soft-light; } .dock-controls { display: contents; overflow: visible; pointer-events: auto; } .glass-dock > .dock-controls { overflow-x: visible; overflow-y: visible; } [data-reserve] { pointer-events: none; } [data-reserve] > .glass-dock, [data-reserve] .dock-plate, [data-reserve] .dock-controls { pointer-events: auto; } .glass-dock.fixed { inset-inline: 0; margin-inline: auto; inline-size: max-content; width: max-content; } } @media (prefers-reduced-motion: reduce) { @layer components { .glass-dock.expanded .dock-plate, .glass-dock.always-expanded .dock-plate { --dock-t: 1; } .glass-dock.collapsed .dock-plate { --dock-t: 0; } } }

package/dist/components/dock/styles/index.css

@@ -0,0 +1 @@
+@import "./shell.css"; @import "./shell-regions.css"; @import "./dock.css"; @import "./morph.css"; @import "./adaptive-legibility.css"; @import "./density.css"; @import "./shape.css"; @import "./layers.css"; @import "./layer-group.css"; @import "./crossfade.css"; @import "./overflow.css"; @import "./fisheye.css"; @import "./popover.css"; @import "./section.css"; @import "./cta-seat.css"; @import "./search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --dock-local-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --dock-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @layer components { :where( .glass-dock, .dock-layer-stack, .dock-layer-item-host, .dock-layer-tab, .dock-icon-button, .dark-mode-toggle-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --dock-motion-fast: var(--duration-fast) var(--ease-standard); --dock-motion-standard: var(--duration-normal) var(--ease-standard); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .glass-dock [data-ring-yield]:focus-visible { box-shadow: none; } .dock-icon-button:disabled, .dock-tab-button:disabled, .dock-select-trigger:disabled, .dock-dropdown-trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } }

package/dist/components/dock/styles/layer-group.css

@@ -0,0 +1 @@
+@layer components { .dock-separator { @apply flex-shrink-0; width: 1px; height: var(--dock-separator-height); margin: 0 0.375rem; background: var(--surface-tint-15); } .glass-dock.vertical .dock-separator, .dock-layer-group.vertical .dock-separator, .dock-separator[data-orientation="vertical"] { width: var(--dock-separator-height); height: 1px; align-self: center; margin: 0.375rem 0; } .glass-dock.layout-grid .dock-separator { grid-column: 1 / -1; width: 100%; height: 1px; margin: var(--dock-layer-gap, 0.375rem) 0; align-self: center; } .dock-spacer { @apply flex-1; } .dock-layer-group { display: flex; gap: var(--dock-layer-group-gap, var(--dock-layer-gap, 0.25rem)); min-width: 0; min-height: 0; } .dock-layer-group.horizontal { flex-direction: row; align-items: stretch; } .dock-layer-group.horizontal.rail-end { flex-direction: row-reverse; } .dock-layer-group.vertical { flex-direction: column; align-items: stretch; } .dock-layer-group.vertical.rail-end { flex-direction: column-reverse; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { display: flex; flex-direction: column; flex-shrink: 0; align-self: start; min-height: max-content; gap: var(--dock-layer-rail-gap, 0.125rem); padding: var(--dock-layer-rail-padding, 0.125rem); background: var(--dock-layer-rail-bg, transparent); border-right: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.vertical .dock-layer-rail { flex-direction: row; border-right: none; border-bottom: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.horizontal.rail-end .dock-layer-rail { border-right: none; border-left: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } .dock-layer-group.vertical.rail-end .dock-layer-rail { border-bottom: none; border-top: 1px solid var( --dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent) ); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); border: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: transparent; color: var( --dock-layer-rail-glyph, color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) 78%, transparent ) ); cursor: pointer; font: inherit; font-size: 0.75rem; z-index: 1; transition: background var(--dock-motion-fast), color var(--dock-motion-fast); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab:hover { background: var( --dock-layer-rail-hover, color-mix(in srgb, var(--accent) 30%, transparent) ); color: var(--dock-fg-on-aurora, var(--foreground)); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab[aria-selected="true"] { color: var( --dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground)) ); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail [role="tab"]:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab-indicator { position: absolute; left: 0; top: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); opacity: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: var(--dock-layer-rail-active, var(--glass-bg-floating)); transition: width var(--duration-fast) var(--spring-snappy), height var(--duration-fast) var(--spring-snappy), transform var(--duration-fast) var(--spring-snappy); pointer-events: none; } .dock-layer-group.vertical .dock-layer-rail .dock-layer-tab-indicator { width: auto; height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); } :where(.glass-dock, .dock-layer-group) .dock-layer-stack { position: relative; display: grid; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { grid-area: 1 / 1; display: flex; align-items: center; white-space: nowrap; gap: var(--dock-layer-gap, 0.375rem); position: absolute; inset: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { position: relative; inset: auto; width: max-content; min-width: 0; } .dock-layer-group.vertical .dock-layer-item-host { flex-direction: column; align-items: stretch; white-space: normal; } .dock-layer-group.vertical .dock-layer-item-host.is-active { width: auto; height: max-content; } }

package/dist/components/dock/styles/layers.css

@@ -0,0 +1 @@
+@layer components { :where(.glass-dock, .dock-layer-group) .dock-layers { display: grid; min-width: 0; } .glass-dock[data-morphing] { --dock-live: calc( var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) + ( var(--dock-expanded-px, 0px) - var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) ) * clamp(0, var(--dock-expand-t), 1) ); --dock-size-scale: clamp( 0.06, calc(var(--dock-live) / max(var(--dock-expanded-px, 1px), 1px)), 1 ); transform-origin: center center; will-change: transform; } .glass-dock[data-morphing]:not(.vertical) { inline-size: var(--dock-expanded-px); } .glass-dock[data-morphing].vertical { block-size: var(--dock-expanded-px); } .glass-dock[data-morphing] .dock-layer-stack { --dock-expand-t: var(--dock-morph-t); } .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers { overflow-x: visible; } :where(.glass-dock, .dock-layer-group) .dock-layer, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { transition: visibility 0s linear var(--duration-normal); } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving), :where(.glass-dock, .dock-layer-group) .dock-layer-item-host:not(.is-active):not(.is-leaving) { opacity: 0; visibility: hidden; pointer-events: none; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-leaving { opacity: 0; visibility: visible; pointer-events: none; } .glass-dock[data-morphing] .dock-layer.is-leaving, .glass-dock[data-morphing] .dock-layer-item-host.is-leaving { opacity: calc(1 - var(--dock-morph-t)); } .glass-dock .dock-layer.is-leaving.is-press-keepalive { opacity: 1; visibility: visible; pointer-events: none; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [inert] { visibility: hidden; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin] { position: relative; z-index: 1; pointer-events: auto; } :where(.glass-dock, .dock-layer-group) .dock-layer { display: flex; align-items: center; grid-area: 1 / 1; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-layer { white-space: nowrap; min-height: var(--dock-layer-height, 2.5rem); } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active) { position: absolute; inset: 0; } .glass-dock[data-morphing] .dock-layer.is-active > *, .glass-dock[data-morphing] .dock-layer-item-host.is-active > * { --dock-stagger-window: var(--dock-stagger-window-size, 0.55); --dock-stagger-onset: 0; --child-reveal: clamp( 0, calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ), 1 ); opacity: var(--child-reveal); scale: calc(0.82 + 0.18 * var(--child-reveal)); transform-origin: center; } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(2 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 1); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(3 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 2); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 4):nth-child(-n + 5) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 3); } .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers { width: 100%; } .glass-dock.expanded:not(.fit-content) .dock-layer--full { width: 100%; } .glass-dock.always-expanded { cursor: default; } .glass-dock.layout-grid { white-space: normal; } .glass-dock.layout-grid .dock-layer--full { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--dock-tile-min, 4.5rem), 1fr) ); grid-auto-rows: var(--dock-tile-min, 4.5rem); gap: var(--dock-layer-gap, 0.375rem); width: 100%; height: auto; white-space: normal; place-items: center; } .glass-dock.layout-grid .dock-layers { width: 100%; } .glass-dock.layout-grid.shape-card .dock-layer--full > * { border-radius: calc( var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem) ); } }

package/dist/components/dock/styles/overflow.css

@@ -0,0 +1 @@
+@layer components { .glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full { min-width: 0; overflow-x: visible; overflow-y: visible; mask-image: none; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full { overflow-x: auto; overflow-y: visible; padding: var(--dock-scroll-safe-inset); margin: calc(-1 * var(--dock-scroll-safe-inset)); scroll-padding-inline: var(--dock-scroll-gutter); scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient( to right, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full::-webkit-scrollbar { display: none; } .glass-dock.dock-overflow-wrap { white-space: normal; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem)) var(--dock-wrap-padding-inline, 0.625rem); border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); --dock-wrap-elev: calc(var(--dock-expand-t) * 100%); box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock)), 0 8px 24px color-mix( in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent ), 0 0 0 0.5px color-mix( in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent ), calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix( in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent ); } .glass-dock.dock-overflow-wrap .dock-layer--full { flex-wrap: wrap; justify-content: center; height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); gap: var(--dock-wrap-row-gap, 0.25rem) var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem)); } .glass-dock.dock-overflow-wrap .dock-layer--summary { height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); } .glass-dock.dock-overflow-wrap .dock-separator { display: none; } .glass-dock.dock-overflow-wrap.collapsed { white-space: nowrap; } @media (pointer: coarse) { .glass-dock[data-size] { --dock-local-scale: var( --dock-mobile-scale, var(--dock-coarse-scale, 0.78) ); --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-control-floor: var(--dock-touch-target, 2.75rem); --size-icon-btn: var(--dock-touch-target, 2.75rem); --dock-icon-glyph: max( calc( var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio) ), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-collapsed-summary-min-size: calc( var(--dock-layer-height, 2.5rem) * 0.85 ); } } }

package/dist/components/dock/styles/popover.css

@@ -0,0 +1 @@
+@layer components { :root { --dock-stack-stagger: 26ms; --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1)); --dock-stack-member-size: calc(2rem * var(--dock-scale, 1)); --dock-facet-accent-strength: 48%; --dock-rail-extend-length: calc( 3 * var(--dock-stack-member-size) + 2 * var(--dock-stack-gap) ); } .dock-stack { display: inline-flex; align-items: center; } .dock-stack-core { flex: 0 0 auto; } .dock-stack-fan[popover] { margin: 0; inset: auto; border: 0; padding: calc(0.25rem * var(--dock-scale, 1)); background: transparent; overflow: visible; display: flex; gap: var(--dock-stack-gap); opacity: 0; scale: 0.92; transition: opacity var(--duration-fast) var(--ease-out), scale var(--spring-dock-duration) var(--spring-dock), overlay var(--spring-dock-duration) allow-discrete, display var(--spring-dock-duration) allow-discrete; } .dock-stack-fan[popover]:popover-open { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan[popover]:popover-open { opacity: 0; scale: 0.92; } } .dock-stack-fan.vertical { flex-direction: row; align-items: center; transform-origin: left center; } .dock-stack-fan:not(.vertical) { flex-direction: column; align-items: center; transform-origin: center bottom; } .dock-stack-fan-scroll { display: flex; gap: var(--dock-stack-gap); } .dock-stack-fan.vertical .dock-stack-fan-scroll { flex-direction: row; } .dock-stack-fan:not(.vertical) .dock-stack-fan-scroll { flex-direction: column; } .dock-stack-fan[data-wrap] .dock-stack-fan-scroll { flex-wrap: wrap; max-inline-size: calc( var(--dock-stack-member-size) * 3 + var(--dock-stack-gap) * 2 + calc(0.5rem * var(--dock-scale, 1)) ); } .dock-stack-fan .dock-stack-member { flex: 0 0 auto; inline-size: var(--dock-stack-member-size); block-size: var(--dock-stack-member-size); background: var(--glass-bg-floating); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); border-radius: var(--radius-pill); color: color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent ); opacity: 0; scale: 0.7; transition: opacity var(--duration-fast) var(--ease-out) calc(var(--dock-stack-stagger) * var(--i, 0)), scale var(--spring-dock-duration) var(--spring-dock) calc(var(--dock-stack-stagger) * var(--i, 0)), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .dock-stack-fan:popover-open .dock-stack-member { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan:popover-open .dock-stack-member { opacity: 0; scale: 0.7; } } .dark .dock-stack-fan .dock-stack-member { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-stack-member:hover { background: var(--dock-control-hover-bg, var(--glass-bg-resting)); color: var(--dock-fg-on-aurora, var(--foreground)); } .dock-stack-fan .dock-stack-member.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); color: var(--dock-fg-on-aurora, var(--foreground)); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-stack-member.is-active { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } .dock-stack-fan .dock-stack-member svg { inline-size: 0.875rem; block-size: 0.875rem; flex-shrink: 0; } .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.3)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix( in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%) ), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); } .dark .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.4)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix( in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%) ), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-facet-chip.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix( in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%) ), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-facet-chip.is-active { box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix( in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%) ), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } @media (prefers-reduced-motion: reduce) { .dock-stack-fan[popover] { scale: 1; transition: opacity var(--duration-fast) linear, overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } .dock-stack-fan .dock-stack-member { scale: 1; transition: opacity var(--duration-fast) linear, background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } } }

package/dist/components/dock/styles/shape.css

@@ -0,0 +1 @@
+@layer components { .glass-dock { border-radius: calc( var(--dock-shape-from, var(--radius-dock)) + ( var(--dock-shape-to, var(--radius-dock)) - var(--dock-shape-from, var(--radius-dock)) ) * var(--dock-expand-t) ); } .glass-dock { --dock-shape-clip: var(--dock-shape-clip-to, none); clip-path: var(--dock-shape-clip); } .glass-dock[data-morphing] { --dock-shape-clip: var(--dock-shape-clip-from, none); } .glass-dock[data-morphing]:where(.expanded, .always-expanded) { --dock-shape-clip: var(--dock-shape-clip-to, none); } .glass-dock[data-morphing]:not(.vertical) { scale: var(--dock-size-scale, 1) 1; } .glass-dock[data-morphing].vertical { scale: 1 var(--dock-size-scale, 1); } .glass-dock[data-morphing]:not(.vertical) > .dock-persistent, .glass-dock[data-morphing]:not(.vertical) > .dock-layers { scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1; will-change: transform; } .glass-dock[data-morphing].vertical > .dock-persistent, .glass-dock[data-morphing].vertical > .dock-layers { scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06)); will-change: transform; } .glass-dock { --motion-weight: 1; } @media (prefers-reduced-motion: reduce) { .glass-dock { --motion-weight: 0; } } }

package/dist/components/dock/styles/shell.css

@@ -0,0 +1 @@
+@layer components { .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2); --dock-surface-blur: var(--glass-blur-resting); --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5); --dock-collapsed-hover-scale: var(--scale-hover-dock); --dock-stagger-window-size: 0.4; --dock-stagger-step: 0.08; --dock-card-radius: var(--radius-dock-card); --dock-tile-min: 4.5rem; scale: 1; position: relative; --glass-backdrop: light; contain: layout style; display: inline-flex; align-items: center; white-space: nowrap; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock)); } .dark .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14); } .glass-dock { overflow: visible; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { overflow-x: visible; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; } .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar, .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar { display: none; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.vertical { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--dock-layer-gap, 0.375rem); white-space: normal; width: auto; height: auto; max-block-size: var(--dock-max-block-size); padding: var(--dock-padding-block, 0.375rem); border-radius: var(--radius-dock); transition: box-shadow var(--dock-motion-standard), transform var(--dock-motion-resize), scale var(--dock-motion-resize); } .glass-dock.vertical:hover, .glass-dock.vertical:active, .glass-dock.vertical[data-held] { will-change: transform; } .glass-dock.vertical { padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem)); } .glass-dock.vertical .dock-plate { background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-dock, var(--glass-border-wash)); } .glass-dock.vertical.shape-pill { border-radius: var(--radius-pill); } .glass-dock.vertical.shape-rounded { border-radius: var(--radius-xl); } .glass-dock.vertical.shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } .glass-dock:not(.vertical).shape-rounded { border-radius: var(--radius-xl); } .glass-dock:not(.vertical).shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } @supports (corner-shape: superellipse(2)) { .glass-dock:not(.vertical).shape-card { corner-shape: var(--corner-shape-bigdock); } } .glass-dock:where(.fixed) { z-index: var(--z-dock); } .dock-inline { margin: 0 auto; } .dock-sticky { position: sticky; top: 0; z-index: var(--z-dock); margin: 0 auto; } }

package/dist/components/drawer/Drawer.vue.d.ts

@@ -41,7 +41,7 @@ type __VLS_Props = {
     modal?: boolean;
     /** Presentation mode shorthand. */
     mode?: DrawerMode;
-    /** The detent ladder (fractions 0..1). When omitted, resolved from `direction` (BB-2). */
+    /** The detent ladder (fractions 0..1). Live-behind resolves a default ladder. */
     snapPoints?: (number | string)[];
     /** The active detent fraction (`v-model:active-snap-point`). */
     activeSnapPoint?: number | string | null;
@@ -66,10 +66,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((value: string | number | null) => any) | undefined;
 }>, {
-    direction: DrawerDirection;
     open: boolean;
-    mode: DrawerMode;
     defaultOpen: boolean;
+    direction: DrawerDirection;
+    mode: DrawerMode;
     modal: boolean;
     stage: DrawerStage;
     snapPoints: (number | string)[];

package/dist/components/drawer/composables/drawerSnapContext.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DrawerDirection } from "../index";
+import type { DrawerDirection, DrawerMode } from "../index";
 /**
  * The snap seam the root provides + the content consumes. The root resolves the
  * effective ladder (consumer `snapPoints` ?? the direction-derived default) + the
@@ -14,6 +14,8 @@ export interface DrawerSnapContext {
     snapPoints: Readonly<Ref<readonly number[]>>;
     /** The drag/slide axis. */
     direction: Readonly<Ref<DrawerDirection>>;
+    /** The root presentation mode; the content owns the mode-specific layer contract. */
+    mode: Readonly<Ref<DrawerMode>>;
     /** The live active detent fraction (the `v-model:active-snap-point` writeback). */
     activeSnapPoint: Ref<number | string | null>;
 }

package/dist/components/drawer/constants.d.ts

@@ -24,7 +24,8 @@ export declare const DRAWER_SNAP: {
 };
 /**
  * BB-2 (the direction-aware default snap ladder fold) — the peek/half/full detent
- * ladder a bottom/top sheet resolves when the consumer passes no `snapPoints`. The
+ * ladder a live-behind bottom/top sheet resolves when the consumer passes no
+ * `snapPoints`. The
  * value (12% peek · 50% half · 100% full) is the `DEFAULT_LIVE_SNAP_POINTS` shape
  * the prior vaul wrapper hardcoded, re-homed into the engine as the bottom/top
  * default. A side-lens (left/right) sheet resolves a FULL-SLIDE instead (no detents)
@@ -32,11 +33,10 @@ export declare const DRAWER_SNAP: {
  */
 export declare const BOTTOM_SHEET_LADDER: readonly number[];
 /**
- * BB-2 — resolve the DEFAULT snap ladder from `direction` natively (retiring the
- * Atlas `:snap-points="[]"` workaround). A bottom/top sheet gets the peek/half/full
- * ladder; a left/right side-lens gets a full-slide (no detents — an empty ladder, so
- * `useDrawerSnap` treats it as a single open/closed slide). A consumer-supplied
- * `snapPoints` always wins over this default.
+ * BB-2 — resolve the LIVE-BEHIND default snap ladder from `direction` natively. A
+ * bottom/top sheet gets the peek/half/full ladder; a left/right side-lens gets a
+ * full-slide (no detents — an empty ladder, so `useDrawerSnap` treats it as a single
+ * open/closed slide). A consumer-supplied `snapPoints` always wins over this default.
  */
 export declare function resolveDefaultSnapPoints(direction: DrawerDirection): readonly number[];
 /**