@oddkin/components 0.0.0-stage → 1.0.0-beta.1

package/dist/slider/slider.js

@@ -0,0 +1,183 @@
+import { event, prop } from '@oddkin/core/element';
+import { formatNumber, langOf } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { OddkinFormControl } from '../form-control/form-control.js';
+import { keyValue, pointerDrag, snapNumber } from '../form-control/range.js';
+/** Dispatched for every change the user makes (a key, a drag step), as on a native range. */
+export const inputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'value',
+    intent: 'user',
+});
+/** Dispatched when the user commits a change: after each key, and when a drag ends. */
+export const changeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A number from a bounded range, chosen by dragging a thumb along a track or with the keys, with
+ * the current value and both endpoints shown. Drawn as an ARIA slider rather than a native
+ * `<input type="range">`, whose track and thumb can only be styled through engine-prefixed
+ * pseudo-elements. Values follow the native range: snapped to `step` from `min`, clamped to the
+ * range; without a `value` attribute the default is halfway.
+ *
+ * @csspart field - Wrapper of the label row, description, slider, endpoints, and error.
+ * @csspart label - The visible label.
+ * @csspart output - The current value, beside the label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The area that takes pointer input: track and thumb.
+ * @csspart track - The full range.
+ * @csspart fill - The part of the track up to the value.
+ * @csspart thumb - The handle (`role="slider"`); takes focus.
+ * @csspart min-label - The lowest value, under the start of the track.
+ * @csspart max-label - The highest value, under the end of the track.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The slider shows its error: `error` is set.
+ * @a11y The thumb is a `role="slider"` named by `label`, with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and, with `renderValue`, `aria-valuetext`; description and error are announced through `aria-describedby`. The output and endpoint labels repeat the values visually and are hidden from assistive technology.
+ * @keyboard Right and Up increase by `step`, Left and Down decrease (Left and Right swap in right-to-left text); Page Up and Page Down move by a tenth of the range, in whole steps; Home and End go to `min` and `max`. Each key dispatches `input` and `change`.
+ * @previewRole slider
+ * @useFor A setting within a known range where the approximate position matters more than the exact number: a zoom level, a volume, a preview scale.
+ * @notFor An exact number (use odd-input type="number"); one of a few named values (use odd-segmented-control); progress of a task (use odd-progress).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinSlider extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the slider.' }),
+    defaultValue: prop.string({
+        default: '',
+        attribute: 'value',
+        description: 'Initial value; the `value` attribute, as on a native range (default: halfway).',
+    }),
+    min: prop.number({ default: 0, description: 'Lowest value.' }),
+    max: prop.number({ default: 100, description: 'Highest value.' }),
+    step: prop.number({ default: 1, description: 'Granularity, counted from `min`.' }),
+    renderValue: prop.custom({
+        default: () => undefined,
+        coerce: (value) => value === undefined || typeof value === 'function'
+            ? { ok: true, value: value }
+            : { ok: false, reason: 'expected a function or undefined' },
+        description: 'Formats the value, `min`, and `max` for display and announcement (default: the number in the element language).',
+    }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: inputEvent, change: changeEvent };
+    // undefined until set or moved ("dirty"), then independent of `defaultValue`.
+    #value = signal(undefined);
+    constructor() {
+        super();
+        // A value assigned before the element was defined becomes the dirty value.
+        if (Object.hasOwn(this, 'value')) {
+            const early = this.value;
+            delete this.value;
+            this.value = String(early ?? '');
+        }
+    }
+    /** @internal `max`, or `min` when `max` is below it (as native). */
+    get _max() {
+        return Math.max(this.min, this.max);
+    }
+    // The grid: `step` (1 when it is not positive) from `min`, within `min` and `max`.
+    get #range() {
+        return { min: this.min, max: this._max, step: this.step > 0 ? this.step : 1, base: this.min };
+    }
+    /** @internal The current value as a number on the grid. */
+    _number = computed(() => {
+        const parsed = Number.parseFloat(this.#value.value ?? this.defaultValue);
+        const value = Number.isFinite(parsed) ? parsed : (this.min + this._max) / 2;
+        return snapNumber(value, this.#range);
+    });
+    /** The current value, as a string (native range). Setting it detaches it from `defaultValue`. */
+    get value() {
+        return String(this._number.value);
+    }
+    set value(value) {
+        this.#value.value = String(value ?? '');
+    }
+    /** The current value as a number. */
+    get valueAsNumber() {
+        return this._number.value;
+    }
+    set valueAsNumber(value) {
+        this.value = String(value);
+    }
+    /** @internal Display text for a value. */
+    _text(value) {
+        return this.renderValue ? this.renderValue(value) : formatNumber(value, langOf(this));
+    }
+    /** @internal The value's position along the track, from 0 to 1. */
+    get _fraction() {
+        const span = this._max - this.min;
+        return span > 0 ? (this._number.value - this.min) / span : 0;
+    }
+    _formOptions() {
+        return {
+            value: () => this.value,
+            anchor: () => this.shadowRoot?.querySelector('.thumb'),
+            onReset: () => {
+                this.#value.value = undefined;
+            },
+            onRestore: (state) => {
+                if (typeof state === 'string')
+                    this.value = state;
+            },
+        };
+    }
+    get #disabled() {
+        return this.disabled || this._formDisabled.value;
+    }
+    // Sets the value the user chose; true when it changed.
+    #move(value) {
+        const next = snapNumber(value, this.#range);
+        if (next === this._number.peek())
+            return false;
+        this.value = String(next);
+        this.emit(inputEvent);
+        return true;
+    }
+    /** @internal Template handler: keys on the thumb. */
+    _onKeydown = (event) => {
+        if (this.#disabled || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const range = this.#range;
+        // A tenth of the range, in whole steps.
+        const page = Math.max(1, Math.round((this._max - this.min) / 10 / range.step));
+        const rtl = getComputedStyle(this).direction === 'rtl';
+        const next = keyValue(event.key, this._number.peek(), range, { page, horizontal: true, rtl });
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        if (this.#move(next))
+            this.emit(changeEvent);
+    };
+    // A press on the track or thumb moves the value there and starts a drag that follows the pointer.
+    #press(event, area, scope) {
+        if (this.#disabled || event.button !== 0 || !event.isPrimary)
+            return;
+        const thumb = area.querySelector('.thumb');
+        if (!thumb)
+            return;
+        // No text selection starts; focus moves to the thumb so the keys continue from here.
+        event.preventDefault();
+        thumb.focus({ preventScroll: true });
+        const start = this._number.peek();
+        pointerDrag(scope, area, event, {
+            inset: thumb.offsetWidth / 2,
+            move: (x) => this.#move(this.min + x * (this._max - this.min)),
+            end: () => {
+                if (this._number.peek() !== start)
+                    this.emit(changeEvent);
+            },
+        });
+    }
+    mounted(scope) {
+        super.mounted(scope);
+        const area = this.shadowRoot?.querySelector('.slider');
+        if (area)
+            scope.listen(area, 'pointerdown', (event) => this.#press(event, area, scope));
+    }
+}
+//# sourceMappingURL=slider.js.map

package/dist/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/slider/slider.ts"],"names":[],"mappings":"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"}

package/dist/slider/slider.recipe.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Arrangement of the slider (layout-recipes.md §14): the label and the value in one row on a shared
+ * baseline (the value keeps to the end with its own auto margin, also without a label), and the
+ * two end labels at the ends of a row.
+ */
+export declare const sliderRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=slider.recipe.d.ts.map

package/dist/slider/slider.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.recipe.d.ts","sourceRoot":"","sources":["../../src/slider/slider.recipe.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2CAMvB,CAAC"}

package/dist/slider/slider.recipe.js

@@ -0,0 +1,15 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row } from '../layout/index.js';
+/**
+ * Arrangement of the slider (layout-recipes.md §14): the label and the value in one row on a shared
+ * baseline (the value keeps to the end with its own auto margin, also without a label), and the
+ * two end labels at the ends of a row.
+ */
+export const sliderRecipe = defineLayoutRecipe({
+    name: 'slider',
+    regions: {
+        heading: row({ gap: token('space.none'), align: 'baseline' }),
+        endpoints: row({ gap: token('space.none'), align: 'baseline', justify: 'space-between' }),
+    },
+});
+//# sourceMappingURL=slider.recipe.js.map

package/dist/slider/slider.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.recipe.js","sourceRoot":"","sources":["../../src/slider/slider.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;IAC7C,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE;QACP,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QAC7D,SAAS,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;KAC1F;CACF,CAAC,CAAC"}

package/dist/slider/slider.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const sliderRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=slider.recipe.styles.d.ts.map

package/dist/slider/slider.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/slider/slider.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yCAE9B,CAAC"}

package/dist/slider/slider.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./slider.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const sliderRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .heading {\n    display: flex;\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--odd-space-none);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .endpoints {\n    display: flex;\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--odd-space-none);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n    justify-content: space-between;\n  }\n}\n');
+//# sourceMappingURL=slider.recipe.styles.js.map

package/dist/slider/slider.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.recipe.styles.js","sourceRoot":"","sources":["../../src/slider/slider.recipe.styles.ts"],"names":[],"mappings":"AAAA,qGAAqG;AACrG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CACzC,ueAAue,CACxe,CAAC"}

package/dist/slider/slider.structural.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The slider is a block: the shared slider area (track, fill, and thumb), the label and the output
+ * sharing a row, and the endpoint labels under the track's ends (those rows are the layout recipe
+ * in `slider.recipe.ts`). No brand tokens.
+ */
+export declare const sliderStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=slider.structural.styles.d.ts.map

package/dist/slider/slider.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.structural.styles.d.ts","sourceRoot":"","sources":["../../src/slider/slider.structural.styles.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,yCASlC,CAAC"}

package/dist/slider/slider.structural.styles.js

@@ -0,0 +1,19 @@
+import { css } from '@oddkin/core/styles';
+import { rangeStructuralStyles } from '../styles/range.structural.styles.js';
+import { sliderRecipeStyles } from './slider.recipe.styles.js';
+/**
+ * The slider is a block: the shared slider area (track, fill, and thumb), the label and the output
+ * sharing a row, and the endpoint labels under the track's ends (those rows are the layout recipe
+ * in `slider.recipe.ts`). No brand tokens.
+ */
+export const sliderStructuralStyles = css `
+  ${sliderRecipeStyles}
+  ${rangeStructuralStyles}
+  :host {
+    display: block;
+  }
+  .heading > .output {
+    margin-inline-start: auto;
+  }
+`;
+//# sourceMappingURL=slider.structural.styles.js.map

package/dist/slider/slider.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.structural.styles.js","sourceRoot":"","sources":["../../src/slider/slider.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,kBAAkB;IAClB,qBAAqB;;;;;;;CAOxB,CAAC"}

package/dist/slider/slider.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default slider (Figma `slider`): the shared slider area (track, fill, and thumb), the
+ * label and the output in the UI type role, and endpoint labels in the small role and secondary
+ * colour. Disabled: the label and output take the disabled text colour (the fill too, in the
+ * shared area).
+ */
+export declare const sliderStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=slider.styles.d.ts.map

package/dist/slider/slider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,yCAkBxB,CAAC"}

package/dist/slider/slider.styles.js

@@ -0,0 +1,29 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+import { rangeStyles } from '../styles/range.styles.js';
+/**
+ * Oddkin's default slider (Figma `slider`): the shared slider area (track, fill, and thumb), the
+ * label and the output in the UI type role, and endpoint labels in the small role and secondary
+ * colour. Disabled: the label and output take the disabled text colour (the fill too, in the
+ * shared area).
+ */
+export const sliderStyles = css `
+  ${rangeStyles}
+  .output {
+    color: ${token('color.text.primary')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  .endpoints {
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  :host(:disabled) .label,
+  :host(:disabled) .output {
+    color: ${token('color.text.disabled')};
+  }
+`;
+//# sourceMappingURL=slider.styles.js.map

package/dist/slider/slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;IAC3B,WAAW;;aAEF,KAAK,CAAC,oBAAoB,CAAC;iBACvB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;aAGxC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;;aAIrC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}

package/dist/slider/slider.template.d.ts

@@ -0,0 +1,9 @@
+import type { OddkinSlider } from './slider.js';
+/**
+ * Anatomy: a row with the `label` part and the `output` (the current value); the `description`;
+ * the slider area (`control`) holding the `track` with its `fill` and the focusable `thumb`
+ * (`role="slider"`), placed by the value's fraction (`--_fraction`); the endpoint labels; and the
+ * `error`. The output and endpoints repeat values the thumb already announces.
+ */
+export declare const sliderTemplate: (slider: OddkinSlider) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=slider.template.d.ts.map

package/dist/slider/slider.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.template.d.ts","sourceRoot":"","sources":["../../src/slider/slider.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,WAAY,YAAY,mDA0ClD,CAAC"}

package/dist/slider/slider.template.js

@@ -0,0 +1,53 @@
+import { styleMap } from '@oddkin/core/helpers/style-map';
+import { html } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+/**
+ * Anatomy: a row with the `label` part and the `output` (the current value); the `description`;
+ * the slider area (`control`) holding the `track` with its `fill` and the focusable `thumb`
+ * (`role="slider"`), placed by the value's fraction (`--_fraction`); the endpoint labels; and the
+ * `error`. The output and endpoints repeat values the thumb already announces.
+ */
+export const sliderTemplate = (slider) => {
+    const value = slider.valueAsNumber;
+    const disabled = slider.disabled || slider._formDisabled.value;
+    // `aria-disabled` on the field marks its texts (output, endpoints) as part of a disabled control.
+    return html `<div part="field" class="field" aria-disabled=${disabled ? 'true' : null}>
+    <div class="heading">
+      <div part="label" id="label" class="label" ?hidden=${!slider.label}>${slider.label}</div>
+      <div part="output" class="output" aria-hidden="true">${slider._text(value)}</div>
+    </div>
+    <div part="description" id="description" class="description" ?hidden=${!slider.description}>
+      ${slider.description}
+    </div>
+    <div
+      part="control"
+      class="slider"
+      style=${styleMap({ '--_fraction': String(slider._fraction) })}
+    >
+      <div part="track" class="track"><div part="fill" class="fill"></div></div>
+      <div
+        part="thumb"
+        class="thumb"
+        role="slider"
+        tabindex=${disabled ? '-1' : '0'}
+        aria-labelledby=${slider.label ? 'label' : null}
+        aria-valuemin=${String(slider.min)}
+        aria-valuemax=${String(slider._max)}
+        aria-valuenow=${String(value)}
+        aria-valuetext=${slider.renderValue ? slider._text(value) : null}
+        aria-disabled=${disabled ? 'true' : null}
+        aria-describedby=${slider._describedBy}
+        aria-invalid=${slider._userInvalid.value ? 'true' : null}
+        @keydown=${slider._onKeydown}
+        @blur=${slider._onBlur}
+      ></div>
+    </div>
+    <div class="endpoints" aria-hidden="true">
+      <span part="min-label">${slider._text(slider.min)}</span
+      ><span part="max-label">${slider._text(slider._max)}</span>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!slider.error}>${slider.error}</div>
+    ${externalDescriptionTemplate(slider._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=slider.template.js.map

package/dist/slider/slider.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.template.js","sourceRoot":"","sources":["../../src/slider/slider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAG7E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoB,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC;IACnC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC;IAC/D,kGAAkG;IAClG,OAAO,IAAI,CAAA,iDAAiD,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;;2DAE3B,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;6DAC3B,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;;2EAEL,CAAC,MAAM,CAAC,WAAW;QACtF,MAAM,CAAC,WAAW;;;;;cAKZ,QAAQ,CAAC,EAAE,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;;;;;;;mBAOhD,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;0BACd,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;wBAC/B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC;wBAClB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;wBACnB,MAAM,CAAC,KAAK,CAAC;yBACZ,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;wBAChD,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;2BACrB,MAAM,CAAC,YAAY;uBACvB,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;mBAC7C,MAAM,CAAC,UAAU;gBACpB,MAAM,CAAC,OAAO;;;;+BAIC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;gCACvB,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;;yDAEA,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;MAChF,2BAA2B,CAAC,MAAM,CAAC,oBAAoB,CAAC;SACrD,CAAC;AACV,CAAC,CAAC"}

package/dist/spinner/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { spinnerStyles } from '../styles/spinner.styles.js';
+export { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+export { OddkinSpinner } from './spinner.js';
+export { spinnerTemplate } from './spinner.template.js';
+export { spinnerStructuralStyles } from './spinner.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/spinner/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/spinner/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/spinner/foundation.js

@@ -0,0 +1,9 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { spinnerStyles } from '../styles/spinner.styles.js';
+export { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+export { OddkinSpinner } from './spinner.js';
+export { spinnerTemplate } from './spinner.template.js';
+export { spinnerStructuralStyles } from './spinner.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/spinner/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/spinner/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/spinner/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinSpinner } from './spinner.js';
+export { spinnerTemplate } from './spinner.template.js';
+export { spinnerStructuralStyles } from './spinner.structural.styles.js';
+export { spinnerElementStyles } from './spinner.styles.js';
+export { spinnerDefinition } from './spinner.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spinner/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/spinner/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/spinner`.
+export { OddkinSpinner } from './spinner.js';
+export { spinnerTemplate } from './spinner.template.js';
+export { spinnerStructuralStyles } from './spinner.structural.styles.js';
+export { spinnerElementStyles } from './spinner.styles.js';
+export { spinnerDefinition } from './spinner.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,41 @@
+import { OddkinElement } from '@oddkin/core/element';
+export declare const SPINNER_STRINGS: {
+    loading: string;
+};
+declare const OddkinSpinner_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly size: import("@oddkin/core/element").PropDefinition<"lg" | "md" | "sm">;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        loading: string;
+    }> | undefined>;
+}>;
+/**
+ * An indeterminate busy indicator with a status label. It never shows a percentage; when the
+ * amount of work is known, use `odd-progress`.
+ *
+ * @slot - Visible status text ("Saving changes…"), which then names the indicator.
+ * @csspart base - The indicator and its text.
+ * @csspart indicator - The turning ring.
+ * @cssprop --odd-spinner-color - Colour of the moving arc.
+ * @a11y A progress bar without a value, named by the slotted text, or by `label` (default "Loading") shown to assistive technology only. Announce completion separately if it matters.
+ * @previewRole busyIndicator
+ * @useFor Waiting of unknown length: loading a region, saving.
+ * @notFor Known progress (use odd-progress); content-shaped placeholders (use odd-skeleton).
+ * @category Feedback
+ * @customization 1 2 3
+ */
+export declare class OddkinSpinner extends OddkinSpinner_base {
+    /** @internal True while the default slot has text; read by the template. */
+    readonly _hasText: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal Slot change handler used by the template. */
+    readonly _onSlotChange: (event: Event) => void;
+    /** @internal The built-in text with overrides applied. */
+    get _strings(): typeof SPINNER_STRINGS;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-spinner': OddkinSpinner;
+    }
+}
+export {};
+//# sourceMappingURL=spinner.d.ts.map

package/dist/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,eAAe;IAAK,OAAO;CAAa,CAAC;;;;;;;;AAEtD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,aAAc,SAAQ,kBAajC;IACA,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,kDAAiB;IAElC,0DAA0D;IAC1D,QAAQ,CAAC,aAAa,UAAW,KAAK,KAAG,IAAI,CAI3C;IAEF,0DAA0D;IAC1D,IAAI,QAAQ,IAAI,OAAO,eAAe,CAErC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}

package/dist/spinner/spinner.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="spinner.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=spinner.define.d.ts.map

package/dist/spinner/spinner.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.define.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.define.ts"],"names":[],"mappings":""}

package/dist/spinner/spinner.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./spinner.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { spinnerDefinition } from './spinner.definition.js';
+define(spinnerDefinition);
+//# sourceMappingURL=spinner.define.js.map

package/dist/spinner/spinner.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.define.js","sourceRoot":"","sources":["../../src/spinner/spinner.define.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/spinner/spinner.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinSpinner } from './spinner.js';
+export declare const spinnerDefinition: import("@oddkin/core/element").ElementDefinition<OddkinSpinner>;
+//# sourceMappingURL=spinner.definition.d.ts.map

package/dist/spinner/spinner.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.definition.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.definition.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,eAAO,MAAM,iBAAiB,iEAW5B,CAAC"}

package/dist/spinner/spinner.definition.js

@@ -0,0 +1,21 @@
+import { compose } from '@oddkin/core/element';
+import { spinnerStyles } from '../styles/spinner.styles.js';
+import { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinSpinner } from './spinner.js';
+import { spinnerStructuralStyles } from './spinner.structural.styles.js';
+import { spinnerElementStyles } from './spinner.styles.js';
+import { spinnerTemplate } from './spinner.template.js';
+export const spinnerDefinition = compose({
+    name: 'odd-spinner',
+    element: OddkinSpinner,
+    template: spinnerTemplate,
+    styles: [
+        hostStyles,
+        spinnerStructuralStyles,
+        spinnerStyles,
+        visuallyHiddenStyles,
+        spinnerElementStyles,
+    ],
+});
+//# sourceMappingURL=spinner.definition.js.map

package/dist/spinner/spinner.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.definition.js","sourceRoot":"","sources":["../../src/spinner/spinner.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE;QACN,UAAU;QACV,uBAAuB;QACvB,aAAa;QACb,oBAAoB;QACpB,oBAAoB;KACrB;CACF,CAAC,CAAC"}

package/dist/spinner/spinner.js

@@ -0,0 +1,47 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { signal } from '@oddkin/core/reactive';
+export const SPINNER_STRINGS = { loading: 'Loading' };
+/**
+ * An indeterminate busy indicator with a status label. It never shows a percentage; when the
+ * amount of work is known, use `odd-progress`.
+ *
+ * @slot - Visible status text ("Saving changes…"), which then names the indicator.
+ * @csspart base - The indicator and its text.
+ * @csspart indicator - The turning ring.
+ * @cssprop --odd-spinner-color - Colour of the moving arc.
+ * @a11y A progress bar without a value, named by the slotted text, or by `label` (default "Loading") shown to assistive technology only. Announce completion separately if it matters.
+ * @previewRole busyIndicator
+ * @useFor Waiting of unknown length: loading a region, saving.
+ * @notFor Known progress (use odd-progress); content-shaped placeholders (use odd-skeleton).
+ * @category Feedback
+ * @customization 1 2 3
+ */
+export class OddkinSpinner extends OddkinElement.with({
+    label: prop.string({
+        default: '',
+        description: 'Accessible name when there is no visible text; default "Loading".',
+    }),
+    size: prop.enum(['sm', 'md', 'lg'], {
+        default: 'md',
+        reflect: true,
+        description: 'Ring size: 16, 20, or 24 px.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    /** @internal True while the default slot has text; read by the template. */
+    _hasText = signal(false);
+    /** @internal Slot change handler used by the template. */
+    _onSlotChange = (event) => {
+        this._hasText.value = event.target
+            .assignedNodes()
+            .some((node) => !!node.textContent?.trim());
+    };
+    /** @internal The built-in text with overrides applied. */
+    get _strings() {
+        return strings(SPINNER_STRINGS, this.strings);
+    }
+}
+//# sourceMappingURL=spinner.js.map

package/dist/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAEtD;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,aAAc,SAAQ,aAAa,CAAC,IAAI,CAAC;IACpD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,mEAAmE;KACjF,CAAC;IACF,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;QAClC,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,8BAA8B;KAC5C,CAAC;IACF,OAAO,EAAE,IAAI,CAAC,MAAM,CAAkC;QACpD,WAAW,EAAE,6BAA6B;KAC3C,CAAC;CACH,CAAC;IACA,4EAA4E;IACnE,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,0DAA0D;IACjD,aAAa,GAAG,CAAC,KAAY,EAAQ,EAAE;QAC9C,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAI,KAAK,CAAC,MAA0B;aACpD,aAAa,EAAE;aACf,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,0DAA0D;IAC1D,IAAI,QAAQ;QACV,OAAO,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;CACF"}

package/dist/spinner/spinner.structural.styles.d.ts

@@ -0,0 +1,3 @@
+/** Inline layout of the ring and its text. No brand or visual tokens. */
+export declare const spinnerStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=spinner.structural.styles.d.ts.map

package/dist/spinner/spinner.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.structural.styles.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.structural.styles.ts"],"names":[],"mappings":"AAEA,yEAAyE;AACzE,eAAO,MAAM,uBAAuB,yCAYnC,CAAC"}