@xsynaptic/sonic-ui 0.1.0 → 0.3.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

@@ -0,0 +1,36 @@
+//#region src/lib/taper.ts
+function clampUnit(fraction) {
+	return Math.min(1, Math.max(0, fraction));
+}
+function wrapUnit(fraction) {
+	return fraction - Math.floor(fraction);
+}
+function linearTaper(min, max) {
+	const range = max - min;
+	return {
+		position: (value) => range > 0 ? clampUnit((value - min) / range) : 0,
+		value: (position) => min + clampUnit(position) * range
+	};
+}
+function logTaper(min, max) {
+	if (min <= 0 || max <= min) return void 0;
+	const span = Math.log(max / min);
+	return {
+		position: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),
+		value: (position) => min * Math.exp(clampUnit(position) * span)
+	};
+}
+function skewTaper(min, max, midpoint) {
+	const range = max - min;
+	const proportion = (midpoint - min) / range;
+	if (proportion === .5 || !(proportion > 0 && proportion < 1)) return void 0;
+	const skew = Math.log(.5) / Math.log(proportion);
+	return {
+		position: (value) => clampUnit((value - min) / range) ** skew,
+		value: (position) => min + range * clampUnit(position) ** (1 / skew)
+	};
+}
+
+//#endregion
+export { clampUnit, linearTaper, logTaper, skewTaper, wrapUnit };
+//# sourceMappingURL=taper.js.map

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 wrapUnit(fraction: number): number {\n\treturn fraction - Math.floor(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,SAAS,UAA0B;CAClD,OAAO,WAAW,KAAK,MAAM,QAAQ;AACtC;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,8 +1,9 @@
-/* The material first; every control's sheet reads it */
 @import './material.css';
 @import './dial.css';
 @import './key.css';
+@import './led.css';
 @import './meter.css';
+@import './number.css';
 @import './screen.css';
 @import './segmented.css';
 @import './slider.css';

package/dist/styles/dial.css

@@ -1,5 +1,22 @@
+@property --_sonic-dial-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 40px;
+}
+
+@property --_sonic-dial-ridge-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 4px;
+}
+
+@property --_sonic-dial-travel {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 160px;
+}
+
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-dial, .sonic-dial) {
 		--_sonic-dial-size: var(--sonic-dial-size, 2.5rem);
 	}
@@ -29,15 +46,13 @@
 
 		/* 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-segment: var(--sonic-dial-segment, 30deg);
 		--_sonic-dial-ridge-pitch: var(--sonic-dial-ridge-pitch, 4px);
-
-		/* Read by the element as px */
 		--_sonic-dial-travel: var(--sonic-dial-travel, 160px);
 		--_sonic-unit: calc(var(--_sonic-dial-size) / 40);
 		--_sonic-dial-lit: var(--_sonic-lit);
 		--_sonic-dial-notch-band: 0px;
+		--_sonic-dial-notch-ends: 1;
 		--_sonic-dial-start: calc(180deg + (1turn - var(--_sonic-dial-sweep)) / 2);
 		--_sonic-dial-angle: calc(var(--_sonic-dial-value, 0) * var(--_sonic-dial-sweep));
 		--_sonic-dial-ring-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-ring-ratio));
@@ -75,6 +90,11 @@
 		--_sonic-cap: var(--_sonic-cap-hover);
 	}
 
+	[endless] > .sonic-dial {
+		--_sonic-dial-sweep: 1turn;
+		--_sonic-dial-notch-ends: 0;
+	}
+
 	[notched] > .sonic-dial {
 		--_sonic-dial-notch-band: calc(var(--_sonic-dial-size) * var(--_sonic-dial-notch-ratio));
 	}
@@ -84,7 +104,7 @@
 		--_sonic-dial-lit: var(--_sonic-lit-off);
 	}
 
-	[disabled] > .sonic-dial {
+	:disabled > .sonic-dial {
 		--_sonic-dial-lit: var(--_sonic-lit-disabled);
 
 		cursor: default;
@@ -93,7 +113,7 @@
 	.sonic-dial-notches {
 		--_sonic-dial-notch-width: atan2(var(--_sonic-unit), var(--_sonic-dial-size) / 2);
 		--_sonic-dial-notch-pitch: calc(
-			var(--_sonic-dial-sweep) / (var(--_sonic-dial-positions, 2) - 1)
+			var(--_sonic-dial-sweep) / (var(--_sonic-dial-positions, 2) - var(--_sonic-dial-notch-ends))
 		);
 
 		position: absolute;
@@ -140,14 +160,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),
@@ -157,6 +178,17 @@
 			);
 	}
 
+	[endless] > .sonic-dial > .sonic-dial-ring {
+		background:
+			var(--_sonic-dial-ring-shade),
+			conic-gradient(
+				from
+					calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle) - var(--_sonic-dial-segment) / 2),
+				var(--_sonic-dial-lit) var(--_sonic-dial-segment),
+				var(--_sonic-unlit) 0
+			);
+	}
+
 	.sonic-dial-modulation {
 		--_sonic-dial-modulation: var(
 			--sonic-modulation,
@@ -185,7 +217,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 +268,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 +290,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,10 @@
+@property --_sonic-key-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 32px;
+}
+
 @layer sonic {
-	/* On the host too, for the placeholder */
 	:is(sonic-key, .sonic-key) {
 		--_sonic-key-size: var(--sonic-key-size, 2rem);
 	}
@@ -8,7 +13,6 @@
 		display: contents;
 	}
 
-	/* Hides the icon, which has no size before upgrade */
 	sonic-key:not(:defined, [hidden]) {
 		display: block;
 		visibility: hidden;
@@ -18,13 +22,14 @@
 		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);
 		--_sonic-key-bevel-ratio: var(--sonic-key-bevel-ratio, 0.075);
 		--_sonic-key-face-radius-ratio: var(--sonic-key-face-radius-ratio, 0.15);
 		--_sonic-key-icon-ratio: var(--sonic-key-icon-ratio, 0.5);
+		--_sonic-key-led-ratio: var(--sonic-key-led-ratio, 0.2);
+		--_sonic-key-led-icon-ratio: var(--sonic-key-led-icon-ratio, 0.35);
 		--_sonic-key-depth-ratio: var(--sonic-key-depth-ratio, 0.03);
 		--_sonic-key-press-scale: var(--sonic-key-press-scale, 0.985);
 		--_sonic-unit: calc(var(--_sonic-key-size) / 32);
@@ -34,7 +39,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;
@@ -42,6 +47,7 @@
 		inline-size: var(--_sonic-key-size);
 		block-size: var(--_sonic-key-size);
 		padding: 0;
+		font: inherit;
 		color: var(--_sonic-ink);
 		cursor: pointer;
 		background: linear-gradient(
@@ -52,6 +58,7 @@
 		border: 0;
 		border-radius: var(--_sonic-key-corner);
 		box-shadow: var(--_sonic-well);
+		transition: color 120ms ease-out;
 	}
 
 	/* A drifting finger would turn a held pad into a pan */
@@ -60,14 +67,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);
@@ -87,10 +94,25 @@
 		cursor: default;
 	}
 
+	.sonic-key:not([aria-pressed='true'], :disabled, :where([momentary]:state(pressed)) > *):is(
+			:focus-visible,
+			:active
+		) {
+		color: var(--_sonic-ink-lift);
+	}
+
+	@media (hover: hover) {
+		.sonic-key:not([aria-pressed='true'], :disabled, :where([momentary]:state(pressed)) > *):hover {
+			color: var(--_sonic-ink-lift);
+		}
+	}
+
 	.sonic-key-cap {
 		position: absolute;
 		inset: var(--_sonic-key-gap);
 		display: grid;
+		gap: calc(var(--_sonic-key-size) * var(--_sonic-key-led-ratio) / 2);
+		place-content: center;
 		place-items: center;
 		background: var(--_sonic-skirt);
 		border-radius: max(0px, var(--_sonic-key-corner) - var(--_sonic-key-gap));
@@ -110,8 +132,18 @@
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		& > svg {
+		& > * {
 			position: relative;
+		}
+
+		& > .sonic-led {
+			--_sonic-led-size: var(
+				--sonic-led-size,
+				calc(var(--_sonic-key-size) * var(--_sonic-key-led-ratio))
+			);
+		}
+
+		& > svg {
 			inline-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
 			block-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
 			filter: var(--_sonic-engraving);
@@ -120,18 +152,46 @@
 		}
 	}
 
+	.sonic-key-cap:has(> .sonic-led) > svg {
+		inline-size: calc(var(--_sonic-key-size) * var(--_sonic-key-led-icon-ratio));
+		block-size: calc(var(--_sonic-key-size) * var(--_sonic-key-led-icon-ratio));
+	}
+
 	/* 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/led.css

@@ -0,0 +1,75 @@
+@property --_sonic-led-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 8px;
+}
+
+@layer sonic {
+	.sonic-led {
+		--_sonic-led-size: var(--sonic-led-size, 0.5rem);
+		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, 0.625);
+		--_sonic-unit: calc(var(--_sonic-led-size) / 8);
+		--_sonic-led-bezel: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
+
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-led-size);
+		block-size: var(--_sonic-led-size);
+		background: var(--_sonic-led-bezel);
+		border-radius: 50%;
+
+		&::after {
+			position: absolute;
+			inset: calc(var(--_sonic-led-size) * (1 - var(--_sonic-led-lens-ratio)) / 2);
+			content: '';
+			background: var(--_sonic-lens);
+			border-radius: inherit;
+		}
+
+		@media (forced-colors: active) {
+			forced-color-adjust: none;
+			background: none;
+
+			&::after {
+				background: GrayText;
+				box-shadow: 0 0 0 1px CanvasText;
+			}
+		}
+	}
+
+	.sonic-led:is(
+		[data-sonic-lit],
+		:where(
+				.sonic-key[aria-pressed='true'],
+				[momentary]:state(pressed) > .sonic-key,
+				.sonic-segmented-segment[aria-checked='true']
+			)
+			*
+	) {
+		background:
+			radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-lit) 60%, transparent)
+					calc(var(--_sonic-led-lens-ratio) * 100%),
+				transparent
+			),
+			var(--_sonic-led-bezel);
+
+		&::after {
+			background: radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-lit) 55%, #fff),
+				var(--_sonic-lit)
+			);
+		}
+
+		@media (forced-colors: active) {
+			background: none;
+
+			&::after {
+				background: Highlight;
+			}
+		}
+	}
+}