@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/slider-Cxuj_W_H.js

@@ -1,151 +0,0 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./useMotionAxis-DCCXMC-i.js";
-import { t as n } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t as r } from "./useTouchGate-BlegwvwL.js";
-import { t as i } from "./useDragVelocity-BWcNMCux.js";
-import { i as a } from "./dockContext-d-WpJN2Z.js";
-import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createVNode as u, defineComponent as d, mergeProps as f, onBeforeUnmount as p, onMounted as m, openBlock as h, renderList as g, unref as _, useAttrs as v, useTemplateRef as y, withCtx as b } from "vue";
-import { SliderRange as x, SliderRoot as S, SliderThumb as C, SliderTrack as w, useForwardPropsEmits as T } from "reka-ui";
-import { cva as E } from "class-variance-authority";
-//#region src/components/dock/composables/useDockHold.ts
-function D(e, t = {}) {
-	let n = a(), r = t.enabled ?? (() => !0), i = !1;
-	function o() {
-		!r() || i || !n || (n.keepOpen(), i = !0);
-	}
-	function s() {
-		!i || !n || (n.release(), i = !1);
-	}
-	function c() {
-		s(), !(typeof window > "u") && (window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c));
-	}
-	function l() {
-		o(), !(typeof window > "u") && (window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c), window.addEventListener("pointerup", c), window.addEventListener("pointercancel", c));
-	}
-	let u = null;
-	return m(() => {
-		u = e(), u && (u.addEventListener("pointerdown", l), u.addEventListener("touchstart", l, { passive: !0 }));
-	}), p(() => {
-		u && (u.removeEventListener("pointerdown", l), u.removeEventListener("touchstart", l)), typeof window < "u" && (window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c)), s();
-	}), { isHeld: n?.held };
-}
-//#endregion
-//#region src/components/slider/Slider.vue
-var O = /* @__PURE__ */ n(/* @__PURE__ */ d({
-	__name: "Slider",
-	props: {
-		defaultValue: {},
-		modelValue: {},
-		disabled: { type: Boolean },
-		orientation: {},
-		dir: {},
-		inverted: { type: Boolean },
-		min: {},
-		max: {},
-		step: {},
-		minStepsBetweenThumbs: {},
-		thumbAlignment: {},
-		asChild: { type: Boolean },
-		as: {},
-		name: {},
-		required: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		variant: {},
-		size: {},
-		keepDockOpen: {
-			type: Boolean,
-			default: !0
-		},
-		motion: {}
-	},
-	emits: ["update:modelValue", "valueCommit"],
-	setup(n, { emit: d }) {
-		let E = n, O = d, A = s(() => E.variant ?? "standard"), j = s(() => E.size ?? "md"), M = s(() => E.keepDockOpen), N = T(s(() => {
-			let { class: e, variant: t, size: n, keepDockOpen: r, motion: i, ...a } = E;
-			return a.thumbAlignment ||= "contain", a;
-		}), O), P = a(), F = y("sliderRootRef");
-		function I() {
-			let e = F.value;
-			return e ? e instanceof HTMLElement ? e : e.$el ?? null : null;
-		}
-		D(I, { enabled: () => M.value });
-		let L = t(() => E.motion);
-		i({ host: () => L.armed.value ? I() : null });
-		let R = r();
-		function z(e) {
-			let t = I(), n = e.touches[0];
-			!t || !n || R.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
-		}
-		function B(e) {
-			R.handleScrollCheck(e);
-		}
-		function V() {
-			R.handleTouchEnd();
-		}
-		m(() => {
-			let e = I();
-			e && (e.addEventListener("touchstart", z, { passive: !1 }), e.addEventListener("touchmove", B, { passive: !0 }), e.addEventListener("touchend", V, { passive: !0 }));
-		}), p(() => {
-			let e = I();
-			e && (e.removeEventListener("touchstart", z), e.removeEventListener("touchmove", B), e.removeEventListener("touchend", V));
-		});
-		let H = s(() => P?.held.value === !0), U = s(() => R.isActive.value);
-		return v(), m(() => {}), (t, r) => (h(), c(_(S), f({
-			"data-slot": "slider",
-			ref_key: "sliderRootRef",
-			ref: F,
-			class: _(e)(_(k)({
-				variant: A.value,
-				size: j.value
-			}), E.class),
-			"data-variant": A.value,
-			"data-size": j.value,
-			"data-held": H.value || void 0,
-			"data-touch-active": U.value || void 0,
-			"data-motion": _(L).dataMotion.value,
-			style: _(L).hostStyle.value
-		}, _(N)), {
-			default: b(() => [u(_(w), { class: "slider-track" }, {
-				default: b(() => [u(_(x), { class: "slider-range glass-liquid-fill" })]),
-				_: 1
-			}), (h(!0), l(o, null, g(n.modelValue, (e, n) => (h(), c(_(C), {
-				key: n,
-				"aria-label": t.$attrs["aria-label"] ?? void 0,
-				class: "slider-thumb glass-specular-track touch-hit-area"
-			}, null, 8, ["aria-label"]))), 128))]),
-			_: 1
-		}, 16, [
-			"class",
-			"data-variant",
-			"data-size",
-			"data-held",
-			"data-touch-active",
-			"data-motion",
-			"style"
-		]));
-	}
-}), [["__scopeId", "data-v-9b927330"]]), k = E("glass-slider focus-ring relative flex w-full touch-none select-none items-center transition-colors", {
-	variants: {
-		variant: {
-			standard: "",
-			spectrum: ""
-		},
-		size: {
-			sm: "",
-			md: "",
-			lg: ""
-		}
-	},
-	defaultVariants: {
-		variant: "standard",
-		size: "md"
-	}
-});
-//#endregion
-export { O as n, k as t };

package/dist/stacked-icons.d.ts

@@ -1 +0,0 @@
-export * from "./components/stacked-icons";

package/dist/stacked-icons.js

@@ -1,98 +0,0 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
-//#region src/components/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
-var g = {
-	key: 1,
-	style: { zIndex: 0 }
-}, _ = /* @__PURE__ */ s({
-	__name: "StackedIconGroup",
-	props: {
-		items: {},
-		maxVisible: { default: 3 },
-		orientation: { default: "horizontal" },
-		reversed: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "md" },
-		expandOnHover: {
-			type: Boolean,
-			default: !0
-		},
-		as: { default: "div" },
-		keyFn: {}
-	},
-	setup(s) {
-		let _ = s, v = t(() => {
-			switch (_.size) {
-				case "sm": return "h-6 w-6";
-				case "md": return "h-8 w-8";
-				case "lg": return "h-10 w-10";
-			}
-		}), y = t(() => {
-			if (_.orientation === "vertical") switch (_.size) {
-				case "sm": return "-mt-(--stack-overlap-sm)";
-				case "md": return "-mt-(--stack-overlap-md)";
-				case "lg": return "-mt-(--stack-overlap-lg)";
-			}
-			switch (_.size) {
-				case "sm": return "-ml-(--stack-overlap-sm)";
-				case "md": return "-ml-(--stack-overlap-md)";
-				case "lg": return "-ml-(--stack-overlap-lg)";
-			}
-		}), b = t(() => _.items.slice(0, _.maxVisible)), x = t(() => Math.max(0, _.items.length - _.maxVisible)), S = t(() => {
-			let e = b.value.length + +(x.value > 0);
-			return Math.max(1, e - 1);
-		});
-		return (t, _) => (u(), n(p(s.as), {
-			class: c(["stacked-icon-group group/stack relative isolate flex", [s.orientation === "vertical" ? "flex-col" : "items-center", s.reversed ? s.orientation === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""]]),
-			"data-orientation": s.orientation,
-			style: l({ "--n": S.value })
-		}, {
-			default: h(() => [
-				(u(!0), i(e, null, d(b.value, (e, n) => (u(), i("div", {
-					key: s.keyFn?.(e, n) ?? n,
-					class: c([
-						v.value,
-						"stacked-icon-puck relative flex items-center justify-center rounded-pill transform-gpu",
-						n > 0 ? y.value : "",
-						s.expandOnHover && n > 0 ? "stacked-icon-puck--fan" : ""
-					]),
-					style: l({
-						zIndex: b.value.length + 1 - n,
-						"--i": n
-					})
-				}, [f(t.$slots, "icon", {
-					item: e,
-					index: n
-				})], 6))), 128)),
-				x.value > 0 ? (u(), i("div", {
-					key: 0,
-					class: c([
-						v.value,
-						"stacked-icon-puck stacked-icon-overflow glass-capsule glass-atom",
-						"relative flex items-center justify-center rounded-pill text-xs font-semibold text-muted-foreground",
-						"transform-gpu",
-						y.value,
-						s.expandOnHover ? "stacked-icon-puck--fan" : ""
-					]),
-					style: l({
-						zIndex: 1,
-						"--i": b.value.length
-					}),
-					"data-cast": ""
-				}, [_[0] ||= a("span", {
-					class: "cartoon-cast",
-					"aria-hidden": "true"
-				}, null, -1), f(t.$slots, "overflow", { count: x.value }, () => [o(" +" + m(x.value), 1)])], 6)) : r("", !0),
-				x.value === 0 && t.$slots.info ? (u(), i("div", g, [f(t.$slots, "info")])) : r("", !0)
-			]),
-			_: 3
-		}, 8, [
-			"class",
-			"data-orientation",
-			"style"
-		]));
-	}
-});
-//#endregion
-export { _ as StackedIconGroup };

package/dist/styles/cards.css

@@ -1 +0,0 @@
-@layer components { [data-slot="card"]:where( [data-surface="glass"], [data-surface="cartoon"] ) { --glass-tint-strength: 8%; --glass-border-rung: color-mix(in srgb, var(--foreground) 9%, transparent); } [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-blend-mode: var(--card-field-floor-blend, screen, normal); } @media (prefers-contrast: more) { [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-blend-mode: normal; } } [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-image: var( --card-field-floor-image, radial-gradient( 60% 55% at 80% 16%, oklch(0.96 0.04 78 / 0.5), oklch(0.96 0.04 78 / 0) 72% ), radial-gradient( 120% 110% at 78% 22%, oklch(0.9 0.075 72 / 0.5), oklch(0.9 0.075 72 / 0) 70% ) ); } :where([data-paper-field]) [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-image: none; } .paper-texture { background-image: var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile); background-blend-mode: multiply; } :where(.dark) .paper-texture { background-blend-mode: screen; } .paper-grid { background-image: var(--paper-grid-texture); background-repeat: repeat; background-size: calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), var(--paper-grid-texture-size) var(--paper-grid-texture-size), var(--paper-grid-texture-size) var(--paper-grid-texture-size); background-blend-mode: multiply; } :where(.dark) .paper-grid, .dark .paper-grid { background-blend-mode: screen; } } @media (prefers-reduced-transparency: reduce) { .paper-grid { background-image: none; } } @media (prefers-reduced-motion: reduce) { .paper-grid { animation: none !important; } } [data-variant="selection"] { --selection-accent-strength: 16%; --selection-accent-strength-selected: 28%; --glass-accent-strength: var(--selection-accent-strength); } [data-variant="selection"][data-selected="true"] { --glass-accent-strength: var(--selection-accent-strength-selected); --glass-bg-resting: var(--glass-bg-floating, var(--glass-bg-resting)); } @utility cartoon-surface { border-width: 2px; box-shadow: var(--shadow-cartoon-md); translate: 0; position: relative; --motion-weight: 1; --cartoon-press-t: var(--card-press-t, 0); transition: translate var(--duration-normal) var(--ease-cartoon-punch), scale var(--duration-normal) var(--ease-cartoon-punch), box-shadow var(--duration-normal) var(--ease-standard); &:hover:not(:active):not(:disabled) { translate: var(--lift-sm) var(--lift-sm); scale: 1.015 0.985; box-shadow: var(--shadow-cartoon-lg); & .cartoon-cast { box-shadow: var(--shadow-cartoon-lg); } } &:active:not(:disabled) { scale: 1.04 0.94; } } .cartoon-cast { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-cartoon-md); --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t)); --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t)); translate: calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx)) calc(var(--cast-travel) + var(--cartoon-cast-dy)); scale: var(--cast-spread); transition: translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch), scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch), --cartoon-cast-dx var(--duration-normal) var(--ease-cartoon-punch), --cartoon-cast-dy var(--duration-normal) var(--ease-cartoon-punch); will-change: translate, scale; } .btn-punch .cartoon-cast { box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { .cartoon-surface, .cartoon-cast { --motion-weight: 0; transition: none; } } @utility veil-surface { --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength)); --veil-blur: var(--glass-blur-quiet); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-blur); backdrop-filter: var(--veil-blur); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); }

package/dist/styles/completion-seal.css

@@ -1 +0,0 @@
-.completion-seal { --seal-ink: var(--phase-complete-color, var(--color-gold)); display: inline-flex; align-items: center; justify-content: center; transform: scale(var(--seal-scale, 1)); } .completion-seal[data-best] { --seal-best: var(--color-gold-light, var(--gold-light)); --seal-ink: var(--seal-best); } .completion-seal[data-shape="disc"] { --seal-ring-delay: var(--spring-snappy-duration, 0.34s); --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2); } .completion-seal__disc { fill: var( --seal-disc-fill, color-mix(in oklab, var(--seal-ink), transparent 82%) ); stroke: none; } .completion-seal__mark { fill: none; stroke: var(--seal-ink); stroke-width: var(--seal-stroke-width, 6); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%); --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 calc(var(--metal-glow-blur) * var(--seal-glint, 0)) color-mix( in oklab, var(--seal-ink), transparent calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%) ) ); } @media (prefers-reduced-motion: no-preference) { .completion-seal[data-play] { animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s) var(--spring-bouncy) both; } .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--spring-snappy-duration, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__disc { animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__ring { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__check { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) calc( var(--seal-check-delay, 0.68s) + var(--spring-snappy-duration, 0.34s) ) both; } } @keyframes completion-seal-draw { from { --seal-draw: 0%; } to { --seal-draw: 100%; } } @keyframes completion-seal-disc-in { from { opacity: 0; } to { opacity: 1; } } @keyframes completion-seal-settle { from { --seal-scale: 0.92; } to { --seal-scale: 1; } } @keyframes completion-seal-glint { 0% { --seal-glint: 0; } 45% { --seal-glint: 1; } 100% { --seal-glint: 0; } }

package/dist/styles/dock/adaptive-legibility.css

@@ -1 +0,0 @@
-@layer components { :where(.glass-dock) { --glass-tint-source: var(--glass-tint-ink-dock); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --dock-fg-on-aurora: var(--glass-tint-ink); --muted-foreground: var(--foreground); } @container style(--glass-backdrop: light) { .glass-dock { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --dock-fg-on-aurora: var(--glass-tint-ink); } } @supports (color: contrast-color(white)) { :where(.glass-dock) { --dock-fg-on-aurora: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } @container style(--glass-backdrop: light) { .glass-dock { --dock-fg-on-aurora: contrast-color(var(--card)); } } } } @media (prefers-reduced-motion: reduce) { .glass-dock, .glass-dock[data-morphing] { --dock-reveal-blur: 0px; } }

package/dist/styles/dock/dock.css

@@ -1 +0,0 @@
-@layer components { .dock-plate { position: absolute; inset: 0; z-index: -1; pointer-events: auto; border-radius: inherit; backdrop-filter: var(--dock-surface-blur); background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting)); --dock-t: var(--dock-morph-t); --dock-plate-inset-inline: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset, 0px) ); --dock-plate-inset-block: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset-block, 0px) ); clip-path: inset( var(--dock-plate-inset-block) var(--dock-plate-inset-inline) ); } .dock-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paper-clean-texture); background-repeat: repeat; background-size: var(--paper-texture-size); opacity: var(--glass-grain-opacity); pointer-events: none; mix-blend-mode: overlay; } .dark .dock-plate::after { mix-blend-mode: soft-light; } .dock-controls { display: contents; overflow: visible; pointer-events: auto; } .glass-dock > .dock-controls { overflow-x: visible; overflow-y: visible; } [data-reserve] { pointer-events: none; } [data-reserve] > .glass-dock, [data-reserve] .dock-plate, [data-reserve] .dock-controls { pointer-events: auto; } .glass-dock.fixed { inset-inline: 0; margin-inline: auto; inline-size: max-content; width: max-content; } } @media (prefers-reduced-motion: reduce) { @layer components { .glass-dock.expanded .dock-plate, .glass-dock.always-expanded .dock-plate { --dock-t: 1; } .glass-dock.collapsed .dock-plate { --dock-t: 0; } } }

package/dist/styles/dock/layer-group.css

@@ -1 +0,0 @@
-@layer components { .dock-separator { @apply flex-shrink-0; width: 1px; height: var(--dock-separator-height); margin: 0 0.375rem; background: var(--surface-tint-15); } .glass-dock.vertical .dock-separator, .dock-layer-group.vertical .dock-separator, .dock-separator[data-orientation="vertical"] { width: var(--dock-separator-height); height: 1px; align-self: center; margin: 0.375rem 0; } .glass-dock.layout-grid .dock-separator { grid-column: 1 / -1; width: 100%; height: 1px; margin: var(--dock-layer-gap, 0.375rem) 0; align-self: center; } .dock-spacer { @apply flex-1; } .dock-layer-group { display: flex; gap: var(--dock-layer-group-gap, var(--dock-layer-gap, 0.25rem)); min-width: 0; min-height: 0; } .dock-layer-group.horizontal { flex-direction: row; align-items: stretch; } .dock-layer-group.horizontal.rail-end { flex-direction: row-reverse; } .dock-layer-group.vertical { flex-direction: column; align-items: stretch; } .dock-layer-group.vertical.rail-end { flex-direction: column-reverse; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { display: flex; flex-direction: column; flex-shrink: 0; align-self: start; min-height: max-content; gap: var(--dock-layer-rail-gap, 0.125rem); padding: var(--dock-layer-rail-padding, 0.125rem); background: var(--dock-layer-rail-bg, transparent); border-right: 1px solid var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent)); } .dock-layer-group.vertical .dock-layer-rail { flex-direction: row; border-right: none; border-bottom: 1px solid var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent)); } .dock-layer-group.horizontal.rail-end .dock-layer-rail { border-right: none; border-left: 1px solid var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent)); } .dock-layer-group.vertical.rail-end .dock-layer-rail { border-bottom: none; border-top: 1px solid var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent)); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); border: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: transparent; color: var( --dock-layer-rail-glyph, color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 78%, transparent) ); cursor: pointer; font: inherit; font-size: 0.75rem; z-index: 1; transition: background var(--dock-motion-fast), color var(--dock-motion-fast); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab:hover { background: var( --dock-layer-rail-hover, color-mix(in srgb, var(--accent) 30%, transparent) ); color: var(--dock-fg-on-aurora, var(--foreground)); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab[aria-selected="true"] { color: var(--dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground))); } :where(.glass-dock, .dock-layer-group) .dock-layer-rail [role="tab"]:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; } :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab-indicator { position: absolute; left: 0; top: 0; width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); opacity: 0; border-radius: var(--dock-layer-tab-radius, var(--radius-sm)); background: var(--dock-layer-rail-active, var(--glass-bg-floating)); transition: width var(--duration-fast) var(--spring-snappy), height var(--duration-fast) var(--spring-snappy), transform var(--duration-fast) var(--spring-snappy); pointer-events: none; } .dock-layer-group.vertical .dock-layer-rail .dock-layer-tab-indicator { width: auto; height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem)); } :where(.glass-dock, .dock-layer-group) .dock-layer-stack { position: relative; display: grid; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { grid-area: 1 / 1; display: flex; align-items: center; white-space: nowrap; gap: var(--dock-layer-gap, 0.375rem); position: absolute; inset: 0; } :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { position: relative; inset: auto; width: max-content; min-width: 0; } .dock-layer-group.vertical .dock-layer-item-host { flex-direction: column; align-items: stretch; white-space: normal; } .dock-layer-group.vertical .dock-layer-item-host.is-active { width: auto; height: max-content; } }

package/dist/styles/dock/layers.css

@@ -1 +0,0 @@
-@layer components { :where(.glass-dock, .dock-layer-group) .dock-layers { display: grid; min-width: 0; } .glass-dock[data-morphing] { --dock-live: calc( var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) + ( var(--dock-expanded-px, 0px) - var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) ) * clamp(0, var(--dock-expand-t), 1) ); --dock-size-scale: clamp( 0.06, calc(var(--dock-live) / max(var(--dock-expanded-px, 1px), 1px)), 1 ); transform-origin: center center; will-change: transform; } .glass-dock[data-morphing]:not(.vertical) { inline-size: var(--dock-expanded-px); } .glass-dock[data-morphing].vertical { block-size: var(--dock-expanded-px); } .glass-dock[data-morphing] .dock-layer-stack { --dock-expand-t: var(--dock-morph-t); } .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers { overflow-x: visible; } :where(.glass-dock, .dock-layer-group) .dock-layer, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host { transition: visibility 0s linear var(--duration-normal); } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving), :where(.glass-dock, .dock-layer-group) .dock-layer-item-host:not(.is-active):not(.is-leaving) { opacity: 0; visibility: hidden; pointer-events: none; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: visibility 0s; } :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving, :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-leaving { opacity: 0; visibility: visible; pointer-events: none; } .glass-dock[data-morphing] .dock-layer.is-leaving, .glass-dock[data-morphing] .dock-layer-item-host.is-leaving { opacity: calc(1 - var(--dock-morph-t)); } :where(.glass-dock, .dock-layer-group) .dock-layer { display: flex; align-items: center; grid-area: 1 / 1; gap: var(--dock-layer-gap, 0.375rem); } .glass-dock:not(.vertical) .dock-layer { white-space: nowrap; min-height: var(--dock-layer-height, 2.5rem); } :where(.glass-dock, .dock-layer-group) .dock-layer.is-active { position: relative; } :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active) { position: absolute; inset: 0; } .glass-dock[data-morphing] .dock-layer.is-active > *, .glass-dock[data-morphing] .dock-layer-item-host.is-active > * { --dock-stagger-window: var(--dock-stagger-window-size, 0.55); --dock-stagger-onset: 0; --child-reveal: clamp( 0, calc( (var(--dock-expand-t) - var(--dock-stagger-onset)) / var(--dock-stagger-window) ), 1 ); opacity: var(--child-reveal); scale: calc(0.82 + 0.18 * var(--child-reveal)); transform-origin: center; } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(2 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 1); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3 of *), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(3 of *) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 2); } .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5), .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 4):nth-child(-n + 5) { --dock-stagger-onset: calc(var(--dock-stagger-step) * 3); } .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers { width: 100%; } .glass-dock.expanded:not(.fit-content) .dock-layer--full { width: 100%; } .glass-dock.always-expanded { cursor: default; } .glass-dock.layout-grid { white-space: normal; } .glass-dock.layout-grid .dock-layer--full { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--dock-tile-min, 4.5rem), 1fr) ); grid-auto-rows: var(--dock-tile-min, 4.5rem); gap: var(--dock-layer-gap, 0.375rem); width: 100%; height: auto; white-space: normal; place-items: center; } .glass-dock.layout-grid .dock-layers { width: 100%; } .glass-dock.layout-grid.shape-card .dock-layer--full > * { border-radius: calc( var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem) ); } }

package/dist/styles/dock/overflow.css

@@ -1 +0,0 @@
-@layer components { .glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full { min-width: 0; overflow-x: visible; overflow-y: visible; mask-image: none; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full { overflow-x: auto; overflow-y: visible; padding: var(--dock-scroll-safe-inset); margin: calc(-1 * var(--dock-scroll-safe-inset)); scroll-padding-inline: var(--dock-scroll-gutter); scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient( to right, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full::-webkit-scrollbar { display: none; } .glass-dock.dock-overflow-wrap { white-space: normal; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem)) var(--dock-wrap-padding-inline, 0.625rem); border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); --dock-wrap-elev: calc(var(--dock-expand-t) * 100%); box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock)), 0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent), calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent); } .glass-dock.dock-overflow-wrap .dock-layer--full { flex-wrap: wrap; justify-content: center; height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); gap: var(--dock-wrap-row-gap, 0.25rem) var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem)); } .glass-dock.dock-overflow-wrap .dock-layer--summary { height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); } .glass-dock.dock-overflow-wrap .dock-separator { display: none; } .glass-dock.dock-overflow-wrap.collapsed { white-space: nowrap; } @media (pointer: coarse) { .glass-dock[data-size] { --dock-local-scale: var(--dock-mobile-scale, var(--dock-coarse-scale, 0.78)); --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-control-floor: var(--dock-touch-target, 2.75rem); --size-icon-btn: var(--dock-touch-target, 2.75rem); --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-collapsed-summary-min-size: calc( var(--dock-layer-height, 2.5rem) * 0.85 ); } } }

package/dist/styles/dock/popover.css

@@ -1 +0,0 @@
-@layer components { :root { --dock-stack-stagger: 26ms; --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1)); --dock-stack-member-size: calc(2rem * var(--dock-scale, 1)); --dock-facet-accent-strength: 48%; --dock-rail-extend-length: calc( 3 * var(--dock-stack-member-size) + 2 * var(--dock-stack-gap) ); } .dock-stack { display: inline-flex; align-items: center; } .dock-stack-core { flex: 0 0 auto; } .dock-stack-fan[popover] { margin: 0; inset: auto; border: 0; padding: calc(0.25rem * var(--dock-scale, 1)); background: transparent; overflow: visible; display: flex; gap: var(--dock-stack-gap); opacity: 0; scale: 0.92; transition: opacity var(--duration-fast) var(--ease-out), scale var(--spring-dock-duration) var(--spring-dock), overlay var(--spring-dock-duration) allow-discrete, display var(--spring-dock-duration) allow-discrete; } .dock-stack-fan[popover]:popover-open { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan[popover]:popover-open { opacity: 0; scale: 0.92; } } .dock-stack-fan.vertical { flex-direction: row; align-items: center; transform-origin: left center; } .dock-stack-fan:not(.vertical) { flex-direction: column; align-items: center; transform-origin: center bottom; } .dock-stack-fan-scroll { display: flex; gap: var(--dock-stack-gap); } .dock-stack-fan.vertical .dock-stack-fan-scroll { flex-direction: row; } .dock-stack-fan:not(.vertical) .dock-stack-fan-scroll { flex-direction: column; } .dock-stack-fan[data-wrap] .dock-stack-fan-scroll { flex-wrap: wrap; max-inline-size: calc( var(--dock-stack-member-size) * 3 + var(--dock-stack-gap) * 2 + calc(0.5rem * var(--dock-scale, 1)) ); } .dock-stack-fan .dock-stack-member { flex: 0 0 auto; inline-size: var(--dock-stack-member-size); block-size: var(--dock-stack-member-size); background: var(--glass-bg-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent); opacity: 0; scale: 0.7; transition: opacity var(--duration-fast) var(--ease-out) calc(var(--dock-stack-stagger) * var(--i, 0)), scale var(--spring-dock-duration) var(--spring-dock) calc(var(--dock-stack-stagger) * var(--i, 0)), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .dock-stack-fan:popover-open .dock-stack-member { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan:popover-open .dock-stack-member { opacity: 0; scale: 0.7; } } .dark .dock-stack-fan .dock-stack-member { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-stack-member:hover { background: var(--dock-control-hover-bg, var(--glass-bg-resting)); color: var(--dock-fg-on-aurora, var(--foreground)); } .dock-stack-fan .dock-stack-member.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); color: var(--dock-fg-on-aurora, var(--foreground)); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-stack-member.is-active { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } .dock-stack-fan .dock-stack-member svg { inline-size: 0.875rem; block-size: 0.875rem; flex-shrink: 0; } .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.3)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); } .dark .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.4)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-facet-chip.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-facet-chip.is-active { box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } @media (prefers-reduced-motion: reduce) { .dock-stack-fan[popover] { scale: 1; transition: opacity var(--duration-fast) linear, overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } .dock-stack-fan .dock-stack-member { scale: 1; transition: opacity var(--duration-fast) linear, background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } } }

package/dist/styles/dock/shape.css

@@ -1 +0,0 @@
-@layer components { .glass-dock { border-radius: calc( var(--dock-shape-from, var(--radius-dock)) + (var(--dock-shape-to, var(--radius-dock)) - var(--dock-shape-from, var(--radius-dock))) * var(--dock-expand-t) ); } .glass-dock { --dock-shape-clip: var(--dock-shape-clip-to, none); clip-path: var(--dock-shape-clip); } .glass-dock[data-morphing] { --dock-shape-clip: var(--dock-shape-clip-from, none); } .glass-dock[data-morphing]:where(.expanded, .always-expanded) { --dock-shape-clip: var(--dock-shape-clip-to, none); } .glass-dock[data-morphing]:not(.vertical) { scale: var(--dock-size-scale, 1) 1; } .glass-dock[data-morphing].vertical { scale: 1 var(--dock-size-scale, 1); } .glass-dock[data-morphing]:not(.vertical) > .dock-persistent, .glass-dock[data-morphing]:not(.vertical) > .dock-layers { scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1; will-change: transform; } .glass-dock[data-morphing].vertical > .dock-persistent, .glass-dock[data-morphing].vertical > .dock-layers { scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06)); will-change: transform; } .glass-dock { --motion-weight: 1; } @media (prefers-reduced-motion: reduce) { .glass-dock { --motion-weight: 0; } } }

package/dist/styles/dock/shell.css

@@ -1 +0,0 @@
-@layer components { .glass-dock { --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.2); --dock-surface-blur: var(--glass-blur-resting); --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5); --dock-collapsed-hover-scale: var(--scale-hover-dock); --dock-stagger-window-size: 0.4; --dock-stagger-step: 0.08; --dock-card-radius: var(--radius-dock-card); --dock-tile-min: 4.5rem; scale: 1; position: relative; --glass-backdrop: light; contain: layout style; display: inline-flex; align-items: center; white-space: nowrap; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock)); } .dark .glass-dock { --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.30) brightness(1.14); } .glass-dock { overflow: visible; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { overflow-x: visible; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; } .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar, .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar { display: none; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.vertical { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--dock-layer-gap, 0.375rem); white-space: normal; width: auto; height: auto; max-block-size: var(--dock-max-block-size); padding: var(--dock-padding-block, 0.375rem); border-radius: var(--radius-dock); transition: box-shadow var(--dock-motion-standard), transform var(--dock-motion-resize), scale var(--dock-motion-resize); } .glass-dock.vertical:hover, .glass-dock.vertical:active, .glass-dock.vertical[data-held] { will-change: transform; } .glass-dock.vertical { padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem)); } .glass-dock.vertical .dock-plate { background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-dock, var(--glass-border-wash)); } .glass-dock.vertical.shape-pill { border-radius: var(--radius-pill); } .glass-dock.vertical.shape-rounded { border-radius: var(--radius-xl); } .glass-dock.vertical.shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } .glass-dock:not(.vertical).shape-rounded { border-radius: var(--radius-xl); } .glass-dock:not(.vertical).shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } @supports (corner-shape: superellipse(2)) { .glass-dock:not(.vertical).shape-card { corner-shape: var(--corner-shape-bigdock); } } .glass-dock:where(.fixed) { z-index: var(--z-dock); } .dock-inline { margin: 0 auto; } .dock-sticky { position: sticky; top: 0; z-index: var(--z-dock); margin: 0 auto; } }

package/dist/styles/dock-controls/icon-button.css

@@ -1 +0,0 @@
-@layer components { @property --dock-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } .dock-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; scale: 1; width: var(--dock-control-size, var(--size-icon-btn)); height: var(--dock-control-size, var(--size-icon-btn)); padding: var(--dock-icon-padding, 0); cursor: pointer; border: none; background: transparent; border-radius: var(--dock-control-radius, var(--radius-pill)); color: color-mix( in srgb, var(--dock-fg-on-aurora, var(--foreground)) calc(var(--opacity-icon-muted) * 100%), transparent ); outline: none; transition: background-color var(--dock-motion-fast), color var(--dock-motion-fast), scale var(--dock-press-spring), opacity var(--dock-motion-fast), box-shadow var(--dock-motion-fast); --glass-btn-press-t: var(--dock-press-t, 0); filter: brightness(calc(1 - var(--dock-press-t, 0) * 0.04)); &:hover:not(:disabled) { background: var( --dock-icon-hover-bg, var(--dock-control-hover-bg) ); color: var(--btn-hover-color, var(--foreground)); scale: var(--scale-hover-dock); } &:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } &:disabled { opacity: var(--opacity-disabled, 0.4); pointer-events: none; cursor: default; } &:focus:not(:focus-visible) { box-shadow: none; outline: none; } &:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) { background: var(--dock-active-bg); color: var(--dock-active-color); scale: var(--dock-active-scale); border: var(--dock-active-border); box-shadow: var(--dock-active-shadow); } &[data-active] { --glass-capsule-fill: var( --dock-control-active-bg, var(--glass-bg-floating) ); background: var(--glass-capsule-fill); color: var(--dock-fg-on-aurora, var(--foreground)); } } .dock-icon-button > svg { width: var(--dock-icon-glyph, 1.25rem); height: var(--dock-icon-glyph, 1.25rem); } .dock-icon-button--compact { width: var(--dock-compact-control-size, auto); height: var(--dock-compact-control-size, auto); min-width: var(--dock-compact-control-min-width, 0); padding: var(--dock-compact-control-padding, 0.25rem); } }

package/dist/styles/dock-controls.css

@@ -1 +0,0 @@
-@import "./dock-controls/icon-button.css"; @import "./dock-controls/dark-mode-toggle.css"; @import "./dock-controls/tab-button.css"; @import "./dock-controls/triggers.css"; @import "./dock-controls/touch-floor.css"; @layer components { .glass-dock.dock-items-draggable:not(.vertical) .dock-icon-button.glass-drag-lift { scale: var(--stretch, 1) calc(1 / var(--stretch, 1)); } .glass-dock.dock-items-draggable.vertical .dock-icon-button.glass-drag-lift { scale: calc(1 / var(--stretch, 1)) var(--stretch, 1); } :where( .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --glass-specular-size: var(--dock-control-specular-size, 22%); } }

package/dist/styles/dock.css

@@ -1 +0,0 @@
-@import "./dock/shell.css"; @import "./dock/shell-regions.css"; @import "./dock/dock.css"; @import "./dock/morph.css"; @import "./dock/adaptive-legibility.css"; @import "./dock/density.css"; @import "./dock/shape.css"; @import "./dock/layers.css"; @import "./dock/layer-group.css"; @import "./dock/crossfade.css"; @import "./dock/overflow.css"; @import "./dock/fisheye.css"; @import "./dock/popover.css"; @import "./dock/section.css"; @import "./dock/cta-seat.css"; @import "./dock/search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --dock-local-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --dock-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @layer components { :where( .glass-dock, .dock-layer-stack, .dock-layer-item-host, .dock-layer-tab, .dock-icon-button, .dark-mode-toggle-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --dock-motion-fast: var(--duration-fast) var(--ease-standard); --dock-motion-standard: var(--duration-normal) var(--ease-standard); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .glass-dock [data-ring-yield]:focus-visible { box-shadow: none; } .dock-icon-button:disabled, .dock-tab-button:disabled, .dock-select-trigger:disabled, .dock-dropdown-trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } }

package/dist/styles/drawer.css

@@ -1 +0,0 @@
-@property --glass-drawer-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --stage-t { syntax: "<number>"; inherits: false; initial-value: 0; } [data-stage-scrim][data-stage-flip], [data-stage-wrapper][data-stage-flip] { transition: --stage-t var(--spring-snappy-duration, 0.4s) var(--spring-snappy, ease); } :root { --drawer-handle-w: 2.25rem; --drawer-handle-h: 0.3125rem; --drawer-handle-color: var(--muted-foreground); --drawer-handle-opacity: 0.45; --drawer-handle-opacity-active: 0.85; --drawer-snap-rule-color: color-mix(in srgb, var(--border) 60%, transparent); } .glass-drawer { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-modal); display: flex; flex-direction: column; height: auto; max-height: 97vh; margin-top: 6rem; background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength)); -webkit-backdrop-filter: var(--glass-blur-overlay); backdrop-filter: var(--glass-blur-overlay); -webkit-backdrop-filter: var(--glass-blur-overlay); border: 1px solid var(--glass-border-overlay); border-bottom: 0; border-start-start-radius: var(--radius-panel); border-start-end-radius: var(--radius-panel); box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay); } .glass-drawer[data-surface="veil"] { --veil-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-blur: var(--glass-blur-quiet); background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-blur); backdrop-filter: var(--veil-blur); -webkit-backdrop-filter: var(--veil-blur); border: none; box-shadow: none; } .glass-drawer[data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-drawer[data-glass-drawer-snap-points="true"] { height: 100%; max-height: 100%; margin-top: 0; } .glass-drawer[data-glass-drawer-snap-points="true"] { --sheet-descent: clamp(0, calc(var(--stage-t) / 0.85), 1); --sheet-freeze: clamp(0, calc((var(--stage-t) - 0.85) / 0.15), 1); --sheet-crown: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength) ), var(--glass-bg-sheet) calc(var(--sheet-descent) * 100%) ); --sheet-solid: color-mix( in oklab, var(--card), var(--glass-capsule-warm) var(--glass-capsule-warm-floor, 16%) ); background: color-mix( in oklab, var(--sheet-crown), var(--sheet-solid) calc(var(--sheet-freeze) * 100%) ); --glass-blur-engage-t: calc( clamp(0, calc(var(--glass-drawer-t) / var(--glass-blur-engage-knee, 0.35)), 1) * (1 - var(--sheet-freeze)) ); -webkit-backdrop-filter: blur( calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t)) ) saturate(1.6); backdrop-filter: blur( calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t)) ) saturate(1.6); } .glass-drawer[data-glass-drawer-snap-points="true"][data-surface="opaque"] { background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-drawer[data-glass-drawer-direction="top"] { bottom: auto; top: 0; margin-top: 0; margin-bottom: 6rem; border-top: 0; border-bottom: 1px solid var(--glass-border-overlay); border-radius: 0 0 var(--radius-panel) var(--radius-panel); } .glass-drawer[data-glass-drawer-direction="left"], .glass-drawer[data-glass-drawer-direction="right"] { inset-inline: auto; inset-block: 0; height: 100%; max-height: 100%; width: min(24rem, 92vw); margin: 0; border: 1px solid var(--glass-border-overlay); } .glass-drawer[data-glass-drawer-direction="left"] { left: 0; border-left: 0; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; } .glass-drawer[data-glass-drawer-direction="right"] { right: 0; border-right: 0; border-radius: var(--radius-panel) 0 0 var(--radius-panel); } .glass-drawer-handle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-block: 0.75rem 0.5rem; touch-action: none; } .glass-drawer-grip { display: block; width: var(--drawer-handle-w); height: var(--drawer-handle-h); border-radius: var(--radius-pill); background-color: var(--drawer-handle-color); opacity: var(--drawer-handle-opacity); transition: opacity var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out); } .glass-drawer-handle[data-dragging] .glass-drawer-grip, .glass-drawer-handle:active .glass-drawer-grip, .glass-drawer:hover .glass-drawer-grip { opacity: var(--drawer-handle-opacity-active); width: calc(var(--drawer-handle-w) * 1.15); } .glass-drawer-snap-rule { height: 1px; margin-inline: calc(var(--radius-panel) * -0.5); border: 0; background-color: var(--drawer-snap-rule-color); } [data-stage-scrim] { background: color-mix( in srgb, var(--overlay-scrim-ink) calc((0.28 + clamp(0, var(--stage-t), 1) * 0.44) * 100%), transparent ); } [data-stage-wrapper][data-stage-scale] { scale: calc(1 - 0.05 * clamp(0, var(--stage-t), 1)); border-radius: calc(var(--radius-panel) * clamp(0, var(--stage-t), 1)); transform-origin: 50% 0; overflow: clip; } [data-stage-scrim][data-stage-immersive] { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media (prefers-reduced-motion: reduce) { .glass-drawer-grip { transition: none; } }

package/dist/styles/icon-chip.css

@@ -1 +0,0 @@
-@import "./glass/glass-atom.css"; @import "./glass/glass-chip.css"; :root { --icon-chip-glyph-ratio: 2.18; --icon-chip-duotone-fill: 18%; --icon-chip-plate-strength: 25%; --icon-chip-bloom-mix: 35%; --icon-chip-bloom-glow: 28%; --icon-chip-reveal-step: 60ms; } .icon-chip { --_icon-chip-floor: calc( var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio) ); inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill, 9999px); background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-plate-strength), transparent ); color: var(--icon-chip-event-color, var(--muted-foreground)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--duration-fast, 150ms) var(--ease-out); } .icon-chip__glyph { display: block; flex-shrink: 0; } .icon-chip--bare { inline-size: auto; block-size: auto; background-color: transparent; border-radius: 0; } .icon-chip--saturated { --icon-chip-plate-strength: 40%; } .icon-chip--glass { background-color: transparent; } @media (hover: hover) { .icon-chip--glass.icon-chip--bloom:hover { background-color: transparent; } } .icon-chip--duotone[data-duotone] svg, .icon-chip[data-duotone] .icon-chip__glyph { fill: color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-duotone-fill), transparent ); } @media (hover: hover) { .icon-chip--bloom:hover { background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix), transparent ); box-shadow: 0 0 0 0.25rem color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-bloom-glow), transparent ); transform: scale(var(--icon-chip-bloom-scale, 1.06)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--spring-smooth-duration) var(--spring-smooth); } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: 2; } } @media (prefers-reduced-motion: no-preference) { .icon-chip--reveal[data-reveal] { animation: icon-chip-reveal var(--spring-snappy-duration) var(--spring-snappy) both; animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step)); } } @keyframes icon-chip-reveal { from { opacity: 0; transform: scale(0.85) translateY(0.25rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .icon-chip--bloom:hover { transform: none; } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: inherit; } .icon-chip--reveal[data-reveal] { animation: none; } }

package/dist/styles/instrument-chassis.css

@@ -1 +0,0 @@
-@layer components { .instrument-chassis { position: relative; display: flex; flex-direction: column; background: var(--glass-curvature-overlay, none), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); transition: --phase-tint-amount var(--motion-duration-phase-handoff, 600ms) var(--motion-ease-standard); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); border: 1px solid var(--glass-border-wash); border-radius: var(--radius-card); box-shadow: var(--glass-shadow-quiet), inset 0 -0.5px 0 0 rgb(0 0 0 / 0.06); overflow: hidden; --phase-color: var(--muted-foreground); --phase-color-label: var(--muted-foreground); --phase-complete-color: var(--color-gold); --phase-complete-color-label: var(--color-gold-dark, var(--color-gold)); container: chassis / inline-size; } .dark .instrument-chassis { background: var(--glass-curvature-overlay-dark, var(--glass-curvature-overlay, none)), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); } .instrument-chassis::before { content: ""; position: absolute; inset: 0.5px; border-radius: calc(var(--radius-card) - 0.5px); border: 1px solid var(--surface-tint-4); pointer-events: none; z-index: 1; } .dark .instrument-chassis::before { border-color: var(--surface-tint-6); } .instrument-chassis[data-variant="spine"] { background: var(--glass-spine-vignette); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--glass-spine-border); box-shadow: var(--glass-under-shadow-spine); margin: clamp(0.5rem, 2vw, 1.25rem); } .instrument-chassis[data-variant="spine"]::before { display: none; } .instrument-chassis[data-variant="structure"] { border-color: color-mix(in oklab, var(--color-silver-dark) 55%, transparent); } .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver-light) 60%, transparent); } .dark .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver) 40%, transparent); } .instrument-chassis[data-variant="structure"] { --twin-line-catch: color-mix(in oklab, var(--color-silver-light) 50%, transparent); --twin-line-shadow: color-mix(in oklab, var(--color-silver-dark) 40%, transparent); } .instrument-chassis[data-phase="ping"] { --phase-color: var(--chart-ping, var(--viz-chebyshev)); --phase-color-label: var(--chart-ping-label, var(--chart-ping, var(--viz-chebyshev))); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="download"] { --phase-color: var(--chart-download, var(--viz-fourier)); --phase-color-label: var(--chart-download-label, var(--chart-download, var(--viz-fourier))); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="upload"] { --phase-color: var(--chart-upload, var(--viz-amber)); --phase-color-label: var(--chart-upload-label, var(--chart-upload, var(--viz-amber))); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="jitter"] { --phase-color: var(--chart-jitter, var(--viz-legendre)); --phase-color-label: var(--chart-jitter-label, var(--chart-jitter, var(--viz-legendre))); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="complete"] { --phase-color: var(--phase-complete-color); --phase-color-label: var(--phase-complete-color-label); --phase-tint-amount: var(--phase-tint-peak); } @media (prefers-reduced-motion: reduce) { .instrument-chassis { transition: none; } } .instrument-strip { position: relative; display: flex; align-items: center; gap: var(--instrument-strip-gap, 0.75rem); padding: var(--instrument-strip-padding-block, 0.875rem) var(--instrument-strip-padding-inline, 1.25rem); z-index: 2; } .instrument-dial { position: relative; display: grid; grid-template-columns: var(--instrument-dial-columns, minmax(0, 1.2fr) 1px minmax(0, 1fr)); align-items: center; gap: var(--instrument-dial-gap, 1.5rem); padding: var(--instrument-dial-padding-block, 1.5rem) var(--instrument-dial-padding-inline, 1.5rem); z-index: 2; } .instrument-control { position: relative; display: flex; align-items: center; gap: var(--instrument-control-gap, 0.5rem); padding: var(--instrument-control-padding-block, 0.875rem) var(--instrument-control-padding-inline, 1.25rem); z-index: 2; } .chassis-divider { @apply twin-line-divider; flex-shrink: 0; position: relative; background: transparent; z-index: 2; pointer-events: none; } .chassis-divider--horizontal { display: flex; flex-direction: column; height: 2px; width: 100%; } .chassis-divider--vertical { display: flex; flex-direction: row; width: 2px; height: var(--chassis-divider-vertical-height, 70%); align-self: center; justify-self: center; } .bezel-line { display: block; flex-shrink: 0; } .chassis-divider--horizontal .bezel-line { height: 1px; width: 100%; } .chassis-divider--vertical .bezel-line { width: 1px; height: 100%; } .bezel-line.top { background: var(--twin-line-catch); } .bezel-line.bottom { background: var(--twin-line-shadow); } .instrument-chassis .dial-divider { align-self: stretch; } @container chassis (max-width: 44.9375rem) { .instrument-chassis .instrument-dial { grid-template-columns: 1fr; grid-template-rows: var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr)) auto auto; min-height: var(--instrument-dial-min-height-mobile, 24rem); gap: var(--instrument-dial-gap-mobile, 1.5rem); } .instrument-chassis .instrument-dial .dial-divider, .instrument-chassis .instrument-dial .chassis-divider--vertical { flex-direction: column; width: 70%; height: 2px; margin-inline: auto; } .instrument-chassis .instrument-dial .dial-divider .bezel-line, .instrument-chassis .instrument-dial .chassis-divider--vertical .bezel-line { width: 100%; height: 1px; } } @container chassis (min-width: 45rem) { .instrument-chassis .instrument-dial { min-block-size: var( --instrument-dial-min-block-size-desktop, var(--chassis-max-block-size) ); } } }

package/dist/styles/scroll-progress-rim.css

@@ -1 +0,0 @@
-.scroll-progress-rim { position: absolute; inset: 0; border-radius: var(--scroll-progress-rim-radius, inherit); pointer-events: none; } .scroll-progress-rim__track { position: absolute; inset: 0; border: var(--scroll-progress-rim-width, 4px) solid transparent; border-radius: inherit; background: conic-gradient( from 0deg, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 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; } .scroll-progress-rim[data-coverage="bottom-edge"] .scroll-progress-rim__track { background: linear-gradient( to right, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 100% ); -webkit-mask: linear-gradient( to top, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: source-in, xor, source-over; mask: linear-gradient( to top, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: intersect, exclude, add; } .scroll-progress-rim[data-coverage="inline-end-edge"] .scroll-progress-rim__track { background: linear-gradient( to bottom, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 100% ); -webkit-mask: linear-gradient( to left, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: source-in, xor, source-over; mask: linear-gradient( to left, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: intersect, exclude, add; }

package/dist/styles/select.css

@@ -1 +0,0 @@
-:root { --select-content-max-h: min(24rem, 60dvh); } [data-slot="select-content"] { max-height: min( var(--select-content-max-h), var(--reka-popper-available-height, var(--select-content-max-h)) ); overflow-y: auto; } @layer components { .glass-control-edge { box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); } [data-slot="select-content"], [data-slot="combobox-list"] { --select-plate-alpha: 0.90; background: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-floating-tinted, var(--glass-bg-floating)), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ), transparent calc((1 - var(--select-plate-alpha)) * 100%) ); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating), var(--shadow-cartoon-lg); } .dark [data-slot="select-content"], .dark [data-slot="combobox-list"] { --select-plate-alpha: 0.94; } .glass-field-portal { position: relative; } .glass-field-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 60% at 24% 22%, oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72%), radial-gradient(64% 58% at 82% 80%, oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%), radial-gradient(60% 62% at 60% 40%, oklch(0.90 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%); } .dark .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, oklch(0.30 0.10 var(--field-h, 48) / 0.55), transparent 72%), radial-gradient(64% 58% at 82% 80%, oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%), radial-gradient(60% 62% at 60% 40%, oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%); } @supports not (color: oklch(0.9 0.08 48)) { .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72%); } .dark .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72%); } } }

package/dist/styles/tabs/segmented-tabs-drag.css

@@ -1 +0,0 @@
-.glass-drag-grabbable { cursor: grab; touch-action: none; } .glass-drag-lift { cursor: grabbing; will-change: transform; } .segmented-tabs:not(.segmented-tabs--underline):has( .segmented-indicator.glass-drag-grabbable ) .segmented-tab[aria-pressed="true"] { pointer-events: none; } .segmented-indicator.glass-drag-lift { z-index: 30; } .segmented-tabs[data-eyeglass] { --eyeglass-settled: 0.84; --eyeglass-proud: 1.12; --eyeglass-track-blur: var(--glass-blur-floating); backdrop-filter: var(--eyeglass-track-blur); -webkit-backdrop-filter: var(--eyeglass-track-blur); } .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: calc( var(--eyeglass-settled) + var(--eyeglass-live-t) * (var(--eyeglass-proud) - var(--eyeglass-settled)) ); } @media (prefers-reduced-motion: reduce) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: 1; } } @supports (backdrop-filter: url("#glass-refract")) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate.glass-lens { backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); } } .segmented-tabs[data-eyeglass] .segmented-tab[aria-pressed="true"] svg { color: var(--tab-selected-ink, var(--foreground)); }

package/dist/useConfiguratorState-Dq35N_7t.js

@@ -1,167 +0,0 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./FadingScroll-BSRLqQCx.js";
-import { i as n } from "./ConfiguratorRow-BV6zPjTM.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, reactive as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRaw as y, unref as b, withCtx as x, withModifiers as S } from "vue";
-//#region src/components/configurator/Configurator.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-aside-side", "data-gallery"], w = {
-	key: 0,
-	"data-gallery-dock": "",
-	class: "configurator-presets shrink-0 px-3 py-2"
-}, T = [
-	"data-active",
-	"aria-pressed",
-	"onClick"
-], E = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }, D = { class: "flex flex-col" }, O = {
-	key: 1,
-	class: "configurator-controls flex-1 min-h-0 overflow-visible"
-}, k = { class: "flex flex-col" }, A = {
-	key: 2,
-	class: "configurator-footer shrink-0 border-t px-3 py-2"
-}, j = /* @__PURE__ */ u({
-	__name: "Configurator",
-	props: {
-		presets: {},
-		activePreset: {},
-		layers: {},
-		activeLayer: {},
-		scrollMode: { default: "auto" },
-		size: { default: "md" },
-		asideSide: { default: "right" },
-		galleryPlacement: { default: "aside" },
-		asideWidth: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: [
-		"select-preset",
-		"select-layer",
-		"reset"
-	],
-	setup(u, { emit: m }) {
-		let h = u;
-		n(i(() => h.size));
-		let y = m, j = i(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1", "grid-rows-[auto_minmax(var(--configurator-stage-min,18rem),auto)_minmax(0,1fr)]", "min-h-0", h.class)), M = i(() => {
-			let e = {
-				"--radius-ctx": "var(--radius-panel)",
-				"--radius-inset": "var(--configurator-pad-inline)"
-			};
-			if (h.asideWidth != null) {
-				let [t, n] = Array.isArray(h.asideWidth) ? h.asideWidth : [h.asideWidth, h.asideWidth];
-				e["--configurator-aside-min"] = t, e["--configurator-aside-max"] = n;
-			}
-			return e;
-		}), N = i(() => h.asideSide === "left" ? "lg:border-r lg:border-l-0" : "lg:border-l"), P = i(() => h.scrollMode !== "never");
-		return (n, i) => (p(), s("section", {
-			"data-slot": "configurator",
-			"data-aside-side": u.asideSide,
-			"data-gallery": u.galleryPlacement,
-			class: d(j.value),
-			style: f(M.value)
-		}, [
-			n.$slots.presets || u.presets && u.presets.length > 0 ? (p(), s("div", w, [_(n.$slots, "presets", {
-				presets: u.presets,
-				activePreset: u.activePreset
-			}, () => [l(b(t), {
-				axis: "x",
-				class: "configurator-gallery-track flex gap-2 scrollbar-hidden",
-				role: "group",
-				"aria-label": "Presets"
-			}, {
-				default: x(() => [(p(!0), s(r, null, g(u.presets, (t) => (p(), s("button", {
-					key: t.key,
-					type: "button",
-					"data-preset-tile": "",
-					"data-active": t.key === u.activePreset || void 0,
-					"aria-pressed": t.key === u.activePreset,
-					class: d(b(e)("configurator-preset-chip glass-capsule glass-capsule-hover shadow-cartoon focus-ring shrink-0 px-3 py-1 text-xs font-medium text-foreground", t.key === u.activePreset && "is-active")),
-					onClick: S((e) => y("select-preset", t.key), ["stop"])
-				}, v(t.label), 11, T))), 128))]),
-				_: 1
-			})])])) : o("", !0),
-			c("div", E, [_(n.$slots, "stage")]),
-			c("aside", { class: d(b(e)("configurator-aside flex min-h-0 min-w-0 flex-col border-t lg:border-t-0", N.value)) }, [P.value ? (p(), a(b(t), {
-				key: 0,
-				axis: "y",
-				class: "configurator-controls flex-1 min-h-0 scrollbar-thin"
-			}, {
-				default: x(() => [_(n.$slots, "controls", {
-					layers: u.layers,
-					activeLayer: u.activeLayer,
-					selectLayer: (e) => y("select-layer", e)
-				}, () => [c("div", D, [_(n.$slots, "default")])])]),
-				_: 3
-			})) : (p(), s("div", O, [_(n.$slots, "controls", {
-				layers: u.layers,
-				activeLayer: u.activeLayer,
-				selectLayer: (e) => y("select-layer", e)
-			}, () => [c("div", k, [_(n.$slots, "default")])])])), n.$slots.footer ? (p(), s("div", A, [_(n.$slots, "footer", { reset: () => y("reset") })])) : o("", !0)], 2)
-		], 14, C));
-	}
-});
-//#endregion
-//#region src/components/configurator/useConfiguratorState.ts
-function M(e) {
-	let t = y(e);
-	if (typeof structuredClone != "function") throw Error("[glass-ui:configurator] structuredClone is unavailable in this runtime. Pass a custom clone via ConfiguratorStateOptions.clone for environments without structured-clone support.");
-	try {
-		return structuredClone(t);
-	} catch (e) {
-		throw Error("[glass-ui:configurator] structuredClone failed: " + (e instanceof Error ? e.message : String(e)) + ". Preset values must be structured-cloneable (no functions, symbols, DOM nodes, or class instances). Pass a custom clone via ConfiguratorStateOptions.clone if the data shape requires it.");
-	}
-}
-function N(e, t) {
-	return JSON.stringify(e) === JSON.stringify(t);
-}
-function P(e) {
-	let t = e.clone ?? M, n = e.equals ?? N, r = e.presets, a = e.cloneMode ?? "commit-on-write", o = e.initialPreset ?? (r.length > 0 ? r[0].key : void 0), s = o ? r.find((e) => e.key === o) : void 0, c = m(s ? t(s.config) : {}), l = h(o), u = a === "per-preset" ? Object.fromEntries(r.map((e) => [e.key, t(e.config)])) : null, d = i(() => l.value), f = i(() => {
-		let e = l.value;
-		if (!e) return !1;
-		let t = r.find((t) => t.key === e);
-		return t ? !n(c, t.config) : !1;
-	});
-	function p(e) {
-		return r.find((t) => t.key === e);
-	}
-	function g(e) {
-		let t = c, n = e;
-		for (let e of Object.keys(t)) e in n || delete t[e];
-		for (let e of Object.keys(n)) t[e] = n[e];
-	}
-	function _(e) {
-		u && (u[e] = t(c));
-	}
-	function v(e) {
-		let n = p(e);
-		if (n) if (a === "per-preset" && u) {
-			let t = l.value;
-			t && t !== e && t in u && _(t), l.value = e, g(u[e]);
-		} else l.value = e, g(t(n.config));
-	}
-	function y() {
-		let e = l.value;
-		if (!e) return;
-		let n = p(e);
-		n && (a === "per-preset" && u ? (u[e] = t(n.config), g(u[e])) : g(t(n.config)));
-	}
-	function b(e = 1) {
-		if (r.length === 0) return;
-		let t = l.value, n = t ? r.findIndex((e) => e.key === t) : -1, i = r.length, a = r[(n + e + i) % i];
-		v(a.key);
-	}
-	return {
-		config: c,
-		activePreset: d,
-		isDirty: f,
-		selectPreset: v,
-		resetCurrent: y,
-		cyclePreset: b,
-		getPreset: p
-	};
-}
-//#endregion
-export { j as n, P as t };