@xsynaptic/sonic-ui 0.1.0

package/dist/styles/segmented.css

@@ -0,0 +1,147 @@
+@layer sonic {
+	/* On the host too, for the placeholder */
+	:is(sonic-segmented, .sonic-segmented) {
+		--_sonic-segmented-size: var(--sonic-segmented-size, 2rem);
+	}
+
+	:has(> .sonic-segmented):not([hidden]) {
+		display: contents;
+	}
+
+	/* Hides the options, which have no size before upgrade */
+	sonic-segmented:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-segmented-size);
+		block-size: var(--_sonic-segmented-size);
+		overflow: hidden;
+	}
+
+	.sonic-segmented {
+		--_sonic-segmented-gap-ratio: var(--sonic-segmented-gap-ratio, 0.06);
+		--_sonic-segmented-radius-ratio: var(--sonic-segmented-radius-ratio, 0.2);
+		--_sonic-segmented-bevel-ratio: var(--sonic-segmented-bevel-ratio, 0.075);
+		--_sonic-segmented-depth-ratio: var(--sonic-segmented-depth-ratio, 0.03);
+		--_sonic-segmented-press-scale: var(--sonic-segmented-press-scale, 0.985);
+		--_sonic-segmented-font-ratio: var(--sonic-segmented-font-ratio, 0.34);
+		--_sonic-segmented-icon-ratio: var(--sonic-segmented-icon-ratio, 0.5);
+		--_sonic-unit: calc(var(--_sonic-segmented-size) / 32);
+		--_sonic-segmented-corner: calc(
+			var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)
+		);
+		--_sonic-segmented-depth: calc(
+			var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio)
+		);
+		--_sonic-segmented-gap: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-gap-ratio));
+
+		/* Concentric with the well's corner */
+		--_sonic-segmented-inner-corner: max(
+			0px,
+			var(--_sonic-segmented-corner) - var(--_sonic-segmented-gap)
+		);
+
+		box-sizing: border-box;
+		display: flex;
+		flex-shrink: 0;
+		gap: var(--_sonic-segmented-gap);
+		block-size: var(--_sonic-segmented-size);
+		padding: var(--_sonic-segmented-gap);
+		user-select: none;
+		background: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-unlit) 55%, #000),
+			color-mix(in oklab, var(--_sonic-unlit) 85%, #000)
+		);
+		border-radius: var(--_sonic-segmented-corner);
+		box-shadow: var(--_sonic-well);
+	}
+
+	.sonic-segmented-segment {
+		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / -2);
+		--_sonic-segmented-scale: 1;
+		--_sonic-segmented-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%);
+		--_sonic-segmented-glow: transparent;
+
+		display: grid;
+		min-inline-size: calc(var(--_sonic-segmented-size) - 2 * var(--_sonic-segmented-gap));
+		padding: 0;
+		font: inherit;
+		font-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-font-ratio));
+		line-height: 1;
+		color: var(--_sonic-ink);
+		cursor: pointer;
+		background: transparent;
+		border: 0;
+		border-radius: var(--_sonic-segmented-inner-corner);
+	}
+
+	.sonic-segmented-segment:active:where(:not(:disabled)),
+	.sonic-segmented-segment[aria-checked='true'] {
+		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / 2);
+		--_sonic-segmented-scale: var(--_sonic-segmented-press-scale);
+		--_sonic-segmented-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
+			var(--_sonic-unit) rgb(0 0 0 / 65%);
+	}
+
+	.sonic-segmented-segment[aria-checked='true'] {
+		--_sonic-segmented-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+
+		color: var(--_sonic-lit);
+		background: var(--_sonic-lit);
+		box-shadow: var(--_sonic-well);
+	}
+
+	.sonic-segmented-segment:disabled {
+		--_sonic-lit: var(--_sonic-lit-disabled);
+
+		color: var(--_sonic-etch);
+		cursor: default;
+	}
+
+	/* In flow, so a long label widens its segment rather than spilling over the next */
+	.sonic-segmented-cap {
+		position: relative;
+		display: grid;
+		place-items: center;
+		padding-inline: calc(var(--_sonic-segmented-size) * 0.25);
+		background: var(--_sonic-skirt);
+		border-radius: var(--_sonic-segmented-inner-corner);
+		box-shadow: var(--_sonic-segmented-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
+		scale: var(--_sonic-segmented-scale);
+		translate: 0 var(--_sonic-segmented-shift);
+		transition: var(--_sonic-press-transition);
+
+		&::before {
+			position: absolute;
+			inset: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-bevel-ratio));
+			content: '';
+			background:
+				radial-gradient(closest-side, var(--_sonic-segmented-glow), transparent),
+				var(--_sonic-sheen), var(--_sonic-face);
+			border-radius: max(
+				0px,
+				var(--_sonic-segmented-inner-corner) - var(--_sonic-segmented-size) *
+					var(--_sonic-segmented-bevel-ratio)
+			);
+			box-shadow: var(--_sonic-face-shadow);
+		}
+
+		& > * {
+			position: relative;
+			filter: var(--_sonic-engraving);
+		}
+
+		& > svg {
+			inline-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
+			block-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
+		}
+	}
+
+	/* Engraving under the glow keeps a lit label's edge */
+	.sonic-segmented-segment[aria-checked='true'] .sonic-segmented-cap > * {
+		filter: var(--_sonic-engraving)
+			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
+	}
+}

package/dist/styles/slider.css

@@ -0,0 +1,204 @@
+/* The size is the thickness across the travel */
+@layer sonic {
+	/* On the host too, for the placeholder */
+	:is(sonic-slider, .sonic-slider) {
+		--_sonic-slider-size: var(--sonic-slider-size, 2rem);
+		--_sonic-slider-length: var(--sonic-slider-length, 8rem);
+	}
+
+	:has(> .sonic-slider):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-slider:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-slider-length);
+		block-size: var(--_sonic-slider-size);
+	}
+
+	sonic-slider[orientation='vertical']:not(:defined, [hidden]) {
+		inline-size: var(--_sonic-slider-size);
+		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-unit: calc(var(--_sonic-slider-size) / 32);
+		--_sonic-slider-lit: var(--_sonic-lit);
+		--_sonic-slider-toward: to right;
+		--_sonic-slider-across: to bottom;
+		--_sonic-slider-cursor: ew-resize;
+		--_sonic-slider-groove: calc(var(--_sonic-slider-size) * var(--_sonic-slider-groove-ratio));
+		--_sonic-slider-cap: calc(var(--_sonic-slider-size) * var(--_sonic-slider-cap-ratio));
+		--_sonic-slider-travel: calc(var(--_sonic-slider-length) - 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;
+		cursor: var(--_sonic-slider-cursor);
+		user-select: none;
+	}
+
+	[orientation='vertical'] > .sonic-slider {
+		--_sonic-slider-toward: to top;
+		--_sonic-slider-across: to right;
+		--_sonic-slider-cursor: ns-resize;
+
+		inline-size: var(--_sonic-slider-size);
+		block-size: var(--_sonic-slider-length);
+	}
+
+	:state(dragging) > .sonic-slider {
+		--_sonic-cap: var(--_sonic-cap-hover);
+	}
+
+	[dimmed] > .sonic-slider {
+		--_sonic-slider-lit: var(--_sonic-lit-off);
+	}
+
+	[disabled] > .sonic-slider {
+		--_sonic-slider-lit: var(--_sonic-lit-disabled);
+		--_sonic-slider-cursor: default;
+	}
+
+	[groove-press='none']:not(:state(dragging)) > .sonic-slider {
+		cursor: default;
+	}
+
+	.sonic-slider-marks {
+		--_sonic-slider-mark-pitch: calc(
+			var(--_sonic-slider-travel) / (var(--_sonic-slider-positions, 2) - 1)
+		);
+		--_sonic-slider-mark-lip: calc(
+			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-size) * 0.1
+		);
+
+		position: absolute;
+		inset: 0 calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2);
+		background: repeating-linear-gradient(
+			var(--_sonic-slider-toward),
+			var(--_sonic-etch) 0 var(--_sonic-unit),
+			transparent 0 var(--_sonic-slider-mark-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 85%,
+			transparent 0
+		);
+	}
+
+	[orientation='vertical'] > .sonic-slider > .sonic-slider-marks {
+		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) 0;
+	}
+
+	:not([notched]) > .sonic-slider > .sonic-slider-marks {
+		display: none;
+	}
+
+	.sonic-slider-groove {
+		--_sonic-slider-lit-low: min(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
+		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
+
+		position: absolute;
+		inset: calc(50% - var(--_sonic-slider-groove) / 2)
+			calc((var(--_sonic-slider-cap) - 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),
+			var(--_sonic-unlit)
+				calc(
+					var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) /
+						2 * sign(var(--_sonic-slider-lit-low))
+				),
+			var(--_sonic-slider-lit) 0
+				calc(
+					var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
+						var(--_sonic-slider-groove) / 2 * (2 - sign(1 - var(--_sonic-slider-lit-high)))
+				),
+			var(--_sonic-unlit) 0
+		);
+		border-radius: calc(var(--_sonic-slider-groove) / 2);
+		box-shadow: var(--_sonic-groove);
+	}
+
+	[orientation='vertical'] > .sonic-slider > .sonic-slider-groove {
+		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
+			calc(50% - var(--_sonic-slider-groove) / 2);
+	}
+
+	.sonic-slider-cap {
+		--_sonic-slider-pointer-width: calc(
+			var(--_sonic-slider-size) * var(--_sonic-slider-pointer-ratio)
+		);
+		--_sonic-slider-bevel: calc(var(--_sonic-slider-size) * var(--_sonic-slider-bevel-ratio));
+		--_sonic-slider-corner: calc(var(--_sonic-slider-size) * var(--_sonic-slider-radius-ratio));
+		--_sonic-slider-index-inset: calc(var(--_sonic-slider-bevel) + var(--_sonic-slider-size) * 0.1);
+
+		position: absolute;
+		inset: 0 auto 0 0;
+		inline-size: var(--_sonic-slider-cap);
+		background: var(--_sonic-skirt);
+		border-radius: var(--_sonic-slider-corner);
+		box-shadow:
+			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(3 * var(--_sonic-unit))
+				rgb(0 0 0 / 65%),
+			var(--_sonic-rim),
+			var(--_sonic-focus-shadow);
+		translate: var(--_sonic-slider-offset) 0;
+
+		&::before,
+		&::after {
+			position: absolute;
+			content: '';
+		}
+
+		&::before {
+			inset: var(--_sonic-slider-bevel);
+			background: var(--_sonic-face);
+			border-radius: max(0px, var(--_sonic-slider-corner) - var(--_sonic-slider-bevel));
+			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);
+			background: var(--_sonic-ink);
+			border-radius: calc(var(--_sonic-slider-pointer-width) / 2);
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
+		}
+	}
+
+	[orientation='vertical'] > .sonic-slider > .sonic-slider-cap {
+		inset: auto 0 0;
+		inline-size: auto;
+		block-size: var(--_sonic-slider-cap);
+		translate: 0 calc(-1 * var(--_sonic-slider-offset));
+
+		&::after {
+			inset: calc(50% - var(--_sonic-slider-pointer-width) / 2) var(--_sonic-slider-index-inset);
+		}
+	}
+
+	[disabled] > .sonic-slider > .sonic-slider-cap::after {
+		background: var(--_sonic-etch);
+	}
+
+	[groove-press='none'] > .sonic-slider > .sonic-slider-cap {
+		cursor: var(--_sonic-slider-cursor);
+	}
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@xsynaptic/sonic-ui",
+  "version": "0.1.0",
+  "description": "Native custom elements for audio interfaces: dials, sliders, keys, a segmented switch, a peak meter and a screen panel, skinned with CSS custom properties",
+  "keywords": [
+    "custom-elements",
+    "web-components",
+    "audio",
+    "knob",
+    "dial",
+    "slider",
+    "fader",
+    "synth"
+  ],
+  "homepage": "https://github.com/xsynaptic/sonic-ui#readme",
+  "bugs": {
+    "url": "https://github.com/xsynaptic/sonic-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xsynaptic/sonic-ui.git",
+    "directory": "packages/sonic-ui"
+  },
+  "license": "MIT",
+  "author": "Alexander Synaptic <x@synapticism.com>",
+  "type": "module",
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "sideEffects": [
+    "./dist/define.js",
+    "./dist/define/*.js",
+    "./src/define.ts",
+    "./src/define/*.ts",
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./define": {
+      "types": "./dist/define.d.ts",
+      "import": "./dist/define.js"
+    },
+    "./define/*": {
+      "types": "./dist/define/*.d.ts",
+      "import": "./dist/define/*.js"
+    },
+    "./controls.css": "./dist/styles/controls.css",
+    "./material.css": "./dist/styles/material.css",
+    "./dial.css": "./dist/styles/dial.css",
+    "./key.css": "./dist/styles/key.css",
+    "./meter.css": "./dist/styles/meter.css",
+    "./screen.css": "./dist/styles/screen.css",
+    "./segmented.css": "./dist/styles/segmented.css",
+    "./slider.css": "./dist/styles/slider.css",
+    "./skins/*.css": "./dist/skins/*.css"
+  },
+  "imports": {
+    "#*": "./src/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "publint": "^0.3.24",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check-types": "tsc --noEmit"
+  }
+}