@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/styles/slider.css

@@ -5,12 +5,17 @@
 }
 
 @property --_sonic-slider-length {
-	syntax: '<length>';
+	syntax: '<length-percentage>';
 	inherits: true;
 	initial-value: 128px;
 }
 
-/* The size is the thickness across the travel */
+@property --_sonic-slider-value {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0;
+}
+
 @layer sonic {
 	:is(sonic-slider, .sonic-slider) {
 		--_sonic-slider-size: var(--sonic-slider-size, 2rem);
@@ -35,22 +40,17 @@
 		block-size: var(--_sonic-slider-length);
 	}
 
-	/* Laid out on its side rather than rotated, so the light falls the same way in both orientations */
 	.sonic-slider {
 		--_sonic-slider-groove-ratio: var(--sonic-slider-groove-ratio, 0.15);
-
-		/* Along the travel; across it, the cap fills the size */
 		--_sonic-slider-cap-ratio: var(--sonic-slider-cap-ratio, 0.5);
 		--_sonic-slider-radius-ratio: var(--sonic-slider-radius-ratio, 0.15);
 		--_sonic-slider-bevel-ratio: var(--sonic-slider-bevel-ratio, 0.075);
-		--_sonic-slider-pointer-ratio: var(--sonic-slider-pointer-ratio, 0.07);
+		--_sonic-slider-indicator-ratio: var(--sonic-slider-indicator-ratio, 0.07);
 		--_sonic-slider-scale-ratio: var(--sonic-slider-scale-ratio, 0.4);
 		--_sonic-slider-scale-font-ratio: var(--sonic-slider-scale-font-ratio, 0.18);
 		--_sonic-slider-scale-band: 0px;
-
-		/* Across the travel beside the legend, so a legend widens the box without restyling the fader */
-		--_sonic-slider-track: calc(var(--_sonic-slider-size) - var(--_sonic-slider-scale-band));
-		--_sonic-unit: calc(var(--_sonic-slider-track) / 32);
+		--_sonic-slider-breadth: calc(var(--_sonic-slider-size) - var(--_sonic-slider-scale-band));
+		--_sonic-unit: calc(var(--_sonic-slider-breadth) / 32);
 		--_sonic-slider-lit: var(--_sonic-lit);
 		--_sonic-slider-buffered: var(
 			--sonic-buffered,
@@ -59,16 +59,17 @@
 		--_sonic-slider-toward: to right;
 		--_sonic-slider-across: to bottom;
 		--_sonic-slider-cursor: ew-resize;
-		--_sonic-slider-groove: calc(var(--_sonic-slider-track) * var(--_sonic-slider-groove-ratio));
-		--_sonic-slider-cap: calc(var(--_sonic-slider-track) * var(--_sonic-slider-cap-ratio));
-		--_sonic-slider-travel: calc(var(--_sonic-slider-length) - var(--_sonic-slider-cap));
+		--_sonic-slider-groove: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-groove-ratio));
+		--_sonic-slider-cap: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-cap-ratio));
+		--_sonic-slider-travel: calc(100cqi - var(--_sonic-slider-cap));
 		--_sonic-slider-offset: calc(var(--_sonic-slider-value, 0) * var(--_sonic-slider-travel));
 
 		position: relative;
 		flex-shrink: 0;
 		inline-size: var(--_sonic-slider-length);
 		block-size: var(--_sonic-slider-size);
-		touch-action: none;
+		container-type: size;
+		touch-action: pan-y;
 		cursor: var(--_sonic-slider-cursor);
 		user-select: none;
 	}
@@ -77,15 +78,69 @@
 		--_sonic-slider-toward: to top;
 		--_sonic-slider-across: to right;
 		--_sonic-slider-cursor: ns-resize;
+		--_sonic-slider-travel: calc(100cqb - var(--_sonic-slider-cap));
 
 		inline-size: var(--_sonic-slider-size);
 		block-size: var(--_sonic-slider-length);
+		touch-action: pan-x;
 	}
 
 	:state(dragging) > .sonic-slider {
 		--_sonic-cap: var(--_sonic-cap-hover);
 	}
 
+	:state(springing) > .sonic-slider {
+		/* A damped spring with 10% bounce, sampled into `linear()` */
+		transition: --_sonic-slider-value 200ms
+			linear(
+				0,
+				0.028,
+				0.097,
+				0.187,
+				0.287,
+				0.387,
+				0.482,
+				0.57,
+				0.647,
+				0.714,
+				0.772,
+				0.82,
+				0.86,
+				0.892,
+				0.918,
+				0.939,
+				0.955,
+				0.968,
+				0.977,
+				0.985,
+				0.99,
+				0.994,
+				0.997,
+				0.999,
+				1,
+				1.001,
+				1.001,
+				1.001,
+				1.002,
+				1.001,
+				1.001,
+				1.001,
+				1.001,
+				1.001,
+				1.001,
+				1.001,
+				1.001,
+				1,
+				1,
+				1,
+				1
+			);
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
 	[dimmed] > .sonic-slider {
 		--_sonic-slider-lit: var(--_sonic-lit-off);
 	}
@@ -103,12 +158,12 @@
 		cursor: default;
 	}
 
-	.sonic-slider-marks {
-		--_sonic-slider-mark-pitch: calc(
-			var(--_sonic-slider-travel) / (var(--_sonic-slider-positions, 2) - 1)
+	.sonic-slider-notches {
+		--_sonic-slider-notch-pitch: calc(
+			var(--_sonic-slider-travel) / (var(--_sonic-slider-position-count, 2) - 1)
 		);
-		--_sonic-slider-mark-lip: calc(
-			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-track) * 0.1
+		--_sonic-slider-notch-lip: calc(
+			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-breadth) * 0.1
 		);
 
 		position: absolute;
@@ -117,24 +172,24 @@
 		background: repeating-linear-gradient(
 			var(--_sonic-slider-toward),
 			var(--_sonic-etch) 0 var(--_sonic-unit),
-			transparent 0 var(--_sonic-slider-mark-pitch)
+			transparent 0 var(--_sonic-slider-notch-pitch)
 		);
 		mask: linear-gradient(
 			var(--_sonic-slider-across),
 			transparent 15%,
-			#000 0 calc(50% - var(--_sonic-slider-mark-lip)),
-			transparent 0 calc(50% + var(--_sonic-slider-mark-lip)),
+			#000 0 calc(50% - var(--_sonic-slider-notch-lip)),
+			transparent 0 calc(50% + var(--_sonic-slider-notch-lip)),
 			#000 0 85%,
 			transparent 0
 		);
 	}
 
-	[orientation='vertical'] > .sonic-slider > .sonic-slider-marks {
+	[orientation='vertical'] > .sonic-slider > .sonic-slider-notches {
 		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) 0
 			calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) var(--_sonic-slider-scale-band);
 	}
 
-	:not([notched]) > .sonic-slider > .sonic-slider-marks {
+	:not([notched]) > .sonic-slider > .sonic-slider-notches {
 		display: none;
 	}
 
@@ -177,8 +232,6 @@
 		inset: calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2)
 			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
 			calc(50% - var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2);
-
-		/* At either end of the travel the light runs on to the groove's rounded end */
 		background:
 			linear-gradient(
 				var(--_sonic-slider-toward),
@@ -194,9 +247,9 @@
 					),
 				transparent 0
 			),
-			var(--_sonic-slider-buffered-ranges, none), var(--_sonic-unlit);
+			var(--_sonic-slider-buffered-regions, none), var(--_sonic-unlit);
 		border-radius: calc(var(--_sonic-slider-groove) / 2);
-		box-shadow: var(--_sonic-groove);
+		box-shadow: var(--_sonic-groove), var(--_sonic-focus-shadow);
 	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-groove {
@@ -243,14 +296,81 @@
 		display: none;
 	}
 
+	:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+		--_sonic-slider-live-low: min(
+			var(--_sonic-slider-value, 0),
+			var(--_sonic-slider-modulation-value, 0)
+		);
+		--_sonic-slider-live-high: max(
+			var(--_sonic-slider-value, 0),
+			var(--_sonic-slider-modulation-value, 0)
+		);
+		--_sonic-slider-live-start: calc(
+			(var(--_sonic-slider-live-low) - var(--_sonic-slider-modulation-from, 0)) *
+				var(--_sonic-slider-travel)
+		);
+		--_sonic-slider-live-length: calc(
+			(var(--_sonic-slider-live-high) - var(--_sonic-slider-live-low)) * var(--_sonic-slider-travel)
+		);
+		--_sonic-slider-tick-start: calc(
+			(var(--_sonic-slider-modulation-value, 0) - var(--_sonic-slider-modulation-from, 0)) *
+				var(--_sonic-slider-travel) - var(--_sonic-unit) / 2
+		);
+		--_sonic-slider-tick-overhang: calc(
+			(var(--_sonic-slider-modulation-band) - var(--_sonic-slider-groove)) / 2
+		);
+		--_sonic-slider-modulation-tick: color-mix(
+			in oklab,
+			var(--sonic-modulation, var(--_sonic-slider-lit)) 55%,
+			#fff
+		);
+
+		display: block;
+		background: color-mix(in oklab, var(--_sonic-slider-modulation) 50%, transparent);
+
+		&::before,
+		&::after {
+			position: absolute;
+			content: '';
+		}
+
+		&::before {
+			inset: 0 auto 0 var(--_sonic-slider-live-start);
+			inline-size: var(--_sonic-slider-live-length);
+			background: var(--_sonic-slider-modulation);
+			border-radius: inherit;
+		}
+
+		&::after {
+			inset: var(--_sonic-slider-tick-overhang) auto var(--_sonic-slider-tick-overhang)
+				var(--_sonic-slider-tick-start);
+			inline-size: var(--_sonic-unit);
+			background: var(--_sonic-slider-modulation-tick);
+		}
+	}
+
+	:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation {
+		&::before {
+			inset: auto 0 var(--_sonic-slider-live-start);
+			inline-size: auto;
+			block-size: var(--_sonic-slider-live-length);
+		}
+
+		&::after {
+			inset: auto var(--_sonic-slider-tick-overhang) var(--_sonic-slider-tick-start);
+			inline-size: auto;
+			block-size: var(--_sonic-unit);
+		}
+	}
+
 	.sonic-slider-cap {
-		--_sonic-slider-pointer-width: calc(
-			var(--_sonic-slider-track) * var(--_sonic-slider-pointer-ratio)
+		--_sonic-slider-indicator-width: calc(
+			var(--_sonic-slider-breadth) * var(--_sonic-slider-indicator-ratio)
 		);
-		--_sonic-slider-bevel: calc(var(--_sonic-slider-track) * var(--_sonic-slider-bevel-ratio));
-		--_sonic-slider-corner: calc(var(--_sonic-slider-track) * var(--_sonic-slider-radius-ratio));
-		--_sonic-slider-index-inset: calc(
-			var(--_sonic-slider-bevel) + var(--_sonic-slider-track) * 0.1
+		--_sonic-slider-bevel: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-bevel-ratio));
+		--_sonic-slider-corner: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-radius-ratio));
+		--_sonic-slider-indicator-inset: calc(
+			var(--_sonic-slider-bevel) + var(--_sonic-slider-breadth) * 0.1
 		);
 
 		position: absolute;
@@ -278,11 +398,11 @@
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		/* Stops short of the face's edge, where its round ends clash with the straight bevel */
 		&::after {
-			inset: var(--_sonic-slider-index-inset) calc(50% - var(--_sonic-slider-pointer-width) / 2);
+			inset: var(--_sonic-slider-indicator-inset)
+				calc(50% - var(--_sonic-slider-indicator-width) / 2);
 			background: var(--_sonic-ink);
-			border-radius: calc(var(--_sonic-slider-pointer-width) / 2);
+			border-radius: calc(var(--_sonic-slider-indicator-width) / 2);
 			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
 		}
 	}
@@ -294,7 +414,8 @@
 		translate: 0 calc(-1 * var(--_sonic-slider-offset));
 
 		&::after {
-			inset: calc(50% - var(--_sonic-slider-pointer-width) / 2) var(--_sonic-slider-index-inset);
+			inset: calc(50% - var(--_sonic-slider-indicator-width) / 2)
+				var(--_sonic-slider-indicator-inset);
 		}
 	}
 
@@ -306,8 +427,17 @@
 		cursor: var(--_sonic-slider-cursor);
 	}
 
+	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
+	:not([orientation='vertical']) > .sonic-slider > .sonic-slider-readout {
+		--_sonic-slider-readout-at: calc(var(--_sonic-slider-cap) / 2 + var(--_sonic-slider-offset));
+
+		inset-inline: var(--_sonic-slider-readout-at) calc(100cqi - var(--_sonic-slider-readout-at));
+		justify-self: center;
+		position-area: block-start center;
+	}
+
 	@media (forced-colors: active) {
-		:is(.sonic-slider-marks, .sonic-slider-groove, .sonic-slider-modulation) {
+		:is(.sonic-slider-notches, .sonic-slider-groove, .sonic-slider-modulation) {
 			forced-color-adjust: none;
 		}
 
@@ -315,6 +445,12 @@
 			--_sonic-slider-modulation: CanvasText;
 		}
 
+		:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+			--_sonic-slider-modulation-tick: CanvasText;
+
+			background: GrayText;
+		}
+
 		.sonic-slider {
 			--_sonic-slider-buffered: color-mix(in srgb, CanvasText 50%, GrayText);
 		}

package/dist/styles/switch.css

@@ -0,0 +1,347 @@
+@property --_sonic-switch-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 32px;
+}
+
+@layer sonic {
+	:is(sonic-switch, .sonic-switch) {
+		--_sonic-switch-size: var(--sonic-switch-size, 2rem);
+	}
+
+	:has(> .sonic-switch):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-switch:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-switch-size);
+		block-size: var(--_sonic-switch-size);
+		overflow: hidden;
+	}
+
+	.sonic-switch {
+		--_sonic-switch-reach-ratio: var(--sonic-switch-reach-ratio, 0.3);
+		--_sonic-switch-bat-ratio: var(--sonic-switch-bat-ratio, 0.36);
+		--_sonic-switch-bushing-ratio: var(--sonic-switch-bushing-ratio, 0.62);
+		--_sonic-switch-font-ratio: var(--sonic-switch-font-ratio, 0.4);
+		--_sonic-unit: calc(var(--_sonic-switch-size) / 32);
+		--_sonic-switch-reach: calc(var(--_sonic-switch-size) * var(--_sonic-switch-reach-ratio));
+		--_sonic-switch-ball: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bat-ratio));
+		--_sonic-switch-shaft: calc(0.5 * var(--_sonic-switch-ball));
+		--_sonic-switch-along-x: 0;
+		--_sonic-switch-along-y: 1;
+		--_sonic-switch-pan: pan-x;
+		--_sonic-switch-metal: color-mix(in oklab, var(--_sonic-cap) 45%, #fff);
+		--_sonic-switch-metal-shade: color-mix(in oklab, var(--_sonic-cap) 80%, #000);
+
+		display: inline-grid;
+		flex-shrink: 0;
+		grid-template: var(--_sonic-switch-size) / var(--_sonic-switch-size);
+		place-items: center;
+		line-height: 1;
+		user-select: none;
+
+		& > * {
+			grid-area: 1 / 1;
+		}
+	}
+
+	[orientation='horizontal'] > .sonic-switch {
+		--_sonic-switch-along-x: 1;
+		--_sonic-switch-along-y: 0;
+		--_sonic-switch-pan: pan-y;
+	}
+
+	.sonic-switch-position {
+		display: grid;
+		place-items: center;
+		place-self: stretch;
+		padding: 0;
+		font: inherit;
+		font-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio));
+		color: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
+		touch-action: var(--_sonic-switch-pan);
+		cursor: pointer;
+		background: transparent;
+		border: 0;
+
+		&:disabled {
+			cursor: default;
+		}
+
+		&:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&:has([data-sonic-momentary]) {
+			touch-action: none;
+		}
+	}
+
+	.sonic-switch-label {
+		padding: calc(var(--_sonic-switch-size) * 0.12);
+		white-space: nowrap;
+
+		& svg {
+			display: block;
+			inline-size: 1em;
+			block-size: 1em;
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count] {
+		& > :is(.sonic-switch-bushing, .sonic-switch-bat) {
+			grid-area: 2 / 1 / -2 / 2;
+		}
+
+		& > .sonic-switch-position {
+			grid-template: subgrid / subgrid;
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count='2'] {
+		grid-template:
+			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto /
+			minmax(var(--_sonic-switch-size), auto);
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 3 / 2;
+
+			&:last-child {
+				grid-area: 3 / 1 / 5 / 2;
+
+				& > .sonic-switch-label {
+					grid-row: 2;
+				}
+			}
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count='3'] {
+		grid-template:
+			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto /
+			minmax(var(--_sonic-switch-size), auto) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 3 / 2;
+
+			&:last-child {
+				grid-area: 4 / 1 / 6 / 2;
+
+				& > .sonic-switch-label {
+					grid-row: 2;
+				}
+			}
+
+			&:nth-child(2 of .sonic-switch-position) {
+				grid-area: 3 / 1 / 4 / 3;
+
+				& > .sonic-switch-label {
+					grid-column: 2;
+				}
+			}
+		}
+	}
+
+	[orientation='horizontal']
+		> .sonic-switch[data-sonic-position-count]
+		> :is(.sonic-switch-bushing, .sonic-switch-bat) {
+		grid-area: 1 / 2 / 2 / -2;
+	}
+
+	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2'] {
+		grid-template:
+			minmax(var(--_sonic-switch-size), auto) /
+			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 2 / 3;
+
+			&:last-child {
+				grid-area: 1 / 3 / 2 / 5;
+
+				& > .sonic-switch-label {
+					grid-area: 1 / 2;
+				}
+			}
+		}
+	}
+
+	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3'] {
+		grid-template:
+			minmax(var(--_sonic-switch-size), auto) auto /
+			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 2 / 3;
+
+			&:last-child {
+				grid-area: 1 / 4 / 2 / 6;
+
+				& > .sonic-switch-label {
+					grid-area: 1 / 2;
+				}
+			}
+
+			&:nth-child(2 of .sonic-switch-position) {
+				grid-area: 1 / 3 / 3 / 4;
+
+				& > .sonic-switch-label {
+					grid-area: 2 / 1;
+				}
+			}
+		}
+	}
+
+	.sonic-switch-bushing {
+		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
+		aspect-ratio: 1;
+		pointer-events: none;
+		background: radial-gradient(
+			closest-side,
+			color-mix(in oklab, var(--_sonic-cap) 30%, #000) 0 42%,
+			var(--_sonic-switch-metal-shade) 48%,
+			var(--_sonic-cap) 70%,
+			color-mix(in oklab, var(--_sonic-cap) 75%, #fff) 88%,
+			var(--_sonic-switch-metal-shade)
+		);
+		border-radius: 50%;
+		box-shadow:
+			var(--_sonic-rim),
+			calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y)) calc(2 * var(--_sonic-unit))
+				var(--_sonic-drop-shade);
+	}
+
+	.sonic-switch-bat {
+		--_sonic-switch-lean: max(var(--_sonic-switch-at, 0), -1 * var(--_sonic-switch-at, 0));
+		--_sonic-switch-transition:
+			translate 90ms cubic-bezier(0.4, 0, 0.2, 1), inline-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
+			block-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
+			background-position 90ms cubic-bezier(0.4, 0, 0.2, 1);
+		--_sonic-switch-sheen: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-switch-metal) 55%, #fff) 12%,
+			var(--_sonic-switch-metal) 45%,
+			var(--_sonic-switch-metal-shade) 88%
+		);
+		--_sonic-switch-outline: max(0.5px, 0.4 * var(--_sonic-unit));
+		--_sonic-switch-rim: color-mix(in oklab, var(--_sonic-cap) 70%, #000);
+
+		position: relative;
+		z-index: 1;
+		inline-size: var(--_sonic-switch-size);
+		block-size: var(--_sonic-switch-size);
+		pointer-events: none;
+		filter: drop-shadow(var(--_sonic-switch-outline) 0 0 var(--_sonic-switch-rim))
+			drop-shadow(calc(-1 * var(--_sonic-switch-outline)) 0 0 var(--_sonic-switch-rim))
+			drop-shadow(0 var(--_sonic-switch-outline) 0 var(--_sonic-switch-rim))
+			drop-shadow(0 calc(-1 * var(--_sonic-switch-outline)) 0 var(--_sonic-switch-rim))
+			drop-shadow(
+				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-x))
+					calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y))
+					calc(1.5 * var(--_sonic-unit)) var(--_sonic-drop-shade)
+			);
+
+		@media (prefers-reduced-motion: reduce) {
+			--_sonic-switch-transition: none;
+		}
+
+		&::before,
+		&::after {
+			position: absolute;
+			inset: 0;
+			margin: auto;
+			content: '';
+			background: var(--_sonic-switch-sheen);
+			background-size: var(--_sonic-switch-size) var(--_sonic-switch-size);
+			border-radius: 999px;
+			transition: var(--_sonic-switch-transition);
+		}
+
+		&::before {
+			--_sonic-switch-shaft-x: calc(
+				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-x) * var(--_sonic-switch-lean) *
+					var(--_sonic-switch-reach)
+			);
+			--_sonic-switch-shaft-y: calc(
+				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-y) * var(--_sonic-switch-lean) *
+					var(--_sonic-switch-reach)
+			);
+
+			inline-size: var(--_sonic-switch-shaft-x);
+			block-size: var(--_sonic-switch-shaft-y);
+			background-position: calc((var(--_sonic-switch-shaft-x) - var(--_sonic-switch-size)) / 2)
+				calc((var(--_sonic-switch-shaft-y) - var(--_sonic-switch-size)) / 2);
+			translate: calc(
+					var(--_sonic-switch-along-x) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
+				)
+				calc(
+					var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
+				);
+		}
+
+		&::after {
+			inline-size: var(--_sonic-switch-ball);
+			block-size: var(--_sonic-switch-ball);
+			background-position: calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2)
+				calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2);
+			box-shadow:
+				inset 0 0 calc(1.5 * var(--_sonic-unit)) calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / 30%),
+				var(--_sonic-focus-shadow);
+			translate: calc(
+					var(--_sonic-switch-along-x) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach)
+				)
+				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach));
+		}
+	}
+
+	.sonic-switch:has(> .sonic-switch-position:focus-visible) {
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+	}
+
+	.sonic-switch:has(> .sonic-switch-position:disabled) {
+		--_sonic-switch-metal: var(--_sonic-etch);
+		--_sonic-switch-metal-shade: var(--_sonic-etch);
+	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-switch-bushing, .sonic-switch-bat) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-switch {
+			--_sonic-switch-metal: CanvasText;
+			--_sonic-switch-metal-shade: CanvasText;
+		}
+
+		.sonic-switch:has(> .sonic-switch-position:disabled) {
+			--_sonic-switch-metal: GrayText;
+			--_sonic-switch-metal-shade: GrayText;
+		}
+
+		.sonic-switch-bushing {
+			background: Canvas;
+			box-shadow: 0 0 0 1px CanvasText;
+		}
+
+		.sonic-switch-bat {
+			filter: none;
+
+			&::before,
+			&::after {
+				background: var(--_sonic-switch-metal);
+				box-shadow: none;
+			}
+		}
+
+		.sonic-switch-position:focus-visible {
+			outline-offset: 2px;
+		}
+	}
+}