@mkbabb/glass-ui 5.0.0 → 7.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/spa-view.d.ts

@@ -1 +0,0 @@
-export * from "./components/spa-view";

package/dist/spa-view.js

@@ -1,46 +0,0 @@
-import { KeepAlive as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, defineComponent as a, openBlock as o, renderSlot as s, resolveDynamicComponent as c, withCtx as l } from "vue";
-//#endregion
-//#region src/components/spa-view/SpaView.vue
-var u = /* @__PURE__ */ a({
-	__name: "SpaView",
-	props: {
-		view: {},
-		is: {},
-		max: {},
-		include: {},
-		exclude: {},
-		transition: { default: "fade" },
-		viewKey: {}
-	},
-	setup(a) {
-		let u = a, d = n(() => u.view ?? u.is), f = n(() => {
-			if (u.viewKey !== void 0) return u.viewKey;
-			let e = d.value;
-			return typeof e == "string" ? e : e?.name ?? "spa-view";
-		});
-		return (n, u) => (o(), r(t, {
-			name: a.transition,
-			mode: "out-in"
-		}, {
-			default: l(() => [d.value ? (o(), r(e, {
-				key: 0,
-				max: a.max,
-				include: a.include,
-				exclude: a.exclude
-			}, [(o(), r(c(d.value), {
-				key: f.value,
-				class: "spa-view-active"
-			}))], 1032, [
-				"max",
-				"include",
-				"exclude"
-			])) : (o(), i("div", {
-				key: f.value,
-				class: "spa-view-active"
-			}, [s(n.$slots, "default")]))]),
-			_: 3
-		}, 8, ["name"]));
-	}
-});
-//#endregion
-export { u as SpaView };

package/dist/springPresets-h5VKJQqG.js

@@ -1,58 +0,0 @@
-//#region src/composables/motion/springPresets.ts
-var e = [
-	{
-		name: "smooth",
-		response: .58,
-		dampingFraction: .8,
-		comment: "The settle register — patient entrances, fades and scale-ins: weighty, with a whisper of life (+1.5%), never a dead stop."
-	},
-	{
-		name: "snappy",
-		response: .48,
-		dampingFraction: .74,
-		comment: "The control register — the quick-but-weighty position morph (tab indicator, progress fill, the reveal bloom, page-build): arrives at half-clock with a small gooey overshoot (+3.2%)."
-	},
-	{
-		name: "bouncy",
-		response: .6,
-		dampingFraction: .6,
-		comment: "The playful register — the emphatic one-shot (dialog and success entrances, the completion seal): flowing, not flicking, with a soft 9.5% overshoot and extra inertia."
-	},
-	{
-		name: "gentle",
-		response: .82,
-		dampingFraction: 1,
-		comment: "The gentle register — the patient critically-damped settle (the --ease-convergence alias): a slow inertial arrival at ζ=1.0, so it never overshoots (the convergence reveal depends on it)."
-	},
-	{
-		name: "dock",
-		response: .3,
-		dampingFraction: .82,
-		comment: "The dock register — the brisk iOS liquid morph: response 0.30, damping 0.82, a tiny overshoot (~1.2%). Powers the dock expand/collapse and everything inside it. Apple's liquid is brisk with coupled channels — weight is not slowness."
-	},
-	{
-		name: "press",
-		response: .2,
-		dampingFraction: .8,
-		comment: "The press register — the interactive tap-press: a hair of inertial carry (sub-200ms) with a tiny alive rebound (+1.5%); the interruptible re-seat keeps the gesture continuous."
-	},
-	{
-		name: "transient",
-		response: .62,
-		dampingFraction: .9,
-		comment: "The transient register — the center-seed materialize bloom (Toast and Notification): a deep scale-from with a near-critically-damped settle (~+0.15% overshoot, no flick), reaching 90% at ~0.34s and settling by ~0.46s. Consumed by the --enter-transient-* register."
-	},
-	{
-		name: "eyeglass",
-		response: .36,
-		dampingFraction: .64,
-		comment: "The eyeglass register — the iOS tab-pill loupe travel: snappy-class speed (response 0.36) with dock-class give (ζ 0.64, ~7.3% overshoot) for a leading-edge liquid arrival. The release is edge-asymmetric — a faster lead recovery (~117ms) than trail lag (~270ms)."
-	}
-];
-function t(t) {
-	let n = e.find((e) => e.name === t);
-	if (!n) throw Error(`Unknown spring preset: ${t}`);
-	return n;
-}
-//#endregion
-export { t as n, e 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/card-scroll.css

@@ -1 +0,0 @@
-.card-header--shrink { --card-title-shrink-ratio: 0.695; --title-collapse-scale: var(--card-title-shrink-ratio); --card-shrink-ease: var(--ease-out, linear); --card-header-bg: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); position: relative; transform-origin: top; } .card-header--shrink::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--card-header-bg); opacity: 0; border-radius: inherit; pointer-events: none; } .card-header--shrink > * { position: relative; z-index: 1; } .card-header--shrink > [data-slot="card-description"] { transform-origin: top; will-change: transform, opacity; } @keyframes title-collapse { to { scale: var(--title-collapse-scale, 0.82); } } @keyframes card-header-shrink { from { transform: translateY(0); } to { transform: translateY(-0.5rem); } } @keyframes card-header-bg-lift { from { opacity: 0; } to { opacity: 1; } } @keyframes card-desc-shrink { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0); } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .card-header--shrink { animation: card-header-shrink var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; } .card-header--shrink::before { animation: card-header-bg-lift var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; } .card-header--shrink > [data-slot="card-title"] { animation: title-collapse var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; transform-origin: left top; } .card-header--shrink > [data-slot="card-description"] { animation: card-desc-shrink var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 80px; } } }

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/configurator.css

@@ -1 +0,0 @@
-:root { --configurator-pad-inline: 1rem; --configurator-section-gap: 0.5rem; } .configurator-section-label { font-family: var(--font-text); font-size: var(--configurator-section-size); line-height: var(--type-leading-body); font-weight: var(--configurator-section-weight); letter-spacing: var(--type-tracking-tight); color: var(--foreground); } .configurator-presets { padding-block: var(--configurator-preset-row-weight); } .configurator-presets .configurator-gallery-track, .configurator-presets [role="group"] { gap: var(--configurator-preset-row-gap); } .configurator-layer { border-color: var(--configurator-divider-section); background-color: var(--configurator-section-tint); border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } .configurator-layer + .configurator-layer { margin-block-start: var(--configurator-section-gap); } .configurator-layer-trigger { padding-inline: var(--configurator-pad-inline); } .configurator-layer-body { padding-inline: var(--configurator-pad-inline); } .configurator-layer-body[data-dividers] > * + * { border-color: var(--configurator-divider); } .configurator-aside, .configurator-presets, .configurator-footer { border-color: var(--configurator-divider); } [data-slot="configurator"] > [data-gallery-dock] { grid-row: 1; grid-column: 1; } [data-slot="configurator"] > .configurator-stage { grid-row: 2; grid-column: 1; } [data-slot="configurator"] > .configurator-aside { grid-row: 3; grid-column: 1; } @media (min-width: 1024px) { [data-slot="configurator"] { grid-template-columns: minmax(0, 1fr) minmax( var(--configurator-aside-min, 280px), var(--configurator-aside-max, 360px) ); grid-template-rows: auto minmax(0, 1fr); } [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] { grid-row: 1; grid-column: 2; } [data-slot="configurator"][data-gallery="aside"] > .configurator-stage { grid-row: 1 / span 2; grid-column: 1; } [data-slot="configurator"][data-gallery="aside"] > .configurator-aside { grid-row: 2; grid-column: 2; } [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] { grid-row: 1; grid-column: 1 / span 2; } [data-slot="configurator"][data-gallery="top"] > .configurator-stage { grid-row: 2; grid-column: 1; } [data-slot="configurator"][data-gallery="top"] > .configurator-aside { grid-row: 2; grid-column: 2; } } [data-slot="configurator"] > [data-gallery-dock] { border-color: var(--configurator-divider); } [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] { border-bottom-width: 1px; } @media (min-width: 1024px) { [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] { border-bottom-width: 1px; } } .configurator-preset-tile { inline-size: clamp(160px, 22vw, 232px); border-radius: var(--radius-card); } [data-slot="configurator"][data-gallery="top"] .configurator-preset-tile { inline-size: clamp(200px, 20vw, 288px); } .configurator-preset-well { background-size: cover; background-position: center; image-rendering: auto; } .configurator-preset-well.is-loading { background-image: linear-gradient( 100deg, color-mix(in oklab, var(--card) 84%, transparent) 30%, color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%, color-mix(in oklab, var(--card) 84%, transparent) 70% ); background-size: 200% 100%; animation: configurator-preset-shimmer 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .configurator-preset-well.is-loading { animation: none; } } @keyframes configurator-preset-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .configurator-preset-tile.is-active { box-shadow: inset 0 0 0 2px var(--focus-ring-color), var(--shadow-cartoon-lg); } .configurator-preset-chip { border-radius: var(--radius-pill); } .configurator-preset-chip.is-active { --glass-capsule-fill: var(--glass-bg-quiet); } @media (min-width: 1024px) { [data-slot="configurator"][data-aside-side="left"] > .configurator-stage { grid-column: 2; } [data-slot="configurator"][data-aside-side="left"] > .configurator-aside { grid-column: 1; } [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"] > [data-gallery-dock] { grid-column: 1; } }

package/dist/styles/dialog-placement.css

@@ -1 +0,0 @@
-:where([data-slot="dialog-content"][data-placement]) { position: fixed; z-index: var(--z-modal); } :where([data-slot="dialog-content"][data-placement="top"]) { left: 0; right: 0; top: 0; } :where([data-slot="dialog-content"][data-placement="bottom"]) { left: 0; right: 0; bottom: 0; } :where([data-slot="dialog-content"][data-placement="left"]) { top: 0; bottom: 0; left: 0; height: 100%; width: 75%; } :where([data-slot="dialog-content"][data-placement="right"]) { top: 0; bottom: 0; right: 0; height: 100%; width: 75%; } @media (min-width: 40rem) { :where([data-slot="dialog-content"][data-placement="left"]), :where([data-slot="dialog-content"][data-placement="right"]) { max-width: 24rem; } }

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/crossfade.css

@@ -1 +0,0 @@
-@layer components { .dock-crossfade { position: relative; display: grid; } .dock-crossfade > .dock-face { grid-area: 1 / 1; position: absolute; inset: 0; opacity: 0; will-change: opacity; } .dock-crossfade > .dock-face.is-active { position: relative; inset: auto; inline-size: max-content; min-inline-size: 0; opacity: 1; } .dock-crossfade > .dock-face.is-leaving { position: absolute; inset: 0; pointer-events: none; visibility: visible; } .dock-crossfade[data-crossfading] > .dock-face.is-active { opacity: var(--dock-t); } .dock-crossfade[data-crossfading] > .dock-face.is-leaving { opacity: calc(1 - var(--dock-t)); } .dock-crossfade > .dock-face > .dock-face-content { display: flex; align-items: center; gap: var(--dock-layer-gap, 0.375rem); white-space: nowrap; block-size: 100%; } :where(.glass-dock, .dock-layer-group).vertical .dock-crossfade > .dock-face > .dock-face-content { flex-direction: column; align-items: stretch; white-space: normal; } :where(.glass-dock, .dock-layer-group).vertical .dock-crossfade > .dock-face.is-active { inline-size: auto; block-size: max-content; } .glass-dock[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content { clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0); will-change: clip-path; } .glass-dock.vertical[data-morphing] .dock-crossfade > .dock-face.is-active > .dock-face-content { clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0); } @media (prefers-reduced-motion: reduce) { .dock-crossfade > .dock-face { will-change: auto; } } }

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/fisheye.css

@@ -1 +0,0 @@
-@property --dock-px { syntax: "<number>"; inherits: true; initial-value: -99999; } @layer components { .glass-dock[data-dock-fisheye] { transition: --dock-px var(--dock-fisheye-duration) linear; } @media (hover: hover) and (pointer: fine) { .glass-dock[data-dock-fisheye]:not([data-dock-overflow]) .dock-fisheye-item { --d: calc(var(--x, 0) - var(--dock-px, -99999)); scale: calc( 1 + var(--dock-fisheye-amp, 0.6) * exp( -1 * pow(var(--d), 2) / (2 * pow(var(--dock-fisheye-sigma, 64), 2)) ) ); transform-origin: center bottom; } } @media (prefers-reduced-motion: reduce) { .glass-dock[data-dock-fisheye] { transition: none; } .glass-dock[data-dock-fisheye] .dock-fisheye-item { scale: 1; } } }

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/morph.css

@@ -1 +0,0 @@
-@layer components { .glass-dock.expanded, .glass-dock.always-expanded { --dock-expand-t: 1; } .glass-dock.collapsed { --dock-expand-t: 0; } .glass-dock.expanded[data-morphing]:not([data-pane-swap]), .glass-dock.always-expanded[data-morphing]:not([data-pane-swap]) { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing]:not([data-pane-swap]) { --dock-expand-t: calc(1 - var(--dock-morph-t)); } .glass-dock { --dock-reveal-blur: 0px; } .glass-dock[data-morphing] { --dock-reveal-blur: 1.25px; filter: blur( calc( var(--dock-reveal-blur) * clamp(0, calc((0.5 - var(--dock-expand-t)) / 0.5), 1) ) ); } .glass-dock:not(.vertical) .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-resting)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock.vertical .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-wash)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock:not(.vertical):not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-block, 0.375rem), var(--dock-collapsed-padding, 0px) ); padding-block: var(--dock-padding-block, 0.375rem); padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.vertical:not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-inline, 0.5rem), var(--dock-collapsed-padding, 0px) ); padding-inline: var(--dock-padding-inline, 0.5rem); padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.collapsed { cursor: pointer; justify-content: center; box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed)); } .glass-dock.collapsed .dock-layer--summary { min-width: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); min-block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); height: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); aspect-ratio: 1; justify-content: center; } .glass-dock[data-morphing] .dock-layer--summary { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed .dock-layer--summary:empty { min-width: 0; inline-size: 0; padding: 0; margin: 0; border: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers { margin-inline-start: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent { display: grid; place-items: center; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * { place-self: center; } .glass-dock.collapsed .dock-persistent svg, .glass-dock.collapsed .dock-layer--summary svg { min-width: 1rem; min-height: 1rem; } .glass-dock.collapsed:hover { box-shadow: var(--shadow-dock-override, var(--shadow-dock)); } .glass-dock.collapsed:hover .dock-plate { background: var(--glass-bg-wash); border-color: var(--glass-border-floating); } .glass-dock.collapsed:hover:not([data-morphing]) { scale: var(--dock-collapsed-hover-scale); will-change: transform; } .glass-dock[data-held] .dock-plate { background: color-mix( in oklab, var(--glass-bg-floating, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-floating, var(--glass-border-resting)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }

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/section.css

@@ -1 +0,0 @@
-@layer components { .dock-section { display: contents; } .dock-section-zone { display: inline-flex; align-items: center; gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem)); } .glass-dock.vertical .dock-section-zone { flex-direction: column; align-items: stretch; } .dock-section-zone--core { flex: 0 0 auto; } .dock-section-zone--nav { flex: 0 0 auto; } .dock-section-zone--section { flex: 0 1 auto; min-inline-size: 0; } }

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/dark-mode-toggle.css

@@ -1 +0,0 @@
-@layer components { .dark-mode-toggle-button { width: var(--dark-mode-toggle-size, 2.25rem); height: var(--dark-mode-toggle-size, 2.25rem); min-width: var(--dark-mode-toggle-size, 2.25rem); min-height: var(--dark-mode-toggle-size, 2.25rem); max-width: var(--dark-mode-toggle-size, 2.25rem); max-height: var(--dark-mode-toggle-size, 2.25rem); aspect-ratio: 1; padding: var(--dark-mode-toggle-padding, 0.375rem); transition: opacity var(--dock-motion-standard), background-color var(--dock-motion-standard), box-shadow var(--dock-motion-fast); & > svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } &:hover, &:focus { background: var(--surface-tint-10); opacity: 1; outline: none; } &:focus-visible { box-shadow: var(--dock-ring); } &[data-size="sm"] { --dark-mode-toggle-size: 1.75rem; --dark-mode-toggle-padding: 0.25rem; } &[data-size="md"] { --dark-mode-toggle-size: 2.25rem; --dark-mode-toggle-padding: 0.375rem; } &[data-size="lg"] { --dark-mode-toggle-size: 2.75rem; --dark-mode-toggle-padding: 0.5rem; } &[data-size="control"] { --dark-mode-toggle-size: var(--control-size, 2.25rem); --dark-mode-toggle-padding: var(--control-icon-padding, 0.375rem); } } .dark-mode-toggle-button[data-size="dock"], .glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ) { --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn)); --dark-mode-toggle-padding: calc( ( var(--dock-control-size, var(--size-icon-btn)) - var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)) ) / 2 ); } .glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ) > svg { width: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)); height: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)); } }

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/glass/progress-rail.css

@@ -1 +0,0 @@
-@utility glass-progress-rail { && { height: var(--progress-rail-h, 3px); border-radius: 0; } --progress-track: var( --progress-rail-track, color-mix(in srgb, var(--foreground) 8%, transparent) ); --progress-fill: var(--progress-rail-fill, var(--primary)); && > * { border-radius: 0; box-shadow: inset calc(-1 * var(--progress-rail-glow-x, 4px)) 0 var(--progress-rail-glow-blur, 8px) calc(-1 * var(--progress-rail-glow-spread, 2px)) color-mix( in srgb, hsl(0 0% 100%) var(--progress-rail-glow-strength, 55%), transparent ); } }

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/menu.css

@@ -1 +0,0 @@
-@layer components { .glass-menu-row { --menu-row-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --menu-row-lift: -1px; min-block-size: max(2rem, var(--touch-target, 2.75rem)); transition: translate var(--spring-smooth-duration) var(--spring-smooth); translate: 0 0; } .glass-menu-row:hover:not([data-disabled]), .glass-menu-row:focus:not([data-disabled]), .glass-menu-row[data-highlighted]:not([data-disabled]), .glass-menu-row[data-state="open"]:not([data-disabled]) { background: var(--menu-row-bg); color: var(--accent-foreground); } .glass-menu-row:hover:not([data-disabled]) { translate: 0 var(--menu-row-lift); } .glass-menu-section { --menu-section-font: var(--font-mono); --menu-section-size: var(--type-caption); --menu-section-color: var(--muted-foreground); --menu-section-tracking: var(--type-tracking-caps); --menu-section-hairline: var(--border-hairline); --menu-section-gap: 0.375rem; display: block; margin-block-start: var(--menu-section-gap); padding-block-start: var(--menu-section-gap); box-shadow: var(--menu-section-hairline); } .glass-menu-section-label, .glass-menu-section > [data-menu-section-label] { font-family: var(--menu-section-font); font-size: var(--menu-section-size); color: var(--menu-section-color); text-transform: uppercase; letter-spacing: var(--menu-section-tracking); } } @media (prefers-reduced-motion: reduce) { .glass-menu-row { --menu-row-lift: 0px; transition: none; } } .dropdown-menu-content, .dropdown-sub-content { font-family: var(--dropdown-menu-font, inherit); padding: var(--panel-padding); --glass-bg-rung: var(--dropdown-menu-bg, var(--glass-bg-floating)); --glass-border-rung: var(--dropdown-menu-border, var(--glass-border-floating)); box-shadow: var( --dropdown-menu-shadow, var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating) ); }

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/segmented-tabs.css

@@ -1 +0,0 @@
-.segmented-tabs { --bouncy-track-trim: 0.1875rem; --bouncy-slider-radius: var(--radius-tab); --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim)); --stretch: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--bouncy-track-trim); border-radius: var(--bouncy-track-radius); } .segmented-tabs--vertical { display: inline-flex; flex-direction: column; grid-auto-flow: unset; grid-auto-columns: unset; align-items: stretch; --bouncy-slider-radius: var(--radius-strip); --radius-ctx: var(--bouncy-track-radius); --radius-inset: var(--bouncy-track-trim); } .segmented-tabs--vertical .segmented-indicator { border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } @media (min-width: 640px) { .segmented-tabs { --bouncy-track-trim: 0.25rem; } } .segmented-indicator { position: absolute; z-index: 0; inset-block: var(--bouncy-track-trim); border-radius: var(--bouncy-slider-radius); transform-origin: center; scale: calc(var(--tab-blob, 1) * var(--stretch)) calc(var(--tab-blob, 1) / var(--stretch)); } .segmented-indicator__plate { position: absolute; inset: 0; border-radius: inherit; transform-origin: center; transform: scaleY(var(--eyeglass-y, 1)); } .segmented-indicator { isolation: isolate; } @supports (mix-blend-mode: plus-lighter) { .segmented-indicator::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in srgb, var(--glass-accent, transparent) 55%, transparent), transparent 70% ); mix-blend-mode: plus-lighter; opacity: var(--tab-flood-t, 0); } } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: var(--bouncy-track-trim); scale: calc(var(--tab-blob, 1) / var(--stretch)) calc(var(--tab-blob, 1) * var(--stretch)); } @media (prefers-reduced-motion: no-preference) { .segmented-indicator { transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch); } } .segmented-indicator--js { transition: transform var(--tab-indicator-duration) var(--spring-eyeglass), width var(--tab-indicator-duration) var(--spring-eyeglass), height var(--tab-indicator-duration) var(--spring-eyeglass), scale var(--tab-indicator-duration) var(--spring-eyeglass), opacity var(--duration-fast) ease; } @media (min-width: 640px) { .segmented-indicator { inset-block: 0.25rem; } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: 0.25rem; } } .segmented-tab { position: relative; z-index: 10; border: none; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease, scale var(--spring-snappy-duration) var(--spring-snappy) 60ms; scale: 1; translate: 0; } @media (min-width: 640px) { .segmented-tab { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } } .segmented-tab[aria-pressed="true"], .segmented-tab[aria-selected="true"] { color: var(--foreground); } .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] { scale: calc(1 + 0.06 * var(--motion-weight)); } .segmented-tab.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: blur(0.5px); } .segmented-tabs--underline { display: flex; grid-auto-flow: unset; grid-auto-columns: unset; gap: 0.25rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical { flex-direction: column; align-items: stretch; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { anchor-name: --gl-tab-active; } .segmented-tabs--underline::before { content: ""; position: absolute; position-anchor: --gl-tab-active; inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px)); inset-inline-start: anchor(left); inset-inline-end: anchor(right); block-size: var(--paper-ink-mark-weight, 2px); background: var(--paper-ink-mark-color, var(--foreground)); border-radius: var(--radius-sm); transform-origin: center; scale: var(--stretch) 1; } .segmented-tabs--underline.segmented-tabs--vertical::before { inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px)); inset-inline-end: auto; block-size: auto; inline-size: var(--paper-ink-mark-weight, 2px); scale: 1 var(--stretch); } @media (prefers-reduced-motion: no-preference) { .segmented-tabs--underline::before { transition: inset var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy); } } @supports not (position-anchor: --x) { .segmented-tabs--underline::before { display: none; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] { border-bottom: none; border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } } .segmented-tabs--underline .segmented-tab { padding: 0.375rem 0.75rem; font-size: var(--type-subheading); letter-spacing: var(--type-tracking-display); border-radius: 0.25rem; transition: color var(--duration-fast) ease; } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab { text-align: start; } .segmented-tabs--underline .segmented-tab:hover { color: color-mix(in oklab, var(--foreground) 70%, transparent); }

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%); } } }