@mkbabb/glass-ui 4.2.0 → 6.0.0

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

@@ -0,0 +1,71 @@
+/**
+ * BG.W-DOCK-ENGINE-UNIFY — the ONE `SpringProgress` owner for the dock band.
+ *
+ * The dock's collapse↔expand morph (`dockMorphContext`), the V↔H orientation
+ * morph (`useDockOrientationMorph`), and the fission detach (`useDockFission`)
+ * each hand-rolled their OWN `new SpringProgress` on the SAME `DOCK_SPRING` clock
+ * (the demo-only `useDockItemDrag` fling — a fourth copy — retired at
+ * BI.W-DOCK-FOLD, counted by W-DOCK-SPRING-UNIFY SU1) — copies of the
+ * identical iOS interruptible-physics dance (create-carrying-prior-velocity →
+ * play the glide writing the scalar → self-dispose on settle → PRM-jump). This
+ * factory owns that dance ONCE. A consumer supplies the `(response, ζ)` pair +
+ * its per-frame writer; the spring construction, the velocity-continuous
+ * re-base, and the teardown live here — the sole `new SpringProgress` site.
+ *
+ * `SpringProgress` owns its own rAF via `.play(onFrame)` and carries no static
+ * value.js edge, so this leaf never imports `AnimationGroup`/`./engine`. The
+ * dock morph is ALWAYS PRM-aware: the one spring is armed with
+ * `respectReducedMotion: true`, which JUMPS the scalar 0→target in one frame
+ * under `prefers-reduced-motion: reduce` (no in-between motion frames — no
+ * blur/sliver). `DOCK_SPRING` stays byte-fenced in `../constants`; the caller
+ * passes its `.response`/`.dampingFraction` through.
+ */
+export interface DockSpringConfig {
+    /**
+     * iOS `response` — pass `DOCK_SPRING.response` (the byte-fenced dock clock,
+     * `springPreset("dock")`). Never a fresh literal — the spring register is
+     * single-sourced.
+     */
+    response: number;
+    /** iOS `dampingFraction` — pass `DOCK_SPRING.dampingFraction`. */
+    dampingFraction: number;
+}
+export interface DockSpringPlayOptions {
+    /**
+     * The per-frame writer. `value` is the spring position; `velocity` is its
+     * live analytic velocity (the F-ARM-1 weight channel — a squish reads
+     * `|velocity|`). Called once per frame while the glide runs.
+     */
+    onFrame: (value: number, velocity: number) => void;
+    /** Fired ONCE on settle, immediately BEFORE the self-dispose. */
+    onSettle?: () => void;
+}
+/**
+ * A single-spring handle. Every dock surface that morphs on the DOCK register
+ * drives one of these — the factory that mints it is the band's sole
+ * `new SpringProgress` site.
+ */
+export interface DockSpring {
+    /**
+     * Play a fresh episode `from`→`to`. A still-live prior episode is RE-BASED:
+     * the new spring starts at `from` CARRYING the prior spring's velocity (the
+     * iOS interruptible-physics continuity), targets `to`, and glides on the
+     * DOCK clock writing `onFrame(value, velocity)` per frame. Self-disposes on
+     * settle (after `onSettle`), so an at-rest dock parks ZERO springs.
+     */
+    playTo(from: number, to: number, options: DockSpringPlayOptions): void;
+    /**
+     * Re-target the LIVE spring to `to` from its CURRENT `(value, velocity)`
+     * without recreating the loop (a mid-flight toggle — the interruptible
+     * re-seat `SpringProgress.set target` performs continuously). A no-op when
+     * no spring is live; call `playTo` to (re)start a parked handle.
+     */
+    retarget(to: number): void;
+    /** True while a spring is running and not yet settled. */
+    readonly live: boolean;
+    /** The live analytic velocity (0 when no spring is live). */
+    readonly velocity: number;
+    /** Tear down any running spring (idempotent). */
+    dispose(): void;
+}
+export declare function useDockSpring(config: DockSpringConfig): DockSpring;

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

@@ -0,0 +1,70 @@
+import type { ComputedRef, Ref } from "vue";
+export interface UseDockStateOptions {
+    /** Delay before auto-collapse after mouse leaves (ms) */
+    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;
+    /** Ref that suppresses click-away during an active dock animation. */
+    isTransitioning?: Ref<boolean>;
+    /** Owner id for dock-owned teleported targets. */
+    dockId?: string;
+    /** Called on every state transition */
+    onStateChange?: (newState: DockState, oldState: DockState) => void;
+}
+export type DockState = "collapsed" | "hover" | "pinned";
+/**
+ * Canonical return shape for `useDockState`. Named per the O.W6 Lane A
+ * `UseClipboardReturn` precedent + P.W2 Lane D (Pγ.3 "useDockState inline
+ * return"); freezes today's surface so consumers wrapping `<GlassDock>` (or
+ * authoring a custom dock chassis) can type the composable handle from `/api`
+ * or the `/dock` subpath without reaching for `ReturnType<typeof useDockState>`.
+ */
+export interface UseDockStateReturn {
+    /** Three-state machine: `"collapsed" | "hover" | "pinned"`. */
+    state: Ref<DockState>;
+    /** `true` whenever `state !== "collapsed"` — derived ref. */
+    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`. */
+    isHeld: ComputedRef<boolean>;
+    /** Mouseenter handler — transitions `collapsed → hover`. */
+    onMouseEnter: () => void;
+    /** Mouseleave handler — schedules `hover → collapsed` after `collapseDelay`. */
+    onMouseLeave: (e?: MouseEvent) => void;
+    /** Focusin handler — transitions `collapsed → hover` (keyboard parity with mouse). */
+    onFocusIn: () => void;
+    /** Focusout handler — schedules `hover → collapsed` when focus leaves the dock. */
+    onFocusOut: (e: FocusEvent) => void;
+    /** Click handler on the collapsed layer — transitions to `pinned`. */
+    onClickCollapsed: () => void;
+    /** Increment hold ref-count; suppresses timer-based collapse. */
+    keepOpen: () => void;
+    /** Decrement hold ref-count; allows timer-based collapse when count reaches 0. */
+    release: () => void;
+    /** Imperative open — forces `state = "hover"` (no-op when `alwaysExpanded`). */
+    expand: () => void;
+    /** Imperative close — forces `state = "collapsed"` (no-op when `alwaysExpanded`). */
+    collapse: () => void;
+}
+/**
+ * Dock state machine with three states and ref-counted child holds.
+ *
+ * ```
+ * State Machine:
+ *   COLLAPSED ──(mouseenter/focusin)──→ HOVER
+ *   HOVER ──(mouseleave + timeout)──→ COLLAPSED
+ *   HOVER ──(clickCollapsed)──→ PINNED
+ *   PINNED ──(clickOutside)──→ COLLAPSED
+ *   Any ──(alwaysExpanded=true)──→ PINNED
+ *
+ * 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.
+ * ```
+ */
+export declare function useDockState(options: UseDockStateOptions): UseDockStateReturn;

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

@@ -0,0 +1,51 @@
+import type { Ref } from "vue";
+/**
+ * BG.W-DOCK-DECOMPOSE — the dock touch-gate wiring, carved off the `GlassDock.vue`
+ * god-SFC (the F6.5 one-writer-per-concern seam). It owns the `useTouchGate`
+ * instance + the tap/scroll discrimination handlers + the collapse-on-deactivate
+ * watch — ONE structural concern (the collapsed-pill tap-to-expand gesture), NEVER
+ * a morph-scalar writer (`--dock-morph-t`/`--dock-morph-v` stay the orchestrator's).
+ *
+ * AT.W6-dock-b — shape B′ touch-gate. The gate's job is to DISTINGUISH a tap from a
+ * vertical scroll on the floating collapsed pill (the 150ms pending window + the
+ * >10px scroll-check inside `useTouchGate`), NOT to SWALLOW the tap. It therefore
+ * does NOT `preventDefault()`/`stopPropagation()` the activating `touchstart`/
+ * `touchend`: the browser's native tap→click compatibility event is allowed to flow
+ * to the tapped control, so a SINGLE tap on a collapsed dock control BOTH expands the
+ * dock AND activates that control (via the native click) — the iOS Now-Playing
+ * mini-bar single-tap-play contract. No `elementFromPoint`, no synthetic dispatch. A
+ * scroll gesture cancels the pending tap inside the gate and never emits a tap-click,
+ * so vertical scrolling on the pill stays browser-owned. (Swallowing the tap was the
+ * root cause of the double-tap field defect — a prevented touch sequence emits no
+ * compatibility click, so the control under the finger fired nothing.)
+ *
+ * AZ.W-DOCK-TAXONOMY — the gate applies to ANY collapsible dock, not just the
+ * horizontal one (a vertical dock now collapses too), so it must distinguish a tap
+ * from a vertical scroll on its pill as well.
+ */
+export interface UseDockTouchGateOptions {
+    /** The dock's auto-collapse delay (ms) — the gate's deactivation timer. */
+    collapseDelay: number;
+    /** The dock body root — the tap discrimination anchors on it. */
+    rootEl: Ref<HTMLElement | null>;
+    /** True when the dock cannot collapse (the gate no-ops — no tap-to-expand). */
+    alwaysExpanded: Readonly<Ref<boolean>>;
+    /** The painted expand state (`alwaysExpanded || expanded`). */
+    visualExpanded: Readonly<Ref<boolean>>;
+    /** The raw expand ref (the collapse-on-deactivate guard reads it). */
+    expanded: Ref<boolean>;
+    /** True while a hold token keeps the dock open (suppresses the deactivate collapse). */
+    isPinned: Readonly<Ref<boolean>>;
+    /** Expand the dock (fired on a resolved tap). */
+    expand: () => void;
+    /** Collapse the dock (fired when the gate deactivates with no hold). */
+    collapse: () => void;
+}
+export interface UseDockTouchGateReturn {
+    onTouchStart(event: TouchEvent): void;
+    onTouchMove(event: TouchEvent): void;
+    onTouchEnd(): void;
+    /** Force the gate to rest (a collapse flip clears any pending tap). */
+    deactivate(): void;
+}
+export declare function useDockTouchGate(options: UseDockTouchGateOptions): UseDockTouchGateReturn;

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

@@ -0,0 +1,95 @@
+import type { Component } from "vue";
+/**
+ * BC.W-DOCK-STACK-RAIL — one `<DockStack>` member descriptor: a stack member that fans
+ * OUT of the macOS hover-expand stack (id + label + glyph + optional select handler).
+ * A `<script setup>` SFC cannot re-export a named type through the `export { default }`
+ * barrel, so the descriptor lives here (the colocated types home) and the SFC imports
+ * it; the barrel re-exports it for consumers typing their `items` array. This is the
+ * stack's MEMBER, not a facet chip — the divider-carousel `DockRailItem` is RETIRED
+ * (clean break, no alias).
+ */
+export interface DockStackItem {
+    /** Stable identifier — the `v-for` key + the selected-member id. */
+    id: string;
+    /** The member's accessible label (the `aria-label` + tooltip). */
+    label: string;
+    /** The member glyph (a `@lucide/vue` icon or any component). */
+    icon?: Component;
+    /** Optional per-member select handler (fired alongside the model write). */
+    onSelect?: () => void;
+    /**
+     * BE.W-DOCK-RAIL-REALIZE — the per-FACET accent hue (the `mode="facets"` context
+     * carousel only — IGNORED by the macOS `mode="stack"` glyph fan). A complete
+     * `<color>` (a consumer DATA/context hue) written to the chip's `--glass-accent`
+     * (the BB.W-GLASS-ACCENT per-instance chromatic-rim axis, `rim.css`/`material.css`),
+     * so each context facet carries its OWN rim+glint hue — the AZ context-carousel
+     * identity. Unset ⇒ the neutral warm-cream rim (the `--glass-accent: transparent`
+     * no-op floor). NOT a plate-background fill (the accent rides the THIN rim/glint;
+     * presets-in-consumers — no consumer hue enters a library token).
+     */
+    accent?: string;
+}
+/**
+ * BA.W-DOCK-SECTIONS — the three named zone kinds the declarative `<DockSection>`
+ * descriptor renders (the R8-9 "rail core + sections + nav" three-zone gestalt):
+ *   - `"rail-core"` — the leading home/brand region (the ℱ wordmark / category trigger).
+ *   - `"section"`   — a named, divider-demarcated group of controls; a section
+ *                     carrying `layers` composes the existing `DockLayerGroup`/`DockLayer`
+ *                     registry (NOT a parallel layer machine).
+ *   - `"nav"`       — the trailing nav arrows / utility group.
+ */
+export type DockSectionKind = "rail-core" | "section" | "nav";
+/**
+ * BA.W-DOCK-SECTIONS — one declarative section descriptor. A consumer passes
+ * `sections: readonly DockSectionDescriptor[]` to `<DockSection>` and the dock body
+ * renders the tripartite silhouette (rail-core | divided named sections | nav)
+ * demarcated by `<DockSeparator>` — the IG-A3 / R8-9 "abstract this into a re-usable
+ * component for layering" library gap. A `<script setup>` SFC cannot re-export a named
+ * type through its default barrel, so the descriptor lives here (the colocated types
+ * home, beside `DockRailItem`) and `DockSection.vue` imports it; the barrel re-exports
+ * it for consumers typing their `sections` array.
+ */
+export interface DockSectionDescriptor {
+    /** Which of the three zone kinds this descriptor renders. */
+    kind: DockSectionKind;
+    /** Stable identifier — the `v-for` key + the layer-context id for a `section`. */
+    id: string;
+    /** Optional accessible label for the grouped zone. */
+    label?: string;
+    /**
+     * For a `section` kind: the stack members this section carries. When present
+     * (length > 1) the members ride the dock's `#rail` stack (the macOS hover-expand
+     * stack, OUTSIDE the dock box — never re-inflating it). The descriptor names them;
+     * `<DockStack :items>` fans them out.
+     */
+    layers?: readonly DockStackItem[];
+}
+/**
+ * The ONE dock-morph spring authority — the iOS-26 interruptible-physics tuning the
+ * dock's single `SpringProgress` orchestrator (`dockMorphContext.ts`) AND the
+ * `useLayerTransition` engine both read. Co-located here so the `response`/`damping`
+ * pair is defined ONCE rather than duplicated at the top of each composable (the two
+ * prior copies were a DRY hazard — a re-tune had to touch both).
+ */
+export declare const DOCK_SPRING: {
+    readonly response: number;
+    readonly dampingFraction: number;
+};
+/**
+ * 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;
+/** `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`). */
+export declare const DOCK_LAYER_GROUP_LABEL = "glass-ui:dock-layer-group";
+/** `Symbol()` label for the `DockMorphContext` injection key (`dockMorphContext.ts`). */
+export declare const DOCK_MORPH_LABEL = "glass-ui:dock-morph-context";
+/** The intent-dwell before a collapsed→hover expand commits (a sweeping-edge enter is
+ *  canceled by the chasing leave inside this window) — the calmer hover register KEPT
+ *  by W-DOCK-SPINE. BI.W-DOCK-RETIRES deleted the `EDGE_BAND_PX` moving-edge-sweep
+ *  recheck band (the ~120L hysteresis): post-SPINE the hit frame is a STATIONARY
+ *  state-sized box, so a mid-morph leave never sweeps a moving edge past the cursor. */
+export declare const HOVER_INTENT_MS = 60;
+export declare const MORPH_SETTLE_MS = 840;

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

@@ -0,0 +1,20 @@
+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";
+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 { default as DockStack } from "./DockStack.vue";
+export type { DockStackItem } from "./constants";
+export { default as DockSection } from "./DockSection.vue";
+export type { DockSectionDescriptor, DockSectionKind } from "./constants";
+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/useDockCtaReceive";
+export { useDockSearch } from "./composables";
+export type { UseDockSearchOptions, UseDockSearchReturn } from "./composables";
+export { GooFilter } from "../goo-filter";

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/components/dock/styles/controls/tab-button.css

@@ -0,0 +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); } }

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

@@ -0,0 +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; } }

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

@@ -0,0 +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; } }

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/components/dock/styles/crossfade.css

@@ -0,0 +1 @@
+@layer components { .dock-crossfade { position: relative; display: grid; } .dock-crossfade > .dock-face { grid-area: 1 / 1; position: absolute; inset: 0; opacity: 0; will-change: opacity; } .dock-crossfade > .dock-face.is-active { position: relative; inset: auto; inline-size: max-content; min-inline-size: 0; opacity: 1; } .dock-crossfade > .dock-face.is-leaving { position: absolute; inset: 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

@@ -0,0 +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; } } }

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

@@ -0,0 +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; } } }

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/fisheye.css

@@ -0,0 +1 @@
+@property --dock-px { syntax: "<number>"; inherits: true; initial-value: -99999; } @layer components { .glass-dock[data-dock-fisheye] { transition: --dock-px var(--dock-fisheye-duration) linear; } @media (hover: hover) and (pointer: fine) { .glass-dock[data-dock-fisheye]:not([data-dock-overflow]) .dock-fisheye-item { --d: calc(var(--x, 0) - var(--dock-px, -99999)); scale: calc( 1 + var(--dock-fisheye-amp, 0.6) * exp( -1 * pow(var(--d), 2) / (2 * pow(var(--dock-fisheye-sigma, 64), 2)) ) ); transform-origin: center bottom; } } @media (prefers-reduced-motion: reduce) { .glass-dock[data-dock-fisheye] { transition: none; } .glass-dock[data-dock-fisheye] .dock-fisheye-item { scale: 1; } } }

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/morph.css

@@ -0,0 +1 @@
+@layer components { .glass-dock.expanded, .glass-dock.always-expanded { --dock-expand-t: 1; } .glass-dock.collapsed { --dock-expand-t: 0; } .glass-dock.expanded[data-morphing]:not([data-pane-swap]), .glass-dock.always-expanded[data-morphing]:not([data-pane-swap]) { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing]:not([data-pane-swap]) { --dock-expand-t: calc(1 - var(--dock-morph-t)); } .glass-dock { --dock-reveal-blur: 0px; } .glass-dock[data-morphing] { --dock-reveal-blur: 1.25px; filter: blur( calc( var(--dock-reveal-blur) * clamp(0, calc((0.5 - var(--dock-expand-t)) / 0.5), 1) ) ); } .glass-dock:not(.vertical) .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-resting)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock.vertical .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-wash)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock:not(.vertical):not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-block, 0.375rem), var(--dock-collapsed-padding, 0px) ); padding-block: var(--dock-padding-block, 0.375rem); padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.vertical:not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-inline, 0.5rem), var(--dock-collapsed-padding, 0px) ); padding-inline: var(--dock-padding-inline, 0.5rem); padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.collapsed { cursor: pointer; justify-content: center; box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed)); } .glass-dock.collapsed .dock-layer--summary { min-width: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); min-block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); height: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); aspect-ratio: 1; justify-content: center; } .glass-dock[data-morphing] .dock-layer--summary { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed .dock-layer--summary:empty { min-width: 0; inline-size: 0; padding: 0; margin: 0; border: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers { margin-inline-start: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent { display: grid; place-items: center; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * { place-self: center; } .glass-dock.collapsed .dock-persistent svg, .glass-dock.collapsed .dock-layer--summary svg { min-width: 1rem; min-height: 1rem; } .glass-dock.collapsed:hover { box-shadow: var(--shadow-dock-override, var(--shadow-dock)); } .glass-dock.collapsed:hover .dock-plate { background: var(--glass-bg-wash); border-color: var(--glass-border-floating); } .glass-dock.collapsed:hover:not([data-morphing]) { scale: var(--dock-collapsed-hover-scale); will-change: transform; } .glass-dock[data-held] .dock-plate { background: color-mix( in oklab, var(--glass-bg-floating, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-floating, var(--glass-border-resting)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }

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/search.css

@@ -0,0 +1 @@
+@layer components { .glass-dock[data-search] .dock-search-field { display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; gap: var(--dock-search-field-gap, 0.375rem); } .glass-dock[data-search] .dock-search-field .input-bar { background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); color: var(--foreground); } .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder, .glass-dock[data-search] .dock-search-field .dock-search-ghost, .glass-dock[data-search] .dock-search-field .dock-search-result-meta { color: var(--on-glass-muted); } .glass-dock[data-search] .dock-search-field .dock-search-result { color: var(--foreground); } }

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

@@ -0,0 +1 @@
+@layer components { .dock-section { display: contents; } .dock-section-zone { display: inline-flex; align-items: center; gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem)); } .glass-dock.vertical .dock-section-zone { flex-direction: column; align-items: stretch; } .dock-section-zone--core { flex: 0 0 auto; } .dock-section-zone--nav { flex: 0 0 auto; } .dock-section-zone--section { flex: 0 1 auto; min-inline-size: 0; } }

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-regions.css

@@ -0,0 +1 @@
+@layer components { .dock-persistent { display: flex; align-items: center; flex-shrink: 0; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-persistent { flex-direction: row; } .glass-dock.vertical .dock-persistent { flex-direction: column; align-items: stretch; } .glass-dock:not(.vertical) .dock-persistent + .dock-layers { margin-inline-start: var(--dock-layer-gap, 0.375rem); } .glass-dock.vertical .dock-persistent + .dock-layers { margin-block-start: var(--dock-layer-gap, 0.375rem); } .glass-dock.vertical .dock-layer { flex-direction: column; align-items: stretch; gap: var(--dock-layer-gap, 0.375rem); min-width: 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

@@ -0,0 +1,85 @@
+import type { DrawerDirection, DrawerMode, DrawerStage } from './index';
+/**
+ * BB.W-DRAWER-ABROGATE — the Drawer root on the HOUSE reka `DialogRoot` substrate
+ * (the SAME shape `Dialog.vue` binds). vaul-vue is gone: reka owns the open-control,
+ * the portal, the focus management (trap when `modal`, free when `live-behind`) and
+ * the scrim; the house `useDrawerSnap` engine (provided here, bound in DrawerContent)
+ * owns the snap math vaul used to own.
+ *
+ * `mode` — additive shorthand (AN.W3). `"modal"` (default) keeps the iOS scale-down
+ * look: `modal: true` (reka focus-traps + page-occludes) + `stage: "scale"` (the page
+ * recedes). `"live-behind"` is the non-modal peek/half/full bottom sheet — `modal:
+ * false` (no focus trap, no page `aria-hidden`, page-behind stays interactive — reka
+ * delivers this natively), `stage: "none"`, and the direction-derived snap ladder.
+ * Every prop the mode sets is still overridable by an explicit prop — `mode` only
+ * supplies defaults.
+ *
+ * The snap props (`snapPoints`/`activeSnapPoint`/`direction`) are HOUSE props now
+ * (they were vaul's `DrawerRootProps` surface — preserved by shape so the consumer
+ * binding is byte-identical, but resolved by the house engine, not forwarded to reka,
+ * which knows only `open`/`defaultOpen`/`modal`).
+ *
+ * BD.W-OVERLAY-STAGE-COUPLE — `stage` is the honest scene-staging enum — the page
+ * recede is a real `--stage-t` scale/radius drive, not a boolean that moves no pixels:
+ *   • `none`      — no staging (the live-behind peek sheet leaves the page untouched).
+ *   • `dim`       — the scrim deepens with the detent; the page does NOT transform
+ *                   (the PRM-safe luminance-only depth cue; also the `scale` degrade).
+ *   • `scale`     — `dim` + the page RECEDES + SCALES (the iOS card-recede depth cue).
+ *   • `immersive` — `scale` + the scrim's backdrop-blur ENGAGES (the spotlight).
+ * Under `prefers-reduced-motion: reduce`, `scale`/`immersive` degrade to `dim` (no
+ * page transform — a full-page snap-scale IS perceived motion, fold C1·R6). The enum
+ * toggles `data-stage-scale` / `data-stage-immersive` on the page-wrapper marker
+ * (`[data-stage-wrapper]`, mounted by the consumer/demo shell) while the sheet is
+ * open; the `--stage-t` scalar the snap engine writes at `:root` drives the couplings.
+ */
+type __VLS_Props = {
+    /** The controlled open state (`v-model:open`). */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case. */
+    defaultOpen?: boolean;
+    /** reka modality — defaulted by `mode`; an explicit value overrides. */
+    modal?: boolean;
+    /** Presentation mode shorthand. */
+    mode?: DrawerMode;
+    /** 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;
+    /** Drag/slide axis (BB-2 default-ladder source). */
+    direction?: DrawerDirection;
+    /**
+     * BD.W-OVERLAY-STAGE-COUPLE — the honest scene-staging enum. `none` leaves the
+     * page untouched (the live-behind default); `dim` deepens the scrim only; `scale`
+     * recedes + scales the page;
+     * `immersive` adds the backdrop-blur engage. Defaulted by `mode`.
+     */
+    stage?: DrawerStage;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:activeSnapPoint": (value: string | number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((value: string | number | null) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+    direction: DrawerDirection;
+    mode: DrawerMode;
+    modal: boolean;
+    stage: DrawerStage;
+    snapPoints: (number | string)[];
+    activeSnapPoint: number | string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,40 @@
+import { type HtmlHTMLAttributes } from 'vue';
+import { type DialogContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
+type __VLS_Props = DialogContentProps & {
+    class?: HtmlHTMLAttributes['class'];
+    showOverlay?: boolean;
+    /** Surface decoration register (BA.W-SURFACE-AXIS) — the SHARED
+     *  {glass·veil·opaque} axis on top of the `.glass-drawer` recipe. */
+    surface?: Surface;
+};
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
+    interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {
+    surface: Surface;
+    showOverlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};