@mkbabb/glass-ui 6.0.0 → 8.0.0

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

@@ -1 +1 @@
-:root { --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem); --dock-shape-from: var(--radius-dock, 9999px); --dock-shape-to: var(--radius-dock, 9999px); --dock-shape-clip-from: none; --dock-shape-clip-to: none; --dock-morph-max-stretch: 1.14; --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px)); --dock-search-shrink-start: calc(0rem * var(--dock-scale)); --dock-search-shrink-end: calc(7.25rem * var(--dock-scale)); } @layer components { .glass-dock[data-size="sm"] { --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.375rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); } .glass-dock[data-size="md"] { --dock-padding-block: calc( var(--dock-density-comfortable-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-comfortable-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-comfortable-control-size, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-comfortable-layer-height, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-comfortable-trigger-padding-block, 0.25rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-comfortable-tab-padding-block, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-comfortable-tab-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-tab-h: calc(38px * var(--dock-scale)); } .glass-dock[data-size="lg"] { --dock-padding-block: calc( var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-spacious-padding-inline, 1rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-spacious-trigger-padding-block, 0.375rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-spacious-trigger-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-spacious-tab-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-tab-h: calc(44px * var(--dock-scale)); } .glass-dock[data-size="xl"] { --dock-padding-block: calc( var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-audacious-trigger-padding-block, 0.625rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-audacious-trigger-padding-inline, 1rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-audacious-tab-padding-inline, 1.5rem) * var(--dock-scale) ); --dock-tab-min-height: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); --dock-tab-h: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); } .glass-dock[data-preset="cockpit"] { --dock-control-size: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale) ); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); --dock-label-ratio: 0.275; --dock-icon-glyph: max( calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } .glass-dock[data-size] { --dock-icon-glyph: max( calc( var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio) ), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } @container dock (max-width: 29.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 14px; } } @container dock (min-width: 30rem) and (max-width: 44.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 15px; } } }
+:root{--dock-content-safe-inset: var(--dock-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 "./fisheye.css"; @import "./popover.css"; @import "./section.css"; @import "./cta-seat.css"; @import "./search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --dock-local-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --dock-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @layer components { :where( .glass-dock, .dock-layer-stack, .dock-layer-item-host, .dock-layer-tab, .dock-icon-button, .dark-mode-toggle-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --dock-motion-fast: var(--duration-fast) var(--ease-standard); --dock-motion-standard: var(--duration-normal) var(--ease-standard); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .glass-dock [data-ring-yield]:focus-visible { box-shadow: none; } .dock-icon-button:disabled, .dock-tab-button:disabled, .dock-select-trigger:disabled, .dock-dropdown-trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } }
+@import "./shell.css";@import "./shell-regions.css";@import "./dock.css";@import "./morph.css";@import "./adaptive-legibility.css";@import "./density.css";@import "./shape.css";@import "./layers.css";@import "./layer-group.css";@import "./crossfade.css";@import "./overflow.css";@import "./cta-seat.css";@import "./search.css";@property --dock-morph-t{syntax: "<number>";inherits: true;initial-value: 0;}@property --dock-t{syntax: "<number>";inherits: false;initial-value: 0;}@property --dock-local-scale{syntax: "<number>";inherits: true;initial-value: 1;}@property --dock-scale{syntax: "<number>";inherits: true;initial-value: 1;}@layer components{:where( .glass-dock,.dock-layer-tab,.dock-icon-button,.dark-mode-toggle-button,.dock-tab-button,.dock-select-trigger,.dock-dropdown-trigger ){--dock-motion-fast: var(--duration-fast) var(--ease-standard);--dock-motion-standard: var(--duration-normal) var(--ease-standard);--dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);}.dock-icon-button:focus-visible,.dock-tab-button:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{box-shadow: var(--dock-ring);outline: none;}.glass-dock [data-ring-yield]:focus-visible{box-shadow: none;}.dock-icon-button:disabled,.dock-tab-button:disabled,.dock-select-trigger:disabled,.dock-dropdown-trigger:disabled,.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), transform var(--duration-fast) var(--spring-snappy); pointer-events: none; } .dock-layer-group.vertical .dock-layer-rail .dock-layer-tab-indicator { width: auto; height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); } :where(.glass-dock, .dock-layer-group) .dock-layer-stack { position: relative; display: grid; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { grid-area: 1 / 1; display: flex; align-items: center; white-space: nowrap; gap: var(--dock-layer-gap, 0.375rem); position: absolute; inset: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { position: relative; inset: auto; width: max-content; min-width: 0; } .dock-layer-group.vertical .dock-layer-item-host { flex-direction: column; align-items: stretch; white-space: normal; } .dock-layer-group.vertical .dock-layer-item-host.is-active { width: auto; height: max-content; } }
+@layer components{.dock-separator{@apply flex-shrink-0;width: 1px;height: var(--dock-separator-height);margin: 0 0.375rem;background: var(--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[data-morphing] .dock-layer-stack { --dock-expand-t: var(--dock-morph-t); } .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers { overflow-x: visible; } :where(.glass-dock, .dock-layer-group) .dock-layer, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { transition: visibility 0s linear var(--duration-normal); } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving), :where(.glass-dock, .dock-layer-group) .dock-layer-item-host:not(.is-active):not(.is-leaving) { opacity: 0; visibility: hidden; pointer-events: none; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-leaving { opacity: 0; visibility: visible; pointer-events: none; } .glass-dock[data-morphing] .dock-layer.is-leaving, .glass-dock[data-morphing] .dock-layer-item-host.is-leaving { opacity: calc(1 - var(--dock-morph-t)); } .glass-dock .dock-layer.is-leaving.is-press-keepalive { opacity: 1; visibility: visible; pointer-events: none; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [inert] { visibility: hidden; } .glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin] { position: relative; z-index: 1; pointer-events: auto; } :where(.glass-dock, .dock-layer-group) .dock-layer { display: flex; align-items: center; grid-area: 1 / 1; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-layer { white-space: nowrap; min-height: var(--dock-layer-height, 2.5rem); } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active) { position: absolute; inset: 0; } .glass-dock[data-morphing] .dock-layer.is-active > *, .glass-dock[data-morphing] .dock-layer-item-host.is-active > * { --dock-stagger-window: var(--dock-stagger-window-size, 0.55); --dock-stagger-onset: 0; --child-reveal: clamp( 0, calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ), 1 ); opacity: var(--child-reveal); scale: calc(0.82 + 0.18 * var(--child-reveal)); transform-origin: center; } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(2 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 1); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(3 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 2); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 4):nth-child(-n + 5) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 3); } .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers { width: 100%; } .glass-dock.expanded:not(.fit-content) .dock-layer--full { width: 100%; } .glass-dock.always-expanded { cursor: default; } .glass-dock.layout-grid { white-space: normal; } .glass-dock.layout-grid .dock-layer--full { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--dock-tile-min, 4.5rem), 1fr) ); grid-auto-rows: var(--dock-tile-min, 4.5rem); gap: var(--dock-layer-gap, 0.375rem); width: 100%; height: auto; white-space: normal; place-items: center; } .glass-dock.layout-grid .dock-layers { width: 100%; } .glass-dock.layout-grid.shape-card .dock-layer--full > * { border-radius: calc( var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem) ); } }
+@layer components{:where(.glass-dock,.dock-layer-group) .dock-layers{display: grid;min-width: 0;}.glass-dock[data-morphing]{--dock-live: calc( var(--dock-collapsed-px,var(--dock-expanded-px,0px)) + ( var(--dock-expanded-px,0px) - var(--dock-collapsed-px,var(--dock-expanded-px,0px)) ) * clamp(0,var(--dock-expand-t),1) );--dock-size-scale: clamp( 0.06,calc(var(--dock-live) / max(var(--dock-expanded-px,1px),1px)),1 );transform-origin: center center;will-change: transform;}.glass-dock[data-morphing]:not(.vertical){inline-size: var(--dock-expanded-px);}.glass-dock[data-morphing].vertical{block-size: var(--dock-expanded-px);}.glass-dock.expanded:not(.dock-overflow-wrap) > .dock-controls > .dock-layers{overflow-x: visible;}:where(.glass-dock,.dock-layer-group) .dock-layer{transition: visibility 0s linear var(--duration-normal);}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving){opacity: 0;visibility: hidden;pointer-events: none;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{opacity: 1;visibility: visible;pointer-events: auto;transition: visibility 0s;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-leaving{opacity: 0;visibility: visible;pointer-events: none;}.glass-dock[data-morphing] .dock-layer.is-leaving{opacity: calc(1 - var(--dock-morph-t));}.glass-dock .dock-layer.is-leaving.is-press-keepalive{opacity: 1;visibility: visible;pointer-events: none;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [inert]{visibility: hidden;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin]{position: relative;z-index: 1;pointer-events: auto;}:where(.glass-dock,.dock-layer-group) .dock-layer{display: flex;align-items: center;grid-area: 1 / 1;gap: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical) .dock-layer{white-space: nowrap;min-height: var(--dock-layer-height,2.5rem);}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active){position: absolute;inset: 0;}.glass-dock[data-morphing] .dock-layer.is-active > *{--dock-stagger-window: var(--dock-stagger-window-size,0.55);--dock-stagger-onset: 0;--child-reveal: clamp( 0,calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ),1 );opacity: var(--child-reveal);scale: calc(0.82 + 0.18 * var(--child-reveal));transform-origin: center;}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5){--dock-stagger-onset: calc(var(--dock-stagger-step) * 3);}.glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers{width: 100%;}.glass-dock.expanded:not(.fit-content) .dock-layer--full{width: 100%;}.glass-dock.always-expanded{cursor: default;}.glass-dock.layout-grid{white-space: normal;}.glass-dock.layout-grid .dock-layer--full{display: grid;grid-template-columns: repeat( auto-fill,minmax(var(--dock-tile-min,4.5rem),1fr) );grid-auto-rows: var(--dock-tile-min,4.5rem);gap: var(--dock-layer-gap,0.375rem);width: 100%;height: auto;white-space: normal;place-items: center;}.glass-dock.layout-grid .dock-layers{width: 100%;}.glass-dock.layout-grid.shape-card .dock-layer--full > *{border-radius: calc( var(--dock-card-radius) - var(--dock-padding-inline,0.5rem) );}}

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

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

package/dist/components/dock/styles/shell-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; scale: 1; position: relative; --glass-backdrop: light; contain: layout style; display: inline-flex; align-items: center; white-space: nowrap; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock)); } .dark .glass-dock { --glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14); } .glass-dock { overflow: visible; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { overflow-x: visible; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; } .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar, .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar { display: none; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.vertical { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--dock-layer-gap, 0.375rem); white-space: normal; width: auto; height: auto; max-block-size: var(--dock-max-block-size); padding: var(--dock-padding-block, 0.375rem); border-radius: var(--radius-dock); transition: box-shadow var(--dock-motion-standard), transform var(--dock-motion-resize), scale var(--dock-motion-resize); } .glass-dock.vertical:hover, .glass-dock.vertical:active, .glass-dock.vertical[data-held] { will-change: transform; } .glass-dock.vertical { padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem)); } .glass-dock.vertical .dock-plate { background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-dock, var(--glass-border-wash)); } .glass-dock.vertical.shape-pill { border-radius: var(--radius-pill); } .glass-dock.vertical.shape-rounded { border-radius: var(--radius-xl); } .glass-dock.vertical.shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } .glass-dock:not(.vertical).shape-rounded { border-radius: var(--radius-xl); } .glass-dock:not(.vertical).shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } @supports (corner-shape: superellipse(2)) { .glass-dock:not(.vertical).shape-card { corner-shape: var(--corner-shape-bigdock); } } .glass-dock:where(.fixed) { z-index: var(--z-dock); } .dock-inline { margin: 0 auto; } .dock-sticky { position: sticky; top: 0; z-index: var(--z-dock); margin: 0 auto; } }
+@layer components{.glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2);--dock-surface-blur: var(--glass-blur-resting);--dock-separator-height: calc(var(--dock-h,var(--size-icon-btn)) * 0.5);--dock-collapsed-hover-scale: var(--scale-hover-dock);--dock-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);--dock-tile-min: 4.5rem;position: relative;z-index: 0;--glass-backdrop: light;--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

@@ -4,24 +4,26 @@ export declare const CUSTOM_PRESET: "custom";
 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: "end";
-/** The steps-mode slider bounds. */
+export declare const DEFAULT_STEP_TERM: "jump-end";
+/** 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";

package/dist/components/easing/{composables/useEasingPicker.d.ts → usePicker.d.ts}

@@ -1,13 +1,18 @@
 import { type ComputedRef, type Ref } from "vue";
-import { jumpTerms } from "@mkbabb/value.js";
+import { jumpTerms } from "@mkbabb/value.js/easing";
 /** The two curve-authoring modes — the two donor arms unified. */
 export type EasingPickerMode = "bezier" | "steps";
 /** A `(t: number) => number` easing callable — the value.js family shape. */
 export type EasingFn = (t: number) => number;
 /** The bezier control-point quad `[x1, y1, x2, y2]`. */
 export type BezierPoints = [number, number, number, number];
-/** A value.js step jump-term (`jump-start`/`end`/`both`/`none` + aliases). */
+/** A canonical CSS step jump term. */
 export type JumpTerm = (typeof jumpTerms)[number];
+/** A point in the plot's SVG space (x rightwards, y downwards). */
+export interface CurvePoint {
+    readonly x: number;
+    readonly y: number;
+}
 /** The picker's v-model payload — the live curve callable + its re-parseable
  *  CSS literal + the mode, so a consumer can read back the authored curve. */
 export interface EasingPickerValue {
@@ -24,14 +29,8 @@ export interface EasingPickerValue {
     readonly term: JumpTerm;
 }
 export interface UseEasingPickerOptions {
-    /** The initial mode (default `"bezier"`). */
-    initialMode?: EasingPickerMode;
-    /** The initial bezier preset key (default `"ease-out-back"`). */
-    initialPreset?: string;
-    /** The initial step count (default 4). */
-    initialSteps?: number;
-    /** The initial step term (default `"end"`). */
-    initialTerm?: JumpTerm;
+    /** The initial authored curve. Any subset; the rest takes the family default. */
+    initial?: Partial<EasingPickerValue>;
 }
 export interface UseEasingPickerReturn {
     mode: Ref<EasingPickerMode>;
@@ -43,42 +42,44 @@ export interface UseEasingPickerReturn {
     steps: Ref<number>;
     term: Ref<JumpTerm>;
     terms: readonly JumpTerm[];
-    /** The live easing callable for the active mode — re-derived on every edit. */
+    /** The bezier callable, live in both modes (the ghost stroke reads it). */
+    bezierFn: ComputedRef<EasingFn>;
+    /** The staircase callable, live in both modes. */
+    stepFn: ComputedRef<EasingFn>;
+    /** The callable for the ACTIVE mode — the one the readout and the dot follow. */
     easingFn: ComputedRef<EasingFn>;
     /** The complete re-parseable readout literal for the active mode. */
     readout: ComputedRef<string>;
-    /** Whether the steps-mode readout round-trips through value.js `parseSteps`
-     *  back to the live (n, term) — the boundary-law proof that the painted
-     *  staircase IS a re-parseable value.js literal, not a hand-rolled string
-     *  the catalogue cannot read back. `true` in bezier mode (no steps literal). */
+    /** Whether the authored readout round-trips through Value's CSS parser. */
     reparseOk: ComputedRef<boolean>;
     /** The full v-model payload (mode + css + fn + raw params). */
     value: ComputedRef<EasingPickerValue>;
-    /** Two SVG-space handle coords `[{x,y},{x,y}]` (bezier mode). */
-    handlesSvg: ComputedRef<{
-        x: number;
-        y: number;
-    }[]>;
-    /** The bezier path `d` (`M 0 1 C …`). */
+    /** The AUTHORED handle coords in SVG space — may sit outside the frame. */
+    handlesSvg: ComputedRef<CurvePoint[]>;
+    /** Where the handles PAINT: on their own leader, clamped to the frame edge. */
+    handlePins: ComputedRef<CurvePoint[]>;
+    /** The two leader anchors, `(0,1)` and `(1,0)` in SVG space. */
+    leaderAnchors: readonly CurvePoint[];
+    /** The bezier path `d` (`M 0 1 C …`) — the authored control points, unclamped. */
     bezierPathD: ComputedRef<string>;
-    /** The sampled staircase path `d` (steps mode). */
+    /** The staircase path `d` — constructed from the callable, never sampled. */
     stepPathD: ComputedRef<string>;
-    /** The bezier-canvas viewBox `{ minY, height }` clamping overshoot. */
-    viewBox: ComputedRef<{
-        minY: number;
-        height: number;
+    /** The active curve's exact extrema and whether it leaves the constant frame. */
+    excursion: ComputedRef<{
+        min: number;
+        max: number;
+        clipped: boolean;
     }>;
     progress: Ref<number>;
     playing: Ref<boolean>;
     playbackState: ComputedRef<"idle" | "playing" | "complete">;
-    reducedMotion: Ref<boolean>;
+    reducedMotion: Readonly<Ref<boolean>>;
     playTravel: () => void;
     cancelTravel: () => void;
     stopTravel: () => void;
 }
 /**
- * The <EasingPicker> shared editor state. Composes the value.js math; owns the
- * chassis (control points, the literal, the rAF travel). Used by the EasingPicker
- * SFC + (composed through it) the EasingConfigurator register — ONE source.
+ * The `<EasingPicker>` editor state. Composes the value.js math; owns the chassis
+ * (control points, the literal, the constant-frame geometry, the rAF travel).
  */
 export declare function useEasingPicker(options?: UseEasingPickerOptions): UseEasingPickerReturn;

package/dist/components/expandable-container/ExpandableContainer.vue.d.ts

@@ -1,41 +1,21 @@
-import { type Surface } from "../_shared/useSurfaceAxis";
+import type { Surface } from "../_shared/axes.js";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     buttonPosition?: "left" | "right";
-    /** Accessible name for the expand (fullscreen) button. */
     expandLabel?: string;
-    /** Accessible name for the collapse (exit fullscreen) button. */
     collapseLabel?: string;
-    /** Surface decoration register for the fullscreen overlay
-     *  (BA.W-SURFACE-AXIS) — `glass` (default) frosts over the page;
-     *  `opaque` is the solid-wall opt-out; `veil` the borderless plate. */
     surface?: Surface;
 } & {
-    /**
-     * Two-way `open` model so consumers can drive fullscreen externally
-     * (programmatic toggles, route-driven launches, etc.) while the corner
-     * buttons continue to operate without parent wiring.
-     */
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
     buttonPosition?: "left" | "right";
-    /** Accessible name for the expand (fullscreen) button. */
     expandLabel?: string;
-    /** Accessible name for the collapse (exit fullscreen) button. */
     collapseLabel?: string;
-    /** Surface decoration register for the fullscreen overlay
-     *  (BA.W-SURFACE-AXIS) — `glass` (default) frosts over the page;
-     *  `opaque` is the solid-wall opt-out; `veil` the borderless plate. */
     surface?: Surface;
 } & {
-    /**
-     * Two-way `open` model so consumers can drive fullscreen externally
-     * (programmatic toggles, route-driven launches, etc.) while the corner
-     * buttons continue to operate without parent wiring.
-     */
     open?: boolean;
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
@@ -49,10 +29,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         expand: () => void;
         label: string;
     }) => any;
-} & {
-    default?: (props: {
-        fullscreen: boolean;
-    }) => any;
 } & {
     'fullscreen-chrome'?: (props: {
         collapse: () => void;

package/dist/components/expandable-container/index.d.ts

@@ -1 +1 @@
-export { default as ExpandableContainer } from "./ExpandableContainer.vue";
+export { default as ExpandableContainer } from "./ExpandableContainer.vue.js";

package/dist/components/fading-scroll/FadingScroll.vue.d.ts

@@ -5,6 +5,10 @@ type __VLS_Props = {
     fadeStart?: boolean;
     /** Feather the end edge while trailing overflow remains. Default `true`. */
     fadeEnd?: boolean;
+    /** Name the scroll port and expose it as a region. */
+    ariaLabel?: string;
+    /** Reference visible naming text and expose the scroll port as a region. */
+    ariaLabelledby?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/fading-scroll/composables/useFadingScroll.d.ts

@@ -1,4 +1,7 @@
 import type { MaybeRef, Ref } from "vue";
+type RtlScrollType = "negative" | "positive-ascending" | "positive-descending";
+/** Normalize every browser RTL scrollLeft model to distance from inline-start. */
+export declare function normalizeHorizontalScrollLeft(scrollLeft: number, max: number, direction: string, type?: RtlScrollType): number;
 export interface UseFadingScrollOptions {
     /** Scroll axis. `"x"` reads scrollLeft/Width; `"y"` reads scrollTop/Height. Default `"x"`. */
     axis?: MaybeRef<"x" | "y">;
@@ -29,3 +32,4 @@ export interface UseFadingScrollControls {
  * @param target the scroll-port element (the same element the CSS customs apply to)
  */
 export declare function useFadingScroll(target: MaybeRef<HTMLElement | null>, options?: UseFadingScrollOptions): UseFadingScrollControls;
+export {};

package/dist/components/fading-scroll/constants.d.ts

@@ -1,15 +1,7 @@
 /**
- * The module-scope constants for the FadingScroll family — the colocation home
- * (`proof:colocation`) the dir owes once it carries a complex composable. Both
- * were promoted out of `composables/useFadingScroll.ts` verbatim.
+ * Module-scope constant colocated with the FadingScroll family. Promoted out of
+ * `composables/useFadingScroll.ts` verbatim.
  */
-/**
- * True when the engine genuinely supports a `scroll()` timeline — the CSS recipe
- * in `utilities/base.css` then owns the visual axis on the compositor and the
- * `useFadingScroll` composable becomes the inert (non-attaching) path. Module-level
- * so the feature gate is computed once. (Mirrors `useScrollProgress`'s twin.)
- */
-export declare const NATIVE_SCROLL_TIMELINE: boolean;
 /**
  * Tolerance (CSS px) absorbing scroll-snap jitter — `snap-mandatory` parks the
  * active card a few px off the true start, so the start edge reads as sharp until

package/dist/components/fading-scroll/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FadingScroll } from "./FadingScroll.vue";
-export { useFadingScroll, type UseFadingScrollOptions, type UseFadingScrollControls, } from "./composables/useFadingScroll";
+export { default as FadingScroll } from "./FadingScroll.vue.js";
+export { useFadingScroll, type UseFadingScrollOptions, type UseFadingScrollControls, } from "./composables/useFadingScroll.js";