@tessera-ui/core 0.4.0

package/dist/esm/ts-select.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-select.entry.js","sources":["src/components/select/select.css?tag=ts-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-select — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-select-bg              Select background\n     --ts-select-border-color    Default border color\n     --ts-select-radius          Border radius\n     --ts-select-focus-ring      Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-select-bg: var(--ts-color-neutral-50);\n  --ts-select-border-color: var(--ts-color-border-default);\n  --ts-select-radius: var(--ts-radius-md);\n  --ts-select-focus-ring: var(--ts-focus-ring);\n}\n\n/* ---- Label ---- */\n.select__label {\n  display: block;\n  margin-block-end: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n.select__required {\n  color: var(--ts-color-danger-500);\n}\n\n/* ---- Container ---- */\n.select__container {\n  position: relative;\n}\n\n/* ---- Trigger button ---- */\n.select__trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ts-spacing-2);\n  width: 100%;\n  border: 1px solid var(--ts-select-border-color);\n  border-radius: var(--ts-select-radius);\n  background-color: var(--ts-select-bg);\n  font-family: inherit;\n  color: var(--ts-color-text-primary);\n  cursor: pointer;\n  outline: none;\n  transition:\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  text-align: start;\n  appearance: none;\n}\n\n.select__trigger:focus-visible {\n  border-color: var(--ts-color-primary-500);\n  box-shadow: var(--ts-select-focus-ring);\n}\n\n.select__trigger--error {\n  border-color: var(--ts-color-danger-500);\n}\n\n.select__trigger--error:focus-visible {\n  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);\n}\n\n.select__trigger--disabled {\n  background-color: var(--ts-color-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.select__trigger--open {\n  border-color: var(--ts-color-primary-500);\n  box-shadow: var(--ts-select-focus-ring);\n}\n\n/* ---- Display text ---- */\n.select__display {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__display--placeholder {\n  color: var(--ts-color-text-tertiary);\n}\n\n/* ---- Chevron ---- */\n.select__chevron {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n  transition: transform var(--ts-transition-fast);\n  color: var(--ts-color-text-tertiary);\n}\n\n:host(.ts-select--open) .select__chevron {\n  transform: rotate(180deg);\n}\n\n/* ---- Dropdown ---- */\n.select__dropdown {\n  position: absolute;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  top: calc(100% + var(--ts-spacing-1));\n  z-index: 1000;\n  background-color: var(--ts-color-bg-elevated);\n  border: 1px solid var(--ts-color-border-default);\n  border-radius: var(--ts-radius-md);\n  box-shadow: var(--ts-shadow-lg);\n  max-height: 15rem;\n  overflow-y: auto;\n  padding-block: var(--ts-spacing-1);\n}\n\n/* ---- Option ---- */\n.select__option {\n  display: flex;\n  align-items: center;\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n  color: var(--ts-color-text-primary);\n  font-size: inherit;\n}\n\n.select__option:hover:not(.select__option--disabled) {\n  background-color: var(--ts-color-interactive-primary-subtle);\n}\n\n.select__option--focused {\n  background-color: var(--ts-color-bg-subtle);\n}\n\n.select__option--selected {\n  color: var(--ts-color-interactive-primary);\n  font-weight: var(--ts-font-weight-medium);\n}\n\n.select__option--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .select__trigger {\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n  border-radius: var(--ts-radius-sm);\n}\n\n:host([size=\"md\"]) .select__trigger {\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .select__trigger {\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-lg);\n}\n\n:host([size=\"xl\"]) .select__trigger {\n  padding: var(--ts-spacing-4) var(--ts-spacing-5);\n  font-size: var(--ts-font-size-xl);\n  border-radius: var(--ts-radius-lg);\n}\n\n/* ---- Hidden slot ---- */\n.select__hidden-slot {\n  display: none;\n}\n\n/* ---- Help & Error Text ---- */\n.select__help,\n.select__error {\n  margin-block-start: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-xs);\n  line-height: var(--ts-line-height-normal);\n}\n\n.select__help {\n  color: var(--ts-color-text-tertiary);\n}\n\n.select__error {\n  color: var(--ts-color-danger-600);\n  font-weight: var(--ts-font-weight-medium);\n}\n","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"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,iiHAAiiH,CAAC;;MC2B9iH,QAAQ,GAAA,MAAA;;;;;;;;AAGX,IAAA,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC;AACjC,IAAA,SAAS;;IAGuB,KAAK,GAAG,EAAE;;AAG1C,IAAA,WAAW;;IAGM,QAAQ,GAAG,KAAK;;IAGhB,IAAI,GAAW,IAAI;;AAGpC,IAAA,KAAK;;AAGL,IAAA,QAAQ;;IAGS,KAAK,GAAG,KAAK;;AAG9B,IAAA,YAAY;;IAGK,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;IAGa,QAAQ,GAAG,KAAK;;IAGhC,MAAM,GAAG,KAAK;;IAGd,YAAY,GAAG,EAAE;;IAGjB,OAAO,GAAmB,EAAE;;AAGH,IAAA,QAAQ;;AAGT,IAAA,OAAO;;AAGR,IAAA,MAAM;IAGtC,iBAAiB,GAAA;;;AAKjB,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACnC,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,IAAI,CAAC,KAAK,EAAE;;;IAIhB,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;IAGrB,gBAAgB,GAAA;;AAEd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,2BAA2B,CAAC;AAC/E,QAAA,IAAI,EAAE,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;;IAGzD,YAAY,GAAA;QAClB,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC7D,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM;YACtD,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK;YAC3C,QAAQ,EAAE,GAAG,CAAC,QAAQ;AACvB,SAAA,CAAC,CAAC;;IAGG,IAAI,GAAA;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;QAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AACzE,QAAA,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC;AAAE,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC;;IAG1C,KAAK,GAAA;AACX,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE;AACtB,QAAA,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;;AAGjB,IAAA,YAAY,CAAC,MAAoB,EAAA;QACvC,IAAI,MAAM,CAAC,QAAQ;YAAE;AACrB,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QACzC,IAAI,CAAC,KAAK,EAAE;;IAGN,kBAAkB,GAAG,MAAW;AACtC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,KAAK,EAAE;;aACP;YACL,IAAI,CAAC,IAAI,EAAE;;AAEf,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAU;AAC5D,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,OAAO;AACZ,YAAA,KAAK,GAAG;AACR,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;oBAChB,IAAI,CAAC,IAAI,EAAE;;AACN,qBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;AACrD,oBAAA,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AAC7D,wBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;;gBAGtD;AACF,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;oBAChB,IAAI,CAAC,IAAI,EAAE;;gBAEb;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,KAAK,CAAC,cAAc,EAAE;oBACtB,IAAI,CAAC,KAAK,EAAE;;gBAEd;;AAEN,KAAC;AAEO,IAAA,qBAAqB,GAAG,CAAC,KAAoB,KAAU;AAC7D,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC9D,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;gBACjB;AACF,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAClB;AACF,YAAA,KAAK,OAAO;AACZ,YAAA,KAAK,GAAG;gBACN,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE;AAC1G,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;gBAEpD;AACF,YAAA,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,KAAK,EAAE;gBACZ;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC3F;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;gBACzI;;AAEN,KAAC;AAEO,IAAA,SAAS,CAAC,SAAiB,EAAA;AACjC,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS;QACxC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;YAC7E,IAAI,IAAI,SAAS;;AAEnB,QAAA,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;AAC3C,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;;IAIpB,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAEO,UAAU,GAAG,MAAW;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,KAAC;IAEO,cAAc,GAAA;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AACjE,QAAA,OAAO,QAAQ,EAAE,KAAK,IAAI,EAAE;;;IAI9B,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;AAClD,QAAA,MAAM,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,QAAQ;AACvC,QAAA,MAAM,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,OAAO;AACrC,QAAA,MAAM,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,QAAQ;AACvC,QAAA,MAAM,SAAS,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,UAAU;AAC3C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QAEzC,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBACjC,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK;aAC/B,EAAA,EAEA,IAAI,CAAC,KAAK,KACT,8DAAO,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,EAAA,EAClD,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,IAAA,CAAU,CACvE,CACT,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,wBAAwB,EAAE,IAAI,CAAC,KAAK;gBACpC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;AAC3C,aAAA,EACD,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC/B,SAAS,mBACR,SAAS,EAAA,iBAAA,EACP,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAAA,cAAA,EACnC,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,8BAA8B,EAAE,CAAC,WAAW,EAAE,EAAA,EACnF,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,CACvC,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,gBAAgB,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,oBAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAG,CAC7G,CACC,EAER,IAAI,CAAC,MAAM,KACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,SAAS,EAAA,iBAAA,EACI,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EACjD,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAA,EAEpC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC9B,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;AACvD,gBAAA,yBAAyB,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY;gBACtD,0BAA0B,EAAE,MAAM,CAAC,QAAQ;AAC5C,aAAA,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9C,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAA,EAEvC,MAAM,CAAC,KAAK,CACT,CACP,CAAC,CACE,CACP,CACG,EAGN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAEL,QAAQ,KACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IACnE,IAAI,CAAC,YAAY,CACd,CACP,EAEA,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,WAAW,EAAC,EAAE,EAAE,MAAM,EAAA,EAClD,IAAI,CAAC,QAAQ,CACV,CACP,CACI;;;;;;;;;;;;"}

package/dist/esm/ts-skeleton.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const skeletonCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-skeleton-radius:var(--ts-radius-sm);--ts-skeleton-height:1em;--ts-color-skeleton-base:var(--ts-color-neutral-200);--ts-color-skeleton-pulse:var(--ts-color-neutral-300)}.skeleton__base{display:flex;flex-direction:column;gap:var(--ts-spacing-2);width:100%;height:100%}.skeleton__line{block-size:var(--ts-skeleton-height);inline-size:100%;border-radius:var(--ts-skeleton-radius);background-color:var(--ts-color-skeleton-base)}.skeleton__line--last{inline-size:75%}:host([variant="circular"]) .skeleton__base{border-radius:50%;background-color:var(--ts-color-skeleton-base);aspect-ratio:1}:host([variant="rectangular"]) .skeleton__base{border-radius:var(--ts-skeleton-radius);background-color:var(--ts-color-skeleton-base);min-block-size:var(--ts-skeleton-height)}:host([animation="pulse"]) .skeleton__line,:host([animation="pulse"][variant="circular"]) .skeleton__base,:host([animation="pulse"][variant="rectangular"]) .skeleton__base{animation:ts-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ts-skeleton-pulse{0%,100%{background-color:var(--ts-color-skeleton-base)}50%{background-color:var(--ts-color-skeleton-pulse)}}:host([animation="wave"]) .skeleton__line,:host([animation="wave"][variant="circular"]) .skeleton__base,:host([animation="wave"][variant="rectangular"]) .skeleton__base{background:linear-gradient(     90deg,     var(--ts-color-skeleton-base) 25%,     var(--ts-color-skeleton-pulse) 50%,     var(--ts-color-skeleton-base) 75%   );background-size:200% 100%;animation:ts-skeleton-wave 1.5s ease-in-out infinite}@keyframes ts-skeleton-wave{0%{background-position:200% 0}100%{background-position:-200% 0}}:host([animation="none"]) .skeleton__line,:host([animation="none"][variant="circular"]) .skeleton__base,:host([animation="none"][variant="rectangular"]) .skeleton__base{animation:none}`;
+
+const TsSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The skeleton shape variant. */
+    variant = 'text';
+    /** CSS width of the skeleton. */
+    width = '100%';
+    /** CSS height of the skeleton. */
+    height;
+    /** Number of lines to render (text variant only). */
+    lines = 1;
+    /** Animation style. */
+    animation = 'pulse';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const style = {};
+        if (this.width)
+            style['width'] = this.width;
+        if (this.height)
+            style['height'] = this.height;
+        if (this.variant === 'text') {
+            const lineElements = [];
+            for (let i = 0; i < this.lines; i++) {
+                const isLast = i === this.lines - 1 && this.lines > 1;
+                lineElements.push(h("div", { class: {
+                        'skeleton__line': true,
+                        'skeleton__line--last': isLast,
+                    }, part: "line" }));
+            }
+            return (h(Host, { class: {
+                    'ts-skeleton': true,
+                    [`ts-skeleton--${this.variant}`]: true,
+                    [`ts-skeleton--${this.animation}`]: true,
+                }, style: style, "aria-hidden": "true" }, h("div", { class: "skeleton__base", part: "base" }, lineElements)));
+        }
+        return (h(Host, { class: {
+                'ts-skeleton': true,
+                [`ts-skeleton--${this.variant}`]: true,
+                [`ts-skeleton--${this.animation}`]: true,
+            }, style: style, "aria-hidden": "true" }, h("div", { class: "skeleton__base", part: "base" })));
+    }
+};
+TsSkeleton.style = skeletonCss();
+
+export { TsSkeleton as ts_skeleton };
+//# sourceMappingURL=ts-skeleton.entry.js.map
+
+//# sourceMappingURL=ts-skeleton.entry.js.map

package/dist/esm/ts-skeleton.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-skeleton.entry.js","sources":["src/components/skeleton/skeleton.css?tag=ts-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-skeleton — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-skeleton-radius     Border radius\n     --ts-skeleton-height     Default line height\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-skeleton-radius: var(--ts-radius-sm);\n  --ts-skeleton-height: 1em;\n  --ts-color-skeleton-base: var(--ts-color-neutral-200);\n  --ts-color-skeleton-pulse: var(--ts-color-neutral-300);\n}\n\n.skeleton__base {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ts-spacing-2);\n  width: 100%;\n  height: 100%;\n}\n\n/* ---- Line (text variant) ---- */\n.skeleton__line {\n  block-size: var(--ts-skeleton-height);\n  inline-size: 100%;\n  border-radius: var(--ts-skeleton-radius);\n  background-color: var(--ts-color-skeleton-base);\n}\n\n.skeleton__line--last {\n  inline-size: 75%;\n}\n\n/* ---- Circular variant ---- */\n:host([variant=\"circular\"]) .skeleton__base {\n  border-radius: 50%;\n  background-color: var(--ts-color-skeleton-base);\n  aspect-ratio: 1;\n}\n\n/* ---- Rectangular variant ---- */\n:host([variant=\"rectangular\"]) .skeleton__base {\n  border-radius: var(--ts-skeleton-radius);\n  background-color: var(--ts-color-skeleton-base);\n  min-block-size: var(--ts-skeleton-height);\n}\n\n/* ---- Pulse animation ---- */\n:host([animation=\"pulse\"]) .skeleton__line,\n:host([animation=\"pulse\"][variant=\"circular\"]) .skeleton__base,\n:host([animation=\"pulse\"][variant=\"rectangular\"]) .skeleton__base {\n  animation: ts-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes ts-skeleton-pulse {\n  0%, 100% { background-color: var(--ts-color-skeleton-base); }\n  50% { background-color: var(--ts-color-skeleton-pulse); }\n}\n\n/* ---- Wave animation ---- */\n:host([animation=\"wave\"]) .skeleton__line,\n:host([animation=\"wave\"][variant=\"circular\"]) .skeleton__base,\n:host([animation=\"wave\"][variant=\"rectangular\"]) .skeleton__base {\n  background: linear-gradient(\n    90deg,\n    var(--ts-color-skeleton-base) 25%,\n    var(--ts-color-skeleton-pulse) 50%,\n    var(--ts-color-skeleton-base) 75%\n  );\n  background-size: 200% 100%;\n  animation: ts-skeleton-wave 1.5s ease-in-out infinite;\n}\n\n@keyframes ts-skeleton-wave {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* ---- No animation ---- */\n:host([animation=\"none\"]) .skeleton__line,\n:host([animation=\"none\"][variant=\"circular\"]) .skeleton__base,\n:host([animation=\"none\"][variant=\"rectangular\"]) .skeleton__base {\n  animation: none;\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+0DAA+0D,CAAC;;MCW91D,UAAU,GAAA,MAAA;;;;;IAEI,OAAO,GAAwC,MAAM;;IAGtE,KAAK,GAAG,MAAM;;AAGd,IAAA,MAAM;;IAGN,KAAK,GAAG,CAAC;;IAGQ,SAAS,GAA8B,OAAO;;IAGvE,MAAM,GAAA;QACJ,MAAM,KAAK,GAA2B,EAAE;QACxC,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK;QAC3C,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM;AAE9C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAC3B,MAAM,YAAY,GAAG,EAAE;AACvB,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;AACnC,gBAAA,MAAM,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC;gBACrD,YAAY,CAAC,IAAI,CACf,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,wBAAA,gBAAgB,EAAE,IAAI;AACtB,wBAAA,sBAAsB,EAAE,MAAM;AAC/B,qBAAA,EACD,IAAI,EAAC,MAAM,EAAA,CACX,CACH;;AAGH,YAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,oBAAA,aAAa,EAAE,IAAI;AACnB,oBAAA,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACtC,oBAAA,CAAC,gBAAgB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;iBACzC,EACD,KAAK,EAAE,KAAK,EAAA,aAAA,EACA,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAA,EACpC,YAAY,CACT,CACD;;AAIX,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACtC,gBAAA,CAAC,gBAAgB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;aACzC,EACD,KAAK,EAAE,KAAK,EAAA,aAAA,EACA,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAA,CAAG,CACrC;;;;;;;"}

package/dist/esm/ts-slider.entry.js

@@ -0,0 +1,130 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const sliderCss = () => `: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}.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)}.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)}.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}.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)}: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}: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}`;
+
+const TsSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsInput = createEvent(this, "tsInput");
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return getElement(this); }
+    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 }))));
+    }
+};
+TsSlider.style = sliderCss();
+
+export { TsSlider as ts_slider };
+//# sourceMappingURL=ts-slider.entry.js.map
+
+//# sourceMappingURL=ts-slider.entry.js.map

package/dist/esm/ts-slider.entry.js.map

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

package/dist/esm/ts-spacer.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const spacerCss = () => `:host{display:block}:host([axis="horizontal"]){display:inline-block}`;
+
+const TsSpacer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Spacing token number controlling the size of the spacer. */
+    size = '4';
+    /** The axis along which the spacer adds space. */
+    axis = 'vertical';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const style = this.axis === 'horizontal'
+            ? { width: `var(--ts-spacing-${this.size})`, height: '100%' }
+            : { height: `var(--ts-spacing-${this.size})`, width: '100%' };
+        return h(Host, { key: '967b57ba1224c79cd338795ec7fb5fe4008f4f5f', style: style });
+    }
+};
+TsSpacer.style = spacerCss();
+
+export { TsSpacer as ts_spacer };
+//# sourceMappingURL=ts-spacer.entry.js.map
+
+//# sourceMappingURL=ts-spacer.entry.js.map

package/dist/esm/ts-spacer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-spacer.entry.js","sources":["src/components/spacer/spacer.css?tag=ts-spacer&encapsulation=shadow","src/components/spacer/spacer.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-spacer — Shadow DOM Scoped Styles\n\n   An explicit spacing element for vertical or horizontal space.\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n:host([axis=\"horizontal\"]) {\n  display: inline-block;\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,oEAAoE,CAAC;;MCUjF,QAAQ,GAAA,MAAA;;;;;IAEM,IAAI,GAAW,GAAG;;IAGlB,IAAI,GAA8B,UAAU;;IAGrE,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE,EAAE,KAAK,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,IAAI,CAAA,CAAA,CAAG,EAAE,MAAM,EAAE,MAAM;AAC3D,cAAE,EAAE,MAAM,EAAE,oBAAoB,IAAI,CAAC,IAAI,CAAA,CAAA,CAAG,EAAE,KAAK,EAAE,MAAM,EAAE;AAEjE,QAAA,OAAO,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,KAAK,GAAS;;;;;;;"}

package/dist/esm/ts-spinner.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const spinnerCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;--ts-spinner-size:1.5rem;--ts-spinner-color:var(--ts-color-interactive-primary);--ts-spinner-track-color:var(--ts-color-neutral-200)}:host([size="xs"]){--ts-spinner-size:0.875rem}:host([size="sm"]){--ts-spinner-size:1.125rem}:host([size="md"]){--ts-spinner-size:1.5rem}:host([size="lg"]){--ts-spinner-size:2rem}:host([size="xl"]){--ts-spinner-size:3rem}.spinner__svg{width:var(--ts-spinner-size);height:var(--ts-spinner-size);animation:ts-spinner-rotate 0.75s linear infinite}.spinner__track{stroke:var(--ts-spinner-track-color)}.spinner__indicator{stroke:var(--ts-spinner-color)}@keyframes ts-spinner-rotate{to{transform:rotate(360deg)}}`;
+
+const TsSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The size of the spinner. */
+    size = 'md';
+    /** The color of the spinning indicator. */
+    color = 'currentColor';
+    /** Accessible label for screen readers. */
+    label = 'Loading';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '6d0183cc6a829afd067c51502cbc119cf8e89c23', class: {
+                'ts-spinner': true,
+                [`ts-spinner--${this.size}`]: true,
+            }, role: "status", "aria-label": this.label }, h("svg", { key: '0bb8dc344532457d26f820a6761aba232ad7ed3f', class: "spinner__svg", part: "svg", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '3431186c9235e4538634217cc4652e5c5d4e2959', class: "spinner__track", part: "track", cx: "16", cy: "16", r: "13", "stroke-width": "3" }), h("circle", { key: 'b2c69fc866b5d17de8664a8be40750c5a541a374', class: "spinner__indicator", part: "indicator", cx: "16", cy: "16", r: "13", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "20 61.68", style: { stroke: this.color !== 'currentColor' ? this.color : undefined } }))));
+    }
+};
+TsSpinner.style = spinnerCss();
+
+export { TsSpinner as ts_spinner };
+//# sourceMappingURL=ts-spinner.entry.js.map
+
+//# sourceMappingURL=ts-spinner.entry.js.map

package/dist/esm/ts-spinner.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-spinner.entry.js","sources":["src/components/spinner/spinner.css?tag=ts-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-spinner — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-spinner-size          Spinner dimensions\n     --ts-spinner-color         Spinning indicator color\n     --ts-spinner-track-color   Background track color\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  --ts-spinner-size: 1.5rem;\n  --ts-spinner-color: var(--ts-color-interactive-primary);\n  --ts-spinner-track-color: var(--ts-color-neutral-200);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) { --ts-spinner-size: 0.875rem; }\n:host([size=\"sm\"]) { --ts-spinner-size: 1.125rem; }\n:host([size=\"md\"]) { --ts-spinner-size: 1.5rem; }\n:host([size=\"lg\"]) { --ts-spinner-size: 2rem; }\n:host([size=\"xl\"]) { --ts-spinner-size: 3rem; }\n\n/* ---- SVG ---- */\n.spinner__svg {\n  width: var(--ts-spinner-size);\n  height: var(--ts-spinner-size);\n  animation: ts-spinner-rotate 0.75s linear infinite;\n}\n\n/* ---- Track ---- */\n.spinner__track {\n  stroke: var(--ts-spinner-track-color);\n}\n\n/* ---- Indicator ---- */\n.spinner__indicator {\n  stroke: var(--ts-spinner-color);\n}\n\n/* ---- Animation ---- */\n@keyframes ts-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part svg - The SVG element.\n * @part track - The background track circle.\n * @part indicator - The spinning indicator arc.\n */\n@Component({\n  tag: 'ts-spinner',\n  styleUrl: 'spinner.css',\n  shadow: true,\n})\nexport class TsSpinner {\n  /** The size of the spinner. */\n  @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** The color of the spinning indicator. */\n  @Prop() color: string = 'currentColor';\n\n  /** Accessible label for screen readers. */\n  @Prop() label: string = 'Loading';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-spinner': true,\n          [`ts-spinner--${this.size}`]: true,\n        }}\n        role=\"status\"\n        aria-label={this.label}\n      >\n        <svg class=\"spinner__svg\" part=\"svg\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle\n            class=\"spinner__track\"\n            part=\"track\"\n            cx=\"16\"\n            cy=\"16\"\n            r=\"13\"\n            stroke-width=\"3\"\n          />\n          <circle\n            class=\"spinner__indicator\"\n            part=\"indicator\"\n            cx=\"16\"\n            cy=\"16\"\n            r=\"13\"\n            stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"20 61.68\"\n            style={{ stroke: this.color !== 'currentColor' ? this.color : undefined }}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,ksBAAksB,CAAC;;MCYhtB,SAAS,GAAA,MAAA;;;;;IAEK,IAAI,GAAqC,IAAI;;IAG9D,KAAK,GAAW,cAAc;;IAG9B,KAAK,GAAW,SAAS;;IAGjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,IAAI,CAAC,KAAK,EAAA,EAEtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrG,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EAAA,cAAA,EACO,GAAG,EAAA,CAChB,EACF,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,WAAW,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EAAA,cAAA,EACO,GAAG,EAAA,gBAAA,EACD,OAAO,EAAA,kBAAA,EACL,UAAU,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EAAE,EAAA,CACzE,CACE,CACD;;;;;;;"}

package/dist/esm/ts-stack.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const stackCss = () => `:host{display:flex;flex-direction:column}`;
+
+const TsStack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Spacing token number controlling the gap between items. */
+    gap = '3';
+    /** Cross-axis alignment of items. */
+    align = 'stretch';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return (h(Host, { key: 'e3a85d1cdd874e8e09e069d6d5e22502b494fbef', style: {
+                gap: `var(--ts-spacing-${this.gap})`,
+                alignItems: alignMap[this.align] || 'stretch',
+            } }, h("slot", { key: 'eb4127e0dfded8841de2951976461f0ec2ec1f88' })));
+    }
+};
+TsStack.style = stackCss();
+
+export { TsStack as ts_stack };
+//# sourceMappingURL=ts-stack.entry.js.map
+
+//# sourceMappingURL=ts-stack.entry.js.map

package/dist/esm/ts-stack.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-stack.entry.js","sources":["src/components/stack/stack.css?tag=ts-stack&encapsulation=shadow","src/components/stack/stack.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-stack — Shadow DOM Scoped Styles\n\n   A vertical stack layout primitive with consistent gap spacing.\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for stacked content.\n *\n * @part base - The stack container.\n */\n@Component({\n  tag: 'ts-stack',\n  styleUrl: 'stack.css',\n  shadow: true,\n})\nexport class TsStack {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '3';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'stretch',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yCAAyC,CAAC;;MCYrD,OAAO,GAAA,MAAA;;;;;IAEO,GAAG,GAAW,GAAG;;IAGjB,KAAK,GAA2C,SAAS;;IAGlF,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;SACnB;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,GAAG,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,GAAG,CAAA,CAAA,CAAG;gBACpC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS;AAC9C,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

package/dist/esm/ts-step.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const stepCss = () => `:host{display:flex;font-family:var(--ts-font-family-base)}:host(.ts-step--horizontal){flex:1;flex-direction:column}:host(.ts-step--vertical){flex-direction:column}.step__wrapper{display:flex;flex-direction:column}:host(.ts-step--horizontal) .step__wrapper{flex-direction:column;align-items:center}:host(.ts-step--vertical) .step__wrapper{flex-direction:row;align-items:flex-start}.step__header{display:flex;align-items:center;gap:var(--ts-spacing-2)}:host(.ts-step--horizontal) .step__header{flex-direction:column;text-align:center}:host(.ts-step--vertical) .step__header{flex-direction:row}.step__indicator{display:flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--ts-radius-full);border:2px solid var(--ts-color-border-default);background-color:var(--ts-color-bg-elevated);color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-semi);flex-shrink:0;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.step__indicator--active{border-color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary));background-color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary));color:var(--ts-color-text-on-primary, #fff)}.step__indicator--completed{border-color:var(--ts-stepper-completed-color, var(--ts-color-success-600));background-color:var(--ts-stepper-completed-color, var(--ts-color-success-600));color:#ffffff}.step__indicator--error{border-color:var(--ts-color-danger-500);background-color:var(--ts-color-danger-500);color:#ffffff}.step__icon{inline-size:1em;block-size:1em}.step__text{display:flex;flex-direction:column;gap:var(--ts-spacing-0, 2px)}.step__label{font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary)}:host(.ts-step--active) .step__label{color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary))}:host(.ts-step--disabled) .step__label{color:var(--ts-color-text-tertiary)}.step__description{font-size:var(--ts-font-size-xs);color:var(--ts-color-text-tertiary)}.step__connector{display:flex;align-items:center;justify-content:center;flex:1}:host(.ts-step--horizontal) .step__connector{padding-inline:var(--ts-spacing-2);min-inline-size:var(--ts-spacing-4);padding-block-start:var(--ts-spacing-4)}:host(.ts-step--vertical) .step__connector{padding-block:var(--ts-spacing-2);min-block-size:var(--ts-spacing-4);margin-inline-start:calc(1rem - 1px)}.step__connector-line{background-color:var(--ts-stepper-connector-color, var(--ts-color-border-default));transition:background-color var(--ts-transition-fast)}:host(.ts-step--horizontal) .step__connector-line{block-size:2px;inline-size:100%}:host(.ts-step--vertical) .step__connector-line{inline-size:2px;block-size:100%;min-block-size:var(--ts-spacing-6)}.step__connector-line--completed{background-color:var(--ts-stepper-completed-color, var(--ts-color-success-600))}.step__content{padding-block-start:var(--ts-spacing-2)}.step__content:empty{display:none}:host(.ts-step--disabled){opacity:0.5}`;
+
+const TsStep = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** The step label text. */
+    label;
+    /** Optional description text below the label. */
+    description;
+    /** Whether this step is completed. */
+    completed = false;
+    /** Whether this step has an error. */
+    error = false;
+    /** Whether this step is disabled. */
+    disabled = false;
+    /** Optional custom icon name. */
+    icon;
+    get index() {
+        return parseInt(this.hostEl.getAttribute('data-index') || '0', 10);
+    }
+    get isActive() {
+        return this.hostEl.hasAttribute('data-active');
+    }
+    get hasConnector() {
+        return this.hostEl.hasAttribute('data-has-connector');
+    }
+    get orientation() {
+        return this.hostEl.getAttribute('data-orientation') || 'horizontal';
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderIndicatorContent() {
+        if (this.completed) {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, h("polyline", { points: "20 6 9 17 4 12" })));
+        }
+        if (this.error) {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+        }
+        if (this.icon) {
+            return h("ts-icon", { name: this.icon, size: "sm" });
+        }
+        return h("span", null, this.index + 1);
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '7746197313bcd00092bbd43bb8e590d9dc363b4e', class: {
+                'ts-step': true,
+                'ts-step--active': this.isActive,
+                'ts-step--completed': this.completed,
+                'ts-step--error': this.error,
+                'ts-step--disabled': this.disabled,
+                [`ts-step--${this.orientation}`]: true,
+            }, role: "listitem", "aria-current": this.isActive ? 'step' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'b01e2dc30f9b3c4c5422fc9f58055b4e29e660c0', class: "step__wrapper", part: "step" }, h("div", { key: 'e8dc194bffaf1ad7dc73d0d7c3890059e39d23bc', class: "step__header" }, h("div", { key: 'b0b54d952b3882db999f62d04d942b9ff92f9566', class: {
+                'step__indicator': true,
+                'step__indicator--active': this.isActive,
+                'step__indicator--completed': this.completed,
+                'step__indicator--error': this.error,
+            }, part: "indicator" }, this.renderIndicatorContent()), h("div", { key: 'c634d466d5d1f6bab4a0f2a9dbe450d4b60a0c8b', class: "step__text" }, this.label && (h("span", { key: '96dc52bcb324e4e2c96f5c09be2cebb0a4b0fdaf', class: "step__label", part: "label" }, this.label)), this.description && (h("span", { key: '863aac22befd3bb4f92c87ee7b5c24ab8d9c789a', class: "step__description", part: "description" }, this.description)))), this.hasConnector && (h("div", { key: '45ac15eac777bf1c38e0ffc3da8b667a55a584f7', class: "step__connector", part: "connector" }, h("div", { key: '15375de53bfae186638eaa9af95574d7875868b8', class: {
+                'step__connector-line': true,
+                'step__connector-line--completed': this.completed,
+            } }))), h("div", { key: 'd5efc013d5b97850a2768464868eade08b953784', class: "step__content", part: "content" }, h("slot", { key: '3b84a7d0ebe30fbce3cf5c16b7e515d33436d675' })))));
+    }
+};
+TsStep.style = stepCss();
+
+export { TsStep as ts_step };
+//# sourceMappingURL=ts-step.entry.js.map
+
+//# sourceMappingURL=ts-step.entry.js.map

package/dist/esm/ts-step.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-step.entry.js","sources":["src/components/stepper/step.css?tag=ts-step&encapsulation=shadow","src/components/stepper/step.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-step — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: flex;\n  font-family: var(--ts-font-family-base);\n}\n\n/* ---- Horizontal layout ---- */\n:host(.ts-step--horizontal) {\n  flex: 1;\n  flex-direction: column;\n}\n\n/* ---- Vertical layout ---- */\n:host(.ts-step--vertical) {\n  flex-direction: column;\n}\n\n.step__wrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.ts-step--horizontal) .step__wrapper {\n  flex-direction: column;\n  align-items: center;\n}\n\n:host(.ts-step--vertical) .step__wrapper {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.step__header {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n}\n\n:host(.ts-step--horizontal) .step__header {\n  flex-direction: column;\n  text-align: center;\n}\n\n:host(.ts-step--vertical) .step__header {\n  flex-direction: row;\n}\n\n/* ---- Indicator ---- */\n.step__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 2rem;\n  block-size: 2rem;\n  border-radius: var(--ts-radius-full);\n  border: 2px solid var(--ts-color-border-default);\n  background-color: var(--ts-color-bg-elevated);\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  flex-shrink: 0;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.step__indicator--active {\n  border-color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n  background-color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n  color: var(--ts-color-text-on-primary, #fff);\n}\n\n.step__indicator--completed {\n  border-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n  background-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n  color: #ffffff;\n}\n\n.step__indicator--error {\n  border-color: var(--ts-color-danger-500);\n  background-color: var(--ts-color-danger-500);\n  color: #ffffff;\n}\n\n.step__icon {\n  inline-size: 1em;\n  block-size: 1em;\n}\n\n/* ---- Text ---- */\n.step__text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ts-spacing-0, 2px);\n}\n\n.step__label {\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n}\n\n:host(.ts-step--active) .step__label {\n  color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n}\n\n:host(.ts-step--disabled) .step__label {\n  color: var(--ts-color-text-tertiary);\n}\n\n.step__description {\n  font-size: var(--ts-font-size-xs);\n  color: var(--ts-color-text-tertiary);\n}\n\n/* ---- Connector ---- */\n.step__connector {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n:host(.ts-step--horizontal) .step__connector {\n  padding-inline: var(--ts-spacing-2);\n  min-inline-size: var(--ts-spacing-4);\n  padding-block-start: var(--ts-spacing-4);\n}\n\n:host(.ts-step--vertical) .step__connector {\n  padding-block: var(--ts-spacing-2);\n  min-block-size: var(--ts-spacing-4);\n  margin-inline-start: calc(1rem - 1px);\n}\n\n.step__connector-line {\n  background-color: var(--ts-stepper-connector-color, var(--ts-color-border-default));\n  transition: background-color var(--ts-transition-fast);\n}\n\n:host(.ts-step--horizontal) .step__connector-line {\n  block-size: 2px;\n  inline-size: 100%;\n}\n\n:host(.ts-step--vertical) .step__connector-line {\n  inline-size: 2px;\n  block-size: 100%;\n  min-block-size: var(--ts-spacing-6);\n}\n\n.step__connector-line--completed {\n  background-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n}\n\n/* ---- Content ---- */\n.step__content {\n  padding-block-start: var(--ts-spacing-2);\n}\n\n.step__content:empty {\n  display: none;\n}\n\n/* ---- Disabled ---- */\n:host(.ts-step--disabled) {\n  opacity: 0.5;\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for step content.\n *\n * @part step - The step wrapper.\n * @part indicator - The step number/icon circle.\n * @part label - The step label.\n * @part description - The step description.\n * @part connector - The connector line between steps.\n * @part content - The step content area.\n */\n@Component({\n  tag: 'ts-step',\n  styleUrl: 'step.css',\n  shadow: true,\n})\nexport class TsStep {\n  @Element() hostEl!: HTMLElement;\n\n  /** The step label text. */\n  @Prop() label?: string;\n\n  /** Optional description text below the label. */\n  @Prop() description?: string;\n\n  /** Whether this step is completed. */\n  @Prop({ reflect: true }) completed = false;\n\n  /** Whether this step has an error. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Whether this step is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional custom icon name. */\n  @Prop() icon?: string;\n\n  private get index(): number {\n    return parseInt(this.hostEl.getAttribute('data-index') || '0', 10);\n  }\n\n  private get isActive(): boolean {\n    return this.hostEl.hasAttribute('data-active');\n  }\n\n  private get hasConnector(): boolean {\n    return this.hostEl.hasAttribute('data-has-connector');\n  }\n\n  private get orientation(): string {\n    return this.hostEl.getAttribute('data-orientation') || 'horizontal';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIndicatorContent() {\n    if (this.completed) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      );\n    }\n    if (this.error) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      );\n    }\n    if (this.icon) {\n      return <ts-icon name={this.icon} size=\"sm\" />;\n    }\n    return <span>{this.index + 1}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-step': true,\n          'ts-step--active': this.isActive,\n          'ts-step--completed': this.completed,\n          'ts-step--error': this.error,\n          'ts-step--disabled': this.disabled,\n          [`ts-step--${this.orientation}`]: true,\n        }}\n        role=\"listitem\"\n        aria-current={this.isActive ? 'step' : undefined}\n        aria-disabled={this.disabled ? 'true' : undefined}\n      >\n        <div class=\"step__wrapper\" part=\"step\">\n          <div class=\"step__header\">\n            <div\n              class={{\n                'step__indicator': true,\n                'step__indicator--active': this.isActive,\n                'step__indicator--completed': this.completed,\n                'step__indicator--error': this.error,\n              }}\n              part=\"indicator\"\n            >\n              {this.renderIndicatorContent()}\n            </div>\n\n            <div class=\"step__text\">\n              {this.label && (\n                <span class=\"step__label\" part=\"label\">\n                  {this.label}\n                </span>\n              )}\n              {this.description && (\n                <span class=\"step__description\" part=\"description\">\n                  {this.description}\n                </span>\n              )}\n            </div>\n          </div>\n\n          {this.hasConnector && (\n            <div class=\"step__connector\" part=\"connector\">\n              <div\n                class={{\n                  'step__connector-line': true,\n                  'step__connector-line--completed': this.completed,\n                }}\n              />\n            </div>\n          )}\n\n          <div class=\"step__content\" part=\"content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ts-stepper.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const stepperCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-stepper-active-color:var(--ts-color-interactive-primary);--ts-stepper-completed-color:var(--ts-color-success-600);--ts-stepper-connector-color:var(--ts-color-border-default)}.stepper__container{display:flex}:host([orientation="horizontal"]) .stepper__container{flex-direction:row;align-items:flex-start}:host([orientation="vertical"]) .stepper__container{flex-direction:column}`;
+
+const TsStepper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** The index of the currently active step (0-based). */
+    activeStep = 0;
+    /** The layout orientation. */
+    orientation = 'horizontal';
+    /** If true, steps must be completed in order. */
+    linear = false;
+    handleActiveStepChange() {
+        this.updateStepStates();
+    }
+    componentDidLoad() {
+        this.updateStepStates();
+    }
+    updateStepStates() {
+        const steps = Array.from(this.hostEl.querySelectorAll('ts-step'));
+        steps.forEach((step, index) => {
+            step.setAttribute('data-index', String(index));
+            step.setAttribute('data-orientation', this.orientation);
+            if (index === this.activeStep) {
+                step.setAttribute('data-active', '');
+            }
+            else {
+                step.removeAttribute('data-active');
+            }
+            if (this.linear && index > this.activeStep) {
+                step.setAttribute('disabled', '');
+            }
+            else if (this.linear) {
+                step.removeAttribute('disabled');
+            }
+            if (index < steps.length - 1) {
+                step.setAttribute('data-has-connector', '');
+            }
+            else {
+                step.removeAttribute('data-has-connector');
+            }
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '202c3f1869c3010f5c6f8b5ee52850bcbbce5891', class: {
+                'ts-stepper': true,
+                [`ts-stepper--${this.orientation}`]: true,
+            } }, h("div", { key: '32b8444cf38f04152a1e288241d703aa5e483379', class: "stepper__container", part: "container", role: "list" }, h("slot", { key: '399b699aa4133bb1bb6d93fdc56b45d9bffb234d' }))));
+    }
+    static get watchers() { return {
+        "activeStep": [{
+                "handleActiveStepChange": 0
+            }]
+    }; }
+};
+TsStepper.style = stepperCss();
+
+export { TsStepper as ts_stepper };
+//# sourceMappingURL=ts-stepper.entry.js.map
+
+//# sourceMappingURL=ts-stepper.entry.js.map

package/dist/esm/ts-stepper.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-stepper.entry.js","sources":["src/components/stepper/stepper.css?tag=ts-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-stepper — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-stepper-active-color     Active step indicator color\n     --ts-stepper-completed-color  Completed step indicator color\n     --ts-stepper-connector-color  Connector line color\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-stepper-active-color: var(--ts-color-interactive-primary);\n  --ts-stepper-completed-color: var(--ts-color-success-600);\n  --ts-stepper-connector-color: var(--ts-color-border-default);\n}\n\n.stepper__container {\n  display: flex;\n}\n\n/* ---- Horizontal ---- */\n:host([orientation=\"horizontal\"]) .stepper__container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n/* ---- Vertical ---- */\n:host([orientation=\"vertical\"]) .stepper__container {\n  flex-direction: column;\n}\n","import { Component, Prop, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-step children.\n *\n * @part container - The stepper container.\n */\n@Component({\n  tag: 'ts-stepper',\n  styleUrl: 'stepper.css',\n  shadow: true,\n})\nexport class TsStepper {\n  @Element() hostEl!: HTMLElement;\n\n  /** The index of the currently active step (0-based). */\n  @Prop({ reflect: true }) activeStep = 0;\n\n  /** The layout orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** If true, steps must be completed in order. */\n  @Prop() linear = false;\n\n  @Watch('activeStep')\n  handleActiveStepChange(): void {\n    this.updateStepStates();\n  }\n\n  componentDidLoad(): void {\n    this.updateStepStates();\n  }\n\n  private updateStepStates(): void {\n    const steps = Array.from(this.hostEl.querySelectorAll('ts-step'));\n    steps.forEach((step, index) => {\n      step.setAttribute('data-index', String(index));\n      step.setAttribute('data-orientation', this.orientation);\n      if (index === this.activeStep) {\n        step.setAttribute('data-active', '');\n      } else {\n        step.removeAttribute('data-active');\n      }\n      if (this.linear && index > this.activeStep) {\n        step.setAttribute('disabled', '');\n      } else if (this.linear) {\n        step.removeAttribute('disabled');\n      }\n      if (index < steps.length - 1) {\n        step.setAttribute('data-has-connector', '');\n      } else {\n        step.removeAttribute('data-has-connector');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-stepper': true,\n          [`ts-stepper--${this.orientation}`]: true,\n        }}\n      >\n        <div class=\"stepper__container\" part=\"container\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,ybAAyb,CAAC;;MCYvc,SAAS,GAAA,MAAA;;;;;;IAIK,UAAU,GAAG,CAAC;;IAGd,WAAW,GAA8B,YAAY;;IAGtE,MAAM,GAAG,KAAK;IAGtB,sBAAsB,GAAA;QACpB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;AACtB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACjE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAC5B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC;AACvD,YAAA,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE;AAC7B,gBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;;iBAC/B;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;;YAErC,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC1C,gBAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;AAC5B,iBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACtB,gBAAA,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;;YAElC,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,gBAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC;;iBACtC;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC;;AAE9C,SAAC,CAAC;;;IAIJ,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AAC1C,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;;;;;;"}