@adia-ai/web-components 0.6.34 → 0.6.36

package/components/select/select.css

@@ -182,6 +182,74 @@
   :scope[variant="ghost"] > [slot="trigger"]:hover > [slot="caret"] {
     color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
+
+  /* ── SPEC-040 — Multi-select chip trigger ──
+     [data-multi-chips] is set on the host by render() when [multiple] is
+     active. Layout switches from inline-text trigger to wrap-flex chip row.
+     Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
+     the +more pill is a CSS-only button styled to match. */
+  :scope[data-multi-chips] > [slot="trigger"] {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--a-space-1);
+    /* min-height tracks single-row height when empty; flex-wrap allows
+       it to grow as chips overflow. */
+    padding-block: calc(var(--select-py, var(--a-space-1)));
+  }
+  :scope[data-multi-chips] [data-chips] {
+    display: contents; /* let chips participate in the trigger's flex line */
+  }
+  :scope[data-multi-chips] [data-chips] tag-ui {
+    /* Chip styling tracks the active variant via tag-ui's own tokens. */
+    --tag-size-default: var(--a-ui-tiny);
+  }
+  :scope[data-multi-chips] [data-chips] [data-more] {
+    appearance: none;
+    border: 1px solid var(--select-border, var(--select-border-default));
+    background: var(--select-bg-hover, var(--select-bg-hover-default));
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    border-radius: var(--a-radius-full);
+    padding: 0 var(--a-space-2);
+    font: inherit;
+    font-size: var(--a-ui-tiny);
+    line-height: calc(var(--a-size) - var(--a-space-3));
+    cursor: pointer;
+  }
+  :scope[data-multi-chips] [data-chips] [data-more]:hover {
+    background: var(--a-bg-hover);
+  }
+
+  /* Clear-all `x` affordance. Visible only when [clearable] AND chips. */
+  :scope[data-multi-chips] [data-clear-all] {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: var(--a-space-0);
+    margin-inline-start: var(--a-space-1);
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    cursor: pointer;
+    border-radius: var(--a-radius-full);
+    --a-icon-size: var(--a-ui-sm);
+    display: inline-flex;
+    align-items: center;
+  }
+  :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
+  :scope[data-multi-chips] [data-clear-all]:hover {
+    color: var(--select-fg, var(--select-fg-default));
+    background: var(--a-bg-hover);
+  }
+
+  /* In multi-select with chips present, the trigger display element is
+     the rest-of-row slot — make it flex-grow but not push chips off. */
+  :scope[data-multi-chips] [slot="display"] {
+    flex: 1;
+    min-width: 4ch;
+  }
+  /* Hide the display when empty in multi-mode (chips fill the slot). */
+  :scope[data-multi-chips] [slot="display"]:empty {
+    flex: 0 0 0;
+    padding: 0;
+  }
 }
 
 /* ── Top-layer: cannot inherit component tokens ── */
@@ -320,3 +388,93 @@ select-ui > [slot="hint"] {
   color: var(--select-hint-fg, var(--select-fg-muted, var(--select-fg-muted-default)));
   line-height: var(--select-hint-lh, 1.4);
 }
+
+/* ── SPEC-040 — Multi-select popover affordances ──
+   Top-layer: popover lives outside @scope so reference --a-* directly. */
+
+/* Select-all / Clear control row above the option list. */
+select-ui [slot="listbox"] [data-select-all] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--a-space-1);
+  border-bottom: 1px solid var(--a-border-subtle);
+  margin-bottom: var(--a-space-1);
+}
+select-ui [slot="listbox"] [data-select-all-btn] {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: var(--a-ui-xs);
+  color: var(--a-accent);
+  cursor: pointer;
+  padding: var(--a-space-1) var(--a-space-2);
+  border-radius: var(--a-radius-sm);
+}
+select-ui [slot="listbox"] [data-select-all-btn]:hover {
+  background: var(--a-bg-hover);
+}
+
+/* Multi-select option rows — leading checkbox indicator + label.
+   The check icon is hidden by default and revealed at aria-selected. */
+select-ui [role="option"][data-multi-option] {
+  display: flex;
+  align-items: center;
+  gap: var(--a-space-2);
+}
+select-ui [role="option"][data-multi-option] [data-checkbox] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--a-ui-border);
+  border-radius: var(--a-radius-sm);
+  background: var(--a-canvas-bright);
+  margin-inline-end: 0; /* row gap already provides spacing */
+  transition:
+    background var(--a-duration-fast) var(--a-easing),
+    border-color var(--a-duration-fast) var(--a-easing);
+}
+/* Hide the check icon when unselected — overrides the option-row icon-ui
+   rule above. */
+select-ui [role="option"][data-multi-option] [data-checkbox] icon-ui {
+  --a-icon-size: 0.75rem;
+  color: transparent;
+  margin: 0;
+  vertical-align: 0;
+  transition: color var(--a-duration-fast) var(--a-easing);
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] {
+  background: var(--a-accent);
+  border-color: var(--a-accent);
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] icon-ui {
+  color: var(--a-chrome-light);
+}
+select-ui [role="option"][data-multi-option] [data-option-label] {
+  flex: 1;
+  min-width: 0;
+}
+/* Multi-option selected state — override the single-select "bold +
+   accent bg" treatment so the row stays light + the checkbox carries
+   the selected signal. */
+select-ui [role="option"][data-multi-option][aria-selected="true"] {
+  background: transparent;
+  font-weight: inherit;
+  color: var(--select-fg, var(--select-fg-default));
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"]:hover,
+select-ui [role="option"][data-multi-option][aria-selected="true"][data-focused] {
+  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
+}
+
+/* Empty state when there are no options. */
+select-ui [slot="listbox"] [data-empty] {
+  padding: var(--a-space-3) var(--a-ui-px);
+  color: var(--a-fg-muted);
+  text-align: center;
+  font-size: var(--a-ui-xs);
+}

package/components/select/select.d.ts

@@ -17,7 +17,12 @@ export interface SelectOption {
 }
 
 export interface SelectChangeEventDetail<V extends string = string> {
-  value: V;
+  /** Single-select: the new value. Multi-select: array of selected ids. */
+  value: V | V[];
+  /** Multi-select only: ids added in this change. */
+  added?: V[];
+  /** Multi-select only: ids removed in this change. */
+  removed?: V[];
 }
 export type SelectChangeEvent<V extends string = string> = CustomEvent<SelectChangeEventDetail<V>>;
 
@@ -26,6 +31,13 @@ export interface SelectActionEventDetail {
 }
 export type SelectActionEvent = CustomEvent<SelectActionEventDetail>;
 
+/** SPEC-040 — fired when [multiple] toggle suppressed by min/max constraints. */
+export interface SelectInvalidEventDetail {
+  value: string[];
+  reason: 'min' | 'max';
+}
+export type SelectInvalidEvent = CustomEvent<SelectInvalidEventDetail>;
+
 export class UISelect extends UIFormElement {
   placeholder: string;
   /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
@@ -40,6 +52,16 @@ export class UISelect extends UIFormElement {
   /** Allow values not in the option list (combobox mode). */
   freeText: boolean;
   divider: boolean;
+  /** SPEC-040 — cap visible chips in multi-select trigger. 0 = unlimited. */
+  maxChips: number;
+  /** SPEC-040 — minimum required selections in multi-select mode. */
+  min: number;
+  /** SPEC-040 — maximum allowed selections in multi-select mode. 0 = unlimited. */
+  max: number;
+  /** SPEC-040 — render Select-all / Clear control above the option list. */
+  selectAll: boolean;
+  /** SPEC-040 — render a clear-all `x` affordance in the trigger. */
+  clearable: boolean;
   /** §207 (v0.5.7): hint text below the field, wired to aria-describedby. */
   hint: string;
   /**
@@ -63,6 +85,13 @@ export class UISelect extends UIFormElement {
    */
   options: readonly SelectOption[];
 
+  /** SPEC-040 — toggle one option's selection in multi-select mode. */
+  toggle(id: string): void;
+  /** SPEC-040 — select every non-disabled option in multi-select mode. */
+  selectAllOptions(): void;
+  /** SPEC-040 — clear all selections. */
+  clear(): void;
+
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UISelect, ev: HTMLElementEventMap[K]) => unknown,
@@ -70,4 +99,5 @@ export class UISelect extends UIFormElement {
   ): void;
   addEventListener(type: 'change', listener: (ev: SelectChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'action', listener: (ev: SelectActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'invalid', listener: (ev: SelectInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/select/select.js

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

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.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.js

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

package/components/spinner/spinner.a2ui.json

@@ -48,12 +48,13 @@
       "default": "current"
     },
     "variant": {
-      "description": "Visual flavor — arc (rotating quarter-circle), ring (full ring with one colored segment), dots (three bouncing dots).",
+      "description": "Visual flavor — `arc` (rotating quarter-circle, the default glyph spinner), `ring` (full ring with one colored segment rotating around it), `dots` (three bouncing dots — animated in a left-to-right wave), `knight` (horizontal \"knight-rider\" bar — a sliding thumb that bounces back-and-forth across a track; widest variant, reads as a determinate-looking bar but is indeterminate by intent).",
       "type": "string",
       "enum": [
         "arc",
         "ring",
-        "dots"
+        "dots",
+        "knight"
       ],
       "default": "arc"
     }