@motion-proto/live-tokens 0.3.9 → 0.6.0

package/src/styles/ui-form-controls.css

@@ -0,0 +1,186 @@
+/* Editor form controls — `--ui-*` tokens only. Theme-immune; see CONVENTIONS.md. */
+
+/* ========================================
+   Form Field Layouts
+   ======================================== */
+
+/* Vertical Layout - Label Above Input/Select */
+/* Usage: Add .ui-form-field-vertical to container div wrapping label + input/select */
+.ui-form-field-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ui-space-4);
+}
+
+.ui-form-label {
+  margin-bottom: 0;
+  font-size: var(--ui-font-size-md);
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-weight-normal);
+}
+
+/* Horizontal Layout - Label Beside Input/Select */
+/* Usage: Add .ui-form-field-horizontal to container div wrapping label + input/select */
+.ui-form-field-horizontal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ui-space-8);
+}
+
+.ui-form-field-horizontal .ui-form-label {
+  white-space: nowrap;
+}
+
+/* Inline Layout - Label and Input/Select Close Together */
+/* Usage: Add .ui-form-field-inline to container div wrapping label + input/select */
+.ui-form-field-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-12);
+}
+
+.ui-form-field-inline .ui-form-label {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ui-form-field-inline .ui-form-select,
+.ui-form-field-inline .ui-form-input {
+  flex-shrink: 0;
+}
+
+/* ========================================
+   Form Control Styling
+   ======================================== */
+
+/* Select/Dropdown Styling */
+.ui-form-select {
+  /* No vertical padding - let min-height and line-height center text naturally */
+  padding: 0 var(--ui-space-16);
+  min-height: 2.375rem;  /* ~38px to match button height */
+  background: var(--ui-surface-lowest) !important;
+  border: 1px solid var(--ui-border-default) !important;
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary) !important;
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-weight-normal);
+  line-height: var(--ui-line-height-normal);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all var(--ui-transition-fast);
+  /* Prevent clipping */
+  overflow: visible !important;
+  box-sizing: border-box !important;
+  /* Reset browser defaults */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /* Custom dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right var(--ui-space-12) center !important;
+  padding-right: var(--ui-space-32) !important;
+}
+
+.ui-form-select:hover:not(:disabled) {
+  background-color: var(--ui-surface-low) !important;
+  border-color: var(--ui-border-medium) !important;
+}
+
+.ui-form-select:focus {
+  outline: none;
+  border-color: var(--ui-border-strong) !important;
+  box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
+}
+
+.ui-form-select:focus-visible {
+  outline: 2px solid var(--ui-highlight);
+  outline-offset: 2px;
+}
+
+.ui-form-select:active:not(:disabled) {
+  background-color: var(--ui-surface) !important;
+}
+
+.ui-form-select:disabled {
+  background-color: var(--ui-surface-lowest) !important;
+  border-color: var(--ui-border-faint) !important;
+  color: var(--ui-text-disabled) !important;
+  cursor: not-allowed;
+}
+
+/* Option Styling - Critical for Legibility */
+/* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
+/* These styles apply where browsers allow (limited support in Chrome/Firefox) */
+.ui-form-select option {
+  background-color: var(--ui-surface-lowest) !important;
+  color: var(--ui-text-primary) !important;
+  padding: var(--ui-space-8) var(--ui-space-12);
+  min-height: 2rem;
+  font-size: var(--ui-font-size-md);
+  font-family: var(--ui-font-sans);
+  line-height: var(--ui-line-height-normal);
+}
+
+/* Disabled options */
+.ui-form-select option:disabled {
+  color: var(--ui-text-disabled) !important;
+}
+
+/* Input Field Styling */
+.ui-form-input {
+  padding: var(--ui-space-8);
+  background: var(--ui-surface-lowest);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  transition: border-color var(--ui-transition-fast);
+}
+
+.ui-form-input:hover:not(:disabled) {
+  border-color: var(--ui-border-strong);
+  background: var(--ui-surface-low);
+}
+
+.ui-form-input:focus {
+  outline: none;
+  border-color: var(--ui-border-strong);
+  box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
+}
+
+.ui-form-input:disabled {
+  background: var(--ui-surface-lowest);
+  border-color: var(--ui-border-faint);
+  color: var(--ui-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Placeholder text styling */
+.ui-form-input::placeholder {
+  color: var(--ui-text-muted);
+}
+
+/* Number input spinner buttons */
+.ui-form-input[type="number"]::-webkit-inner-spin-button,
+.ui-form-input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* Checkbox and Radio Styling */
+.ui-form-checkbox,
+.ui-form-radio {
+  cursor: pointer;
+  width: var(--ui-space-16);
+  height: var(--ui-space-16);
+  accent-color: var(--ui-gray-600);
+}
+
+.ui-form-checkbox:disabled,
+.ui-form-radio:disabled {
+  cursor: not-allowed;
+}

package/src/ui/BezierCurveEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { stopPropagation } from 'svelte/legacy';
+
   import {
     type CurveAnchor, type CurveConfig,
     CURVE_H, CURVE_PAD_Y, CURVE_Y_PAD,
@@ -7,15 +9,29 @@
     serializeCurve, deserializeCurve,
   } from './curveEngine';
 
-  export let anchors: CurveAnchor[];
-  export let cfg: CurveConfig;
-  export let stepCount: number;
-  export let padX: number = 0;
-  export let offset: number = 0;
-  export let defaultAnchors: CurveAnchor[] | null = null;
-  export let lockedAnchorIndex: number | null = null;
-  export let onAnchorsChange: (anchors: CurveAnchor[]) => void = () => {};
-  export let onOffsetChange: (offset: number) => void = () => {};
+  interface Props {
+    anchors: CurveAnchor[];
+    cfg: CurveConfig;
+    stepCount: number;
+    padX?: number;
+    offset?: number;
+    defaultAnchors?: CurveAnchor[] | null;
+    lockedAnchorIndex?: number | null;
+    onAnchorsChange?: (anchors: CurveAnchor[]) => void;
+    onOffsetChange?: (offset: number) => void;
+  }
+
+  let {
+    anchors,
+    cfg,
+    stepCount,
+    padX = 0,
+    offset = 0,
+    defaultAnchors = null,
+    lockedAnchorIndex = null,
+    onAnchorsChange = () => {},
+    onOffsetChange = () => {}
+  }: Props = $props();
 
   function resetToDefault() {
     if (!defaultAnchors) return;
@@ -24,14 +40,14 @@
   }
 
   const CURVE_W_DEFAULT = 720;
-  let svgEl: SVGSVGElement | null = null;
-  let dims = CURVE_W_DEFAULT;
-  let shiftActive = false;
+  let svgEl: SVGSVGElement | null = $state(null);
+  let dims = $state(CURVE_W_DEFAULT);
+  let shiftActive = $state(false);
 
   const clipId = `curve-clip-${Math.random().toString(36).slice(2, 8)}`;
 
-  $: w = dims;
-  $: offsetPx = -(offset / ((cfg.yMax - cfg.yMin) * (1 + 2 * CURVE_Y_PAD))) * (CURVE_H - 2 * CURVE_PAD_Y);
+  let w = $derived(dims);
+  let offsetPx = $derived(-(offset / ((cfg.yMax - cfg.yMin) * (1 + 2 * CURVE_Y_PAD))) * (CURVE_H - 2 * CURVE_PAD_Y));
 
   function stepToX(index: number): number {
     return stepCount > 1 ? (index / (stepCount - 1)) * 100 : 50;
@@ -281,21 +297,21 @@
       <!-- Curve content group — offset vertically, clipped -->
       <g transform="translate(0,{offsetPx})" clip-path="url(#{clipId})">
         {#if shiftActive}
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <rect
             x="0" y={-CURVE_H} width={w} height={CURVE_H * 3}
             class="shift-overlay"
-            on:pointerdown={handleShiftPointerDown}
-            on:pointermove={handleShiftPointerMove}
-            on:pointerup={handleShiftPointerUp}
+            onpointerdown={handleShiftPointerDown}
+            onpointermove={handleShiftPointerMove}
+            onpointerup={handleShiftPointerUp}
           />
         {:else}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <path
             d={buildCurvePath(anchors, cfg, w, padX)}
             class="curve-hit"
-            on:click={insertPointOnPath}
+            onclick={insertPointOnPath}
           />
         {/if}
 
@@ -311,13 +327,13 @@
                 x2={curveXToSvg(pt.x + pt.inDx, w, padX)} y2={curveYToSvg(pt.y + pt.inDy, cfg)}
                 class="handle-line"
               />
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
               <circle
                 cx={curveXToSvg(pt.x + pt.inDx, w, padX)} cy={curveYToSvg(pt.y + pt.inDy, cfg)}
                 r="3.5" class="handle-grip"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'handleIn', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'handleIn', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
               />
             {/if}
             {#if i < anchors.length - 1 && !isCornerAnchor(pt)}
@@ -326,16 +342,16 @@
                 x2={curveXToSvg(pt.x + pt.outDx, w, padX)} y2={curveYToSvg(pt.y + pt.outDy, cfg)}
                 class="handle-line"
               />
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
               <circle
                 cx={curveXToSvg(pt.x + pt.outDx, w, padX)} cy={curveYToSvg(pt.y + pt.outDy, cfg)}
                 r="3.5" class="handle-grip"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'handleOut', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'handleOut', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
               />
             {/if}
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
             {#if i === lockedAnchorIndex}
               <path
                 d="M{curveXToSvg(pt.x, w, padX)},{curveYToSvg(pt.y, cfg) - 6} l5,6 l-5,6 l-5,-6 Z"
@@ -346,19 +362,19 @@
                 x={curveXToSvg(pt.x, w, padX) - 4} y={curveYToSvg(pt.y, cfg) - 4}
                 width="8" height="8"
                 class="curve-handle corner"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
-                on:dblclick|stopPropagation={() => toggleAnchorSmooth(i)}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
+                ondblclick={stopPropagation(() => toggleAnchorSmooth(i))}
               />
             {:else}
               <circle
                 cx={curveXToSvg(pt.x, w, padX)} cy={curveYToSvg(pt.y, cfg)}
                 r="5" class="curve-handle"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
-                on:dblclick|stopPropagation={() => toggleAnchorSmooth(i)}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
+                ondblclick={stopPropagation(() => toggleAnchorSmooth(i))}
               />
             {/if}
           {/each}
@@ -373,7 +389,7 @@
         class:active={shiftActive}
         type="button"
         title="Vertical offset"
-        on:click={() => shiftActive = !shiftActive}
+        onclick={() => shiftActive = !shiftActive}
       >
         <svg viewBox="0 0 12 20" class="curve-tool-icon">
           <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
@@ -381,8 +397,8 @@
         <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
       </button>
       <span class="curve-hint">&x2325;-click to remove point</span>
-      <button class="curve-tool-btn" type="button" title="Copy curve" on:click={copyToClipboard}>Copy</button>
-      <button class="curve-tool-btn" type="button" title="Paste curve" on:click={pasteFromClipboard}>Paste</button>
+      <button class="curve-tool-btn" type="button" title="Copy curve" onclick={copyToClipboard}>Copy</button>
+      <button class="curve-tool-btn" type="button" title="Paste curve" onclick={pasteFromClipboard}>Paste</button>
     </div>
     <div class="curve-templates">
       {#each curveTemplates as tpl}
@@ -390,7 +406,7 @@
           class="curve-template-btn"
           type="button"
           title={tpl.name}
-          on:click={() => applyTemplate(tpl)}
+          onclick={() => applyTemplate(tpl)}
         >
           <svg viewBox="0 0 20 12" class="curve-template-icon">
             <path d={tpl.icon} />
@@ -402,7 +418,7 @@
           class="curve-tool-btn"
           type="button"
           title="Reset to default"
-          on:click={resetToDefault}
+          onclick={resetToDefault}
         >Reset</button>
       {/if}
     </div>

package/src/ui/ColorEditPanel.svelte

@@ -3,25 +3,46 @@
   import InlineEditActions from '../components/InlineEditActions.svelte';
   import Button from '../components/Button.svelte';
 
-  export let color: string;
-  export let title: string | null = null;
-  export let showRemoveOverride: boolean = false;
-  export let onColorChange: (hex: string) => void = () => {};
-  export let onConfirm: () => void = () => {};
-  export let onCancel: () => void = () => {};
-  export let onRemoveOverride: () => void = () => {};
-  /**
+  
+
+  
+  interface Props {
+    color: string;
+    title?: string | null;
+    showRemoveOverride?: boolean;
+    onColorChange?: (hex: string) => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onRemoveOverride?: () => void;
+    /**
    * Optional pointerdown hook for slider drags — lets parents open a store
    * transaction so the whole drag collapses to one undo step. If the parent
    * doesn't route slider writes through the editor store, leave this unset.
    */
-  export let onSliderStart: () => void = () => {};
-
-  // Hue-chroma mode props (for neutral/gray base editing)
-  export let mode: 'hsl' | 'hue-chroma' = 'hsl';
-  export let hue: number = 0;
-  export let chroma: number = 0.04;
-  export let onHueChromaChange: (hue: number, chroma: number) => void = () => {};
+    onSliderStart?: () => void;
+    // Hue-chroma mode props (for neutral/gray base editing)
+    mode?: 'hsl' | 'hue-chroma';
+    hue?: number;
+    chroma?: number;
+    onHueChromaChange?: (hue: number, chroma: number) => void;
+    actions?: import('svelte').Snippet;
+  }
+
+  let {
+    color,
+    title = null,
+    showRemoveOverride = false,
+    onColorChange = () => {},
+    onConfirm = () => {},
+    onCancel = () => {},
+    onRemoveOverride = () => {},
+    onSliderStart = () => {},
+    mode = 'hsl',
+    hue = 0,
+    chroma = 0.04,
+    onHueChromaChange = () => {},
+    actions
+  }: Props = $props();
 
   const hasEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
   const PREVIEW_LIGHTNESS = 0.55;
@@ -59,7 +80,7 @@
 
   // --- HSL mode reactives ---
 
-  $: hsl = hexToHsl(color);
+  let hsl = $derived(hexToHsl(color));
 
   function hueGrad(s: number, l: number): string {
     return `linear-gradient(to right, ${
@@ -83,11 +104,11 @@
 
   // --- Hue-chroma mode reactives ---
 
-  $: previewHex = mode === 'hue-chroma'
+  let previewHex = $derived(mode === 'hue-chroma'
     ? (() => { const c = gamutClamp(PREVIEW_LIGHTNESS, chroma, hue); return oklchToHex(c.l, c.c, c.h); })()
-    : color;
+    : color);
 
-  $: hueGradient = (() => {
+  let hueGradient = $derived((() => {
     const _c = chroma;
     const displayChroma = Math.max(_c, CHROMA_MAX);
     const stops = Array.from({ length: 13 }, (_, i) => {
@@ -96,9 +117,9 @@
       return oklchToHex(c.l, c.c, c.h);
     });
     return `linear-gradient(to right, ${stops.join(',')})`;
-  })();
+  })());
 
-  $: chromaGradient = (() => {
+  let chromaGradient = $derived((() => {
     const _h = hue;
     const stops = Array.from({ length: 8 }, (_, i) => {
       const c = (i / 7) * CHROMA_MAX;
@@ -106,7 +127,7 @@
       return oklchToHex(clamped.l, clamped.c, clamped.h);
     });
     return `linear-gradient(to right, ${stops.join(',')})`;
-  })();
+  })());
 
   // --- Shared ---
 
@@ -127,8 +148,8 @@
     }
   }
 
-  let hexEditing = false;
-  let hexDraft = '';
+  let hexEditing = $state(false);
+  let hexDraft = $state('');
 
   function startHexEdit() {
     hexDraft = previewHex;
@@ -165,7 +186,7 @@
         class="eyedropper-btn"
         type="button"
         title="Pick color from screen"
-        on:click={pickScreenColor}
+        onclick={pickScreenColor}
       ><i class="fas fa-eye-dropper"></i></button>
     {/if}
     {#if title}
@@ -176,20 +197,20 @@
         class="hsl-hex-input"
         type="text"
         bind:value={hexDraft}
-        on:keydown={handleHexKeydown}
-        on:blur={commitHex}
+        onkeydown={handleHexKeydown}
+        onblur={commitHex}
         maxlength="7"
         use:autoFocus
       />
     {:else}
-      <button class="hsl-hex" on:click={startHexEdit} title="Click to edit hex">{previewHex}</button>
+      <button class="hsl-hex" onclick={startHexEdit} title="Click to edit hex">{previewHex}</button>
     {/if}
     {#if mode === 'hue-chroma'}
       <code class="hsl-values">oklch({PREVIEW_LIGHTNESS}, {chroma.toFixed(3)}, {Math.round(hue)})</code>
     {:else}
       <code class="hsl-values">hsl({hsl[0]}, {hsl[1]}%, {hsl[2]}%)</code>
     {/if}
-    <slot name="actions" />
+    {@render actions?.()}
     <div class="hsl-panel-actions">
       {#if showRemoveOverride}
         <Button
@@ -211,9 +232,10 @@
     {#if mode === 'hue-chroma'}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGradient}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {hueGradient}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hue}
-            on:input={(e) => onHueChromaChange(+e.currentTarget.value, chroma)} />
+            oninput={(e) => onHueChromaChange(+e.currentTarget.value, chroma)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -221,14 +243,15 @@
           min="0"
           max="360"
           value={hue}
-          on:change={(e) => onHueChromaChange(Math.min(360, Math.max(0, +e.currentTarget.value)), chroma)}
+          onchange={(e) => onHueChromaChange(Math.min(360, Math.max(0, +e.currentTarget.value)), chroma)}
         /><span class="hsl-slider-unit">&deg;</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">C</span>
-        <div class="slider-track" style="background: {chromaGradient}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {chromaGradient}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max={CHROMA_MAX} step="0.001" value={chroma}
-            on:input={(e) => onHueChromaChange(hue, +e.currentTarget.value)} />
+            oninput={(e) => onHueChromaChange(hue, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input chroma-input"
@@ -237,15 +260,16 @@
           max={CHROMA_MAX}
           step="0.001"
           value={chroma.toFixed(3)}
-          on:change={(e) => onHueChromaChange(hue, Math.min(CHROMA_MAX, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => onHueChromaChange(hue, Math.min(CHROMA_MAX, Math.max(0, +e.currentTarget.value)))}
         />
       </div>
     {:else}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hsl[0]}
-            on:input={(e) => updateHsl(0, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(0, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -253,14 +277,15 @@
           min="0"
           max="360"
           value={hsl[0]}
-          on:change={(e) => updateHsl(0, Math.min(360, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(0, Math.min(360, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">&deg;</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">S</span>
-        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[1]}
-            on:input={(e) => updateHsl(1, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(1, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -268,14 +293,15 @@
           min="0"
           max="100"
           value={hsl[1]}
-          on:change={(e) => updateHsl(1, Math.min(100, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(1, Math.min(100, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">%</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">L</span>
-        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[2]}
-            on:input={(e) => updateHsl(2, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(2, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -283,7 +309,7 @@
           min="0"
           max="100"
           value={hsl[2]}
-          on:change={(e) => updateHsl(2, Math.min(100, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(2, Math.min(100, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">%</span>
       </div>
     {/if}
@@ -477,6 +503,7 @@
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   .hsl-slider-input.chroma-input {