@mkbabb/glass-ui 5.0.0 → 7.0.0

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

@@ -1,45 +1,45 @@
 import { type ComputedRef } from "vue";
 export type DockSize = "sm" | "md" | "lg" | "xl";
+export type DockBackdropMode = "live" | "static";
+export type DockInteraction = "auto" | "manual";
 /**
- * The ONE GlassDock prop shape (AZ.W-DOCK-TAXONOMY — the discriminated union is
- * gone). Every dock — horizontal or vertical — reads the SAME surface; orientation
+ * 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.
  */
 export interface DockProps {
     fitContent?: boolean;
     position?: "fixed" | "inline" | "sticky";
     /**
-     * Never collapse — render permanently expanded; the single opt-OUT of the
+     * 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).
-     * AZ.W-DOCK-TAXONOMY — vertical docks are NO LONGER force-pinned here (a
-     * vertical dock morphs its height too; the prior `variant="rail"`
-     * always-expanded-by-construction is removed). A `layout="grid"` dock is
-     * `alwaysExpanded` BY CONTRACT (a 2D tile panel does not read as a collapsible
-     * pill). A vertical nav column that wants the static always-expanded look opts
-     * in via this prop. (A positive `collapsible` boolean was considered and
-     * rejected: Vue coerces an absent boolean prop to `false`, so a `collapsible`
-     * defaulting to `true` would need a `withDefaults` second default-path; the
-     * existing `alwaysExpanded` opt-out — which correctly defaults `false` — is the
-     * one knob, no Vue boolean-trap.)
+     * 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`).
-     *   `"card"`    — the AW.W3b big-dock card shell: a finite concentric
+     *   `"card"`    — a finite concentric big-dock shell
      *                 radius (`--dock-card-radius`, default `--radius-3xl`)
      *                 ABOVE 2xl, below pill — does NOT collapse to a stadium.
      *                 Collapsed it returns to a pill; the pill↔card swap
-     *                 morphs on the `--dock-motion-resize` spring. AX.W56's
+     *                 morphs on the `--dock-motion-resize` spring. The
      *                 squircle policy applies `corner-shape:
      *                 var(--corner-shape-bigdock)` here under `@supports
      *                 (corner-shape: superellipse(2))` — the big-dock is the ONE
      *                 surface where the superellipse reads (cards/pills stay
      *                 round); the border-radius arc is the cross-engine contract.
      *
-     * Paints on BOTH orientations (AZ.W-DOCK-TAXONOMY — `shape` is no longer
-     * variant-gated; a vertical dock reads `shape="rounded"` for the tool-palette
+     * 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";
@@ -47,7 +47,7 @@ export interface DockProps {
      * Layout axis of the dock. `"horizontal"` (default) lays items out
      * left-to-right and animates `width`; `"vertical"` lays items out
      * top-to-bottom and animates `height`. This is the SINGLE layout axis — there
-     * is no `variant` second-way to express "vertical" (AZ.W-DOCK-TAXONOMY).
+     * is no `variant` second-way to express "vertical".
      */
     orientation?: "horizontal" | "vertical";
     /**
@@ -59,9 +59,7 @@ export interface DockProps {
      * 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 behaviour (AT.W7-dock-a clean break — collapsed from the
-     * prior `wrap` boolean + `overflow` pair + `containerName` clip-lift,
-     * which all touched overflow divergently).
+     * 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
@@ -77,8 +75,7 @@ export interface DockProps {
      *                `.dock-overflow-wrap` class is not emitted for a vertical
      *                orientation.
      *
-     * BG.W-DOCK-CAP-SCROLL-FADE — the `"scroll"` opt-in RETIRED (clean break,
-     * no alias). A capped axis is INTRINSICALLY a scroll axis: a horizontal
+     * 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
@@ -92,27 +89,45 @@ export interface DockProps {
      * 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 silently change the dock's clip shell
-     * (AT.W7-dock-a — the prior clip-lift was folded out; use
-     * `overflow="wrap"` to allow multi-line content).
+     * container subject does not change the dock's clip shell; use
+     * `overflow="wrap"` for multi-line content.
      *
-     * ALWAYS-EXPANDED-ONLY (AY.W-DOCK2 §F1): `container-type: inline-size`
+     * 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
-     * (AZ.W-DOCK-TAXONOMY — a vertical dock starts collapsed and morphs its block
-     * axis open too). Inert on an always-expanded dock.
+     * 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
@@ -128,11 +143,9 @@ export interface DockProps {
      */
     layout?: "linear" | "grid";
     /**
-     * AZ.W-ADAPTIVE-AUTO Arm 2 (H3 arm a) — the sampled-luminance observer that
-     * DYNAMICALLY refines the W55 declarative bright-bucket darken (the iOS-27
-     * "darken dynamically" register). Default `true` (default-ON for the dock — the
-     * surface most often over a live/bright backdrop). It REFINES the floor (the
-     * unconditional self-engage + the declarative bucket stay the guarantee); a
+     * 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`.
@@ -141,19 +154,15 @@ export interface DockProps {
     /**
      * The KNOWN background-layer canvas the dock floats over (an aurora/blob
      * `<canvas>`) — an element, a getter, or a CSS selector. When present, the
-     * observer downsamples it under the dock's box each settle (the ANIMATED-backdrop
+     * observer downsamples it under the dock's box after settling (the animated-backdrop
      * case); absent, it stack-walks the painted page background (the static case).
      */
     backgroundCanvas?: HTMLCanvasElement | (() => HTMLCanvasElement | null) | string | null;
     /**
-     * BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar MODE (additive,
-     * default `false`). When true the dock stamps `[data-search]` (the CSS hook the
-     * `dock/search.css` active-field tint seam + the `.glass-menu-row` result rows
-     * target) and renders the `#search` slot INSIDE the existing morph aperture — the
-     * consumer composes `useDockSearch` (the gesture/shrink/dropdown seam) and slots
-     * its search field + fuzzy dropdown there. The pill→field morph is the dock's OWN
-     * `--dock-morph-t` glide (box-inviolate — no second engine). A non-search dock is
-     * byte-identical to HEAD (the slot + the data-attr are present only when authored).
+     * 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;
 }
@@ -162,6 +171,7 @@ 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">;

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

@@ -1,16 +1,10 @@
 /**
- * BG.W-DOCK-ENGINE-UNIFY — the ONE `SpringProgress` owner for the dock band.
+ * 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.
+ * The outer dock morph and controlled face crossfade share this one spring
+ * factory instead of duplicating the interruptible-physics lifecycle. A consumer
+ * supplies the `(response, ζ)` pair and per-frame writer; construction, velocity-
+ * continuous re-base, and 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
@@ -37,6 +31,8 @@ export interface DockSpringPlayOptions {
      * `|velocity|`). Called once per frame while the glide runs.
      */
     onFrame: (value: number, velocity: number) => void;
+    /** Coordinate transform applied when carrying a live episode's velocity. */
+    inheritVelocityScale?: number;
     /** Fired ONCE on settle, immediately BEFORE the self-dispose. */
     onSettle?: () => void;
 }

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

@@ -1,4 +1,5 @@
 import type { ComputedRef, Ref } from "vue";
+import type { DockInteraction } from "./useDockShellProps";
 export interface UseDockStateOptions {
     /** Delay before auto-collapse after mouse leaves (ms) */
     collapseDelay?: number;
@@ -6,6 +7,15 @@ export interface UseDockStateOptions {
     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. */
     isTransitioning?: Ref<boolean>;
     /** Owner id for dock-owned teleported targets. */
@@ -15,9 +25,8 @@ export interface UseDockStateOptions {
 }
 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
+ * Canonical return shape for `useDockState`, paralleling other named composable return
+ * types. It lets 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>`.
  */
@@ -60,8 +69,8 @@ export interface UseDockStateReturn {
  *   PINNED ──(clickOutside)──→ COLLAPSED
  *   Any ──(alwaysExpanded=true)──→ PINNED
  *
- * keepOpen/release ref-counting prevents TIMER-BASED collapse
- * but NOT explicit click-away dismissal (onPointerDownOutside).
+ * keepOpen/release ref-counting prevents both timer-based collapse and
+ * click-away dismissal while a descendant owns an active hold.
  *
  * Teleported targets (reka-ui portals, floating panels, dock popovers)
  * are treated as "inside the dock" for mouse/focus/click-away purposes.

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

@@ -1,35 +1,26 @@
 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).
+ * Own collapsed-pill tap/scroll discrimination and collapse-on-deactivate state.
+ * Morph scalars remain owned by the Dock orchestrator.
  *
- * 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.
+ * The gate distinguishes a tap from vertical scrolling without preventing the
+ * browser's compatibility click. A single tap can expand the Dock and activate its
+ * control; a scroll cancels the pending tap. No hit-test lookup or synthetic
+ * dispatch is used. The same behavior applies to both orientations.
  */
 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>>;
+    /**
+     * True when every environmental writer is suppressed — an always-expanded dock
+     * (force-pinned) OR a manual dock (the consumer owns posture). The gate no-ops:
+     * no tap-to-expand, no collapse-on-deactivate. Without folding `manual` in here
+     * the gate would leak a `collapse()` on deactivate (in manual `isPinned` is
+     * false and `alwaysExpanded` is false, so the collapse guard would fire).
+     */
+    quiet: Readonly<Ref<boolean>>;
     /** The painted expand state (`alwaysExpanded || expanded`). */
     visualExpanded: Readonly<Ref<boolean>>;
     /** The raw expand ref (the collapse-on-deactivate guard reads it). */

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

@@ -1,107 +1,22 @@
-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).
+ * dock morph orchestrator and controlled face crossfade both read. Co-located here so
+ * the `response`/`damping` pair is defined once.
  */
 export declare const DOCK_SPRING: {
     readonly response: number;
     readonly dampingFraction: number;
 };
-/**
- * BG.NF.1 W-FALLBACK-EXCISE — the JS token-mirror constants (the NO-MASKING-FALLBACK
- * single-source floor). The dock composables read a live root token but need a value
- * when the root is not yet mounted; that value lives HERE ONCE (never a bare drift-prone
- * literal duplicated at the read site — the 1.14/44 that had already drifted 1.08→1.14).
- */
 /**
  * The shape-morph squish cap — mirrors `--dock-morph-max-stretch` (density.css). The
- * lifted iOS-27 register (BD.W-MOTION-WEIGHT C1·R3 drift fix: the prior 1.08 was stale).
+ * iOS-27 register.
  */
 export declare const DOCK_MORPH_MAX_STRETCH = 1.14;
-/**
- * The collapsed-endpoint floor in px — mirrors `--dock-morph-min`'s `2.75rem` = the
- * WCAG 2.5.5 touch floor at the 16px root (density.css). Used until the collapsed
- * state has been captured at rest.
- */
-export declare const DOCK_TAP_FLOOR_PX = 44;
 /** `Symbol()` label for the `DockContext` injection key (`dockContext.ts`). */
 export declare const DOCK_CONTEXT_LABEL = "glass-ui:dock-context";
 /** `Symbol()` label for the `DockCrossfadeContext` injection key (`dockCrossfadeContext.ts`). */
 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. */
+/** Intent dwell before a collapsed→hover expand commits. A chasing leave inside
+ * this window cancels the expansion. */
 export declare const HOVER_INTENT_MS = 60;
 export declare const MORPH_SETTLE_MS = 840;

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

@@ -1,4 +1,5 @@
 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";
@@ -7,13 +8,8 @@ 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 { useDockCtaReceive, type UseDockCtaReceiveOptions, type UseDockCtaReceiveReturn, type DockCtaReceivePreset, } from "../../composables/motion/morph/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/{styles/dock-controls → components/dock/styles/controls}/touch-floor.css

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

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

@@ -0,0 +1 @@
+@import "./controls/icon-button.css"; @import "./controls/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; 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/{styles/dock → components/dock/styles}/density.css

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

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

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

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

@@ -0,0 +1 @@
+@import "./shell.css"; @import "./shell-regions.css"; @import "./dock.css"; @import "./morph.css"; @import "./adaptive-legibility.css"; @import "./density.css"; @import "./shape.css"; @import "./layers.css"; @import "./layer-group.css"; @import "./crossfade.css"; @import "./overflow.css"; @import "./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; } }

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), translate 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)); } }

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.expanded:not(.dock-overflow-wrap) > .dock-controls > .dock-layers { overflow-x: visible; } :where(.glass-dock, .dock-layer-group) .dock-layer { transition: visibility 0s linear var(--duration-normal); } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving) { opacity: 0; visibility: hidden; pointer-events: none; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving { opacity: 0; visibility: visible; pointer-events: none; } .glass-dock[data-morphing] .dock-layer.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 > * { --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 *) { --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 *) { --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) { --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], .glass-dock.always-expanded[data-morphing] { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing] { --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 .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 .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/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-controls > .dock-persistent, .glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers { scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1; will-change: transform; } .glass-dock[data-morphing].vertical > .dock-controls > .dock-persistent, .glass-dock[data-morphing].vertical > .dock-controls > .dock-layers { scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06)); will-change: transform; } .glass-dock { --motion-weight: 1; } @media (prefers-reduced-motion: reduce) { .glass-dock { --motion-weight: 0; } } }

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

@@ -0,0 +1 @@
+@layer components { .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2); --dock-surface-blur: var(--glass-blur-resting); --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5); --dock-collapsed-hover-scale: var(--scale-hover-dock); --dock-stagger-window-size: 0.4; --dock-stagger-step: 0.08; --dock-card-radius: var(--radius-dock-card); --dock-tile-min: 4.5rem; position: relative; z-index: 0; --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[data-morphing] { transition-property: box-shadow, transform; } .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; } }