@tessera-ui/core 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for `ts-tab-panel` children.\n *\n * @part tablist - The tab button container.\n * @part tab - Each individual tab button.\n * @part tab-active - The currently active tab button.\n * @part panels - The panel container.\n */\n@Component({\n  tag: 'ts-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class TsTabs {\n  @Element() hostEl!: HTMLElement;\n\n  /** The value of the currently active tab. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Visual variant of the tab bar. */\n  @Prop({ reflect: true }) variant: 'line' | 'enclosed' | 'pill' = 'line';\n\n  /** The size of the tab buttons. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the active tab changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  @Watch('value')\n  handleValueChange(): void {\n    this.updatePanelVisibility();\n  }\n\n  componentDidLoad(): void {\n    // Default to first non-disabled tab if no value set\n    if (!this.value) {\n      const panels = this.getPanels();\n      const firstEnabled = panels.find((p) => !p.hasAttribute('disabled'));\n      if (firstEnabled) {\n        this.value = firstEnabled.getAttribute('value') || '';\n      }\n    }\n    this.updatePanelVisibility();\n  }\n\n  private getPanels(): Element[] {\n    return Array.from(this.hostEl.querySelectorAll('ts-tab-panel'));\n  }\n\n  private getTabData(): Array<{ tab: string; value: string; disabled: boolean; icon?: string }> {\n    return this.getPanels().map((panel) => ({\n      tab: panel.getAttribute('tab') || '',\n      value: panel.getAttribute('value') || '',\n      disabled: panel.hasAttribute('disabled'),\n      icon: panel.getAttribute('icon') || undefined,\n    }));\n  }\n\n  private updatePanelVisibility(): void {\n    this.getPanels().forEach((panel) => {\n      const isActive = panel.getAttribute('value') === this.value;\n      (panel as HTMLElement).style.display = isActive ? '' : 'none';\n    });\n  }\n\n  private handleTabClick(tabValue: string, disabled: boolean): void {\n    if (disabled || tabValue === this.value) return;\n    this.value = tabValue;\n    this.tsChange.emit({ value: tabValue });\n    this.updatePanelVisibility();\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    const tabs = this.getTabData();\n    const enabledTabs = tabs.filter((t) => !t.disabled);\n    const currentIndex = enabledTabs.findIndex((t) => t.value === this.value);\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % enabledTabs.length;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = enabledTabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const newTab = enabledTabs[newIndex];\n    if (newTab) {\n      this.value = newTab.value;\n      this.tsChange.emit({ value: newTab.value });\n      this.updatePanelVisibility();\n\n      // Focus the new tab button\n      const tabButtons = this.hostEl.shadowRoot?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n      const allTabIndex = tabs.findIndex((t) => t.value === newTab.value);\n      tabButtons?.[allTabIndex]?.focus();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const tabs = this.getTabData();\n\n    return (\n      <Host\n        class={{\n          'ts-tabs': true,\n          [`ts-tabs--${this.variant}`]: true,\n          [`ts-tabs--${this.size}`]: true,\n        }}\n      >\n        <div class=\"tabs__tablist\" part=\"tablist\" role=\"tablist\" onKeyDown={this.handleKeydown}>\n          {tabs.map((t) => {\n            const isActive = t.value === this.value;\n            return (\n              <button\n                class={{\n                  'tabs__tab': true,\n                  'tabs__tab--active': isActive,\n                  'tabs__tab--disabled': t.disabled,\n                }}\n                part={isActive ? 'tab tab-active' : 'tab'}\n                role=\"tab\"\n                type=\"button\"\n                aria-selected={isActive ? 'true' : 'false'}\n                aria-disabled={t.disabled ? 'true' : undefined}\n                tabindex={isActive ? 0 : -1}\n                disabled={t.disabled}\n                onClick={() => this.handleTabClick(t.value, t.disabled)}\n              >\n                {t.icon && <ts-icon name={t.icon} class=\"tabs__tab-icon\" />}\n                {t.tab}\n              </button>\n            );\n          })}\n        </div>\n        <div class=\"tabs__panels\" part=\"panels\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,187 @@
+// Hand-written stories for ts-tabs
+export default {
+    title: 'Components/Tabs',
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'text', description: 'The value of the currently active tab.' },
+        variant: {
+            control: 'select',
+            options: ['line', 'enclosed', 'pill'],
+            description: 'Visual variant of the tab bar.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The size of the tab buttons.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined && args.value !== null && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    if (args.variant !== undefined && args.variant !== null)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    return `
+    <ts-tabs ${attrs.join(' ')}>
+      <ts-tab-panel tab="Profile" value="profile">
+        <div style="padding: 16px; font-family: sans-serif;">
+          <h4 style="margin: 0 0 8px;">Profile Information</h4>
+          <p style="margin: 0; color: #555;">Manage your name, email address, and personal details.</p>
+        </div>
+      </ts-tab-panel>
+      <ts-tab-panel tab="Settings" value="settings">
+        <div style="padding: 16px; font-family: sans-serif;">
+          <h4 style="margin: 0 0 8px;">Account Settings</h4>
+          <p style="margin: 0; color: #555;">Configure notifications, privacy, and security preferences.</p>
+        </div>
+      </ts-tab-panel>
+      <ts-tab-panel tab="Billing" value="billing">
+        <div style="padding: 16px; font-family: sans-serif;">
+          <h4 style="margin: 0 0 8px;">Billing &amp; Plans</h4>
+          <p style="margin: 0; color: #555;">View invoices, update payment methods, and manage your subscription.</p>
+        </div>
+      </ts-tab-panel>
+    </ts-tabs>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        value: 'profile',
+        variant: 'line',
+        size: 'md',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Line (default)</h4>
+      <ts-tabs variant="line" value="tab1">
+        <ts-tab-panel tab="Overview" value="tab1">
+          <div style="padding: 16px; font-family: sans-serif;">Overview content with line-style tabs.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="Details" value="tab2">
+          <div style="padding: 16px;">Details content.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="History" value="tab3">
+          <div style="padding: 16px;">History content.</div>
+        </ts-tab-panel>
+      </ts-tabs>
+    </div>
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Enclosed</h4>
+      <ts-tabs variant="enclosed" value="tab1">
+        <ts-tab-panel tab="Overview" value="tab1">
+          <div style="padding: 16px; font-family: sans-serif;">Overview content with enclosed-style tabs.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="Details" value="tab2">
+          <div style="padding: 16px;">Details content.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="History" value="tab3">
+          <div style="padding: 16px;">History content.</div>
+        </ts-tab-panel>
+      </ts-tabs>
+    </div>
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Pill</h4>
+      <ts-tabs variant="pill" value="tab1">
+        <ts-tab-panel tab="Overview" value="tab1">
+          <div style="padding: 16px; font-family: sans-serif;">Overview content with pill-style tabs.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="Details" value="tab2">
+          <div style="padding: 16px;">Details content.</div>
+        </ts-tab-panel>
+        <ts-tab-panel tab="History" value="tab3">
+          <div style="padding: 16px;">History content.</div>
+        </ts-tab-panel>
+      </ts-tabs>
+    </div>
+  </div>
+`;
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Small</h4>
+      <ts-tabs size="sm" value="tab1">
+        <ts-tab-panel tab="First" value="tab1"><div style="padding: 12px; font-family: sans-serif;">Small tabs content.</div></ts-tab-panel>
+        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 12px;">Second panel.</div></ts-tab-panel>
+      </ts-tabs>
+    </div>
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Medium</h4>
+      <ts-tabs size="md" value="tab1">
+        <ts-tab-panel tab="First" value="tab1"><div style="padding: 16px; font-family: sans-serif;">Medium tabs content.</div></ts-tab-panel>
+        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 16px;">Second panel.</div></ts-tab-panel>
+      </ts-tabs>
+    </div>
+    <div>
+      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Large</h4>
+      <ts-tabs size="lg" value="tab1">
+        <ts-tab-panel tab="First" value="tab1"><div style="padding: 20px; font-family: sans-serif;">Large tabs content.</div></ts-tab-panel>
+        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 20px;">Second panel.</div></ts-tab-panel>
+      </ts-tabs>
+    </div>
+  </div>
+`;
+export const WithDisabledTab = () => `
+  <ts-tabs value="profile">
+    <ts-tab-panel tab="Profile" value="profile">
+      <div style="padding: 16px; font-family: sans-serif;">
+        <p style="margin: 0;">Your profile is active and visible to other users.</p>
+      </div>
+    </ts-tab-panel>
+    <ts-tab-panel tab="Settings" value="settings">
+      <div style="padding: 16px; font-family: sans-serif;">
+        <p style="margin: 0;">Adjust your account preferences here.</p>
+      </div>
+    </ts-tab-panel>
+    <ts-tab-panel tab="Admin" value="admin" disabled>
+      <div style="padding: 16px; font-family: sans-serif;">
+        <p style="margin: 0;">Admin panel content (restricted).</p>
+      </div>
+    </ts-tab-panel>
+    <ts-tab-panel tab="Billing" value="billing">
+      <div style="padding: 16px; font-family: sans-serif;">
+        <p style="margin: 0;">Manage your subscription and payment methods.</p>
+      </div>
+    </ts-tab-panel>
+  </ts-tabs>
+`;
+export const DashboardExample = () => `
+  <ts-tabs variant="enclosed" value="analytics">
+    <ts-tab-panel tab="Analytics" value="analytics">
+      <div style="padding: 20px; font-family: sans-serif;">
+        <h4 style="margin: 0 0 12px;">Monthly Analytics</h4>
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+          <div style="padding: 16px; background: #f0f9ff; border-radius: 8px;">
+            <div style="font-size: 24px; font-weight: bold;">12,459</div>
+            <div style="color: #555; font-size: 14px;">Page Views</div>
+          </div>
+          <div style="padding: 16px; background: #f0fdf4; border-radius: 8px;">
+            <div style="font-size: 24px; font-weight: bold;">3,721</div>
+            <div style="color: #555; font-size: 14px;">Unique Visitors</div>
+          </div>
+          <div style="padding: 16px; background: #fefce8; border-radius: 8px;">
+            <div style="font-size: 24px; font-weight: bold;">2m 34s</div>
+            <div style="color: #555; font-size: 14px;">Avg. Session</div>
+          </div>
+        </div>
+      </div>
+    </ts-tab-panel>
+    <ts-tab-panel tab="Users" value="users">
+      <div style="padding: 20px; font-family: sans-serif;">
+        <h4 style="margin: 0 0 12px;">Active Users</h4>
+        <p style="margin: 0; color: #555;">User management and activity tracking.</p>
+      </div>
+    </ts-tab-panel>
+    <ts-tab-panel tab="Revenue" value="revenue">
+      <div style="padding: 20px; font-family: sans-serif;">
+        <h4 style="margin: 0 0 12px;">Revenue Overview</h4>
+        <p style="margin: 0; color: #555;">Track earnings, refunds, and projections.</p>
+      </div>
+    </ts-tab-panel>
+  </ts-tabs>
+`;
+//# sourceMappingURL=tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,wCAAwC,EAAE;QACjF,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC;YACrC,WAAW,EAAE,gCAAgC;SAC9C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,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,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,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,OAAO;eACM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;GAoB3B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBlC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuB5C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7C,CAAC","sourcesContent":["// Hand-written stories for ts-tabs\n\nexport default {\n  title: 'Components/Tabs',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The value of the currently active tab.' },\n    variant: {\n      control: 'select',\n      options: ['line', 'enclosed', 'pill'],\n      description: 'Visual variant of the tab bar.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the tab buttons.',\n    },\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.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  return `\n    <ts-tabs ${attrs.join(' ')}>\n      <ts-tab-panel tab=\"Profile\" value=\"profile\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Profile Information</h4>\n          <p style=\"margin: 0; color: #555;\">Manage your name, email address, and personal details.</p>\n        </div>\n      </ts-tab-panel>\n      <ts-tab-panel tab=\"Settings\" value=\"settings\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Account Settings</h4>\n          <p style=\"margin: 0; color: #555;\">Configure notifications, privacy, and security preferences.</p>\n        </div>\n      </ts-tab-panel>\n      <ts-tab-panel tab=\"Billing\" value=\"billing\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Billing &amp; Plans</h4>\n          <p style=\"margin: 0; color: #555;\">View invoices, update payment methods, and manage your subscription.</p>\n        </div>\n      </ts-tab-panel>\n    </ts-tabs>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: 'profile',\n    variant: 'line',\n    size: 'md',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Line (default)</h4>\n      <ts-tabs variant=\"line\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with line-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Enclosed</h4>\n      <ts-tabs variant=\"enclosed\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with enclosed-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Pill</h4>\n      <ts-tabs variant=\"pill\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with pill-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Small</h4>\n      <ts-tabs size=\"sm\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 12px; font-family: sans-serif;\">Small tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 12px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Medium</h4>\n      <ts-tabs size=\"md\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 16px; font-family: sans-serif;\">Medium tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 16px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Large</h4>\n      <ts-tabs size=\"lg\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 20px; font-family: sans-serif;\">Large tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 20px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n  </div>\n`;\n\nexport const WithDisabledTab = (): string => `\n  <ts-tabs value=\"profile\">\n    <ts-tab-panel tab=\"Profile\" value=\"profile\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Your profile is active and visible to other users.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Settings\" value=\"settings\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Adjust your account preferences here.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Admin\" value=\"admin\" disabled>\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Admin panel content (restricted).</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Billing\" value=\"billing\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Manage your subscription and payment methods.</p>\n      </div>\n    </ts-tab-panel>\n  </ts-tabs>\n`;\n\nexport const DashboardExample = (): string => `\n  <ts-tabs variant=\"enclosed\" value=\"analytics\">\n    <ts-tab-panel tab=\"Analytics\" value=\"analytics\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Monthly Analytics</h4>\n        <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;\">\n          <div style=\"padding: 16px; background: #f0f9ff; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">12,459</div>\n            <div style=\"color: #555; font-size: 14px;\">Page Views</div>\n          </div>\n          <div style=\"padding: 16px; background: #f0fdf4; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">3,721</div>\n            <div style=\"color: #555; font-size: 14px;\">Unique Visitors</div>\n          </div>\n          <div style=\"padding: 16px; background: #fefce8; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">2m 34s</div>\n            <div style=\"color: #555; font-size: 14px;\">Avg. Session</div>\n          </div>\n        </div>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Users\" value=\"users\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Active Users</h4>\n        <p style=\"margin: 0; color: #555;\">User management and activity tracking.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Revenue\" value=\"revenue\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Revenue Overview</h4>\n        <p style=\"margin: 0; color: #555;\">Track earnings, refunds, and projections.</p>\n      </div>\n    </ts-tab-panel>\n  </ts-tabs>\n`;\n"]}

package/dist/collection/components/textarea/textarea.css

@@ -0,0 +1,146 @@
+/* ==========================================================================
+   ts-textarea — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-textarea-bg              Textarea background
+     --ts-textarea-border-color    Default border color
+     --ts-textarea-radius          Border radius
+     --ts-textarea-focus-ring      Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-textarea-bg: var(--ts-color-bg-surface);
+  --ts-textarea-border-color: var(--ts-color-border-default);
+  --ts-textarea-radius: var(--ts-radius-md);
+  --ts-textarea-focus-ring: var(--ts-focus-ring);
+}
+
+/* ---- Label ---- */
+.textarea__label {
+  display: block;
+  margin-block-end: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+}
+
+.textarea__required {
+  color: var(--ts-color-danger-500);
+}
+
+/* ---- Wrapper ---- */
+.textarea__wrapper {
+  display: flex;
+  border: 2px solid var(--ts-textarea-border-color);
+  border-radius: var(--ts-textarea-radius);
+  background-color: var(--ts-textarea-bg);
+  transition:
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+  overflow: hidden;
+}
+
+.textarea__wrapper--focused {
+  border-color: var(--ts-color-primary-500);
+  box-shadow: var(--ts-textarea-focus-ring);
+}
+
+.textarea__wrapper--error {
+  border-color: var(--ts-color-danger-500);
+}
+
+.textarea__wrapper--error.textarea__wrapper--focused {
+  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);
+}
+
+.textarea__wrapper--disabled {
+  background-color: var(--ts-color-bg-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ---- Native Textarea ---- */
+.textarea__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  color: var(--ts-color-text-primary);
+  width: 100%;
+  min-width: 0;
+  line-height: var(--ts-line-height-normal);
+}
+
+.textarea__native::placeholder {
+  color: var(--ts-color-text-tertiary);
+}
+
+.textarea__native:disabled {
+  cursor: not-allowed;
+}
+
+/* ---- Resize ---- */
+:host([resize="none"]) .textarea__native {
+  resize: none;
+}
+
+:host([resize="vertical"]) .textarea__native {
+  resize: vertical;
+}
+
+:host([resize="horizontal"]) .textarea__native {
+  resize: horizontal;
+}
+
+:host([resize="both"]) .textarea__native {
+  resize: both;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .textarea__wrapper {
+  border-radius: var(--ts-radius-sm);
+}
+:host([size="sm"]) .textarea__native {
+  padding: var(--ts-spacing-1) var(--ts-spacing-2);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .textarea__native {
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .textarea__native {
+  padding: var(--ts-spacing-3) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-lg);
+}
+
+:host([size="xl"]) .textarea__wrapper {
+  border-radius: var(--ts-radius-lg);
+}
+:host([size="xl"]) .textarea__native {
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  font-size: var(--ts-font-size-xl);
+}
+
+/* ---- Help & Error Text ---- */
+.textarea__help,
+.textarea__error {
+  margin-block-start: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-xs);
+  line-height: var(--ts-line-height-normal);
+}
+
+.textarea__help {
+  color: var(--ts-color-text-tertiary);
+}
+
+.textarea__error {
+  color: var(--ts-color-danger-600);
+  font-weight: var(--ts-font-weight-medium);
+}