@tessera-ui/core 0.4.0 → 0.5.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Watch, h, Host, Element, Listen } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsSelectChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\ninterface SelectOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n/**\n * @slot - Default slot for `<option>` elements.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part trigger - The select trigger button.\n * @part dropdown - The dropdown panel.\n * @part option - An option in the dropdown list.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class TsSelect {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-select');\n  private triggerEl?: HTMLElement;\n\n  /** The current value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Placeholder text when no value is selected. */\n  @Prop() placeholder?: string;\n\n  /** Renders the select as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The select size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the select. */\n  @Prop() label?: string;\n\n  /** Help text displayed below the select. */\n  @Prop() helpText?: string;\n\n  /** Renders the select in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message displayed below the select. */\n  @Prop() errorMessage?: string;\n\n  /** Makes the select required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Allow multiple selections. */\n  @Prop({ reflect: true }) multiple = false;\n\n  /** Whether the dropdown is open. */\n  @State() isOpen = false;\n\n  /** The index of the currently focused option. */\n  @State() focusedIndex = -1;\n\n  /** Parsed options from slotted <option> elements. */\n  @State() options: SelectOption[] = [];\n\n  /** Emitted when the value changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsSelectChangeEventDetail>;\n\n  /** Emitted when the select gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the select loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  handleValueChange(): void {\n    // Value was changed externally; ensure UI is in sync\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent): void {\n    if (this.isOpen && !this.hostEl.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.parseOptions();\n  }\n\n  componentDidLoad(): void {\n    // Observe slot changes to re-parse options\n    const slot = this.hostEl.shadowRoot?.querySelector('.select__hidden-slot slot');\n    slot?.addEventListener('slotchange', () => this.parseOptions());\n  }\n\n  private parseOptions(): void {\n    const slottedOptions = this.hostEl.querySelectorAll('option');\n    this.options = Array.from(slottedOptions).map((opt) => ({\n      value: opt.value,\n      label: opt.textContent?.trim() ?? opt.value,\n      disabled: opt.disabled,\n    }));\n  }\n\n  private open(): void {\n    if (this.disabled) return;\n    this.isOpen = true;\n    this.focusedIndex = this.options.findIndex((o) => o.value === this.value);\n    if (this.focusedIndex < 0) this.focusedIndex = 0;\n  }\n\n  private close(): void {\n    this.isOpen = false;\n    this.focusedIndex = -1;\n    this.triggerEl?.focus();\n  }\n\n  private selectOption(option: SelectOption): void {\n    if (option.disabled) return;\n    this.value = option.value;\n    this.tsChange.emit({ value: this.value });\n    this.close();\n  }\n\n  private handleTriggerClick = (): void => {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.open();\n        } else if (event.key === 'Enter' || event.key === ' ') {\n          if (this.focusedIndex >= 0 && this.options[this.focusedIndex]) {\n            this.selectOption(this.options[this.focusedIndex]);\n          }\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.open();\n        }\n        break;\n      case 'Escape':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.close();\n        }\n        break;\n    }\n  };\n\n  private handleDropdownKeydown = (event: KeyboardEvent): void => {\n    const enabledOptions = this.options.filter((o) => !o.disabled);\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(-1);\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.focusedIndex >= 0 && this.options[this.focusedIndex] && !this.options[this.focusedIndex].disabled) {\n          this.selectOption(this.options[this.focusedIndex]);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[0]) : 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[enabledOptions.length - 1]) : this.options.length - 1;\n        break;\n    }\n  };\n\n  private moveFocus(direction: number): void {\n    let next = this.focusedIndex + direction;\n    while (next >= 0 && next < this.options.length && this.options[next].disabled) {\n      next += direction;\n    }\n    if (next >= 0 && next < this.options.length) {\n      this.focusedIndex = next;\n    }\n  }\n\n  private handleFocus = (): void => {\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.tsBlur.emit();\n  };\n\n  private getDisplayText(): string {\n    const selected = this.options.find((o) => o.value === this.value);\n    return selected?.label ?? '';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = this.error && !!this.errorMessage;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n    const listboxId = `${this.inputId}-listbox`;\n    const displayText = this.getDisplayText();\n\n    return (\n      <Host\n        class={{\n          'ts-select': true,\n          [`ts-select--${this.size}`]: true,\n          'ts-select--open': this.isOpen,\n          'ts-select--disabled': this.disabled,\n          'ts-select--error': this.error,\n        }}\n      >\n        {this.label && (\n          <label class=\"select__label\" part=\"label\" id={labelId}>\n            {this.label}\n            {this.required && <span class=\"select__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"select__container\">\n          <button\n            ref={(el) => (this.triggerEl = el)}\n            class={{\n              'select__trigger': true,\n              'select__trigger--open': this.isOpen,\n              'select__trigger--error': this.error,\n              'select__trigger--disabled': this.disabled,\n            }}\n            part=\"trigger\"\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-haspopup=\"listbox\"\n            aria-controls={listboxId}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            disabled={this.disabled}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeydown}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span class={{ 'select__display': true, 'select__display--placeholder': !displayText }}>\n              {displayText || this.placeholder || '\\u00A0'}\n            </span>\n            <svg class=\"select__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n\n          {this.isOpen && (\n            <div\n              class=\"select__dropdown\"\n              part=\"dropdown\"\n              role=\"listbox\"\n              id={listboxId}\n              aria-labelledby={this.label ? labelId : undefined}\n              onKeyDown={this.handleDropdownKeydown}\n            >\n              {this.options.map((option, index) => (\n                <div\n                  class={{\n                    'select__option': true,\n                    'select__option--selected': option.value === this.value,\n                    'select__option--focused': index === this.focusedIndex,\n                    'select__option--disabled': option.disabled,\n                  }}\n                  part=\"option\"\n                  role=\"option\"\n                  aria-selected={option.value === this.value ? 'true' : 'false'}\n                  aria-disabled={option.disabled ? 'true' : undefined}\n                  onClick={() => this.selectOption(option)}\n                >\n                  {option.label}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Hidden slot to capture <option> elements */}\n        <div class=\"select__hidden-slot\">\n          <slot />\n        </div>\n\n        {hasError && (\n          <div class=\"select__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"select__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,138 +0,0 @@
-// Hand-written stories for ts-select
-export default {
-    title: 'Components/Select',
-    tags: ['autodocs'],
-    argTypes: {
-        value: { control: 'text', description: 'The current value.' },
-        placeholder: { control: 'text', description: 'Placeholder text when no value is selected.' },
-        disabled: { control: 'boolean', description: 'Renders the select as disabled.' },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The select size.',
-        },
-        label: { control: 'text', description: 'Label text displayed above the select.' },
-        helpText: { control: 'text', description: 'Help text displayed below the select.' },
-        error: { control: 'boolean', description: 'Renders the select in an error state.' },
-        errorMessage: { control: 'text', description: 'Error message displayed below the select.' },
-        required: { control: 'boolean', description: 'Makes the select required.' },
-        name: { control: 'text', description: 'Name attribute for form submission.' },
-        multiple: { control: 'boolean', description: 'Allow multiple selections.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.value !== undefined && args.value !== null && args.value !== '')
-        attrs.push(`value="${args.value}"`);
-    if (args.placeholder !== undefined && args.placeholder !== null)
-        attrs.push(`placeholder="${args.placeholder}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.label !== undefined && args.label !== null)
-        attrs.push(`label="${args.label}"`);
-    if (args.helpText !== undefined && args.helpText !== null)
-        attrs.push(`help-text="${args.helpText}"`);
-    if (args.error)
-        attrs.push('error');
-    if (args.errorMessage !== undefined && args.errorMessage !== null)
-        attrs.push(`error-message="${args.errorMessage}"`);
-    if (args.required)
-        attrs.push('required');
-    if (args.name !== undefined && args.name !== null)
-        attrs.push(`name="${args.name}"`);
-    if (args.multiple)
-        attrs.push('multiple');
-    return `
-    <ts-select ${attrs.join(' ')}>
-      <option value="us">United States</option>
-      <option value="uk">United Kingdom</option>
-      <option value="ca">Canada</option>
-      <option value="au">Australia</option>
-      <option value="de">Germany</option>
-    </ts-select>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        value: '',
-        placeholder: 'Select a country',
-        disabled: false,
-        size: 'md',
-        label: 'Country',
-        helpText: 'Select your country of residence.',
-        error: false,
-        errorMessage: '',
-        required: false,
-        name: 'country',
-        multiple: false,
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
-    <ts-select size="sm" label="Small" placeholder="Choose...">
-      <option value="admin">Admin</option>
-      <option value="editor">Editor</option>
-      <option value="viewer">Viewer</option>
-    </ts-select>
-    <ts-select size="md" label="Medium" placeholder="Choose...">
-      <option value="admin">Admin</option>
-      <option value="editor">Editor</option>
-      <option value="viewer">Viewer</option>
-    </ts-select>
-    <ts-select size="lg" label="Large" placeholder="Choose...">
-      <option value="admin">Admin</option>
-      <option value="editor">Editor</option>
-      <option value="viewer">Viewer</option>
-    </ts-select>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
-    <ts-select label="Default" placeholder="Select an option">
-      <option value="a">Option A</option>
-      <option value="b">Option B</option>
-    </ts-select>
-    <ts-select label="With value" value="editor" placeholder="Select a role">
-      <option value="admin">Admin</option>
-      <option value="editor">Editor</option>
-      <option value="viewer">Viewer</option>
-    </ts-select>
-    <ts-select label="Disabled" disabled placeholder="Cannot select">
-      <option value="a">Option A</option>
-    </ts-select>
-    <ts-select label="Required" required placeholder="Must select" help-text="This field is required.">
-      <option value="a">Option A</option>
-      <option value="b">Option B</option>
-    </ts-select>
-    <ts-select label="Error" error error-message="Please select a valid category." placeholder="Select a category">
-      <option value="tech">Technology</option>
-      <option value="science">Science</option>
-    </ts-select>
-  </div>
-`;
-export const RoleSelector = () => `
-  <div style="max-width: 320px;">
-    <ts-select label="User Role" placeholder="Assign a role" help-text="Determines access permissions." required name="role">
-      <option value="owner">Owner</option>
-      <option value="admin">Administrator</option>
-      <option value="editor">Editor</option>
-      <option value="viewer">Viewer</option>
-      <option value="guest" disabled>Guest (deprecated)</option>
-    </ts-select>
-  </div>
-`;
-export const CategoryFilter = () => `
-  <div style="max-width: 320px;">
-    <ts-select label="Category" placeholder="Filter by category" name="category">
-      <option value="electronics">Electronics</option>
-      <option value="clothing">Clothing</option>
-      <option value="books">Books</option>
-      <option value="home">Home &amp; Garden</option>
-      <option value="sports">Sports &amp; Outdoors</option>
-      <option value="toys">Toys &amp; Games</option>
-    </ts-select>
-  </div>
-`;
-//# sourceMappingURL=select.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../src/components/select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-select\n\nexport default {\n  title: 'Components/Select',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The current value.' },\n    placeholder: { control: 'text', description: 'Placeholder text when no value is selected.' },\n    disabled: { control: 'boolean', description: 'Renders the select as disabled.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The select size.',\n    },\n    label: { control: 'text', description: 'Label text displayed above the select.' },\n    helpText: { control: 'text', description: 'Help text displayed below the select.' },\n    error: { control: 'boolean', description: 'Renders the select in an error state.' },\n    errorMessage: { control: 'text', description: 'Error message displayed below the select.' },\n    required: { control: 'boolean', description: 'Makes the select required.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n    multiple: { control: 'boolean', description: 'Allow multiple selections.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.placeholder !== undefined && args.placeholder !== null) attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.helpText !== undefined && args.helpText !== null) attrs.push(`help-text=\"${args.helpText}\"`);\n  if (args.error) attrs.push('error');\n  if (args.errorMessage !== undefined && args.errorMessage !== null) attrs.push(`error-message=\"${args.errorMessage}\"`);\n  if (args.required) attrs.push('required');\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  if (args.multiple) attrs.push('multiple');\n  return `\n    <ts-select ${attrs.join(' ')}>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"au\">Australia</option>\n      <option value=\"de\">Germany</option>\n    </ts-select>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: '',\n    placeholder: 'Select a country',\n    disabled: false,\n    size: 'md',\n    label: 'Country',\n    helpText: 'Select your country of residence.',\n    error: false,\n    errorMessage: '',\n    required: false,\n    name: 'country',\n    multiple: false,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 320px;\">\n    <ts-select size=\"sm\" label=\"Small\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select size=\"md\" label=\"Medium\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select size=\"lg\" label=\"Large\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 320px;\">\n    <ts-select label=\"Default\" placeholder=\"Select an option\">\n      <option value=\"a\">Option A</option>\n      <option value=\"b\">Option B</option>\n    </ts-select>\n    <ts-select label=\"With value\" value=\"editor\" placeholder=\"Select a role\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select label=\"Disabled\" disabled placeholder=\"Cannot select\">\n      <option value=\"a\">Option A</option>\n    </ts-select>\n    <ts-select label=\"Required\" required placeholder=\"Must select\" help-text=\"This field is required.\">\n      <option value=\"a\">Option A</option>\n      <option value=\"b\">Option B</option>\n    </ts-select>\n    <ts-select label=\"Error\" error error-message=\"Please select a valid category.\" placeholder=\"Select a category\">\n      <option value=\"tech\">Technology</option>\n      <option value=\"science\">Science</option>\n    </ts-select>\n  </div>\n`;\n\nexport const RoleSelector = (): string => `\n  <div style=\"max-width: 320px;\">\n    <ts-select label=\"User Role\" placeholder=\"Assign a role\" help-text=\"Determines access permissions.\" required name=\"role\">\n      <option value=\"owner\">Owner</option>\n      <option value=\"admin\">Administrator</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n      <option value=\"guest\" disabled>Guest (deprecated)</option>\n    </ts-select>\n  </div>\n`;\n\nexport const CategoryFilter = (): string => `\n  <div style=\"max-width: 320px;\">\n    <ts-select label=\"Category\" placeholder=\"Filter by category\" name=\"category\">\n      <option value=\"electronics\">Electronics</option>\n      <option value=\"clothing\">Clothing</option>\n      <option value=\"books\">Books</option>\n      <option value=\"home\">Home &amp; Garden</option>\n      <option value=\"sports\">Sports &amp; Outdoors</option>\n      <option value=\"toys\">Toys &amp; Games</option>\n    </ts-select>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,UAAU;IACrB,kCAAkC;IACT,OAAO,GAAwC,MAAM,CAAC;IAE/E,iCAAiC;IACzB,KAAK,GAAG,MAAM,CAAC;IAEvB,kCAAkC;IAC1B,MAAM,CAAU;IAExB,qDAAqD;IAC7C,KAAK,GAAG,CAAC,CAAC;IAElB,uBAAuB;IACE,SAAS,GAA8B,OAAO,CAAC;IAExE,4EAA4E;IAC5E,MAAM;QACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;QACzC,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,IAAI,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAE/C,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;YAC5B,MAAM,YAAY,GAAG,EAAE,CAAC;YACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;gBACpC,MAAM,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACtD,YAAY,CAAC,IAAI,CACf,WACE,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,sBAAsB,EAAE,MAAM;qBAC/B,EACD,IAAI,EAAC,MAAM,GACX,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;oBACtC,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;iBACzC,EACD,KAAK,EAAE,KAAK,iBACA,MAAM;gBAElB,WAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,IACpC,YAAY,CACT,CACD,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACtC,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;aACzC,EACD,KAAK,EAAE,KAAK,iBACA,MAAM;YAElB,WAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAG,CACrC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part base - The skeleton element container.\n * @part line - Individual skeleton line (text variant).\n */\n@Component({\n  tag: 'ts-skeleton',\n  styleUrl: 'skeleton.css',\n  shadow: true,\n})\nexport class TsSkeleton {\n  /** The skeleton shape variant. */\n  @Prop({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'text';\n\n  /** CSS width of the skeleton. */\n  @Prop() width = '100%';\n\n  /** CSS height of the skeleton. */\n  @Prop() height?: string;\n\n  /** Number of lines to render (text variant only). */\n  @Prop() lines = 1;\n\n  /** Animation style. */\n  @Prop({ reflect: true }) animation: 'pulse' | 'wave' | 'none' = 'pulse';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const style: Record<string, string> = {};\n    if (this.width) style['width'] = this.width;\n    if (this.height) style['height'] = this.height;\n\n    if (this.variant === 'text') {\n      const lineElements = [];\n      for (let i = 0; i < this.lines; i++) {\n        const isLast = i === this.lines - 1 && this.lines > 1;\n        lineElements.push(\n          <div\n            class={{\n              'skeleton__line': true,\n              'skeleton__line--last': isLast,\n            }}\n            part=\"line\"\n          />,\n        );\n      }\n\n      return (\n        <Host\n          class={{\n            'ts-skeleton': true,\n            [`ts-skeleton--${this.variant}`]: true,\n            [`ts-skeleton--${this.animation}`]: true,\n          }}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <div class=\"skeleton__base\" part=\"base\">\n            {lineElements}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          'ts-skeleton': true,\n          [`ts-skeleton--${this.variant}`]: true,\n          [`ts-skeleton--${this.animation}`]: true,\n        }}\n        style={style}\n        aria-hidden=\"true\"\n      >\n        <div class=\"skeleton__base\" part=\"base\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,140 +0,0 @@
-// Hand-written stories for ts-skeleton
-export default {
-    title: 'Components/Skeleton',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['text', 'circular', 'rectangular'],
-            description: 'The skeleton shape variant.',
-        },
-        width: {
-            control: 'text',
-            description: 'CSS width of the skeleton.',
-        },
-        height: {
-            control: 'text',
-            description: 'CSS height of the skeleton.',
-        },
-        lines: {
-            control: 'number',
-            description: 'Number of lines to render (text variant only).',
-        },
-        animation: {
-            control: 'select',
-            options: ['pulse', 'wave', 'none'],
-            description: 'Animation style.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.width !== undefined)
-        attrs.push(`width="${args.width}"`);
-    if (args.height !== undefined)
-        attrs.push(`height="${args.height}"`);
-    if (args.lines !== undefined)
-        attrs.push(`lines="${args.lines}"`);
-    if (args.animation !== undefined)
-        attrs.push(`animation="${args.animation}"`);
-    return `<ts-skeleton ${attrs.join(' ')}></ts-skeleton>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'text',
-        width: '100%',
-        lines: 3,
-        animation: 'pulse',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Text (3 lines)</p>
-      <ts-skeleton variant="text" lines="3"></ts-skeleton>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Circular (avatar)</p>
-      <ts-skeleton variant="circular" width="48px" height="48px"></ts-skeleton>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Rectangular (image)</p>
-      <ts-skeleton variant="rectangular" width="100%" height="200px"></ts-skeleton>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Pulse animation (default)</p>
-      <ts-skeleton variant="text" lines="2" animation="pulse"></ts-skeleton>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Wave animation</p>
-      <ts-skeleton variant="text" lines="2" animation="wave"></ts-skeleton>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">No animation</p>
-      <ts-skeleton variant="text" lines="2" animation="none"></ts-skeleton>
-    </div>
-  </div>
-`;
-export const LoadingCard = () => `
-  <div style="max-width: 320px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px;">
-    <ts-skeleton variant="rectangular" width="100%" height="180px"></ts-skeleton>
-    <ts-skeleton variant="text" width="60%" lines="1"></ts-skeleton>
-    <ts-skeleton variant="text" lines="3"></ts-skeleton>
-    <div style="display: flex; gap: 8px;">
-      <ts-skeleton variant="rectangular" width="80px" height="32px"></ts-skeleton>
-      <ts-skeleton variant="rectangular" width="80px" height="32px"></ts-skeleton>
-    </div>
-  </div>
-`;
-export const LoadingList = () => `
-  <div style="max-width: 400px; display: flex; flex-direction: column; gap: 16px;">
-    <div style="display: flex; gap: 12px; align-items: center;">
-      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
-      <div style="flex: 1;">
-        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
-        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
-      </div>
-    </div>
-    <div style="display: flex; gap: 12px; align-items: center;">
-      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
-      <div style="flex: 1;">
-        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
-        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
-      </div>
-    </div>
-    <div style="display: flex; gap: 12px; align-items: center;">
-      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
-      <div style="flex: 1;">
-        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
-        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
-      </div>
-    </div>
-    <div style="display: flex; gap: 12px; align-items: center;">
-      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
-      <div style="flex: 1;">
-        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
-        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
-      </div>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="max-width: 400px; display: flex; flex-direction: column; gap: 16px;">
-    <div style="display: flex; gap: 12px; align-items: center;">
-      <ts-skeleton variant="circular" width="56px" height="56px"></ts-skeleton>
-      <div style="flex: 1;">
-        <ts-skeleton variant="text" width="50%" lines="1"></ts-skeleton>
-        <ts-skeleton variant="text" width="30%" lines="1"></ts-skeleton>
-      </div>
-    </div>
-    <ts-skeleton variant="rectangular" width="100%" height="240px"></ts-skeleton>
-    <ts-skeleton variant="text" lines="4"></ts-skeleton>
-  </div>
-`;
-//# sourceMappingURL=skeleton.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.stories.ts"],"names":[],"mappings":"AAAA,uCAAuC;AAEvC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC;YAC5C,WAAW,EAAE,6BAA6B;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;SAC1C;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6BAA6B;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gDAAgD;SAC9D;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;YAClC,WAAW,EAAE,kBAAkB;SAChC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC9E,OAAO,gBAAgB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,OAAO;KACnB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAerC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAYxC,CAAC","sourcesContent":["// Hand-written stories for ts-skeleton\n\nexport default {\n  title: 'Components/Skeleton',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'circular', 'rectangular'],\n      description: 'The skeleton shape variant.',\n    },\n    width: {\n      control: 'text',\n      description: 'CSS width of the skeleton.',\n    },\n    height: {\n      control: 'text',\n      description: 'CSS height of the skeleton.',\n    },\n    lines: {\n      control: 'number',\n      description: 'Number of lines to render (text variant only).',\n    },\n    animation: {\n      control: 'select',\n      options: ['pulse', 'wave', 'none'],\n      description: 'Animation style.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.width !== undefined) attrs.push(`width=\"${args.width}\"`);\n  if (args.height !== undefined) attrs.push(`height=\"${args.height}\"`);\n  if (args.lines !== undefined) attrs.push(`lines=\"${args.lines}\"`);\n  if (args.animation !== undefined) attrs.push(`animation=\"${args.animation}\"`);\n  return `<ts-skeleton ${attrs.join(' ')}></ts-skeleton>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'text',\n    width: '100%',\n    lines: 3,\n    animation: 'pulse',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Text (3 lines)</p>\n      <ts-skeleton variant=\"text\" lines=\"3\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Circular (avatar)</p>\n      <ts-skeleton variant=\"circular\" width=\"48px\" height=\"48px\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Rectangular (image)</p>\n      <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"200px\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Pulse animation (default)</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"pulse\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Wave animation</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"wave\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">No animation</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"none\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const LoadingCard = (): string => `\n  <div style=\"max-width: 320px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px;\">\n    <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"180px\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" width=\"60%\" lines=\"1\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" lines=\"3\"></ts-skeleton>\n    <div style=\"display: flex; gap: 8px;\">\n      <ts-skeleton variant=\"rectangular\" width=\"80px\" height=\"32px\"></ts-skeleton>\n      <ts-skeleton variant=\"rectangular\" width=\"80px\" height=\"32px\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const LoadingList = (): string => `\n  <div style=\"max-width: 400px; display: flex; flex-direction: column; gap: 16px;\">\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; display: flex; flex-direction: column; gap: 16px;\">\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"56px\" height=\"56px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"50%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"30%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"240px\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" lines=\"4\"></ts-skeleton>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"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

@@ -1,100 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE;YACrD,WAAW,EAAE,uBAAuB;SACrC;QACD,GAAG,EAAE;YACH,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gBAAgB;SAC9B;QACD,GAAG,EAAE;YACH,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gBAAgB;SAC9B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;SAC/B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;SACjC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,uCAAuC;SACrD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IAC5D,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IAC5D,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO,6CAA6C,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,CAAC;AAC3F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;CAKnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;CAaxC,CAAC","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.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../src/components/spacer/spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,+DAA+D;IACtC,IAAI,GAAW,GAAG,CAAC;IAE5C,kDAAkD;IACzB,IAAI,GAA8B,UAAU,CAAC;IAEtE,4EAA4E;IAC5E,MAAM;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,YAAY;YACxB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,IAAI,CAAC,IAAI,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;YAC7D,CAAC,CAAC,EAAE,MAAM,EAAE,oBAAoB,IAAI,CAAC,IAAI,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAElE,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,GAAS,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * An explicit spacing element for adding vertical or horizontal space.\n */\n@Component({\n  tag: 'ts-spacer',\n  styleUrl: 'spacer.css',\n  shadow: true,\n})\nexport class TsSpacer {\n  /** Spacing token number controlling the size of the spacer. */\n  @Prop({ reflect: true }) size: string = '4';\n\n  /** The axis along which the spacer adds space. */\n  @Prop({ reflect: true }) axis: 'vertical' | 'horizontal' = 'vertical';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const style =\n      this.axis === 'horizontal'\n        ? { width: `var(--ts-spacing-${this.size})`, height: '100%' }\n        : { height: `var(--ts-spacing-${this.size})`, width: '100%' };\n\n    return <Host style={style}></Host>;\n  }\n}\n"]}

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

@@ -1,90 +0,0 @@
-// Hand-written stories for ts-spacer
-export default {
-    title: 'Layout/Spacer',
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            control: 'select',
-            options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],
-            description: 'Spacing token number controlling the size of the spacer.',
-        },
-        axis: {
-            control: 'select',
-            options: ['vertical', 'horizontal'],
-            description: 'The axis along which the spacer adds space.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.axis !== undefined)
-        attrs.push(`axis="${args.axis}"`);
-    return `
-    <div style="font-family: sans-serif;">
-      <div style="padding: 12px; background: #e2e8f0; border-radius: 4px;">Above spacer</div>
-      <ts-spacer ${attrs.join(' ')} style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
-      <div style="padding: 12px; background: #e2e8f0; border-radius: 4px;">Below spacer</div>
-    </div>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        size: '4',
-        axis: 'vertical',
-    },
-});
-export const Vertical = () => `
-  <div style="font-family: sans-serif; max-width: 400px;">
-    <h2 style="margin: 0;">First Section</h2>
-    <p style="margin: 0; color: #64748b;">Some content in the first section.</p>
-    <ts-spacer size="6" style="background: rgba(59, 130, 246, 0.1);"></ts-spacer>
-    <h2 style="margin: 0;">Second Section</h2>
-    <p style="margin: 0; color: #64748b;">Some content in the second section.</p>
-    <ts-spacer size="6" style="background: rgba(59, 130, 246, 0.1);"></ts-spacer>
-    <h2 style="margin: 0;">Third Section</h2>
-    <p style="margin: 0; color: #64748b;">Some content in the third section.</p>
-  </div>
-`;
-export const Horizontal = () => `
-  <div style="display: flex; align-items: center; font-family: sans-serif;">
-    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Left</span>
-    <ts-spacer axis="horizontal" size="4" style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
-    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Middle</span>
-    <ts-spacer axis="horizontal" size="8" style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
-    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Right</span>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="font-family: sans-serif;">
-    <p style="margin: 0 0 16px; font-size: 14px; color: #666;">Different vertical spacer sizes (highlighted in blue)</p>
-    <div style="display: flex; gap: 32px;">
-      <div style="flex: 1;">
-        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="1"</p>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
-        <ts-spacer size="1" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
-      </div>
-      <div style="flex: 1;">
-        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="4"</p>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
-        <ts-spacer size="4" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
-      </div>
-      <div style="flex: 1;">
-        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="8"</p>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
-        <ts-spacer size="8" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
-      </div>
-      <div style="flex: 1;">
-        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="12"</p>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
-        <ts-spacer size="12" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
-        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=spacer.stories.js.map