@mkbabb/glass-ui 10.1.2 → 10.1.3

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

@@ -13,6 +13,19 @@ export interface UseDockExpandedSizeReturn {
      * DOM is patched and before `[data-morphing]` reserves one.
      */
     measure: () => void;
+    /**
+     * Read the painted boxes the morph starts from: the root, each persistent region and
+     * both panes. The morph calls this before the posture's DOM is patched.
+     */
+    first: () => void;
+    /**
+     * Pin the morph's origins so its first frame paints the boxes `first` read (a
+     * collapse, which starts unscaled, holds its rest instead). The morph calls this
+     * once `[data-morphing]` and the start scalar are set.
+     */
+    anchor: () => void;
+    /** Clear the origins `anchor` wrote. The morph calls this when it settles. */
+    release: () => void;
 }
 /**
  * Measure the dock's two endpoints, `--dock-expanded-px` and `--dock-collapsed-px`.

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

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

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

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

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

@@ -1 +1 @@
-@layer components{:where(.glass-dock,.dock-layer-group) .dock-layers{display: grid;min-width: 0;}.glass-dock[data-morphing]{--dock-live: calc( var(--dock-collapsed-px,var(--dock-expanded-px,0px)) + ( var(--dock-expanded-px,0px) - var(--dock-collapsed-px,var(--dock-expanded-px,0px)) ) * clamp(0,var(--dock-expand-t),1) );--dock-size-scale: clamp( 0.06,calc(var(--dock-live) / max(var(--dock-expanded-px,1px),1px)),1 );transform-origin: center center;will-change: transform;}.glass-dock[data-morphing]:not(.vertical){inline-size: var(--dock-expanded-px);}.glass-dock[data-morphing].vertical{block-size: var(--dock-expanded-px);}.glass-dock.expanded > .dock-controls > .dock-layers{overflow-x: visible;}:where(.glass-dock,.dock-layer-group) .dock-layer{transition: visibility 0s linear var(--duration-normal);}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving){opacity: 0;visibility: hidden;pointer-events: none;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{opacity: 1;visibility: visible;pointer-events: auto;transition: visibility 0s;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-leaving{opacity: 0;visibility: visible;pointer-events: none;}.glass-dock[data-morphing] .dock-layer.is-leaving{opacity: calc(1 - var(--dock-morph-t));}.glass-dock .dock-layer.is-leaving.is-press-keepalive{opacity: 1;visibility: visible;pointer-events: none;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [inert]{visibility: hidden;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin]{position: relative;z-index: 1;pointer-events: auto;}:where(.glass-dock,.dock-layer-group) .dock-layer{display: flex;align-items: center;grid-area: 1 / 1;gap: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical) .dock-layer{white-space: nowrap;min-height: var(--dock-layer-height,2.5rem);}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active){position: absolute;inset: 0;}.glass-dock[data-morphing] .dock-layer.is-active > *{--dock-stagger-window: var(--dock-stagger-window-size,0.55);--dock-stagger-onset: 0;--child-reveal: clamp( 0,calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ),1 );opacity: var(--child-reveal);scale: calc(0.82 + 0.18 * var(--child-reveal));transform-origin: center;}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of :not(.dock-separator)):nth-last-child(n + 2 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of :not(.dock-separator)):nth-child(n + 2 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of :not(.dock-separator)):nth-last-child(n + 3 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of :not(.dock-separator)):nth-child(n + 3 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4 of :not(.dock-separator)):nth-last-child(n + 4 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 3);}.glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers{width: 100%;}.glass-dock.expanded:not(.fit-content) .dock-layer--full{width: 100%;}.glass-dock.always-expanded{cursor: default;}}
+@layer components{:where(.glass-dock,.dock-layer-group) .dock-layers{display: grid;min-width: 0;}.glass-dock[data-morphing]{--dock-live: calc( var(--dock-collapsed-px,var(--dock-expanded-px,0px)) + ( var(--dock-expanded-px,0px) - var(--dock-collapsed-px,var(--dock-expanded-px,0px)) ) * clamp(0,var(--dock-expand-t),1) );--dock-size-scale: clamp( 0.06,calc(var(--dock-live) / max(var(--dock-expanded-px,1px),1px)),1 );will-change: transform;}.glass-dock[data-morphing]:not(.vertical){transform-origin: var(--dock-morph-origin) center;}.glass-dock[data-morphing].vertical{transform-origin: center var(--dock-morph-origin);}.glass-dock[data-morphing]:not(.vertical){inline-size: var(--dock-expanded-px);}.glass-dock[data-morphing].vertical{block-size: var(--dock-expanded-px);}.glass-dock.expanded > .dock-controls > .dock-layers{overflow-x: visible;}:where(.glass-dock,.dock-layer-group) .dock-layer{transition: visibility 0s linear var(--duration-normal);}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving){opacity: 0;visibility: hidden;pointer-events: none;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{opacity: 1;visibility: visible;pointer-events: auto;transition: visibility 0s;}:where(.glass-dock,.dock-layer-group) .dock-layer.is-leaving{opacity: 0;visibility: visible;pointer-events: none;}.glass-dock[data-morphing] .dock-layer.is-leaving{opacity: calc(1 - var(--dock-morph-t));}.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers > .dock-layer{translate: var(--dock-pane-shift) 0;}.glass-dock[data-morphing].vertical > .dock-controls > .dock-layers > .dock-layer{translate: 0 var(--dock-pane-shift);}.glass-dock .dock-layer.is-leaving.is-press-keepalive{opacity: 1;visibility: visible;pointer-events: none;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [inert]{visibility: hidden;}.glass-dock .dock-layer.is-leaving.is-press-keepalive [data-dock-press-origin]{position: relative;z-index: 1;pointer-events: auto;}:where(.glass-dock,.dock-layer-group) .dock-layer{display: flex;align-items: center;grid-area: 1 / 1;gap: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical) .dock-layer{white-space: nowrap;min-height: var(--dock-layer-height,2.5rem);}:where(.glass-dock,.dock-layer-group) .dock-layer.is-active{position: relative;}:where(.glass-dock,.dock-layer-group) .dock-layer:not(.is-active){position: absolute;inset: 0;}.glass-dock[data-morphing] .dock-layer.is-active > *{--dock-stagger-window: var(--dock-stagger-window-size,0.55);--dock-stagger-onset: 0;--child-reveal: clamp( 0,calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ),1 );opacity: var(--child-reveal);scale: calc(0.82 + 0.18 * var(--child-reveal));transform-origin: center;}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of :not(.dock-separator)):nth-last-child(n + 2 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of :not(.dock-separator)):nth-child(n + 2 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 1);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of :not(.dock-separator)):nth-last-child(n + 3 of :not(.dock-separator)),.glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of :not(.dock-separator)):nth-child(n + 3 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 2);}.glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4 of :not(.dock-separator)):nth-last-child(n + 4 of :not(.dock-separator)){--dock-stagger-onset: calc(var(--dock-stagger-step) * 3);}.glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers{width: 100%;}.glass-dock.expanded:not(.fit-content) .dock-layer--full{width: 100%;}.glass-dock.always-expanded{cursor: default;}}

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

@@ -1 +1 @@
-@layer components{.glass-dock{border-radius: var(--radius-dock);}.glass-dock[data-morphing]:not(.vertical){scale: var(--dock-size-scale,1) 1;}.glass-dock[data-morphing].vertical{scale: 1 var(--dock-size-scale,1);}.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-persistent,.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers{scale: calc(1 / max(var(--dock-size-scale,1),0.06)) 1;will-change: transform;}.glass-dock[data-morphing].vertical > .dock-controls > .dock-persistent,.glass-dock[data-morphing].vertical > .dock-controls > .dock-layers{scale: 1 calc(1 / max(var(--dock-size-scale,1),0.06));will-change: transform;}.glass-dock{--motion-weight: 1;}@media (prefers-reduced-motion: reduce){.glass-dock{--motion-weight: 0;}}}
+@layer components{.glass-dock{border-radius: var(--radius-dock);}.glass-dock[data-morphing]:not(.vertical){scale: var(--dock-size-scale,1) 1;}.glass-dock[data-morphing].vertical{scale: 1 var(--dock-size-scale,1);}.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-persistent,.glass-dock[data-morphing]:not(.vertical) > .dock-controls > .dock-layers{scale: calc(1 / max(var(--dock-size-scale,1),0.06)) 1;transform-origin: var(--dock-morph-origin) center;will-change: transform;}.glass-dock[data-morphing].vertical > .dock-controls > .dock-persistent,.glass-dock[data-morphing].vertical > .dock-controls > .dock-layers{scale: 1 calc(1 / max(var(--dock-size-scale,1),0.06));transform-origin: center var(--dock-morph-origin);will-change: transform;}.glass-dock{--motion-weight: 1;}@media (prefers-reduced-motion: reduce){.glass-dock{--motion-weight: 0;}}}

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

@@ -1 +1 @@
-@layer components{.glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2);--dock-surface-blur: var(--glass-blur-resting);--dock-separator-height: calc(var(--dock-h,var(--size-icon-btn)) * 0.5);--dock-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);position: relative;z-index: 0;margin: 0 auto;--glass-backdrop: light;--dock-plate-collapsed-tier: var(--glass-veil-wash);--dock-plate-collapsed-border: var(--glass-border-floating);--dock-plate-expanded-tier: var(--glass-veil-dock);--dock-plate-expanded-border: var(--glass-border-dock);contain: layout style;display: inline-flex;align-items: center;white-space: nowrap;padding: var(--dock-padding-block,0.375rem) var(--dock-padding-inline,0.5rem);box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--shadow-dock-override,var(--shadow-dock));}.dark .glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14);}.glass-dock{overflow: visible;}.glass-dock.vertical{display: inline-flex;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: var(--dock-layer-gap,0.375rem);white-space: normal;width: auto;height: auto;max-block-size: var(--dock-max-block-size);padding: var(--dock-padding-block,0.375rem);border-radius: var(--radius-dock);transition: box-shadow var(--dock-motion-standard),transform var(--dock-motion-resize),scale var(--dock-motion-resize);}.glass-dock.vertical[data-morphing]{transition-property: box-shadow,transform;}.glass-dock.vertical:hover,.glass-dock.vertical:active,.glass-dock.vertical[data-held]{will-change: transform;}.glass-dock.vertical{padding: var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem));}.glass-dock.vertical.shape-pill{border-radius: var(--radius-pill);}.glass-dock.vertical.shape-rounded{border-radius: var(--radius-card);}.glass-dock.vertical.shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}.glass-dock:not(.vertical).shape-rounded{border-radius: var(--radius-card);}.glass-dock:not(.vertical).shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}@supports (corner-shape: superellipse(2)){.glass-dock:not(.vertical).shape-card{corner-shape: var(--corner-shape-bigdock);}}}
+@layer components{.glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.2);--dock-surface-blur: var(--glass-blur-resting);--dock-separator-height: calc(var(--dock-h,var(--size-icon-btn)) * 0.5);--dock-stagger-window-size: 0.4;--dock-stagger-step: 0.08;--dock-card-radius: var(--radius-dock-card);position: relative;z-index: 0;margin: 0 auto;--glass-backdrop: light;--dock-plate-collapsed-tier: var(--glass-veil-wash);--dock-plate-collapsed-border: var(--glass-border-floating);--dock-plate-expanded-tier: var(--glass-veil-dock);--dock-plate-expanded-border: var(--glass-border-dock);contain: layout style;display: inline-flex;align-items: center;white-space: nowrap;padding: var(--dock-padding-block,0.375rem) var(--dock-padding-inline,0.5rem);box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--shadow-dock-override,var(--shadow-dock));}.dark .glass-dock{--glass-blur-resting: blur( calc(var(--glass-blur-resting-radius) * var(--glass-level)) ) saturate(1.3) brightness(1.14);}.glass-dock{overflow: visible;}.glass-dock[data-morphing]:not(.vertical):not(:has(.is-press-keepalive)){overflow-x: clip;}.glass-dock[data-morphing].vertical:not(:has(.is-press-keepalive)){overflow-y: clip;}.glass-dock.vertical{display: inline-flex;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: var(--dock-layer-gap,0.375rem);white-space: normal;width: auto;height: auto;max-block-size: var(--dock-max-block-size);padding: var(--dock-padding-block,0.375rem);border-radius: var(--radius-dock);transition: box-shadow var(--dock-motion-standard),transform var(--dock-motion-resize);}.glass-dock.vertical:hover,.glass-dock.vertical:active,.glass-dock.vertical[data-held]{will-change: transform;}.glass-dock.vertical{padding: var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem));}.glass-dock.vertical.shape-pill{border-radius: var(--radius-pill);}.glass-dock.vertical.shape-rounded{border-radius: var(--radius-card);}.glass-dock.vertical.shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}.glass-dock:not(.vertical).shape-rounded{border-radius: var(--radius-card);}.glass-dock:not(.vertical).shape-card{border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) );}@supports (corner-shape: superellipse(2)){.glass-dock:not(.vertical).shape-card{corner-shape: var(--corner-shape-bigdock);}}}