@xsynaptic/sonic-ui 0.2.0 → 0.4.0

package/dist/styles/led.css

@@ -0,0 +1,82 @@
+@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-lit-alt: var(--sonic-lit-alt, oklch(79% 0.2 150deg));
+		--_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) {
+			--_sonic-lit-alt: Mark;
+
+			forced-color-adjust: none;
+			background: none;
+
+			&::after {
+				background: GrayText;
+				box-shadow: 0 0 0 1px CanvasText;
+			}
+		}
+	}
+
+	.sonic-led[data-sonic-lit='alt'] {
+		--_sonic-lit: var(--_sonic-lit-alt);
+	}
+
+	.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: var(--_sonic-lit);
+			}
+		}
+	}
+}

package/dist/styles/material.css

@@ -1,10 +1,24 @@
+@property --_sonic-readout-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 24px;
+}
+
+@property --_sonic-detent-zone {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 8px;
+}
+
 @layer sonic {
 	/* Resolved per control rather than on `:root`, so each follows its own cap and unit */
 	:is(
 		.sonic-dial,
 		.sonic-dial-readout,
 		.sonic-key,
+		.sonic-led,
 		.sonic-meter,
+		.sonic-number,
 		.sonic-screen,
 		.sonic-segmented,
 		.sonic-slider,
@@ -19,21 +33,36 @@
 		--_sonic-cast-y: calc(cos(var(--_sonic-light-tilt)) * var(--_sonic-unit));
 	}
 
-	:is(.sonic-dial, .sonic-key, .sonic-meter, .sonic-segmented-segment, .sonic-slider) {
+	:is(
+		.sonic-dial,
+		.sonic-key,
+		.sonic-led,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-segmented-segment,
+		.sonic-slider
+	) {
 		--_sonic-lit: var(--sonic-lit, oklch(76.9% 0.165 70deg));
 	}
 
+	:is(.sonic-led, .sonic-meter) {
+		--_sonic-lens:
+			linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%),
+			color-mix(in oklab, var(--_sonic-unlit) 60%, #000);
+	}
+
 	.sonic-meter {
 		--_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) {
+	:is(.sonic-dial, .sonic-key, .sonic-number, .sonic-segmented-segment, .sonic-slider) {
 		--_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));
 		--_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-ink-lift: color-mix(in oklab, var(--_sonic-ink) 60%, #fff);
 		--_sonic-lit-disabled: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit));
 		--_sonic-skirt: linear-gradient(
 			var(--_sonic-light-fall),
@@ -70,24 +99,76 @@
 			color-mix(in oklab, var(--_sonic-focus) 60%, transparent);
 	}
 
+	/* A gesture distance, absolute like the travel */
+	:is(.sonic-dial, .sonic-number, .sonic-slider) {
+		--_sonic-detent-zone: var(--sonic-detent-zone, 8px);
+	}
+
 	:is(.sonic-dial, .sonic-slider) {
+		/* On the control, since the readout's font size reads it */
+		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
 		--_sonic-lit-off: var(
 			--sonic-dimmed,
 			color-mix(in oklab, var(--_sonic-lit) 50%, var(--_sonic-unlit))
 		);
 	}
 
-	:is(.sonic-dial-readout, .sonic-screen, .sonic-slider-readout) {
+	:is(.sonic-dial-readout, .sonic-number, .sonic-screen, .sonic-slider-readout) {
 		--_sonic-glass: var(--sonic-glass, color-mix(in oklab, var(--_sonic-unlit) 45%, #000));
+		--_sonic-glass-fill: radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
+				var(--_sonic-glass)
+			)
+			var(--_sonic-glass);
+
+		/* Not the cap's ink, which a skin may darken */
+		--_sonic-glass-text: var(
+			--sonic-glass-text,
+			color-mix(in oklab, var(--_sonic-glass) 20%, #fff)
+		);
+	}
+
+	/* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
+	:is(.sonic-number, .sonic-screen) {
+		position: relative;
+		box-sizing: border-box;
+		display: grid;
+		flex-shrink: 0;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+		place-items: center;
+		font-family: var(--sonic-glass-font);
+		color: var(--_sonic-glass-text);
+
+		/* A double click aimed at a neighbouring control would highlight it */
+		user-select: none;
+		background: var(--_sonic-glass-fill);
+
+		&::after {
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			background: linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 7%), transparent 45%);
+			border-radius: inherit;
+			box-shadow:
+				var(--_sonic-well),
+				inset 0 0 calc(3 * var(--_sonic-unit)) rgb(0 0 0 / 45%);
+		}
 	}
 
-	:is(.sonic-key, .sonic-screen, .sonic-segmented) {
+	:is(.sonic-key, .sonic-number, .sonic-screen, .sonic-segmented) {
 		--_sonic-well:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(2 * var(--_sonic-unit)) rgb(0 0 0 / 60%),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 6%);
 	}
 
 	:is(.sonic-key, .sonic-segmented) {
+		--_sonic-well-floor: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-unlit) 55%, #000),
+			color-mix(in oklab, var(--_sonic-unlit) 85%, #000)
+		);
 		--_sonic-engraving: drop-shadow(
 				calc(-0.4 * var(--_sonic-cast-x)) calc(-0.4 * var(--_sonic-cast-y))
 					calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / 30%)
@@ -97,6 +178,12 @@
 			);
 	}
 
+	/* On the segment rather than the strip, where forced colours clear the drop shade */
+	:is(.sonic-key, .sonic-segmented-segment) {
+		--_sonic-press-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
+			var(--_sonic-unit) var(--_sonic-drop-shade);
+	}
+
 	/* The well's full blur would fill a slot this narrow */
 	:is(.sonic-meter, .sonic-slider) {
 		--_sonic-groove:
@@ -115,7 +202,13 @@
 		}
 	}
 
-	:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider):focus-visible {
+	:is(
+		.sonic-dial,
+		.sonic-key,
+		.sonic-number,
+		.sonic-segmented-segment,
+		.sonic-slider
+	):focus-visible {
 		--_sonic-cap: var(--_sonic-cap-hover);
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 
@@ -124,13 +217,12 @@
 	}
 
 	/* Keeps the glow while focus is in the entry; its own rule, since an engine without `:state()` drops a whole selector list */
-	:state(editing) > :is(.sonic-dial, .sonic-slider) {
+	:state(editing) > :is(.sonic-dial, .sonic-number, .sonic-slider) {
 		--_sonic-cap: var(--_sonic-cap-hover);
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 	}
 
 	:is(.sonic-dial-readout, .sonic-slider-readout) {
-		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
 		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
 
 		box-sizing: border-box;
@@ -143,19 +235,15 @@
 		position-try-fallbacks: flip-block;
 		overflow: visible;
 		font: inherit;
+		font-family: var(--sonic-glass-font);
 		font-size: calc(0.5 * var(--_sonic-readout-size));
 		font-variant-numeric: tabular-nums;
 		line-height: 1;
-		color: color-mix(in oklab, var(--_sonic-glass) 20%, #fff);
+		color: var(--_sonic-glass-text);
 		pointer-events: none;
 		cursor: default;
 		user-select: none;
-		background: radial-gradient(
-				closest-side,
-				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
-				var(--_sonic-glass)
-			)
-			var(--_sonic-glass);
+		background: var(--_sonic-glass-fill);
 		border: 0;
 		border-radius: calc(0.25 * var(--_sonic-readout-size));
 		box-shadow:
@@ -200,7 +288,7 @@
 		cursor: text;
 	}
 
-	:is(.sonic-dial-entry, .sonic-slider-entry) {
+	:is(.sonic-dial-entry, .sonic-number-entry, .sonic-slider-entry) {
 		inline-size: 6ch;
 		padding: 0;
 		font: inherit;
@@ -226,14 +314,49 @@
 		}
 	}
 
+	/* Printed on the consumer's panel rather than the cap, so the text takes the page's colour and font */
+	:is(.sonic-dial-scale, .sonic-slider-scale) {
+		position: absolute;
+		inset: 0;
+		line-height: 1;
+		white-space: nowrap;
+		pointer-events: none;
+
+		& > * {
+			position: absolute;
+		}
+
+		& svg {
+			display: block;
+			inline-size: 1em;
+			block-size: 1em;
+		}
+
+		& > .sonic-scale-tick {
+			background: var(--_sonic-etch);
+		}
+	}
+
 	@media (forced-colors: active) {
-		:is(.sonic-dial, .sonic-key, .sonic-meter, .sonic-segmented-segment, .sonic-slider) {
+		.sonic-scale-tick {
+			forced-color-adjust: none;
+		}
+
+		:is(
+			.sonic-dial,
+			.sonic-key,
+			.sonic-led,
+			.sonic-meter,
+			.sonic-number,
+			.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) {
+		:is(.sonic-dial, .sonic-key, .sonic-number, .sonic-segmented-segment, .sonic-slider) {
 			--_sonic-ink: ButtonText;
 			--_sonic-etch: ButtonText;
 			--_sonic-lit-disabled: GrayText;
@@ -253,7 +376,7 @@
 
 		:is(
 			:disabled > :is(.sonic-dial, .sonic-slider),
-			.sonic-key:disabled,
+			.sonic-key:is(:disabled, [aria-disabled='true']),
 			.sonic-segmented-segment:disabled
 		) {
 			--_sonic-ink: GrayText;
@@ -261,7 +384,13 @@
 		}
 
 		/* 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 {
+		:is(
+			.sonic-dial,
+			.sonic-key,
+			.sonic-number,
+			.sonic-segmented-segment,
+			.sonic-slider
+		):focus-visible {
 			outline-offset: 2px;
 		}
 
@@ -270,7 +399,8 @@
 			forced-color-adjust: none;
 		}
 
-		:is(.sonic-dial-readout, .sonic-slider-readout) {
+		/* Glass is forced to Canvas like the page, so only a border shows its edge */
+		:is(.sonic-dial-readout, .sonic-number, .sonic-screen, .sonic-slider-readout) {
 			border: 1px solid CanvasText;
 		}
 	}

package/dist/styles/meter.css

@@ -1,3 +1,21 @@
+@property --_sonic-meter-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 8px;
+}
+
+@property --_sonic-meter-length {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 128px;
+}
+
+@property --_sonic-meter-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 4px;
+}
+
 /* The size is the thickness */
 @layer sonic {
 	:is(sonic-meter, .sonic-meter) {
@@ -39,6 +57,7 @@
 		--_sonic-meter-toward: to top;
 		--_sonic-meter-inset: calc(var(--_sonic-meter-size) * 0.125);
 		--_sonic-meter-lens: calc(var(--_sonic-meter-size) - 2 * var(--_sonic-meter-inset));
+		--_sonic-meter-clip-space: calc(var(--_sonic-meter-inset) + var(--_sonic-meter-lens));
 		--_sonic-meter-gap: calc(var(--_sonic-meter-pitch) * var(--_sonic-meter-gap-ratio));
 		--_sonic-meter-segment: calc(var(--_sonic-meter-pitch) - var(--_sonic-meter-gap));
 		--_sonic-meter-segment-radius: calc(
@@ -46,7 +65,7 @@
 		);
 		--_sonic-meter-segments: round(
 			down,
-			var(--_sonic-meter-length) - 3 * var(--_sonic-meter-inset) - var(--_sonic-meter-lens) +
+			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
 				var(--_sonic-meter-gap),
 			var(--_sonic-meter-pitch)
 		);
@@ -75,6 +94,26 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
+	/* No clip on either, so the lights take the lens's room */
+	:is([scale='linear'], :state(ladder)) > .sonic-meter {
+		--_sonic-meter-clip-space: 0px;
+	}
+
+	:state(ladder) > .sonic-meter {
+		--_sonic-meter-pitch: calc(
+			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
+		);
+		--_sonic-meter-gap: 0px;
+		--_sonic-meter-segments: calc(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset));
+		--_sonic-meter-light-radius: calc(
+			min(
+					var(--_sonic-meter-lens),
+					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
+				) /
+				2
+		);
+	}
+
 	/* Snapped to whole lights, so none is split between two colours */
 	:is(.sonic-meter-segments, .sonic-meter-level) {
 		--_sonic-meter-span: calc(var(--_sonic-meter-max, 0) - var(--_sonic-meter-min, -60));
@@ -90,7 +129,9 @@
 		--_sonic-meter-clip-at: round(
 			clamp(
 					0,
-					(var(--_sonic-meter-clip-from) - var(--_sonic-meter-min, -60)) / var(--_sonic-meter-span),
+					/* fallow-ignore-next-line code-duplication -- each zone snaps its own threshold by the same rule */
+						(var(--_sonic-meter-clip-from) - var(--_sonic-meter-min, -60)) /
+						var(--_sonic-meter-span),
 					1
 				) *
 				var(--_sonic-meter-segments),
@@ -126,6 +167,7 @@
 				0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat,
 			radial-gradient(
 					circle var(--_sonic-meter-segment-radius) at left var(--_sonic-meter-segment-radius)
+						/* fallow-ignore-next-line code-duplication -- one gradient per segment corner is geometry, not copied logic */
 						bottom calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
 					#000 calc(100% - 0.5px),
 					transparent
@@ -146,6 +188,23 @@
 		mask-composite: add;
 	}
 
+	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-hot-at: calc(var(--_sonic-meter-hot-lights, 0) * var(--_sonic-meter-pitch));
+		--_sonic-meter-clip-at: calc(var(--_sonic-meter-clip-lights, 0) * var(--_sonic-meter-pitch));
+		--_sonic-meter-lights: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				#000 calc(100% - 0.5px),
+				transparent
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat;
+	}
+
+	/* The zones are dBFS, which a linear level is not */
+	[scale='linear'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-hot-at: var(--_sonic-meter-segments);
+		--_sonic-meter-clip-at: var(--_sonic-meter-segments);
+	}
+
 	[orientation='horizontal'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
 		--_sonic-meter-lights:
 			linear-gradient(to right, #000 var(--_sonic-meter-segment), transparent 0) 0
@@ -176,6 +235,7 @@
 			radial-gradient(
 					circle var(--_sonic-meter-segment-radius) at left
 						calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)) top
+						/* fallow-ignore-next-line code-duplication -- one gradient per segment corner is geometry, not copied logic */
 						var(--_sonic-meter-segment-radius),
 					#000 calc(100% - 0.5px),
 					transparent
@@ -195,6 +255,42 @@
 		block-size: auto;
 	}
 
+	[orientation='horizontal']:state(ladder)
+		> .sonic-meter
+		> :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-lights: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				#000 calc(100% - 0.5px),
+				transparent
+			)
+			0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat;
+	}
+
+	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level)::after {
+		position: absolute;
+		inset: 0;
+		content: '';
+		background: linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%) 0
+			100% / 100% var(--_sonic-meter-pitch) repeat-y;
+	}
+
+	:state(ladder) > .sonic-meter > .sonic-meter-level::after {
+		background: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				rgb(255 255 255 / 45%),
+				transparent
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
+	}
+
+	[orientation='horizontal']:state(ladder)
+		> .sonic-meter
+		> :is(.sonic-meter-segments, .sonic-meter-level)::after {
+		background-repeat: repeat-x;
+		background-position: 0 0;
+		background-size: var(--_sonic-meter-pitch) 100%;
+	}
+
 	.sonic-meter-segments {
 		background: linear-gradient(
 			var(--_sonic-meter-toward),
@@ -205,15 +301,24 @@
 	}
 
 	/* One mask for the bar and peak, so a frame repaints without layout */
+
+	/* The hair of slack keeps an exact fraction from losing a light to float error */
 	.sonic-meter-level {
+		--_sonic-meter-lit-from: round(
+			up,
+			min(var(--_sonic-meter-origin, 0), var(--_sonic-meter-level, 0)) *
+				var(--_sonic-meter-segments) - 0.01px,
+			var(--_sonic-meter-pitch)
+		);
 		--_sonic-meter-lit: round(
 			down,
-			var(--_sonic-meter-level, 0) * var(--_sonic-meter-segments),
+			max(var(--_sonic-meter-origin, 0), var(--_sonic-meter-level, 0)) *
+				var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
 		--_sonic-meter-held: round(
 			down,
-			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments),
+			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
 
@@ -226,7 +331,8 @@
 		mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
-				#000 var(--_sonic-meter-lit),
+				transparent var(--_sonic-meter-lit-from),
+				#000 0 var(--_sonic-meter-lit),
 				transparent 0 calc(var(--_sonic-meter-held) - var(--_sonic-meter-pitch)),
 				#000 0 var(--_sonic-meter-held),
 				transparent 0
@@ -239,9 +345,7 @@
 		position: absolute;
 		inset: var(--_sonic-meter-inset) var(--_sonic-meter-inset) auto;
 		block-size: var(--_sonic-meter-lens);
-		background:
-			linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%),
-			color-mix(in oklab, var(--_sonic-unlit) 60%, #000);
+		background: var(--_sonic-lens);
 		border-radius: 50%;
 
 		&::after {
@@ -258,6 +362,10 @@
 		}
 	}
 
+	:is([scale='linear'], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
+		display: none;
+	}
+
 	[orientation='horizontal'] > .sonic-meter > .sonic-meter-clip {
 		inset: var(--_sonic-meter-inset) var(--_sonic-meter-inset) var(--_sonic-meter-inset) auto;
 		inline-size: var(--_sonic-meter-lens);
@@ -287,5 +395,9 @@
 		.sonic-meter-clip::after {
 			background: Mark;
 		}
+
+		:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level)::after {
+			display: none;
+		}
 	}
 }

package/dist/styles/number.css

@@ -0,0 +1,81 @@
+@property --_sonic-number-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 28px;
+}
+
+@property --_sonic-number-travel {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 160px;
+}
+
+@layer sonic {
+	:is(sonic-number, .sonic-number) {
+		--_sonic-number-size: var(--sonic-number-size, 1.75rem);
+		--_sonic-number-aspect-ratio: var(--sonic-number-aspect-ratio, 3);
+	}
+
+	:has(> .sonic-number):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-number:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-number-size) * var(--_sonic-number-aspect-ratio));
+		block-size: var(--_sonic-number-size);
+	}
+
+	.sonic-number {
+		--_sonic-number-radius-ratio: var(--sonic-number-radius-ratio, 0.15);
+		--_sonic-number-inset-ratio: var(--sonic-number-inset-ratio, 0.2);
+		--_sonic-number-text-ratio: var(--sonic-number-text-ratio, 0.45);
+		--_sonic-number-travel: var(--sonic-number-travel, 160px);
+		--_sonic-unit: calc(var(--_sonic-number-size) / 32);
+
+		inline-size: calc(var(--_sonic-number-size) * var(--_sonic-number-aspect-ratio));
+		block-size: var(--_sonic-number-size);
+		padding: 0 calc(var(--_sonic-number-size) * var(--_sonic-number-inset-ratio));
+		font-size: calc(var(--_sonic-number-size) * var(--_sonic-number-text-ratio));
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		touch-action: none;
+		cursor: ns-resize;
+		border-radius: calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio));
+		box-shadow: var(--_sonic-focus-shadow);
+	}
+
+	:disabled > .sonic-number {
+		color: var(--_sonic-etch);
+		cursor: default;
+	}
+
+	:is(.sonic-number-value, .sonic-number-entry) {
+		grid-area: 1 / 1;
+		max-inline-size: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	:state(editing) > .sonic-number > .sonic-number-value {
+		visibility: hidden;
+	}
+
+	.sonic-number-entry {
+		inline-size: 100%;
+		cursor: text;
+		field-sizing: fixed;
+	}
+
+	@media (forced-colors: active) {
+		.sonic-number-value {
+			color: CanvasText;
+			forced-color-adjust: none;
+		}
+
+		:disabled > .sonic-number > .sonic-number-value {
+			color: GrayText;
+		}
+	}
+}