@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/styles/waveform.css

@@ -0,0 +1,173 @@
+@property --_sonic-waveform-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 96px;
+}
+
+@property --_sonic-waveform-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 320px;
+}
+
+@property --_sonic-waveform-label-inset {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
+@property --_sonic-waveform-wave {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-waveform-wave-edge {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(110 70 5);
+}
+
+@property --_sonic-waveform-grid {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-waveform-hatch {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-waveform-marker {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(200 200 208);
+}
+
+@layer sonic {
+	:is(sonic-waveform, .sonic-waveform) {
+		--_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
+		--_sonic-waveform-length: var(--sonic-waveform-length, 20rem);
+	}
+
+	:has(> .sonic-waveform):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-waveform:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-waveform-length);
+		block-size: var(--_sonic-waveform-size);
+	}
+
+	.sonic-waveform {
+		--_sonic-waveform-inset: calc(var(--_sonic-waveform-size) * 0.06);
+		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
+		--_sonic-waveform-line: max(1px, var(--_sonic-unit));
+		--_sonic-waveform-lit: var(--_sonic-lit);
+		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
+		--_sonic-waveform-wave-edge: color-mix(in oklab, var(--_sonic-waveform-lit) 45%, #000);
+		--_sonic-waveform-grid: var(--_sonic-etch);
+		--_sonic-waveform-hatch: var(--_sonic-etch);
+		--_sonic-waveform-marker: var(--sonic-marker, var(--_sonic-ink));
+		--_sonic-waveform-label-inset: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-label-inset-ratio, 0.08)
+		);
+
+		inline-size: var(--_sonic-waveform-length);
+		block-size: var(--_sonic-waveform-size);
+		padding: var(--_sonic-waveform-inset);
+		container-type: size;
+
+		/* A label riding in from the far side would otherwise widen the page */
+		overflow: hidden;
+		touch-action: pan-y;
+		cursor: grab;
+		border-radius: calc(var(--_sonic-waveform-size) * 0.08);
+		box-shadow: var(--_sonic-focus-shadow);
+	}
+
+	:state(dragging) > .sonic-waveform {
+		cursor: grabbing;
+	}
+
+	[dimmed] > .sonic-waveform {
+		--_sonic-waveform-lit: var(--_sonic-lit-off);
+	}
+
+	:disabled > .sonic-waveform {
+		--_sonic-waveform-lit: var(--_sonic-lit-disabled);
+
+		cursor: default;
+	}
+
+	.sonic-waveform-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
+		position: absolute;
+		inset-block: var(--_sonic-waveform-inset);
+		inset-inline-start: calc(var(--_sonic-waveform-inset) - var(--_sonic-waveform-line) / 2);
+		inline-size: var(--_sonic-waveform-line);
+		pointer-events: none;
+		translate: 50cqi;
+	}
+
+	.sonic-waveform-playhead {
+		background: var(--_sonic-ink);
+	}
+
+	.sonic-waveform-ghost {
+		background: var(--_sonic-etch);
+	}
+
+	.sonic-waveform-label {
+		position: absolute;
+		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-inset));
+		inset-inline-start: var(--_sonic-waveform-inset);
+		font-size: calc(var(--_sonic-waveform-size) * var(--sonic-waveform-label-font-ratio, 0.13));
+		line-height: 1;
+		color: var(--_sonic-waveform-marker);
+		white-space: nowrap;
+		pointer-events: none;
+	}
+
+	.sonic-waveform-label[data-sonic-dimmed] {
+		color: color-mix(in oklab, var(--_sonic-waveform-marker) 50%, transparent);
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
+	@media (forced-colors: active) {
+		.sonic-waveform {
+			--_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
+			--_sonic-waveform-wave-edge: rgb(from CanvasText r g b / 100%);
+			--_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-hatch: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-marker: rgb(from CanvasText r g b / 100%);
+		}
+
+		:disabled > .sonic-waveform {
+			--_sonic-waveform-wave: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-wave-edge: rgb(from GrayText r g b / 100%);
+		}
+
+		:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-waveform-playhead {
+			background: CanvasText;
+		}
+
+		.sonic-waveform-ghost {
+			background: Highlight;
+		}
+	}
+}

package/dist/styles/wavestrip.css

@@ -0,0 +1,215 @@
+@property --_sonic-wavestrip-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 56px;
+}
+
+@property --_sonic-wavestrip-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 256px;
+}
+
+@property --_sonic-wavestrip-bar-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 3px;
+}
+
+@property --_sonic-wavestrip-bar-gap-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.33;
+}
+
+@property --_sonic-wavestrip-bar-radius-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.5;
+}
+
+@property --_sonic-wavestrip-wave {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-wavestrip-buffered {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(128 128 136);
+}
+
+@property --_sonic-wavestrip-played {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-wavestrip-scrub {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(250 210 140);
+}
+
+@property --_sonic-marker-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
+@property --_sonic-cancel-zone {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 48px;
+}
+
+@layer sonic {
+	:is(sonic-wavestrip, .sonic-wavestrip) {
+		--_sonic-wavestrip-size: var(--sonic-wavestrip-size, 3.5rem);
+		--_sonic-wavestrip-length: var(--sonic-wavestrip-length, 16rem);
+	}
+
+	:has(> .sonic-wavestrip):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-wavestrip:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-wavestrip-length);
+		block-size: var(--_sonic-wavestrip-size);
+	}
+
+	.sonic-wavestrip {
+		--_sonic-cancel-zone: var(--sonic-cancel-zone, 48px);
+		--_sonic-wavestrip-bar-pitch: var(--sonic-wavestrip-bar-pitch, 3px);
+		--_sonic-wavestrip-bar-gap-ratio: var(--sonic-wavestrip-bar-gap-ratio, 0.33);
+		--_sonic-wavestrip-bar-radius-ratio: var(--sonic-wavestrip-bar-radius-ratio, 0.5);
+		--_sonic-wavestrip-marker-ratio: var(--sonic-wavestrip-marker-ratio, 0.065);
+		--_sonic-wavestrip-inset: calc(var(--_sonic-wavestrip-size) * 0.1);
+		--_sonic-unit: calc(var(--_sonic-wavestrip-size) / 32);
+		--_sonic-wavestrip-lit: var(--_sonic-lit);
+		--_sonic-marker-size: calc(var(--_sonic-wavestrip-size) * var(--_sonic-wavestrip-marker-ratio));
+		--_sonic-marker-default: var(--sonic-marker, var(--_sonic-ink));
+		--_sonic-wavestrip-wave: var(
+			--sonic-wave,
+			color-mix(in oklab, var(--_sonic-ink) 30%, var(--_sonic-unlit))
+		);
+		--_sonic-wavestrip-buffered: var(
+			--sonic-buffered,
+			color-mix(in oklab, var(--_sonic-ink) 50%, var(--_sonic-unlit))
+		);
+		--_sonic-wavestrip-played: var(--_sonic-wavestrip-lit);
+		--_sonic-wavestrip-scrub: var(--sonic-scrub, color-mix(in oklab, var(--_sonic-lit) 55%, #fff));
+
+		inline-size: var(--_sonic-wavestrip-length);
+		block-size: var(--_sonic-wavestrip-size);
+		padding: var(--_sonic-wavestrip-inset);
+		container-type: size;
+		touch-action: pan-y;
+		cursor: ew-resize;
+		border-radius: calc(var(--_sonic-wavestrip-size) * 0.15);
+		box-shadow: var(--_sonic-focus-shadow);
+	}
+
+	[dimmed] > .sonic-wavestrip {
+		--_sonic-wavestrip-lit: var(--_sonic-lit-off);
+	}
+
+	:disabled > .sonic-wavestrip {
+		--_sonic-wavestrip-lit: var(--_sonic-lit-disabled);
+
+		cursor: default;
+	}
+
+	.sonic-wavestrip-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.sonic-wavestrip-markers {
+		position: absolute;
+		inset: var(--_sonic-wavestrip-inset);
+		pointer-events: none;
+	}
+
+	:is(.sonic-wavestrip-marker, .sonic-wavestrip-region) {
+		--_sonic-marker-colour: var(--_sonic-marker, var(--_sonic-marker-default));
+
+		position: absolute;
+
+		&[data-sonic-dimmed] {
+			--_sonic-marker-colour: color-mix(
+				in oklab,
+				var(--_sonic-marker, var(--_sonic-marker-default)) 45%,
+				var(--_sonic-glass)
+			);
+		}
+	}
+
+	.sonic-wavestrip-marker {
+		inset: 0 auto auto calc(var(--_sonic-marker-from, 0) * 100% - var(--_sonic-marker-size) / 2);
+		inline-size: var(--_sonic-marker-size);
+		block-size: var(--_sonic-marker-size);
+		background: color-mix(in oklab, var(--_sonic-marker-colour) 85%, transparent);
+		border-radius: 50%;
+		box-shadow: 0 0 0 max(1px, 0.5 * var(--_sonic-unit)) var(--_sonic-glass);
+	}
+
+	.sonic-wavestrip-region {
+		inset: 0 auto 0 calc(var(--_sonic-marker-from, 0) * 100%);
+		box-sizing: border-box;
+		inline-size: calc((var(--_sonic-marker-to, 0) - var(--_sonic-marker-from, 0)) * 100%);
+		background: color-mix(in oklab, var(--_sonic-marker-colour) 16%, transparent);
+		border-inline: max(1px, var(--_sonic-unit)) solid
+			color-mix(in oklab, var(--_sonic-marker-colour) 55%, transparent);
+	}
+
+	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
+	.sonic-wavestrip-readout {
+		--_sonic-wavestrip-readout-inset: calc(
+			var(--_sonic-wavestrip-inset) + var(--_sonic-wavestrip-readout-at, 0) * 100cqi
+		);
+
+		inset-inline: var(--_sonic-wavestrip-readout-inset)
+			calc(100cqi + 2 * var(--_sonic-wavestrip-inset) - var(--_sonic-wavestrip-readout-inset));
+		justify-self: center;
+		position-area: block-start center;
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */
+	@media (forced-colors: active) {
+		.sonic-wavestrip {
+			--_sonic-wavestrip-lit: Highlight;
+			--_sonic-wavestrip-wave: rgb(from GrayText r g b / 100%);
+			--_sonic-wavestrip-buffered: rgb(
+				from color-mix(in srgb, CanvasText 50%, GrayText) r g b / 100%
+			);
+			--_sonic-wavestrip-played: rgb(from var(--_sonic-wavestrip-lit) r g b / 100%);
+			--_sonic-wavestrip-scrub: rgb(from CanvasText r g b / 100%);
+		}
+
+		:is(.sonic-wavestrip-marker, .sonic-wavestrip-region) {
+			--_sonic-marker-colour: CanvasText;
+
+			forced-color-adjust: none;
+
+			&[data-sonic-dimmed] {
+				--_sonic-marker-colour: GrayText;
+			}
+		}
+
+		.sonic-wavestrip-marker {
+			background: var(--_sonic-marker-colour);
+			box-shadow: 0 0 0 max(1px, 0.5 * var(--_sonic-unit)) Canvas;
+		}
+
+		.sonic-wavestrip-region {
+			background: none;
+			border-inline-color: var(--_sonic-marker-colour);
+		}
+	}
+}

package/dist/styles/xy.css

@@ -0,0 +1,204 @@
+@property --_sonic-xy-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 128px;
+}
+
+@layer sonic {
+	:is(sonic-xy, .sonic-xy) {
+		--_sonic-xy-size: var(--sonic-xy-size, 8rem);
+		--_sonic-xy-aspect-ratio: var(--sonic-xy-aspect-ratio, 1);
+	}
+
+	:has(> .sonic-xy):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-xy:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-xy-size) * var(--_sonic-xy-aspect-ratio));
+		block-size: var(--_sonic-xy-size);
+	}
+
+	.sonic-xy {
+		--_sonic-xy-puck-ratio: var(--sonic-xy-puck-ratio, 0.2);
+		--_sonic-xy-radius-ratio: var(--sonic-xy-radius-ratio, 0.06);
+		--_sonic-xy-inset-ratio: var(--sonic-xy-inset-ratio, 0.04);
+		--_sonic-unit: calc(var(--_sonic-xy-size) / 96);
+		--_sonic-xy-lit: var(--_sonic-lit);
+		--_sonic-xy-cursor: grab;
+		--_sonic-xy-puck: calc(var(--_sonic-xy-size) * var(--_sonic-xy-puck-ratio));
+		--_sonic-xy-inset: calc(var(--_sonic-xy-size) * var(--_sonic-xy-inset-ratio));
+		--_sonic-xy-travel-x: calc(100cqi - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
+		--_sonic-xy-travel-y: calc(100cqb - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
+
+		inline-size: calc(var(--_sonic-xy-size) * var(--_sonic-xy-aspect-ratio));
+		block-size: var(--_sonic-xy-size);
+		container-type: size;
+		touch-action: none;
+		cursor: crosshair;
+		border-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+	}
+
+	:disabled > .sonic-xy {
+		--_sonic-xy-lit: var(--_sonic-lit-disabled);
+		--_sonic-xy-cursor: default;
+
+		cursor: default;
+	}
+
+	.sonic-xy-field {
+		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), 1px));
+		--_sonic-xy-x-low: min(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
+		--_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
+		--_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
+		--_sonic-xy-y-high: max(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
+
+		position: absolute;
+		inset: var(--_sonic-xy-inset);
+		pointer-events: none;
+
+		&::before,
+		&::after {
+			position: absolute;
+			content: '';
+		}
+
+		&::before {
+			inset: auto 0
+				calc(
+					var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y) +
+						(var(--_sonic-xy-puck) - var(--_sonic-xy-line)) / 2
+				);
+			block-size: var(--_sonic-xy-line);
+			background:
+				linear-gradient(
+					to right,
+					transparent
+						calc(
+							var(--_sonic-xy-x-low) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
+								sign(var(--_sonic-xy-x-low))
+						),
+					var(--_sonic-xy-lit) 0
+						calc(
+							var(--_sonic-xy-x-high) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
+								(2 - sign(1 - var(--_sonic-xy-x-high)))
+						),
+					transparent 0
+				),
+				var(--_sonic-unlit);
+		}
+
+		&::after {
+			inset: 0 auto 0
+				calc(
+					var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x) +
+						(var(--_sonic-xy-puck) - var(--_sonic-xy-line)) / 2
+				);
+			inline-size: var(--_sonic-xy-line);
+			background:
+				linear-gradient(
+					to top,
+					transparent
+						calc(
+							var(--_sonic-xy-y-low) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
+								sign(var(--_sonic-xy-y-low))
+						),
+					var(--_sonic-xy-lit) 0
+						calc(
+							var(--_sonic-xy-y-high) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
+								(2 - sign(1 - var(--_sonic-xy-y-high)))
+						),
+					transparent 0
+				),
+				var(--_sonic-unlit);
+		}
+	}
+
+	.sonic-xy-puck {
+		--_sonic-xy-star: var(--_sonic-xy-lit);
+		--_sonic-xy-star-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
+		--_sonic-xy-star-glow: transparent;
+
+		position: absolute;
+		inset: auto auto
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
+		inline-size: var(--_sonic-xy-puck);
+		block-size: var(--_sonic-xy-puck);
+		cursor: var(--_sonic-xy-cursor);
+		border-radius: 50%;
+		box-shadow: var(--_sonic-focus-shadow);
+		filter: drop-shadow(0 0 calc(0.1 * var(--_sonic-xy-puck)) var(--_sonic-xy-star-glow));
+		transition:
+			box-shadow 120ms ease-out,
+			filter 120ms ease-out;
+
+		&::before {
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			background: var(--_sonic-xy-star);
+			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M50 0C52 38 62 48 100 50C62 52 52 62 50 100C48 62 38 52 0 50C38 48 48 38 50 0Z'/%3E%3C/svg%3E")
+				center / 100% 100% no-repeat;
+			transition: background-color 120ms ease-out;
+		}
+	}
+
+	@media (hover: hover) {
+		:not(:disabled) > .sonic-xy > .sonic-xy-puck:hover {
+			--_sonic-xy-star: var(--_sonic-xy-star-lift);
+		}
+	}
+
+	/* The glow goes on the puck, since a custom property cannot travel up from the part */
+	.sonic-xy-puck:has(> :focus-visible:not([data-sonic-pointer-focus])) {
+		--_sonic-xy-star: var(--_sonic-xy-star-lift);
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+	}
+
+	:state(dragging) > .sonic-xy > .sonic-xy-puck {
+		--_sonic-xy-star: var(--_sonic-xy-star-lift);
+		--_sonic-xy-star-glow: color-mix(in oklab, var(--_sonic-xy-lit) 25%, transparent);
+	}
+
+	.sonic-xy-axis {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+	}
+
+	/* Restated here; one more selector makes material's lists clones for the dupes check */
+	@media (forced-colors: active) {
+		.sonic-xy {
+			--_sonic-lit: Highlight;
+			--_sonic-unlit: GrayText;
+		}
+
+		.sonic-xy-field {
+			forced-color-adjust: none;
+		}
+
+		.sonic-xy-puck {
+			--_sonic-xy-star: CanvasText;
+			--_sonic-xy-star-lift: CanvasText;
+			--_sonic-xy-star-glow: transparent;
+
+			forced-color-adjust: none;
+		}
+
+		.sonic-xy-axis {
+			forced-color-adjust: auto;
+		}
+
+		.sonic-xy-axis:focus-visible {
+			outline-offset: 2px;
+
+			&[data-sonic-pointer-focus] {
+				outline-style: none;
+			}
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -40,6 +40,11 @@
       "development": "./dist/dev/index.js",
       "import": "./dist/default/index.js"
     },
+    "./dat": {
+      "types": "./dist/dev/dat.d.ts",
+      "development": "./dist/dev/dat.js",
+      "import": "./dist/default/dat.js"
+    },
     "./define": {
       "types": "./dist/dev/define.d.ts",
       "development": "./dist/dev/define.js",
@@ -52,14 +57,21 @@
     },
     "./controls.css": "./dist/styles/controls.css",
     "./material.css": "./dist/styles/material.css",
+    "./button.css": "./dist/styles/button.css",
     "./dial.css": "./dist/styles/dial.css",
-    "./key.css": "./dist/styles/key.css",
+    "./envelope.css": "./dist/styles/envelope.css",
     "./led.css": "./dist/styles/led.css",
     "./meter.css": "./dist/styles/meter.css",
     "./number.css": "./dist/styles/number.css",
+    "./panel.css": "./dist/styles/panel.css",
+    "./ring.css": "./dist/styles/ring.css",
     "./screen.css": "./dist/styles/screen.css",
     "./segmented.css": "./dist/styles/segmented.css",
     "./slider.css": "./dist/styles/slider.css",
+    "./switch.css": "./dist/styles/switch.css",
+    "./waveform.css": "./dist/styles/waveform.css",
+    "./wavestrip.css": "./dist/styles/wavestrip.css",
+    "./xy.css": "./dist/styles/xy.css",
     "./skins/*.css": "./dist/skins/*.css"
   },
   "imports": {},

package/dist/default/define/key.js

@@ -1,7 +0,0 @@
-import { defineOnce } from "../elements/define-once.js";
-import { SonicKey } from "../elements/key.js";
-
-//#region src/define/key.ts
-defineOnce("sonic-key", SonicKey);
-
-//#endregion