@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/styles/tokens/glass-fx.css

@@ -1 +1 @@
-:root { --glass-grain-opacity: 0.025; --paper-grain-opacity: 0.21; --glass-grain-engage-duration: 120ms; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04); --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow); --metal-glow-blur-default: 0.5em; --metal-glow-opacity-default: 0.35; --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45); --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: inset 0 0 0 0.75px hsl(0 0% 100% / 0.18); --glass-key-lit-x: -1px; --glass-key-lit-y: 1px; --glass-key-shade-x: 1px; --glass-key-shade-y: -1px; --glass-key-direction: 0; --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.30), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.18); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.22); --glass-tint-source: var(--card); --glass-tint-strength: 0%; --glass-capsule-warm: oklch(0.88 0.1 75); --glass-capsule-warm-floor: 16%; --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 7%, transparent); --glass-backdrop: dark; --glass-tint-ink: var(--foreground); --glass-tint-ink-dock: oklch(from var(--foreground) 0.42 0.05 h); --glass-backdrop-luma-knee: 0.6; --glass-tint-strength-aa: 20%; --glass-tint-strength-floor: 4%; --veil-feather-radial: radial-gradient( ellipse 100% 100% at 50% 50%, black 0%, black 70%, transparent 100% ); --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22); --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16); --glass-edge-dispersion: inset 0.75px 0 0 0 var(--glass-fringe-warm), inset -0.75px 0 0 0 var(--glass-fringe-cool); --glass-specular-size: 36%; --glass-curvature-intensity: 0.02; --glass-curvature-overlay: radial-gradient( ellipse at 50% -20%, hsl(40 30% 96% / var(--glass-curvature-intensity)), transparent 38% ); --glass-curvature-overlay-dark: var(--glass-curvature-overlay); --chart-ping: var(--viz-chebyshev); --chart-download: var(--viz-fourier); --chart-upload: var(--viz-amber); --chart-jitter: var(--viz-legendre); --chart-ping-label: oklch(0.40 0.18 230); --chart-download-label: oklch(0.40 0.20 22); --chart-upload-label: oklch(0.40 0.16 55); --chart-jitter-label: oklch(0.40 0.20 305); --meter-track-stroke: var(--foreground); --glass-shadow-wash: var(--shadow-sm), var(--glass-highlight); --glass-shadow-quiet: var(--shadow-md), var(--glass-highlight); --glass-shadow-resting: var(--shadow-lg), var(--glass-highlight); --glass-shadow-floating: var(--shadow-xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent), var(--glass-highlight); --glass-shadow-overlay: var(--shadow-2xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight); --glass-shadow: var(--glass-shadow-quiet); --glass-spine-opacity: 0; --glass-spine-blur: 0px; --glass-spine-border: var(--surface-tint-8); --glass-spine-vignette: radial-gradient( ellipse at 50% 0%, color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent), transparent 60% ); --glass-under-shadow-quiet: calc(2px * var(--glass-key-direction)) 2px 8px -1px oklch(0 0 0 / 0.04); --glass-under-shadow-default: calc(4px * var(--glass-key-direction)) 4px 16px -2px oklch(0 0 0 / 0.08); --glass-under-shadow-vivid: calc(8px * var(--glass-key-direction)) 8px 32px -4px oklch(0 0 0 / 0.12); --glass-under-shadow-spine: 0 1px 0 0 oklch(0 0 0 / 0.06); --overlay-scrim-ink: hsl(24 10% 10%); --overlay-scrim: color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent); --overlay-scrim-strong: color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent); --overlay-scrim-subtle: color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent); }
+:root { --glass-grain-opacity: 0.025; --paper-grain-opacity: 0.21; --glass-grain-engage-duration: 120ms; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04); --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow); --metal-glow-blur-default: 0.5em; --metal-glow-opacity-default: 0.35; --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45); --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: inset 0 0 0 0.75px hsl(0 0% 100% / 0.18); --glass-key-lit-x: -1px; --glass-key-lit-y: 1px; --glass-key-shade-x: 1px; --glass-key-shade-y: -1px; --glass-key-direction: 0; --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.30), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.18); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.22); --glass-tint-source: var(--card); --glass-tint-strength: 0%; --glass-capsule-warm: oklch(0.88 0.1 75); --glass-capsule-warm-floor: 16%; --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 7%, transparent); --glass-backdrop: dark; --glass-tint-ink: var(--foreground); --glass-tint-ink-dock: oklch(from var(--foreground) 0.42 0.05 h); --glass-backdrop-luma-knee: 0.6; --glass-tint-strength-aa: 20%; --glass-tint-strength-floor: 4%; --veil-feather-radial: radial-gradient( ellipse 100% 100% at 50% 50%, black 0%, black 70%, transparent 100% ); --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22); --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16); --glass-edge-dispersion: inset 0.75px 0 0 0 var(--glass-fringe-warm), inset -0.75px 0 0 0 var(--glass-fringe-cool); --glass-specular-size: 36%; --glass-curvature-intensity: 0.02; --glass-curvature-overlay: radial-gradient( ellipse at 50% -20%, hsl(40 30% 96% / var(--glass-curvature-intensity)), transparent 38% ); --glass-curvature-overlay-dark: var(--glass-curvature-overlay); --chart-ping: var(--viz-chebyshev); --chart-download: var(--viz-fourier); --chart-upload: var(--viz-amber); --chart-jitter: var(--viz-legendre); --chart-ping-label: oklch(0.40 0.18 230); --chart-download-label: oklch(0.40 0.20 22); --chart-upload-label: oklch(0.40 0.16 55); --chart-jitter-label: oklch(0.40 0.20 305); --meter-track-stroke: var(--foreground); --glass-shadow-wash: var(--shadow-sm), var(--glass-highlight); --glass-shadow-quiet: var(--shadow-md), var(--glass-highlight); --glass-shadow-resting: var(--shadow-lg), var(--glass-highlight); --glass-shadow-floating: var(--shadow-xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent), var(--glass-highlight); --glass-shadow-overlay: var(--shadow-2xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight); --glass-spine-border: var(--surface-tint-8); --glass-spine-vignette: radial-gradient( ellipse at 50% 0%, color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent), transparent 60% ); --glass-under-shadow-quiet: calc(2px * var(--glass-key-direction)) 2px 8px -1px oklch(0 0 0 / 0.04); --glass-under-shadow-default: calc(4px * var(--glass-key-direction)) 4px 16px -2px oklch(0 0 0 / 0.08); --glass-under-shadow-vivid: calc(8px * var(--glass-key-direction)) 8px 32px -4px oklch(0 0 0 / 0.12); --glass-under-shadow-spine: 0 1px 0 0 oklch(0 0 0 / 0.06); --overlay-scrim-ink: hsl(24 10% 10%); --overlay-scrim: color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent); --overlay-scrim-strong: color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent); --overlay-scrim-subtle: color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent); }

package/dist/styles/tokens/glass.css

@@ -1 +1 @@
-:root { --glass-opacity-wash: 0.30; --glass-opacity-quiet: 0.50; --glass-opacity-resting: 0.65; --glass-opacity-floating: 0.80; --glass-opacity-overlay: 0.95; --glass-blur-wash-radius: 1px; --glass-blur-quiet-radius: 8px; --glass-blur-resting-radius: 8px; --glass-blur-floating-radius: 13px; --glass-blur-overlay-radius: 13px; --glass-saturate-wash: 1.4; --glass-saturate-quiet: 1.4; --glass-saturate-resting: 1.4; --glass-saturate-floating: 1.6; --glass-saturate-overlay: 1.6; --glass-blur-wash: blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)); --glass-blur-quiet: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.02); --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)); --glass-blur-overlay: blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)); --glass-blur-btn-radius: 6px; --glass-blur-btn: blur(calc(var(--glass-blur-btn-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-opacity-dock: 0.50; --glass-opacity-dialog: 0.68; --glass-opacity-sheet: 0.74; --dock-fg-on-aurora: var(--foreground); --glass-opacity-chassis: 0.28; --glass-bg-wash: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent); --glass-bg-quiet: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent); --glass-bg-resting: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent); --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent); --glass-bg-overlay: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent); --glass-bg-dock: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-chassis: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent); --glass-bg-dialog: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dialog)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-sheet: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-sheet)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-well-tone: 8%; --glass-bg-well: color-mix(in oklab, var(--card), var(--foreground) var(--glass-well-tone)); --glass-fill-tinted: color-mix( in oklab, var(--glass-fill-tint, oklch(0.9 0.05 75 / 0)) var(--glass-fill-strength, 0%), oklch(0.9 0.05 75 / 0) ); --glass-border-wash: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-quiet: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-resting: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-floating: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-overlay: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-dock: color-mix(in srgb, var(--foreground) 8%, transparent); --glass-border: var(--glass-border-quiet); --glass-floor-fill-max: 15%; --glass-floor-fill: color-mix(in srgb, var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)), transparent); --glass-border-defined: color-mix(in srgb, var(--foreground) calc(var(--glass-definition) * 14%), transparent); --control-surface-bg: var(--glass-bg-quiet); --control-surface-border: var(--glass-border-floating); --control-surface-blur: var(--glass-blur-quiet); --control-surface-bg-hover: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-bg-resting) 35%); } @property --glass-ambient-hue { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-ambient-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --glass-fill-tint { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-fill-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
+:root { --glass-opacity-wash: 0.30; --glass-opacity-quiet: 0.50; --glass-opacity-resting: 0.65; --glass-opacity-floating: 0.80; --glass-opacity-overlay: 0.95; --glass-blur-wash-radius: 1px; --glass-blur-quiet-radius: 8px; --glass-blur-resting-radius: 8px; --glass-blur-floating-radius: 13px; --glass-blur-overlay-radius: 13px; --glass-saturate-wash: 1.4; --glass-saturate-quiet: 1.4; --glass-saturate-resting: 1.4; --glass-saturate-floating: 1.6; --glass-saturate-overlay: 1.6; --glass-blur-wash: blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)); --glass-blur-quiet: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.02); --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)); --glass-blur-overlay: blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)); --glass-blur-btn-radius: 6px; --glass-blur-btn: blur(calc(var(--glass-blur-btn-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-opacity-dock: 0.50; --glass-opacity-dialog: 0.68; --glass-opacity-sheet: 0.74; --dock-fg-on-aurora: var(--foreground); --glass-opacity-chassis: 0.28; --glass-bg-wash: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent); --glass-bg-quiet: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent); --glass-bg-resting: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent); --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent); --glass-bg-overlay: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent); --glass-bg-dock: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-chassis: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent); --glass-bg-dialog: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dialog)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-sheet: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-sheet)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-well-tone: 8%; --glass-fill-tinted: color-mix( in oklab, var(--glass-fill-tint, oklch(0.9 0.05 75 / 0)) var(--glass-fill-strength, 0%), oklch(0.9 0.05 75 / 0) ); --glass-border-wash: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-quiet: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-resting: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-floating: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-overlay: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-dock: color-mix(in srgb, var(--foreground) 8%, transparent); --glass-border: var(--glass-border-quiet); --glass-floor-fill-max: 15%; --glass-floor-fill: color-mix(in srgb, var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)), transparent); --glass-border-defined: color-mix(in srgb, var(--foreground) calc(var(--glass-definition) * 14%), transparent); --control-surface-bg: var(--glass-bg-quiet); --control-surface-border: var(--glass-border-floating); --control-surface-blur: var(--glass-blur-quiet); --control-surface-bg-hover: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-bg-resting) 35%); } @property --glass-ambient-hue { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-ambient-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --glass-fill-tint { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-fill-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

package/dist/styles/tokens/offsets.css

@@ -1 +1 @@
-:root { --lift-sm: -1px; --lift-md: -2px; --lift-lg: -4px; --fade-scroll-width: 1rem; --dock-max-inline-size: min(80vw, 64rem); --dock-max-block-size: min(80vh, 48rem); --chassis-max-block-size: calc( 100dvh - var(--dock-footer-space, 5.75rem) - var(--page-padding-top, 0rem) - 1rem ); --instrument-dial-min-height-mobile: 24rem; --instrument-dial-meter-reserve-mobile: minmax(0, 1fr); --instrument-dial-min-block-size-desktop: var(--chassis-max-block-size); --max-width-input: 24rem; --input-min-width-sm: 5rem; --min-width-input-sm: var(--input-min-width-sm); --popover-width: 200px; --panel-padding: 0.375rem; --overlay-min-width: 8rem; --overlay-max-block: 60vh; --tooltip-text: var(--type-caption); --select-chevron-opacity: 0.5; --chart-height-compact: 15rem; --chart-height-default: 22.5rem; --chart-height-large: 25rem; --chart-margin: 1.25rem; --paper-texture-size: 200px 200px; }
+:root { --lift-sm: -1px; --lift-md: -2px; --lift-lg: -4px; --fade-scroll-width: 1rem; --dock-max-inline-size: min(80vw, 64rem); --dock-max-block-size: min(80vh, 48rem); --chassis-max-block-size: calc( 100dvh - var(--dock-footer-space, 5.75rem) - var(--page-padding-top, 0rem) - 1rem ); --instrument-dial-min-height-mobile: 24rem; --instrument-dial-meter-reserve-mobile: minmax(0, 1fr); --instrument-dial-min-block-size-desktop: var(--chassis-max-block-size); --max-width-input: 24rem; --input-min-width-sm: 5rem; --popover-width: 200px; --panel-padding: 0.375rem; --overlay-min-width: 8rem; --overlay-max-block: 60vh; --tooltip-text: var(--type-caption); --select-chevron-opacity: 0.5; --chart-height-compact: 15rem; --chart-height-default: 22.5rem; --chart-height-large: 25rem; --chart-margin: 1.25rem; --paper-texture-size: 200px 200px; }

package/dist/styles/tokens/scale-paper.css

@@ -1 +1 @@
-:root { --scale-hover: 1.08; --scale-hover-btn: 1.05; --scale-hover-dock: 1.1; --scale-press: 0.96; --scale-press-dock: var(--scale-press); --scale-press-sm: 0.97; --scale-press-btn: var(--scale-press-sm); --tab-indicator-max-stretch: 1.11; --tab-indicator-blob-max: 1.045; --tab-indicator-duration: var(--spring-snappy-duration); --opacity-disabled: 0.5; --opacity-icon-muted: 0.8; --focus-ring-width: 2px; --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent), 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent); --focus-ring: var(--focus-ring-shadow); --invalid-ring-tint: 35%; --invalid-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent); --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent); --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating)); --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); --grid-pitch: 1rem; --grid-major: 5rem; --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent); --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent); --paper-grid-opacity: 0.08; --paper-grid-texture-size: var(--grid-pitch); --paper-grid-line: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 100%), transparent ); --paper-grid-line-major: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 160%), transparent ); --paper-grid-texture: linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px); --gold: oklch(0.751 0.147 84.2); --gold-light: oklch(0.890 0.183 96.1); --gold-dark: oklch(0.599 0.132 64.2); --gold-deep: oklch(0.487 0.103 63.0); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --silver: oklch(0.760 0.012 255); --silver-light: oklch(0.902 0.010 255); --silver-dark: oklch(0.582 0.014 255); --silver-deep: oklch(0.462 0.016 258); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --bronze: oklch(0.620 0.092 54.0); --bronze-light: oklch(0.760 0.112 60.0); --bronze-dark: oklch(0.500 0.082 50.0); --bronze-deep: oklch(0.430 0.072 50.0); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --rainbow-red: oklch(0.636 0.210 25.5); --rainbow-orange: oklch(0.737 0.163 58.9); --rainbow-yellow: oklch(0.900 0.183 103.7); --rainbow-green: oklch(0.772 0.233 144.8); --rainbow-blue: oklch(0.633 0.162 252.1); --rainbow-indigo: oklch(0.566 0.206 294.1); --rainbow-violet: oklch(0.684 0.250 327.9); --rainbow-pastel-red: oklch(0.793 0.066 18.7); --rainbow-pastel-orange: oklch(0.823 0.059 57.3); --rainbow-pastel-yellow: oklch(0.889 0.068 98.1); --rainbow-pastel-green: oklch(0.826 0.072 149.5); --rainbow-pastel-blue: oklch(0.783 0.056 264.2); --rainbow-pastel-indigo: oklch(0.772 0.062 300.2); --rainbow-pastel-violet: oklch(0.799 0.070 314.4); --timeline-scrubber-height: 0.5rem; --timeline-continuous-height: 0.75rem; --timeline-dot-size: 0.875rem; --timeline-dot-size-touch: 1.25rem; --timeline-touch-target: 44px; --timeline-segment-flex: 1 1 0; --timeline-dot-fill: var(--surface-tint-12); --timeline-dot-blur: var(--glass-blur-quiet); --timeline-dot-ring: var(--glass-border-floating); --timeline-dot-tint-current: var(--accent, var(--foreground)); --timeline-dot-tint-completed: var(--success, var(--foreground)); --timeline-dot-check-color: var(--timeline-dot-tint-completed); --timeline-continuous-seam-opacity: 0.25; --timeline-continuous-seam-color: color-mix( in srgb, var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%), transparent ); --timeline-segment-default-gradient: linear-gradient( 90deg, var(--surface-tint-15), var(--surface-tint-25) ); --timeline-segment-gradient-ping: linear-gradient( 90deg, var(--chart-ping), color-mix(in srgb, var(--chart-ping) 60%, transparent) ); --timeline-segment-gradient-download: linear-gradient( 90deg, var(--chart-download), color-mix(in srgb, var(--chart-download) 60%, transparent) ); --timeline-segment-gradient-upload: linear-gradient( 90deg, var(--chart-upload), color-mix(in srgb, var(--chart-upload) 60%, transparent) ); --timeline-segment-gradient-jitter: linear-gradient( 90deg, var(--chart-jitter), color-mix(in srgb, var(--chart-jitter) 60%, transparent) ); --metric-row-value-clamp-min: 4.5rem; --metric-row-value-clamp-cqi: 34cqi; --metric-row-value-clamp-max: var(--type-display-hero); --metric-row-unit-clamp-min: 1.5rem; --metric-row-unit-clamp-max: 3.25rem; --metric-row-label-clamp-min: 1.125rem; --metric-row-label-clamp-cqi: 5cqi; --metric-row-label-clamp-max: 2.75rem; --metric-row-label-align: left; --metric-row-icon-color: inherit; --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04); --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem); --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem); --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem); --complete-headline-size: clamp(2.25rem, 11cqi, 4rem); --table-density: 1; --table-cell-px: calc(1rem * var(--table-density)); --table-cell-py: calc(1rem * var(--table-density)); --table-head-h: calc(3rem * var(--table-density)); --table-head-px: calc(1rem * var(--table-density)); }
+:root { --scale-hover: 1.08; --scale-hover-btn: 1.05; --scale-hover-dock: 1.1; --scale-press: 0.96; --scale-press-dock: var(--scale-press); --scale-press-sm: 0.97; --scale-press-btn: var(--scale-press-sm); --tab-indicator-max-stretch: 1.11; --tab-indicator-blob-max: 1.045; --tab-indicator-duration: var(--spring-snappy-duration); --opacity-disabled: 0.5; --opacity-icon-muted: 0.8; --focus-ring-width: 2px; --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent), 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent); --invalid-ring-tint: 35%; --invalid-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent); --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent); --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating)); --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); --grid-pitch: 1rem; --grid-major: 5rem; --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent); --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent); --paper-grid-opacity: 0.08; --paper-grid-texture-size: var(--grid-pitch); --paper-grid-line: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 100%), transparent ); --paper-grid-line-major: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 160%), transparent ); --paper-grid-texture: linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px); --gold: oklch(0.751 0.147 84.2); --gold-light: oklch(0.890 0.183 96.1); --gold-dark: oklch(0.599 0.132 64.2); --gold-deep: oklch(0.487 0.103 63.0); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --silver: oklch(0.760 0.012 255); --silver-light: oklch(0.902 0.010 255); --silver-dark: oklch(0.582 0.014 255); --silver-deep: oklch(0.462 0.016 258); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --bronze: oklch(0.620 0.092 54.0); --bronze-light: oklch(0.760 0.112 60.0); --bronze-dark: oklch(0.500 0.082 50.0); --bronze-deep: oklch(0.430 0.072 50.0); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --rainbow-red: oklch(0.636 0.210 25.5); --rainbow-orange: oklch(0.737 0.163 58.9); --rainbow-yellow: oklch(0.900 0.183 103.7); --rainbow-green: oklch(0.772 0.233 144.8); --rainbow-blue: oklch(0.633 0.162 252.1); --rainbow-indigo: oklch(0.566 0.206 294.1); --rainbow-violet: oklch(0.684 0.250 327.9); --rainbow-pastel-red: oklch(0.793 0.066 18.7); --rainbow-pastel-orange: oklch(0.823 0.059 57.3); --rainbow-pastel-yellow: oklch(0.889 0.068 98.1); --rainbow-pastel-green: oklch(0.826 0.072 149.5); --rainbow-pastel-blue: oklch(0.783 0.056 264.2); --rainbow-pastel-indigo: oklch(0.772 0.062 300.2); --rainbow-pastel-violet: oklch(0.799 0.070 314.4); --timeline-scrubber-height: 0.5rem; --timeline-continuous-height: 0.75rem; --timeline-dot-size: 0.875rem; --timeline-dot-size-touch: 1.25rem; --timeline-touch-target: 44px; --timeline-segment-flex: 1 1 0; --timeline-dot-fill: var(--surface-tint-12); --timeline-dot-blur: var(--glass-blur-quiet); --timeline-dot-ring: var(--glass-border-floating); --timeline-dot-tint-current: var(--accent, var(--foreground)); --timeline-dot-tint-completed: var(--success, var(--foreground)); --timeline-dot-check-color: var(--timeline-dot-tint-completed); --timeline-continuous-seam-opacity: 0.25; --timeline-continuous-seam-color: color-mix( in srgb, var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%), transparent ); --timeline-segment-default-gradient: linear-gradient( 90deg, var(--surface-tint-15), var(--surface-tint-25) ); --timeline-segment-gradient-ping: linear-gradient( 90deg, var(--chart-ping), color-mix(in srgb, var(--chart-ping) 60%, transparent) ); --timeline-segment-gradient-download: linear-gradient( 90deg, var(--chart-download), color-mix(in srgb, var(--chart-download) 60%, transparent) ); --timeline-segment-gradient-upload: linear-gradient( 90deg, var(--chart-upload), color-mix(in srgb, var(--chart-upload) 60%, transparent) ); --timeline-segment-gradient-jitter: linear-gradient( 90deg, var(--chart-jitter), color-mix(in srgb, var(--chart-jitter) 60%, transparent) ); --metric-row-value-clamp-min: 4.5rem; --metric-row-value-clamp-cqi: 34cqi; --metric-row-value-clamp-max: var(--type-display-hero); --metric-row-unit-clamp-min: 1.5rem; --metric-row-unit-clamp-max: 3.25rem; --metric-row-label-clamp-min: 1.125rem; --metric-row-label-clamp-cqi: 5cqi; --metric-row-label-clamp-max: 2.75rem; --metric-row-label-align: left; --metric-row-icon-color: inherit; --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04); --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem); --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem); --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem); --complete-headline-size: clamp(2.25rem, 11cqi, 4rem); --table-density: 1; --table-cell-px: calc(1rem * var(--table-density)); --table-cell-py: calc(1rem * var(--table-density)); --table-head-h: calc(3rem * var(--table-density)); --table-head-px: calc(1rem * var(--table-density)); }

package/dist/styles/tokens/scheme-spring.css

@@ -1 +1 @@
-:root { --spring-smooth: linear(0, 0.00287 2.041%, 0.01102 4.082%, 0.02379 6.122%, 0.04057 8.163%, 0.06079 10.204%, 0.08395 12.245%, 0.10956 14.286%, 0.13721 16.327%, 0.16649 18.367%, 0.19705 20.408%, 0.22858 22.449%, 0.26077 24.490%, 0.29338 26.531%, 0.32617 28.571%, 0.35893 30.612%, 0.39149 32.653%, 0.42368 34.694%, 0.45536 36.735%, 0.48642 38.776%, 0.51676 40.816%, 0.54628 42.857%, 0.57492 44.898%, 0.60262 46.939%, 0.62933 48.980%, 0.65501 51.020%, 0.67965 53.061%, 0.70322 55.102%, 0.72571 57.143%, 0.74713 59.184%, 0.76748 61.224%, 0.78677 63.265%, 0.80501 65.306%, 0.82223 67.347%, 0.83844 69.388%, 0.85367 71.429%, 0.86796 73.469%, 0.88132 75.510%, 0.89379 77.551%, 0.90541 79.592%, 0.91621 81.633%, 0.92623 83.673%, 0.93549 85.714%, 0.94404 87.755%, 0.95190 89.796%, 0.95912 91.837%, 0.96574 93.878%, 0.97177 95.918%, 0.97726 97.959%, 1); --spring-snappy: linear(0, 0.00652 2.041%, 0.02458 4.082%, 0.05211 6.122%, 0.08725 8.163%, 0.12834 10.204%, 0.17392 12.245%, 0.22268 14.286%, 0.27350 16.327%, 0.32540 18.367%, 0.37757 20.408%, 0.42929 22.449%, 0.47998 24.490%, 0.52916 26.531%, 0.57646 28.571%, 0.62156 30.612%, 0.66426 32.653%, 0.70440 34.694%, 0.74187 36.735%, 0.77662 38.776%, 0.80866 40.816%, 0.83800 42.857%, 0.86471 44.898%, 0.88887 46.939%, 0.91058 48.980%, 0.92996 51.020%, 0.94713 53.061%, 0.96223 55.102%, 0.97539 57.143%, 0.98677 59.184%, 0.99649 61.224%, 1.00471 63.265%, 1.01156 65.306%, 1.01716 67.347%, 1.02166 69.388%, 1.02516 71.429%, 1.02778 73.469%, 1.02964 75.510%, 1.03082 77.551%, 1.03142 79.592%, 1.03153 81.633%, 1.03122 83.673%, 1.03057 85.714%, 1.02963 87.755%, 1.02847 89.796%, 1.02713 91.837%, 1.02566 93.878%, 1.02410 95.918%, 1.02249 97.959%, 1); --spring-bouncy: linear(0, 0.00706 2.041%, 0.02686 4.082%, 0.05738 6.122%, 0.09674 8.163%, 0.14321 10.204%, 0.19517 12.245%, 0.25116 14.286%, 0.30987 16.327%, 0.37010 18.367%, 0.43083 20.408%, 0.49115 22.449%, 0.55028 24.490%, 0.60757 26.531%, 0.66248 28.571%, 0.71458 30.612%, 0.76353 32.653%, 0.80908 34.694%, 0.85107 36.735%, 0.88940 38.776%, 0.92404 40.816%, 0.95502 42.857%, 0.98241 44.898%, 1.00631 46.939%, 1.02688 48.980%, 1.04428 51.020%, 1.05870 53.061%, 1.07035 55.102%, 1.07945 57.143%, 1.08621 59.184%, 1.09087 61.224%, 1.09364 63.265%, 1.09474 65.306%, 1.09439 67.347%, 1.09278 69.388%, 1.09011 71.429%, 1.08656 73.469%, 1.08230 75.510%, 1.07749 77.551%, 1.07226 79.592%, 1.06675 81.633%, 1.06106 83.673%, 1.05531 85.714%, 1.04958 87.755%, 1.04394 89.796%, 1.03846 91.837%, 1.03320 93.878%, 1.02820 95.918%, 1.02348 97.959%, 1); --spring-gentle: linear(0, 0.00653 2.041%, 0.02415 4.082%, 0.05029 6.122%, 0.08283 8.163%, 0.12000 10.204%, 0.16036 12.245%, 0.20272 14.286%, 0.24614 16.327%, 0.28983 18.367%, 0.33320 20.408%, 0.37576 22.449%, 0.41716 24.490%, 0.45712 26.531%, 0.49544 28.571%, 0.53199 30.612%, 0.56669 32.653%, 0.59948 34.694%, 0.63037 36.735%, 0.65936 38.776%, 0.68650 40.816%, 0.71183 42.857%, 0.73542 44.898%, 0.75735 46.939%, 0.77768 48.980%, 0.79650 51.020%, 0.81390 53.061%, 0.82995 55.102%, 0.84474 57.143%, 0.85835 59.184%, 0.87086 61.224%, 0.88235 63.265%, 0.89288 65.306%, 0.90253 67.347%, 0.91136 69.388%, 0.91944 71.429%, 0.92682 73.469%, 0.93356 75.510%, 0.93970 77.551%, 0.94531 79.592%, 0.95041 81.633%, 0.95506 83.673%, 0.95929 85.714%, 0.96313 87.755%, 0.96663 89.796%, 0.96980 91.837%, 0.97268 93.878%, 0.97530 95.918%, 0.97767 97.959%, 1); --spring-dock: linear(0, 0.00315 2.041%, 0.01207 4.082%, 0.02597 6.122%, 0.04414 8.163%, 0.06595 10.204%, 0.09081 12.245%, 0.11817 14.286%, 0.14757 16.327%, 0.17856 18.367%, 0.21076 20.408%, 0.24381 22.449%, 0.27740 24.490%, 0.31127 26.531%, 0.34517 28.571%, 0.37888 30.612%, 0.41222 32.653%, 0.44503 34.694%, 0.47717 36.735%, 0.50853 38.776%, 0.53901 40.816%, 0.56854 42.857%, 0.59705 44.898%, 0.62449 46.939%, 0.65083 48.980%, 0.67603 51.020%, 0.70010 53.061%, 0.72301 55.102%, 0.74478 57.143%, 0.76540 59.184%, 0.78490 61.224%, 0.80330 63.265%, 0.82062 65.306%, 0.83688 67.347%, 0.85213 69.388%, 0.86638 71.429%, 0.87969 73.469%, 0.89207 75.510%, 0.90358 77.551%, 0.91425 79.592%, 0.92411 81.633%, 0.93322 83.673%, 0.94160 85.714%, 0.94930 87.755%, 0.95635 89.796%, 0.96279 91.837%, 0.96865 93.878%, 0.97398 95.918%, 0.97881 97.959%, 1); --spring-press: linear(0, 0.00284 2.041%, 0.01090 4.082%, 0.02354 6.122%, 0.04014 8.163%, 0.06017 10.204%, 0.08311 12.245%, 0.10850 14.286%, 0.13590 16.327%, 0.16495 18.367%, 0.19528 20.408%, 0.22657 22.449%, 0.25855 24.490%, 0.29095 26.531%, 0.32354 28.571%, 0.35613 30.612%, 0.38852 32.653%, 0.42057 34.694%, 0.45213 36.735%, 0.48309 38.776%, 0.51333 40.816%, 0.54279 42.857%, 0.57137 44.898%, 0.59903 46.939%, 0.62572 48.980%, 0.65141 51.020%, 0.67605 53.061%, 0.69965 55.102%, 0.72219 57.143%, 0.74366 59.184%, 0.76407 61.224%, 0.78343 63.265%, 0.80175 65.306%, 0.81906 67.347%, 0.83537 69.388%, 0.85070 71.429%, 0.86509 73.469%, 0.87857 75.510%, 0.89116 77.551%, 0.90290 79.592%, 0.91382 81.633%, 0.92395 83.673%, 0.93333 85.714%, 0.94200 87.755%, 0.94999 89.796%, 0.95733 91.837%, 0.96406 93.878%, 0.97020 95.918%, 0.97581 97.959%, 1); --spring-transient: linear(0, 0.00427 2.041%, 0.01615 4.082%, 0.03434 6.122%, 0.05769 8.163%, 0.08520 10.204%, 0.11598 12.245%, 0.14927 14.286%, 0.18439 16.327%, 0.22076 18.367%, 0.25789 20.408%, 0.29534 22.449%, 0.33275 24.490%, 0.36982 26.531%, 0.40630 28.571%, 0.44196 30.612%, 0.47666 32.653%, 0.51024 34.694%, 0.54261 36.735%, 0.57369 38.776%, 0.60342 40.816%, 0.63176 42.857%, 0.65871 44.898%, 0.68425 46.939%, 0.70840 48.980%, 0.73117 51.020%, 0.75259 53.061%, 0.77270 55.102%, 0.79153 57.143%, 0.80913 59.184%, 0.82554 61.224%, 0.84083 63.265%, 0.85503 65.306%, 0.86820 67.347%, 0.88039 69.388%, 0.89166 71.429%, 0.90206 73.469%, 0.91163 75.510%, 0.92043 77.551%, 0.92851 79.592%, 0.93591 81.633%, 0.94268 83.673%, 0.94886 85.714%, 0.95449 87.755%, 0.95961 89.796%, 0.96427 91.837%, 0.96849 93.878%, 0.97230 95.918%, 0.97575 97.959%, 1); --spring-eyeglass: linear(0, 0.00696 2.041%, 0.02640 4.082%, 0.05625 6.122%, 0.09463 8.163%, 0.13978 10.204%, 0.19012 12.245%, 0.24422 14.286%, 0.30080 16.327%, 0.35875 18.367%, 0.41708 20.408%, 0.47495 22.449%, 0.53163 24.490%, 0.58652 26.531%, 0.63915 28.571%, 0.68911 30.612%, 0.73612 32.653%, 0.77996 34.694%, 0.82048 36.735%, 0.85763 38.776%, 0.89137 40.816%, 0.92174 42.857%, 0.94882 44.898%, 0.97270 46.939%, 0.99352 48.980%, 1.01144 51.020%, 1.02663 53.061%, 1.03928 55.102%, 1.04957 57.143%, 1.05772 59.184%, 1.06392 61.224%, 1.06835 63.265%, 1.07123 65.306%, 1.07272 67.347%, 1.07301 69.388%, 1.07227 71.429%, 1.07066 73.469%, 1.06832 75.510%, 1.06538 77.551%, 1.06198 79.592%, 1.05823 81.633%, 1.05423 83.673%, 1.05007 85.714%, 1.04582 87.755%, 1.04156 89.796%, 1.03735 91.837%, 1.03324 93.878%, 1.02927 95.918%, 1.02547 97.959%, 1); --spring-smooth-settle: 0.35s; --spring-snappy-settle: 0.44s; --spring-bouncy-settle: 0.57s; --spring-gentle-settle: 0.76s; --spring-dock-settle: 0.19s; --spring-press-settle: 0.12s; --spring-transient-settle: 0.46s; --spring-eyeglass-settle: 0.34s; --spring-smooth-duration: calc(var(--spring-smooth-settle) * var(--motion-tempo)); --spring-snappy-duration: calc(var(--spring-snappy-settle) * var(--motion-tempo)); --spring-bouncy-duration: calc(var(--spring-bouncy-settle) * var(--motion-tempo)); --spring-gentle-duration: calc(var(--spring-gentle-settle) * var(--motion-tempo)); --spring-dock-duration: calc(var(--spring-dock-settle) * var(--motion-tempo)); --spring-press-duration: calc(var(--spring-press-settle) * var(--motion-tempo)); --spring-transient-duration: calc(var(--spring-transient-settle) * var(--motion-tempo)); --spring-eyeglass-duration: calc(var(--spring-eyeglass-settle) * var(--motion-tempo)); --transition-liquid-spatial: var(--spring-smooth); --spring-deck: var(--spring-smooth); --deck-goo-flow: linear( 0, 0.02206 4.167%, 0.07922 8.333%, 0.15799 12.5%, 0.24486 16.667%, 0.32632 20.833%, 0.38889 25%, 0.41905 29.167%, 0.43667 33.333%, 0.4575 37.5%, 0.47833 41.667%, 0.49917 45.833%, 0.52 50%, 0.54083 54.167%, 0.56167 58.333%, 0.58373 62.5%, 0.64 66.667%, 0.71 70.833%, 0.78 75%, 0.85 79.167%, 0.91 83.333%, 0.96 87.5%, 0.985 91.667%, 0.997 95.833%, 1 ); --deck-goo-duration: 1.1s; --deck-goo-max-stretch: 1.1; --pager-worm-max-stretch: 1.2; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--ease-out); --ease-accelerate: var(--ease-in); --ease-convergence: var(--spring-gentle); } @media (prefers-reduced-motion: reduce) { :root { --transition-liquid-spatial: var(--ease-standard); } }
+:root { --spring-smooth: linear(0, 0.00287 2.041%, 0.01102 4.082%, 0.02379 6.122%, 0.04057 8.163%, 0.06079 10.204%, 0.08395 12.245%, 0.10956 14.286%, 0.13721 16.327%, 0.16649 18.367%, 0.19705 20.408%, 0.22858 22.449%, 0.26077 24.490%, 0.29338 26.531%, 0.32617 28.571%, 0.35893 30.612%, 0.39149 32.653%, 0.42368 34.694%, 0.45536 36.735%, 0.48642 38.776%, 0.51676 40.816%, 0.54628 42.857%, 0.57492 44.898%, 0.60262 46.939%, 0.62933 48.980%, 0.65501 51.020%, 0.67965 53.061%, 0.70322 55.102%, 0.72571 57.143%, 0.74713 59.184%, 0.76748 61.224%, 0.78677 63.265%, 0.80501 65.306%, 0.82223 67.347%, 0.83844 69.388%, 0.85367 71.429%, 0.86796 73.469%, 0.88132 75.510%, 0.89379 77.551%, 0.90541 79.592%, 0.91621 81.633%, 0.92623 83.673%, 0.93549 85.714%, 0.94404 87.755%, 0.95190 89.796%, 0.95912 91.837%, 0.96574 93.878%, 0.97177 95.918%, 0.97726 97.959%, 1); --spring-snappy: linear(0, 0.00652 2.041%, 0.02458 4.082%, 0.05211 6.122%, 0.08725 8.163%, 0.12834 10.204%, 0.17392 12.245%, 0.22268 14.286%, 0.27350 16.327%, 0.32540 18.367%, 0.37757 20.408%, 0.42929 22.449%, 0.47998 24.490%, 0.52916 26.531%, 0.57646 28.571%, 0.62156 30.612%, 0.66426 32.653%, 0.70440 34.694%, 0.74187 36.735%, 0.77662 38.776%, 0.80866 40.816%, 0.83800 42.857%, 0.86471 44.898%, 0.88887 46.939%, 0.91058 48.980%, 0.92996 51.020%, 0.94713 53.061%, 0.96223 55.102%, 0.97539 57.143%, 0.98677 59.184%, 0.99649 61.224%, 1.00471 63.265%, 1.01156 65.306%, 1.01716 67.347%, 1.02166 69.388%, 1.02516 71.429%, 1.02778 73.469%, 1.02964 75.510%, 1.03082 77.551%, 1.03142 79.592%, 1.03153 81.633%, 1.03122 83.673%, 1.03057 85.714%, 1.02963 87.755%, 1.02847 89.796%, 1.02713 91.837%, 1.02566 93.878%, 1.02410 95.918%, 1.02249 97.959%, 1); --spring-bouncy: linear(0, 0.00706 2.041%, 0.02686 4.082%, 0.05738 6.122%, 0.09674 8.163%, 0.14321 10.204%, 0.19517 12.245%, 0.25116 14.286%, 0.30987 16.327%, 0.37010 18.367%, 0.43083 20.408%, 0.49115 22.449%, 0.55028 24.490%, 0.60757 26.531%, 0.66248 28.571%, 0.71458 30.612%, 0.76353 32.653%, 0.80908 34.694%, 0.85107 36.735%, 0.88940 38.776%, 0.92404 40.816%, 0.95502 42.857%, 0.98241 44.898%, 1.00631 46.939%, 1.02688 48.980%, 1.04428 51.020%, 1.05870 53.061%, 1.07035 55.102%, 1.07945 57.143%, 1.08621 59.184%, 1.09087 61.224%, 1.09364 63.265%, 1.09474 65.306%, 1.09439 67.347%, 1.09278 69.388%, 1.09011 71.429%, 1.08656 73.469%, 1.08230 75.510%, 1.07749 77.551%, 1.07226 79.592%, 1.06675 81.633%, 1.06106 83.673%, 1.05531 85.714%, 1.04958 87.755%, 1.04394 89.796%, 1.03846 91.837%, 1.03320 93.878%, 1.02820 95.918%, 1.02348 97.959%, 1); --spring-gentle: linear(0, 0.00653 2.041%, 0.02415 4.082%, 0.05029 6.122%, 0.08283 8.163%, 0.12000 10.204%, 0.16036 12.245%, 0.20272 14.286%, 0.24614 16.327%, 0.28983 18.367%, 0.33320 20.408%, 0.37576 22.449%, 0.41716 24.490%, 0.45712 26.531%, 0.49544 28.571%, 0.53199 30.612%, 0.56669 32.653%, 0.59948 34.694%, 0.63037 36.735%, 0.65936 38.776%, 0.68650 40.816%, 0.71183 42.857%, 0.73542 44.898%, 0.75735 46.939%, 0.77768 48.980%, 0.79650 51.020%, 0.81390 53.061%, 0.82995 55.102%, 0.84474 57.143%, 0.85835 59.184%, 0.87086 61.224%, 0.88235 63.265%, 0.89288 65.306%, 0.90253 67.347%, 0.91136 69.388%, 0.91944 71.429%, 0.92682 73.469%, 0.93356 75.510%, 0.93970 77.551%, 0.94531 79.592%, 0.95041 81.633%, 0.95506 83.673%, 0.95929 85.714%, 0.96313 87.755%, 0.96663 89.796%, 0.96980 91.837%, 0.97268 93.878%, 0.97530 95.918%, 0.97767 97.959%, 1); --spring-dock: linear(0, 0.00315 2.041%, 0.01207 4.082%, 0.02597 6.122%, 0.04414 8.163%, 0.06595 10.204%, 0.09081 12.245%, 0.11817 14.286%, 0.14757 16.327%, 0.17856 18.367%, 0.21076 20.408%, 0.24381 22.449%, 0.27740 24.490%, 0.31127 26.531%, 0.34517 28.571%, 0.37888 30.612%, 0.41222 32.653%, 0.44503 34.694%, 0.47717 36.735%, 0.50853 38.776%, 0.53901 40.816%, 0.56854 42.857%, 0.59705 44.898%, 0.62449 46.939%, 0.65083 48.980%, 0.67603 51.020%, 0.70010 53.061%, 0.72301 55.102%, 0.74478 57.143%, 0.76540 59.184%, 0.78490 61.224%, 0.80330 63.265%, 0.82062 65.306%, 0.83688 67.347%, 0.85213 69.388%, 0.86638 71.429%, 0.87969 73.469%, 0.89207 75.510%, 0.90358 77.551%, 0.91425 79.592%, 0.92411 81.633%, 0.93322 83.673%, 0.94160 85.714%, 0.94930 87.755%, 0.95635 89.796%, 0.96279 91.837%, 0.96865 93.878%, 0.97398 95.918%, 0.97881 97.959%, 1); --spring-press: linear(0, 0.00284 2.041%, 0.01090 4.082%, 0.02354 6.122%, 0.04014 8.163%, 0.06017 10.204%, 0.08311 12.245%, 0.10850 14.286%, 0.13590 16.327%, 0.16495 18.367%, 0.19528 20.408%, 0.22657 22.449%, 0.25855 24.490%, 0.29095 26.531%, 0.32354 28.571%, 0.35613 30.612%, 0.38852 32.653%, 0.42057 34.694%, 0.45213 36.735%, 0.48309 38.776%, 0.51333 40.816%, 0.54279 42.857%, 0.57137 44.898%, 0.59903 46.939%, 0.62572 48.980%, 0.65141 51.020%, 0.67605 53.061%, 0.69965 55.102%, 0.72219 57.143%, 0.74366 59.184%, 0.76407 61.224%, 0.78343 63.265%, 0.80175 65.306%, 0.81906 67.347%, 0.83537 69.388%, 0.85070 71.429%, 0.86509 73.469%, 0.87857 75.510%, 0.89116 77.551%, 0.90290 79.592%, 0.91382 81.633%, 0.92395 83.673%, 0.93333 85.714%, 0.94200 87.755%, 0.94999 89.796%, 0.95733 91.837%, 0.96406 93.878%, 0.97020 95.918%, 0.97581 97.959%, 1); --spring-transient: linear(0, 0.00427 2.041%, 0.01615 4.082%, 0.03434 6.122%, 0.05769 8.163%, 0.08520 10.204%, 0.11598 12.245%, 0.14927 14.286%, 0.18439 16.327%, 0.22076 18.367%, 0.25789 20.408%, 0.29534 22.449%, 0.33275 24.490%, 0.36982 26.531%, 0.40630 28.571%, 0.44196 30.612%, 0.47666 32.653%, 0.51024 34.694%, 0.54261 36.735%, 0.57369 38.776%, 0.60342 40.816%, 0.63176 42.857%, 0.65871 44.898%, 0.68425 46.939%, 0.70840 48.980%, 0.73117 51.020%, 0.75259 53.061%, 0.77270 55.102%, 0.79153 57.143%, 0.80913 59.184%, 0.82554 61.224%, 0.84083 63.265%, 0.85503 65.306%, 0.86820 67.347%, 0.88039 69.388%, 0.89166 71.429%, 0.90206 73.469%, 0.91163 75.510%, 0.92043 77.551%, 0.92851 79.592%, 0.93591 81.633%, 0.94268 83.673%, 0.94886 85.714%, 0.95449 87.755%, 0.95961 89.796%, 0.96427 91.837%, 0.96849 93.878%, 0.97230 95.918%, 0.97575 97.959%, 1); --spring-eyeglass: linear(0, 0.00696 2.041%, 0.02640 4.082%, 0.05625 6.122%, 0.09463 8.163%, 0.13978 10.204%, 0.19012 12.245%, 0.24422 14.286%, 0.30080 16.327%, 0.35875 18.367%, 0.41708 20.408%, 0.47495 22.449%, 0.53163 24.490%, 0.58652 26.531%, 0.63915 28.571%, 0.68911 30.612%, 0.73612 32.653%, 0.77996 34.694%, 0.82048 36.735%, 0.85763 38.776%, 0.89137 40.816%, 0.92174 42.857%, 0.94882 44.898%, 0.97270 46.939%, 0.99352 48.980%, 1.01144 51.020%, 1.02663 53.061%, 1.03928 55.102%, 1.04957 57.143%, 1.05772 59.184%, 1.06392 61.224%, 1.06835 63.265%, 1.07123 65.306%, 1.07272 67.347%, 1.07301 69.388%, 1.07227 71.429%, 1.07066 73.469%, 1.06832 75.510%, 1.06538 77.551%, 1.06198 79.592%, 1.05823 81.633%, 1.05423 83.673%, 1.05007 85.714%, 1.04582 87.755%, 1.04156 89.796%, 1.03735 91.837%, 1.03324 93.878%, 1.02927 95.918%, 1.02547 97.959%, 1); --spring-smooth-settle: 0.35s; --spring-snappy-settle: 0.44s; --spring-bouncy-settle: 0.57s; --spring-gentle-settle: 0.76s; --spring-dock-settle: 0.19s; --spring-press-settle: 0.12s; --spring-transient-settle: 0.46s; --spring-eyeglass-settle: 0.34s; --spring-smooth-duration: calc(var(--spring-smooth-settle) * var(--motion-tempo)); --spring-snappy-duration: calc(var(--spring-snappy-settle) * var(--motion-tempo)); --spring-bouncy-duration: calc(var(--spring-bouncy-settle) * var(--motion-tempo)); --spring-gentle-duration: calc(var(--spring-gentle-settle) * var(--motion-tempo)); --spring-dock-duration: calc(var(--spring-dock-settle) * var(--motion-tempo)); --spring-press-duration: calc(var(--spring-press-settle) * var(--motion-tempo)); --spring-transient-duration: calc(var(--spring-transient-settle) * var(--motion-tempo)); --spring-eyeglass-duration: calc(var(--spring-eyeglass-settle) * var(--motion-tempo)); --transition-liquid-spatial: var(--spring-smooth); --deck-goo-flow: linear( 0, 0.02206 4.167%, 0.07922 8.333%, 0.15799 12.5%, 0.24486 16.667%, 0.32632 20.833%, 0.38889 25%, 0.41905 29.167%, 0.43667 33.333%, 0.4575 37.5%, 0.47833 41.667%, 0.49917 45.833%, 0.52 50%, 0.54083 54.167%, 0.56167 58.333%, 0.58373 62.5%, 0.64 66.667%, 0.71 70.833%, 0.78 75%, 0.85 79.167%, 0.91 83.333%, 0.96 87.5%, 0.985 91.667%, 0.997 95.833%, 1 ); --deck-goo-duration: 1.1s; --deck-goo-max-stretch: 1.1; --pager-worm-max-stretch: 1.2; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--ease-out); --ease-accelerate: var(--ease-in); --ease-convergence: var(--spring-gentle); } @media (prefers-reduced-motion: reduce) { :root { --transition-liquid-spatial: var(--ease-standard); } }

package/dist/styles/tokens/shadow.css

@@ -1 +1 @@
-:root { --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent); --cartoon-shadow: var(--shadow-cartoon); --cartoon-shadow-hover: var(--shadow-cartoon-hover); --soft-shadow: var(--shadow-soft); --elevated-shadow: var(--shadow-elevated); --modal-shadow: var(--shadow-modal); --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent), 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent); --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-card: var(--shadow-md); --card-shadow: var(--shadow-card); --card-header-bg: color-mix(in srgb, var(--card) 60%, transparent); --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent); --dock-shadow: var(--shadow-dock); --dock-shadow-collapsed: var(--shadow-dock-collapsed); --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent); --shadow-dock-wrap: var(--shadow-xl), var(--glass-material-rim), var(--glass-under-shadow-vivid); --shadow-cartoon-color: rgb(0 0 0 / 0.12); --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06); --cartoon-ink: oklch(from var(--foreground) clamp(0.28, l, 0.34) clamp(0.030, c, 0.050) h); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 32%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent); --cartoon-ink-fallback: #34251a; --shadow-cartoon-sm: -2px 2px 0 var(--cartoon-ink-lead), -3px 3px 0 var(--cartoon-ink-mid), -4px 4px 0 var(--cartoon-ink-contact); --shadow-cartoon-md: -3px 3px 0 var(--cartoon-ink-lead), -5px 5px 0 var(--cartoon-ink-mid), -7px 7px 0 var(--cartoon-ink-contact); --shadow-cartoon-lg: -4px 4px 0 var(--cartoon-ink-lead), -7px 7px 0 var(--cartoon-ink-mid), -11px 11px 0 var(--cartoon-ink-contact); --cartoon-shadow-sm: var(--shadow-cartoon-sm); --cartoon-shadow-md: var(--shadow-cartoon-md); --cartoon-shadow-lg: var(--shadow-cartoon-lg); --blob-shadow-offset: 0 4px; --blob-shadow-blur: 14px; --blob-shadow-color: color-mix(in srgb, var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color)); --blob-shadow-strength: 20%; --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent); --blob-shadow-contact-offset: 0 1px; --blob-shadow-contact-blur: 3px; --blob-shadow-contact-strength: 38%; --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent); --blob-shadow: var(--blob-shadow-ambient); --blob-shadow-hover: 0 6px 20px color-mix(in srgb, var(--blob-shadow-color) 26%, transparent); --blob-shadow-contact-hover: 0 1px 4px color-mix(in srgb, var(--blob-shadow-color) 44%, transparent); } @supports not (color: oklch(from white l c h)) { :root { --cartoon-ink: var(--cartoon-ink-fallback); } } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root { --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 42%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 34%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent); } }
+:root { --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent); --cartoon-shadow: var(--shadow-cartoon); --cartoon-shadow-hover: var(--shadow-cartoon-hover); --soft-shadow: var(--shadow-soft); --elevated-shadow: var(--shadow-elevated); --modal-shadow: var(--shadow-modal); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent); --shadow-card: var(--shadow-md); --card-shadow: var(--shadow-card); --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent); --dock-shadow: var(--shadow-dock); --dock-shadow-collapsed: var(--shadow-dock-collapsed); --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent); --shadow-dock-wrap: var(--shadow-xl), var(--glass-material-rim), var(--glass-under-shadow-vivid); --shadow-cartoon-color: rgb(0 0 0 / 0.12); --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06); --cartoon-ink: oklch(from var(--foreground) clamp(0.28, l, 0.34) clamp(0.030, c, 0.050) h); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 32%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent); --cartoon-ink-fallback: #34251a; --shadow-cartoon-sm: -2px 2px 0 var(--cartoon-ink-lead), -3px 3px 0 var(--cartoon-ink-mid), -4px 4px 0 var(--cartoon-ink-contact); --shadow-cartoon-md: -3px 3px 0 var(--cartoon-ink-lead), -5px 5px 0 var(--cartoon-ink-mid), -7px 7px 0 var(--cartoon-ink-contact); --shadow-cartoon-lg: -4px 4px 0 var(--cartoon-ink-lead), -7px 7px 0 var(--cartoon-ink-mid), -11px 11px 0 var(--cartoon-ink-contact); --cartoon-shadow-sm: var(--shadow-cartoon-sm); --cartoon-shadow-md: var(--shadow-cartoon-md); --cartoon-shadow-lg: var(--shadow-cartoon-lg); --blob-shadow-offset: 0 4px; --blob-shadow-blur: 14px; --blob-shadow-color: color-mix(in srgb, var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color)); --blob-shadow-strength: 20%; --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent); --blob-shadow-contact-offset: 0 1px; --blob-shadow-contact-blur: 3px; --blob-shadow-contact-strength: 38%; --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent); --blob-shadow-hover: 0 6px 20px color-mix(in srgb, var(--blob-shadow-color) 26%, transparent); --blob-shadow-contact-hover: 0 1px 4px color-mix(in srgb, var(--blob-shadow-color) 44%, transparent); } @supports not (color: oklch(from white l c h)) { :root { --cartoon-ink: var(--cartoon-ink-fallback); } } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root { --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 42%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 34%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent); } }

package/dist/styles/tokens.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Runtime design tokens — the JS/TS projection of glass-ui's CSS custom properties.
+ *
+ * CSS tokens in `src/styles/tokens.css` drive the rendered UI. Some contexts
+ * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
+ * CSS variables at render time — they need literal numbers and strings.
+ *
+ * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ */
+/** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
+export declare const chartHeights: {
+    readonly compact: 240;
+    readonly default: 360;
+    readonly large: 400;
+};
+/** Echarts grid margin (px). Matches `--chart-margin` in tokens.css. */
+export declare const chartMargin = 20;
+/**
+ * Neutral divider colors for chart gridlines, axis ticks, overlays.
+ * rgba literals — echarts / Canvas 2D can't parse CSS vars in color options.
+ * Match `--color-divider-*` in tokens.css.
+ */
+export declare const chartColors: {
+    readonly dividerSubtle: "rgba(128, 128, 128, 0.05)";
+    readonly dividerMedium: "rgba(128, 128, 128, 0.4)";
+    readonly dividerStrong: "rgba(128, 128, 128, 0.7)";
+};
+/** Default form-select minimum width (px). Matches `--input-min-width-sm`. */
+export declare const minWidthInputSm = 80;
+/**
+ * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
+ * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
+ * Vue inline-style binding) so the JS-driven cascade and CSS-driven
+ * cascade resolve to the same value. The three named tiers correspond
+ * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
+ * in `styles/tokens.css`:
+ *
+ *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
+ *                         results-table `:nth-child` delays)
+ *   - `default` (80ms)  — canonical row stagger (ResultStack, bar
+ *                         entrance, useStaggerReveal default)
+ *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
+ *
+ * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
+ * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
+ * AJ-W4-κ.
+ */
+export declare const motionStagger: {
+    readonly tight: 40;
+    readonly default: 80;
+    readonly relaxed: 120;
+};

package/dist/styles/tokens.ts

@@ -0,0 +1,58 @@
+/**
+ * Runtime design tokens — the JS/TS projection of glass-ui's CSS custom properties.
+ *
+ * CSS tokens in `src/styles/tokens.css` drive the rendered UI. Some contexts
+ * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
+ * CSS variables at render time — they need literal numbers and strings.
+ *
+ * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ */
+
+/** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
+export const chartHeights = {
+    compact: 240,
+    default: 360,
+    large: 400,
+} as const;
+
+/** Echarts grid margin (px). Matches `--chart-margin` in tokens.css. */
+export const chartMargin = 20;
+
+/**
+ * Neutral divider colors for chart gridlines, axis ticks, overlays.
+ * rgba literals — echarts / Canvas 2D can't parse CSS vars in color options.
+ * Match `--color-divider-*` in tokens.css.
+ */
+export const chartColors = {
+    dividerSubtle: "rgba(128, 128, 128, 0.05)",
+    dividerMedium: "rgba(128, 128, 128, 0.4)",
+    dividerStrong: "rgba(128, 128, 128, 0.7)",
+} as const;
+
+/** Default form-select minimum width (px). Matches `--input-min-width-sm`. */
+export const minWidthInputSm = 80;
+
+/**
+ * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
+ * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
+ * Vue inline-style binding) so the JS-driven cascade and CSS-driven
+ * cascade resolve to the same value. The three named tiers correspond
+ * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
+ * in `styles/tokens.css`:
+ *
+ *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
+ *                         results-table `:nth-child` delays)
+ *   - `default` (80ms)  — canonical row stagger (ResultStack, bar
+ *                         entrance, useStaggerReveal default)
+ *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
+ *
+ * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
+ * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
+ * AJ-W4-κ.
+ */
+export const motionStagger = {
+    tight: 40,
+    default: 80,
+    relaxed: 120,
+} as const;

package/dist/styles/typography/scale.css

@@ -1 +1 @@
-@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local("-apple-system"); ascent-override: 92.3784%; descent-override: 19.7572%; size-adjust: 112.3639%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Segoe UI"), local("SegoeUI"); ascent-override: 98.3348%; descent-override: 21.0311%; size-adjust: 105.5577%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Roboto Regular"), local("Roboto-Regular"); ascent-override: 98.6597%; descent-override: 21.1006%; size-adjust: 105.2101%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%; } @font-face { font-family: "Fira Code Fallback"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono Regular"); ascent-override: 99.0161%; descent-override: 32.2052%; size-adjust: 99.9837%; } :root { --type-admin-label: 0.625rem; --type-micro: 0.6875rem; --type-caption: clamp( 0.75rem, 0.71rem + 0.21vw, 1rem ); --type-small: clamp( 0.875rem, 0.8rem + 0.25vw, 1.25rem ); --type-body: clamp( 1rem, 0.92rem + 0.27vw, 1.375rem ); --type-prose: clamp( 1.125rem, 1.04rem + 0.28vw, 1.5rem ); --type-subheading: 1.272rem; --type-heading: 1.618rem; --type-title: 2.058rem; --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); --type-display-mega: clamp( 5.382rem, 4rem + 9vw, 11.089rem ); --type-display-hero: clamp( 6.854rem, 4.5rem + 12vw, 17.942rem ); --type-display-audacious: clamp( 8.728rem, 5rem + 16vw, 22rem ); --type-weight-display: 600; --type-weight-heading: 700; --type-weight-title: 700; }
+@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local("-apple-system"); ascent-override: 92.3784%; descent-override: 19.7572%; size-adjust: 112.3639%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Segoe UI"), local("SegoeUI"); ascent-override: 98.3348%; descent-override: 21.0311%; size-adjust: 105.5577%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Roboto Regular"), local("Roboto-Regular"); ascent-override: 98.6597%; descent-override: 21.1006%; size-adjust: 105.2101%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%; } @font-face { font-family: "Fira Code Fallback"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono Regular"); ascent-override: 99.0161%; descent-override: 32.2052%; size-adjust: 99.9837%; } :root { --type-admin-label: 0.625rem; --type-micro: 0.6875rem; --type-caption: clamp( 0.75rem, 0.71rem + 0.21vw, 1rem ); --type-small: clamp( 0.875rem, 0.8rem + 0.25vw, 1.25rem ); --type-body: clamp( 1rem, 0.92rem + 0.27vw, 1.375rem ); --type-prose: clamp( 1.125rem, 1.04rem + 0.28vw, 1.5rem ); --type-subheading: 1.272rem; --type-heading: 1.618rem; --type-title: 2.058rem; --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); --type-display-mega: clamp( 5.382rem, 4rem + 9vw, 11.089rem ); --type-display-hero: clamp( 6.854rem, 4.5rem + 12vw, 17.942rem ); --type-display-audacious: clamp( 8.728rem, 5rem + 16vw, 22rem ); --font-display-weight: 600; --type-weight-display: var(--font-display-weight); --type-weight-heading: 700; --type-weight-title: 700; }

package/dist/styles/typography/semantic.css

@@ -1 +1 @@
-body { font-family: var(--font-text); color: var(--foreground); font-size: var(--type-body); line-height: var(--type-leading-body); } @utility text-display-audacious { font-family: var(--font-display); font-size: var(--type-display-audacious); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-hero { font-family: var(--font-display); font-size: var(--text-hero-size, var(--type-display-audacious)); line-height: var(--text-hero-leading, 0.84); letter-spacing: var(--text-hero-tracking, -0.03em); font-weight: 300; font-feature-settings: "ss01", "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto; display: inline-block; max-inline-size: 100%; white-space: nowrap; text-wrap: nowrap; } @utility text-display-hero { font-family: var(--font-display); font-size: var(--type-display-hero); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-mega { font-family: var(--font-display); font-size: var(--type-display-mega); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-5 { font-family: var(--font-display); font-size: var(--type-display-5); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-4 { font-family: var(--font-display); font-size: var(--type-display-4); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-3 { font-family: var(--font-display); font-size: var(--type-display-3); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-2 { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display { font-family: var(--font-display); font-size: var(--type-display-1); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-title { font-family: var(--font-text); font-size: var(--type-title); line-height: var(--type-leading-heading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-title); text-wrap: balance; } @utility text-heading { font-family: var(--font-text); font-size: var(--type-heading); line-height: var(--type-leading-heading); font-weight: var(--type-weight-heading); text-wrap: balance; } @utility text-subheading { font-family: var(--font-text); font-size: var(--type-subheading); line-height: var(--type-leading-body); font-weight: 600; text-wrap: balance; } @utility dock-label { font-family: var(--font-text); font-size: var( --dock-label-size, calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio)) ); line-height: var(--type-leading-body); font-weight: 400; letter-spacing: var(--type-tracking-normal); } @utility text-prose { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-weight: 400; text-wrap: pretty; } @utility text-body { font-family: var(--font-text); font-size: var(--type-body); line-height: var(--type-leading-body); font-weight: 400; text-wrap: pretty; } @utility text-small { font-family: var(--font-text); font-size: var(--type-small); line-height: var(--type-leading-small); font-weight: 400; } @utility text-caption { font-family: var(--font-text); font-size: var(--type-caption); line-height: var(--type-leading-caption); font-style: italic; font-weight: 400; } @utility text-micro { font-size: var(--type-micro); line-height: 1.25; } @utility text-admin-label { font-family: var(--font-mono); font-size: var(--type-admin-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--type-tracking-caps); font-weight: 500; }
+body { font-family: var(--font-text); color: var(--foreground); font-size: var(--type-body); line-height: var(--type-leading-body); } @utility text-display-audacious { font-family: var(--font-display); font-size: var(--type-display-audacious); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-hero { font-family: var(--font-display); font-size: var(--text-hero-size, var(--type-display-audacious)); line-height: var(--text-hero-leading, 0.84); letter-spacing: var(--text-hero-tracking, -0.03em); font-weight: 300; font-feature-settings: "ss01", "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto; display: inline-block; max-inline-size: 100%; white-space: nowrap; text-wrap: nowrap; } @utility text-display-hero { font-family: var(--font-display); font-size: var(--type-display-hero); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-mega { font-family: var(--font-display); font-size: var(--type-display-mega); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-5 { font-family: var(--font-display); font-size: var(--type-display-5); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-4 { font-family: var(--font-display); font-size: var(--type-display-4); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-3 { font-family: var(--font-display); font-size: var(--type-display-3); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-2 { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display { font-family: var(--font-display); font-size: var(--type-display-1); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-title { font-family: var(--font-text); font-size: var(--type-title); line-height: var(--type-leading-heading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-title); text-wrap: balance; } @utility text-heading { font-family: var(--font-text); font-size: var(--type-heading); line-height: var(--type-leading-heading); font-weight: var(--type-weight-heading); text-wrap: balance; } @utility text-subheading { font-family: var(--font-text); font-size: var(--type-subheading); line-height: var(--type-leading-body); font-weight: 600; text-wrap: balance; } @utility dock-label { font-family: var(--font-text); font-size: var( --dock-label-size, calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio)) ); line-height: var(--type-leading-body); font-weight: 400; letter-spacing: var(--type-tracking-normal); } @utility text-prose { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-weight: 400; text-wrap: pretty; } @utility text-body { font-family: var(--font-text); font-size: var(--type-body); line-height: var(--type-leading-body); font-weight: 400; text-wrap: pretty; } @utility text-small { font-family: var(--font-text); font-size: var(--type-small); line-height: var(--type-leading-small); font-weight: 400; } @utility text-caption { font-family: var(--font-text); font-size: var(--type-caption); line-height: var(--type-leading-caption); font-style: italic; font-weight: 400; } @utility text-micro { font-size: var(--type-micro); line-height: 1.25; } @utility text-admin-label { font-family: var(--font-mono); font-size: var(--type-admin-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--type-tracking-caps); font-weight: 500; }

package/dist/styles/typography/utilities.css

@@ -1 +1 @@
-@utility text-math { font-family: var(--font-text); font-style: italic; } @utility text-math-body { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-style: italic; } @utility text-mono-caption { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--type-tracking-caps); text-transform: uppercase; } @utility text-mono-small { font-family: var(--font-mono); font-size: var(--type-small); line-height: var(--type-leading-small); } @utility text-mono-prose { font-family: var(--font-mono); font-size: var(--type-prose); line-height: var(--type-leading-prose); letter-spacing: 0.02em; } @utility text-mono-micro { font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.25; letter-spacing: 0.025em; } @utility cm-serif { font-family: var(--font-serif-math, serif); } @utility fira-code { font-family: var(--font-mono); font-feature-settings: "liga", "calt"; } @utility fourier-f { font-family: var(--font-display); font-style: italic; font-size: 1.35em; line-height: 1; vertical-align: -0.05em; font-weight: 700; display: inline-block; } @layer components { .text-pane-title { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-tight); font-weight: 600; font-optical-sizing: auto; } @container (min-width: 40rem) { .text-pane-title { font-size: var(--type-display-3); } } .section-label { @apply text-mono-caption; color: var(--muted-foreground); } .section-label--tinted { color: var(--section-label-accent, var(--section-color-7)); } :root:not(.dark) [data-paper-field] .section-label:not(.section-label--tinted) { color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%); } .tabular-nums { font-variant-numeric: tabular-nums; } .char-stagger > .char { display: inline-block; animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards; animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step)); } .text-engraved { color: var(--muted-foreground); text-shadow: var(--text-shadow-engraved); } }
+@utility text-math { font-family: var(--font-text); font-style: italic; } @utility text-math-body { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-style: italic; } @utility text-mono-caption { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--type-tracking-caps); text-transform: uppercase; } @utility text-mono-small { font-family: var(--font-mono); font-size: var(--type-small); line-height: var(--type-leading-small); } @utility text-mono-prose { font-family: var(--font-mono); font-size: var(--type-prose); line-height: var(--type-leading-prose); letter-spacing: 0.02em; } @utility text-mono-micro { font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.25; letter-spacing: 0.025em; } @utility cm-serif { font-family: var(--font-serif-math, serif); } @utility fira-code { font-family: var(--font-mono); font-feature-settings: "liga", "calt"; } @utility fourier-f { font-family: var(--font-display); font-style: italic; font-size: 1.35em; line-height: 1; vertical-align: -0.05em; font-weight: 700; display: inline-block; } @layer components { .text-pane-title { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-weight: var(--type-weight-display); font-optical-sizing: auto; } @container (min-width: 40rem) { .text-pane-title { font-size: var(--type-display-3); } } .section-label { @apply text-mono-caption; color: var(--muted-foreground); } .section-label--tinted { color: var(--section-label-accent, var(--section-color-7)); } :root:not(.dark) [data-paper-field] .section-label:not(.section-label--tinted) { color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%); } .tabular-nums { font-variant-numeric: tabular-nums lining-nums; } .char-stagger > .char { display: inline-block; animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards; animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step)); } .text-engraved { color: var(--muted-foreground); text-shadow: var(--text-shadow-engraved); } }

package/dist/styles/utilities/base.css

@@ -1 +1 @@
-@property --fade-start { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @property --fade-end { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @layer components { .section-description { font-size: var(--type-body); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; } .labeled-field-label { font-family: var(--font-display); font-size: var(--type-body); color: var(--field-label-color, var(--muted-foreground)); cursor: help; } .labeled-field { --field-label-color: var(--muted-foreground); display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; } .labeled-field:has(:user-invalid), .labeled-field.has-error { --field-label-color: var(--destructive); } .labeled-field-error { display: none; font-size: var(--type-small); color: var(--destructive); margin-block-start: 0.25rem; } .labeled-field:has(:user-invalid) .labeled-field-error, .labeled-field.has-error .labeled-field-error { display: block; } .labeled-field:has(:user-valid) .labeled-field-error, .labeled-field.has-valid .labeled-field-error { display: none; } .popover-content { border-radius: var(--radius-panel); color: var(--popover-foreground); outline: none; } .scrollbar-hidden { scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } @supports not (scrollbar-color: auto) { .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-track { background: var(--scrollbar-track); } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); } } .focus-ring:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring-shadow); } .hairline-accent { box-shadow: var(--border-hairline); } .interactive-item { scale: 1; border-radius: var(--radius-lg); user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); } .interactive-item:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); } .interactive-item:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .interactive-item:active { scale: var(--scale-press-sm); } .interactive-item:disabled, .interactive-item[data-disabled] { pointer-events: none; opacity: var(--opacity-disabled); cursor: not-allowed; } .tap-squish { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); transform-origin: center center; } .tap-squish:active { scale: var(--scale-press); } @media (prefers-reduced-motion: reduce) { .tap-squish:active { scale: 1; } } .glass-press { cursor: pointer; min-block-size: max(0px, var(--control-floor, 0px)); filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04)); } @property --card-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } }
+@property --fade-start { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @property --fade-end { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @layer components { .section-description { font-size: var(--type-body); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; } .labeled-field-label { font-family: var(--font-display); font-size: var(--type-body); color: var(--field-label-color, var(--muted-foreground)); cursor: help; } .labeled-field { --field-label-color: var(--muted-foreground); display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; } .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])), .labeled-field.has-error { --field-label-color: var(--destructive); } .labeled-field-error { display: none; font-size: var(--type-small); color: var(--destructive); margin-block-start: 0.25rem; } .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])) .labeled-field-error, .labeled-field.has-error .labeled-field-error { display: block; } .labeled-field:has(:where(:user-valid, [aria-invalid="false"])) .labeled-field-error, .labeled-field.has-valid .labeled-field-error { display: none; } .popover-content { border-radius: var(--radius-panel); color: var(--popover-foreground); outline: none; } .scrollbar-hidden { scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } @supports not (scrollbar-color: auto) { .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-track { background: var(--scrollbar-track); } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); } } .focus-ring:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring-shadow); } .hairline-accent { box-shadow: var(--border-hairline); } .interactive-item { scale: 1; border-radius: var(--radius-lg); user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); } .interactive-item:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); } .interactive-item:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .interactive-item:active { scale: var(--scale-press-sm); } .interactive-item:disabled, .interactive-item[data-disabled] { pointer-events: none; opacity: var(--opacity-disabled); cursor: not-allowed; } .tap-squish { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); transform-origin: center center; } .tap-squish:not([data-press-armed]):active { scale: var(--scale-press); } @media (prefers-reduced-motion: reduce) { .tap-squish:not([data-press-armed]):active { scale: 1; } } .glass-press { cursor: pointer; min-block-size: max(0px, var(--control-floor, 0px)); filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04)); } @property --card-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } }

package/dist/styles/utilities/btn.css

@@ -1 +1 @@
-@utility scale-on-hover { scale: 1; transition: scale var(--spring-smooth-duration) var(--spring-smooth); &:hover { scale: var(--scale-hover); } } @utility twin-line-divider { --twin-line-catch: rgb(255 255 255 / 0.10); --twin-line-shadow: rgb(0 0 0 / 0.12); :where(.dark) & { --twin-line-catch: rgb(255 255 255 / 0.06); --twin-line-shadow: rgb(0 0 0 / 0.18); } } @utility transition-control { transition-property: background-color, color, box-shadow, border-color; transition-duration: var(--duration-control); transition-timing-function: var(--ease-standard); } @utility transition-collapse { transition-property: height, opacity; } @utility transition-disclosure { transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch); } @utility sheet-animate { @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out data-[state=open]:duration-[var(--duration-panel)] data-[state=closed]:duration-[var(--duration-fast)]; } .btn-punch { position: relative; --motion-weight: 1; --cartoon-press-t: 0; transition: scale var(--spring-smooth-duration) var(--ease-cartoon-punch); } .btn-punch > :not(.cartoon-cast) { --btn-glyph-pop: 0.05; transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast); } .btn-punch:active > :not(.cartoon-cast) { scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight)); } @media (prefers-reduced-motion: reduce) { .btn-punch { --motion-weight: 0; transition: scale var(--spring-smooth-duration) var(--ease-standard); } .btn-punch > :not(.cartoon-cast) { transition: none; } } @utility table-cell { padding-inline: var(--table-cell-px, 1rem); padding-block: var(--table-cell-py, 1rem); } @utility table-head { height: var(--table-head-h, 3rem); padding-inline: var(--table-head-px, 1rem); } @utility rainbow-vivid { background: linear-gradient( to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet) ); } @utility rainbow-pastel { background: linear-gradient( to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet) ); } ::highlight(glass-search-mark) { background-color: var( --text-highlight-search-bg, color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent) ); color: var(--text-highlight-search-fg, inherit); } ::highlight(glass-mark) { background-color: var( --text-highlight-bg, color-mix(in srgb, var(--primary) 18%, transparent) ); color: var(--text-highlight-fg, inherit); } @utility btn-interactive { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard); &:hover { scale: var(--scale-hover-btn); } &:active { scale: var(--scale-press); } &:disabled { opacity: var(--opacity-disabled); pointer-events: none; } &:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }
+@utility scale-on-hover { scale: 1; transition: scale var(--spring-smooth-duration) var(--spring-smooth); &:hover { scale: var(--scale-hover); } } @utility twin-line-divider { --twin-line-catch: rgb(255 255 255 / 0.10); --twin-line-shadow: rgb(0 0 0 / 0.12); :where(.dark) & { --twin-line-catch: rgb(255 255 255 / 0.06); --twin-line-shadow: rgb(0 0 0 / 0.18); } } @utility transition-control { transition-property: background-color, color, box-shadow, border-color; transition-duration: var(--duration-control); transition-timing-function: var(--ease-standard); } @utility transition-collapse { transition-property: height, opacity; } @utility transition-disclosure { transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch); } @utility sheet-animate { @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out data-[state=open]:duration-[calc(var(--duration-panel)*var(--motion-tempo))] data-[state=closed]:duration-[calc(var(--duration-fast)*var(--motion-tempo))]; } .btn-punch { position: relative; --motion-weight: 1; --cartoon-press-t: 0; transition: scale var(--spring-smooth-duration) var(--ease-cartoon-punch); } .btn-punch > :not(.cartoon-cast) { --btn-glyph-pop: 0.05; transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast); } .btn-punch:active > :not(.cartoon-cast) { scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight)); } @media (prefers-reduced-motion: reduce) { .btn-punch { --motion-weight: 0; transition: scale var(--spring-smooth-duration) var(--ease-standard); } .btn-punch > :not(.cartoon-cast) { transition: none; } } @utility table-cell { padding-inline: var(--table-cell-px, 1rem); padding-block: var(--table-cell-py, 1rem); } @utility table-head { height: var(--table-head-h, 3rem); padding-inline: var(--table-head-px, 1rem); } @utility rainbow-vivid { background: linear-gradient( to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet) ); } @utility rainbow-pastel { background: linear-gradient( to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet) ); } @utility btn-interactive { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard); &:hover { scale: var(--scale-hover-btn); } &:active { scale: var(--scale-press); } &:disabled { opacity: var(--opacity-disabled); pointer-events: none; } &:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }

package/dist/styles/utilities/components.css

@@ -1 +1 @@
-@layer components { .metric-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; scale: 1; gap: var(--metric-badge-gap, 0.125rem); max-width: var(--metric-badge-max-width, 8rem); min-height: var(--metric-badge-min-height, 1.5rem); padding: var(--metric-badge-padding-block, 0.125rem) var(--metric-badge-padding-inline, 0.5rem); overflow: hidden; flex-shrink: 0; line-height: 1; border: 1px solid var(--metric-badge-border, var(--glass-border-quiet)); border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill))); background: var(--metric-badge-bg, var(--glass-bg-quiet)); backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--spring-smooth-duration) var(--spring-smooth), scale var(--spring-smooth-duration) var(--spring-smooth); } .metric-badge > span { line-height: 1; overflow-wrap: anywhere; } .metric-badge:hover { border-color: var(--metric-badge-hover-border, var(--glass-border-resting)); background: var(--metric-badge-hover-bg, var(--glass-bg-resting)); box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight)); translate: 0 var(--metric-badge-hover-translate, -2px); scale: var(--metric-badge-hover-scale, 1.04); } .metric-badge:active { scale: var(--metric-badge-press-scale, 0.96); } .metric-badge:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .metric-badge[data-just-resolved="true"] { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.18), var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); } .metric-badge--label-inline { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--metric-badge-label-gap, 0.375rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; } .metric-badge--label-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--metric-badge-label-gap-stacked, 0.0625rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; min-height: var(--metric-badge-min-height-stacked, 2.625rem); padding-block: var(--metric-badge-padding-block-stacked, 0.375rem); } .metric-badge--label-stacked .metric-badge__row { display: inline-flex; align-items: baseline; gap: var(--metric-badge-row-gap-stacked, 0.25rem); } .metric-pill:not([data-dense]).metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.5rem; --metric-badge-padding-inline: 0.75rem; } .metric-pill[data-dense].metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.25rem; --metric-badge-padding-inline: 0.5rem; } .metric-badge__label { letter-spacing: 0.18em; line-height: 1; } .metric-badge__label--full + .metric-badge__label--abbr { display: none; } .metric-badge[data-size="sm"] .metric-badge__label { letter-spacing: 0.1em; } .input-bar { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--glass-border-floating); background: var(--glass-bg-floating); backdrop-filter: var(--glass-blur-floating); padding: 0 0.75rem; height: var(--control-pill-h, var(--control-h-sm)); max-width: var(--max-width-input); width: 100%; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .input-bar:focus-within { box-shadow: var(--focus-ring-shadow); border-color: var(--border); } .input-bar-field { font-family: var(--input-bar-font, var(--font-mono, monospace)); font-size: var(--control-pill-text, var(--control-text)); background: transparent; border: none; outline: none; flex: 1; min-width: 0; } .input-bar-field::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); } :where(.hover-lift, .hover-lift-md, .hover-lift-lg) { translate: 0; transition-property: translate, box-shadow; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-standard); } .hover-lift:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-sm); box-shadow: var(--shadow-md); } .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-md); box-shadow: var(--shadow-md); } .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-lg); box-shadow: var(--shadow-lg); } :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) { border: 2px solid var(--border); } .shadow-cartoon-sm { box-shadow: var(--shadow-cartoon-sm); translate: 0 -1px; } .shadow-cartoon-md { box-shadow: var(--shadow-cartoon-md); translate: 0 -1px; } .shadow-cartoon-lg { box-shadow: var(--shadow-cartoon-lg); translate: 0 -2px; } .divider-h { height: 2px; background: linear-gradient( to right, transparent 1%, var(--border) 8%, var(--border) 92%, transparent 99% ); } .divider-h-tapered { height: 2px; background: linear-gradient( to right, transparent 3%, var(--border) 15%, var(--border) 85%, transparent 97% ); } }
+@layer components { .metric-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; scale: 1; gap: var(--metric-badge-gap, 0.125rem); max-width: var(--metric-badge-max-width, 8rem); min-height: var(--metric-badge-min-height, 1.5rem); padding: var(--metric-badge-padding-block, 0.125rem) var(--metric-badge-padding-inline, 0.5rem); overflow: hidden; flex-shrink: 0; line-height: 1; border: 1px solid var(--metric-badge-border, var(--glass-border-quiet)); border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill))); background: var(--metric-badge-bg, var(--glass-bg-quiet)); -webkit-backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--spring-smooth-duration) var(--spring-smooth), scale var(--spring-smooth-duration) var(--spring-smooth); } .metric-badge > span { line-height: 1; overflow-wrap: anywhere; } .metric-badge:hover { border-color: var(--metric-badge-hover-border, var(--glass-border-resting)); background: var(--metric-badge-hover-bg, var(--glass-bg-resting)); box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight)); translate: 0 var(--metric-badge-hover-translate, -2px); scale: var(--metric-badge-hover-scale, 1.04); } .metric-badge:active { scale: var(--metric-badge-press-scale, 0.96); } .metric-badge:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .metric-badge[data-just-resolved="true"] { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.18), var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); } .metric-badge--label-inline { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--metric-badge-label-gap, 0.375rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; } .metric-badge--label-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--metric-badge-label-gap-stacked, 0.0625rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; min-height: var(--metric-badge-min-height-stacked, 2.625rem); padding-block: var(--metric-badge-padding-block-stacked, 0.375rem); } .metric-badge--label-stacked .metric-badge__row { display: inline-flex; align-items: baseline; gap: var(--metric-badge-row-gap-stacked, 0.25rem); } .metric-pill:not([data-dense]).metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.5rem; --metric-badge-padding-inline: 0.75rem; } .metric-pill[data-dense].metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.25rem; --metric-badge-padding-inline: 0.5rem; } .metric-badge__label { letter-spacing: 0.18em; line-height: 1; } .metric-badge__label--full + .metric-badge__label--abbr { display: none; } .metric-badge[data-size="sm"] .metric-badge__label { letter-spacing: 0.1em; } .input-bar { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--glass-border-floating); background: var(--glass-bg-floating); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); padding: 0 0.75rem; height: var(--control-pill-h, var(--control-h-sm)); max-width: var(--max-width-input); width: 100%; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .input-bar:focus-within { box-shadow: var(--focus-ring-shadow); border-color: var(--border); } .input-bar-field { font-family: var(--input-bar-font, var(--font-mono, monospace)); font-size: var(--control-pill-text, var(--control-text)); background: transparent; border: none; outline: none; flex: 1; min-width: 0; } .input-bar-field::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); } :where(.hover-lift, .hover-lift-md, .hover-lift-lg) { translate: 0; transition-property: translate, box-shadow; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-standard); } .hover-lift:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-sm); box-shadow: var(--shadow-md); } .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-md); box-shadow: var(--shadow-md); } .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-lg); box-shadow: var(--shadow-lg); } :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) { border: 2px solid var(--border); } .shadow-cartoon-sm { box-shadow: var(--shadow-cartoon-sm); translate: 0 -1px; } .shadow-cartoon-md { box-shadow: var(--shadow-cartoon-md); translate: 0 -1px; } .shadow-cartoon-lg { box-shadow: var(--shadow-cartoon-lg); translate: 0 -2px; } .divider-h { height: 2px; background: linear-gradient( to right, transparent 1%, var(--border) 8%, var(--border) 92%, transparent 99% ); } .divider-h-tapered { height: 2px; background: linear-gradient( to right, transparent 3%, var(--border) 15%, var(--border) 85%, transparent 97% ); } }

package/dist/styles/utilities.css

@@ -1 +1 @@
-@import "./utilities/animate.css"; @import "./utilities/base.css"; @import "./utilities/base-misc.css"; @import "./utilities/metal.css"; @import "./utilities/components.css"; @import "./utilities/btn.css"; @import "./utilities/a11y-overrides.css";
+@import "./utilities/base.css"; @import "./utilities/base-misc.css"; @import "./utilities/metal.css"; @import "./utilities/components.css"; @import "./utilities/btn.css";

package/dist/{Switch-BPBfhMU3.js → switch-Boj4Ucn5.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./class-names-5jotTFzp.js";
-import { n as t } from "./useControlSize-DJwe-7ZQ.js";
+import { n as t } from "./useControlSize-CFfOk8I-.js";
 import { computed as n, createBlock as r, createVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, openBlock as c, unref as l, withCtx as u } from "vue";
 import { SwitchRoot as d, SwitchThumb as f, useForwardPropsEmits as p } from "reka-ui";
 //#endregion

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-BPBfhMU3.js";
+import { t as e } from "./switch-Boj4Ucn5.js";
 export { e as Switch };

package/dist/tabs.js

@@ -1,12 +1,12 @@
 import { t as e } from "./class-names-5jotTFzp.js";
 import { n as t } from "./springPresets-h5VKJQqG.js";
-import { n, r } from "./writeVelocityWeight-D1rvdxJu.js";
+import { n, r } from "./writeVelocityWeight-D_AcvTsE.js";
 import { t as i } from "./useMotionAxis-DCCXMC-i.js";
-import { a, i as o, o as s, r as c, s as l } from "./SelectScrollDownButton-CDtwaWkZ.js";
-import { i as u, n as d, r as f, t as p } from "./TooltipProvider-GtfYdSVf.js";
-import { t as m } from "./useLeadTrail-DOH4XkL1.js";
-import { t as h } from "./useDragMorph-65ihHePq.js";
-import { a as ee, r as g, t as te } from "./useTabRovingFocus-CG1H1k1J.js";
+import { a, c as o, o as s, r as c, s as l } from "./select-BIv4R3Ir.js";
+import { i as u, n as d, r as f, t as p } from "./tooltip-BmOQJzh0.js";
+import { t as m } from "./useLeadTrail-BYu8dq4G.js";
+import { t as h } from "./useDragMorph-7ygF9O0m.js";
+import { a as ee, r as g, t as te } from "./useTabRovingFocus-DkLYwo4L.js";
 import { Fragment as _, computed as v, createBlock as y, createCommentVNode as ne, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeModels as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onMounted as j, onScopeDispose as M, openBlock as N, ref as P, renderList as F, renderSlot as I, toDisplayString as L, unref as R, useModel as re, watch as z, withCtx as B } from "vue";
 //#region src/components/tabs/composables/useTabDragMorph.ts
 function ie(e) {
@@ -121,6 +121,7 @@ function oe(e) {
 //#region src/components/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
 var se = [
 	"role",
+	"aria-label",
 	"aria-orientation",
 	"data-motion",
 	"data-eyeglass"
@@ -138,7 +139,9 @@ var se = [
 	__name: "SegmentedTabs",
 	props: /* @__PURE__ */ T({
 		options: {},
+		ariaLabel: {},
 		variant: { default: "pill" },
+		semantics: {},
 		orientation: { default: "horizontal" },
 		responsive: {
 			type: [Boolean, Object],
@@ -161,35 +164,35 @@ var se = [
 		function n(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let r = t, m = i(() => r.motion), h = re(t, "modelValue"), g = P(null), w = P(null), T = P([]), D = v(() => r.variant === "underline"), A = v(() => r.orientation === "vertical"), j = v(() => !D.value), M = v(() => h.value == null ? [] : [h.value]), z = (e) => M.value.includes(e);
-		function V(e) {
-			return !D.value && !z(e.value) && !e.disabled && "glass-capsule-hover";
+		let r = t, m = i(() => r.motion), h = re(t, "modelValue"), g = P(null), w = P(null), T = P([]), D = v(() => r.variant === "underline"), A = v(() => r.orientation === "vertical"), j = v(() => r.semantics === "tabs" || !r.semantics && D.value), M = v(() => !D.value), z = v(() => h.value == null ? [] : [h.value]), V = (e) => z.value.includes(e);
+		function H(e) {
+			return !D.value && !V(e.value) && !e.disabled && "glass-capsule-hover";
 		}
-		let { responsiveCfg: H, stripValue: U, stripOptions: W, mobileAriaLabel: G, showMobileSelect: K } = ae({
+		let { responsiveCfg: U, stripValue: W, stripOptions: G, mobileAriaLabel: K, showMobileSelect: ue } = ae({
 			responsive: () => r.responsive,
 			options: v(() => r.options),
 			model: h
-		}), { singleSliderStyle: q, squishOnTravel: ue } = ee({
+		}), { singleSliderStyle: q, squishOnTravel: de } = ee({
 			containerRef: g,
 			indicatorRef: w,
 			buttonRefs: T,
-			options: W,
-			model: v(() => U.value),
-			activeValues: M,
+			options: G,
+			model: v(() => W.value),
+			activeValues: z,
 			vertical: A
 		}), J = oe({
 			indicatorRef: w,
-			enabled: j
+			enabled: M
 		}), { dragEnabled: Y, drag: X } = ie({
 			indicatorRef: w,
 			isVertical: A,
 			isUnderline: D,
 			draggable: () => m.armed.value,
-			stripOptions: W,
+			stripOptions: G,
 			buttonRefs: T,
 			model: h
 		});
-		function de(e) {
+		function fe(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
 			let t = n("--spring-snappy", "ease"), r = n("--scale-press-btn", "0.97");
@@ -206,37 +209,37 @@ var se = [
 			});
 		}
 		function Z(e, t) {
-			if (W.value[t]?.disabled) return;
+			if (G.value[t]?.disabled) return;
 			let n = T.value[t];
-			n && de(n), ue(t), J.energize(), h.value = e;
+			n && fe(n), de(t), J.energize(), h.value = e;
 		}
-		function fe() {
+		function pe() {
 			J.energize();
 		}
-		function pe(e) {
+		function me(e) {
 			typeof e == "string" && (h.value = e);
 		}
 		let { rovingTabindex: Q, onStripKeydown: $ } = te({
-			stripOptions: W,
-			stripValue: U,
+			stripOptions: G,
+			stripValue: W,
 			isVertical: A,
 			buttonRefs: T,
 			select: Z
 		});
-		return (n, i) => R(K) ? (N(), b("div", {
+		return (n, i) => R(ue) ? (N(), b("div", {
 			key: 0,
 			class: O(R(e)("segmented-tabs__mobile w-fit", r.class))
-		}, [C(R(l), {
+		}, [C(R(o), {
 			"model-value": h.value,
-			"onUpdate:modelValue": pe
+			"onUpdate:modelValue": me
 		}, {
-			default: B(() => [C(R(a), {
-				"aria-label": R(G),
-				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(H)?.triggerClass))
+			default: B(() => [C(R(s), {
+				"aria-label": r.ariaLabel ?? R(K),
+				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(U)?.triggerClass))
 			}, {
-				default: B(() => [C(R(s))]),
+				default: B(() => [C(R(l))]),
 				_: 1
-			}, 8, ["aria-label", "class"]), C(R(o), null, {
+			}, 8, ["aria-label", "class"]), C(R(a), null, {
 				default: B(() => [(N(!0), b(_, null, F(t.options, (e) => (N(), y(R(c), {
 					key: e.value,
 					value: e.value
@@ -251,14 +254,15 @@ var se = [
 			key: 1,
 			ref_key: "containerRef",
 			ref: g,
-			role: D.value ? "tablist" : "group",
-			"aria-orientation": D.value ? A.value ? "vertical" : "horizontal" : void 0,
+			role: j.value ? "tablist" : "group",
+			"aria-label": r.ariaLabel,
+			"aria-orientation": j.value ? A.value ? "vertical" : "horizontal" : void 0,
 			"data-motion": R(m).dataMotion.value,
-			"data-eyeglass": j.value ? "" : void 0,
+			"data-eyeglass": M.value ? "" : void 0,
 			style: k(R(m).hostStyle.value),
 			class: O(R(e)("segmented-tabs", `segmented-tabs--${t.variant}`, A.value && "segmented-tabs--vertical", !D.value && "glass-capsule-track", r.class)),
 			onKeydown: i[0] ||= (...e) => R($) && R($)(...e),
-			onPointerdown: fe
+			onPointerdown: pe
 		}, [D.value ? ne("", !0) : (N(), b("div", {
 			key: 0,
 			ref_key: "indicatorRef",
@@ -276,28 +280,29 @@ var se = [
 		}, [x("div", { class: O([
 			"segmented-indicator__plate",
 			"glass-capsule",
-			j.value && "glass-lens"
-		]) }, null, 2)], 6)), (N(!0), b(_, null, F(R(W), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(p), {
+			M.value && "glass-lens"
+		]) }, null, 2)], 6)), (N(!0), b(_, null, F(R(G), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(p), {
 			key: 0,
 			"delay-duration": 200
 		}, {
 			default: B(() => [C(R(u), null, {
 				default: B(() => [C(R(d), { "as-child": "" }, {
 					default: B(() => [x("button", E({
+						type: "button",
 						ref_for: !0,
 						ref: (e) => {
 							e && (T.value[t] = e);
 						},
 						class: "segmented-tab",
-						role: D.value ? "tab" : void 0,
+						role: j.value ? "tab" : void 0,
 						tabindex: R(Q)(t)
-					}, { ref_for: !0 }, D.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+					}, { ref_for: !0 }, j.value ? { "aria-selected": V(e.value) ? "true" : "false" } : { "aria-pressed": V(e.value) ? "true" : "false" }, {
 						disabled: e.disabled,
-						class: [e.disabled && "is-disabled", V(e)],
+						class: [e.disabled && "is-disabled", H(e)],
 						onClick: (n) => Z(e.value, t)
 					}), [I(n.$slots, "option", {
 						option: e,
-						active: z(e.value)
+						active: V(e.value)
 					}, () => [S(L(e.label), 1)])], 16, ce)]),
 					_: 2
 				}, 1024), C(R(f), {
@@ -312,20 +317,21 @@ var se = [
 			_: 2
 		}, 1024)) : (N(), b("button", E({
 			key: 1,
+			type: "button",
 			ref_for: !0,
 			ref: (e) => {
 				e && (T.value[t] = e);
 			},
 			class: "segmented-tab",
-			role: D.value ? "tab" : void 0,
+			role: j.value ? "tab" : void 0,
 			tabindex: R(Q)(t)
-		}, { ref_for: !0 }, D.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+		}, { ref_for: !0 }, j.value ? { "aria-selected": V(e.value) ? "true" : "false" } : { "aria-pressed": V(e.value) ? "true" : "false" }, {
 			disabled: e.disabled,
-			class: [e.disabled && "is-disabled", V(e)],
+			class: [e.disabled && "is-disabled", H(e)],
 			onClick: (n) => Z(e.value, t)
 		}), [I(n.$slots, "option", {
 			option: e,
-			active: z(e.value)
+			active: V(e.value)
 		}, () => [S(L(e.label), 1)])], 16, le))], 64))), 128))], 46, se));
 	}
 });