@mkbabb/glass-ui 11.0.0 → 11.0.1
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/collapsible.css +1 -1
- package/dist/components/dark-mode-toggle/dark-mode-toggle.css +1 -1
- package/dist/components/dock/composables/dockMorphMeasure.d.ts +1 -1
- package/dist/components/dock/composables/useDockClickIntegrity.d.ts +0 -4
- 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/dock/styles/shell.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/control.css +1 -1
- package/dist/{data-table-lDykVYuo.js → data-table-CunuMkZ3.js} +2 -2
- package/dist/data-table.js +1 -1
- package/dist/dock.js +556 -447
- package/dist/easing.js +1 -1
- package/dist/glass-ui.js +2 -2
- package/dist/labeled-field.js +1 -1
- package/dist/{slider-CZiKrWGg.js → slider-B4w12E_u.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/package.json +1 -1
package/dist/collapsible.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme, base, components, utilities;@keyframes disclosure-open{0%{opacity:0;block-size:0}to{block-size:var(--disclosure-content-size);opacity:1}}@keyframes disclosure-close{0%{block-size:var(--disclosure-content-size);opacity:1}to{opacity:0;block-size:0}}@layer components{.disclosure{inline-size:100%;min-inline-size:0}.disclosure-item{border-block-end:1px solid var(--glass-border-defined)}.disclosure-header{margin:0;display:flex}.disclosure-trigger{border-radius:var(--radius-control);touch-action:manipulation}.disclosure-trigger:focus-visible{
|
|
1
|
+
@layer theme, base, components, utilities;@keyframes disclosure-open{0%{opacity:0;block-size:0}to{block-size:var(--disclosure-content-size);opacity:1}}@keyframes disclosure-close{0%{block-size:var(--disclosure-content-size);opacity:1}to{opacity:0;block-size:0}}@layer components{.disclosure{inline-size:100%;min-inline-size:0}.disclosure-item{border-block-end:1px solid var(--glass-border-defined)}.disclosure-header{margin:0;display:flex}.disclosure-trigger{border-radius:var(--radius-control);touch-action:manipulation}.disclosure-trigger:focus-visible{outline:var(--focus-ring-width) solid color-mix(in oklab, var(--foreground) calc(var(--ink-perimeter) * 100%), transparent);outline-offset:2px}.disclosure-trigger:is(:disabled,[data-disabled]){pointer-events:none;opacity:var(--opacity-disabled)}.disclosure-group-trigger{min-block-size:2.75rem;color:var(--foreground);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--duration-control) var(--ease-standard), color var(--duration-control) var(--ease-standard), box-shadow var(--duration-control) var(--ease-standard);background:0 0;border:0;flex:auto;justify-content:space-between;align-items:center;padding:1rem .25rem;font-weight:600;display:flex}.disclosure-group-trigger:hover:not(:disabled,[data-disabled]){background:var(--control-surface-bg-hover)}.disclosure-icon{block-size:1rem;inline-size:1rem;color:var(--muted-foreground-strong);flex:none}.disclosure-group-trigger[data-state=open]>.disclosure-icon{rotate:180deg}.disclosure-content{color:var(--muted-foreground-strong);font-size:var(--type-small);line-height:var(--leading-small);animation-duration:var(--spring-present-duration);animation-timing-function:var(--spring-present);overflow:hidden}.disclosure-content[data-disclosure=collapsible]{--disclosure-content-size:var(--reka-collapsible-content-height)}.disclosure-content[data-disclosure=accordion]{--disclosure-content-size:var(--reka-accordion-content-height)}.disclosure-content[data-state=open]{animation-name:disclosure-open}.disclosure-content[data-state=closed]{animation-name:disclosure-close}.disclosure-content-body{padding:0 .25rem 1rem}@media (prefers-reduced-motion:reduce){.disclosure-content{animation-duration:.01ms}.disclosure-icon{transition-duration:.01ms}}@media (forced-colors:active){.disclosure-item{border-color:canvastext}.disclosure-trigger:focus-visible{outline-color:highlight}}}
|
|
@@ -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-circle);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-circle);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;}}}
|
|
@@ -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).
|
|
@@ -8,10 +8,6 @@ export interface DockClickIntegrity {
|
|
|
8
8
|
onClickCapture: (event: MouseEvent) => void;
|
|
9
9
|
/** Mark the collapsed→expanded flip so the settle window opens (call on expand). */
|
|
10
10
|
markExpandFlip: () => void;
|
|
11
|
-
/** `pointerenter` on the dock root — arms the approach scope for a fine pointer. */
|
|
12
|
-
onPointerEnter: (event: PointerEvent) => void;
|
|
13
|
-
/** `pointerleave` on the dock root — the pointer is no longer approaching. */
|
|
14
|
-
onPointerLeave: () => void;
|
|
15
11
|
/** The outer pane retained for the witnessed press, or null. */
|
|
16
12
|
pressKeepaliveLayer: Readonly<Ref<"full" | null>>;
|
|
17
13
|
}
|
|
@@ -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(--
|
|
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,calc(var(--dock-control-size,var(--size-icon-btn)) / 2) );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));}}&: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);}}&: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.collapsed:not([data-morphing]):not(.vertical){border-radius: var(--radius-circle);}.glass-dock.collapsed:not([data-morphing]):not(.vertical):has(.dock-persistent):has( .dock-layer--summary:not(:empty) ){border-radius: var(--radius-dock);}.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:has(.dock-layer--summary:empty) .dock-persistent > .scroll-progress-rim{place-self: stretch;}.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.collapsed:not([data-morphing]):not(.vertical):not(.shape-pill){border-radius: var(--radius-circle);}.glass-dock.collapsed:not([data-morphing]):not(.vertical):not(.shape-pill):has(.dock-persistent):has( .dock-layer--summary:not(:empty) ){border-radius: var(--radius-dock);}.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:has(.dock-layer--summary:empty) .dock-persistent > .scroll-progress-rim{place-self: stretch;}.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: var(--radius-dock);--dock-cap-cut: var(--radius-xs);}.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-ring-reserve),1px);--dock-run-reserve-block: round(up,var(--dock-ring-reserve),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-cross: var( --dock-plate-cross-px,calc(var(--dock-layer-height) + 2 * var(--dock-padding-block)) );--dock-cap-rest: calc(var(--dock-cross) / 2);--dock-cap-cut: var(--radius-card);}.glass-dock.vertical{--dock-cross: var( --dock-plate-cross-px,calc(var(--dock-control-size) + 2 * var(--dock-padding-inline)) );}.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-cross) / 2 + var(--dock-run-reserve-block) - var(--dock-padding-block,0.375rem) );}.glass-dock.vertical{--dock-run-cross-half: calc( var(--dock-cross) / 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{border-radius: var(--dock-cap-rest);}.glass-dock.shape-pill[data-morphing]:not(.vertical){border-radius: calc(var(--dock-cap-rest) / max(var(--dock-size-scale,1),0.06)) / var(--dock-cap-rest);}.glass-dock.shape-pill[data-morphing].vertical{border-radius: var(--dock-cap-rest) / calc(var(--dock-cap-rest) / max(var(--dock-size-scale,1),0.06));}.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
|
-
@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-
|
|
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[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-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);}}}
|
|
@@ -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));position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);}.segmented-tabs[data-shape="bar"]:not(.segmented-tabs--vertical){--bouncy-slider-radius: var(--radius-bar);}.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);}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);}.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);}.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);}@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),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) var(--ease-standard);}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-tab:not([data-active]):hover{color: color-mix(in oklab,var(--muted-foreground),var(--foreground) var(--hover-ink-mix));}.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);}}
|
package/dist/control.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme, base, components, utilities;@layer components{.field-control{--field-control-height:var(--control-h-md);--field-control-ink:color-mix(in oklab, var(--foreground) calc(var(--ink-perimeter) * 100%), transparent);--field-control-well:var(--ink-seam);--control-edge-inner:inset 0 1px 2px color-mix(in oklab, var(--foreground) calc(var(--field-control-well) * 100%), transparent);--control-surface-bg:var(--input-on-glass);--field-control-duration:var(--duration-control);--field-control-ease:var(--spring-press);border-style:solid;border-width:1px;border-color:var(--field-control-ink);background-color:var(--control-surface-bg);inline-size:100%;min-inline-size:0;max-inline-size:100%;-webkit-backdrop-filter:var(--control-surface-blur);backdrop-filter:var(--control-surface-blur);padding-inline:calc(.75rem * var(--ui-scale));color:var(--foreground);caret-color:currentColor;font:inherit;font-size:var(--type-small);transition:background-color var(--field-control-duration) var(--field-control-ease), border-color var(--field-control-duration) var(--field-control-ease), box-shadow var(--field-control-duration) var(--field-control-ease), outline-color var(--field-control-duration) var(--field-control-ease), backdrop-filter var(--field-control-duration) var(--field-control-ease);outline-color:#0000;display:block}.field-control[data-kind=input]{block-size:var(--field-control-height);border-radius:var(--radius-pill)}.field-control[data-kind=textarea]{field-sizing:content;min-block-size:calc(var(--field-rows,2) * 1lh + 2 * (.75rem * var(--ui-scale)) + 2px);max-block-size:var(--textarea-content-max);border-radius:var(--radius-field);padding-block:calc(.75rem * var(--ui-scale));line-height:var(--type-leading-body);overflow:auto}.field-control[data-size=sm]{--field-control-height:var(--control-h-sm)}.field-control[data-size=lg]{--field-control-height:var(--control-h-lg)}.field-control::placeholder{color:var(--muted-foreground)}@media (hover:hover){.field-control:hover:not([data-state=disabled],[data-state=readonly]){--field-control-well:var(--ink-edge);--control-surface-blur:var(--glass-blur-floating)}}.field-control:focus-visible{outline:var(--focus-ring-width) solid var(--field-control-ink);outline-offset:2px;--control-edge-ring:0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent)}.field-control:is(:user-invalid,[data-state=invalid]){--field-control-duration:var(--duration-fast);--field-control-ease:var(--ease-out);--control-surface-bg:color-mix(in srgb, var(--destructive) 8%, var(--input-on-glass));--control-edge-ring:var(--invalid-ring);border-color:var(--destructive)}.field-control:is(:user-invalid,[data-state=invalid]):focus-visible{outline-color:var(--destructive);--control-edge-ring:var(--invalid-ring), 0 0 8px color-mix(in srgb, var(--destructive) 15%, transparent)}.field-control[data-state=readonly]{--control-surface-bg:color-mix(in oklab, var(--input-on-glass), var(--muted) 18%);caret-color:#0000;cursor:text}.field-control[data-state=disabled]{--field-control-ink:color-mix(in oklab, var(--foreground) calc(var(--ink-perimeter) * 45%), transparent);--control-surface-bg:color-mix(in oklab, var(--input-on-glass), var(--muted) 40%);color:color-mix(in oklab, var(--foreground) 45%, transparent);cursor:not-allowed}.field-control[data-kind=textarea][data-resize=none]{resize:none}.field-control[data-kind=textarea][data-resize=horizontal]{resize:horizontal}.field-control[data-kind=textarea][data-resize=both]{resize:both}.field-control[data-kind=textarea][data-resize=vertical]{resize:vertical}@media (width<=768px){.field-control{padding-inline:calc(.5rem * var(--ui-scale))}}@media (prefers-reduced-motion:reduce){.field-control{--field-control-duration:.01ms}}}
|
|
1
|
+
@layer theme, base, components, utilities;@layer components{.field-control{--field-control-height:var(--control-h-md);--field-control-ink:color-mix(in oklab, var(--foreground) calc(var(--ink-perimeter) * 100%), transparent);--field-control-well:var(--ink-seam);--control-edge-inner:inset 0 1px 2px color-mix(in oklab, var(--foreground) calc(var(--field-control-well) * 100%), transparent);--control-surface-bg:var(--input-on-glass);--field-control-duration:var(--duration-control);--field-control-ease:var(--spring-press);border-style:solid;border-width:1px;border-color:var(--field-control-ink);background-color:var(--control-surface-bg);inline-size:100%;min-inline-size:0;max-inline-size:100%;-webkit-backdrop-filter:var(--control-surface-blur);backdrop-filter:var(--control-surface-blur);padding-inline:calc(.75rem * var(--ui-scale));color:var(--foreground);caret-color:currentColor;font:inherit;font-size:max(var(--type-small), var(--field-text-floor));transition:background-color var(--field-control-duration) var(--field-control-ease), border-color var(--field-control-duration) var(--field-control-ease), box-shadow var(--field-control-duration) var(--field-control-ease), outline-color var(--field-control-duration) var(--field-control-ease), backdrop-filter var(--field-control-duration) var(--field-control-ease);outline-color:#0000;display:block}.field-control[data-kind=input]{block-size:var(--field-control-height);border-radius:var(--radius-pill)}.field-control[data-kind=textarea]{field-sizing:content;min-block-size:calc(var(--field-rows,2) * 1lh + 2 * (.75rem * var(--ui-scale)) + 2px);max-block-size:var(--textarea-content-max);border-radius:var(--radius-field);padding-block:calc(.75rem * var(--ui-scale));line-height:var(--type-leading-body);overflow:auto}.field-control[data-size=sm]{--field-control-height:var(--control-h-sm)}.field-control[data-size=lg]{--field-control-height:var(--control-h-lg)}.field-control::placeholder{color:var(--muted-foreground)}@media (hover:hover){.field-control:hover:not([data-state=disabled],[data-state=readonly]){--field-control-well:var(--ink-edge);--control-surface-blur:var(--glass-blur-floating)}}.field-control:focus-visible{outline:var(--focus-ring-width) solid var(--field-control-ink);outline-offset:2px;--control-edge-ring:0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent)}.field-control:is(:user-invalid,[data-state=invalid]){--field-control-duration:var(--duration-fast);--field-control-ease:var(--ease-out);--control-surface-bg:color-mix(in srgb, var(--destructive) 8%, var(--input-on-glass));--control-edge-ring:var(--invalid-ring);border-color:var(--destructive)}.field-control:is(:user-invalid,[data-state=invalid]):focus-visible{outline-color:var(--destructive);--control-edge-ring:var(--invalid-ring), 0 0 8px color-mix(in srgb, var(--destructive) 15%, transparent)}.field-control[data-state=readonly]{--control-surface-bg:color-mix(in oklab, var(--input-on-glass), var(--muted) 18%);caret-color:#0000;cursor:text}.field-control[data-state=disabled]{--field-control-ink:color-mix(in oklab, var(--foreground) calc(var(--ink-perimeter) * 45%), transparent);--control-surface-bg:color-mix(in oklab, var(--input-on-glass), var(--muted) 40%);color:color-mix(in oklab, var(--foreground) 45%, transparent);cursor:not-allowed}.field-control[data-kind=textarea][data-resize=none]{resize:none}.field-control[data-kind=textarea][data-resize=horizontal]{resize:horizontal}.field-control[data-kind=textarea][data-resize=both]{resize:both}.field-control[data-kind=textarea][data-resize=vertical]{resize:vertical}@media (width<=768px){.field-control{padding-inline:calc(.5rem * var(--ui-scale))}}@media (prefers-reduced-motion:reduce){.field-control{--field-control-duration:.01ms}}}
|
|
@@ -92,7 +92,7 @@ var ie = {
|
|
|
92
92
|
] } },
|
|
93
93
|
setup(t) {
|
|
94
94
|
let n = t;
|
|
95
|
-
return (t, r) => (y(), u("thead", { class: v(E(e)("[&_tr]:border-b", n.class)) }, [S(t.$slots, "default")], 2));
|
|
95
|
+
return (t, r) => (y(), u("thead", { class: v(E(e)("[&_tr]:border-b [&_tr]:border-border", n.class)) }, [S(t.$slots, "default")], 2));
|
|
96
96
|
}
|
|
97
97
|
}), R = /* @__PURE__ */ m({
|
|
98
98
|
__name: "TableRow",
|
|
@@ -105,7 +105,7 @@ var ie = {
|
|
|
105
105
|
] } },
|
|
106
106
|
setup(t) {
|
|
107
107
|
let n = t;
|
|
108
|
-
return (t, r) => (y(), u("tr", { class: v(E(e)("border-b", n.class)) }, [S(t.$slots, "default")], 2));
|
|
108
|
+
return (t, r) => (y(), u("tr", { class: v(E(e)("border-b border-border", n.class)) }, [S(t.$slots, "default")], 2));
|
|
109
109
|
}
|
|
110
110
|
}), z = { class: "flex items-center justify-center py-10" }, B = /* @__PURE__ */ m({
|
|
111
111
|
__name: "TableEmpty",
|
package/dist/data-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "./data-table-
|
|
1
|
+
import { t as e } from "./data-table-CunuMkZ3.js";
|
|
2
2
|
export { e as DataTable };
|