@xsynaptic/sonic-ui 0.1.0 → 0.2.0

package/dist/dev/lib/render.js

@@ -0,0 +1,27 @@
+//#region src/lib/render.ts
+function requireChild(root, selector, child) {
+	const found = root.querySelector(selector);
+	if (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);
+	return found;
+}
+function template(html, root) {
+	const parsed = document.createElement("template");
+	parsed.innerHTML = html;
+	return () => {
+		const clone = document.importNode(parsed.content, true).firstElementChild;
+		if (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);
+		return clone;
+	};
+}
+function attachSlot(host) {
+	const slot = document.createElement("slot");
+	host.attachShadow({
+		mode: "open",
+		slotAssignment: "manual"
+	}).append(slot);
+	return slot;
+}
+
+//#endregion
+export { attachSlot, requireChild, template };
+//# sourceMappingURL=render.js.map

package/dist/dev/lib/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","names":[],"sources":["../../../src/lib/render.ts"],"sourcesContent":["export function requireChild<Child extends Element>(\n\troot: Element,\n\tselector: string,\n\tchild: new () => Child,\n): Child {\n\tconst found = root.querySelector(selector);\n\tif (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);\n\n\treturn found;\n}\n\nexport function template<Root extends Element>(html: string, root: new () => Root): () => Root {\n\tconst parsed = document.createElement('template');\n\n\tparsed.innerHTML = html;\n\n\treturn () => {\n\t\tconst clone = document.importNode(parsed.content, true).firstElementChild;\n\t\tif (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);\n\n\t\treturn clone;\n\t};\n}\n\n// Only the nodes the element assigns render, so a framework's own children stay put, bare text included\nexport function attachSlot(host: HTMLElement): HTMLSlotElement {\n\tconst slot = document.createElement('slot');\n\n\thost.attachShadow({ mode: 'open', slotAssignment: 'manual' }).append(slot);\n\n\treturn slot;\n}\n"],"mappings":";AAAA,SAAgB,aACf,MACA,UACA,OACQ;CACR,MAAM,QAAQ,KAAK,cAAc,QAAQ;CACzC,IAAI,EAAE,iBAAiB,QAAQ,MAAM,IAAI,MAAM,6BAA6B,UAAU;CAEtF,OAAO;AACR;AAEA,SAAgB,SAA+B,MAAc,MAAkC;CAC9F,MAAM,SAAS,SAAS,cAAc,UAAU;CAEhD,OAAO,YAAY;CAEnB,aAAa;EACZ,MAAM,QAAQ,SAAS,WAAW,OAAO,SAAS,IAAI,CAAC,CAAC;EACxD,IAAI,EAAE,iBAAiB,OAAO,MAAM,IAAI,MAAM,8BAA8B,KAAK,MAAM;EAEvF,OAAO;CACR;AACD;AAGA,SAAgB,WAAW,MAAoC;CAC9D,MAAM,OAAO,SAAS,cAAc,MAAM;CAE1C,KAAK,aAAa;EAAE,MAAM;EAAQ,gBAAgB;CAAS,CAAC,CAAC,CAAC,OAAO,IAAI;CAEzE,OAAO;AACR"}

package/dist/dev/lib/taper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taper.js","names":[],"sources":["../../../src/lib/taper.ts"],"sourcesContent":["// Positions run 0 to 1 along the travel\nexport interface Taper {\n\tposition: (value: number) => number;\n\tvalue: (position: number) => number;\n}\n\nexport function clampUnit(fraction: number): number {\n\treturn Math.min(1, Math.max(0, fraction));\n}\n\nexport function linearTaper(min: number, max: number): Taper {\n\tconst range = max - min;\n\n\treturn {\n\t\tposition: (value) => (range > 0 ? clampUnit((value - min) / range) : 0),\n\t\tvalue: (position) => min + clampUnit(position) * range,\n\t};\n}\n\nexport function logTaper(min: number, max: number): Taper | undefined {\n\tif (min <= 0 || max <= min) return undefined;\n\n\tconst span = Math.log(max / min);\n\n\treturn {\n\t\tposition: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),\n\t\tvalue: (position) => min * Math.exp(clampUnit(position) * span),\n\t};\n}\n\n// JUCE's skew: a power curve through `midpoint` at half the travel\nexport function skewTaper(min: number, max: number, midpoint: number): Taper | undefined {\n\tconst range = max - min;\n\tconst proportion = (midpoint - min) / range;\n\n\tif (proportion === 0.5 || !(proportion > 0 && proportion < 1)) return undefined;\n\n\tconst skew = Math.log(0.5) / Math.log(proportion);\n\n\treturn {\n\t\tposition: (value) => clampUnit((value - min) / range) ** skew,\n\t\tvalue: (position) => min + range * clampUnit(position) ** (1 / skew),\n\t};\n}\n"],"mappings":";AAMA,SAAgB,UAAU,UAA0B;CACnD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;AACzC;AAEA,SAAgB,YAAY,KAAa,KAAoB;CAC5D,MAAM,QAAQ,MAAM;CAEpB,OAAO;EACN,WAAW,UAAW,QAAQ,IAAI,WAAW,QAAQ,OAAO,KAAK,IAAI;EACrE,QAAQ,aAAa,MAAM,UAAU,QAAQ,IAAI;CAClD;AACD;AAEA,SAAgB,SAAS,KAAa,KAAgC;CACrE,IAAI,OAAO,KAAK,OAAO,KAAK,OAAO;CAEnC,MAAM,OAAO,KAAK,IAAI,MAAM,GAAG;CAE/B,OAAO;EACN,WAAW,UAAU,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,IAAI;EAC1E,QAAQ,aAAa,MAAM,KAAK,IAAI,UAAU,QAAQ,IAAI,IAAI;CAC/D;AACD;AAGA,SAAgB,UAAU,KAAa,KAAa,UAAqC;CACxF,MAAM,QAAQ,MAAM;CACpB,MAAM,cAAc,WAAW,OAAO;CAEtC,IAAI,eAAe,MAAO,EAAE,aAAa,KAAK,aAAa,IAAI,OAAO;CAEtE,MAAM,OAAO,KAAK,IAAI,EAAG,IAAI,KAAK,IAAI,UAAU;CAEhD,OAAO;EACN,WAAW,UAAU,WAAW,QAAQ,OAAO,KAAK,KAAK;EACzD,QAAQ,aAAa,MAAM,QAAQ,UAAU,QAAQ,MAAM,IAAI;CAChE;AACD"}

package/dist/dev/lib/write-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"write-attribute.js","names":[],"sources":["../../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CAEA,QAAQ,aAAa,MAAM,KAAK;AACjC"}

package/dist/skins/ivory.css

@@ -1,8 +1,8 @@
 /* Ink derived from a pale cap would vanish against it */
 @layer sonic {
 	.sonic-skin-ivory {
-		--sonic-cap: oklch(85.5% 0.0281 215deg);
-		--sonic-cap-hover: oklch(90.5% 0.024 215deg);
-		--sonic-mark: oklch(18.5% 0.0099 237deg);
+		--sonic-cap: oklch(85.5% 0.024 85deg);
+		--sonic-cap-hover: oklch(90.5% 0.02 85deg);
+		--sonic-mark: oklch(18.5% 0.012 60deg);
 	}
 }

package/dist/skins/slate.css

@@ -1,9 +1,9 @@
 @layer sonic {
 	.sonic-skin-slate {
-		--sonic-lit: #22d3ee;
-		--sonic-unlit: #1e293b;
-		--sonic-cap: #334155;
-		--sonic-cap-hover: #475569;
+		--sonic-lit: oklch(79.7% 0.134 212deg);
+		--sonic-unlit: oklch(27.9% 0.037 260deg);
+		--sonic-cap: oklch(37.2% 0.039 257deg);
+		--sonic-cap-hover: oklch(44.6% 0.037 257deg);
 		--sonic-dial-ring-ratio: 0.12;
 		--sonic-dial-gap-ratio: 0.07;
 	}

package/dist/styles/controls.css

@@ -1,4 +1,3 @@
-/* The material first; every control's sheet reads it */
 @import './material.css';
 @import './dial.css';
 @import './key.css';

package/dist/styles/dial.css

@@ -1,5 +1,4 @@
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-dial, .sonic-dial) {
 		--_sonic-dial-size: var(--sonic-dial-size, 2.5rem);
 	}
@@ -29,8 +28,6 @@
 
 		/* Centred on six o'clock */
 		--_sonic-dial-sweep: var(--sonic-dial-sweep, 300deg);
-
-		/* Absolute, so a larger knob gets more ridges rather than wider ones */
 		--_sonic-dial-ridge-pitch: var(--sonic-dial-ridge-pitch, 4px);
 
 		/* Read by the element as px */
@@ -84,7 +81,7 @@
 		--_sonic-dial-lit: var(--_sonic-lit-off);
 	}
 
-	[disabled] > .sonic-dial {
+	:disabled > .sonic-dial {
 		--_sonic-dial-lit: var(--_sonic-lit-disabled);
 
 		cursor: default;
@@ -140,14 +137,15 @@
 		--_sonic-dial-lit-to: calc(
 			max(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
 		);
+		--_sonic-dial-ring-shade: radial-gradient(
+			closest-side,
+			rgb(0 0 0 / 55%) calc(100% - var(--_sonic-dial-ring-width)),
+			transparent calc(100% - var(--_sonic-dial-ring-width) * 0.4),
+			rgb(0 0 0 / 25%) 100%
+		);
 
 		background:
-			radial-gradient(
-				closest-side,
-				rgb(0 0 0 / 55%) calc(100% - var(--_sonic-dial-ring-width)),
-				transparent calc(100% - var(--_sonic-dial-ring-width) * 0.4),
-				rgb(0 0 0 / 25%) 100%
-			),
+			var(--_sonic-dial-ring-shade),
 			conic-gradient(
 				from var(--_sonic-dial-start),
 				var(--_sonic-unlit) var(--_sonic-dial-lit-from),
@@ -185,7 +183,7 @@
 		border-radius: 50%;
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(4 * var(--_sonic-unit))
-				rgb(0 0 0 / 65%),
+				var(--_sonic-drop-shade),
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
 
@@ -236,7 +234,6 @@
 		border-radius: 50%;
 		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
 
-		/* Evenly shaded, since any offset would turn with the knob */
 		&::before {
 			--_sonic-dial-pointer-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-pointer-ratio));
 
@@ -259,7 +256,30 @@
 		}
 	}
 
-	[disabled] > .sonic-dial > .sonic-dial-pointer::before {
+	:disabled > .sonic-dial > .sonic-dial-pointer::before {
 		background: var(--_sonic-etch);
 	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-dial-notches, .sonic-dial-ring, .sonic-dial-modulation, .sonic-dial-pointer) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-dial-ring {
+			--_sonic-dial-ring-shade: none;
+		}
+
+		.sonic-dial-modulation {
+			--_sonic-dial-modulation: CanvasText;
+		}
+
+		.sonic-dial-cap::before,
+		.sonic-dial-cap::after {
+			display: none;
+		}
+
+		.sonic-dial-pointer::before {
+			box-shadow: none;
+		}
+	}
 }

package/dist/styles/key.css

@@ -1,5 +1,4 @@
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-key, .sonic-key) {
 		--_sonic-key-size: var(--sonic-key-size, 2rem);
 	}
@@ -8,7 +7,6 @@
 		display: contents;
 	}
 
-	/* Hides the icon, which has no size before upgrade */
 	sonic-key:not(:defined, [hidden]) {
 		display: block;
 		visibility: hidden;
@@ -18,7 +16,6 @@
 		overflow: hidden;
 	}
 
-	/* The button is the well; the cap is the part that moves */
 	.sonic-key {
 		--_sonic-key-gap-ratio: var(--sonic-key-gap-ratio, 0);
 		--_sonic-key-radius-ratio: var(--sonic-key-radius-ratio, 0.2);
@@ -34,7 +31,7 @@
 		--_sonic-key-shift: calc(var(--_sonic-key-depth) / -2);
 		--_sonic-key-scale: 1;
 		--_sonic-key-drop: calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y))
-			calc(2 * var(--_sonic-unit)) rgb(0 0 0 / 65%);
+			calc(2 * var(--_sonic-unit)) var(--_sonic-drop-shade);
 		--_sonic-key-glow: transparent;
 
 		position: relative;
@@ -60,14 +57,14 @@
 	}
 
 	.sonic-key:active:where(:not(:disabled)),
-	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) {
+	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
 		--_sonic-key-shift: calc(var(--_sonic-key-depth) / 2);
 		--_sonic-key-scale: var(--_sonic-key-press-scale);
 		--_sonic-key-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
-			var(--_sonic-unit) rgb(0 0 0 / 65%);
+			var(--_sonic-unit) var(--_sonic-drop-shade);
 	}
 
-	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) {
+	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
 		--_sonic-key-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
 
 		color: var(--_sonic-lit);
@@ -121,17 +118,40 @@
 	}
 
 	/* Engraving under the glow keeps a lit icon's edge */
-	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) .sonic-key-cap > svg {
+	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-key-cap
+		> svg {
 		filter: var(--_sonic-engraving)
 			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
 	}
 
-	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *)
+	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
 		.sonic-key-cap
 		> [data-sonic-when='off'],
-	.sonic-key:not([aria-pressed='true'], :where([momentary][pressed]) > *)
+	.sonic-key:not([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
 		.sonic-key-cap
 		> [data-sonic-when='on'] {
 		display: none;
 	}
+
+	@media (forced-colors: active) {
+		.sonic-key-cap > svg {
+			filter: none;
+			mask: none;
+		}
+
+		.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+			--_sonic-skirt: var(--_sonic-lit);
+			--_sonic-face: var(--_sonic-lit);
+			--_sonic-ink: HighlightText;
+
+			&:disabled {
+				--_sonic-ink: ButtonFace;
+			}
+
+			& .sonic-key-cap > svg {
+				filter: none;
+			}
+		}
+	}
 }

package/dist/styles/material.css

@@ -10,7 +10,7 @@
 		.sonic-slider,
 		.sonic-slider-readout
 	) {
-		--_sonic-unlit: var(--sonic-unlit, #27272a);
+		--_sonic-unlit: var(--sonic-unlit, oklch(27.4% 0.005 286deg));
 
 		/* Degrees left of overhead */
 		--_sonic-light-tilt: var(--sonic-light-tilt, 17deg);
@@ -20,20 +20,18 @@
 	}
 
 	:is(.sonic-dial, .sonic-key, .sonic-meter, .sonic-segmented-segment, .sonic-slider) {
-		--_sonic-lit: var(--sonic-lit, #f59e0b);
+		--_sonic-lit: var(--sonic-lit, oklch(76.9% 0.165 70deg));
 	}
 
 	.sonic-meter {
-		--_sonic-hot: var(--sonic-hot, #f97316);
-		--_sonic-clip: var(--sonic-clip, #ef4444);
+		--_sonic-hot: var(--sonic-hot, oklch(70.5% 0.187 48deg));
+		--_sonic-clip: var(--sonic-clip, oklch(63.7% 0.208 25deg));
 	}
 
 	:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider) {
-		--_sonic-cap: var(--sonic-cap, #3f3f46);
-		--_sonic-cap-hover: var(--sonic-cap-hover, #52525b);
+		--_sonic-cap: var(--sonic-cap, oklch(37% 0.012 286deg));
+		--_sonic-cap-hover: var(--sonic-cap-hover, oklch(44.2% 0.015 286deg));
 		--_sonic-focus: var(--sonic-focus, oklch(90% 0.23 128deg));
-
-		/* Derived from the cap, so a reskinned cap brings its marks along */
 		--_sonic-ink: var(--sonic-mark, color-mix(in oklab, var(--_sonic-cap) 30%, #fff));
 		--_sonic-etch: color-mix(in oklab, var(--_sonic-ink) 30%, transparent);
 		--_sonic-lit-disabled: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit));
@@ -66,6 +64,7 @@
 				rgb(255 255 255 / 12%);
 		--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit))
 			color-mix(in oklab, var(--_sonic-cap) 40%, #000);
+		--_sonic-drop-shade: rgb(0 0 0 / 65%);
 		--_sonic-focus-shadow: 0 0 transparent;
 		--_sonic-focus-glow: 0 0 max(4px, 3 * var(--_sonic-unit)) max(1px, 0.5 * var(--_sonic-unit))
 			color-mix(in oklab, var(--_sonic-focus) 60%, transparent);
@@ -120,7 +119,6 @@
 		--_sonic-cap: var(--_sonic-cap-hover);
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 
-		/* Painted only in forced colours; inset so it adds no size */
 		outline: 2px solid transparent;
 		outline-offset: -2px;
 	}
@@ -136,7 +134,6 @@
 		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
 
 		box-sizing: border-box;
-		display: grid;
 		place-items: center;
 		min-inline-size: calc(1.75 * var(--_sonic-readout-size));
 		block-size: var(--_sonic-readout-size);
@@ -173,7 +170,9 @@
 			display 120ms allow-discrete,
 			overlay 120ms allow-discrete;
 
+		/* Grid only while open; a closed readout left rendered is placed against a filtered ancestor, and engines keep the flip it took there */
 		&:popover-open {
+			display: grid;
 			opacity: 1;
 			translate: 0;
 
@@ -226,4 +225,53 @@
 			field-sizing: content;
 		}
 	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-dial, .sonic-key, .sonic-meter, .sonic-segmented-segment, .sonic-slider) {
+			--_sonic-lit: Highlight;
+			--_sonic-unlit: GrayText;
+		}
+
+		/* Tokens rather than properties, so a state rule that restates one still paints in system colours */
+		:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider) {
+			--_sonic-ink: ButtonText;
+			--_sonic-etch: ButtonText;
+			--_sonic-lit-disabled: GrayText;
+			--_sonic-skirt: ButtonFace;
+			--_sonic-face: ButtonFace;
+			--_sonic-sheen: none;
+			--_sonic-face-shadow: none;
+			--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit)) var(--_sonic-ink);
+			--_sonic-drop-shade: transparent;
+			--_sonic-focus-glow: 0 0 transparent;
+		}
+
+		/* Dimmed is a hint, not a state; the value stays readable */
+		:is(.sonic-dial, .sonic-slider) {
+			--_sonic-lit-off: Highlight;
+		}
+
+		:is(
+			:disabled > :is(.sonic-dial, .sonic-slider),
+			.sonic-key:disabled,
+			.sonic-segmented-segment:disabled
+		) {
+			--_sonic-ink: GrayText;
+			--_sonic-etch: GrayText;
+		}
+
+		/* Stands in for the glow, which forced colours drop; inset, it merged with the cap's rim */
+		:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider):focus-visible {
+			outline-offset: 2px;
+		}
+
+		:is(.sonic-dial-cap, .sonic-key-cap, .sonic-segmented-cap, .sonic-slider-cap) {
+			color: var(--_sonic-ink);
+			forced-color-adjust: none;
+		}
+
+		:is(.sonic-dial-readout, .sonic-slider-readout) {
+			border: 1px solid CanvasText;
+		}
+	}
 }

package/dist/styles/meter.css

@@ -1,6 +1,5 @@
 /* The size is the thickness */
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-meter, .sonic-meter) {
 		--_sonic-meter-size: var(--sonic-meter-size, 0.5rem);
 		--_sonic-meter-length: var(--sonic-meter-length, 8rem);
@@ -22,7 +21,6 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
-	/* Laid on its side rather than rotated, as the slider is */
 	.sonic-meter {
 		/* Absolute, so a longer meter gains segments rather than stretching them */
 		--_sonic-meter-pitch: var(--sonic-meter-segment-pitch, 4px);
@@ -46,8 +44,6 @@
 		--_sonic-meter-segment-radius: calc(
 			var(--_sonic-meter-segment) * var(--_sonic-meter-segment-radius-ratio)
 		);
-
-		/* Whole segments only, so the last one ends flush */
 		--_sonic-meter-segments: round(
 			down,
 			var(--_sonic-meter-length) - 3 * var(--_sonic-meter-inset) - var(--_sonic-meter-lens) +
@@ -62,7 +58,6 @@
 		background: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
 
-		/* Over the segments, so the lip shades them too */
 		&::after {
 			position: absolute;
 			inset: 0;
@@ -268,4 +263,29 @@
 		inline-size: var(--_sonic-meter-lens);
 		block-size: auto;
 	}
+
+	/* Takes no focus, so the whole meter opts out */
+	@media (forced-colors: active) {
+		.sonic-meter {
+			forced-color-adjust: none;
+			background: Canvas;
+
+			&::after {
+				border: 1px solid CanvasText;
+				box-shadow: none;
+			}
+		}
+
+		:is(.sonic-meter-segments, .sonic-meter-clip) {
+			background: var(--_sonic-unlit);
+		}
+
+		.sonic-meter-level {
+			background: var(--_sonic-lit);
+		}
+
+		.sonic-meter-clip::after {
+			background: Mark;
+		}
+	}
 }

package/dist/styles/screen.css

@@ -31,7 +31,6 @@
 			var(--_sonic-glass);
 		border-radius: calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio));
 
-		/* Over the content, so the lip shades the picture too */
 		&::after {
 			position: absolute;
 			inset: 0;
@@ -44,4 +43,11 @@
 				inset 0 0 calc(3 * var(--_sonic-unit)) rgb(0 0 0 / 45%);
 		}
 	}
+
+	/* The glass is forced to Canvas like the page, so only a border shows its edge */
+	@media (forced-colors: active) {
+		.sonic-screen {
+			border: 1px solid CanvasText;
+		}
+	}
 }

package/dist/styles/segmented.css

@@ -1,5 +1,4 @@
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-segmented, .sonic-segmented) {
 		--_sonic-segmented-size: var(--sonic-segmented-size, 2rem);
 	}
@@ -8,7 +7,6 @@
 		display: contents;
 	}
 
-	/* Hides the options, which have no size before upgrade */
 	sonic-segmented:not(:defined, [hidden]) {
 		display: block;
 		visibility: hidden;
@@ -34,8 +32,6 @@
 			var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio)
 		);
 		--_sonic-segmented-gap: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-gap-ratio));
-
-		/* Concentric with the well's corner */
 		--_sonic-segmented-inner-corner: max(
 			0px,
 			var(--_sonic-segmented-corner) - var(--_sonic-segmented-gap)
@@ -47,6 +43,7 @@
 		gap: var(--_sonic-segmented-gap);
 		block-size: var(--_sonic-segmented-size);
 		padding: var(--_sonic-segmented-gap);
+		touch-action: pan-y;
 		user-select: none;
 		background: linear-gradient(
 			var(--_sonic-light-fall),
@@ -61,7 +58,7 @@
 		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / -2);
 		--_sonic-segmented-scale: 1;
 		--_sonic-segmented-drop: calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y))
-			calc(2 * var(--_sonic-unit)) rgb(0 0 0 / 65%);
+			calc(2 * var(--_sonic-unit)) var(--_sonic-drop-shade);
 		--_sonic-segmented-glow: transparent;
 
 		display: grid;
@@ -77,12 +74,12 @@
 		border-radius: var(--_sonic-segmented-inner-corner);
 	}
 
-	.sonic-segmented-segment:active:where(:not(:disabled)),
+	.sonic-segmented-segment:where([data-sonic-pressed], :focus-visible:active):not(:disabled),
 	.sonic-segmented-segment[aria-checked='true'] {
 		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / 2);
 		--_sonic-segmented-scale: var(--_sonic-segmented-press-scale);
 		--_sonic-segmented-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
-			var(--_sonic-unit) rgb(0 0 0 / 65%);
+			var(--_sonic-unit) var(--_sonic-drop-shade);
 	}
 
 	.sonic-segmented-segment[aria-checked='true'] {
@@ -144,4 +141,24 @@
 		filter: var(--_sonic-engraving)
 			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
 	}
+
+	@media (forced-colors: active) {
+		.sonic-segmented-cap > * {
+			filter: none;
+		}
+
+		.sonic-segmented-segment[aria-checked='true'] {
+			--_sonic-skirt: var(--_sonic-lit);
+			--_sonic-face: var(--_sonic-lit);
+			--_sonic-ink: HighlightText;
+
+			&:disabled {
+				--_sonic-ink: ButtonFace;
+			}
+
+			& .sonic-segmented-cap > * {
+				filter: none;
+			}
+		}
+	}
 }

package/dist/styles/slider.css

@@ -1,6 +1,5 @@
 /* The size is the thickness across the travel */
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-slider, .sonic-slider) {
 		--_sonic-slider-size: var(--sonic-slider-size, 2rem);
 		--_sonic-slider-length: var(--sonic-slider-length, 8rem);
@@ -67,7 +66,7 @@
 		--_sonic-slider-lit: var(--_sonic-lit-off);
 	}
 
-	[disabled] > .sonic-slider {
+	:disabled > .sonic-slider {
 		--_sonic-slider-lit: var(--_sonic-lit-disabled);
 		--_sonic-slider-cursor: default;
 	}
@@ -156,7 +155,7 @@
 		border-radius: var(--_sonic-slider-corner);
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(3 * var(--_sonic-unit))
-				rgb(0 0 0 / 65%),
+				var(--_sonic-drop-shade),
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
 		translate: var(--_sonic-slider-offset) 0;
@@ -194,11 +193,25 @@
 		}
 	}
 
-	[disabled] > .sonic-slider > .sonic-slider-cap::after {
+	:disabled > .sonic-slider > .sonic-slider-cap::after {
 		background: var(--_sonic-etch);
 	}
 
 	[groove-press='none'] > .sonic-slider > .sonic-slider-cap {
 		cursor: var(--_sonic-slider-cursor);
 	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-slider-marks, .sonic-slider-groove) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-slider-groove {
+			box-shadow: none;
+		}
+
+		.sonic-slider-cap::after {
+			box-shadow: none;
+		}
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Native custom elements for audio interfaces: dials, sliders, keys, a segmented switch, a peak meter and a screen panel, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -28,24 +28,27 @@
     "node": ">=24.0.0"
   },
   "sideEffects": [
-    "./dist/define.js",
-    "./dist/define/*.js",
+    "./dist/*/define.js",
+    "./dist/*/define/*.js",
     "./src/define.ts",
     "./src/define/*.ts",
     "*.css"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/dev/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "import": "./dist/default/index.js"
     },
     "./define": {
-      "types": "./dist/define.d.ts",
-      "import": "./dist/define.js"
+      "types": "./dist/dev/define.d.ts",
+      "development": "./dist/dev/define.js",
+      "import": "./dist/default/define.js"
     },
     "./define/*": {
-      "types": "./dist/define/*.d.ts",
-      "import": "./dist/define/*.js"
+      "types": "./dist/dev/define/*.d.ts",
+      "development": "./dist/dev/define/*.js",
+      "import": "./dist/default/define/*.js"
     },
     "./controls.css": "./dist/styles/controls.css",
     "./material.css": "./dist/styles/material.css",
@@ -57,9 +60,7 @@
     "./slider.css": "./dist/styles/slider.css",
     "./skins/*.css": "./dist/skins/*.css"
   },
-  "imports": {
-    "#*": "./src/*"
-  },
+  "imports": {},
   "files": [
     "dist"
   ],

package/dist/define/dial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dial.js","names":[],"sources":["../../src/define/dial.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicDial } from '#elements/dial.ts';\n\ndefineOnce('sonic-dial', SonicDial);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicDial } from '#elements/dial.ts';\n"],"mappings":";;;;AAGA,WAAW,cAAc,SAAS"}

package/dist/define/key.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"key.js","names":[],"sources":["../../src/define/key.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicKey } from '#elements/key.ts';\n\ndefineOnce('sonic-key', SonicKey);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicKey } from '#elements/key.ts';\n"],"mappings":";;;;AAGA,WAAW,aAAa,QAAQ"}

package/dist/define/meter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meter.js","names":[],"sources":["../../src/define/meter.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicMeter } from '#elements/meter.ts';\n\ndefineOnce('sonic-meter', SonicMeter);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicMeter } from '#elements/meter.ts';\n"],"mappings":";;;;AAGA,WAAW,eAAe,UAAU"}

package/dist/define/segmented.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"segmented.js","names":[],"sources":["../../src/define/segmented.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicSegmented } from '#elements/segmented.ts';\n\ndefineOnce('sonic-segmented', SonicSegmented);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicSegmented } from '#elements/segmented.ts';\n"],"mappings":";;;;AAGA,WAAW,mBAAmB,cAAc"}

package/dist/define/slider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/define/slider.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicSlider } from '#elements/slider.ts';\n\ndefineOnce('sonic-slider', SonicSlider);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicSlider } from '#elements/slider.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/elements/define-once.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define-once.js","names":[],"sources":["../../src/elements/define-once.ts"],"sourcesContent":["export function defineOnce(tag: string, elementClass: CustomElementConstructor): void {\n\tif (!customElements.get(tag)) customElements.define(tag, elementClass);\n}\n"],"mappings":";AAAA,SAAgB,WAAW,KAAa,cAA8C;CACrF,IAAI,CAAC,eAAe,IAAI,GAAG,GAAG,eAAe,OAAO,KAAK,YAAY;AACtE"}