@xsynaptic/sonic-ui 0.27.0 → 0.28.1

package/dist/styles/ticker.css

@@ -0,0 +1,115 @@
+@layer sonic.material, sonic.control;
+
+@property --_sonic-ticker-rate {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 40px;
+}
+
+@property --_sonic-ticker-hold {
+	syntax: '<time>';
+	inherits: false;
+	initial-value: 2s;
+}
+
+@property --_sonic-ticker-fade {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 12px;
+}
+
+@property --_sonic-ticker-fade-start {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 0;
+}
+
+@property --_sonic-ticker-fade-end {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 0;
+}
+
+@property --_sonic-ticker-cancel-zone {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 48px;
+}
+
+@layer sonic.control {
+	:has(> .sonic-ticker):not([hidden]) {
+		display: contents;
+	}
+
+	:is(sonic-ticker:not(:defined, [hidden]), .sonic-ticker) {
+		display: block;
+		min-inline-size: 0;
+		max-inline-size: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sonic-ticker {
+		--_sonic-ticker-rate: var(--sonic-ticker-rate, 40px);
+		--_sonic-ticker-hold: var(--sonic-ticker-hold, 2s);
+		--_sonic-ticker-fade: var(--sonic-ticker-fade, 0.75rem);
+		--_sonic-ticker-cancel-zone: var(--sonic-cancel-zone, 48px);
+
+		-webkit-user-select: none;
+
+		        user-select: none;
+	}
+
+	.sonic-ticker[data-sonic-overflowing]:not([disabled] > *) {
+		text-overflow: clip;
+		touch-action: var(--sonic-touch-action, pan-y);
+		-webkit-mask: linear-gradient(
+			to right,
+			transparent,
+			#000 var(--_sonic-ticker-fade-start),
+			#000 calc(100% - var(--_sonic-ticker-fade-end)),
+			transparent
+		);
+		        mask: linear-gradient(
+			to right,
+			transparent,
+			#000 var(--_sonic-ticker-fade-start),
+			#000 calc(100% - var(--_sonic-ticker-fade-end)),
+			transparent
+		);
+	}
+
+		.sonic-ticker[data-sonic-overflowing]:not([disabled] > *) > .sonic-ticker-tape {
+			display: inline-block;
+		}
+
+	.sonic-ticker[data-sonic-overflowing]:not(:any-link *, [disabled] > *) {
+		cursor: grab;
+	}
+
+	.sonic-ticker[data-sonic-overflowing][data-sonic-dragging],
+	.sonic-ticker[data-sonic-dragging] :any-link {
+		cursor: grabbing;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sonic-ticker[data-sonic-overflowing]:not(
+				[data-sonic-clipped~='start'],
+				[data-sonic-dragging]
+			) {
+			text-overflow: ellipsis;
+			-webkit-mask: none;
+			        mask: none;
+		}
+
+			.sonic-ticker[data-sonic-overflowing]:not([data-sonic-clipped~='start'],[data-sonic-dragging]) > .sonic-ticker-tape {
+				display: inline;
+			}
+	}
+
+	.sonic-ticker:focus-within {
+		-webkit-mask: none;
+		        mask: none;
+	}
+}

package/dist/styles/toggle.css

@@ -96,6 +96,8 @@
 		--_sonic-keycap-corner: max(0px, var(--_sonic-toggle-corner) - var(--_sonic-toggle-gap));
 		--_sonic-keycap-bevel: calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-bevel-ratio));
 		--_sonic-keycap-face-corner: max(0px, var(--_sonic-keycap-corner) - var(--_sonic-keycap-bevel));
+		--_sonic-toggle-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
+		--_sonic-toggle-duration: 120ms;
 
 		position: relative;
 		display: inline-grid;
@@ -108,8 +110,8 @@
 		-webkit-user-select: none;
 		        user-select: none;
 		transition:
-			--_sonic-toggle-at 120ms cubic-bezier(0.4, 0, 0.2, 1),
-			--_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
+			--_sonic-toggle-at var(--_sonic-toggle-duration) var(--_sonic-toggle-ease),
+			--_sonic-toggle-sink var(--_sonic-press-duration) var(--_sonic-ease);
 	}
 
 	[orientation='vertical'] > .sonic-toggle {
@@ -124,7 +126,7 @@
 	}
 
 	.sonic-toggle[data-sonic-dragging] {
-		transition: --_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
+		transition: --_sonic-toggle-sink var(--_sonic-press-duration) var(--_sonic-ease);
 	}
 
 	[data-sonic-lit='ok'] > .sonic-toggle:has(> [role='switch']),
@@ -221,8 +223,8 @@
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-throw))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-throw) + var(--_sonic-toggle-sink));
 		transition:
-			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
-			box-shadow var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
+			scale var(--_sonic-press-duration) var(--_sonic-ease),
+			box-shadow var(--_sonic-press-duration) var(--_sonic-ease);
 	}
 
 		.sonic-toggle-cap > .sonic-led {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -65,6 +65,7 @@
     "./slider.css": "./dist/styles/slider.css",
     "./spectrum.css": "./dist/styles/spectrum.css",
     "./switch.css": "./dist/styles/switch.css",
+    "./ticker.css": "./dist/styles/ticker.css",
     "./toggle.css": "./dist/styles/toggle.css",
     "./waveform.css": "./dist/styles/waveform.css",
     "./wavestrip.css": "./dist/styles/wavestrip.css",
@@ -78,7 +79,7 @@
   ],
   "devDependencies": {
     "publint": "^0.3.25",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.1",
     "typescript": "^6.0.3"
   },
   "scripts": {