@tessera-ui/core 0.4.1 → 0.5.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Watch, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part textarea - The native textarea element.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-textarea',\n  styleUrl: 'textarea.css',\n  shadow: true,\n})\nexport class TsTextarea {\n  @Element() hostEl!: HTMLElement;\n\n  private textareaEl?: HTMLTextAreaElement;\n  private inputId = generateId('ts-textarea');\n\n  /** The textarea's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Renders the textarea as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the textarea as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The textarea size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the textarea. */\n  @Prop() label?: string;\n\n  /** Help text displayed below the textarea. */\n  @Prop() helpText?: string;\n\n  /** Renders the textarea in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message displayed below the textarea. */\n  @Prop() errorMessage?: string;\n\n  /** Makes the textarea required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Number of visible text rows. */\n  @Prop() rows = 3;\n\n  /** Resize behavior. */\n  @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Whether the textarea is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted on every keystroke. */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the textarea gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the textarea loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.textareaEl) {\n      this.textareaEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the textarea. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.textareaEl?.focus();\n  }\n\n  /** Programmatically select the textarea text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.textareaEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLTextAreaElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\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\n    return (\n      <Host\n        class={{\n          'ts-textarea': true,\n          [`ts-textarea--${this.size}`]: true,\n          'ts-textarea--focused': this.hasFocus,\n          'ts-textarea--disabled': this.disabled,\n          'ts-textarea--error': this.error,\n        }}\n      >\n        {this.label && (\n          <label class=\"textarea__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"textarea__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'textarea__wrapper': true,\n            'textarea__wrapper--focused': this.hasFocus,\n            'textarea__wrapper--error': this.error,\n            'textarea__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <textarea\n            ref={(el) => (this.textareaEl = el)}\n            id={this.inputId}\n            class=\"textarea__native\"\n            part=\"textarea\"\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            name={this.name}\n            rows={this.rows}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n\n        {hasError && (\n          <div class=\"textarea__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"textarea__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,130 +0,0 @@
-// Hand-written stories for ts-textarea
-export default {
-    title: 'Components/Textarea',
-    tags: ['autodocs'],
-    argTypes: {
-        value: { control: 'text', description: 'The textarea value.' },
-        placeholder: { control: 'text', description: 'Placeholder text.' },
-        disabled: { control: 'boolean', description: 'Renders the textarea as disabled.' },
-        readonly: { control: 'boolean', description: 'Renders the textarea as readonly.' },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The textarea size.',
-        },
-        label: { control: 'text', description: 'Label text displayed above the textarea.' },
-        helpText: { control: 'text', description: 'Help text displayed below the textarea.' },
-        error: { control: 'boolean', description: 'Renders the textarea in an error state.' },
-        errorMessage: { control: 'text', description: 'Error message displayed below the textarea.' },
-        required: { control: 'boolean', description: 'Makes the textarea required.' },
-        rows: { control: 'number', description: 'Number of visible text rows.' },
-        resize: {
-            control: 'select',
-            options: ['none', 'vertical', 'horizontal', 'both'],
-            description: 'Resize behavior.',
-        },
-        maxlength: { control: 'number', description: 'Maximum character length.' },
-        name: { control: 'text', description: 'Name attribute for form submission.' },
-    },
-};
-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.readonly)
-        attrs.push('readonly');
-    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.rows !== undefined && args.rows !== null)
-        attrs.push(`rows="${args.rows}"`);
-    if (args.resize !== undefined && args.resize !== null)
-        attrs.push(`resize="${args.resize}"`);
-    if (args.maxlength !== undefined && args.maxlength !== null)
-        attrs.push(`maxlength="${args.maxlength}"`);
-    if (args.name !== undefined && args.name !== null)
-        attrs.push(`name="${args.name}"`);
-    return `<ts-textarea ${attrs.join(' ')}></ts-textarea>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        value: '',
-        placeholder: 'Enter additional notes...',
-        disabled: false,
-        readonly: false,
-        size: 'md',
-        label: 'Additional Notes',
-        helpText: 'Provide any relevant details or context.',
-        error: false,
-        errorMessage: '',
-        required: false,
-        rows: 3,
-        resize: 'vertical',
-        name: 'notes',
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
-    <ts-textarea size="sm" label="Small" placeholder="Small textarea..." rows="2"></ts-textarea>
-    <ts-textarea size="md" label="Medium" placeholder="Medium textarea..." rows="3"></ts-textarea>
-    <ts-textarea size="lg" label="Large" placeholder="Large textarea..." rows="4"></ts-textarea>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
-    <ts-textarea label="Default" placeholder="Type something..."></ts-textarea>
-    <ts-textarea label="With value" value="This textarea has pre-filled content that the user can edit."></ts-textarea>
-    <ts-textarea label="Disabled" disabled placeholder="Cannot edit this field" value="This content is locked."></ts-textarea>
-    <ts-textarea label="Readonly" readonly value="This content can be read but not modified."></ts-textarea>
-    <ts-textarea label="Required" required placeholder="This field is required" help-text="You must fill in this field."></ts-textarea>
-    <ts-textarea label="Error" error error-message="Description must be at least 20 characters." placeholder="Enter a description..."></ts-textarea>
-  </div>
-`;
-export const ResizeBehaviors = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
-    <ts-textarea label="Vertical resize (default)" resize="vertical" placeholder="Drag the bottom-right corner vertically..."></ts-textarea>
-    <ts-textarea label="Horizontal resize" resize="horizontal" placeholder="Drag horizontally..."></ts-textarea>
-    <ts-textarea label="Both directions" resize="both" placeholder="Drag in any direction..."></ts-textarea>
-    <ts-textarea label="No resize" resize="none" placeholder="This textarea cannot be resized."></ts-textarea>
-  </div>
-`;
-export const FeedbackForm = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
-    <h3 style="margin: 0; font-family: sans-serif;">Submit Feedback</h3>
-    <ts-textarea
-      label="Description"
-      placeholder="Describe the issue or suggestion in detail..."
-      required
-      rows="5"
-      maxlength="500"
-      help-text="Maximum 500 characters."
-      name="description"
-    ></ts-textarea>
-    <ts-textarea
-      label="Steps to Reproduce"
-      placeholder="1. Go to...  2. Click on...  3. Observe..."
-      rows="4"
-      name="steps"
-    ></ts-textarea>
-    <ts-textarea
-      label="Expected Behavior"
-      placeholder="What did you expect to happen?"
-      rows="2"
-      name="expected"
-    ></ts-textarea>
-  </div>
-`;
-//# sourceMappingURL=textarea.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-textarea\n\nexport default {\n  title: 'Components/Textarea',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The textarea value.' },\n    placeholder: { control: 'text', description: 'Placeholder text.' },\n    disabled: { control: 'boolean', description: 'Renders the textarea as disabled.' },\n    readonly: { control: 'boolean', description: 'Renders the textarea as readonly.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The textarea size.',\n    },\n    label: { control: 'text', description: 'Label text displayed above the textarea.' },\n    helpText: { control: 'text', description: 'Help text displayed below the textarea.' },\n    error: { control: 'boolean', description: 'Renders the textarea in an error state.' },\n    errorMessage: { control: 'text', description: 'Error message displayed below the textarea.' },\n    required: { control: 'boolean', description: 'Makes the textarea required.' },\n    rows: { control: 'number', description: 'Number of visible text rows.' },\n    resize: {\n      control: 'select',\n      options: ['none', 'vertical', 'horizontal', 'both'],\n      description: 'Resize behavior.',\n    },\n    maxlength: { control: 'number', description: 'Maximum character length.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\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.readonly) attrs.push('readonly');\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.rows !== undefined && args.rows !== null) attrs.push(`rows=\"${args.rows}\"`);\n  if (args.resize !== undefined && args.resize !== null) attrs.push(`resize=\"${args.resize}\"`);\n  if (args.maxlength !== undefined && args.maxlength !== null) attrs.push(`maxlength=\"${args.maxlength}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  return `<ts-textarea ${attrs.join(' ')}></ts-textarea>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: '',\n    placeholder: 'Enter additional notes...',\n    disabled: false,\n    readonly: false,\n    size: 'md',\n    label: 'Additional Notes',\n    helpText: 'Provide any relevant details or context.',\n    error: false,\n    errorMessage: '',\n    required: false,\n    rows: 3,\n    resize: 'vertical',\n    name: 'notes',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea size=\"sm\" label=\"Small\" placeholder=\"Small textarea...\" rows=\"2\"></ts-textarea>\n    <ts-textarea size=\"md\" label=\"Medium\" placeholder=\"Medium textarea...\" rows=\"3\"></ts-textarea>\n    <ts-textarea size=\"lg\" label=\"Large\" placeholder=\"Large textarea...\" rows=\"4\"></ts-textarea>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea label=\"Default\" placeholder=\"Type something...\"></ts-textarea>\n    <ts-textarea label=\"With value\" value=\"This textarea has pre-filled content that the user can edit.\"></ts-textarea>\n    <ts-textarea label=\"Disabled\" disabled placeholder=\"Cannot edit this field\" value=\"This content is locked.\"></ts-textarea>\n    <ts-textarea label=\"Readonly\" readonly value=\"This content can be read but not modified.\"></ts-textarea>\n    <ts-textarea label=\"Required\" required placeholder=\"This field is required\" help-text=\"You must fill in this field.\"></ts-textarea>\n    <ts-textarea label=\"Error\" error error-message=\"Description must be at least 20 characters.\" placeholder=\"Enter a description...\"></ts-textarea>\n  </div>\n`;\n\nexport const ResizeBehaviors = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea label=\"Vertical resize (default)\" resize=\"vertical\" placeholder=\"Drag the bottom-right corner vertically...\"></ts-textarea>\n    <ts-textarea label=\"Horizontal resize\" resize=\"horizontal\" placeholder=\"Drag horizontally...\"></ts-textarea>\n    <ts-textarea label=\"Both directions\" resize=\"both\" placeholder=\"Drag in any direction...\"></ts-textarea>\n    <ts-textarea label=\"No resize\" resize=\"none\" placeholder=\"This textarea cannot be resized.\"></ts-textarea>\n  </div>\n`;\n\nexport const FeedbackForm = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Submit Feedback</h3>\n    <ts-textarea\n      label=\"Description\"\n      placeholder=\"Describe the issue or suggestion in detail...\"\n      required\n      rows=\"5\"\n      maxlength=\"500\"\n      help-text=\"Maximum 500 characters.\"\n      name=\"description\"\n    ></ts-textarea>\n    <ts-textarea\n      label=\"Steps to Reproduce\"\n      placeholder=\"1. Go to...  2. Click on...  3. Observe...\"\n      rows=\"4\"\n      name=\"steps\"\n    ></ts-textarea>\n    <ts-textarea\n      label=\"Expected Behavior\"\n      placeholder=\"What did you expect to happen?\"\n      rows=\"2\"\n      name=\"expected\"\n    ></ts-textarea>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\ntype TsToastVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\ntype TsToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - Optional action button.\n *\n * @part base - The toast container.\n * @part icon - The variant icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class TsToast {\n  private autoCloseTimer?: ReturnType<typeof setTimeout>;\n\n  /** The toast's visual variant. */\n  @Prop({ reflect: true }) variant: TsToastVariant = 'info';\n\n  /** Auto-dismiss duration in ms. Set 0 to disable. */\n  @Prop() duration = 5000;\n\n  /** Whether the toast shows a close button. */\n  @Prop() dismissible = true;\n\n  /** Whether the toast is visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Position of the toast on screen. */\n  @Prop({ reflect: true }) position: TsToastPosition = 'top-right';\n\n  /** Emitted when the toast is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    if (newValue) {\n      this.isVisible = true;\n      this.startAutoClose();\n    } else {\n      this.isVisible = false;\n      this.clearAutoClose();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.startAutoClose();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.clearAutoClose();\n  }\n\n  /** Programmatically close the toast. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n    this.isVisible = false;\n    this.clearAutoClose();\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the toast. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  private startAutoClose(): void {\n    this.clearAutoClose();\n    if (this.duration > 0) {\n      this.autoCloseTimer = setTimeout(() => {\n        this.close();\n      }, this.duration);\n    }\n  }\n\n  private clearAutoClose(): void {\n    if (this.autoCloseTimer) {\n      clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = undefined;\n    }\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      neutral: '\\u2139',\n    };\n    return <span class=\"toast__icon-symbol\" aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-toast': true,\n          [`ts-toast--${this.variant}`]: true,\n          [`ts-toast--${this.position}`]: true,\n          'ts-toast--open': this.isVisible,\n        }}\n        role=\"status\"\n        aria-live={ariaLive}\n      >\n        <div class=\"toast__base\" part=\"base\">\n          <div class=\"toast__icon\" part=\"icon\">\n            {this.renderIcon()}\n          </div>\n\n          <div class=\"toast__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"toast__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"toast__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,91 +0,0 @@
-// Hand-written stories for ts-toast
-export default {
-    title: 'Components/Toast',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['info', 'success', 'warning', 'danger', 'neutral'],
-            description: 'The toast\'s visual variant.',
-        },
-        duration: {
-            control: 'number',
-            description: 'Auto-dismiss duration in ms. Set 0 to disable.',
-        },
-        dismissible: {
-            control: 'boolean',
-            description: 'Whether the toast shows a close button.',
-        },
-        open: {
-            control: 'boolean',
-            description: 'Whether the toast is visible.',
-        },
-        position: {
-            control: 'select',
-            options: ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'],
-            description: 'Position of the toast on screen.',
-        },
-        slotContent: {
-            control: 'text',
-            description: 'Default slot content',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.duration !== undefined)
-        attrs.push(`duration="${args.duration}"`);
-    if (args.dismissible !== undefined && args.dismissible)
-        attrs.push('dismissible');
-    if (args.open)
-        attrs.push('open');
-    if (args.position !== undefined)
-        attrs.push(`position="${args.position}"`);
-    return `<ts-toast ${attrs.join(' ')}>${args.slotContent || ''}</ts-toast>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'success',
-        duration: 0,
-        dismissible: true,
-        open: true,
-        position: 'top-right',
-        slotContent: 'Changes saved successfully',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 300px;">
-    <ts-toast variant="success" open duration="0" style="position: relative;">Changes saved successfully</ts-toast>
-    <ts-toast variant="danger" open duration="0" style="position: relative;">Error: Connection failed</ts-toast>
-    <ts-toast variant="warning" open duration="0" style="position: relative;">Your session will expire in 5 minutes</ts-toast>
-    <ts-toast variant="info" open duration="0" style="position: relative;">A new version is available</ts-toast>
-    <ts-toast variant="neutral" open duration="0" style="position: relative;">3 items were moved to archive</ts-toast>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px; position: relative;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dismissible</p>
-      <ts-toast variant="info" open duration="0" dismissible style="position: relative;">Click the X to dismiss this toast</ts-toast>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Not dismissible</p>
-      <ts-toast variant="warning" open duration="0" style="position: relative;">This toast cannot be manually dismissed</ts-toast>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px; position: relative;">
-    <ts-toast variant="success" open duration="0" dismissible style="position: relative;">
-      Your profile has been updated
-      <ts-button slot="action" size="sm" variant="success" appearance="ghost">Undo</ts-button>
-    </ts-toast>
-    <ts-toast variant="danger" open duration="0" dismissible style="position: relative;">
-      Failed to upload file. Please try again.
-      <ts-button slot="action" size="sm" variant="danger" appearance="ghost">Retry</ts-button>
-    </ts-toast>
-  </div>
-`;
-//# sourceMappingURL=toast.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YAC5D,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gDAAgD;SAC9D;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,CAAC;YAChG,WAAW,EAAE,kCAAkC;SAChD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;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,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC3E,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClF,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC3E,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,aAAa,CAAC;AAC7E,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,SAAS;QAClB,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,4BAA4B;KAC1C;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWxC,CAAC","sourcesContent":["// Hand-written stories for ts-toast\n\nexport default {\n  title: 'Components/Toast',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['info', 'success', 'warning', 'danger', 'neutral'],\n      description: 'The toast\\'s visual variant.',\n    },\n    duration: {\n      control: 'number',\n      description: 'Auto-dismiss duration in ms. Set 0 to disable.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the toast shows a close button.',\n    },\n    open: {\n      control: 'boolean',\n      description: 'Whether the toast is visible.',\n    },\n    position: {\n      control: 'select',\n      options: ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'],\n      description: 'Position of the toast on screen.',\n    },\n    slotContent: {\n      control: 'text',\n      description: 'Default slot content',\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.duration !== undefined) attrs.push(`duration=\"${args.duration}\"`);\n  if (args.dismissible !== undefined && args.dismissible) attrs.push('dismissible');\n  if (args.open) attrs.push('open');\n  if (args.position !== undefined) attrs.push(`position=\"${args.position}\"`);\n  return `<ts-toast ${attrs.join(' ')}>${args.slotContent || ''}</ts-toast>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'success',\n    duration: 0,\n    dismissible: true,\n    open: true,\n    position: 'top-right',\n    slotContent: 'Changes saved successfully',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 300px;\">\n    <ts-toast variant=\"success\" open duration=\"0\" style=\"position: relative;\">Changes saved successfully</ts-toast>\n    <ts-toast variant=\"danger\" open duration=\"0\" style=\"position: relative;\">Error: Connection failed</ts-toast>\n    <ts-toast variant=\"warning\" open duration=\"0\" style=\"position: relative;\">Your session will expire in 5 minutes</ts-toast>\n    <ts-toast variant=\"info\" open duration=\"0\" style=\"position: relative;\">A new version is available</ts-toast>\n    <ts-toast variant=\"neutral\" open duration=\"0\" style=\"position: relative;\">3 items were moved to archive</ts-toast>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dismissible</p>\n      <ts-toast variant=\"info\" open duration=\"0\" dismissible style=\"position: relative;\">Click the X to dismiss this toast</ts-toast>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Not dismissible</p>\n      <ts-toast variant=\"warning\" open duration=\"0\" style=\"position: relative;\">This toast cannot be manually dismissed</ts-toast>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative;\">\n    <ts-toast variant=\"success\" open duration=\"0\" dismissible style=\"position: relative;\">\n      Your profile has been updated\n      <ts-button slot=\"action\" size=\"sm\" variant=\"success\" appearance=\"ghost\">Undo</ts-button>\n    </ts-toast>\n    <ts-toast variant=\"danger\" open duration=\"0\" dismissible style=\"position: relative;\">\n      Failed to upload file. Please try again.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"danger\" appearance=\"ghost\">Retry</ts-button>\n    </ts-toast>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;IACR,MAAM,CAAe;IAExB,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,qCAAqC;IACG,OAAO,GAAG,KAAK,CAAC;IAExD,yBAAyB;IACA,IAAI,GAAW,IAAI,CAAC;IAE7C,sCAAsC;IACb,QAAQ,GAAG,KAAK,CAAC;IAE1C,gCAAgC;IACxB,IAAI,CAAU;IAEtB,iCAAiC;IACzB,KAAK,CAAU;IAEvB,6CAA6C;IACX,QAAQ,CAAqC;IAE/E,iDAAiD;IAEjD,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC;YAED,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO;oBACrC,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAG,CACtC;gBAEN,8DAAO,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,QAAQ;oBACnE,8DAAQ,CACF,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsToggleEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the toggle label.\n *\n * @part base - The toggle container.\n * @part track - The toggle track.\n * @part thumb - The toggle thumb/knob.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class TsToggle {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-toggle');\n\n  /** Whether the toggle is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The toggle's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the toggle as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Name for form submission. */\n  @Prop() name?: string;\n\n  /** Value for form submission. */\n  @Prop() value?: string;\n\n  /** Emitted when the toggle state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsToggleEventDetail>;\n\n  /** Programmatically toggle the checked state. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toggle': true,\n          [`ts-toggle--${this.size}`]: true,\n          'ts-toggle--checked': this.checked,\n          'ts-toggle--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"toggle__base\"\n          part=\"base\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"toggle__track\" part=\"track\">\n            <div class=\"toggle__thumb\" part=\"thumb\" />\n          </div>\n\n          <label class=\"toggle__label\" part=\"label\" id={`${this.inputId}-label`}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,145 +0,0 @@
-// Hand-written stories for ts-toggle
-export default {
-    title: 'Components/Toggle',
-    tags: ['autodocs'],
-    argTypes: {
-        checked: { control: 'boolean', description: 'Whether the toggle is checked.' },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'The toggle\'s size.',
-        },
-        disabled: { control: 'boolean', description: 'Renders the toggle as disabled.' },
-        name: { control: 'text', description: 'Name for form submission.' },
-        value: { control: 'text', description: 'Value for form submission.' },
-        slotContent: { control: 'text', description: 'Toggle label text' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.checked)
-        attrs.push('checked');
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.name !== undefined && args.name !== null && args.name !== '')
-        attrs.push(`name="${args.name}"`);
-    if (args.value !== undefined && args.value !== null && args.value !== '')
-        attrs.push(`value="${args.value}"`);
-    return `<ts-toggle ${attrs.join(' ')}>${args.slotContent || ''}</ts-toggle>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        checked: false,
-        size: 'md',
-        disabled: false,
-        slotContent: 'Enable notifications',
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <ts-toggle size="xs">Extra Small</ts-toggle>
-    <ts-toggle size="sm">Small</ts-toggle>
-    <ts-toggle size="md">Medium</ts-toggle>
-    <ts-toggle size="lg">Large</ts-toggle>
-    <ts-toggle size="xl">Extra Large</ts-toggle>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <ts-toggle>Unchecked</ts-toggle>
-    <ts-toggle checked>Checked</ts-toggle>
-    <ts-toggle disabled>Disabled (unchecked)</ts-toggle>
-    <ts-toggle disabled checked>Disabled (checked)</ts-toggle>
-  </div>
-`;
-export const WithIcons = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-    <div style="display: flex; align-items: center; gap: 12px;">
-      <ts-icon name="moon" size="sm"></ts-icon>
-      <ts-toggle checked>Dark Mode</ts-toggle>
-    </div>
-    <div style="display: flex; align-items: center; gap: 12px;">
-      <ts-icon name="wifi" size="sm"></ts-icon>
-      <ts-toggle checked>Wi-Fi</ts-toggle>
-    </div>
-    <div style="display: flex; align-items: center; gap: 12px;">
-      <ts-icon name="bluetooth" size="sm"></ts-icon>
-      <ts-toggle>Bluetooth</ts-toggle>
-    </div>
-    <div style="display: flex; align-items: center; gap: 12px;">
-      <ts-icon name="map-pin" size="sm"></ts-icon>
-      <ts-toggle>Location Services</ts-toggle>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
-    <ts-card bordered padding="lg">
-      <span slot="header"><h3 style="margin: 0;">Notification Preferences</h3></span>
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
-          <div>
-            <div style="font-weight: 600;">Email Notifications</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Receive updates about your account via email.</div>
-          </div>
-          <ts-toggle checked></ts-toggle>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
-          <div>
-            <div style="font-weight: 600;">Push Notifications</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Get real-time alerts on your device.</div>
-          </div>
-          <ts-toggle checked></ts-toggle>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
-          <div>
-            <div style="font-weight: 600;">SMS Alerts</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Critical alerts sent to your phone number.</div>
-          </div>
-          <ts-toggle></ts-toggle>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Marketing Emails</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Receive tips, product updates, and promotions.</div>
-          </div>
-          <ts-toggle></ts-toggle>
-        </div>
-      </div>
-      <span slot="footer">
-        <div style="display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;">
-          <ts-button appearance="outline" variant="neutral">Reset to Defaults</ts-button>
-          <ts-button variant="primary">Save Preferences</ts-button>
-        </div>
-      </span>
-    </ts-card>
-
-    <ts-card bordered padding="lg">
-      <span slot="header">
-        <div style="display: flex; align-items: center; gap: 8px;">
-          <ts-icon name="shield" size="sm"></ts-icon>
-          <h3 style="margin: 0;">Privacy & Security</h3>
-        </div>
-      </span>
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Two-Factor Authentication</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Add an extra layer of security to your account.</div>
-          </div>
-          <ts-toggle checked></ts-toggle>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Activity Log</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Track all login sessions and API usage.</div>
-          </div>
-          <ts-toggle checked></ts-toggle>
-        </div>
-      </div>
-    </ts-card>
-  </div>
-`;
-//# sourceMappingURL=toggle.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gCAAgC,EAAE;QAC9E,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,qBAAqB;SACnC;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iCAAiC,EAAE;QAChF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACnE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,4BAA4B,EAAE;QACrE,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE;KACnE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACzG,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC9G,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,cAAc,CAAC;AAC/E,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,KAAK;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmExC,CAAC","sourcesContent":["// Hand-written stories for ts-toggle\n\nexport default {\n  title: 'Components/Toggle',\n  tags: ['autodocs'],\n  argTypes: {\n    checked: { control: 'boolean', description: 'Whether the toggle is checked.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The toggle\\'s size.',\n    },\n    disabled: { control: 'boolean', description: 'Renders the toggle as disabled.' },\n    name: { control: 'text', description: 'Name for form submission.' },\n    value: { control: 'text', description: 'Value for form submission.' },\n    slotContent: { control: 'text', description: 'Toggle label text' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.checked) attrs.push('checked');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.name !== undefined && args.name !== null && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  return `<ts-toggle ${attrs.join(' ')}>${args.slotContent || ''}</ts-toggle>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    checked: false,\n    size: 'md',\n    disabled: false,\n    slotContent: 'Enable notifications',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <ts-toggle size=\"xs\">Extra Small</ts-toggle>\n    <ts-toggle size=\"sm\">Small</ts-toggle>\n    <ts-toggle size=\"md\">Medium</ts-toggle>\n    <ts-toggle size=\"lg\">Large</ts-toggle>\n    <ts-toggle size=\"xl\">Extra Large</ts-toggle>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <ts-toggle>Unchecked</ts-toggle>\n    <ts-toggle checked>Checked</ts-toggle>\n    <ts-toggle disabled>Disabled (unchecked)</ts-toggle>\n    <ts-toggle disabled checked>Disabled (checked)</ts-toggle>\n  </div>\n`;\n\nexport const WithIcons = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 400px;\">\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"moon\" size=\"sm\"></ts-icon>\n      <ts-toggle checked>Dark Mode</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"wifi\" size=\"sm\"></ts-icon>\n      <ts-toggle checked>Wi-Fi</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"bluetooth\" size=\"sm\"></ts-icon>\n      <ts-toggle>Bluetooth</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"map-pin\" size=\"sm\"></ts-icon>\n      <ts-toggle>Location Services</ts-toggle>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 500px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Notification Preferences</h3></span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">Email Notifications</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Receive updates about your account via email.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">Push Notifications</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Get real-time alerts on your device.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">SMS Alerts</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Critical alerts sent to your phone number.</div>\n          </div>\n          <ts-toggle></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Marketing Emails</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Receive tips, product updates, and promotions.</div>\n          </div>\n          <ts-toggle></ts-toggle>\n        </div>\n      </div>\n      <span slot=\"footer\">\n        <div style=\"display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Reset to Defaults</ts-button>\n          <ts-button variant=\"primary\">Save Preferences</ts-button>\n        </div>\n      </span>\n    </ts-card>\n\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\">\n        <div style=\"display: flex; align-items: center; gap: 8px;\">\n          <ts-icon name=\"shield\" size=\"sm\"></ts-icon>\n          <h3 style=\"margin: 0;\">Privacy & Security</h3>\n        </div>\n      </span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Two-Factor Authentication</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Add an extra layer of security to your account.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Activity Log</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Track all login sessions and API usage.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n      </div>\n    </ts-card>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;GASG;AAMH,MAAM,OAAO,SAAS;IACpB,iCAAiC;IACR,OAAO,GAAwC,SAAS,CAAC;IAElF,wBAAwB;IACC,IAAI,GAAW,IAAI,CAAC;IAE7C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACrC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACnC,EACD,IAAI,EAAC,SAAS,sBACG,YAAY;YAE7B,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;gBACpC,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBAEN,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ;oBACxC,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK;oBAClC,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for toolbar items (center).\n * @slot start - Left/start-aligned items.\n * @slot end - Right/end-aligned items.\n *\n * @part base - The toolbar container.\n * @part start - The start slot wrapper.\n * @part center - The center/default slot wrapper.\n * @part end - The end slot wrapper.\n */\n@Component({\n  tag: 'ts-toolbar',\n  styleUrl: 'toolbar.css',\n  shadow: true,\n})\nexport class TsToolbar {\n  /** The toolbar variant style. */\n  @Prop({ reflect: true }) variant: 'default' | 'bordered' | 'elevated' = 'default';\n\n  /** The toolbar size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toolbar': true,\n          [`ts-toolbar--${this.variant}`]: true,\n          [`ts-toolbar--${this.size}`]: true,\n        }}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        <div class=\"toolbar__base\" part=\"base\">\n          <div class=\"toolbar__start\" part=\"start\">\n            <slot name=\"start\" />\n          </div>\n\n          <div class=\"toolbar__center\" part=\"center\">\n            <slot />\n          </div>\n\n          <div class=\"toolbar__end\" part=\"end\">\n            <slot name=\"end\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}