@mkbabb/glass-ui 6.0.0 → 8.0.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-[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); } }
+@utility scale-on-hover{scale: 1;transition: scale var(--spring-press-duration) var(--spring-press);&:hover{scale: var(--scale-hover);}}@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-disclosure{transition: rotate var(--spring-present-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))];}@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) );}

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)); -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% ); } }
+@layer components{.input-bar{display: flex;align-items: center;gap: 0.5rem;border-radius: var(--radius-control);border: 1px solid var(--glass-border-floating);background: var(--glass-plate-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: var(--muted-foreground);}: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% );}}@utility shadow-cartoon{box-shadow: var(--shadow-cartoon);}@utility shadow-cartoon-hover{box-shadow: var(--shadow-cartoon-hover);}@utility shadow-soft{box-shadow: var(--shadow-soft);}@utility shadow-elevated{box-shadow: var(--shadow-elevated);}@utility shadow-modal{box-shadow: var(--shadow-modal);}

package/dist/styles/utilities/metal.css

@@ -1 +1 @@
-@layer components { .metal-gold, .metal-silver, .metal-bronze { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; --metal-glow-blur: var(--metal-glow-blur-default, 0.5em); --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35); filter: drop-shadow( 0 0 var(--metal-glow-blur) color-mix( in srgb, var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%), transparent ) ); } .metal-gold { --metal-shimmer-color: gold; --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver { --metal-shimmer-color: silver; --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze { --metal-shimmer-color: bronze; --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-gold-border, .metal-silver-border, .metal-bronze-border { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } @supports (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { position: relative; } .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--metal-border-width, 2px) solid transparent; pointer-events: none; background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: exclude; } } @supports not (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { box-shadow: inset 0 0 0 var(--metal-border-width, 2px) var(--metal-stop-base); } } .metal-gold-border { --metal-shimmer-color: gold; --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver-border { --metal-shimmer-color: silver; --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze-border { --metal-shimmer-color: bronze; --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-rainbow-rim { --glass-accent: var(--color-gold); --glass-accent-strength: 45%; --metal-shimmer-color: rainbow; background-image: linear-gradient( 90deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet), var(--rainbow-red) ); background-size: 250% 100%; background-clip: border-box; } @media (prefers-reduced-motion: no-preference) { .metal-gold, .metal-silver, .metal-bronze, .metal-rainbow-rim, .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { animation: metal-shimmer-sweep var(--duration-metal) linear infinite; } } }
+@layer components{.metal-gold,.metal-silver,.metal-bronze{--metal-stop-dark: var(--color-gold-dark);--metal-stop-light: var(--color-gold-light);--metal-stop-base: var(--color-gold);background: linear-gradient( 90deg,var(--metal-stop-dark),var(--metal-stop-light),var(--metal-stop-base),var(--metal-stop-light),var(--metal-stop-dark) );background-size: 250% 100%;background-clip: text;-webkit-background-clip: text;color: transparent;--metal-glow-blur: var(--metal-glow-blur-default,0.5em);--metal-glow-opacity: var(--metal-glow-opacity-default,0.35);filter: drop-shadow( 0 0 var(--metal-glow-blur) color-mix( in srgb,var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%),transparent ) );}.metal-gold{--metal-stop-dark: var(--color-gold-dark);--metal-stop-light: var(--color-gold-light);--metal-stop-base: var(--color-gold);}.metal-silver{--metal-stop-dark: var(--color-silver-dark);--metal-stop-light: var(--color-silver-light);--metal-stop-base: var(--color-silver);}.metal-bronze{--metal-stop-dark: var(--color-bronze-dark);--metal-stop-light: var(--color-bronze-light);--metal-stop-base: var(--color-bronze);}.metal-gold-border,.metal-silver-border,.metal-bronze-border{--metal-stop-dark: var(--color-gold-dark);--metal-stop-light: var(--color-gold-light);--metal-stop-base: var(--color-gold);}@supports (mask-composite: exclude){.metal-gold-border,.metal-silver-border,.metal-bronze-border{position: relative;}.metal-gold-border::before,.metal-silver-border::before,.metal-bronze-border::before{content: "";position: absolute;inset: 0;border-radius: inherit;border: var(--metal-border-width,2px) solid transparent;pointer-events: none;background: linear-gradient( 90deg,var(--metal-stop-dark),var(--metal-stop-light),var(--metal-stop-base),var(--metal-stop-light),var(--metal-stop-dark) );background-size: 250% 100%;-webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0) border-box;-webkit-mask-composite: xor;mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0) border-box;mask-composite: exclude;}}@supports not (mask-composite: exclude){.metal-gold-border,.metal-silver-border,.metal-bronze-border{box-shadow: inset 0 0 0 var(--metal-border-width,2px) var(--metal-stop-base);}}.metal-gold-border{--metal-stop-dark: var(--color-gold-dark);--metal-stop-light: var(--color-gold-light);--metal-stop-base: var(--color-gold);}.metal-silver-border{--metal-stop-dark: var(--color-silver-dark);--metal-stop-light: var(--color-silver-light);--metal-stop-base: var(--color-silver);}.metal-bronze-border{--metal-stop-dark: var(--color-bronze-dark);--metal-stop-light: var(--color-bronze-light);--metal-stop-base: var(--color-bronze);}.metal-rainbow-rim{--glass-accent: var(--color-gold);--glass-accent-strength: 45%;background-image: linear-gradient( 90deg,var(--rainbow-red),var(--rainbow-orange),var(--rainbow-yellow),var(--rainbow-green),var(--rainbow-blue),var(--rainbow-indigo),var(--rainbow-violet),var(--rainbow-red) );background-size: 250% 100%;background-clip: border-box;}@media (prefers-reduced-motion: no-preference){.metal-gold,.metal-silver,.metal-bronze,.metal-rainbow-rim,.metal-gold-border::before,.metal-silver-border::before,.metal-bronze-border::before{animation: metal-shimmer-sweep var(--duration-metal) linear infinite;}}}

package/dist/styles/utilities/responsive.css

@@ -0,0 +1 @@
+@media (pointer: coarse){[data-control-target]{min-block-size: var(--touch-target,2.75rem);min-inline-size: var(--touch-target,2.75rem);}}

package/dist/styles/utilities.css

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

package/dist/styles/view-transition.css

@@ -1 +1 @@
-@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(.gl-list-item) { animation-duration: var(--vt-duration, var(--spring-bouncy-duration)); animation-timing-function: var(--vt-ease, var(--spring-bouncy)); } ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; } ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; } @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } } ::view-transition { pointer-events: none; }
+@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation: none !important;}}::view-transition-group(.gl-list-item){animation-duration: var(--vt-duration,var(--spring-present-duration));animation-timing-function: var(--vt-ease,var(--spring-present));}::view-transition-old(root),::view-transition-new(root){block-size: 100%;}html:active-view-transition-type(route,zoom,lateral,collapse)::view-transition-old(root),html:active-view-transition-type(route,zoom,lateral,collapse)::view-transition-new(root){animation-timing-function: linear;}html:active-view-transition-type(route,zoom,lateral,collapse)::view-transition-old(root){animation-name: gl-vt-route-out;}html:active-view-transition-type(route,zoom,lateral,collapse)::view-transition-new(root){animation-name: gl-vt-route-in;}html:active-view-transition-type(route)::view-transition-old(root),html:active-view-transition-type(route)::view-transition-new(root){animation-duration: var(--route-route-clock);}html:active-view-transition-type(zoom,lateral)::view-transition-old(root),html:active-view-transition-type(zoom,lateral)::view-transition-new(root){animation-duration: var(--route-world-clock);}html:active-view-transition-type(collapse)::view-transition-old(root),html:active-view-transition-type(collapse)::view-transition-new(root){animation-duration: var(--route-world-exit-clock);}html:active-view-transition-type(zoom)::view-transition-old(root){animation-name: gl-vt-route-out,gl-route-recede;animation-duration: var(--route-world-clock),var(--route-world-clock);animation-timing-function: linear,var(--route-world-spring);animation-fill-mode: both,both;}html:active-view-transition-type(collapse)::view-transition-new(root){animation-name: gl-vt-route-in,gl-route-recover;animation-duration: var(--route-world-exit-clock),var(--route-world-exit-clock);animation-delay: 0s,var(--route-collapse-clock);animation-timing-function: linear,var(--ease-out);animation-fill-mode: both,backwards;}html:active-view-transition-type(lateral)::view-transition-old(root){animation-name: gl-vt-route-out,gl-route-world-push-out;animation-duration: var(--route-world-clock),var(--route-world-clock);animation-timing-function: linear,var(--route-world-spring);animation-fill-mode: both,both;}html:active-view-transition-type(lateral)::view-transition-new(root){animation-name: gl-vt-route-in,gl-route-world-push-in;animation-duration: var(--route-world-clock),var(--route-world-clock);animation-timing-function: linear,var(--route-world-spring);animation-fill-mode: both,both;}::view-transition-group(gl-route-window){overflow: clip;}html:active-view-transition-type(zoom)::view-transition-group(gl-route-window){animation-duration: var(--route-zoom-clock);animation-timing-function: var(--route-zoom-spring);}html:active-view-transition-type(lateral)::view-transition-group(gl-route-window){animation-duration: var(--route-lateral-clock);animation-timing-function: var(--route-lateral-spring);}html:active-view-transition-type(collapse)::view-transition-group(gl-route-window){animation-duration: var(--route-collapse-clock);animation-timing-function: var(--route-collapse-spring);}html:active-view-transition-type(zoom,lateral)::view-transition-old(gl-route-window),html:active-view-transition-type(zoom,lateral)::view-transition-new(gl-route-window){animation-timing-function: linear;}html:active-view-transition-type(zoom)::view-transition-old(gl-route-window),html:active-view-transition-type(zoom)::view-transition-new(gl-route-window){animation-duration: var(--route-inhale-clock);}html:active-view-transition-type(lateral)::view-transition-old(gl-route-window),html:active-view-transition-type(lateral)::view-transition-new(gl-route-window){animation-duration: var(--route-lateral-clock);}html:active-view-transition-type(zoom)::view-transition-new(gl-route-window){animation-name: gl-vt-route-in;}html:active-view-transition-type(lateral)::view-transition-new(gl-route-window){animation-name: gl-vt-route-in,gl-route-slide-in;animation-duration: var(--route-lateral-clock),var(--route-lateral-clock);animation-timing-function: linear,var(--route-lateral-spring);animation-fill-mode: both,both;}html:active-view-transition-type(zoom)::view-transition-old(gl-route-window){animation-name: gl-vt-route-out,gl-route-inhale;animation-duration: var(--route-inhale-clock),var(--route-inhale-clock);animation-timing-function: linear,var(--ease-out);animation-fill-mode: both,forwards;}html:active-view-transition-type(lateral)::view-transition-old(gl-route-window){animation-name: gl-vt-route-out,gl-route-slide-out;animation-duration: var(--route-lateral-clock),var(--route-lateral-clock);animation-timing-function: linear,var(--route-lateral-spring);animation-fill-mode: both,both;}html:active-view-transition-type(collapse)::view-transition-old(gl-route-window){animation-name: gl-route-cut;animation-duration: var(--route-collapse-clock);animation-timing-function: var(--route-collapse-spring);animation-fill-mode: both;}html:active-view-transition-type(collapse)::view-transition-new(gl-route-window){animation-name: gl-route-cut-in;animation-duration: var(--route-collapse-clock);animation-timing-function: var(--route-collapse-spring);animation-fill-mode: both;}html:active-view-transition-type(zoom,lateral)::view-transition-old(gl-route-window):only-child{animation-name: gl-vt-route-out;animation-duration: var(--route-world-clock);animation-timing-function: linear;animation-fill-mode: both;}html:active-view-transition-type(zoom,lateral)::view-transition-new(gl-route-window):only-child{animation-name: gl-vt-route-in;animation-duration: var(--route-world-clock);animation-timing-function: linear;animation-fill-mode: both;}html:active-view-transition-type(collapse)::view-transition-old(gl-route-window):only-child{animation-name: gl-vt-route-out;animation-duration: var(--route-world-exit-clock);animation-timing-function: linear;animation-fill-mode: both;}html:active-view-transition-type(collapse)::view-transition-new(gl-route-window):only-child{animation-name: gl-vt-route-in;animation-duration: var(--route-world-exit-clock);animation-timing-function: linear;animation-fill-mode: both;}::view-transition-group(.gl-route-chrome),::view-transition-old(.gl-route-chrome),::view-transition-new(.gl-route-chrome){animation-duration: var(--route-inhale-clock);animation-timing-function: linear;}html:active-view-transition-type(zoom,lateral,collapse)::view-transition-old(gl-route-label){animation-name: gl-vt-route-out;animation-duration: var(--route-inhale-clock);animation-timing-function: linear;}html:active-view-transition-type(zoom,lateral,collapse)::view-transition-new(gl-route-label){animation-name: gl-vt-route-in;animation-duration: var(--route-inhale-clock);animation-timing-function: linear;}::view-transition-new(.gl-list-item):only-child{animation-name: gl-vt-slide-in;}::view-transition-old(.gl-list-item):only-child{animation-name: gl-vt-slide-out;}@keyframes gl-vt-slide-in{from{opacity: 0;translate: 0 var(--vt-rise,8px);}}@keyframes gl-vt-slide-out{to{opacity: 0;translate: 0 var(--vt-rise,8px);}}@keyframes gl-vt-route-in{from{opacity: 0;}}@keyframes gl-vt-route-out{to{opacity: 0;}}@keyframes gl-route-recede{from{filter: blur(0) brightness(1);translate: 0 0;}to{filter: blur(var(--route-world-blur)) brightness(var(--route-world-dim));translate: 0 calc(-1 * var(--route-world-travel));}}@keyframes gl-route-recover{from{filter: blur(var(--route-world-blur)) brightness(var(--route-world-dim));translate: 0 calc(-1 * var(--route-world-travel));}to{filter: blur(0) brightness(1);translate: 0 0;}}@keyframes gl-route-world-push-out{to{translate: calc(var(--route-direction,0) * -1 * var(--route-world-slide)) 0;}}@keyframes gl-route-world-push-in{from{translate: calc(var(--route-direction,0) * var(--route-world-slide)) 0;}}@keyframes gl-route-slide-out{to{translate: calc(var(--route-direction,0) * -1 * var(--route-slide)) 0;}}@keyframes gl-route-slide-in{from{translate: calc(var(--route-direction,0) * var(--route-slide)) 0;}}@keyframes gl-route-inhale{to{scale: var(--route-inhale-scale);}}@keyframes gl-route-cut{0%,90%{opacity: 1;}100%{opacity: 0;}}@keyframes gl-route-cut-in{0%,90%{opacity: 0;}100%{opacity: 1;}}::view-transition{pointer-events: none;}

package/dist/styles/viz-reveal.css

@@ -1 +1 @@
-@keyframes substrate-reveal-bloom { from { opacity: 0; filter: brightness(1) saturate(1); } 55% { filter: brightness(1.08) saturate(1.05); } to { opacity: 1; filter: brightness(1) saturate(1); } } @media (prefers-reduced-motion: no-preference) { canvas[data-substrate-reveal] { animation: substrate-reveal-bloom var(--substrate-reveal-duration) var(--ease-out); } }
+@keyframes substrate-reveal-bloom{from{opacity: 0;filter: brightness(1) saturate(1);}55%{filter: brightness(1.08) saturate(1.05);}to{opacity: 1;filter: brightness(1) saturate(1);}}@media (prefers-reduced-motion: no-preference){canvas[data-substrate-reveal]{animation: substrate-reveal-bloom var(--substrate-reveal-duration) var(--ease-out);}}

package/dist/{supportsCssTimeline-Dz-GVxXM.js → supportsCssTimeline-Di9gzleG.js}

@@ -1,12 +1,13 @@
-//#region src/composables/motion/supportsCssTimeline.ts
+//#region src/composables/motion/scroll/supportsCssTimeline.ts
 function e(e, t) {
 	return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", e) && !CSS.supports("animation-timeline", t);
 }
-function t() {
-	return e("scroll()", "gl-not-a-real-timeline");
-}
+var t;
 function n() {
+	return t ??= e("scroll()", "gl-not-a-real-timeline"), t;
+}
+function r() {
 	return e("view()", "gl-not-a-real-timeline");
 }
 //#endregion
-export { n, t };
+export { r as n, n as t };

package/dist/surface.d.ts

@@ -1 +1 @@
-export * from "./components/surface";
+export * from "./components/surface/index.js";

package/dist/surface.js

@@ -1,3 +1,2 @@
-import { n as e, t } from "./useSurfaceAxis-DudiZVOR.js";
-import { t as n } from "./Surface-BWRfwyn8.js";
-export { n as Surface, t as decorationClass, e as surfaceClass };
+import { t as e } from "./Surface-i1tWC-Ga.js";
+export { e as Surface };

package/dist/switch-DxZzDrmV.js

@@ -0,0 +1,49 @@
+import { t as e } from "./class-names-q-UGOkHH.js";
+import { n as t } from "./control-Da4XeT43.js";
+import { computed as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeProps 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";
+//#region src/components/switch/Switch.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	class: "control-bit__face",
+	"aria-hidden": "true"
+}, h = /* @__PURE__ */ o({
+	__name: "Switch",
+	props: {
+		modelValue: { type: Boolean },
+		defaultValue: { type: Boolean },
+		id: {},
+		value: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		invalid: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(o, { emit: h }) {
+		let g = o, _ = h, v = p(n(() => {
+			let { class: e, invalid: t, value: n, ...r } = g;
+			return {
+				...r,
+				value: n === void 0 ? void 0 : String(n)
+			};
+		}), _);
+		return (n, o) => (c(), r(l(d), s({ "data-slot": "switch" }, {
+			...l(v),
+			...l(t)(g.invalid)
+		}, { class: l(e)("switch control-bit tap-squish", g.class) }), {
+			default: u(() => [i("span", m, [a(l(f), { class: "switch__thumb" })])]),
+			_: 1
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { h as t };

package/dist/switch.d.ts

@@ -1 +1 @@
-export * from "./components/switch";
+export * from "./components/switch/index.js";

package/dist/switch.js

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

package/dist/tabs-CYscnq5H.js

@@ -0,0 +1,268 @@
+import { t as e } from "./class-names-q-UGOkHH.js";
+import { n as t, r as n } from "./writeVelocityWeight-DoGOCW3e.js";
+import { t as r } from "./useMotionAxis-D-rtIhca.js";
+import { a as i, c as a, l as o, r as s, s as c } from "./select-CDgwGH_P.js";
+import { n as l, t as u } from "./useSelectionGroup-zsEwitF6.js";
+import { t as d } from "./useDragMorph-B363RUbF.js";
+import { Fragment as f, computed as p, createBlock as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, onBeforeUpdate as E, onMounted as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useModel as P, watch as F, withCtx as I } from "vue";
+//#region src/components/tabs/composables/useTabDragMorph.ts
+function L(e) {
+	let { indicatorRef: r, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: u } = e, f = p(() => o() && !a.value);
+	function m() {
+		let e = r.value;
+		if (!e) return l;
+		let n = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
+		return t(e, Number(n) || 1.11);
+	}
+	function h() {
+		return s.value.map((e, t) => {
+			let n = c.value[t]?.getBoundingClientRect(), r = n ? i.value ? n.top + n.height / 2 : n.left + n.width / 2 : 0;
+			return {
+				value: e.value,
+				center: r
+			};
+		});
+	}
+	let g = d({
+		handle: r,
+		axis: () => i.value ? "y" : "x",
+		snapTargets: h,
+		maxStretch: m,
+		onSnap: (e) => {
+			u.value !== e && (u.value = e);
+		}
+	});
+	return F(() => [g.dragging.value, g.stretch.value], ([e, t]) => {
+		let i = r.value;
+		if (!(!i || !f.value)) if (e) {
+			i.style.setProperty("--stretch", String(t));
+			let e = m();
+			n(i, e > 1 ? (t - 1) / (e - 1) : 0);
+		} else i.style.removeProperty("--stretch"), n(i, 0);
+	}), F(() => [
+		r.value,
+		s.value.length,
+		i.value,
+		f.value
+	], () => {
+		f.value && r.value && S(() => g.refresh());
+	}, { immediate: !0 }), {
+		dragEnabled: f,
+		drag: g
+	};
+}
+//#endregion
+//#region src/components/tabs/composables/useTabResponsive.ts
+function R(e) {
+	let { responsive: t, options: n, model: r } = e, i = p(() => {
+		let e = t();
+		return e === !1 ? null : e === !0 ? {} : e;
+	}), a = p(() => i.value?.breakpoint ?? "640px"), o = p(() => i.value?.desktopOptions ?? n.value), s = k(!0), c = null;
+	function l(e) {
+		"currentTarget" in e && e.currentTarget && e.currentTarget !== c || (s.value = e.matches);
+	}
+	let u = p(() => {
+		if (!i.value) return r.value;
+		let e = o.value;
+		return e.some((e) => e.value === r.value) ? r.value : e.find((e) => !e.disabled)?.value;
+	}), d = p(() => i.value ? o.value : n.value), f = p(() => i.value?.ariaLabel ?? n.value.find((e) => e.value === r.value)?.label ?? "Select"), m = p(() => !!i.value && !s.value), h = !1;
+	function g() {
+		if (c?.removeEventListener("change", l), c = null, !h || !i.value || typeof window > "u" || !window.matchMedia) {
+			s.value = !0;
+			return;
+		}
+		c = window.matchMedia(`(min-width: ${a.value})`), s.value = c.matches, c.addEventListener("change", l);
+	}
+	return F([i, a], g), D(() => {
+		h = !0, g();
+	}), T(() => {
+		h = !1, c?.removeEventListener("change", l), c = null;
+	}), {
+		responsiveCfg: i,
+		breakpoint: a,
+		desktopOptions: o,
+		isDesktop: s,
+		stripValue: u,
+		stripOptions: d,
+		mobileAriaLabel: f,
+		showMobileSelect: m
+	};
+}
+//#endregion
+//#region src/components/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
+var z = [
+	"role",
+	"aria-label",
+	"aria-orientation",
+	"data-motion"
+], B = [
+	"role",
+	"tabindex",
+	"disabled",
+	"onClick"
+], V = /* @__PURE__ */ y({
+	__name: "SegmentedTabs",
+	props: /*@__PURE__*/ b({
+		options: {},
+		ariaLabel: {},
+		variant: { default: "pill" },
+		semantics: {},
+		activation: { default: "automatic" },
+		orientation: { default: "horizontal" },
+		responsive: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		motion: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(t) {
+		function n(e, t) {
+			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
+		}
+		let l = t, d = r(() => l.motion), y = P(t, "modelValue"), b = k(null), S = k(null), T = k([]), D = p(() => l.variant === "underline"), F = p(() => l.orientation === "vertical"), V = p(() => l.semantics === "tabs" || !l.semantics && D.value);
+		function H(e) {
+			return !D.value && !Q(e.value) && !e.disabled && "glass-capsule-hover";
+		}
+		let { responsiveCfg: U, stripValue: W, stripOptions: G, mobileAriaLabel: K, showMobileSelect: q } = R({
+			responsive: () => l.responsive,
+			options: p(() => l.options),
+			model: y
+		}), J = u({
+			options: G,
+			model: p({
+				get: () => W.value ?? void 0,
+				set: (e) => {
+					e != null && (y.value = e);
+				}
+			}),
+			role: p(() => V.value ? "tablist" : "group"),
+			vertical: F,
+			activation: p(() => l.activation),
+			containerRef: b,
+			indicatorRef: S,
+			buttonRefs: T,
+			deform: p(() => D.value ? "mark" : "plate"),
+			onSelect: (e, t) => {
+				let n = T.value[t];
+				n && ne(n);
+			}
+		}), { select: Y, rovingTabindex: X, singleSliderStyle: ee } = J, Z = J.onKeydown, Q = (e) => J.isSelected(e);
+		E(() => {
+			T.value = [];
+		});
+		let { dragEnabled: $, drag: te } = L({
+			indicatorRef: S,
+			isVertical: F,
+			isUnderline: D,
+			draggable: () => d.armed.value,
+			stripOptions: G,
+			buttonRefs: T,
+			model: y
+		});
+		function ne(e) {
+			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			e.getAnimations().forEach((e) => e.cancel());
+			let t = n("--spring-dock", "ease"), r = n("--scale-press-sm", "");
+			e.animate([
+				{ transform: "scale(1)" },
+				{
+					transform: `scale(${r})`,
+					offset: .4
+				},
+				{ transform: "scale(1)" }
+			], {
+				duration: 220,
+				easing: t
+			});
+		}
+		function re(e) {
+			typeof e == "string" && (y.value = e);
+		}
+		return (n, r) => N(q) ? (O(), h("div", {
+			key: 0,
+			class: C(N(e)("segmented-tabs__mobile w-fit", l.class))
+		}, [v(N(o), {
+			"model-value": y.value,
+			"onUpdate:modelValue": re
+		}, {
+			default: I(() => [v(N(c), {
+				"aria-label": l.ariaLabel ?? N(K),
+				"data-control-target": "",
+				class: C(N(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", N(U)?.triggerClass))
+			}, {
+				default: I(() => [v(N(a))]),
+				_: 1
+			}, 8, ["aria-label", "class"]), v(N(i), null, {
+				default: I(() => [(O(!0), h(f, null, A(t.options, (e) => (O(), m(N(s), {
+					key: e.value,
+					value: e.value,
+					disabled: e.disabled
+				}, {
+					default: I(() => [_(M(e.label), 1)]),
+					_: 2
+				}, 1032, ["value", "disabled"]))), 128))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["model-value"])], 2)) : (O(), h("div", {
+			key: 1,
+			ref_key: "containerRef",
+			ref: b,
+			role: V.value ? "tablist" : "group",
+			"aria-label": l.ariaLabel,
+			"aria-orientation": V.value ? F.value ? "vertical" : "horizontal" : void 0,
+			"data-motion": N(d).dataMotion.value,
+			style: w(N(d).hostStyle.value),
+			class: C(N(e)("segmented-tabs", `segmented-tabs--${t.variant}`, F.value && "segmented-tabs--vertical", !D.value && "glass-capsule-track", l.class)),
+			onKeydown: r[0] ||= (...e) => N(Z) && N(Z)(...e)
+		}, [g("div", {
+			ref_key: "indicatorRef",
+			ref: S,
+			"aria-hidden": "true",
+			class: C([
+				"segmented-indicator",
+				"segmented-indicator--js",
+				D.value ? "paper-ink-mark" : "glass-capsule",
+				N($) && "glass-drag-grabbable",
+				N($) && N(te).dragging.value && "glass-drag-lift"
+			]),
+			style: w(N(ee))
+		}, null, 6), (O(!0), h(f, null, A(N(G), (e, t) => (O(), h("button", x({
+			key: e.value,
+			type: "button",
+			ref_for: !0,
+			ref: (e) => {
+				e && (T.value[t] = e);
+			},
+			class: "segmented-tab",
+			role: V.value ? "tab" : void 0,
+			tabindex: N(X)(t)
+		}, { ref_for: !0 }, {
+			...Q(e.value) ? { "data-active": "" } : {},
+			...V.value ? {
+				"aria-selected": Q(e.value) ? "true" : "false",
+				"aria-controls": e.controls || void 0
+			} : { "aria-pressed": Q(e.value) ? "true" : "false" }
+		}, {
+			disabled: e.disabled,
+			class: [e.disabled && "is-disabled", H(e)],
+			onClick: (n) => N(Y)(e.value, t)
+		}), [j(n.$slots, "option", {
+			option: e,
+			active: Q(e.value)
+		}, () => [_(M(e.label), 1)])], 16, B))), 128))], 46, z));
+	}
+});
+//#endregion
+export { V as t };

package/dist/tabs.d.ts

@@ -1 +1 @@
-export * from "./components/tabs";
+export * from "./components/tabs/index.js";