@mkbabb/glass-ui 10.1.1 → 10.1.3

package/MIGRATION.md

@@ -5,6 +5,51 @@ records the breaking changes that landed in that cut, newest first. Clean breaks
 — no legacy aliases, no back-compat shims (L invariant 4); every break is a one-line
 rename or import re-point per call site.
 
+## 10.1.2
+
+Two behaviour changes, no type change. **A custom dock seat must now carry
+`data-glass-dock-seat` to rove.**
+
+- **O-101: a morph reserves the size it settles at.** The dock no longer reserves an
+  old width on an expand or for the rest of a morph when its full pane changes (a
+  breakpoint that swaps its controls) or its host changes (a viewport or container that
+  resizes) while it is collapsed or morphing. So the page no longer scrolls sideways
+  for the length of the morph, and the box no longer snaps at settle. Both endpoints are
+  the root laid out at rest in their posture, read from the live layout on every
+  capture, under whatever constrains the dock, including while it morphs. A consumer
+  that clipped the page or the dock band, or overrode `--dock-expanded-px`, to hide that
+  overflow can delete the workaround. A dock whose pane and host are stable morphs as
+  before.
+
+- The dock run roves a direct child only when it carries `data-glass-dock-seat`.
+  `DockControl`, `DockTrigger` and `DockBackgroundToggle` set it. A consumer's own seat
+  that should share the run's one tab stop and answer its arrow keys (a `RouterLink`, a
+  bespoke button, a `[role=button]` element) adds the attribute itself:
+  `<RouterLink data-glass-dock-seat to="/a">`. A `DockControl as-child` already sets it
+  on the child.
+- A declared seat must stay focusable. A custom seat that is disabled carries
+  `aria-disabled="true"` and blocks its own activation, never the native `disabled`
+  attribute: `<button data-glass-dock-seat aria-disabled="true">`. A native-disabled seat
+  that holds the run's stop takes every seat out of the Tab order. A disabled
+  `DockTrigger` now renders `aria-disabled`, like `DockControl`, so it stays in the Tab
+  and arrow order as a disabled stop where 10.1.1 skipped it, and paints disabled from
+  `.dock-trigger[aria-disabled="true"]`. A rule of yours that dims or suppresses a dock
+  trigger on `:disabled` keys on `[aria-disabled="true"]` instead.
+- An undeclared child is left alone. It keeps its natural tab stop and its own keys, so a
+  filter trigger, a settings button, a handle, an input pair, a dark toggle or a composite
+  stays in the Tab order. A consumer that pulled such a control out of its dock run, or
+  restored its `tabindex`, to get it back into the Tab order can undo that.
+- `.dock-run` carries `role="toolbar"` and `aria-orientation` only when every child is a
+  declared seat, glass's `<DockSeparator>` and the native
+  `<select aria-hidden="true" tabindex="-1">` a named `Select` renders inside a `<form>`
+  aside. A consumer's own `role="separator"` splitter, or an `aria-hidden` wrapper around a
+  control that still takes Tab, is an undeclared child and voids the claim. A dock whose run mixes declared seats
+  with other controls no longer announces as a toolbar. To keep the role, declare every
+  seat, or move the undeclared controls to `#persistent` / `#persistent-end`.
+- A test or probe that read `role="toolbar"` off an empty run, or off a run of plain
+  buttons, now finds no role. Seat the run with declared controls.
+- Atlas and value.js: the contract and the build path are in `CHANGELOG.md` §10.1.2.
+
 ## 10.1.1
 
 One type-level change, below; no runtime break. Behaviour a consumer may notice:

package/dist/{command-CTQCaHVA.js → command-CatrAsrl.js}

@@ -2,7 +2,7 @@ import { t as e } from "./class-names-FlXcvRRT.js";
 import { t } from "./primitive-B2t2jdqM.js";
 import { t as n } from "./selection-DqIULxRG.js";
 import { n as r, t as i } from "./DialogContent-CwIBvou_.js";
-import { t as a } from "./participation-Cs_UX_Dc.js";
+import { t as a } from "./participation-B7UFdgXB.js";
 import { t as o } from "./rowClass-DYOXwxhO.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as m, normalizeClass as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, withCtx as x } from "vue";
 import { ComboboxContent as S, ComboboxEmpty as C, ComboboxGroup as w, ComboboxInput as T, ComboboxItem as E, ComboboxLabel as D, ComboboxRoot as O, ComboboxSeparator as k } from "reka-ui";

package/dist/command.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./command-CTQCaHVA.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./command-CatrAsrl.js";
 export { r as Command, t as CommandDialog, s as CommandEmpty, a as CommandGroup, e as CommandInput, n as CommandItem, o as CommandList, i as CommandSeparator, c as CommandShortcut };

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

@@ -15,6 +15,9 @@ import { type ButtonHTMLAttributes, type Component, type HTMLAttributes } from "
  * `--dock-control-size` (≥44px on coarse via the density clamp) — hit box ≠ paint
  * box. `overflow: visible` keeps the painted inset unclipped.
  *
+ * A DECLARED SEAT. The host carries `data-glass-dock-seat` (`DOCK_SEAT_ATTR`), so a
+ * control seated directly in a dock run is roved by it (atlas G-4, b-ii).
+ *
  * Role rides the consumer: an `active` control stamps `aria-pressed` (the
  * AT-selectable semantic) + `data-active` (the CSS hook reading the
  * `--dock-control-active-bg` "selected reads as glass" tier — never a saturated

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

@@ -4,15 +4,15 @@ type __VLS_Props = {
     for?: "select" | "dropdown" | "popover";
     class?: HTMLAttributes["class"];
 };
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_30: {}, __VLS_39: {};
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_42: {}, __VLS_57: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    icon?: (props: typeof __VLS_16) => any;
+    icon?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_30) => any;
+    default?: (props: typeof __VLS_42) => any;
 } & {
-    default?: (props: typeof __VLS_39) => any;
+    default?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     for: "select" | "dropdown" | "popover";

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

@@ -1,16 +1,53 @@
 import { type Ref } from "vue";
+type Axis = "horizontal" | "vertical";
 export interface UseDockExpandedSizeOptions {
     rootEl: Ref<HTMLElement | null>;
     contentEl: Ref<HTMLElement | null>;
     expandedEl: Ref<HTMLElement | null>;
     collapsedEl: Ref<HTMLElement | null>;
-    axis: Ref<"horizontal" | "vertical">;
-    expanded: Ref<boolean>;
+    axis: Ref<Axis>;
+}
+export interface UseDockExpandedSizeReturn {
+    /**
+     * Measure the endpoints now. The morph calls this when it arms, after the posture's
+     * DOM is patched and before `[data-morphing]` reserves one.
+     */
+    measure: () => void;
+    /**
+     * Read the painted boxes the morph starts from: the root, each persistent region and
+     * both panes. The morph calls this before the posture's DOM is patched.
+     */
+    first: () => void;
+    /**
+     * Pin the morph's origins so its first frame paints the boxes `first` read (a
+     * collapse, which starts unscaled, holds its rest instead). The morph calls this
+     * once `[data-morphing]` and the start scalar are set.
+     */
+    anchor: () => void;
+    /** Clear the origins `anchor` wrote. The morph calls this when it settles. */
+    release: () => void;
 }
 /**
- * Measure the dock's two rendered pane compositions. The inactive pane remains
- * laid out (visibility, never display, hides it), so the first morph can derive
- * both endpoints from real content—coarse controls bring their own 44px floor;
- * non-interactive visuals receive no invented one.
+ * Measure the dock's two endpoints, `--dock-expanded-px` and `--dock-collapsed-px`.
+ *
+ * An endpoint is the root's box at rest in its posture, laid out from the live DOM on
+ * every capture (`restSize`). Nothing is latched but each posture's chrome, the root
+ * less its pane, read only from a root at rest in that posture (no `[data-morphing]`).
+ * The chrome holds padding, border, gaps and the persistent regions, none of which
+ * depends on the host. So an endpoint follows the pane and the host in every posture and
+ * through a morph (O-101, O-101a).
+ *
+ * The expanded endpoint is read in both postures, since a morph reserves it in both
+ * directions. The collapsed endpoint is read while the dock is collapsed, where its pane
+ * lays out; while expanded it keeps the last value, which the next collapse re-reads
+ * when it arms. The posture is the DOM's (the full pane's `.is-active`), never the
+ * posture ref, which flips before the DOM is patched: no endpoint can be read from a
+ * box laid out in the other posture (the W7 MORPH guard, BK #47).
+ *
+ * The capture runs when the morph arms (`measure`), on a ResizeObserver hit on the root,
+ * its parent (the host constraint), the layers, both panes or any pane's direct child,
+ * on a MutationObserver record in either pane, on a window resize (in the resize step,
+ * before the frame's layout), and once fonts are ready.
  */
-export declare function useDockExpandedSize(options: UseDockExpandedSizeOptions): void;
+export declare function useDockExpandedSize(options: UseDockExpandedSizeOptions): UseDockExpandedSizeReturn;
+export {};

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

@@ -1,4 +1,5 @@
 import type { Ref } from "vue";
+import type { UseDockExpandedSizeReturn } from "./dockMorphMeasure.js";
 /**
  * The dock collapse/expand morph has one job: project the current outer face
  * onto the shared `--dock-morph-t` spring. Controlled face swaps belong to
@@ -11,6 +12,14 @@ export interface UseDockMorphOrchestratorOptions {
     outerActiveLayer: Ref<string>;
     /** Notifies the shell when the spring arms and settles. */
     onMorphActiveChange?: (active: boolean) => void;
+    /**
+     * The morph's geometry (`useDockExpandedSize`). `first` reads the painted boxes
+     * before the posture's DOM is patched; `measure` reads the endpoints from the posture
+     * just patched in, before `[data-morphing]` reserves one; `anchor` pins the origins
+     * once the morph is armed, so its first frame paints what `first` read (O-110);
+     * `release` clears them at settle.
+     */
+    geometry: Pick<UseDockExpandedSizeReturn, "first" | "measure" | "anchor" | "release">;
 }
 export interface UseDockMorphOrchestratorReturn {
     /** The outer face that currently owns layout and interaction. */

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

@@ -16,5 +16,10 @@ export interface UseDockRunReturn {
     reach: (seat: HTMLElement) => void;
     /** Re-derive the tab stop. Called on mount, on focus moves, and on content change. */
     syncRoving: () => void;
+    /**
+     * True while the run has a declared seat and every child is one, glass's
+     * `<DockSeparator>` and reka's form `<select>` aside: the run's `role="toolbar"`.
+     */
+    toolbar: Readonly<Ref<boolean>>;
 }
 export declare function useDockRun(options: UseDockRunOptions): UseDockRunReturn;

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

@@ -49,3 +49,13 @@ export declare const HOVER_INTENT_MS = 60;
  */
 export declare const DOCK_COLLAPSE_DELAY_MS = 3600;
 export declare const MORPH_SETTLE_MS = 840;
+/**
+ * THE DECLARED SEAT MARKER (atlas G-4, arm b-ii; INBOUND O-102d). The dock run roves a
+ * direct child only when it carries this attribute, and claims `role="toolbar"` only
+ * when it has one and every direct child carries it, glass's `<DockSeparator>` and
+ * reka's form `<select aria-hidden="true" tabindex="-1">` (beside a named `Select`'s
+ * trigger) aside. Glass's seat primitives, `<DockControl>` and `<DockTrigger>`, set it;
+ * a consumer's own seat sets it by hand. Nothing is inferred from focusability: an
+ * undeclared child keeps its natural tab stop and its own keys.
+ */
+export declare const DOCK_SEAT_ATTR = "data-glass-dock-seat";

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

@@ -1 +1 @@
-@layer components{.dock-trigger,.dock-select-trigger,.dock-dropdown-trigger{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;gap: var(--dock-trigger-gap,0.25rem);min-height: var(--dock-trigger-min-height,auto);padding: var(--dock-trigger-padding-block,0.25rem) var(--dock-trigger-padding-inline,0.5rem);white-space: nowrap;cursor: pointer;border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast);}.dock-trigger:hover:not(:disabled),.dock-select-trigger:hover:not(:disabled),.dock-dropdown-trigger:hover:not(:disabled){background: var(--dock-control-hover-bg);color: var(--btn-hover-color,var(--foreground));}.dock-trigger:active:not(:disabled),.dock-select-trigger:active:not(:disabled),.dock-dropdown-trigger:active:not(:disabled){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}.dock-trigger:focus:not(:focus-visible),.dock-select-trigger:focus:not(:focus-visible),.dock-dropdown-trigger:focus:not(:focus-visible){outline: none;}.dock-trigger:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);}.dock-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-select-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-dropdown-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ){background: var(--dock-control-active-bg);color: var(--foreground);}.dock-select-trigger__chevron{width: var(--dock-trigger-icon-size,0.75rem);height: var(--dock-trigger-icon-size,0.75rem);flex-shrink: 0;opacity: 0.5;rotate: 0deg;transition: rotate var(--dock-press-spring);}.dock-select-trigger[data-state="open"] .dock-select-trigger__chevron{rotate: 180deg;}}
+@layer components{.dock-trigger,.dock-select-trigger,.dock-dropdown-trigger{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;gap: var(--dock-trigger-gap,0.25rem);min-height: var(--dock-trigger-min-height,auto);padding: var(--dock-trigger-padding-block,0.25rem) var(--dock-trigger-padding-inline,0.5rem);white-space: nowrap;cursor: pointer;border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast);}.dock-trigger:hover:not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--btn-hover-color,var(--foreground));}.dock-trigger:active:not([aria-disabled="true"]){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}.dock-trigger:focus:not(:focus-visible),.dock-select-trigger:focus:not(:focus-visible),.dock-dropdown-trigger:focus:not(:focus-visible){outline: none;}.dock-trigger:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);}.dock-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-select-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-dropdown-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ){background: var(--dock-control-active-bg);color: var(--foreground);}.dock-select-trigger__chevron{width: var(--dock-trigger-icon-size,0.75rem);height: var(--dock-trigger-icon-size,0.75rem);flex-shrink: 0;opacity: 0.5;rotate: 0deg;transition: rotate var(--dock-press-spring);}.dock-select-trigger[data-state="open"] .dock-select-trigger__chevron{rotate: 180deg;}}

package/dist/components/dock/styles/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 "./run.css";@import "./cta-seat.css";@import "./search.css";@property --dock-morph-t{syntax: "<number>";inherits: true;initial-value: 0;}@property --dock-t{syntax: "<number>";inherits: false;initial-value: 0;}@property --dock-local-scale{syntax: "<number>";inherits: true;initial-value: 1;}@property --dock-scale{syntax: "<number>";inherits: true;initial-value: 1;}@property --dock-pitch{syntax: "<length>";inherits: true;initial-value: 0px;}@property --dock-open-pitches{syntax: "<number>";inherits: true;initial-value: 3;}@layer components{:where( .glass-dock,.dock-layer-tab,.dock-icon-button,.dark-mode-toggle-button,.dock-tab-button,.dock-select-trigger,.dock-dropdown-trigger ){--dock-motion-fast: var(--duration-fast) var(--ease-standard);--dock-motion-standard: var(--duration-normal) var(--ease-standard);--dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);--dock-ring-width: var(--focus-ring-width);--dock-ring-offset: var(--focus-ring-width);--dock-ring-color: color-mix(in srgb,var(--focus-ring-color) 48%,transparent);--dock-ring-reserve: calc(var(--dock-ring-width) + var(--dock-ring-offset));}.dock-icon-button:focus-visible,.dock-tab-button:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}.glass-dock [data-ring-yield]:focus-visible{outline: none;}.dock-icon-button:disabled,.dock-tab-button:disabled,.dock-select-trigger:disabled,.dock-dropdown-trigger:disabled,.dock-icon-button[aria-disabled="true"],.dock-tab-button[aria-disabled="true"]{opacity: var(--opacity-disabled);cursor: not-allowed;}}
+@import "./shell.css";@import "./shell-regions.css";@import "./dock.css";@import "./morph.css";@import "./adaptive-legibility.css";@import "./density.css";@import "./shape.css";@import "./layers.css";@import "./layer-group.css";@import "./crossfade.css";@import "./run.css";@import "./cta-seat.css";@import "./search.css";@property --dock-morph-t{syntax: "<number>";inherits: true;initial-value: 0;}@property --dock-morph-origin{syntax: "<length-percentage>";inherits: false;initial-value: 50%;}@property --dock-pane-shift{syntax: "<length-percentage>";inherits: false;initial-value: 0px;}@property --dock-t{syntax: "<number>";inherits: false;initial-value: 0;}@property --dock-local-scale{syntax: "<number>";inherits: true;initial-value: 1;}@property --dock-scale{syntax: "<number>";inherits: true;initial-value: 1;}@property --dock-pitch{syntax: "<length>";inherits: true;initial-value: 0px;}@property --dock-open-pitches{syntax: "<number>";inherits: true;initial-value: 3;}@layer components{:where( .glass-dock,.dock-layer-tab,.dock-icon-button,.dark-mode-toggle-button,.dock-tab-button,.dock-select-trigger,.dock-dropdown-trigger ){--dock-motion-fast: var(--duration-fast) var(--ease-standard);--dock-motion-standard: var(--duration-normal) var(--ease-standard);--dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);--dock-ring-width: var(--focus-ring-width);--dock-ring-offset: var(--focus-ring-width);--dock-ring-color: color-mix(in srgb,var(--focus-ring-color) 48%,transparent);--dock-ring-reserve: calc(var(--dock-ring-width) + var(--dock-ring-offset));}.dock-icon-button:focus-visible,.dock-tab-button:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}.glass-dock [data-ring-yield]:focus-visible{outline: none;}.dock-icon-button:disabled,.dock-tab-button:disabled,.dock-icon-button[aria-disabled="true"],.dock-tab-button[aria-disabled="true"],.dock-trigger[aria-disabled="true"]{opacity: var(--opacity-disabled);cursor: not-allowed;}}

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.expanded > .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 :not(.dock-separator)):nth-last-child(n + 2 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of :not(.dock-separator)):nth-child(n + 2 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of :not(.dock-separator)):nth-last-child(n + 3 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of :not(.dock-separator)):nth-child(n + 3 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4 of :not(.dock-separator)):nth-last-child(n + 4 of :not(.dock-separator)){--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;}}
+@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 );will-change: transform;}.glass-dock[data-morphing]:not(.vertical){transform-origin: var(--dock-morph-origin) center;}.glass-dock[data-morphing].vertical{transform-origin: center var(--dock-morph-origin);}.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 > .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[data-morphing]:not(.vertical) > .dock-controls > .dock-layers > .dock-layer{translate: var(--dock-pane-shift) 0;}.glass-dock[data-morphing].vertical > .dock-controls > .dock-layers > .dock-layer{translate: 0 var(--dock-pane-shift);}.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 :not(.dock-separator)):nth-last-child(n + 2 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of :not(.dock-separator)):nth-child(n + 2 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of :not(.dock-separator)):nth-last-child(n + 3 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of :not(.dock-separator)):nth-child(n + 3 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4 of :not(.dock-separator)):nth-last-child(n + 4 of :not(.dock-separator)){--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;}}

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

@@ -1 +1 @@
-@layer components{.glass-dock{border-radius: var(--radius-dock);}.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;}}}
+@layer components{.glass-dock{border-radius: var(--radius-dock);}.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;transform-origin: var(--dock-morph-origin) center;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));transform-origin: center var(--dock-morph-origin);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-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);position: relative;z-index: 0;margin: 0 auto;--glass-backdrop: light;--dock-plate-collapsed-tier: var(--glass-veil-wash);--dock-plate-collapsed-border: var(--glass-border-floating);--dock-plate-expanded-tier: var(--glass-veil-dock);--dock-plate-expanded-border: var(--glass-border-dock);contain: layout style;display: inline-flex;align-items: center;white-space: nowrap;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{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-vertical-padding,var(--dock-padding-inline,0.5rem));}.glass-dock.vertical.shape-pill{border-radius: var(--radius-pill);}.glass-dock.vertical.shape-rounded{border-radius: var(--radius-card);}.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-card);}.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);}}}
+@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-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);position: relative;z-index: 0;margin: 0 auto;--glass-backdrop: light;--dock-plate-collapsed-tier: var(--glass-veil-wash);--dock-plate-collapsed-border: var(--glass-border-floating);--dock-plate-expanded-tier: var(--glass-veil-dock);--dock-plate-expanded-border: var(--glass-border-dock);contain: layout style;display: inline-flex;align-items: center;white-space: nowrap;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[data-morphing]:not(.vertical):not(:has(.is-press-keepalive)){overflow-x: clip;}.glass-dock[data-morphing].vertical:not(:has(.is-press-keepalive)){overflow-y: clip;}.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);}.glass-dock.vertical:hover,.glass-dock.vertical:active,.glass-dock.vertical[data-held]{will-change: transform;}.glass-dock.vertical{padding: var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem));}.glass-dock.vertical.shape-pill{border-radius: var(--radius-pill);}.glass-dock.vertical.shape-rounded{border-radius: var(--radius-card);}.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-card);}.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);}}}