@xsynaptic/sonic-ui 0.10.4 → 0.13.0

package/dist/styles/material/readout.css

@@ -0,0 +1,87 @@
+@property --_sonic-readout-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 24px;
+}
+
+@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);
+	}
+
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
+		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
+		--_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);
+
+		box-sizing: border-box;
+		place-items: center;
+		min-inline-size: calc(1.75 * var(--_sonic-readout-size));
+		block-size: var(--_sonic-readout-size);
+		padding: 0 calc(0.3 * var(--_sonic-readout-size));
+		margin: 0 0 calc(0.25 * var(--_sonic-readout-size));
+		position-area: block-start;
+		position-try-fallbacks: flip-block;
+		overflow: visible;
+		font: inherit;
+		font-family: var(--sonic-glass-font, inherit);
+		font-size: calc(0.5 * var(--_sonic-readout-size));
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		color: var(--sonic-readout-text, var(--_sonic-glass-text));
+		white-space: nowrap;
+		pointer-events: none;
+		cursor: default;
+		user-select: none;
+		background: var(--_sonic-glass-fill);
+		border: var(--_sonic-glass-edge);
+		border-radius: calc(0.25 * var(--_sonic-readout-size));
+		box-shadow:
+			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+				rgb(255 255 255 / calc(0.08 * var(--_sonic-relief)));
+		opacity: 0;
+		translate: 0 calc(0.15 * var(--_sonic-readout-size));
+		transition:
+			opacity 120ms ease-out,
+			translate 120ms ease-out,
+			display 120ms allow-discrete,
+			overlay 120ms allow-discrete;
+
+		/* Grid only while open; engines keep the flip a closed readout took against a filtered ancestor */
+		&:popover-open {
+			display: grid;
+			opacity: 1;
+			translate: 0;
+
+			@starting-style {
+				opacity: 0;
+				translate: 0 calc(0.15 * var(--_sonic-readout-size));
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			translate: 0;
+
+			&:popover-open {
+				@starting-style {
+					translate: 0;
+				}
+			}
+		}
+
+		:state(editing) > :is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) > & {
+			pointer-events: auto;
+			cursor: text;
+		}
+	}
+}

package/dist/styles/material/scale.css

@@ -0,0 +1,30 @@
+@layer sonic.material {
+	: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-scale, var(--_sonic-etch));
+		}
+	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {
+			forced-color-adjust: none;
+			background: var(--_sonic-etch);
+		}
+	}
+}

package/dist/styles/material/value.css

@@ -0,0 +1,43 @@
+@property --_sonic-detent-zone {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 8px;
+}
+
+@layer sonic.material {
+	:is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+		--_sonic-detent-zone: var(--sonic-detent-zone, 8px);
+	}
+
+	:is(
+		.sonic-dial-entry,
+		.sonic-number-entry,
+		.sonic-slider-entry,
+		.sonic-waveform-entry,
+		.sonic-wavestrip-entry
+	) {
+		inline-size: 6ch;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+		text-align: center;
+		background: transparent;
+		border: 0;
+
+		&::selection {
+			color: var(--_sonic-lit);
+			background: transparent;
+		}
+
+		&:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+
+		@supports (field-sizing: content) {
+			inline-size: auto;
+			min-inline-size: 3ch;
+			field-sizing: content;
+		}
+	}
+}

package/dist/styles/material/well.css

@@ -0,0 +1,24 @@
+@layer sonic.material {
+	:is(
+		.sonic-envelope,
+		.sonic-button,
+		.sonic-number,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-spectrum,
+		.sonic-toggle,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
+		--_sonic-well-depth: var(--_sonic-glass-depth, 1);
+		--_sonic-well:
+			inset calc(var(--_sonic-well-depth) * var(--_sonic-cast-x))
+				calc(var(--_sonic-well-depth) * var(--_sonic-cast-y))
+				calc(2 * var(--_sonic-well-depth) * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.6 * var(--_sonic-relief))),
+			calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-x))
+				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0
+				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
+	}
+}