@mkbabb/glass-ui 10.1.3 → 10.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dark-mode-toggle/dark-mode-toggle.css +1 -1
- package/dist/components/data-table/composables/useDataTableResponsive.d.ts +2 -0
- package/dist/components/deck/styles/capture.css +1 -1
- package/dist/components/dock/composables/dockMorphMeasure.d.ts +1 -1
- package/dist/components/dock/styles/adaptive-legibility.css +1 -1
- package/dist/components/dock/styles/controls/icon-button.css +1 -1
- package/dist/components/dock/styles/controls/tab-button.css +1 -1
- package/dist/components/dock/styles/controls/triggers.css +1 -1
- package/dist/components/dock/styles/crossfade.css +1 -1
- package/dist/components/dock/styles/layer-group.css +1 -1
- package/dist/components/dock/styles/morph.css +1 -1
- package/dist/components/dock/styles/run.css +1 -1
- package/dist/components/dock/styles/shell-regions.css +1 -1
- package/dist/components/slider/styles.css +1 -1
- package/dist/components/slider/types.d.ts +2 -2
- package/dist/components/tabs/styles/drag.css +1 -1
- package/dist/components/tabs/styles/segmented.css +1 -1
- package/dist/composables/dom/useResizeObserver.d.ts +3 -1
- package/dist/{configurator-CPxIo3q2.js → configurator-Dl10mc3L.js} +1 -1
- package/dist/configurator.js +1 -1
- package/dist/{data-table-Cs93-uY7.js → data-table-8y6fbyOB.js} +114 -109
- package/dist/data-table.js +1 -1
- package/dist/dock.js +685 -544
- package/dist/dom.js +1 -1
- package/dist/easing.js +1 -1
- package/dist/{fading-scroll-CTeW3KNS.js → fading-scroll-ClCPooXb.js} +1 -1
- package/dist/fading-scroll.js +1 -1
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +4 -4
- package/dist/labeled-field.js +1 -1
- package/dist/pager-dots.js +1 -1
- package/dist/{slider-5uoY-cLG.js → slider-Dg3Qqdyo.js} +75 -63
- package/dist/slider.js +1 -1
- package/dist/styles/components.css +1 -1
- package/dist/styles/glass/control-surfaces.css +1 -1
- package/dist/styles/glass/glass-capsule.css +1 -1
- package/dist/styles/glass/overlay-plate.css +1 -1
- package/dist/styles/glass/value-marks.css +1 -1
- package/dist/styles/tokens/dark-arm.css +1 -1
- package/dist/styles/tokens/light-dark.css +1 -1
- package/dist/styles/tokens/sizing.css +1 -1
- package/dist/styles/utilities/components.css +1 -1
- package/dist/{useResizeObserver-CdUlm2QZ.js → useResizeObserver-Bv3nN46q.js} +4 -7
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.dark-mode-toggle-button{--dark-mode-toggle-size: 2.25rem;--dark-mode-toggle-padding: 0.375rem;appearance: none;display: inline-grid;place-items: center;flex: none;width: var(--dark-mode-toggle-size);height: var(--dark-mode-toggle-size);padding: var(--dark-mode-toggle-padding);border: 0;border-radius: var(--radius-pill);color: var(--foreground);background: transparent;opacity: 0.8;cursor: pointer;transition: opacity var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}.dark-mode-toggle-button:hover{background: var(--surface-tint-10);opacity: 1;}.dark-mode-toggle-button:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow,var(--dock-ring));opacity: 1;}.dark-mode-toggle-button > svg{display: block;width: 100%;height: 100%;fill: currentColor;}.dark-mode-toggle-button[data-size="sm"]{--dark-mode-toggle-size: 1.75rem;--dark-mode-toggle-padding: 0.25rem;}.dark-mode-toggle-button[data-size="lg"]{--dark-mode-toggle-size: 2.75rem;--dark-mode-toggle-padding: 0.5rem;}.dark-mode-toggle-button[data-size="control"]{--dark-mode-toggle-size: var(--control-size,2.25rem);--dark-mode-toggle-padding: var(--control-icon-padding,0.375rem);}.dark-mode-toggle-button[data-size="dock"],.glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ){--dark-mode-toggle-size: var(--dock-control-size,var(--size-icon-btn));--dark-mode-toggle-padding: calc( ( var(--dock-control-size,var(--size-icon-btn)) - var(--dock-control-glyph-size,var(--dock-icon-glyph,1.25rem)) ) / 2 );}.toggle-sun,.toggle-circle{transform-origin: center;transition-property: transform;transition-duration: var(--spring-dock-duration);transition-timing-function: var(--spring-dock);}:where(.dark) .dark-mode-toggle-button .toggle-sun{transform: rotate(0.5turn);}:where(.dark) .dark-mode-toggle-button .toggle-circle{transform: translateX(-15%);}}@layer components{@media (prefers-reduced-motion: reduce){.dark-mode-toggle-button,.dark-mode-toggle-button .toggle-sun,.dark-mode-toggle-button .toggle-circle{transition: none;}}}
|
|
1
|
+
@layer components{.dark-mode-toggle-button{--dark-mode-toggle-size: 2.25rem;--dark-mode-toggle-padding: 0.375rem;appearance: none;display: inline-grid;place-items: center;flex: none;width: var(--dark-mode-toggle-size);height: var(--dark-mode-toggle-size);padding: var(--dark-mode-toggle-padding);border: 0;border-radius: var(--radius-pill);color: var(--foreground);background: transparent;opacity: 0.8;cursor: pointer;transition: opacity var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (hover: hover){.dark-mode-toggle-button:hover{background: var(--surface-tint-10);opacity: 1;}}.dark-mode-toggle-button:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow,var(--dock-ring));opacity: 1;}.dark-mode-toggle-button > svg{display: block;width: 100%;height: 100%;fill: currentColor;}.dark-mode-toggle-button[data-size="sm"]{--dark-mode-toggle-size: 1.75rem;--dark-mode-toggle-padding: 0.25rem;}.dark-mode-toggle-button[data-size="lg"]{--dark-mode-toggle-size: 2.75rem;--dark-mode-toggle-padding: 0.5rem;}.dark-mode-toggle-button[data-size="control"]{--dark-mode-toggle-size: var(--control-size,2.25rem);--dark-mode-toggle-padding: var(--control-icon-padding,0.375rem);}.dark-mode-toggle-button[data-size="dock"],.glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ){--dark-mode-toggle-size: var(--dock-control-size,var(--size-icon-btn));--dark-mode-toggle-padding: calc( ( var(--dock-control-size,var(--size-icon-btn)) - var(--dock-control-glyph-size,var(--dock-icon-glyph,1.25rem)) ) / 2 );}.toggle-sun,.toggle-circle{transform-origin: center;transition-property: transform;transition-duration: var(--spring-dock-duration);transition-timing-function: var(--spring-dock);}:where(.dark) .dark-mode-toggle-button .toggle-sun{transform: rotate(0.5turn);}:where(.dark) .dark-mode-toggle-button .toggle-circle{transform: translateX(-15%);}}@layer components{@media (prefers-reduced-motion: reduce){.dark-mode-toggle-button,.dark-mode-toggle-button .toggle-sun,.dark-mode-toggle-button .toggle-circle{transition: none;}}}
|
|
@@ -13,6 +13,8 @@ export interface UseDataTableResponsiveOptions<T> {
|
|
|
13
13
|
export interface UseDataTableResponsiveReturn<T> {
|
|
14
14
|
/** True when the table should render the stacked card-per-row projection. */
|
|
15
15
|
isCard: ComputedRef<boolean>;
|
|
16
|
+
/** The projection a container of `width` CSS px takes: the one rule `isCard` reads. */
|
|
17
|
+
cardAt: (width: number) => boolean;
|
|
16
18
|
/** The first column — the card's header line. */
|
|
17
19
|
headerColumn: ComputedRef<DataTableColumn<T> | undefined>;
|
|
18
20
|
/** Every column after the first — the card body's label/value pairs. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{[data-deck-capture="export"] .deck-stage{--deck-export-inline: 1280px;--deck-export-block: 720px;position: relative;inset: auto;margin: 0;aspect-ratio: auto;inline-size: var(--deck-export-inline);block-size: var(--deck-export-block);max-inline-size: none;max-block-size: none;border-radius: 0;}[data-deck-capture="export"] .deck-slide{border-radius: 0;box-shadow: none;}[data-deck-capture="export"] .deck-ground,[data-deck-capture="freeze"] .deck-ground,[data-deck-capture="export"] .deck-slide,[data-deck-capture="freeze"] .deck-slide{transition: none !important;animation: none !important;}[data-deck-capture="export"] .deck-slide[data-state="active"],[data-deck-capture="freeze"] .deck-slide[data-state="active"]{--turn-x: 0px !important;--turn-s: 1 !important;--turn-r: 0deg !important;}[data-deck-capture="export"] .deck-slide::before,[data-deck-capture="export"] .deck-slide::after,[data-deck-capture="freeze"] .deck-slide::before,[data-deck-capture="freeze"] .deck-slide::after{opacity: 0 !important;animation: none !important;}[data-deck-capture="export"] [data-reveal],[data-deck-capture="freeze"] [data-reveal],[data-deck-capture="print"] [data-reveal]{opacity: 1 !important;animation: none !important;}[data-deck-capture="print"] .deck-stage{position: static;display: block;aspect-ratio: auto;inline-size: auto;block-size: auto;overflow: visible;}[data-deck-capture="print"] .deck-strip{display: block;overflow: visible;perspective: none;}[data-deck-capture="print"] .deck-ground{display: none;}[data-deck-capture="print"] .deck-slide{position: relative;opacity: 1 !important;visibility: visible !important;transform: none !important;pointer-events: auto;margin-block: var(--space-family);background: var(--background);}[data-deck-capture="print"] .deck-slide::before,[data-deck-capture="print"] .deck-slide::after{opacity: 0 !important;}}@layer components{@media print{@page{size: 1280px 720px;margin: 0;}
|
|
1
|
+
@layer components{[data-deck-capture="export"] .deck-stage{--deck-export-inline: 1280px;--deck-export-block: 720px;position: relative;inset: auto;margin: 0;aspect-ratio: auto;inline-size: var(--deck-export-inline);block-size: var(--deck-export-block);max-inline-size: none;max-block-size: none;border-radius: 0;}[data-deck-capture="export"] .deck-slide{border-radius: 0;box-shadow: none;}[data-deck-capture="export"] .deck-ground,[data-deck-capture="freeze"] .deck-ground,[data-deck-capture="export"] .deck-slide,[data-deck-capture="freeze"] .deck-slide{transition: none !important;animation: none !important;}[data-deck-capture="export"] .deck-slide[data-state="active"],[data-deck-capture="freeze"] .deck-slide[data-state="active"]{--turn-x: 0px !important;--turn-s: 1 !important;--turn-r: 0deg !important;}[data-deck-capture="export"] .deck-slide::before,[data-deck-capture="export"] .deck-slide::after,[data-deck-capture="freeze"] .deck-slide::before,[data-deck-capture="freeze"] .deck-slide::after{opacity: 0 !important;animation: none !important;}[data-deck-capture="export"] [data-reveal],[data-deck-capture="freeze"] [data-reveal],[data-deck-capture="print"] [data-reveal]{opacity: 1 !important;animation: none !important;}[data-deck-capture="print"] .deck-stage{position: static;display: block;aspect-ratio: auto;inline-size: auto;block-size: auto;overflow: visible;}[data-deck-capture="print"] .deck-strip{display: block;overflow: visible;perspective: none;}[data-deck-capture="print"] .deck-ground{display: none;}[data-deck-capture="print"] .deck-slide{position: relative;opacity: 1 !important;visibility: visible !important;transform: none !important;pointer-events: auto;margin-block: var(--space-family);background: var(--background);}[data-deck-capture="print"] .deck-slide::before,[data-deck-capture="print"] .deck-slide::after{opacity: 0 !important;}}@layer components{@media print{@page deck{size: 1280px 720px !important;margin: 0 !important;}[data-slot="deck-stage"]{page: deck;}:root:has([data-slot="deck-stage"]),:root:has([data-slot="deck-stage"]) body{page: deck;overflow: visible !important;margin: 0 !important;padding: 0 !important;print-color-adjust: exact;-webkit-print-color-adjust: exact;}:root:has([data-slot="deck-stage"]),:root:has([data-slot="deck-stage"]) body,:root:has([data-slot="deck-stage"]) #app{block-size: auto !important;min-block-size: 0 !important;}.deck-stage{position: static !important;display: block !important;aspect-ratio: auto !important;inline-size: auto !important;block-size: auto !important;overflow: visible !important;}.deck-strip{display: block !important;overflow: visible !important;perspective: none !important;}.deck-ground{display: none !important;}.deck-slide{position: relative !important;opacity: 1 !important;visibility: visible !important;transform: none !important;box-shadow: none !important;border-radius: 0 !important;margin: 0 !important;block-size: 719px !important;overflow: hidden !important;background: var(--background) !important;}.deck-slide::before,.deck-slide::after{opacity: 0 !important;}.deck-slide:not(:last-child){break-after: page;}.deck-stage .sr-only{display: none !important;}}}
|
|
@@ -32,7 +32,7 @@ export interface UseDockExpandedSizeReturn {
|
|
|
32
32
|
*
|
|
33
33
|
* An endpoint is the root's box at rest in its posture, laid out from the live DOM on
|
|
34
34
|
* every capture (`restSize`). Nothing is latched but each posture's chrome, the root
|
|
35
|
-
* less its
|
|
35
|
+
* less its layers box, read only from a root at rest in that posture (no `[data-morphing]`).
|
|
36
36
|
* The chrome holds padding, border, gaps and the persistent regions, none of which
|
|
37
37
|
* depends on the host. So an endpoint follows the pane and the host in every posture and
|
|
38
38
|
* through a morph (O-101, O-101a).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{:where(.glass-dock){--dock-fg-on-aurora: var(--foreground);--muted-foreground: var(--foreground);}@supports (color: contrast-color(white)){:where(.glass-dock){--dock-fg-on-aurora: contrast-color(var(--card));--muted-foreground: contrast-color(var(--card));}}.glass-dock[data-backdrop-mode="static"]{--glass-level: 0;--glass-backdrop-luma: 0;}.glass-dock[data-backdrop-mode="static"] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);-webkit-backdrop-filter: none;backdrop-filter: none;}}
|
|
1
|
+
@layer components{:where(.glass-dock){--dock-fg-on-aurora: var(--foreground);--muted-foreground: var(--foreground);}@supports (color: contrast-color(white)){:where(.glass-dock){--dock-fg-on-aurora: contrast-color(var(--card));--muted-foreground: contrast-color(var(--card));}}.glass-dock[data-backdrop-mode="static"]{--glass-level: 0;--glass-backdrop-luma: 0;}.glass-dock[data-backdrop-mode="static"] .dock-plate{--glass-level: 1;background: linear-gradient(var(--glass-veil),var(--glass-veil)),var(--card);--dock-plate-expanded-border: var(--glass-border-floating);-webkit-backdrop-filter: none;backdrop-filter: none;}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{@property --dock-press-t{syntax: "<number>";inherits: true;initial-value: 0;}.dock-icon-button{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;width: var(--dock-control-size,var(--size-icon-btn));height: var(--dock-control-size,var(--size-icon-btn));padding: var(--dock-icon-padding,0);cursor: pointer;border: none;background: transparent;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);--glass-btn-press-t: var(--dock-press-t,0);filter: brightness(calc(1 - var(--dock-press-t,0) * 0.04))
|
|
1
|
+
@layer components{@property --dock-press-t{syntax: "<number>";inherits: true;initial-value: 0;}.dock-icon-button{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;width: var(--dock-control-size,var(--size-icon-btn));height: var(--dock-control-size,var(--size-icon-btn));padding: var(--dock-icon-padding,0);cursor: pointer;border: none;background: transparent;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);--glass-btn-press-t: var(--dock-press-t,0);filter: brightness(calc(1 - var(--dock-press-t,0) * 0.04));@media (hover: hover){&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-icon-hover-bg,var(--dock-control-hover-bg));color: var(--btn-hover-color,var(--foreground));scale: var(--scale-hover-dock);}}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);}&:active:not(:disabled):not([data-press-armed]):not([aria-disabled="true"]){scale: var(--scale-press-dock);}&:disabled,&[aria-disabled="true"]{opacity: var(--opacity-disabled,0.4);pointer-events: none;cursor: default;}&:focus:not(:focus-visible){outline: none;}&:is(.is-active,.active,[aria-expanded="true"],[aria-pressed="true"]){background: var(--dock-active-bg);color: var(--dock-active-color);scale: var(--dock-active-scale);border: var(--dock-active-border);box-shadow: var(--dock-active-shadow);}&[data-active]{--glass-capsule-fill: var( --dock-control-active-bg,var(--glass-plate-floating) );background: var(--glass-capsule-fill);color: var(--dock-fg-on-aurora,var(--foreground));}}.dock-icon-button > svg{width: var(--dock-icon-glyph,1.25rem);height: var(--dock-icon-glyph,1.25rem);}.dock-icon-button--compact{width: var(--dock-compact-control-size,auto);height: var(--dock-compact-control-size,auto);min-width: var(--dock-compact-control-min-width,0);padding: var(--dock-compact-control-padding,0.25rem);}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.dock-tab-button{display: inline-flex;align-items: center;flex-shrink: 0;min-height: var(--dock-tab-h,var(--dock-tab-min-height,auto));padding-inline: var(--dock-tab-padding-inline,0.75rem);padding-block: var(--dock-tab-padding-block,0.375rem);border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));font-size: var(--type-small);line-height: 1;color: var(--muted-foreground);text-decoration: none;cursor: pointer;white-space: nowrap;outline: none;scale: 1;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring)
|
|
1
|
+
@layer components{.dock-tab-button{display: inline-flex;align-items: center;flex-shrink: 0;min-height: var(--dock-tab-h,var(--dock-tab-min-height,auto));padding-inline: var(--dock-tab-padding-inline,0.75rem);padding-block: var(--dock-tab-padding-block,0.375rem);border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));font-size: var(--type-small);line-height: 1;color: var(--muted-foreground);text-decoration: none;cursor: pointer;white-space: nowrap;outline: none;scale: 1;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring);@media (hover: hover){&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--foreground);scale: var(--scale-hover-dock);}}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}&:is(.is-active,.active,[aria-current="page"],[aria-pressed="true"]){background: var(--dock-control-active-bg);color: var(--foreground);}}.dock-tab-button[data-tier="primary"]{--dock-tab-min-height: 4rem;padding-inline: 1.5rem;background: color-mix(in srgb,var(--card) 60%,transparent);color: var(--foreground);}.dock-tab-button[data-tier="secondary"],.dock-icon-button[data-tier="secondary"]{background: color-mix(in srgb,var(--card) 50%,transparent);border: 1px solid var(--glass-border-quiet);box-shadow: var(--border-hairline);}@media (hover: hover){.dock-tab-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]),.dock-icon-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]){background: color-mix(in srgb,var(--card) 65%,transparent);box-shadow: var(--glass-material-rim),0 0.5px 0 0 rgb(0 0 0 / 0.06);}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.dock-trigger,.dock-select-trigger,.dock-dropdown-trigger{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;gap: var(--dock-trigger-gap,
|
|
1
|
+
@layer components{.dock-trigger,.dock-select-trigger,.dock-dropdown-trigger{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;gap: var(--dock-trigger-gap,var(--icon-label-gap));min-height: var(--dock-trigger-min-height,auto);padding: var(--dock-trigger-padding-block,0.25rem) var(--dock-trigger-padding-inline,0.5rem);white-space: nowrap;cursor: pointer;border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast);}@media (hover: hover){.dock-trigger:hover:not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--btn-hover-color,var(--foreground));}}.dock-trigger:active:not([aria-disabled="true"]){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}.dock-trigger:focus:not(:focus-visible),.dock-select-trigger:focus:not(:focus-visible),.dock-dropdown-trigger:focus:not(:focus-visible){outline: none;}.dock-trigger:focus-visible,.dock-select-trigger:focus-visible,.dock-dropdown-trigger:focus-visible{transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);}.dock-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-select-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ),.dock-dropdown-trigger:is( .is-active,.active,[aria-expanded="true"],[aria-pressed="true"] ){background: var(--dock-control-active-bg);color: var(--foreground);}.dock-select-trigger__chevron{width: var(--dock-trigger-icon-size,0.75rem);height: var(--dock-trigger-icon-size,0.75rem);flex-shrink: 0;opacity: 0.5;rotate: 0deg;transition: rotate var(--dock-press-spring);}.dock-select-trigger[data-state="open"] .dock-select-trigger__chevron{rotate: 180deg;}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.dock-crossfade{position: relative;display: grid;isolation: isolate;}.dock-crossfade > .dock-face{grid-area: 1 / 1;position: absolute;inset: 0;opacity: 0;pointer-events: none;will-change: opacity;}.dock-crossfade > .dock-face.is-active{position: relative;inset: auto;z-index: 1;inline-size: max-content;min-inline-size: 0;opacity: 1;pointer-events: auto;}.dock-crossfade > .dock-face.is-leaving{position: absolute;inset: 0;z-index: 0;pointer-events: none;visibility: visible;}.dock-crossfade[data-crossfading] > .dock-face.is-active{opacity: var(--dock-t);}.dock-crossfade[data-crossfading] > .dock-face.is-leaving{opacity: calc(1 - var(--dock-t));}.dock-crossfade > .dock-face > .dock-face-content{display: flex;align-items: center;gap: var(--dock-layer-gap,0.375rem);white-space: nowrap;block-size: 100%;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face > .dock-face-content{flex-direction: column;align-items: stretch;white-space: normal;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face.is-active{inline-size: auto;block-size: max-content;}.glass-dock[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0);will-change: clip-path;}.glass-dock.vertical[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0);}@media (prefers-reduced-motion: reduce){.dock-crossfade > .dock-face{will-change: auto;}}}
|
|
1
|
+
@layer components{.dock-crossfade{position: relative;display: grid;isolation: isolate;}.dock-crossfade > .dock-face{grid-area: 1 / 1;position: absolute;inset: 0;opacity: 0;pointer-events: none;will-change: opacity;}.dock-crossfade > .dock-face:not(.is-active):not(.is-leaving){overflow: clip;}.dock-crossfade > .dock-face.is-active{position: relative;inset: auto;z-index: 1;inline-size: max-content;min-inline-size: 0;opacity: 1;pointer-events: auto;}.dock-crossfade > .dock-face.is-leaving{position: absolute;inset: 0;z-index: 0;pointer-events: none;visibility: visible;}.dock-crossfade[data-crossfading] > .dock-face.is-active{opacity: var(--dock-t);}.dock-crossfade[data-crossfading] > .dock-face.is-leaving{opacity: calc(1 - var(--dock-t));}.dock-crossfade > .dock-face > .dock-face-content{display: flex;align-items: center;gap: var(--dock-layer-gap,0.375rem);white-space: nowrap;block-size: 100%;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face > .dock-face-content{flex-direction: column;align-items: stretch;white-space: normal;}:where(.glass-dock,.dock-layer-group).vertical .dock-crossfade > .dock-face.is-active{inline-size: auto;block-size: max-content;}.glass-dock[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0);will-change: clip-path;}.glass-dock.vertical[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content{clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0);}@media (prefers-reduced-motion: reduce){.dock-crossfade > .dock-face{will-change: auto;}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@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;}:is(.glass-dock,.dock-layer-group):not(.vertical) .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{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}: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));}}
|
|
1
|
+
@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;}:is(.glass-dock,.dock-layer-group):not(.vertical) .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;}@media (hover: hover){: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{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}: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));}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.glass-dock.expanded,.glass-dock.always-expanded{--dock-expand-t: 1;}.glass-dock.collapsed{--dock-expand-t: 0;}.glass-dock.expanded[data-morphing],.glass-dock.always-expanded[data-morphing]{--dock-expand-t: var(--dock-morph-t);}.glass-dock.collapsed[data-morphing]{--dock-expand-t: calc(1 - var(--dock-morph-t));}.glass-dock:not(.vertical){--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{--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[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}
|
|
1
|
+
@layer components{.glass-dock.expanded,.glass-dock.always-expanded{--dock-expand-t: 1;}.glass-dock.collapsed{--dock-expand-t: 0;}.glass-dock.expanded[data-morphing],.glass-dock.always-expanded[data-morphing]{--dock-expand-t: var(--dock-morph-t);}.glass-dock.collapsed[data-morphing]{--dock-expand-t: calc(1 - var(--dock-morph-t));}.glass-dock:not(.vertical){--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{--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;border-radius: var(--dock-cap-rest);}.glass-dock .dock-layer--summary:focus-visible{outline: var(--dock-ring-width) solid var(--dock-ring-color);outline-offset: var(--dock-ring-offset);}.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[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.glass-dock{--dock-seat: var(--dock-control-size);--dock-run-gap: 0.5rem;--dock-pitch: calc(var(--dock-seat) + var(--dock-run-gap));--dock-open-pitches: 3;--dock-open-seat: calc( var(--dock-open-pitches) * var(--dock-pitch) - var(--dock-run-gap) );}.glass-dock.vertical{--dock-open-pitches: 2;}.glass-dock > .dock-controls > .dock-layers{flex: 1 1 auto;min-inline-size: 0;min-block-size: 0;}.glass-dock > .dock-controls > .dock-persistent{flex: 0 0 auto;}.glass-dock .dock-run{overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-padding-inline: calc(var(--dock-pitch) / 2);touch-action: pan-x;overscroll-behavior: contain;scrollbar-width: none;min-inline-size: 0;box-sizing: content-box;padding-block: var(--dock-ring-reserve);margin-block: calc(-1 * var(--dock-ring-reserve));gap: var(--dock-run-gap);}.glass-dock .dock-run::-webkit-scrollbar{display: none;}.glass-dock .dock-run > *{scroll-snap-align: start;flex: 0 0 auto;}.glass-dock.vertical .dock-run{overflow-x: hidden;overflow-y: auto;scroll-snap-type: y mandatory;scroll-padding-block: calc(var(--dock-pitch) / 2);touch-action: pan-y;min-block-size: 0;padding-block: 0;margin-block: 0;padding-inline: var(--dock-ring-reserve);margin-inline: calc(-1 * var(--dock-ring-reserve));}.glass-dock .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: var(--dock-open-seat);transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock.vertical .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: auto;block-size: var(--dock-open-seat);transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock{timeline-scope: --dock-run;--dock-cap-rest: 50%;--dock-cap-cut: var(--radius-card);}.glass-dock.shape-rounded{--dock-cap-rest: var(--radius-card);--dock-cap-cut: var(--radius-xs);}.glass-dock.shape-card{--dock-cap-rest: var(--dock-card-radius,var(--radius-dock-card));--dock-cap-cut: var(--radius-lg);}.glass-dock .dock-run{scroll-timeline: --dock-run inline;}.glass-dock.vertical .dock-run{scroll-timeline: --dock-run block;}.glass-dock .dock-plate{animation: gl-dock-cap-inline-start linear both,gl-dock-cap-inline-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock.vertical .dock-plate{animation: gl-dock-cap-block-start linear both,gl-dock-cap-block-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock .dock-run-status{position: absolute;inline-size: 1px;block-size: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;}}@keyframes gl-dock-cap-inline-start{from{border-start-start-radius: var(--dock-cap-rest);border-end-start-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-end-start-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-inline-end{from{border-start-end-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-start-end-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-start{from{border-start-start-radius: var(--dock-cap-rest);border-start-end-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-start-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-end{from{border-end-start-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-end-start-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}
|
|
1
|
+
@layer components{.glass-dock{--dock-seat: var(--dock-control-size);--dock-run-gap: 0.5rem;--dock-pitch: calc(var(--dock-seat) + var(--dock-run-gap));--dock-open-pitches: 3;--dock-open-seat: calc( var(--dock-open-pitches) * var(--dock-pitch) - var(--dock-run-gap) );--dock-run-reserve-inline: round( up,var(--dock-seat-max-inline-px) * (var(--scale-hover-dock) - 1) / 2 + var(--dock-ring-reserve) * var(--scale-hover-dock),1px );--dock-run-reserve-block: round( up,var(--dock-seat-max-block-px) * (var(--scale-hover-dock) - 1) / 2 + var(--dock-ring-reserve) * var(--scale-hover-dock),1px );}.glass-dock.vertical{--dock-open-pitches: 2;}.glass-dock > .dock-controls > .dock-layers{flex: 1 1 auto;min-inline-size: 0;min-block-size: 0;}.glass-dock:not(.vertical):not(.collapsed) > .dock-controls > .dock-layers{margin-inline: max( 0px,var(--dock-run-reserve-inline) - var(--dock-padding-inline,0.5rem) );}.glass-dock:not(.vertical) > .dock-controls > .dock-persistent + .dock-layers{margin-inline-start: var(--dock-layer-gap,0.375rem);}.glass-dock:not(.vertical):not(.collapsed) > .dock-controls > .dock-persistent + .dock-layers{margin-inline-start: calc(var(--dock-layer-gap,0.375rem) + var(--dock-run-reserve-inline));}.glass-dock:not(.vertical):not(.collapsed) > .dock-controls > .dock-layers:has(+ .dock-persistent-end){margin-inline-end: var(--dock-run-reserve-inline);}.glass-dock.vertical:not(.collapsed) > .dock-controls > .dock-layers{margin-block: max( 0px,var(--dock-run-reserve-block) - var(--dock-padding-block,0.375rem) );}.glass-dock.vertical > .dock-controls > .dock-persistent + .dock-layers{margin-block-start: var(--dock-layer-gap,0.375rem);}.glass-dock.vertical:not(.collapsed) > .dock-controls > .dock-persistent + .dock-layers{margin-block-start: calc(var(--dock-layer-gap,0.375rem) + var(--dock-run-reserve-block));}.glass-dock.vertical:not(.collapsed) > .dock-controls > .dock-layers:has(+ .dock-persistent-end){margin-block-end: var(--dock-run-reserve-block);}.glass-dock > .dock-controls > .dock-persistent + .dock-layers{--dock-run-edge-start: 0;}.glass-dock > .dock-controls > .dock-layers:has(+ .dock-persistent-end){--dock-run-edge-end: 0;}.glass-dock > .dock-controls > .dock-persistent{flex: 0 0 auto;}.glass-dock :where(.dock-layers) > .dock-run{overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-padding-inline: calc(var(--dock-pitch) / 2 + var(--dock-run-reserve-inline));touch-action: pan-x;overscroll-behavior: contain;scrollbar-width: none;min-inline-size: 0;box-sizing: content-box;padding: var(--dock-run-reserve-block) var(--dock-run-reserve-inline);margin: calc(-1 * var(--dock-run-reserve-block)) calc(-1 * var(--dock-run-reserve-inline));gap: var(--dock-run-gap);}.glass-dock :where(.dock-layers) > .dock-run::-webkit-scrollbar{display: none;}.glass-dock{--dock-run-yield: 0;}.glass-dock[data-run-fits]{--dock-run-yield: 1;}.glass-dock.vertical[data-run-fits] :where(.dock-layers) > .dock-run{padding-block: min(var(--dock-run-reserve-block),var(--dock-run-room-block,0px));}.glass-dock:not(.vertical) :where(.dock-layers) > .dock-run:has(> *){padding-inline-end: 0;}.glass-dock:not(.vertical) :where(.dock-layers) > .dock-run:has(> *)::before,.glass-dock:not(.vertical) :where(.dock-layers) > .dock-run:has(> *)::after{content: "";flex: 0 var(--dock-run-yield) auto;inline-size: var(--dock-run-reserve-inline);min-inline-size: var(--dock-ring-reserve);}.glass-dock:not(.vertical) :where(.dock-layers) > .dock-run:has(> *)::before{margin-inline: calc(-1 * var(--dock-run-reserve-inline)) calc(-1 * var(--dock-run-gap));}.glass-dock:not(.vertical) :where(.dock-layers) > .dock-run:has(> *)::after{margin-inline-start: calc(-1 * var(--dock-run-gap));}.glass-dock :where(.dock-layers) > .dock-run > *{scroll-snap-align: start;flex: 0 0 auto;}.glass-dock :where(.dock-layers) > .dock-run > .dock-layer-group{scroll-snap-align: none;}.glass-dock :where(.dock-layers) > .dock-run > .dock-layer-group .dock-face.is-active > .dock-face-content > *{scroll-snap-align: start;}.glass-dock.vertical :where(.dock-layers) > .dock-run{overflow-x: hidden;overflow-y: auto;scroll-snap-type: y mandatory;scroll-padding-block: calc(var(--dock-pitch) / 2 + var(--dock-run-reserve-block));touch-action: pan-y;min-block-size: 0;}.glass-dock :where(.dock-layers) > .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock :where(.dock-layers) > .dock-run > [data-glass-dock-seat]:has([aria-current]:not([aria-current="false"])){inline-size: var(--dock-open-seat);transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock :where(.dock-layers) > .dock-run > :not([aria-current]:not([aria-current="false"])):not( [data-glass-dock-seat]:has([aria-current]:not([aria-current="false"])) ){transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical :where(.dock-layers) > .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock.vertical :where(.dock-layers) > .dock-run > [data-glass-dock-seat]:has([aria-current]:not([aria-current="false"])){inline-size: auto;block-size: var(--dock-open-seat);transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical :where(.dock-layers) > .dock-run > :not([aria-current]:not([aria-current="false"])):not( [data-glass-dock-seat]:has([aria-current]:not([aria-current="false"])) ){transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock{timeline-scope: --dock-run;--dock-cap-rest: calc(var(--dock-plate-cross-px) / 2);--dock-cap-cut: var(--radius-card);}.glass-dock.shape-rounded{--dock-cap-rest: var(--radius-card);--dock-cap-cut: var(--radius-xs);}.glass-dock.shape-card{--dock-cap-rest: var(--dock-card-radius,var(--radius-dock-card));--dock-cap-cut: var(--radius-lg);}.glass-dock :where(.dock-layers) > .dock-run:not(.is-active):not(.is-leaving){overflow: clip;}.glass-dock{--dock-run-edge-start: 1;--dock-run-edge-end: 1;--dock-run-inset: max( 0px,var(--dock-padding-inline,0.5rem) - var(--dock-run-reserve-inline) );}.glass-dock.vertical{--dock-run-inset: max( 0px,var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem)) + max(0px,var(--dock-run-reserve-block) - var(--dock-padding-block,0.375rem)) - var(--dock-run-reserve-block) );}.glass-dock{--dock-run-cross-half: calc( var(--dock-plate-cross-px) / 2 + var(--dock-run-reserve-block) - var(--dock-padding-block,0.375rem) );}.glass-dock.vertical{--dock-run-cross-half: calc( var(--dock-plate-cross-px) / 2 + var(--dock-run-reserve-inline) - var(--dock-vertical-padding,var(--dock-padding-inline,0.5rem)) );}.glass-dock :where(.dock-layers) > .dock-run.is-active{scroll-timeline: --dock-run inline;--dock-run-corner-rest: max(0px,var(--dock-cap-rest) - var(--dock-run-inset));--dock-run-corner-cut: max(0px,var(--dock-cap-cut) - var(--dock-run-inset));animation: gl-dock-clip-inline-start linear both,gl-dock-clip-inline-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock.vertical :where(.dock-layers) > .dock-run.is-active{scroll-timeline: --dock-run block;animation-name: gl-dock-clip-block-start,gl-dock-clip-block-end;}.glass-dock.shape-pill .dock-plate{border-radius: var(--dock-cap-rest);}.glass-dock .dock-plate{animation: gl-dock-cap-inline-start linear both,gl-dock-cap-inline-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock.vertical .dock-plate{animation: gl-dock-cap-block-start linear both,gl-dock-cap-block-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock:is([data-run-fits],.collapsed) .dock-plate,.glass-dock:is([data-run-fits],.collapsed) :where(.dock-layers) > .dock-run{animation: none;}.glass-dock .dock-run-status{position: absolute;inline-size: 1px;block-size: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;}}@keyframes gl-dock-cap-inline-start{from{border-start-start-radius: var(--dock-cap-rest);border-end-start-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-end-start-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-inline-end{from{border-start-end-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-start-end-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-start{from{border-start-start-radius: var(--dock-cap-rest);border-start-end-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-start-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-end{from{border-end-start-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-end-start-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-clip-inline-start{from{border-start-start-radius: 0;border-end-start-radius: 0;}1%{border-start-start-radius: calc(var(--dock-run-edge-start) * var(--dock-run-corner-rest)) var(--dock-run-cross-half);border-end-start-radius: calc(var(--dock-run-edge-start) * var(--dock-run-corner-rest)) var(--dock-run-cross-half);}to{border-start-start-radius: calc(var(--dock-run-edge-start) * var(--dock-run-corner-cut)) var(--dock-run-cross-half);border-end-start-radius: calc(var(--dock-run-edge-start) * var(--dock-run-corner-cut)) var(--dock-run-cross-half);}}@keyframes gl-dock-clip-inline-end{from{border-start-end-radius: 0;border-end-end-radius: 0;}1%{border-start-end-radius: calc(var(--dock-run-edge-end) * var(--dock-run-corner-rest)) var(--dock-run-cross-half);border-end-end-radius: calc(var(--dock-run-edge-end) * var(--dock-run-corner-rest)) var(--dock-run-cross-half);}to{border-start-end-radius: calc(var(--dock-run-edge-end) * var(--dock-run-corner-cut)) var(--dock-run-cross-half);border-end-end-radius: calc(var(--dock-run-edge-end) * var(--dock-run-corner-cut)) var(--dock-run-cross-half);}}@keyframes gl-dock-clip-block-start{from{border-start-start-radius: 0;border-start-end-radius: 0;}1%{border-start-start-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-start) * var(--dock-run-corner-rest));border-start-end-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-start) * var(--dock-run-corner-rest));}to{border-start-start-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-start) * var(--dock-run-corner-cut));border-start-end-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-start) * var(--dock-run-corner-cut));}}@keyframes gl-dock-clip-block-end{from{border-end-start-radius: 0;border-end-end-radius: 0;}1%{border-end-start-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-end) * var(--dock-run-corner-rest));border-end-end-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-end) * var(--dock-run-corner-rest));}to{border-end-start-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-end) * var(--dock-run-corner-cut));border-end-end-radius: var(--dock-run-cross-half) calc(var(--dock-run-edge-end) * var(--dock-run-corner-cut));}}
|
|
@@ -1 +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
|
|
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.vertical .dock-layer{flex-direction: column;align-items: stretch;min-width: 0;}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--
|
|
1
|
+
@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.glass-slider,.glass-loupe{--slider-fill-ink: var(--glass-capsule-warm);}.dark .glass-slider,.dark .glass-loupe{--slider-fill-ink: color-mix(in oklab,var(--foreground) 22%,transparent);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--slider-fill-ink));}.slider-lane{position: absolute;inset: 0;}.glass-slider:not([data-variant="spectrum"]){--slider-lane-cut: var(--slider-thumb-size,1rem);--value-mark-inset: calc(var(--slider-lane-cut) / 2);}.glass-slider:not([data-variant="spectrum"]):not([data-orientation="vertical"]){& .slider-lane{inset-inline-end: var(--slider-lane-cut);}& .slider-range{margin-inline-end: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-inline: var(--slider-lane-cut) 0;}&[data-inverted] .slider-range{margin-inline: calc(-1 * var(--slider-lane-cut)) 0;}}.glass-slider[data-orientation="vertical"]:not([data-variant="spectrum"]){& .slider-lane{inset-block-start: var(--slider-lane-cut);}& .slider-range{margin-block-start: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-block: 0 var(--slider-lane-cut);}&[data-inverted] .slider-range{margin-block: 0 calc(-1 * var(--slider-lane-cut));}}.slider-thumb{display: block;width: var(--slider-thumb-size,1rem);height: var(--slider-thumb-size,1rem);border: none;border-radius: var(--radius-pill);background: var(--card);box-shadow: var(--shadow-sm);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]) .slider-thumb:focus-visible{outline: none;}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range,.glass-slider[data-disabled]:not([data-variant="spectrum"]) .slider-thumb{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider:not([data-variant="spectrum"]) .slider-thumb{forced-color-adjust: none;background: Canvas;border: 1px solid CanvasText;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--slider-fill-ink));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
|
|
@@ -2,8 +2,8 @@ import type { HTMLAttributes } from "vue";
|
|
|
2
2
|
import type { Motion, Orientation } from "../_shared/axes.js";
|
|
3
3
|
import type { Direction, FormFieldProps } from "../_shared/primitive.js";
|
|
4
4
|
/**
|
|
5
|
-
* `scrubber` is the continuous-cylinder recipe — one glass segment
|
|
6
|
-
*
|
|
5
|
+
* `scrubber` is the continuous-cylinder recipe — one glass segment with a disc thumb
|
|
6
|
+
* inscribed in its leading end, never narrower than that disc. `spectrum` is the gradient colour-picker
|
|
7
7
|
* recipe with a visible slim squircle handle.
|
|
8
8
|
*/
|
|
9
9
|
export type SliderVariant = "scrubber" | "spectrum";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.glass-drag-grabbable{cursor: grab;touch-action: none;}.glass-drag-lift{cursor: grabbing;will-change: transform;}.segmented-tabs:has(.segmented-indicator.glass-drag-grabbable) .segmented-tab[data-active]{pointer-events: none;}.segmented-indicator.glass-drag-lift{z-index:
|
|
1
|
+
@layer components{.glass-drag-grabbable{cursor: grab;touch-action: none;}.glass-drag-lift{cursor: grabbing;will-change: transform;}.segmented-tabs:has(.segmented-indicator.glass-drag-grabbable) .segmented-tab[data-active]{pointer-events: none;}.segmented-indicator.glass-drag-lift{z-index: 2;}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.segmented-tabs{
|
|
1
|
+
@layer components{.segmented-tabs{isolation: isolate;--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));--stretch: 1;position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);overflow: visible;}.segmented-tabs--vertical{display: inline-flex;flex-direction: column;grid-auto-flow: unset;grid-auto-columns: unset;align-items: stretch;--bouncy-slider-radius: var(--radius-strip);--radius-ctx: var(--bouncy-track-radius);--radius-inset: var(--bouncy-track-trim);}.segmented-tabs--vertical .segmented-indicator{border-radius: max( var(--radius-floor),calc(var(--radius-ctx) - var(--radius-inset)) );}@media (min-width: 640px){.segmented-tabs{--bouncy-track-trim: 0.25rem;}}.segmented-indicator{position: absolute;z-index: 0;border-radius: var(--bouncy-slider-radius);transform-origin: var(--eyeglass-origin,50%) center;scale: var(--eyeglass-span,var(--stretch)) var(--eyeglass-swell,1);}.segmented-tabs--vertical .segmented-indicator{transform-origin: center var(--eyeglass-origin,50%);scale: var(--eyeglass-swell,1) var(--eyeglass-span,var(--stretch));}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: var(--stretch) 1;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-indicator{border-block-end: none;border-inline-start: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: 1 var(--stretch);}.segmented-tabs:not(.segmented-tabs--underline){--eyeglass-span-max: 1.6;--eyeglass-cascade-annotation: 100ms;--eyeglass-light-clock: var(--engage-control-engage-release);transition: background var(--eyeglass-light-clock) var(--ease-standard);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),inset 0 1px 2px var(--tab-track-recess-ink);}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline){--eyeglass-light-clock: var(--engage-control-engage-attack);background: color-mix( in oklab,var(--glass-plate-quiet),var(--glass-capsule-warm) var(--glass-capsule-warm-floor) );}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--glass-shadow-capsule);}.segmented-indicator[data-eyeglass-clamped]{--eyeglass-swell: 1.22;}@media (prefers-reduced-motion: no-preference){.segmented-indicator--js{transition: translate var(--tab-indicator-duration) var(--spring-dock),width var(--tab-indicator-duration) var(--spring-dock),height var(--tab-indicator-duration) var(--spring-dock),scale var(--tab-indicator-duration) var(--ease-cartoon-punch),box-shadow var(--eyeglass-light-clock,var(--duration-fast)) var(--ease-standard),opacity var(--duration-fast) ease;}}.segmented-tab{position: relative;z-index: 1;border: none;background: none;font-weight: 500;cursor: pointer;white-space: nowrap;padding: 0.25rem 0.625rem;border-radius: var(--bouncy-slider-radius);font: inherit;font-size: var(--type-caption);color: color-mix(in oklab,var(--muted-foreground),var(--glass-capsule-warm) 12%);transition: color var(--duration-fast) ease;scale: 1;translate: 0;}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);transition-delay: var(--eyeglass-cascade-annotation,0s);}.segmented-tab.is-disabled{opacity: 0.4;cursor: not-allowed;pointer-events: none;filter: blur(0.5px);}.segmented-tabs--underline{display: flex;grid-auto-flow: unset;grid-auto-columns: unset;gap: 0.25rem;padding: 0;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;box-shadow: none;border-radius: 0;border-block-end: 1px solid var(--border);}.segmented-tabs--underline.segmented-tabs--vertical{flex-direction: column;align-items: stretch;border-block-end: none;border-inline-start: 1px solid var(--border);}.segmented-tabs--underline .segmented-tab{padding: 0.375rem 0.75rem;font-size: var(--type-subheading);letter-spacing: var(--type-tracking-display);border-radius: var(--bouncy-slider-radius);transition: color var(--duration-fast) ease;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab{text-align: start;}.segmented-tabs--underline .segmented-tab:not([data-active]){color: var(--muted-foreground);}.segmented-tabs--underline .segmented-tab:hover{color: color-mix(in oklab,var(--foreground) 70%,transparent);}}
|
|
@@ -32,7 +32,9 @@ export interface UseResizeObserverControls {
|
|
|
32
32
|
* Vue-scope-aware ResizeObserver wrapper.
|
|
33
33
|
*
|
|
34
34
|
* Watches one element ref and fires a callback when its bounding box
|
|
35
|
-
* changes by more than `threshold` CSS pixels in either dimension.
|
|
35
|
+
* changes by more than `threshold` CSS pixels in either dimension. The
|
|
36
|
+
* platform's first observation of each element always dispatches, so a
|
|
37
|
+
* caller learns the element's size on mount without a resize.
|
|
36
38
|
* Dispatch coalesces through `requestAnimationFrame` by default so a
|
|
37
39
|
* caller wiring an expensive re-init (canvas DPR-resync, layout
|
|
38
40
|
* remeasure) doesn't pay for every drag-resize step.
|
|
@@ -3,7 +3,7 @@ import { t } from "./createContext-BhkE9mLH.js";
|
|
|
3
3
|
import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
|
|
4
4
|
import { t as r } from "./label-CE03H1KL.js";
|
|
5
5
|
import { t as i } from "./expandable-container-CZUj9BzY.js";
|
|
6
|
-
import { t as a } from "./fading-scroll-
|
|
6
|
+
import { t as a } from "./fading-scroll-ClCPooXb.js";
|
|
7
7
|
import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as ee, toDisplayString as w, toRaw as T, unref as E, useId as D, useModel as O, useSlots as k, withCtx as A, withModifiers as j } from "vue";
|
|
8
8
|
import { ChevronDown as M, RotateCcw as N } from "@lucide/vue";
|
|
9
9
|
//#region src/components/configurator/size.ts
|
package/dist/configurator.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./configurator-
|
|
1
|
+
import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./configurator-Dl10mc3L.js";
|
|
2
2
|
export { e as CONFIGURATOR_SIZE_KEY, t as Configurator, i as ConfiguratorLayer, n as ConfiguratorRow, r as provideConfiguratorSize, o as useConfiguratorState, a as useOptionalConfiguratorSize };
|