@mkbabb/glass-ui 7.0.0 → 9.0.0

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

@@ -1,4 +1,4 @@
-import type { ComputedRef } from "vue";
+import type { Ref } from "vue";
 /**
  * Host-native dock hold.
  *
@@ -8,6 +8,14 @@ import type { ComputedRef } from "vue";
  * dock's `held` edge lights `data-held` on the dock root AND the control for the
  * thumb-halo intensification.
  *
+ * THIS ACQUIRE IS THE HAND. It is the only path in the library driven by an actual
+ * pointer going down, so it is the one the GRASP register (glass/grasp.css) is
+ * sourced from: the token it takes is `keepOpen("grasp")`, which lights the dock's
+ * `held` edge as well as holding posture. The returned `isHeld` is this host's OWN
+ * live-hold flag — it flips with the finger whether or not a dock is present, so a
+ * STANDALONE control engages on its own drag and a control inside a dock does NOT
+ * co-engage off a sibling's hold.
+ *
  * Why NATIVE host listeners (not a Vue `@pointerdown` template binding):
  * reka-ui's `<SliderRoot>` is a FORWARDING component — it renders through a
  * `CollectionSlot` + `resolveDynamicComponent` (SliderHorizontal/Vertical) +
@@ -33,9 +41,11 @@ import type { ComputedRef } from "vue";
  * hold path, no parallel `touchGate` watch).
  *
  * DI: consumes the EXISTING typed `DockContext` via `useOptionalDockContext()`
- * through the `keepOpen` and `release` pair. A control
- * rendered OUTSIDE a `<GlassDock>` gets the befitting-silent default (no dock) —
- * every hook is a no-op, a primitive may legitimately render outside a dock.
+ * through the `keepOpen` and `release` pair. A control rendered OUTSIDE a
+ * `<GlassDock>` gets the befitting-silent default (no dock) — the DOCK half is a
+ * no-op, a primitive may legitimately render outside a dock. The HAND half is not
+ * conditional on it: the returned edge tracks the pointer either way, which is what
+ * lets a standalone `<Slider>` grasp.
  */
 export interface UseDockHoldOptions {
     /**
@@ -46,8 +56,13 @@ export interface UseDockHoldOptions {
     enabled?: () => boolean;
 }
 export interface UseDockHoldReturn {
-    /** `true` whenever the dock observes ≥1 held token (the `data-held` edge). */
-    isHeld: ComputedRef<boolean> | undefined;
+    /**
+     * `true` while THIS host's own pointer hold is live — from the native
+     * `pointerdown`/`touchstart` acquire to the window-scoped release. Dock-free by
+     * construction: a control outside a `<GlassDock>` still reports its own hand,
+     * and a control inside one never reports a sibling's.
+     */
+    isHeld: Ref<boolean>;
 }
 /**
  * @param resolveHost A getter that resolves the REAL host element to attach the

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

@@ -0,0 +1,20 @@
+import { type ComputedRef, type Ref } from "vue";
+export interface UseDockRunOptions {
+    /** The scroll port — `.dock-run`, the element the seats are children of. */
+    runEl: Ref<HTMLElement | null>;
+    /** The `role="status"` node reach announces through. */
+    statusEl: Ref<HTMLElement | null>;
+    /** Resolved layout axis; selects the scroll axis and the arrow-key pair. */
+    orientation: ComputedRef<"horizontal" | "vertical">;
+}
+export interface UseDockRunReturn {
+    /**
+     * Bring `seat` fully into view at its lattice anchor, on the DOCK spring. Exposed
+     * so a consumer driving selection programmatically reaches the same anchor the
+     * pointer and keyboard paths do — one reach, three callers.
+     */
+    reach: (seat: HTMLElement) => void;
+    /** Re-derive the tab stop. Called on mount, on focus moves, and on content change. */
+    syncRoving: () => void;
+}
+export declare function useDockRun(options: UseDockRunOptions): UseDockRunReturn;

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

@@ -1,10 +1,10 @@
 import { type MaybeRefOrGetter, type Ref } from "vue";
-import type { UseDockStateReturn } from "./useDockState";
-import { type FuzzySearchState, type SearchableItem, type SearchResult } from "../../search/composables";
-import { type UseScrollChromeReturn } from "../../../composables/motion/scroll/useScrollChrome";
+import type { UseDockStateReturn } from "./useDockState.js";
+import { type FuzzySearchState, type SearchableItem, type SearchResult } from "../../../composables/search/index.js";
+import { type UseScrollChromeReturn } from "../../../composables/motion/scroll/useScrollChrome.js";
 export interface UseDockSearchOptions<T extends SearchableItem = SearchableItem> {
     /** Composes the existing dock state machine (no fork) — `armSearch`/`disarmSearch`
-        ride its `onClickCollapsed`/`keepOpen`/`release`. */
+        ride its `expand`/`keepOpen`/`release`. */
     dockState: UseDockStateReturn;
     /**
      * The search items (sync) — a static array or a getter. Drives the composed
@@ -57,7 +57,7 @@ export interface UseDockSearchReturn<T extends SearchableItem = SearchableItem>
     autocompleteText: Ref<string>;
     /** The optional collapse-on-scroll machine (null when `collapseOnScroll` is false). */
     scrollChrome: UseScrollChromeReturn | null;
-    /** Tap/focus → expand + hold (composes `onClickCollapsed` + `keepOpen`). */
+    /** Tap/focus → expand + hold (composes `expand()` + `keepOpen()`). */
     armSearch: () => void;
     /** Close → release the hold (composes `release`) + close the fuzzy surface. */
     disarmSearch: () => void;

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

@@ -1,33 +1,30 @@
 import { type ComputedRef } from "vue";
-export type DockSize = "sm" | "md" | "lg" | "xl";
 export type DockBackdropMode = "live" | "static";
-export type DockInteraction = "auto" | "manual";
+/**
+ * Collapse posture. `"closed"` (default) mounts collapsed, `"open"` mounts
+ * expanded, and `false` never collapses at all — the single opt-out of the
+ * collapse↔expand machinery, on both orientations.
+ */
+export type DockCollapse = false | "closed" | "open";
 /**
  * The GlassDock prop shape. Every dock—horizontal or vertical—reads the same
- * surface; orientation
- * is the single layout axis and the collapse surface applies on both.
+ * surface; orientation is the single layout axis and the collapse surface applies
+ * on both.
  */
 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).
-     * A vertical dock morphs its height too. A `layout="grid"` dock is
-     * always expanded by contract (a 2D tile panel does not read as a collapsible
-     * pill). A vertical navigation column can opt into the static expanded posture.
-     */
-    alwaysExpanded?: boolean;
     /**
      * Corner treatment.
      *   `"pill"`    — the stadium silhouette (default).
-     *   `"rounded"` — a finite rounded radius (`--radius-xl`).
+     *   `"rounded"` — the finite CARD-role corner (`--radius-card`): a plate
+     *                 silhouette, distinct from both the stadium and the big-dock
+     *                 shell. Bound to the role, never to a literal rung.
      *   `"card"`    — a finite concentric big-dock shell
      *                 radius (`--dock-card-radius`, default `--radius-3xl`)
      *                 ABOVE 2xl, below pill — does NOT collapse to a stadium.
@@ -39,8 +36,8 @@ export interface DockProps {
      *                 surface where the superellipse reads (cards/pills stay
      *                 round); the border-radius arc is the cross-engine contract.
      *
-     * Paints on both orientations: a vertical dock reads `shape="rounded"` for the tool-palette
-     * look, a horizontal dock reads `shape="card"` for the big-dock shell).
+     * Paints on both orientations: a vertical dock reads `shape="rounded"` for the
+     * tool-palette look, a horizontal dock reads `shape="card"` for the big-dock shell.
      */
     shape?: "pill" | "rounded" | "card";
     /**
@@ -51,106 +48,15 @@ export interface DockProps {
      */
     orientation?: "horizontal" | "vertical";
     /**
-     * Size controls dock padding, gaps, layer height, and inherited
-     * dock control sizing. Root CSS variables can override each rung.
-     */
-    size?: DockSize;
-    /**
-     * Overflow strategy when the expanded content exceeds the dock's
-     * axis cap (`--dock-max-inline-size` horizontally,
-     * `--dock-max-block-size` vertically). The ONE knob governing every
-     * overflow behavior.
-     *   `"grow"`   — content grows to fit then overflows visibly past
-     *                the cap (the default; nothing clips or scrolls).
-     *   `"wrap"`   — expanded content wraps to multiple rows via CONTENT-DRIVEN
-     *                intrinsic flex-wrap (the `.dock-overflow-wrap` recipe). The
-     *                dock shrink-wraps to content and caps that intrinsic width
-     *                at `max-inline-size: var(--dock-max-inline-size)`, so the row
-     *                reflows to N rows EXACTLY when its intrinsic width exceeds
-     *                the cap — at ANY viewport width — and collapses to one row
-     *                when it fits (no viewport breakpoint). The wrapped multi-row silhouette lifts
-     *                onto the card/floating shadow tier as the dock expands.
-     *                HORIZONTAL-ONLY: a vertical dock grows-to-fit + clamps via
-     *                `--dock-max-block-size` (its own overflow story), so the
-     *                `.dock-overflow-wrap` class is not emitted for a vertical
-     *                orientation.
-     *
-     * A capped axis is intrinsically a scroll axis: a horizontal
-     * dock's inline axis reads `.dock-scroll-x` unconditionally (the CSS
-     * `overflow-x: auto` scrolls ONLY when the row exceeds
-     * `--dock-max-inline-size`; under the cap nothing scrolls), and a vertical
-     * rail's block axis scrolls via the unconditional cap-derived shell rule
-     * (`--dock-max-block-size` is the sole knob). No prop, no unreachable
-     * controls.
+     * Collapse posture — mount pole AND opt-out in one member.
+     *   `"closed"` (default) — collapsible, mounts collapsed.
+     *   `"open"`             — collapsible, mounts expanded.
+     *   `false`              — never collapses; the FSM is force-pinned and every
+     *                          environmental writer (hover, focus, idle timer,
+     *                          outside-click, collapsed-tap, touch) is quiet.
+     * Applies on BOTH orientations: a vertical dock morphs its block axis too.
      */
-    overflow?: "grow" | "wrap";
-    /**
-     * When set, the dock root establishes an inline-size container query
-     * subject (`container-type: inline-size; container-name: <value>`) so
-     * descendants can query the named container via `@container <value>
-     * (...)` rules. ORTHOGONAL to the `overflow` clip: opting into a
-     * container subject does not change the dock's clip shell; use
-     * `overflow="wrap"` for multi-line content.
-     *
-     * Always-expanded only: `container-type: inline-size`
-     * clamps the box to its contained intrinsic size, so on a COLLAPSIBLE
-     * dock the collapse↔expand FLIP measures collapsed→collapsed and the
-     * morph FREEZES. A collapsible dock that needs deterministic targeting
-     * uses a plain `data-testid` (no layout side-effect).
-     */
-    containerName?: string;
-    /**
-     * Opt this dock into a consumer-owned shared-element View Transition. Leave
-     * unset for ordinary route transitions so the dock remains in the root
-     * snapshot rather than becoming a separate backdrop-filter snapshot.
-     */
-    viewTransitionName?: string;
-    /**
-     * Idle-collapse delay in ms (default 2000). Inert on an always-expanded dock.
-     */
-    collapseDelay?: number;
-    /**
-     * Start in the collapsed state (default true). Applies on BOTH orientations
-     * and a vertical dock morphs its block axis open too. Inert on an always-expanded dock.
-     */
-    startCollapsed?: boolean;
-    /**
-     * Posture ownership on a COLLAPSIBLE dock.
-     *   `"auto"`   (default) — the built-in FSM owns posture.
-     *   `"manual"` — the consumer owns posture. Every internal environmental writer
-     *                (hover, focus, idle timer, outside-click, collapsed-tap, touch)
-     *                is suppressed at BOTH poles; only `expand()`/`collapse()` write.
-     *                Mount pole from `startCollapsed`. Read posture via `expanded`.
-     *                a11y: the consumer MUST author a focusable disclosure in a
-     *                never-inert slot (`#persistent`/`#collapsed`) — glass does not
-     *                auto-expand on focus in manual and provides no fallback.
-     * Resolved to `"auto"` on an always-expanded dock (that pole is force-pinned;
-     * interaction is meaningless there — no dead combination reaches the FSM).
-     */
-    interaction?: DockInteraction;
-    /**
-     * In-cap arrangement. `"linear"` (default) lays the active layer out as a
-     * linear row/column. `"grid"` makes the active layer a self-wrapping tile
-     * grid (Launchpad/Stage-Manager track symmetry — `auto-fill` columns of
-     * `--dock-tile-min`). ORTHOGONAL to `overflow` (the OVER-cap strategy):
-     * `layout` is the IN-cap arrangement.
-     *
-     * Hard contract: a `layout="grid"` dock is `alwaysExpanded` (a 2D panel
-     * does not read as a collapsible pill, and no width morph means no
-     * per-frame grid reflow). The canonical pairing is
-     * `shape="card" layout="grid"` (the props stay independent — no
-     * auto-implication of `shape`).
-     */
-    layout?: "linear" | "grid";
-    /**
-     * The sampled-luminance observer dynamically refines the declarative bright-
-     * backdrop tint. Default `true` because docks commonly sit over live fields.
-     * It refines the material floor; a
-     * dark-substrate consumer opts out with `:auto-luminance="false"` (or
-     * `--glass-tint-strength: 0%` on the dock). The observer is rAF-throttled ≤ 4 Hz,
-     * IntersectionObserver-gated, and parks under `prefers-reduced-motion: reduce`.
-     */
-    autoLuminance?: boolean;
+    collapse?: DockCollapse;
     /**
      * The KNOWN background-layer canvas the dock floats over (an aurora/blob
      * `<canvas>`) — an element, a getter, or a CSS selector. When present, the
@@ -158,25 +64,12 @@ export interface DockProps {
      * case); absent, it stack-walks the painted page background (the static case).
      */
     backgroundCanvas?: HTMLCanvasElement | (() => HTMLCanvasElement | null) | string | null;
-    /**
-     * Native dynamic-search mode. Default `false`. When enabled, the dock stamps
-     * `[data-search]` and renders `#search` inside the existing morph aperture. The
-     * consumer composes `useDockSearch` and supplies its field and result menu. The
-     * dock's `--dock-morph-t` remains the sole pill-to-field motion scalar.
-     */
-    search?: boolean;
 }
 /** The resolved shell-prop computeds the GlassDock SFC binds. */
 export interface DockShellProps {
-    containerStyle: ComputedRef<Record<string, string> | undefined>;
-    collapseDelay: ComputedRef<number>;
     startCollapsed: ComputedRef<boolean>;
-    interaction: ComputedRef<DockInteraction>;
-    layoutValue: ComputedRef<"linear" | "grid">;
     shape: ComputedRef<"pill" | "rounded" | "card">;
     orientation: ComputedRef<"horizontal" | "vertical">;
-    size: ComputedRef<DockSize>;
-    scrollClass: ComputedRef<string | null>;
     alwaysExpanded: ComputedRef<boolean>;
     fitContent: ComputedRef<boolean>;
 }

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

@@ -1,19 +1,13 @@
 import type { ComputedRef, Ref } from "vue";
-import type { DockInteraction } from "./useDockShellProps";
+import type { DockHoldKind } from "./dockContext.js";
 export interface UseDockStateOptions {
-    /** Delay before auto-collapse after mouse leaves (ms) */
+    /** Delay before auto-collapse after mouse leaves (ms). Defaults to
+     * `DOCK_COLLAPSE_DELAY_MS`, the one idle window every GlassDock reads. */
     collapseDelay?: number;
     /** Root element ref — used for contains() checks */
     rootEl: Ref<HTMLElement | null>;
     /** Disable collapse behavior and keep the dock expanded. */
     alwaysExpanded?: Ref<boolean> | boolean;
-    /**
-     * Posture ownership. `"auto"` (default) runs the built-in FSM; `"manual"`
-     * suppresses every environmental writer (hover, focus, idle timer,
-     * outside-click, collapsed-tap) at BOTH poles, leaving only `expand()` /
-     * `collapse()` operative — the consumer owns posture.
-     */
-    interaction?: Ref<DockInteraction> | DockInteraction;
     /** Mount-only posture for a collapsible dock. */
     initialExpanded?: boolean;
     /** Ref that suppresses click-away during an active dock animation. */
@@ -37,8 +31,20 @@ export interface UseDockStateReturn {
     expanded: Ref<boolean>;
     /** `true` whenever `state === "pinned"` — derived ref. */
     isPinned: Ref<boolean>;
-    /** `true` whenever at least one child token holds the dock open via `keepOpen`. */
+    /**
+     * `true` whenever at least one child token holds the dock open via `keepOpen`
+     * — the MORPH hold (posture). An armed search field or an open popover is one;
+     * a hand is not implied. It governs the collapse timer and the click-away, and
+     * it drives NO paint.
+     */
     isHeld: ComputedRef<boolean>;
+    /**
+     * `true` while at least one `keepOpen("grasp")` token is live — an actual
+     * POINTER hold on a descendant control. The dock's `data-held` edge and the
+     * grasp register (glass/grasp.css) read THIS, never `isHeld`: the material
+     * answers a hand, and "a popover is open" is not one.
+     */
+    graspHeld: ComputedRef<boolean>;
     /** Mouseenter handler — transitions `collapsed → hover`. */
     onMouseEnter: () => void;
     /** Mouseleave handler — schedules `hover → collapsed` after `collapseDelay`. */
@@ -50,9 +56,9 @@ export interface UseDockStateReturn {
     /** Click handler on the collapsed layer — transitions to `pinned`. */
     onClickCollapsed: () => void;
     /** Increment hold ref-count; suppresses timer-based collapse. */
-    keepOpen: () => void;
+    keepOpen: (kind?: DockHoldKind) => void;
     /** Decrement hold ref-count; allows timer-based collapse when count reaches 0. */
-    release: () => void;
+    release: (kind?: DockHoldKind) => void;
     /** Imperative open — forces `state = "hover"` (no-op when `alwaysExpanded`). */
     expand: () => void;
     /** Imperative close — forces `state = "collapsed"` (no-op when `alwaysExpanded`). */

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

@@ -8,10 +8,24 @@ export declare const DOCK_SPRING: {
     readonly dampingFraction: number;
 };
 /**
- * The shape-morph squish cap — mirrors `--dock-morph-max-stretch` (density.css). The
- * iOS-27 register.
+ * The OPEN-DISMISSABLE-LAYER probe for the dock's Escape guard (`GlassDock.vue`).
+ *
+ * `[data-dismissable-layer]` is reka's own marker, stamped by `DismissableLayer` — the
+ * single primitive that owns Escape→dismiss. It is therefore EXACTLY the set of hosted
+ * layers entitled to eat an Escape (Dialog/Sheet/Popover/Menu/Select/Combobox/
+ * HoverCard/NavigationMenu/Tooltip content), and it excludes the disclosure primitives
+ * that merely stamp `data-state="open"` (Accordion, Collapsible) — those handle no
+ * Escape, so they must NOT swallow the dock's collapse.
+ *
+ * `:not([data-state="closed"])` is the OPEN half: a non-`forceMount` layer only exists
+ * while open, and a `forceMount` one stays mounted with `data-state="closed"`. Written
+ * as a negation, not `[data-state="open"]`, because the marker element is not
+ * guaranteed to carry a state attribute at all (e.g. `ToastViewport`).
+ *
+ * ONE attribute pair beats an enumerated content-class list: reka owns the marker, so
+ * a new dismissable primitive is covered without touching this constant.
  */
-export declare const DOCK_MORPH_MAX_STRETCH = 1.14;
+export declare const OPEN_DISMISSABLE_LAYER_SELECTOR = "[data-dismissable-layer]:not([data-state=\"closed\"])";
 /** `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`). */
@@ -19,4 +33,19 @@ export declare const DOCK_LAYER_GROUP_LABEL = "glass-ui:dock-layer-group";
 /** Intent dwell before a collapsed→hover expand commits. A chasing leave inside
  * this window cancels the expansion. */
 export declare const HOVER_INTENT_MS = 60;
+/**
+ * The ONE idle window before an unheld, unhovered dock auto-collapses.
+ *
+ * [2026-08-12 · BK #47 W1 SURFACE] `collapseDelay` was a per-dock prop; it is struck
+ * and this is its single resolution point. The patient-dwell value (2500 → 3600) is a
+ * forgiving hover/interaction window.
+ *
+ * [2026-08-24 · BK #47 W3 LATTICE] ~~`useDockState` and `useDockTouchGate` both default
+ * to it, so the two owners of the same timer cannot drift apart.~~ — `useDockTouchGate`
+ * is DELETED (a JS touch gate beside a native snap scroller is a second owner of one
+ * gesture; `touch-action: pan-x` + mandatory snap supersede it outright). There is now
+ * exactly ONE consumer, `useDockState`, so the drift this sentence guarded against is
+ * not merely prevented — it has no second party left to occur between.
+ */
+export declare const DOCK_COLLAPSE_DELAY_MS = 3600;
 export declare const MORPH_SETTLE_MS = 840;

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

@@ -1,15 +1,15 @@
-export { default as GlassDock } from "./GlassDock.vue";
-export type { DockBackdropMode, DockInteraction } from "./composables/useDockShellProps";
-export { default as DockLayerGroup } from "./DockLayerGroup.vue";
-export { default as DockLayer } from "./DockLayer.vue";
-export { default as DockCrossfade } from "./DockCrossfade.vue";
-export type { DockFaceDescriptor, DockFaceRegistration, DockCrossfadeContext, } from "./composables/dockCrossfadeContext";
-export { default as DockControl } from "./DockControl.vue";
-export { default as DockTrigger } from "./DockTrigger.vue";
-export { default as DockBackgroundToggle } from "./DockBackgroundToggle.vue";
-export { default as DockSeparator } from "./DockSeparator.vue";
-export type { UseDockStateOptions, UseDockStateReturn, DockState } from "./composables";
-export { DOCK_CONTEXT_KEY, useDockContext, useOptionalDockContext, provideDockContext, type DockContext, type DockOrientation, type DockLayout, } from "./composables/dockContext";
-export { useDockCtaReceive, type UseDockCtaReceiveOptions, type UseDockCtaReceiveReturn, type DockCtaReceivePreset, } from "../../composables/motion/morph/useDockCtaReceive";
-export { useDockSearch } from "./composables";
-export type { UseDockSearchOptions, UseDockSearchReturn } from "./composables";
+export { default as GlassDock } from "./GlassDock.vue.js";
+export type { DockBackdropMode, DockCollapse, DockProps, } from "./composables/useDockShellProps.js";
+export { default as DockLayerGroup } from "./DockLayerGroup.vue.js";
+export { default as DockLayer } from "./DockLayer.vue.js";
+export { default as DockCrossfade } from "./DockCrossfade.vue.js";
+export type { DockFaceDescriptor, DockFaceRegistration, DockCrossfadeContext, } from "./composables/dockCrossfadeContext.js";
+export { default as DockControl } from "./DockControl.vue.js";
+export { default as DockTrigger } from "./DockTrigger.vue.js";
+export { default as DockBackgroundToggle } from "./DockBackgroundToggle.vue.js";
+export { default as DockSeparator } from "./DockSeparator.vue.js";
+export type { UseDockStateOptions, UseDockStateReturn, DockState } from "./composables/index.js";
+export { DOCK_CONTEXT_KEY, useDockContext, useOptionalDockContext, provideDockContext, type DockContext, type DockOrientation, } from "./composables/dockContext.js";
+export { useDockCtaReceive, type UseDockCtaReceiveOptions, type UseDockCtaReceiveReturn, type DockCtaReceivePreset, } from "../../composables/motion/morph/useDockCtaReceive.js";
+export { useDockSearch } from "./composables/index.js";
+export type { UseDockSearchOptions, UseDockSearchReturn } from "./composables/index.js";

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

@@ -1 +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; } }
+@layer components{:where(.glass-dock){--dock-fg-on-aurora: var(--foreground);--muted-foreground: var(--foreground);}@supports (color: contrast-color(white)){:where(.glass-dock){--dock-fg-on-aurora: contrast-color(var(--card));--muted-foreground: contrast-color(var(--card));}}.glass-dock[data-backdrop-mode="static"]{--glass-level: 0;--glass-backdrop-luma: 0;}.glass-dock[data-backdrop-mode="static"] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);-webkit-backdrop-filter: none;backdrop-filter: none;}}

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

@@ -1 +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); } }
+@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):not([aria-disabled="true"]){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):not([aria-disabled="true"]){background: var(--dock-control-press-bg);}&:active:not(:disabled):not([data-press-armed]):not([aria-disabled="true"]){scale: var(--scale-press-dock);}&:disabled,&[aria-disabled="true"]{opacity: var(--opacity-disabled,0.4);pointer-events: none;cursor: default;}&:focus:not(:focus-visible){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-plate-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/components/dock/styles/controls/tab-button.css

@@ -1 +1 @@
-@layer components { .dock-tab-button { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--dock-tab-h, var(--dock-tab-min-height, auto)); padding-inline: var(--dock-tab-padding-inline, 0.75rem); padding-block: var(--dock-tab-padding-block, 0.375rem); border: none; background: transparent; background-clip: content-box; border-radius: var(--dock-control-radius, var(--radius-pill)); font-size: var(--type-small); line-height: 1; color: var(--muted-foreground); text-decoration: none; cursor: pointer; white-space: nowrap; outline: none; scale: 1; transition: background-color var(--dock-motion-fast), color var(--dock-motion-fast), scale var(--dock-press-spring); &:hover:not(:disabled) { background: var(--dock-control-hover-bg); color: var(--foreground); scale: var(--scale-hover-dock); } &:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } &:focus:not(:focus-visible) { box-shadow: none; } &:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) { background: var(--dock-control-active-bg); color: var(--foreground); } } .dock-tab-button[data-tier="primary"] { --dock-tab-min-height: 4rem; padding-inline: 1.5rem; background: color-mix(in srgb, var(--card) 60%, transparent); color: var(--foreground); } .dock-tab-button[data-tier="secondary"], .dock-icon-button[data-tier="secondary"] { background: color-mix(in srgb, var(--card) 50%, transparent); border: 1px solid var(--glass-border-quiet); box-shadow: var(--border-hairline), var(--glass-highlight); } .dock-tab-button[data-tier="secondary"]:hover:not(:disabled), .dock-icon-button[data-tier="secondary"]:hover:not(:disabled) { background: color-mix(in srgb, var(--card) 65%, transparent); box-shadow: var(--glass-specular), 0 0.5px 0 0 rgb(0 0 0 / 0.06); } }
+@layer components{.dock-tab-button{display: inline-flex;align-items: center;flex-shrink: 0;min-height: var(--dock-tab-h,var(--dock-tab-min-height,auto));padding-inline: var(--dock-tab-padding-inline,0.75rem);padding-block: var(--dock-tab-padding-block,0.375rem);border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));font-size: var(--type-small);line-height: 1;color: var(--muted-foreground);text-decoration: none;cursor: pointer;white-space: nowrap;outline: none;scale: 1;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring);&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--foreground);scale: var(--scale-hover-dock);}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}&:is(.is-active,.active,[aria-current="page"],[aria-pressed="true"]){background: var(--dock-control-active-bg);color: var(--foreground);}}.dock-tab-button[data-tier="primary"]{--dock-tab-min-height: 4rem;padding-inline: 1.5rem;background: color-mix(in srgb,var(--card) 60%,transparent);color: var(--foreground);}.dock-tab-button[data-tier="secondary"],.dock-icon-button[data-tier="secondary"]{background: color-mix(in srgb,var(--card) 50%,transparent);border: 1px solid var(--glass-border-quiet);box-shadow: var(--border-hairline);}.dock-tab-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]),.dock-icon-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]){background: color-mix(in srgb,var(--card) 65%,transparent);box-shadow: var(--glass-material-rim),0 0.5px 0 0 rgb(0 0 0 / 0.06);}}

package/dist/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-vertical-accent-inset,18%);inset-inline-start: calc( -1 * var(--dock-vertical-accent-width,3px) - var(--dock-vertical-accent-gap,2px) );width: var(--dock-vertical-accent-width,3px);border-radius: var(--radius-pill);background: var(--dock-selected-accent);pointer-events: none;}}

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

@@ -1 +1 @@
-@layer components { .dock-trigger, .dock-select-trigger, .dock-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; scale: 1; gap: var(--dock-trigger-gap, 0.25rem); min-height: var(--dock-trigger-min-height, auto); padding: var(--dock-trigger-padding-block, 0.25rem) var(--dock-trigger-padding-inline, 0.5rem); white-space: nowrap; cursor: pointer; border: none; background: transparent; background-clip: content-box; 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); } .dock-trigger:hover:not(:disabled), .dock-select-trigger:hover:not(:disabled), .dock-dropdown-trigger:hover:not(:disabled) { background: var(--dock-control-hover-bg); color: var(--btn-hover-color, var(--foreground)); } .dock-trigger:active:not(:disabled), .dock-select-trigger:active:not(:disabled), .dock-dropdown-trigger:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } .dock-trigger:focus:not(:focus-visible), .dock-select-trigger:focus:not(:focus-visible), .dock-dropdown-trigger:focus:not(:focus-visible) { box-shadow: none; outline: none; } .dock-trigger:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { 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); } .dock-trigger:is( .is-active, .active, [aria-expanded="true"], [aria-pressed="true"] ), .dock-select-trigger:is( .is-active, .active, [aria-expanded="true"], [aria-pressed="true"] ), .dock-dropdown-trigger:is( .is-active, .active, [aria-expanded="true"], [aria-pressed="true"] ) { background: var(--dock-control-active-bg); color: var(--foreground); } .dock-select-trigger__chevron { width: var(--dock-trigger-icon-size, 0.75rem); height: var(--dock-trigger-icon-size, 0.75rem); flex-shrink: 0; opacity: 0.5; rotate: 0deg; transition: rotate var(--dock-press-spring); } .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron { rotate: 180deg; } }
+@layer components{.dock-trigger,.dock-select-trigger,.dock-dropdown-trigger{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;gap: var(--dock-trigger-gap,0.25rem);min-height: var(--dock-trigger-min-height,auto);padding: var(--dock-trigger-padding-block,0.25rem) var(--dock-trigger-padding-inline,0.5rem);white-space: nowrap;cursor: pointer;border: none;background: transparent;background-clip: content-box;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);}.dock-trigger:hover:not(:disabled),.dock-select-trigger:hover:not(:disabled),.dock-dropdown-trigger:hover:not(:disabled){background: var(--dock-control-hover-bg);color: var(--btn-hover-color,var(--foreground));}.dock-trigger:active:not(:disabled),.dock-select-trigger:active:not(:disabled),.dock-dropdown-trigger:active:not(:disabled){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}.dock-trigger:focus:not(:focus-visible),.dock-select-trigger:focus:not(:focus-visible),.dock-dropdown-trigger:focus:not(:focus-visible){outline: none;}.dock-trigger:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{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);}.dock-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-select-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-dropdown-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ){background: var(--dock-control-active-bg);color: var(--foreground);}.dock-select-trigger__chevron{width: var(--dock-trigger-icon-size,0.75rem);height: var(--dock-trigger-icon-size,0.75rem);flex-shrink: 0;opacity: 0.5;rotate: 0deg;transition: rotate var(--dock-press-spring);}.dock-select-trigger[data-state="open"] .dock-select-trigger__chevron{rotate: 180deg;}}

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

@@ -1 +1 @@
-@import "./controls/icon-button.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%); } }
+@import "./controls/icon-button.css";@import "./controls/tab-button.css";@import "./controls/triggers.css";@import "./controls/touch-floor.css";@layer components{:where( .dock-icon-button,.dock-tab-button,.dock-select-trigger,.dock-dropdown-trigger ){--glass-specular-size: var(--dock-control-specular-size,22%);}}

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

@@ -1 +1 @@
-@layer components { .dock-crossfade { position: relative; display: grid; isolation: isolate; } .dock-crossfade > .dock-face { grid-area: 1 / 1; position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; } .dock-crossfade > .dock-face.is-active { position: relative; inset: auto; z-index: 1; inline-size: max-content; min-inline-size: 0; opacity: 1; pointer-events: auto; } .dock-crossfade > .dock-face.is-leaving { position: absolute; inset: 0; z-index: 0; pointer-events: none; visibility: visible; } .dock-crossfade[data-crossfading] > .dock-face.is-active { opacity: var(--dock-t); } .dock-crossfade[data-crossfading] > .dock-face.is-leaving { opacity: calc(1 - var(--dock-t)); } .dock-crossfade > .dock-face > .dock-face-content { display: flex; align-items: center; gap: var(--dock-layer-gap, 0.375rem); white-space: nowrap; block-size: 100%; } :where(.glass-dock, .dock-layer-group).vertical .dock-crossfade > .dock-face > .dock-face-content { flex-direction: column; align-items: stretch; white-space: normal; } :where(.glass-dock, .dock-layer-group).vertical .dock-crossfade > .dock-face.is-active { inline-size: auto; block-size: max-content; } .glass-dock[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content { clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0); will-change: clip-path; } .glass-dock.vertical[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content { clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0); } @media (prefers-reduced-motion: reduce) { .dock-crossfade > .dock-face { will-change: auto; } } }
+@layer components{.dock-crossfade{position: relative;display: grid;isolation: isolate;}.dock-crossfade > .dock-face{grid-area: 1 / 1;position: absolute;inset: 0;opacity: 0;pointer-events: none;will-change: opacity;}.dock-crossfade > .dock-face.is-active{position: relative;inset: auto;z-index: 1;inline-size: max-content;min-inline-size: 0;opacity: 1;pointer-events: auto;}.dock-crossfade > .dock-face.is-leaving{position: absolute;inset: 0;z-index: 0;pointer-events: none;visibility: visible;}.dock-crossfade[data-crossfading] > .dock-face.is-active{opacity: var(--dock-t);}.dock-crossfade[data-crossfading] > .dock-face.is-leaving{opacity: calc(1 - var(--dock-t));}.dock-crossfade > .dock-face > .dock-face-content{display: flex;align-items: center;gap: var(--dock-layer-gap,0.375rem);white-space: nowrap;block-size: 100%;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face > .dock-face-content{flex-direction: column;align-items: stretch;white-space: normal;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face.is-active{inline-size: auto;block-size: max-content;}.glass-dock[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0);will-change: clip-path;}.glass-dock.vertical[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0);}@media (prefers-reduced-motion: reduce){.dock-crossfade > .dock-face{will-change: auto;}}}

package/dist/components/dock/styles/cta-seat.css

@@ -1 +1 @@
-@layer components { [data-cta-pending] { min-inline-size: var(--dock-control-size, var(--size-icon-btn)); min-block-size: var( --dock-layer-height, var(--dock-control-size, var(--size-icon-btn)) ); opacity: var(--cta-seat-ghost-opacity, 0.35); transition: opacity var(--cta-seat-reveal-duration, var(--spring-snappy-duration)) var(--ease-out); } [data-cta-pending] > * { opacity: var(--cta-seat-ghost-opacity, 0.35); transition: opacity var(--cta-seat-reveal-duration, var(--spring-snappy-duration)) var(--ease-out); } @media (prefers-reduced-motion: reduce) { [data-cta-pending], [data-cta-pending] > * { transition: none; } } }
+@layer components{[data-cta-pending]{min-inline-size: var(--dock-control-size,var(--size-icon-btn));min-block-size: var( --dock-layer-height,var(--dock-control-size,var(--size-icon-btn)) );opacity: var(--cta-seat-ghost-opacity,0.35);transition: opacity var(--cta-seat-reveal-duration,var(--spring-present-duration)) var(--ease-out);}[data-cta-pending] > *{opacity: var(--cta-seat-ghost-opacity,0.35);transition: opacity var(--cta-seat-reveal-duration,var(--spring-present-duration)) var(--ease-out);}@media (prefers-reduced-motion: reduce){[data-cta-pending],[data-cta-pending] > *{transition: none;}}}

package/dist/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-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-vertical-extend-length,2.5rem);--dock-morph-max-stretch: 1.14;--dock-search-shrink-start: calc(0rem * var(--dock-scale));--dock-search-shrink-end: calc(7.25rem * var(--dock-scale));}@layer components{.glass-dock{--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-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-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-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{--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);}@media (pointer: coarse){.glass-dock{--dock-scale: var(--dock-mobile-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/dock.css

@@ -1 +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; } } }
+@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);--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));--glass-veil-tier: calc( var(--dock-plate-collapsed-tier) + ( var(--dock-plate-expanded-tier) - var(--dock-plate-collapsed-tier) ) * var(--dock-expand-t) );@apply glass-plate;--glass-grasp-rest-filter: var(--dock-surface-blur);--glass-grasp-radius: var(--glass-blur-resting-radius);border: 1.5px solid color-mix( in srgb,var(--dock-plate-expanded-border) calc(var(--dock-expand-t) * 100%),var(--dock-plate-collapsed-border) );}.dock-plate:has(> .glass-grasp-carrier[data-grasp="grasp"]){clip-path: none;}.dock-plate:has(> .glass-grasp-carrier[data-grasp="grasp"])::after{display: none;}.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

@@ -1 +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 "./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-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; } }
+@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 "./run.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;}@property --dock-pitch{syntax: "<length>";inherits: true;initial-value: 0px;}@property --dock-open-pitches{syntax: "<number>";inherits: true;initial-value: 3;}@layer components{:where( .glass-dock,.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-ring-width: var(--focus-ring-width);--dock-ring-offset: var(--focus-ring-width);--dock-ring-color: color-mix(in srgb,var(--focus-ring-color) 48%,transparent);--dock-ring-reserve: calc(var(--dock-ring-width) + var(--dock-ring-offset));}.dock-icon-button:focus-visible,.dock-tab-button:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}.glass-dock [data-ring-yield]:focus-visible{outline: none;}.dock-icon-button:disabled,.dock-tab-button:disabled,.dock-select-trigger:disabled,.dock-dropdown-trigger:disabled,.dock-icon-button[aria-disabled="true"],.dock-tab-button[aria-disabled="true"]{opacity: var(--opacity-disabled);cursor: not-allowed;}}