@mkbabb/glass-ui 6.0.0 → 7.0.0

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

@@ -1,75 +1,7 @@
-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;
@@ -77,19 +9,14 @@ export declare const DOCK_SPRING: {
 };
 /**
  * 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;
 /** `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,5 +1,5 @@
 export { default as GlassDock } from "./GlassDock.vue";
-export type { DockBackdropMode } from "./composables/useDockShellProps";
+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";
@@ -8,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/controls.css

@@ -1 +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%); } }
+@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

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

package/dist/components/dock/styles/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/index.css

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

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

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

@@ -1 +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); } }
+@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/shape.css

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

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

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

@@ -1,12 +1,10 @@
-import type { DrawerDirection, DrawerMode, DrawerStage } from './index';
+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.
+ * The Drawer root uses Reka's `DialogRoot` substrate. Reka owns open state,
+ * the portal, focus management (trapped when `modal`, free when `live-behind`),
+ * and the scrim. The provided `useDrawerSnap` engine owns detent motion.
  *
- * `mode` — additive shorthand (AN.W3). `"modal"` (default) keeps the iOS scale-down
+ * `mode` is an additive shorthand. `"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
@@ -14,23 +12,22 @@ import type { DrawerDirection, DrawerMode, DrawerStage } from './index';
  * 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`).
+ * The snap props (`snapPoints`/`activeSnapPoint`/`direction`) are resolved by the
+ * Glass engine and are not forwarded to Reka, which receives only root-dialog props.
  *
- * BD.W-OVERLAY-STAGE-COUPLE — `stage` is the honest scene-staging enum — the page
+ * `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).
+ *   • `immersive` — `scale` + one fixed-radius scrim backdrop sample (the spotlight;
+ *                   its radius never reads the per-frame scalar).
  * 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.
+ * page transform because a full-page snap-scale is perceived motion. The enum
+ * toggles `data-stage-scale`, `data-stage-immersive` on the page-wrapper marker
+ * (`[data-stage-wrapper]`, mounted by the consumer/demo shell) through the spring's
+ * open and close settle; the `--stage-t` scalar drives the couplings.
  */
 type __VLS_Props = {
     /** The controlled open state (`v-model:open`). */
@@ -45,13 +42,13 @@ type __VLS_Props = {
     snapPoints?: (number | string)[];
     /** The active detent fraction (`v-model:active-snap-point`). */
     activeSnapPoint?: number | string | null;
-    /** Drag/slide axis (BB-2 default-ladder source). */
+    /** Drag/slide axis (the default-ladder source). */
     direction?: DrawerDirection;
     /**
-     * BD.W-OVERLAY-STAGE-COUPLE — the honest scene-staging enum. `none` leaves the
+     * The 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`.
+     * `immersive` adds one fixed-radius scrim backdrop sample. Defaulted by `mode`.
      */
     stage?: DrawerStage;
 };

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

@@ -1,29 +1,28 @@
-import { type HtmlHTMLAttributes } from 'vue';
-import { type DialogContentProps } from 'reka-ui';
-import { type Surface } from '../_shared/useSurfaceAxis';
-type __VLS_Props = DialogContentProps & {
-    class?: HtmlHTMLAttributes['class'];
+import { type HtmlHTMLAttributes } from "vue";
+import type { Surface } from "../_shared/axes";
+export interface DrawerContentProps {
+    forceMount?: boolean;
+    disableOutsidePointerEvents?: boolean;
+    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, {
+declare const __VLS_base: import("vue").DefineComponent<DrawerContentProps, {}, {}, {}, {}, 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;
+    pointerDownOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("../_shared/interaction").FocusOutsideEvent) => any;
+    interactOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<DrawerContentProps> & 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;
+    onPointerDownOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {

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

@@ -1,13 +1,12 @@
-import { type DialogDescriptionProps } from 'reka-ui';
-import { type HtmlHTMLAttributes } from 'vue';
-type __VLS_Props = DialogDescriptionProps & {
-    class?: HtmlHTMLAttributes['class'];
-};
+import type { HtmlHTMLAttributes } from "vue";
+export interface DrawerDescriptionProps {
+    class?: HtmlHTMLAttributes["class"];
+}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DrawerDescriptionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerDescriptionProps> & Readonly<{}>, {}, {}, {}, {}, 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;

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

@@ -1,8 +1,8 @@
-import { type DialogOverlayProps } from 'reka-ui';
-import { type HtmlHTMLAttributes } from 'vue';
-type __VLS_Props = DialogOverlayProps & {
-    class?: HtmlHTMLAttributes['class'];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import { type HtmlHTMLAttributes } from "vue";
+export interface DrawerOverlayProps {
+    forceMount?: boolean;
+    class?: HtmlHTMLAttributes["class"];
+}
+declare const __VLS_export: import("vue").DefineComponent<DrawerOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,13 +1,12 @@
-import { type DialogTitleProps } from 'reka-ui';
-import { type HtmlHTMLAttributes } from 'vue';
-type __VLS_Props = DialogTitleProps & {
-    class?: HtmlHTMLAttributes['class'];
-};
+import type { HtmlHTMLAttributes } from "vue";
+export interface DrawerTitleProps {
+    class?: HtmlHTMLAttributes["class"];
+}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DrawerTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerTitleProps> & Readonly<{}>, {}, {}, {}, {}, 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;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DrawerDirection, DrawerMode } from "../index";
+import type { DrawerDirection, DrawerMode, DrawerStage } from "../index";
 /**
  * The snap seam the root provides + the content consumes. The root resolves the
  * effective ladder (consumer `snapPoints` ?? the direction-derived default) + the
@@ -16,6 +16,12 @@ export interface DrawerSnapContext {
     direction: Readonly<Ref<DrawerDirection>>;
     /** The root presentation mode; the content owns the mode-specific layer contract. */
     mode: Readonly<Ref<DrawerMode>>;
+    /** The PRM-resolved scene-staging register. */
+    stage: Readonly<Ref<DrawerStage>>;
+    /** This Drawer's nearest consumer-owned stage wrapper. */
+    wrapperEl: Ref<HTMLElement | null>;
+    /** This Drawer's own portaled scrim. */
+    scrimEl: Ref<HTMLElement | null>;
     /** The live active detent fraction (the `v-model:active-snap-point` writeback). */
     activeSnapPoint: Ref<number | string | null>;
 }

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

@@ -6,7 +6,7 @@ export interface UseDrawerSnapOptions {
      * bound box). A GETTER, never a snapshotted ref — reka's `DialogContent` forwards
      * its root element THROUGH a `<Presence>` swap, so a `$el` captured at first mount
      * is a stale comment placeholder and the writer's `if (el)` guard skips forever
-     * (the F5.R2 model↔paint SEVER — `writeScalar` "never fires"). Resolving the element
+     * (the model↔paint SEVER — `writeScalar` "never fires"). Resolving the element
      * fresh on every write reaches the painted sheet the instant `<Presence>` mounts it.
      */
     contentEl: () => HTMLElement | null;
@@ -16,6 +16,8 @@ export interface UseDrawerSnapOptions {
     ctx: DrawerSnapContext;
 }
 export interface UseDrawerSnapReturn {
+    /** Internal Presence hold: true through the closing spring's settle. */
+    present: Ref<boolean>;
     /** Whether a pointer drag is in flight (drives the grip's "live" affordance). */
     dragging: Ref<boolean>;
     /** Programmatically settle to a detent fraction (the open-sheet re-snap seam). */

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

@@ -1,39 +1,21 @@
 import type { DrawerDirection } from "./index";
 /**
- * The ONE drawer-snap spring authority — the sheet-settle (response, ζ) register the
- * house `SpringProgress` snap engine (`useDrawerSnap.ts`) drives `--glass-drawer-t`
- * off. This is the drawer's OWN settle clock — NOT a re-use of the dock's
- * `DOCK_SPRING` morph-settle (the per-spring-clock §6 doctrine: each register is its
- * own clock; a sheet that flings up to a detent settles slower + with a touch more
- * give than the dock's crisp 0.32/0.7 box-morph). Co-located here so the pair is
- * defined ONCE rather than at the top of the composable.
- *
- * BD.W-ANIM-IOS27-TUNE re-tuned `{0.4, 0.82}` → `{0.50, 0.74}` for inertial liquid
- * MASS — but that value was calibrated against the PRE-M1 broken CSS/JS time base AND
- * the pre-BI.W-DRAWER-PERF main-thread storm (the lag was never the spring). BI judgment
- * (g), user-delegated + orchestrator-ratified 2026-07-12: re-pinned `{0.50, 0.74}` →
- * **`{0.32, 0.80}`** — the measured-iOS drawer band (the iOS-27 frame analysis: brisk
- * arrival, ~1.5% overshoot; weight ≠ slow). Lands POST-SPRING-PARITY (M1 committed
- * 75c9e433) + POST-DRAWER-PERF (7a9faa07), per the ordering law: no spring retune
- * before M1. The A/B capture pair rides the π batch (W-DRAWER-PERF-DELTA).
- * The fling-decision (`DRAWER_FLING_VELOCITY`) is SEPARATE + unchanged.
+ * The Drawer snap spring authority. `SpringProgress` uses this response and damping
+ * pair to drive `--glass-drawer-t`; the measured band gives a brisk arrival with
+ * about 1.5% overshoot. Fling selection remains a separate velocity decision.
  */
 export declare const DRAWER_SNAP: {
     readonly response: 0.32;
     readonly dampingFraction: 0.8;
 };
 /**
- * BB-2 (the direction-aware default snap ladder fold) — the peek/half/full detent
- * ladder a live-behind bottom/top sheet resolves when the consumer passes no
- * `snapPoints`. The
- * value (12% peek · 50% half · 100% full) is the `DEFAULT_LIVE_SNAP_POINTS` shape
- * the prior vaul wrapper hardcoded, re-homed into the engine as the bottom/top
- * default. A side-lens (left/right) sheet resolves a FULL-SLIDE instead (no detents)
- * — `resolveDefaultSnapPoints` returns `[]` for the side axis.
+ * Peek/half/full detents used by live-behind bottom and top sheets when the
+ * consumer supplies no `snapPoints`. Side drawers use a full slide with no detents;
+ * `resolveDefaultSnapPoints` therefore returns `[]` for either side axis.
  */
 export declare const BOTTOM_SHEET_LADDER: readonly number[];
 /**
- * BB-2 — resolve the LIVE-BEHIND default snap ladder from `direction` natively. A
+ * Resolve the live-behind default snap ladder from `direction`. A
  * bottom/top sheet gets the peek/half/full ladder; a left/right side-lens gets a
  * full-slide (no detents — an empty ladder, so `useDrawerSnap` treats it as a single
  * open/closed slide). A consumer-supplied `snapPoints` always wins over this default.

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

@@ -1,13 +1,12 @@
-export { DialogTrigger as DrawerTrigger, DialogClose as DrawerClose, } from "reka-ui";
 /**
- * Drawer drag/slide direction (BB.W-DRAWER-ABROGATE). `bottom` (default) + `top`
+ * Drawer drag/slide direction. `bottom` (default) + `top`
  * can carry peek/half/full detents; `left`/`right` are the side-lens full-slide
  * axes. Only `mode="live-behind"` resolves a default ladder (bottom/top →
  * `[0.12, 0.5, 1]`); ordinary modal drawers without `snapPoints` rest fully open.
  */
 export type DrawerDirection = "top" | "bottom" | "left" | "right";
 /**
- * Drawer presentation mode (AN.W3). `"modal"` is the default iOS scale-down sheet —
+ * Drawer presentation mode. `"modal"` is the default iOS scale-down sheet —
  * focus-trapped (reka `:modal="true"`), page-behind scaled. `"live-behind"` is the
  * non-modal peek/half/full bottom sheet — reka `:modal="false"` (no focus trap, no
  * page `aria-hidden`, page-behind at native size + interactive) — bundling the
@@ -16,18 +15,19 @@ export type DrawerDirection = "top" | "bottom" | "left" | "right";
  */
 export type DrawerMode = "modal" | "live-behind";
 /**
- * BD.W-OVERLAY-STAGE-COUPLE — the honest scene-staging enum. `none` leaves the page
+ * The scene-staging enum. `none` leaves the page
  * untouched; `dim` deepens the scrim only (the PRM-safe luminance depth cue); `scale`
- * recedes +
- * scales the page (the iOS card-recede); `immersive` adds the backdrop-blur engage.
+ * recedes + scales the page (the iOS card-recede); `immersive` adds one fixed-radius
+ * scrim backdrop sample while the scalar continues to drive dimming only.
  * `modal` defaults to `scale`; `live-behind` to `none`. PRM degrades `scale`/
  * `immersive` to `dim`. All four couplings ride the ONE `--stage-t` scalar the snap
- * engine writes at `:root`.
+ * engine writes directly on each reader root.
  */
 export type DrawerStage = "none" | "dim" | "scale" | "immersive";
 export { default as Drawer } from "./Drawer.vue";
-export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerContent, type DrawerContentProps } from "./DrawerContent.vue";
 export { default as DrawerHeader } from "./DrawerHeader.vue";
 export { default as DrawerFooter } from "./DrawerFooter.vue";
-export { default as DrawerTitle } from "./DrawerTitle.vue";
-export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerTitle, type DrawerTitleProps } from "./DrawerTitle.vue";
+export { default as DrawerDescription, type DrawerDescriptionProps, } from "./DrawerDescription.vue";
+export type { DrawerOverlayProps } from "./DrawerOverlay.vue";