@xsynaptic/sonic-ui 0.25.1 → 0.27.0

package/dist/styles/led.css

@@ -75,7 +75,7 @@
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
 		:where(
 				.sonic-button:is([aria-pressed='true'], [aria-expanded='true']),
-				[momentary]:state(pressed) > .sonic-button,
+				[momentary] > .sonic-button[data-sonic-pressed],
 				.sonic-segmented-option[aria-checked='true'],
 				.sonic-toggle:has(
 					> [role='switch'][aria-checked='true'],
@@ -83,7 +83,7 @@
 				)
 			)
 			*,
-		:where(:state(at-origin):not(:disabled) > .sonic-led)
+		:where(:not(:disabled):has(> [data-sonic-at-origin]) > .sonic-led)
 	) {
 		background:
 			radial-gradient(
@@ -95,8 +95,8 @@
 			var(--_sonic-lens-bezel);
 	}
 
-		.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
-			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
+		.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary] > .sonic-button[data-sonic-pressed],.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:not(:disabled):has( > [data-sonic-at-origin]) > .sonic-led))::after {
 			background: radial-gradient(
 				closest-side,
 				color-mix(
@@ -114,7 +114,7 @@
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
 		:where(
 				.sonic-button:is([aria-pressed='true'], [aria-expanded='true']),
-				[momentary]:state(pressed) > .sonic-button,
+				[momentary] > .sonic-button[data-sonic-pressed],
 				.sonic-segmented-option[aria-checked='true'],
 				.sonic-toggle:has(
 					> [role='switch'][aria-checked='true'],
@@ -122,13 +122,13 @@
 				)
 			)
 			*,
-		:where(:state(at-origin):not(:disabled) > .sonic-led)
+		:where(:not(:disabled):has(> [data-sonic-at-origin]) > .sonic-led)
 	) {
 			background: none;
 	}
 
-			.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
-			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
+			.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary] > .sonic-button[data-sonic-pressed],.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:not(:disabled):has( > [data-sonic-at-origin]) > .sonic-led))::after {
 				background: var(--_sonic-lit);
 				box-shadow: 0 0 0 1px CanvasText;
 			}

package/dist/styles/material/cap.css

@@ -1,3 +1,9 @@
+@property --_sonic-rim-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.material {
 	:is(
 		.sonic-dial,
@@ -183,8 +189,13 @@
 		}
 	}
 
-	:state(editing)
-		> :is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+	:is(
+		.sonic-dial,
+		.sonic-number,
+		.sonic-slider,
+		.sonic-waveform,
+		.sonic-wavestrip
+	)[data-sonic-editing] {
 		--_sonic-cap: var(--_sonic-cap-hover);
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 	}

package/dist/styles/material/pane.css

@@ -1,3 +1,9 @@
+@property --_sonic-glass-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 2px;
+}
+
 @keyframes sonic-glass-breathe {
 	to {
 		opacity: calc(0.4 * min(1, var(--_sonic-glass-texture)));
@@ -84,7 +90,7 @@
 			}
 
 			@media (prefers-reduced-motion: no-preference) {
-				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has(:state(dragging))::before {
+				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has([data-sonic-dragging])::before {
 					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 				}
 

package/dist/styles/material/readout.css

@@ -4,6 +4,12 @@
 	initial-value: 24px;
 }
 
+@property --_sonic-readout-shine-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.material {
 	:is(.sonic-dial, .sonic-envelope, .sonic-slider, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
 		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
@@ -26,8 +32,10 @@
 		--_sonic-glass-own: var(--sonic-readout-glass);
 		--_sonic-glass-edge-colour-own: var(--sonic-readout-edge);
 		--_sonic-glass-edge-width-own: var(--sonic-readout-edge-width);
+		--_sonic-readout-shine-width: max(1px, round(var(--_sonic-unit), var(--_sonic-snap)));
 
 		box-sizing: border-box;
+		display: none;
 		place-items: center;
 		min-inline-size: calc(1.75 * var(--_sonic-readout-size));
 		block-size: var(--_sonic-readout-size);
@@ -56,7 +64,7 @@
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
 				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-readout-depth)), transparent),
-			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+			inset 0 0 0 var(--_sonic-readout-shine-width)
 				color-mix(in srgb, var(--_sonic-shine) calc(8% * var(--_sonic-readout-depth)), transparent);
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
@@ -101,7 +109,7 @@
 				}
 		}
 
-		:state(editing) > :is(.sonic-dial,.sonic-slider,.sonic-waveform,.sonic-wavestrip) > :is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout) {
+		[data-sonic-editing]:is(.sonic-dial,.sonic-slider,.sonic-waveform,.sonic-wavestrip) > :is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout) {
 			pointer-events: auto;
 			cursor: text;
 		}

package/dist/styles/material/reticle.css

@@ -30,8 +30,8 @@
 			scale var(--_sonic-fade-duration) ease-out;
 	}
 
-	:state(dragging) > * > .sonic-xy-reticle,
-	:state(dragging) > * > .sonic-envelope-reticle::before {
+	[data-sonic-dragging] > .sonic-xy-reticle,
+	[data-sonic-dragging] > .sonic-envelope-reticle::before {
 		opacity: calc(1 - var(--_sonic-relief));
 		scale: 1;
 	}

package/dist/styles/meter.css

@@ -84,11 +84,11 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
-	:is([value], :state(ladder)) > .sonic-meter {
+	:is([value] > .sonic-meter, .sonic-meter[data-sonic-ladder]) {
 		--_sonic-meter-clip-space: 0px;
 	}
 
-	:state(ladder) > .sonic-meter {
+	.sonic-meter[data-sonic-ladder] {
 		--_sonic-meter-gap: 0px;
 	}
 
@@ -173,7 +173,7 @@
 		        mask-composite: add;
 	}
 
-	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+	.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar) {
 		--_sonic-meter-pitch: calc(
 			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
 		);
@@ -251,8 +251,8 @@
 		block-size: auto;
 	}
 
-	[orientation='horizontal']:state(ladder)
-		> .sonic-meter
+	[orientation='horizontal']
+		> .sonic-meter[data-sonic-ladder]
 		> :is(.sonic-meter-segments, .sonic-meter-bar) {
 		--_sonic-meter-segment-mask: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
@@ -262,14 +262,14 @@
 			0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat;
 	}
 
-	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
+	.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 		position: absolute;
 		inset: 0;
 		content: '';
 		background: var(--_sonic-lens-glint) 0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
-	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
+	.sonic-meter[data-sonic-ladder] > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
 				color-mix(in srgb, var(--_sonic-shine) calc(45% * var(--_sonic-relief)), transparent),
@@ -278,8 +278,8 @@
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
-	[orientation='horizontal']:state(ladder)
-		> .sonic-meter
+	[orientation='horizontal']
+		> .sonic-meter[data-sonic-ladder]
 		> :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 		background-repeat: repeat-x;
 		background-position: 0 0;
@@ -368,7 +368,7 @@
 			opacity: var(--_sonic-meter-clipped, 0);
 		}
 
-	:is([value], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
+	:is([value] > .sonic-meter, .sonic-meter[data-sonic-ladder]) > .sonic-meter-clip {
 		display: none;
 	}
 
@@ -402,7 +402,7 @@
 			background: Mark;
 		}
 
-		:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
+		.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 			display: none;
 		}
 	}

package/dist/styles/number.css

@@ -68,7 +68,7 @@
 		white-space: nowrap;
 	}
 
-	:state(editing) > .sonic-number > .sonic-number-value {
+	.sonic-number[data-sonic-editing] > .sonic-number-value {
 		visibility: hidden;
 	}
 

package/dist/styles/region.css

@@ -1,5 +1,11 @@
 @layer sonic.material, sonic.control;
 
+@property --_sonic-region-bracket-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	sonic-region {
 		display: none;

package/dist/styles/segmented.css

@@ -99,14 +99,14 @@
 		transition: color var(--_sonic-fade-duration) ease-out;
 	}
 
-	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled),
+	.sonic-segmented-option:where([data-sonic-active]):not(:disabled),
 	.sonic-segmented-option[aria-checked='true'] {
 		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
 		--_sonic-keycap-scale: var(--_sonic-segmented-latched-scale);
 		--_sonic-keycap-drop: var(--_sonic-press-drop);
 	}
 
-	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled) {
+	.sonic-segmented-option:where([data-sonic-active]):not(:disabled) {
 		--_sonic-keycap-scale: var(--_sonic-segmented-press-scale);
 	}
 
@@ -128,7 +128,7 @@
 	.sonic-segmented-option:not([aria-checked='true'], :disabled):is(
 			:focus-visible,
 			:active,
-			[data-sonic-pressed]
+			[data-sonic-active]
 		) {
 		color: var(--_sonic-ink-lift);
 	}

package/dist/styles/slider.css

@@ -128,7 +128,7 @@
 		}
 
 	:where(:not(:disabled)) > .sonic-slider:focus-visible,
-	:state(dragging) > .sonic-slider {
+	.sonic-slider[data-sonic-dragging] {
 		--_sonic-slider-groove-held: 1;
 	}
 
@@ -160,11 +160,11 @@
 		touch-action: var(--sonic-touch-action, pan-x);
 	}
 
-	:state(dragging) > .sonic-slider {
+	.sonic-slider[data-sonic-dragging] {
 		--_sonic-cap: var(--_sonic-cap-hover);
 	}
 
-	:state(springing) > .sonic-slider {
+	.sonic-slider[data-sonic-springing] {
 		/* A damped spring with 10% bounce, sampled into `linear()` */
 		transition: --_sonic-slider-value 200ms
 			linear(
@@ -214,7 +214,7 @@
 
 		@media (prefers-reduced-motion: reduce) {
 
-	:state(springing) > .sonic-slider {
+	.sonic-slider[data-sonic-springing] {
 			transition: none;
 	}
 		}
@@ -232,7 +232,7 @@
 		--_sonic-slider-scale-band: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-ratio));
 	}
 
-	[groove-press='none']:not(:state(dragging)) > .sonic-slider {
+	[groove-press='none'] > .sonic-slider:not([data-sonic-dragging]) {
 		cursor: default;
 	}
 
@@ -383,7 +383,7 @@
 		display: none;
 	}
 
-	:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+	.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation {
 		--_sonic-slider-live-low: min(
 			var(--_sonic-slider-value, 0),
 			var(--_sonic-slider-modulation-value, 0)
@@ -416,31 +416,31 @@
 		background: color-mix(in oklab, var(--_sonic-slider-modulation) 50%, transparent);
 	}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before,:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::before,:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::after {
 			position: absolute;
 			content: '';
 		}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::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;
 		}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::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);
 		}
-		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
+		:is(:where([orientation='vertical']) > .sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::before {
 			inset: auto 0 var(--_sonic-slider-live-start);
 			inline-size: auto;
 			block-size: var(--_sonic-slider-live-length);
 		}
 
-		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(:where([orientation='vertical']) > .sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::after {
 			inset: auto var(--_sonic-slider-tick-overhang) var(--_sonic-slider-tick-start);
 			inline-size: auto;
 			block-size: var(--_sonic-unit);
@@ -538,7 +538,7 @@
 			--_sonic-slider-modulation: CanvasText;
 		}
 
-		:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+		.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation {
 			--_sonic-slider-modulation-tick: CanvasText;
 
 			background: GrayText;

package/dist/styles/switch.css

@@ -12,6 +12,12 @@
 	initial-value: 0;
 }
 
+@property --_sonic-switch-outline {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	:is(sonic-switch, .sonic-switch) {
 		--_sonic-switch-size: var(--sonic-switch-size, 2rem);

package/dist/styles/toggle.css

@@ -123,7 +123,7 @@
 		touch-action: pan-x;
 	}
 
-	:state(dragging) > .sonic-toggle {
+	.sonic-toggle[data-sonic-dragging] {
 		transition: --_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
@@ -179,7 +179,7 @@
 	}
 
 	/* Held, never resting: the chosen position's cap stands as proud as any other */
-	.sonic-toggle:has(> .sonic-toggle-position[data-sonic-pressed]):has(
+	.sonic-toggle:has(> .sonic-toggle-position[data-sonic-active]):has(
 			> .sonic-toggle-position:not(:disabled)
 		) {
 		--_sonic-toggle-sink: calc(var(--_sonic-keycap-depth) / 2);
@@ -438,7 +438,7 @@
 
 	@media (prefers-reduced-motion: reduce) {
 		.sonic-toggle,
-		:state(dragging) > .sonic-toggle,
+		.sonic-toggle[data-sonic-dragging],
 		.sonic-toggle-well,
 		.sonic-toggle-cap,
 		.sonic-toggle-legend {

package/dist/styles/waveform.css

@@ -108,6 +108,12 @@
 	initial-value: rgb(200 200 208);
 }
 
+@property --_sonic-waveform-line {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	:is(sonic-waveform, .sonic-waveform) {
 		--_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
@@ -185,7 +191,7 @@
 		block-size: 100%;
 	}
 
-	:state(dragging) > .sonic-waveform {
+	.sonic-waveform[data-sonic-dragging] {
 		cursor: grabbing;
 	}
 

package/dist/styles/wavestrip.css

@@ -72,6 +72,12 @@
 	initial-value: 0;
 }
 
+@property --_sonic-marker-edge {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @property --_sonic-marker-step {
 	syntax: '<length>';
 	inherits: true;

package/dist/styles/xy.css

@@ -6,6 +6,18 @@
 	initial-value: 128px;
 }
 
+@property --_sonic-xy-line {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
+@property --_sonic-xy-puck-ring-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 2px;
+}
+
 @layer sonic.control {
 	:is(sonic-xy, .sonic-xy) {
 		--_sonic-xy-size: var(--sonic-xy-size, 8rem);
@@ -165,7 +177,7 @@
 		}
 
 	@media (hover: hover) {
-		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
+		:not(:disabled) > .sonic-xy:where(:not([data-sonic-dragging])) > .sonic-xy-puck:hover {
 			--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
 		}
 	}
@@ -175,7 +187,7 @@
 		--_sonic-xy-puck-ring: var(--_sonic-focus);
 	}
 
-	:state(dragging) > .sonic-xy > .sonic-xy-puck {
+	.sonic-xy[data-sonic-dragging] > .sonic-xy-puck {
 		--_sonic-xy-puck-glow: color-mix(
 			in oklab,
 			var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
@@ -213,7 +225,7 @@
 				outline-style: none;
 			}
 
-		:state(dragging) > .sonic-xy > .sonic-xy-puck {
+		.sonic-xy[data-sonic-dragging] > .sonic-xy-puck {
 			--_sonic-xy-puck-fill: Canvas;
 			--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",

package/dist/dev/elements/display-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display-element.js","names":[],"sources":["../../../src/elements/display-element.ts"],"sourcesContent":["import type { Surface, SurfaceFrame } from '#lib/canvas-surface.ts';\nimport type { Decibels } from '#lib/units.ts';\n\nimport { SonicElement } from '#elements/sonic-element.ts';\nimport { bindSurface } from '#lib/canvas-surface.ts';\n\ndeclare const __DEV__: boolean;\n\nexport abstract class SonicDisplayElement<\n\tColour extends string,\n\tNumeric extends string = never,\n> extends SonicElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicElement.observedAttributes,\n\t\t'fill',\n\t\t'max',\n\t\t'min',\n\t];\n\n\tget analyser(): AnalyserNode | undefined {\n\t\treturn this.#analyser;\n\t}\n\n\tset analyser(node: AnalyserNode | null | undefined) {\n\t\tthis.#analyser = node ?? undefined;\n\t\tthis.#surface?.requestFrame();\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget fill(): boolean {\n\t\treturn this.hasAttribute('fill');\n\t}\n\n\tset fill(isFilling: boolean) {\n\t\tthis.reflect('fill', isFilling);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget max(): Decibels {\n\t\treturn this.numberAttribute('max', 0);\n\t}\n\n\tset max(decibels: number | undefined) {\n\t\tthis.reflect('max', decibels);\n\t}\n\n\tget min(): Decibels {\n\t\treturn this.numberAttribute('min', -90);\n\t}\n\n\tset min(decibels: number | undefined) {\n\t\tthis.reflect('min', decibels);\n\t}\n\n\tprotected abstract readonly canvas: HTMLCanvasElement;\n\n\tprotected abstract readonly colours: Record<Colour, `--_sonic-${string}`>;\n\n\tprotected abstract readonly control: HTMLElement;\n\n\tprotected abstract readonly numbers: Record<Numeric, `--_sonic-${string}`>;\n\n\tprotected abstract readonly sheet: string;\n\n\tprotected abstract readonly sizeProperty: `--_sonic-${string}`;\n\n\t#analyser: AnalyserNode | undefined;\n\n\t#buffer = new Float32Array(0);\n\n\t#surface: Surface | undefined;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'fill') this.#surface?.setFill(this.fill);\n\t\tthis.#surface?.invalidate();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('analyser', 'fill', 'max', 'min');\n\t\tsuper.connectedCallback();\n\t}\n\n\t/** One level per bin, as `AnalyserNode.getFloatFrequencyData` fills it */\n\tpush(decibels: Float32Array): void {\n\t\tthis.receive(decibels);\n\t\tthis.#surface?.requestFrame();\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- the wave controls keep their own copy of the surface binding\n\trepaint(): void {\n\t\tthis.#surface?.rebuild();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\n\t\tthis.keepControl(control, signal);\n\t\tthis.#surface = bindSurface({\n\t\t\tcanvas: this.canvas,\n\t\t\tcolours: this.colours,\n\t\t\tfill: { control, sizeProperty: this.sizeProperty },\n\t\t\tnumbers: this.numbers,\n\t\t\tpaint: (context, frame) => {\n\t\t\t\tthis.#paint(context, frame);\n\t\t\t},\n\t\t\tsignal,\n\t\t});\n\t\tif (__DEV__) this.checkStyles(control, this.sheet);\n\t\tthis.#surface.setFill(this.fill);\n\t}\n\n\tprotected abstract paint(\n\t\tcontext: CanvasRenderingContext2D,\n\t\tframe: SurfaceFrame<Colour, never, Numeric>,\n\t): void;\n\n\tprotected abstract pull(analyser: AnalyserNode, buffer: Float32Array<ArrayBuffer>): void;\n\n\tprotected abstract receive(frame: Float32Array): void;\n\n\tprotected surface(): Surface | undefined {\n\t\treturn this.#surface;\n\t}\n\n\t// The node never signals that sound came back, so every paint pulls\n\t#paint(context: CanvasRenderingContext2D, frame: SurfaceFrame<Colour, never, Numeric>): void {\n\t\tconst analyser = this.isDisabled() ? undefined : this.#analyser;\n\n\t\tif (analyser) {\n\t\t\tif (this.#buffer.length !== analyser.frequencyBinCount) {\n\t\t\t\tthis.#buffer = new Float32Array(analyser.frequencyBinCount);\n\t\t\t}\n\t\t\tthis.pull(analyser, this.#buffer);\n\t\t\tthis.receive(this.#buffer);\n\t\t}\n\t\tthis.paint(context, frame);\n\t\tif (analyser) this.#surface?.requestFrame();\n\t}\n}\n"],"mappings":";;;;AAQA,IAAsB,sBAAtB,cAGU,aAAa;CACtB,OAAyB,qBAAqB;EAC7C,GAAG,aAAa;EAChB;EACA;EACA;CACD;CAEA,IAAI,WAAqC;EACxC,OAAO,KAAK;CACb;CAEA,IAAI,SAAS,MAAuC;EACnD,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU,aAAa;CAC7B;CAGA,IAAI,OAAgB;EACnB,OAAO,KAAK,aAAa,MAAM;CAChC;CAEA,IAAI,KAAK,WAAoB;EAC5B,KAAK,QAAQ,QAAQ,SAAS;CAC/B;CAGA,IAAI,MAAgB;EACnB,OAAO,KAAK,gBAAgB,OAAO,CAAC;CACrC;CAEA,IAAI,IAAI,UAA8B;EACrC,KAAK,QAAQ,OAAO,QAAQ;CAC7B;CAEA,IAAI,MAAgB;EACnB,OAAO,KAAK,gBAAgB,OAAO,GAAG;CACvC;CAEA,IAAI,IAAI,UAA8B;EACrC,KAAK,QAAQ,OAAO,QAAQ;CAC7B;CAcA;CAEA,0BAAU,IAAI,aAAa,CAAC;CAE5B;CAEA,yBAAyB,MAAoB;EAC5C,IAAI,SAAS,QAAQ,KAAK,UAAU,QAAQ,KAAK,IAAI;EACrD,KAAK,UAAU,WAAW;CAC3B;CAEA,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,YAAY,QAAQ,OAAO,KAAK;EACvD,MAAM,kBAAkB;CACzB;;CAGA,KAAK,UAA8B;EAClC,KAAK,QAAQ,QAAQ;EACrB,KAAK,UAAU,aAAa;CAC7B;CAGA,UAAgB;EACf,KAAK,UAAU,QAAQ;CACxB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,UAAU,KAAK;EAErB,KAAK,YAAY,SAAS,MAAM;EAChC,KAAK,WAAW,YAAY;GAC3B,QAAQ,KAAK;GACb,SAAS,KAAK;GACd,MAAM;IAAE;IAAS,cAAc,KAAK;GAAa;GACjD,SAAS,KAAK;GACd,QAAQ,SAAS,UAAU;IAC1B,KAAK,OAAO,SAAS,KAAK;GAC3B;GACA;EACD,CAAC;EACY,KAAK,YAAY,SAAS,KAAK,KAAK;EACjD,KAAK,SAAS,QAAQ,KAAK,IAAI;CAChC;CAWA,AAAU,UAA+B;EACxC,OAAO,KAAK;CACb;CAGA,OAAO,SAAmC,OAAmD;EAC5F,MAAM,WAAW,KAAK,WAAW,IAAI,SAAY,KAAK;EAEtD,IAAI,UAAU;GACb,IAAI,KAAK,QAAQ,WAAW,SAAS,mBACpC,KAAK,UAAU,IAAI,aAAa,SAAS,iBAAiB;GAE3D,KAAK,KAAK,UAAU,KAAK,OAAO;GAChC,KAAK,QAAQ,KAAK,OAAO;EAC1B;EACA,KAAK,MAAM,SAAS,KAAK;EACzB,IAAI,UAAU,KAAK,UAAU,aAAa;CAC3C;AACD"}