@tessera-ui/core 0.4.0

package/dist/collection/components/slider/slider.css

@@ -0,0 +1,123 @@
+/* ==========================================================================
+   ts-slider — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-slider-track-bg      Track background color
+     --ts-slider-fill-bg       Fill background color
+     --ts-slider-thumb-bg      Thumb background color
+     --ts-slider-thumb-size    Thumb dimensions
+   ========================================================================== */
+
+:host {
+  display: block;
+
+  --ts-slider-track-bg: var(--ts-color-neutral-200);
+  --ts-slider-fill-bg: var(--ts-color-interactive-primary);
+  --ts-slider-thumb-bg: var(--ts-color-neutral-0);
+  --ts-slider-thumb-size: 1.25rem;
+}
+
+/* ---- Label ---- */
+.slider__label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+  margin-block-end: var(--ts-spacing-2);
+}
+
+.slider__value {
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-secondary);
+}
+
+/* ---- Track ---- */
+.slider__track {
+  position: relative;
+  block-size: var(--ts-slider-thumb-size);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.slider__track::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  block-size: 4px;
+  background-color: var(--ts-slider-track-bg);
+  border-radius: var(--ts-radius-full);
+}
+
+/* ---- Fill ---- */
+.slider__fill {
+  position: absolute;
+  inset-inline-start: 0;
+  block-size: 4px;
+  background-color: var(--ts-slider-fill-bg);
+  border-radius: var(--ts-radius-full);
+  pointer-events: none;
+}
+
+/* ---- Thumb ---- */
+.slider__thumb {
+  position: absolute;
+  inline-size: var(--ts-slider-thumb-size);
+  block-size: var(--ts-slider-thumb-size);
+  border-radius: var(--ts-radius-full);
+  background-color: var(--ts-slider-thumb-bg);
+  border: 2px solid var(--ts-slider-fill-bg);
+  box-shadow: var(--ts-shadow-sm);
+  transform: translateX(-50%);
+  cursor: grab;
+  outline: none;
+  transition:
+    box-shadow var(--ts-transition-fast),
+    transform var(--ts-transition-fast);
+}
+
+.slider__thumb:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+.slider__thumb:active {
+  cursor: grabbing;
+  transform: translateX(-50%) scale(1.1);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  --ts-slider-thumb-size: 1rem;
+}
+
+:host([size="sm"]) .slider__track::before,
+:host([size="sm"]) .slider__fill {
+  block-size: 3px;
+}
+
+:host([size="lg"]) {
+  --ts-slider-thumb-size: 1.5rem;
+}
+
+:host([size="lg"]) .slider__track::before,
+:host([size="lg"]) .slider__fill {
+  block-size: 6px;
+}
+
+/* ---- Disabled ---- */
+:host(.ts-slider--disabled) {
+  opacity: 0.5;
+}
+
+:host(.ts-slider--disabled) .slider__track {
+  cursor: not-allowed;
+}
+
+:host(.ts-slider--disabled) .slider__thumb {
+  cursor: not-allowed;
+}

package/dist/collection/components/slider/slider.js

@@ -0,0 +1,344 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @part track - The slider track.
+ * @part fill - The filled portion of the track.
+ * @part thumb - The draggable thumb.
+ * @part label - The value label.
+ */
+export class TsSlider {
+    hostEl;
+    trackEl;
+    dragging = false;
+    /** Current slider value. */
+    value = 0;
+    /** Minimum value. */
+    min = 0;
+    /** Maximum value. */
+    max = 100;
+    /** Step increment. */
+    step = 1;
+    /** Disables the slider. */
+    disabled = false;
+    /** Accessible label. */
+    label;
+    /** Whether to display the current value. */
+    showValue = false;
+    /** The size of the slider. */
+    size = 'md';
+    /** Emitted continuously during drag. */
+    tsInput;
+    /** Emitted when drag ends (value committed). */
+    tsChange;
+    get percentage() {
+        const range = this.max - this.min;
+        if (range <= 0)
+            return 0;
+        return ((this.value - this.min) / range) * 100;
+    }
+    clampAndStep(val) {
+        // Snap to step
+        const stepped = Math.round((val - this.min) / this.step) * this.step + this.min;
+        // Clamp
+        return Math.min(this.max, Math.max(this.min, stepped));
+    }
+    updateValueFromPosition(clientX) {
+        if (!this.trackEl)
+            return;
+        const rect = this.trackEl.getBoundingClientRect();
+        const ratio = (clientX - rect.left) / rect.width;
+        const rawValue = this.min + ratio * (this.max - this.min);
+        this.value = this.clampAndStep(rawValue);
+    }
+    handleMouseDown = (event) => {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.dragging = true;
+        this.updateValueFromPosition(event.clientX);
+        this.tsInput.emit({ value: this.value });
+        const handleMouseMove = (e) => {
+            this.updateValueFromPosition(e.clientX);
+            this.tsInput.emit({ value: this.value });
+        };
+        const handleMouseUp = () => {
+            this.dragging = false;
+            this.tsChange.emit({ value: this.value });
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        let newValue = this.value;
+        const bigStep = this.step * 10;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                event.preventDefault();
+                newValue = this.clampAndStep(this.value + this.step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                event.preventDefault();
+                newValue = this.clampAndStep(this.value - this.step);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                newValue = this.clampAndStep(this.value + bigStep);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                newValue = this.clampAndStep(this.value - bigStep);
+                break;
+            case 'Home':
+                event.preventDefault();
+                newValue = this.min;
+                break;
+            case 'End':
+                event.preventDefault();
+                newValue = this.max;
+                break;
+            default:
+                return;
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.tsInput.emit({ value: this.value });
+            this.tsChange.emit({ value: this.value });
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const percent = this.percentage;
+        return (h(Host, { key: 'c02613013e6e9c44f48c3916069020bf7252c154', class: {
+                'ts-slider': true,
+                [`ts-slider--${this.size}`]: true,
+                'ts-slider--disabled': this.disabled,
+            } }, this.label && (h("label", { key: '6919de6f5cbd24e18cd7154bcb056838e31f3d69', class: "slider__label", part: "label" }, this.label, this.showValue && h("span", { key: 'c09c6b63da3db97623ff43d6ba329c3072756bd2', class: "slider__value" }, this.value))), !this.label && this.showValue && (h("span", { key: '1ec0bc6e6cecc217b52f5cf36ad2557dfcf3f724', class: "slider__value", part: "label", "aria-hidden": "true" }, this.value)), h("div", { key: '37c433458db6f6d37139fb2b402391570a7bcc2d', class: "slider__track", part: "track", ref: (el) => (this.trackEl = el), onMouseDown: this.handleMouseDown }, h("div", { key: 'e2ef651e9b102ea1d0eaf8d1cb5516cd1a413d69', class: "slider__fill", part: "fill", style: { width: `${percent}%` } }), h("div", { key: 'bff51286191e7beffcbff2d70d9595497bcb8d0b', class: "slider__thumb", part: "thumb", role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, style: { insetInlineStart: `${percent}%` }, onKeyDown: this.handleKeyDown }))));
+    }
+    static get is() { return "ts-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current slider value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display the current value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsInput",
+                "name": "tsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted continuously during drag."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when drag ends (value committed)."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=slider.js.map

package/dist/collection/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @part track - The slider track.\n * @part fill - The filled portion of the track.\n * @part thumb - The draggable thumb.\n * @part label - The value label.\n */\n@Component({\n  tag: 'ts-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class TsSlider {\n  @Element() hostEl!: HTMLElement;\n\n  private trackEl?: HTMLElement;\n\n  @State() dragging = false;\n\n  /** Current slider value. */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /** Minimum value. */\n  @Prop() min = 0;\n\n  /** Maximum value. */\n  @Prop() max = 100;\n\n  /** Step increment. */\n  @Prop() step = 1;\n\n  /** Disables the slider. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible label. */\n  @Prop() label?: string;\n\n  /** Whether to display the current value. */\n  @Prop({ reflect: true }) showValue = false;\n\n  /** The size of the slider. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Emitted continuously during drag. */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<{ value: number }>;\n\n  /** Emitted when drag ends (value committed). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: number }>;\n\n  private get percentage(): number {\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  private clampAndStep(val: number): number {\n    // Snap to step\n    const stepped = Math.round((val - this.min) / this.step) * this.step + this.min;\n    // Clamp\n    return Math.min(this.max, Math.max(this.min, stepped));\n  }\n\n  private updateValueFromPosition(clientX: number): void {\n    if (!this.trackEl) return;\n    const rect = this.trackEl.getBoundingClientRect();\n    const ratio = (clientX - rect.left) / rect.width;\n    const rawValue = this.min + ratio * (this.max - this.min);\n    this.value = this.clampAndStep(rawValue);\n  }\n\n  private handleMouseDown = (event: MouseEvent): void => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.dragging = true;\n    this.updateValueFromPosition(event.clientX);\n    this.tsInput.emit({ value: this.value });\n\n    const handleMouseMove = (e: MouseEvent): void => {\n      this.updateValueFromPosition(e.clientX);\n      this.tsInput.emit({ value: this.value });\n    };\n\n    const handleMouseUp = (): void => {\n      this.dragging = false;\n      this.tsChange.emit({ value: this.value });\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    let newValue = this.value;\n    const bigStep = this.step * 10;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault();\n        newValue = this.clampAndStep(this.value + this.step);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault();\n        newValue = this.clampAndStep(this.value - this.step);\n        break;\n      case 'PageUp':\n        event.preventDefault();\n        newValue = this.clampAndStep(this.value + bigStep);\n        break;\n      case 'PageDown':\n        event.preventDefault();\n        newValue = this.clampAndStep(this.value - bigStep);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newValue = this.min;\n        break;\n      case 'End':\n        event.preventDefault();\n        newValue = this.max;\n        break;\n      default:\n        return;\n    }\n\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.tsInput.emit({ value: this.value });\n      this.tsChange.emit({ value: this.value });\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const percent = this.percentage;\n\n    return (\n      <Host\n        class={{\n          'ts-slider': true,\n          [`ts-slider--${this.size}`]: true,\n          'ts-slider--disabled': this.disabled,\n        }}\n      >\n        {this.label && (\n          <label class=\"slider__label\" part=\"label\">\n            {this.label}\n            {this.showValue && <span class=\"slider__value\">{this.value}</span>}\n          </label>\n        )}\n        {!this.label && this.showValue && (\n          <span class=\"slider__value\" part=\"label\" aria-hidden=\"true\">\n            {this.value}\n          </span>\n        )}\n        <div\n          class=\"slider__track\"\n          part=\"track\"\n          ref={(el) => (this.trackEl = el)}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div\n            class=\"slider__fill\"\n            part=\"fill\"\n            style={{ width: `${percent}%` }}\n          />\n          <div\n            class=\"slider__thumb\"\n            part=\"thumb\"\n            role=\"slider\"\n            tabindex={this.disabled ? -1 : 0}\n            aria-valuenow={this.value}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            aria-label={this.label || undefined}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            style={{ insetInlineStart: `${percent}%` }}\n            onKeyDown={this.handleKeyDown}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/slider/slider.stories.js

@@ -0,0 +1,100 @@
+// Hand-written stories for ts-slider
+export default {
+    title: 'Components/Slider',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'Current slider value.',
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value.',
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value.',
+        },
+        step: {
+            control: 'number',
+            description: 'Step increment.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables the slider.',
+        },
+        label: {
+            control: 'text',
+            description: 'Accessible label.',
+        },
+        showValue: {
+            control: 'boolean',
+            description: 'Whether to display the current value.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The size of the slider.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined)
+        attrs.push(`value="${args.value}"`);
+    if (args.min !== undefined)
+        attrs.push(`min="${args.min}"`);
+    if (args.max !== undefined)
+        attrs.push(`max="${args.max}"`);
+    if (args.step !== undefined)
+        attrs.push(`step="${args.step}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.label !== undefined)
+        attrs.push(`label="${args.label}"`);
+    if (args.showValue)
+        attrs.push('show-value');
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    return `<div style="max-width: 400px;"><ts-slider ${attrs.join(' ')}></ts-slider></div>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        value: 50,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: false,
+        label: 'Volume',
+        showValue: true,
+        size: 'md',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <ts-slider value="50" label="Small" show-value size="sm"></ts-slider>
+    <ts-slider value="50" label="Medium" show-value size="md"></ts-slider>
+    <ts-slider value="50" label="Large" show-value size="lg"></ts-slider>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <ts-slider value="70" label="Volume" show-value></ts-slider>
+    <ts-slider value="50" label="Disabled slider" show-value disabled></ts-slider>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 400px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 20px;">
+      <h4 style="margin: 0;">Audio Settings</h4>
+      <ts-slider value="75" label="Volume" show-value min="0" max="100"></ts-slider>
+      <ts-slider value="50" label="Brightness" show-value min="0" max="100"></ts-slider>
+      <ts-slider value="25" label="Bass" show-value min="0" max="100" step="5"></ts-slider>
+      <div>
+        <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Price range ($0 - $500)</p>
+        <ts-slider value="250" label="Price range" show-value min="0" max="500" step="10"></ts-slider>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=slider.stories.js.map

package/dist/collection/components/slider/slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-slider\n\nexport default {\n  title: 'Components/Slider',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: { type: 'range', min: 0, max: 100, step: 1 },\n      description: 'Current slider value.',\n    },\n    min: {\n      control: 'number',\n      description: 'Minimum value.',\n    },\n    max: {\n      control: 'number',\n      description: 'Maximum value.',\n    },\n    step: {\n      control: 'number',\n      description: 'Step increment.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Disables the slider.',\n    },\n    label: {\n      control: 'text',\n      description: 'Accessible label.',\n    },\n    showValue: {\n      control: 'boolean',\n      description: 'Whether to display the current value.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the slider.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined) attrs.push(`value=\"${args.value}\"`);\n  if (args.min !== undefined) attrs.push(`min=\"${args.min}\"`);\n  if (args.max !== undefined) attrs.push(`max=\"${args.max}\"`);\n  if (args.step !== undefined) attrs.push(`step=\"${args.step}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.label !== undefined) attrs.push(`label=\"${args.label}\"`);\n  if (args.showValue) attrs.push('show-value');\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `<div style=\"max-width: 400px;\"><ts-slider ${attrs.join(' ')}></ts-slider></div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: 50,\n    min: 0,\n    max: 100,\n    step: 1,\n    disabled: false,\n    label: 'Volume',\n    showValue: true,\n    size: 'md',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <ts-slider value=\"50\" label=\"Small\" show-value size=\"sm\"></ts-slider>\n    <ts-slider value=\"50\" label=\"Medium\" show-value size=\"md\"></ts-slider>\n    <ts-slider value=\"50\" label=\"Large\" show-value size=\"lg\"></ts-slider>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <ts-slider value=\"70\" label=\"Volume\" show-value></ts-slider>\n    <ts-slider value=\"50\" label=\"Disabled slider\" show-value disabled></ts-slider>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 20px;\">\n      <h4 style=\"margin: 0;\">Audio Settings</h4>\n      <ts-slider value=\"75\" label=\"Volume\" show-value min=\"0\" max=\"100\"></ts-slider>\n      <ts-slider value=\"50\" label=\"Brightness\" show-value min=\"0\" max=\"100\"></ts-slider>\n      <ts-slider value=\"25\" label=\"Bass\" show-value min=\"0\" max=\"100\" step=\"5\"></ts-slider>\n      <div>\n        <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Price range ($0 - $500)</p>\n        <ts-slider value=\"250\" label=\"Price range\" show-value min=\"0\" max=\"500\" step=\"10\"></ts-slider>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/spacer/spacer.css

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   ts-spacer — Shadow DOM Scoped Styles
+
+   An explicit spacing element for vertical or horizontal space.
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+:host([axis="horizontal"]) {
+  display: inline-block;
+}