@mkbabb/glass-ui 7.0.0 → 8.0.0

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

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

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

@@ -1 +1 @@
-@layer components { :where(.glass-dock) { --glass-tint-source: var(--glass-tint-ink-dock); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max( 0, ( var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee) ) / (1 - var(--glass-backdrop-luma-knee)) ) ), var(--glass-tint-strength-aa) ); --dock-fg-on-aurora: var(--glass-tint-ink); --muted-foreground: var(--foreground); } @container style(--glass-backdrop: light) { .glass-dock { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --dock-fg-on-aurora: var(--glass-tint-ink); } } @supports (color: contrast-color(white)) { :where(.glass-dock) { --dock-fg-on-aurora: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } @container style(--glass-backdrop: light) { .glass-dock { --dock-fg-on-aurora: contrast-color(var(--card)); } } } .glass-dock[data-backdrop-mode="static"] { --glass-level: 0; --glass-tint-strength: 0%; --glass-backdrop-luma: 0; --glass-ambient-hue: transparent; --glass-ambient-strength: 0%; } .glass-dock[data-backdrop-mode="static"] .dock-plate { background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .glass-dock, .glass-dock[data-morphing] { --dock-reveal-blur: 0px; } }
+@layer components{:where(.glass-dock){--dock-fg-on-aurora: var(--foreground);--muted-foreground: var(--foreground);}@supports (color: contrast-color(white)){:where(.glass-dock){--dock-fg-on-aurora: contrast-color(var(--card));--muted-foreground: contrast-color(var(--card));}}.glass-dock[data-backdrop-mode="static"]{--glass-level: 0;--glass-backdrop-luma: 0;}.glass-dock[data-backdrop-mode="static"] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);-webkit-backdrop-filter: none;backdrop-filter: none;}}

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

@@ -1 +1 @@
-@layer components { @property --dock-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } .dock-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; scale: 1; width: var(--dock-control-size, var(--size-icon-btn)); height: var(--dock-control-size, var(--size-icon-btn)); padding: var(--dock-icon-padding, 0); cursor: pointer; border: none; background: transparent; border-radius: var(--dock-control-radius, var(--radius-pill)); color: color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) calc(var(--opacity-icon-muted) * 100%), transparent ); outline: none; transition: background-color var(--dock-motion-fast), color var(--dock-motion-fast), scale var(--dock-press-spring), opacity var(--dock-motion-fast), box-shadow var(--dock-motion-fast); --glass-btn-press-t: var(--dock-press-t, 0); filter: brightness(calc(1 - var(--dock-press-t, 0) * 0.04)); &:hover:not(:disabled) { background: var(--dock-icon-hover-bg, var(--dock-control-hover-bg)); color: var(--btn-hover-color, var(--foreground)); scale: var(--scale-hover-dock); } &:active:not(:disabled) { background: var(--dock-control-press-bg); } &:active:not(:disabled):not([data-press-armed]) { scale: var(--scale-press-dock); } &:disabled { opacity: var(--opacity-disabled, 0.4); pointer-events: none; cursor: default; } &:focus:not(:focus-visible) { box-shadow: none; outline: none; } &:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) { background: var(--dock-active-bg); color: var(--dock-active-color); scale: var(--dock-active-scale); border: var(--dock-active-border); box-shadow: var(--dock-active-shadow); } &[data-active] { --glass-capsule-fill: var( --dock-control-active-bg, var(--glass-bg-floating) ); background: var(--glass-capsule-fill); color: var(--dock-fg-on-aurora, var(--foreground)); } } .dock-icon-button > svg { width: var(--dock-icon-glyph, 1.25rem); height: var(--dock-icon-glyph, 1.25rem); } .dock-icon-button--compact { width: var(--dock-compact-control-size, auto); height: var(--dock-compact-control-size, auto); min-width: var(--dock-compact-control-min-width, 0); padding: var(--dock-compact-control-padding, 0.25rem); } }
+@layer components{@property --dock-press-t{syntax: "<number>";inherits: true;initial-value: 0;}.dock-icon-button{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;width: var(--dock-control-size,var(--size-icon-btn));height: var(--dock-control-size,var(--size-icon-btn));padding: var(--dock-icon-padding,0);cursor: pointer;border: none;background: transparent;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);--glass-btn-press-t: var(--dock-press-t,0);filter: brightness(calc(1 - var(--dock-press-t,0) * 0.04));&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-icon-hover-bg,var(--dock-control-hover-bg));color: var(--btn-hover-color,var(--foreground));scale: var(--scale-hover-dock);}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);}&:active:not(:disabled):not([data-press-armed]):not([aria-disabled="true"]){scale: var(--scale-press-dock);}&:disabled,&[aria-disabled="true"]{opacity: var(--opacity-disabled,0.4);pointer-events: none;cursor: default;}&:focus:not(:focus-visible){box-shadow: none;outline: none;}&:is(.is-active,.active,[aria-expanded="true"],[aria-pressed="true"]){background: var(--dock-active-bg);color: var(--dock-active-color);scale: var(--dock-active-scale);border: var(--dock-active-border);box-shadow: var(--dock-active-shadow);}&[data-active]{--glass-capsule-fill: var( --dock-control-active-bg,var(--glass-plate-floating) );background: var(--glass-capsule-fill);color: var(--dock-fg-on-aurora,var(--foreground));}}.dock-icon-button > svg{width: var(--dock-icon-glyph,1.25rem);height: var(--dock-icon-glyph,1.25rem);}.dock-icon-button--compact{width: var(--dock-compact-control-size,auto);height: var(--dock-compact-control-size,auto);min-width: var(--dock-compact-control-min-width,0);padding: var(--dock-compact-control-padding,0.25rem);}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-@import "./shell.css"; @import "./shell-regions.css"; @import "./dock.css"; @import "./morph.css"; @import "./adaptive-legibility.css"; @import "./density.css"; @import "./shape.css"; @import "./layers.css"; @import "./layer-group.css"; @import "./crossfade.css"; @import "./overflow.css"; @import "./cta-seat.css"; @import "./search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --dock-local-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --dock-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @layer components { :where( .glass-dock, .dock-layer-tab, .dock-icon-button, .dark-mode-toggle-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --dock-motion-fast: var(--duration-fast) var(--ease-standard); --dock-motion-standard: var(--duration-normal) var(--ease-standard); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .glass-dock [data-ring-yield]:focus-visible { box-shadow: none; } .dock-icon-button:disabled, .dock-tab-button:disabled, .dock-select-trigger:disabled, .dock-dropdown-trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } }
+@import "./shell.css";@import "./shell-regions.css";@import "./dock.css";@import "./morph.css";@import "./adaptive-legibility.css";@import "./density.css";@import "./shape.css";@import "./layers.css";@import "./layer-group.css";@import "./crossfade.css";@import "./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,.dock-icon-button[aria-disabled="true"],.dock-tab-button[aria-disabled="true"]{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), 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)); } }
+@layer components{.dock-separator{@apply flex-shrink-0;width: 1px;height: var(--dock-separator-height);margin: 0 0.375rem;background: var(--dock-hairline);}.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;}:is(.glass-dock,.dock-layer-group):not(.vertical):not(.layout-grid) .dock-hairline{align-self: stretch;height: 100%;margin-block: 0;}:is(.glass-dock,.dock-layer-group).vertical .dock-hairline{align-self: stretch;width: 100%;margin-inline: 0;}.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.switcher-end{flex-direction: row-reverse;}.dock-layer-group.vertical{flex-direction: column;align-items: stretch;}.dock-layer-group.vertical.switcher-end{flex-direction: column-reverse;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher{display: flex;flex-direction: column;flex-shrink: 0;align-self: start;min-height: max-content;gap: var(--dock-layer-switcher-gap,0.125rem);padding: var(--dock-layer-switcher-padding,0.125rem);background: var(--dock-layer-switcher-bg,transparent);border-right: 1px solid var(--dock-hairline);}.dock-layer-group.vertical .dock-layer-switcher{flex-direction: row;border-right: none;border-bottom: 1px solid var(--dock-hairline);}.dock-layer-group.horizontal.switcher-end .dock-layer-switcher{border-right: none;border-left: 1px solid var(--dock-hairline);}.dock-layer-group.vertical.switcher-end .dock-layer-switcher{border-bottom: none;border-top: 1px solid var(--dock-hairline);}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .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-switcher-glyph,color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) 78%,transparent ) );cursor: pointer;font: inherit;font-size: var(--type-caption);z-index: 1;transition: background var(--dock-motion-fast),color var(--dock-motion-fast);}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab svg{width: 1rem;height: 1rem;flex-shrink: 0;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .dock-layer-tab:hover{background: var( --dock-layer-switcher-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-switcher .dock-layer-tab[aria-selected="true"]{color: var( --dock-layer-switcher-glyph-active,var(--dock-fg-on-aurora,var(--foreground)) );}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher [role="tab"]:focus-visible{box-shadow: var(--focus-ring-shadow);outline: none;}:where(.glass-dock,.dock-layer-group) .dock-layer-switcher .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-switcher-active,var(--glass-plate-floating));transition: width var(--spring-dock-duration) var(--spring-dock),height var(--spring-dock-duration) var(--spring-dock),translate var(--spring-dock-duration) var(--spring-dock);pointer-events: none;}.dock-layer-group.vertical .dock-layer-switcher .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.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) ); } }
+@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], .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); } }
+@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: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:not([data-morphing]){scale: var(--dock-collapsed-hover-scale);will-change: transform;}.glass-dock[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}

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

@@ -1 +1 @@
-@layer components { .glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full { min-width: 0; overflow-x: visible; overflow-y: visible; mask-image: none; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full { overflow-x: auto; overflow-y: visible; padding: var(--dock-scroll-safe-inset); margin: calc(-1 * var(--dock-scroll-safe-inset)); scroll-padding-inline: var(--dock-scroll-gutter); scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient( to right, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full::-webkit-scrollbar { display: none; } .glass-dock.dock-overflow-wrap { white-space: normal; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem)) var(--dock-wrap-padding-inline, 0.625rem); border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); --dock-wrap-elev: calc(var(--dock-expand-t) * 100%); box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock)), 0 8px 24px color-mix( in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent ), 0 0 0 0.5px color-mix( in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent ), calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix( in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent ); } .glass-dock.dock-overflow-wrap .dock-layer--full { flex-wrap: wrap; justify-content: center; height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); gap: var(--dock-wrap-row-gap, 0.25rem) var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem)); } .glass-dock.dock-overflow-wrap .dock-layer--summary { height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); } .glass-dock.dock-overflow-wrap .dock-separator { display: none; } .glass-dock.dock-overflow-wrap.collapsed { white-space: nowrap; } @media (pointer: coarse) { .glass-dock[data-size] { --dock-local-scale: var( --dock-mobile-scale, var(--dock-coarse-scale, 0.78) ); --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-control-floor: var(--dock-touch-target, 2.75rem); --size-icon-btn: var(--dock-touch-target, 2.75rem); --dock-icon-glyph: max( calc( var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio) ), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-collapsed-summary-min-size: calc( var(--dock-layer-height, 2.5rem) * 0.85 ); } } }
+@layer components{.glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full{min-width: 0;overflow-x: visible;overflow-y: visible;mask-image: none;}.glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full{overflow-x: auto;overflow-y: visible;padding: var(--dock-scroll-safe-inset);margin: calc(-1 * var(--dock-scroll-safe-inset));scroll-padding-inline: var(--dock-scroll-gutter);scrollbar-width: none;overscroll-behavior-x: contain;mask-image: linear-gradient( to right,transparent 0,black var(--fade-start,0px),black calc(100% - var(--fade-end,0px)),transparent 100% );animation: gl-fade-start-in linear both,gl-fade-end-out linear both;animation-timeline: scroll(self inline),scroll(self inline);animation-range: 0 var(--fade-scroll-width),calc(100% - var(--fade-scroll-width)) 100%;}.glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full::-webkit-scrollbar{display: none;}.glass-dock.dock-overflow-wrap{white-space: normal;max-inline-size: var(--dock-max-inline-size);padding: var(--dock-wrap-padding-block,var(--dock-padding-block,0.375rem)) var(--dock-wrap-padding-inline,0.625rem);border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );--dock-wrap-elev: calc(var(--dock-expand-t) * 100%);box-shadow: var(--glass-edge-light),var(--shadow-dock-override,var(--shadow-dock)),0 8px 24px color-mix( in srgb,var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)),transparent ),0 0 0 0.5px color-mix( in srgb,var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)),transparent ),calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix( in srgb,oklch(0 0 0 / 0.12) var(--dock-wrap-elev),transparent );}.glass-dock.dock-overflow-wrap .dock-layer--full{flex-wrap: wrap;justify-content: center;height: auto;min-height: var(--dock-wrap-layer-min-height,var(--dock-layer-height,2rem));gap: var(--dock-wrap-row-gap,0.25rem) var(--dock-wrap-column-gap,var(--dock-layer-gap,0.375rem));}.glass-dock.dock-overflow-wrap .dock-layer--summary{height: auto;min-height: var(--dock-wrap-layer-min-height,var(--dock-layer-height,2rem));}.glass-dock.dock-overflow-wrap .dock-separator{display: none;}.glass-dock.dock-overflow-wrap.collapsed{white-space: nowrap;}@media (pointer: coarse){.glass-dock[data-size]{--dock-local-scale: var( --dock-mobile-scale,var(--dock-coarse-scale,0.78) );--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,1));--dock-control-floor: var(--dock-touch-target,2.75rem);--size-icon-btn: var(--dock-touch-target,2.75rem);--dock-icon-glyph: max( calc( var(--dock-layer-height,calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio) ),var(--dock-icon-glyph-floor) );--dock-control-glyph-size: var(--dock-icon-glyph);--dock-collapsed-padding: calc(0.25rem * var(--dock-scale));--dock-layer-tab-size: calc(1.75rem * var(--dock-scale));--dock-collapsed-summary-min-size: calc( var(--dock-layer-height,2.5rem) * 0.85 );}}}

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

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

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

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

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

@@ -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; 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; } }
+@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;--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;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-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);}}.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/easing/EasingCurve.vue.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from "vue";
+/** `ink` is the subject; `ghost` is the same plot's other reading, held back. */
+export type EasingStrokeTone = "ink" | "ghost";
+/**
+ * One plotted curve.
+ *
+ * `d` is a PATH, not a callable, and that is deliberate: a staircase's shape is its
+ * exact riser positions, and a display unit handed a callable can only sample — which
+ * is precisely how the previous plot spent 241 commands failing to draw a crisp
+ * riser. The owner of the curve knows whether it is smooth or stepped and hands over
+ * the exact path; `usePicker` publishes both.
+ *
+ * There is no `css` field, and its absence is load-bearing: a stroke that renders its
+ * own literal is a SECOND print of the thing the editor prints exactly once. The plot
+ * takes a `label`; the literal has one home.
+ */
+export interface EasingStroke {
+    /** The path `d`, in the plot's SVG space (x rightwards, y downwards). */
+    d: string;
+    tone?: EasingStrokeTone;
+}
+type __VLS_Props = {
+    /** The plotted curves, drawn in order. */
+    strokes: EasingStroke[];
+    /** Normalized travel position; the dot rides the FIRST `ink` stroke's curve. */
+    progress?: number;
+    /** The travelling dot's value at `progress`, in curve space (0 bottom). */
+    travel?: number | null;
+    /** Marks the plot as leaving the frame — the crossed edges take the accent. */
+    clipped?: boolean;
+    /**
+     * Whether the ink stroke is DRAWN. Flip it to `false` and back a frame later
+     * and the ink wipes itself on. Owned by the caller — this unit keeps no state
+     * — and it defaults to `true`, so a plot that is merely shown is shown
+     * finished.
+     */
+    drawn?: boolean;
+    /** The plot's accessible name. */
+    label?: string;
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    class: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    label: string;
+    progress: number;
+    travel: number | null;
+    clipped: boolean;
+    drawn: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/easing/EasingPicker.vue.d.ts

@@ -1,49 +1,33 @@
-import { type EasingPickerMode, type EasingPickerValue, type JumpTerm } from "./composables/useEasingPicker";
+import { type HTMLAttributes } from "vue";
+import { type EasingPickerValue } from "./usePicker.js";
+/** `card` seats the editor on the resting rung; `bare` renders no plate at all —
+ *  the escape a consumer used to buy with `backdrop-filter: none` and `!important`. */
+export type EasingSurface = "card" | "bare";
 type __VLS_Props = {
-    /** The curve-authoring mode — `"bezier"` (draggable cubic-bezier) or
-     *  `"steps"` (the steppedEase staircase). */
-    mode?: EasingPickerMode;
-    /** The initial bezier preset key. */
-    preset?: string;
-    /** The initial step count. */
-    steps?: number;
-    /** The initial step jump term. */
-    term?: JumpTerm;
-    /** Show the copy-the-literal readout affordance (default true). */
-    readout?: boolean;
-    /** Show the playback travel-dot control (default true). */
+    /** The initial authored curve. Any subset; the rest takes the family default. */
+    initial?: Partial<EasingPickerValue>;
+    /** Show the playback transport and its travelling dot (default true). */
     playback?: boolean;
-    /** A11y label for the canvas. */
+    /** A11y label for the plot. */
     label?: string;
+    /** The material the editor sits on. */
+    surface?: EasingSurface;
+    class?: HTMLAttributes["class"];
 };
 type __VLS_ModelProps = {
     modelValue?: EasingPickerValue;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_122: {
-    value: EasingPickerValue;
-};
-type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_122) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: EasingPickerValue | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: EasingPickerValue | undefined) => any) | undefined;
 }>, {
+    class: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     label: string;
-    mode: EasingPickerMode;
-    steps: number;
-    preset: string;
-    term: JumpTerm;
-    readout: boolean;
+    initial: Partial<EasingPickerValue>;
+    surface: EasingSurface;
     playback: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -5,23 +5,25 @@ export declare const DEFAULT_BEZIER_PRESET: "ease-out-back";
 /** The default steps-mode jump count + term. */
 export declare const DEFAULT_STEP_COUNT = 4;
 export declare const DEFAULT_STEP_TERM: "jump-end";
-/** The steps-mode slider bounds. */
+/** The steps-mode bounds. */
 export declare const STEP_COUNT_MIN = 1;
 export declare const STEP_COUNT_MAX = 12;
-/** Dense staircase sampling so the riser/tread reads crisp (a sampled staircase,
- *  not a smoothed curve). */
-export declare const STEP_PLOT_SAMPLES = 240;
-/** bezier-Y (0 bottom, 1 top) → SVG-Y (0 top, grows down). */
+/** bezier-Y (0 bottom, 1 top) → SVG-Y (0 top, grows down). Its own inverse. */
 export declare const SVG_FLIP: (y: number) => number;
-/** The bezier-canvas viewBox overshoot clamp + pad (a back-curve must not blow up
- *  the canvas). */
-export declare const VIEW_PAD = 0.1;
+/** The frame edges in both axes, in curve space AND in SVG space (the frame is
+ *  square and the flip is an involution, so one pair serves both). */
+export declare const FRAME_MIN: number;
+export declare const FRAME_MAX: number;
+/** THE constant viewBox — square, both modes, every preset, every frame of a drag. */
+export declare const VIEW_BOX: `${number} ${number} ${number} ${number}`;
+/** How far a control point may be authored past the unit box. Handles beyond the
+ *  frame PIN to its edge along their own leader; the authored value keeps going. */
 export declare const MAX_OVERSHOOT = 0.6;
-/** The pointer hit-radius for grabbing a handle (touch is forgiving). */
-export declare const HANDLE_HIT_RADIUS = 0.1;
-export declare const HANDLE_HIT_RADIUS_TOUCH = 0.15;
-/** The number of curve samples the viewBox bounds-fit walks. */
-export declare const VIEWBOX_FIT_SAMPLES = 16;
+/** Pointer hit radii in CSS PIXELS, never user units — a user-unit radius is a
+ *  function of the frame and shrank to a 40.7px target at the small clamp, under
+ *  the 44px coarse floor. 22px radius = the 44px diameter floor exactly. */
+export declare const HANDLE_HIT_RADIUS_PX = 22;
+export declare const HANDLE_HIT_RADIUS_TOUCH_PX = 28;
 /** The one-shot rAF travel clock (ms) for the playback dot. */
 export declare const TRAVEL_DURATION_MS = 1200;
 /** The copy-feedback dwell (ms). */

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

@@ -1,3 +1,5 @@
-export { default as EasingPicker } from "./EasingPicker.vue";
-export { default as EasingConfigurator } from "./EasingConfigurator.vue";
-export { useEasingPicker, type EasingPickerMode, type EasingPickerValue, type EasingFn, type BezierPoints, type JumpTerm, type UseEasingPickerOptions, type UseEasingPickerReturn, } from "./composables/useEasingPicker";
+export { default as EasingCurve } from "./EasingCurve.vue.js";
+export type { EasingStroke, EasingStrokeTone } from "./EasingCurve.vue.js";
+export { default as EasingPicker } from "./EasingPicker.vue.js";
+export type { EasingSurface } from "./EasingPicker.vue.js";
+export { useEasingPicker, type CurvePoint, type EasingPickerMode, type EasingPickerValue, type EasingFn, type BezierPoints, type JumpTerm, type UseEasingPickerOptions, type UseEasingPickerReturn, } from "./usePicker.js";