@xsynaptic/sonic-ui 0.12.0 → 0.13.0

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)));
+	}
+}