@adia-ai/web-components 0.6.33 → 0.6.35

package/components/select/select.test.js

@@ -86,4 +86,206 @@ describe('select-ui', () => {
 
     expect(selected).toEqual(['b']);
   });
+
+  // ── SPEC-040 (multi-select) ──
+
+  it('multi-select: [multiple] sets data-multi-chips and renders tag-ui chips per selected value', async () => {
+    const s = mount(`
+      <select-ui multiple value="a,c">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c">Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    expect(s.hasAttribute('data-multi-chips')).toBe(true);
+    const chips = s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui');
+    expect(chips.length).toBe(2);
+    const chipValues = Array.from(chips).map((c) => c.dataset.chipValue);
+    expect(chipValues).toContain('a');
+    expect(chipValues).toContain('c');
+  });
+
+  it('multi-select: aria-multiselectable=true is set on the listbox', async () => {
+    const s = mount(`
+      <select-ui multiple open>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    const lb = s.querySelector('[slot="listbox"]');
+    expect(lb).toBeTruthy();
+    expect(lb.getAttribute('aria-multiselectable')).toBe('true');
+  });
+
+  it('multi-select: clicking an option toggles selection without closing the popover', async () => {
+    const s = mount(`
+      <select-ui multiple open>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c">Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    const opts = s.querySelectorAll('[role="option"]');
+    const optA = Array.from(opts).find((o) => o.getAttribute('data-value') === 'a');
+    optA.click();
+    await tick();
+    expect(s.open).toBe(true); // still open
+    expect(s.value).toBe('a');
+
+    const optC = Array.from(s.querySelectorAll('[role="option"]')).find((o) => o.getAttribute('data-value') === 'c');
+    optC.click();
+    await tick();
+    expect(s.open).toBe(true);
+    const parts = new Set(s.value.split(','));
+    expect(parts.has('a')).toBe(true);
+    expect(parts.has('c')).toBe(true);
+  });
+
+  it('multi-select: Backspace from the trigger removes the last chip', async () => {
+    const s = mount(`
+      <select-ui multiple value="a,b">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    const ev = new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true });
+    s.dispatchEvent(ev);
+    await tick();
+    expect(s.value).toBe('a');
+  });
+
+  it('multi-select: toggle(id) is a public API', async () => {
+    const s = mount(`
+      <select-ui multiple>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    s.toggle('a');
+    await tick();
+    expect(s.value).toBe('a');
+    s.toggle('a');
+    await tick();
+    expect(s.value).toBe('');
+  });
+
+  it('multi-select: [max] suppresses further selection and fires invalid', async () => {
+    const s = mount(`
+      <select-ui multiple max="2" value="a,b">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c">Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    let invalidFired = null;
+    s.addEventListener('invalid', (e) => { invalidFired = e.detail; });
+    s.toggle('c');
+    await tick();
+    expect(invalidFired).toBeTruthy();
+    expect(invalidFired.reason).toBe('max');
+    expect(s.value).toBe('a,b'); // unchanged
+  });
+
+  it('multi-select: clear() empties value and fires change with removed array', async () => {
+    const s = mount(`
+      <select-ui multiple value="a,b">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    let changed = null;
+    s.addEventListener('change', (e) => { changed = e.detail; });
+    s.clear();
+    await tick();
+    expect(s.value).toBe('');
+    expect(changed.removed).toEqual(['a', 'b']);
+  });
+
+  it('multi-select: selectAllOptions() selects every non-disabled option', async () => {
+    const s = mount(`
+      <select-ui multiple>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c" disabled>Gamma</option>
+      </select-ui>
+    `);
+    await tick();
+    s.selectAllOptions();
+    await tick();
+    const parts = new Set(s.value.split(','));
+    expect(parts.has('a')).toBe(true);
+    expect(parts.has('b')).toBe(true);
+    expect(parts.has('c')).toBe(false); // disabled
+  });
+
+  it('multi-select: [max-chips] shows "+N more" pill when exceeded', async () => {
+    const s = mount(`
+      <select-ui multiple max-chips="2" value="a,b,c,d">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+        <option value="c">Gamma</option>
+        <option value="d">Delta</option>
+      </select-ui>
+    `);
+    await tick();
+    const chips = s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui');
+    expect(chips.length).toBe(2);
+    const more = s.querySelector('[slot="trigger"] [data-more]');
+    expect(more).toBeTruthy();
+    expect(more.textContent).toBe('+2 more');
+  });
+
+  it('multi-select: [clearable] reveals the clear-all button when chips present', async () => {
+    const s = mount(`
+      <select-ui multiple clearable value="a">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    const clearBtn = s.querySelector('[data-clear-all]');
+    expect(clearBtn).toBeTruthy();
+    expect(clearBtn.hasAttribute('hidden')).toBe(false);
+  });
+
+  it('multi-select: [select-all] renders the bulk-action header', async () => {
+    const s = mount(`
+      <select-ui multiple select-all open>
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    const header = s.querySelector('[slot="listbox"] [data-select-all]');
+    expect(header).toBeTruthy();
+    const btn = header.querySelector('[data-select-all-btn]');
+    expect(btn).toBeTruthy();
+    expect(btn.textContent).toBe('Select all');
+  });
+
+  it('multi-select: chip remove event empties that selection from value', async () => {
+    const s = mount(`
+      <select-ui multiple value="a,b">
+        <option value="a">Alpha</option>
+        <option value="b">Beta</option>
+      </select-ui>
+    `);
+    await tick();
+    const chipA = s.querySelector('tag-ui[data-chip-value="a"]');
+    expect(chipA).toBeTruthy();
+    // Simulate tag-ui's remove event (bubbles, with detail.text)
+    chipA.dispatchEvent(new CustomEvent('remove', {
+      bubbles: true,
+      detail: { text: 'Alpha', value: 'Alpha' },
+    }));
+    await tick();
+    expect(s.value).toBe('b');
+  });
 });

package/components/select/select.yaml

@@ -8,17 +8,23 @@ component: Select
 category: input
 version: 1
 description: |
-  Single-select dropdown primitive — the canonical AdiaUI select
-  control. Form-bearing via UIFormElement: [name], [value],
+  Single- and multi-select dropdown primitive — the canonical AdiaUI
+  select control. Form-bearing via UIFormElement: [name], [value],
   [required], [disabled], fires `change`. Options via native
   <option> / <optgroup> children, programmatic `.options` array, or
   JSON [data-options] (hydrated by <editor-shell>'s wireSelects).
   Use for single-select with > 4 options; for ≤ 4 options use
-  <segmented-ui> or <radio-ui>. Multi-select via [multiple searchable].
+  <segmented-ui> or <radio-ui>. Multi-select via [multiple]: trigger
+  renders <tag-ui> chips per selection, popover shows checkbox-style
+  option list, Backspace removes the last chip, [select-all] adds
+  bulk controls, [max-chips] caps the visible chip count with a
+  "+N more" pill. Form value stays a comma-separated string under
+  [name] for native <form> compatibility (parse with .split(',')).
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
-  - icon-ui  # chevron + option-row affixes (created in render)
+  - icon-ui   # chevron + option-row affixes (created in render)
+  - tag-ui    # multi-select chip per selected option in the trigger
 props:
   name:
     description: Form control name for form data submission
@@ -89,9 +95,56 @@ props:
     type: number
     default: null
   multiple:
-    description: Enables multi-select (comma-separated values)
+    description: |
+      Enables multi-select. Trigger renders <tag-ui> chips per selection
+      (not comma-separated text); popover renders checkbox-style option
+      rows where clicks toggle without closing; Backspace from the
+      trigger removes the last chip. Form value remains comma-separated
+      under [name] for native <form> compatibility.
     type: boolean
     default: false
+    reflect: true
+  max-chips:
+    description: |
+      Multi-select only. Caps the number of chips visible in the
+      trigger. When `value.length > max-chips`, the first N chips
+      render plus a "+M more" pill that opens the popover on click.
+      `0` (default) = unlimited.
+    type: number
+    default: 0
+    reflect: true
+  min:
+    description: |
+      Multi-select only. Minimum required selections. Below this floor
+      the host's form validity goes invalid (valueMissing) and the
+      `invalid` event fires.
+    type: number
+    default: 0
+    reflect: true
+  max:
+    description: |
+      Multi-select only. Maximum allowed selections. Toggling past the
+      cap is suppressed; the `invalid` event fires with reason="max".
+      `0` (default) = unlimited.
+    type: number
+    default: 0
+    reflect: true
+  select-all:
+    description: |
+      Multi-select only. Renders a "Select all" / "Clear" control row
+      above the option list. Click selects every non-disabled option;
+      when already all selected, click clears.
+    type: boolean
+    default: false
+    reflect: true
+  clearable:
+    description: |
+      Multi-select only. Adds a clear-all `x` affordance to the trigger
+      when at least one chip is present. Click empties value and fires
+      `change`.
+    type: boolean
+    default: false
+    reflect: true
   open:
     description: Whether the listbox is open
     type: boolean
@@ -128,6 +181,10 @@ props:
 events:
   change:
     description: Fired when selected value changes
+  invalid:
+    description: |
+      Multi-select only. Fired when a toggle is suppressed by [min] or
+      [max] constraints. detail = { value, reason: 'min' | 'max' }.
 usage: |-
   §225 (v0.5.9) — Consumer-authored children must be native `<option>` or
   `<optgroup>`. The `#parseOptions()` walker reads only those two tag names;
@@ -173,6 +230,9 @@ traits: []
 tokens: {}
 requiredIcons:
   - caret-up-down
+  - check               # checkbox indicator on each option in [multiple] mode
+  - x                   # chip dismiss + clear-all affordance ([multiple] + [clearable])
+  - magnifying-glass    # search-input prefix ([searchable])
 a2ui:
   rules:
     - >-
@@ -200,6 +260,18 @@ a2ui:
       unmatched values are valid (tag entry, email-with-suggestion).
       Use [multiple searchable] for multi-select rather than
       authoring a separate multi-select primitive.
+    - >-
+      For multi-select, set [multiple] — the trigger automatically
+      renders <tag-ui> chips per selected option; the popover renders
+      checkbox-style option rows where clicks toggle membership
+      without closing. Form value is comma-separated under [name].
+      There is NO `<multi-select-ui>` tag — that name does not exist.
+    - >-
+      Multi-select bulk controls: [select-all] renders a "Select all" /
+      "Clear" control above the option list; [clearable] adds a
+      clear-all `x` affordance to the trigger. [max-chips] caps the
+      visible chip count and renders "+N more". [min] / [max] gate
+      form validity.
 anti_patterns: []
 examples:
   - name: bleed-design-settings
@@ -341,6 +413,37 @@ examples:
           "variant": "primary"
         }
       ]
+  - name: multi-select-tags
+    description: Multi-select with chip trigger + checkbox option list (SPEC-040).
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": ["sec"]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": ["col"]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "children": ["tags"],
+          "gap": "3"
+        },
+        {
+          "id": "tags",
+          "component": "Select",
+          "multiple": true,
+          "selectAll": true,
+          "label": "Tags",
+          "name": "tags",
+          "placeholder": "Pick tags...",
+          "value": "urgent,backend"
+        }
+      ]
   - name: create-form
     description: Simple account creation form with text fields, select, and action buttons.
     a2ui: >-
@@ -443,6 +546,12 @@ keywords:
   - dropdown
   - combobox
   - autocomplete
+  - multi-select
+  - multiple
+  - chips
+  - tokens
+  - tags
+  - picker
 synonyms:
   autocomplete:
     - combobox
@@ -461,6 +570,18 @@ synonyms:
     - menu
     - select
     - form
+  multi-select:
+    - multiselect
+    - multi-pick
+    - chips
+    - tokens
+    - tags
+    - multiple
+  multiple:
+    - multi-select
+    - multiselect
+    - chips
+    - select-many
 related:
   - image
   - button

package/components/skeleton/skeleton.css

@@ -1,11 +1,11 @@
 @scope (skeleton-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --skeleton-bg:        var(--a-bg-muted);
-    --skeleton-highlight: var(--a-bg-subtle);
-    --skeleton-radius:    var(--a-radius-sm);
-    --skeleton-duration:  1.5s;
-    --skeleton-easing:    var(--a-easing);
+    --skeleton-bg-default:        var(--a-bg-muted);
+    --skeleton-highlight-default: var(--a-bg-subtle);
+    --skeleton-radius-default:    var(--a-radius-sm);
+    --skeleton-duration-default:  1.5s;
+    --skeleton-easing-default:    var(--a-easing);
   }
 
   :scope {
@@ -14,16 +14,16 @@
     display: block;
     position: relative;
     overflow: hidden;
-    background: var(--skeleton-bg);
-    border-radius: var(--skeleton-radius);
+    background: var(--skeleton-bg, var(--skeleton-bg-default));
+    border-radius: var(--skeleton-radius, var(--skeleton-radius-default));
   }
 
   /* ── Radius variants ── */
-  :scope[radius="none"] { --skeleton-radius: 0; }
-  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }
+  :scope[radius="none"] { --skeleton-radius-default: 0; }
+  :scope[radius="sm"]   { --skeleton-radius-default: var(--a-radius-sm); }
+  :scope[radius="md"]   { --skeleton-radius-default: var(--a-radius-md); }
+  :scope[radius="lg"]   { --skeleton-radius-default: var(--a-radius-lg); }
+  :scope[radius="full"] { --skeleton-radius-default: var(--a-radius-full); }
 
   /* ── Shimmer animation (default; suppress with [static]) ── */
   :scope:not([static])::after {
@@ -33,11 +33,11 @@
     background: linear-gradient(
       90deg,
       transparent 25%,
-      var(--skeleton-highlight) 50%,
+      var(--skeleton-highlight, var(--skeleton-highlight-default)) 50%,
       transparent 75%
     );
     background-size: 200% 100%;
-    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-easing) infinite;
+    animation: skeleton-shimmer var(--skeleton-duration, var(--skeleton-duration-default)) var(--skeleton-easing, var(--skeleton-easing-default)) infinite;
   }
 
   @keyframes skeleton-shimmer {

package/components/skeleton/skeleton.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISkeleton } from './class.js';
+import { UISkeleton } from './skeleton.class.js';
 
 defineIfFree('skeleton-ui', UISkeleton);
 

package/components/slider/slider.css

@@ -7,8 +7,8 @@
        Variables
          W    = track width  (100% of the track element)
          t    = thumb width  (full outer width including internal padding)
-         h    = track height (var(--slider-track-height))
-         pad  = internal padding on the thumb (var(--slider-thumb-padding))
+         h    = track height (var(--slider-track-height, var(--slider-track-height-default)))
+         pad  = internal padding on the thumb (var(--slider-thumb-padding, var(--slider-thumb-padding-default)))
          p    = progress     (0.0 → 1.0, written by JS as --slider-pct)
 
        The thumb consists of two layers:
@@ -44,8 +44,8 @@
        In CSS (percentages relative to W):
 
          left = calc(t/2 + p · (W − t))
-              = calc(var(--slider-thumb-width) / 2
-                     + var(--slider-pct) * (100% - var(--slider-thumb-width)))
+              = calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
+                     + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))))
 
        The element is shifted back by 50% via transform so its
        geometric center lands on the computed point.
@@ -60,50 +60,50 @@
        ═══════════════════════════════════════════════════════════════ */
 
     /* ── Layout ── */
-    --slider-gap:               var(--a-space-1);
-    --slider-readout-gap:       var(--a-space-0-5);
-    --slider-radius:            var(--a-radius-full);
+    --slider-gap-default:               var(--a-space-1);
+    --slider-readout-gap-default:       var(--a-space-0-5);
+    --slider-radius-default:            var(--a-radius-full);
 
     /* Track height scales with the universal [size] attribute
        via --a-toggle-size: 16 sm / 20 md / 24 lg at density=1.
        Override --slider-track-height directly for custom sizes. */
-    --slider-track-height:      var(--a-toggle-size);
+    --slider-track-height-default:      var(--a-toggle-size);
 
     /* Thumb padding: internal breathing room on all sides.
        The visual pill sits pad px away from the container edge. */
-    --slider-thumb-padding:     2px;
+    --slider-thumb-padding-default:     2px;
 
     /* Visual thumb height: track height minus top and bottom padding. */
-    --slider-thumb-visual-h:    calc(var(--slider-track-height) - 2 * var(--slider-thumb-padding));
+    --slider-thumb-visual-h-default:    calc(var(--slider-track-height, var(--slider-track-height-default)) - 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));
 
     /* Visual thumb width: 2×1 pill ratio. */
-    --slider-thumb-visual-w:    calc(var(--slider-thumb-visual-h) * 2);
+    --slider-thumb-visual-w-default:    calc(var(--slider-thumb-visual-h, var(--slider-thumb-visual-h-default)) * 2);
 
     /* Container / geometry thumb width: visual width plus left and
        right padding.  This is the width used in the travel equation. */
-    --slider-thumb-width:       calc(var(--slider-thumb-visual-w) + 2 * var(--slider-thumb-padding));
+    --slider-thumb-width-default:       calc(var(--slider-thumb-visual-w, var(--slider-thumb-visual-w-default)) + 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));
 
     /* Progress fraction (0.0 → 1.0) written by JS. */
-    --slider-pct:               0;
+    --slider-pct-default:               0;
 
     /* ── Colors ──
        Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
-    --slider-track-bg:          var(--a-bg-muted);
-    --slider-fill-bg:           var(--a-primary-bg);
-    --slider-thumb-bg:          var(--a-chrome-light);
-    --slider-fill-bg-disabled:  var(--a-border-subtle);
-    --slider-thumb-bg-disabled: var(--a-fg-muted);
+    --slider-track-bg-default:          var(--a-bg-muted);
+    --slider-fill-bg-default:           var(--a-primary-bg);
+    --slider-thumb-bg-default:          var(--a-chrome-light);
+    --slider-fill-bg-disabled-default:  var(--a-border-subtle);
+    --slider-thumb-bg-disabled-default: var(--a-fg-muted);
 
     /* ── Typography ── */
-    --slider-font-size:         var(--a-ui-size);
-    --slider-value-weight:      var(--a-weight-bold);
+    --slider-font-size-default:         var(--a-ui-size);
+    --slider-value-weight-default:      var(--a-weight-bold);
 
     /* ── Transition ── */
-    --slider-duration:          var(--a-duration-fast);
-    --slider-easing:            var(--a-easing);
+    --slider-duration-default:          var(--a-duration-fast);
+    --slider-easing-default:            var(--a-easing);
 
     /* ── Focus ── */
-    --slider-focus-ring:        var(--a-focus-ring);
+    --slider-focus-ring-default:        var(--a-focus-ring);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -112,7 +112,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--slider-gap);
+    gap: var(--slider-gap, var(--slider-gap-default));
   }
 
   :scope[data-direction="row"] {
@@ -126,7 +126,7 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    font-size: var(--slider-font-size);
+    font-size: var(--slider-font-size, var(--slider-font-size-default));
   }
 
   [slot="label"] {
@@ -136,12 +136,12 @@
   [slot="readout"] {
     display: flex;
     align-items: baseline;
-    gap: var(--slider-readout-gap);
+    gap: var(--slider-readout-gap, var(--slider-readout-gap-default));
   }
 
   [slot="value"] {
     color: var(--a-fg);
-    font-weight: var(--slider-value-weight);
+    font-weight: var(--slider-value-weight, var(--slider-value-weight-default));
     font-variant-numeric: tabular-nums;
   }
 
@@ -152,9 +152,9 @@
   /* Track: the reference frame W for all geometry calculations. */
   [slot="track"] {
     position: relative;
-    height: var(--slider-track-height);
-    border-radius: var(--slider-radius);
-    background: var(--slider-track-bg);
+    height: var(--slider-track-height, var(--slider-track-height-default));
+    border-radius: var(--slider-radius, var(--slider-radius-default));
+    background: var(--slider-track-bg, var(--slider-track-bg-default));
     cursor: pointer;
     touch-action: none;
   }
@@ -166,10 +166,10 @@
     left: 0;
     height: 100%;
     border-radius: inherit;
-    background: var(--slider-fill-bg);
+    background: var(--slider-fill-bg, var(--slider-fill-bg-default));
     pointer-events: none;
-    width: calc(var(--slider-thumb-width)
-                + var(--slider-pct) * (100% - var(--slider-thumb-width)));
+    width: calc(var(--slider-thumb-width, var(--slider-thumb-width-default))
+                + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
   }
 
   /* Thumb CONTAINER: full track height, geometry width.
@@ -178,18 +178,18 @@
   [slot="thumb"] {
     position: absolute;
     top: 50%;
-    left: calc(var(--slider-thumb-width) / 2
-               + var(--slider-pct) * (100% - var(--slider-thumb-width)));
-    width: var(--slider-thumb-width);
-    height: var(--slider-track-height);
-    border-radius: var(--slider-radius);
+    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
+               + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    width: var(--slider-thumb-width, var(--slider-thumb-width-default));
+    height: var(--slider-track-height, var(--slider-track-height-default));
+    border-radius: var(--slider-radius, var(--slider-radius-default));
     background: transparent;
     transform: translate(-50%, -50%);
     cursor: grab;
     touch-action: none;
     transition:
-      left     var(--slider-duration) var(--slider-easing),
-      transform var(--slider-duration) var(--slider-easing);
+      left     var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default)),
+      transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
     z-index: 1;
   }
 
@@ -200,15 +200,15 @@
   [slot="thumb"]::before {
     content: '';
     position: absolute;
-    inset: var(--slider-thumb-padding);
+    inset: var(--slider-thumb-padding, var(--slider-thumb-padding-default));
     border-radius: inherit;
-    background: var(--slider-thumb-bg);
+    background: var(--slider-thumb-bg, var(--slider-thumb-bg-default));
   }
 
   /* During drag: kill the left transition so the thumb follows
      the pointer frame-by-frame without CSS interpolation lag. */
   :scope[data-dragging] [slot="thumb"] {
-    transition: transform var(--slider-duration) var(--slider-easing);
+    transition: transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
   }
 
   [slot="thumb"]:hover {
@@ -221,13 +221,13 @@
   }
 
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring); }
+  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring, var(--slider-focus-ring-default)); }
 
   /* Disabled */
   :scope[disabled] [slot="track"] { cursor: not-allowed; }
-  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled); }
+  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled, var(--slider-fill-bg-disabled-default)); }
   :scope[disabled] [slot="thumb"]::before {
-    background: var(--slider-thumb-bg-disabled);
+    background: var(--slider-thumb-bg-disabled, var(--slider-thumb-bg-disabled-default));
   }
 
   /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ── */