@tessera-ui/core 0.4.0

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,31 @@
+/* ==========================================================================
+   ts-accordion — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-accordion-border-color    Border color between items
+     --ts-accordion-header-bg       Header background color
+     --ts-accordion-radius          Border radius
+   ========================================================================== */
+
+:host {
+  display: block;
+
+  --ts-accordion-border-color: var(--ts-color-border-default);
+  --ts-accordion-header-bg: transparent;
+  --ts-accordion-radius: var(--ts-radius-lg);
+}
+
+::slotted(ts-accordion-item) {
+  border-block-end: 1px solid var(--ts-accordion-border-color);
+}
+
+::slotted(ts-accordion-item:first-child) {
+  border-start-start-radius: var(--ts-accordion-radius);
+  border-start-end-radius: var(--ts-accordion-radius);
+}
+
+::slotted(ts-accordion-item:last-child) {
+  border-end-start-radius: var(--ts-accordion-radius);
+  border-end-end-radius: var(--ts-accordion-radius);
+  border-block-end: none;
+}

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for ts-accordion-item children.
+ */
+export class TsAccordion {
+    hostEl;
+    /** Allow multiple items to be open simultaneously. */
+    multiple = false;
+    handleToggle(event) {
+        if (!this.multiple && event.detail.open) {
+            const target = event.target;
+            const items = this.hostEl.querySelectorAll('ts-accordion-item');
+            items.forEach((item) => {
+                if (item !== target) {
+                    item.setAttribute('open', 'false');
+                    item.removeAttribute('open');
+                }
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '737635093f0c31076c08a6fb2a88804604b1b77e', class: "ts-accordion" }, h("slot", { key: '9daa06ca9dd44478594e686792da9529637f69a3' })));
+    }
+    static get is() { return "ts-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple items to be open simultaneously."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "tsToggle",
+                "method": "handleToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1E;;GAEG;AAMH,MAAM,OAAO,WAAW;IACX,MAAM,CAAe;IAEhC,sDAAsD;IAC9C,QAAQ,GAAG,KAAK,CAAC;IAGzB,YAAY,CAAC,KAAqC;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACxC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;YAChE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;oBACnC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC/B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc;YACxB,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-accordion-item children.\n */\n@Component({\n  tag: 'ts-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class TsAccordion {\n  @Element() hostEl!: HTMLElement;\n\n  /** Allow multiple items to be open simultaneously. */\n  @Prop() multiple = false;\n\n  @Listen('tsToggle')\n  handleToggle(event: CustomEvent<{ open: boolean }>): void {\n    if (!this.multiple && event.detail.open) {\n      const target = event.target as HTMLElement;\n      const items = this.hostEl.querySelectorAll('ts-accordion-item');\n      items.forEach((item) => {\n        if (item !== target) {\n          item.setAttribute('open', 'false');\n          item.removeAttribute('open');\n        }\n      });\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host class=\"ts-accordion\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+// Hand-written stories for ts-accordion
+export default {
+    title: 'Components/Accordion',
+    tags: ['autodocs'],
+    argTypes: {
+        multiple: {
+            control: 'boolean',
+            description: 'Allow multiple items to be open simultaneously.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.multiple)
+        attrs.push('multiple');
+    return `
+    <ts-accordion ${attrs.join(' ')}>
+      <ts-accordion-item heading="What is your return policy?">
+        You can return any item within 30 days of purchase for a full refund.
+        Items must be in their original packaging and in unused condition.
+      </ts-accordion-item>
+      <ts-accordion-item heading="How do I track my order?">
+        Once your order ships, you will receive a confirmation email with a tracking
+        number. You can also check your order status in your account dashboard.
+      </ts-accordion-item>
+      <ts-accordion-item heading="Do you ship internationally?">
+        Yes, we ship to over 50 countries worldwide. International shipping rates
+        and delivery times vary by destination.
+      </ts-accordion-item>
+    </ts-accordion>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        multiple: false,
+    },
+});
+export const MultipleOpen = () => `
+  <ts-accordion multiple>
+    <ts-accordion-item heading="What is your return policy?" open>
+      You can return any item within 30 days of purchase for a full refund.
+      Items must be in their original packaging and in unused condition.
+    </ts-accordion-item>
+    <ts-accordion-item heading="How do I track my order?" open>
+      Once your order ships, you will receive a confirmation email with a tracking
+      number. You can also check your order status in your account dashboard.
+    </ts-accordion-item>
+    <ts-accordion-item heading="Do you ship internationally?">
+      Yes, we ship to over 50 countries worldwide. International shipping rates
+      and delivery times vary by destination.
+    </ts-accordion-item>
+  </ts-accordion>
+`;
+export const States = () => `
+  <ts-accordion>
+    <ts-accordion-item heading="Open by default" open>
+      This item is expanded when the page loads.
+    </ts-accordion-item>
+    <ts-accordion-item heading="Closed item">
+      Click the header to reveal this content.
+    </ts-accordion-item>
+    <ts-accordion-item heading="Disabled item" disabled>
+      This item cannot be toggled.
+    </ts-accordion-item>
+  </ts-accordion>
+`;
+export const Composition = () => `
+  <div style="max-width: 600px;">
+    <h3 style="margin-bottom: 16px; font-family: sans-serif;">Frequently Asked Questions</h3>
+    <ts-accordion>
+      <ts-accordion-item heading="How do I create an account?">
+        Click the "Sign Up" button in the top right corner of the page. Fill in your
+        email address, create a password, and follow the verification steps.
+      </ts-accordion-item>
+      <ts-accordion-item heading="Can I change my subscription plan?">
+        Yes, you can upgrade or downgrade your plan at any time from your account
+        settings. Changes take effect at the start of your next billing cycle.
+      </ts-accordion-item>
+      <ts-accordion-item heading="What payment methods do you accept?">
+        We accept all major credit cards (Visa, Mastercard, American Express),
+        PayPal, and bank transfers for annual plans.
+      </ts-accordion-item>
+      <ts-accordion-item heading="How do I cancel my subscription?">
+        Navigate to Account Settings > Subscription and click "Cancel Plan."
+        You will retain access until the end of your current billing period.
+      </ts-accordion-item>
+    </ts-accordion>
+  </div>
+`;
+//# sourceMappingURL=accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,iDAAiD;SAC/D;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,OAAO;oBACW,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;GAchC,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,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAezC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAYnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC","sourcesContent":["// Hand-written stories for ts-accordion\n\nexport default {\n  title: 'Components/Accordion',\n  tags: ['autodocs'],\n  argTypes: {\n    multiple: {\n      control: 'boolean',\n      description: 'Allow multiple items to be open simultaneously.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.multiple) attrs.push('multiple');\n  return `\n    <ts-accordion ${attrs.join(' ')}>\n      <ts-accordion-item heading=\"What is your return policy?\">\n        You can return any item within 30 days of purchase for a full refund.\n        Items must be in their original packaging and in unused condition.\n      </ts-accordion-item>\n      <ts-accordion-item heading=\"How do I track my order?\">\n        Once your order ships, you will receive a confirmation email with a tracking\n        number. You can also check your order status in your account dashboard.\n      </ts-accordion-item>\n      <ts-accordion-item heading=\"Do you ship internationally?\">\n        Yes, we ship to over 50 countries worldwide. International shipping rates\n        and delivery times vary by destination.\n      </ts-accordion-item>\n    </ts-accordion>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    multiple: false,\n  },\n});\n\nexport const MultipleOpen = (): string => `\n  <ts-accordion multiple>\n    <ts-accordion-item heading=\"What is your return policy?\" open>\n      You can return any item within 30 days of purchase for a full refund.\n      Items must be in their original packaging and in unused condition.\n    </ts-accordion-item>\n    <ts-accordion-item heading=\"How do I track my order?\" open>\n      Once your order ships, you will receive a confirmation email with a tracking\n      number. You can also check your order status in your account dashboard.\n    </ts-accordion-item>\n    <ts-accordion-item heading=\"Do you ship internationally?\">\n      Yes, we ship to over 50 countries worldwide. International shipping rates\n      and delivery times vary by destination.\n    </ts-accordion-item>\n  </ts-accordion>\n`;\n\nexport const States = (): string => `\n  <ts-accordion>\n    <ts-accordion-item heading=\"Open by default\" open>\n      This item is expanded when the page loads.\n    </ts-accordion-item>\n    <ts-accordion-item heading=\"Closed item\">\n      Click the header to reveal this content.\n    </ts-accordion-item>\n    <ts-accordion-item heading=\"Disabled item\" disabled>\n      This item cannot be toggled.\n    </ts-accordion-item>\n  </ts-accordion>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 600px;\">\n    <h3 style=\"margin-bottom: 16px; font-family: sans-serif;\">Frequently Asked Questions</h3>\n    <ts-accordion>\n      <ts-accordion-item heading=\"How do I create an account?\">\n        Click the \"Sign Up\" button in the top right corner of the page. Fill in your\n        email address, create a password, and follow the verification steps.\n      </ts-accordion-item>\n      <ts-accordion-item heading=\"Can I change my subscription plan?\">\n        Yes, you can upgrade or downgrade your plan at any time from your account\n        settings. Changes take effect at the start of your next billing cycle.\n      </ts-accordion-item>\n      <ts-accordion-item heading=\"What payment methods do you accept?\">\n        We accept all major credit cards (Visa, Mastercard, American Express),\n        PayPal, and bank transfers for annual plans.\n      </ts-accordion-item>\n      <ts-accordion-item heading=\"How do I cancel my subscription?\">\n        Navigate to Account Settings > Subscription and click \"Cancel Plan.\"\n        You will retain access until the end of your current billing period.\n      </ts-accordion-item>\n    </ts-accordion>\n  </div>\n`;\n"]}

package/dist/collection/components/alert/alert.css

@@ -0,0 +1,118 @@
+/* ==========================================================================
+   ts-alert — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-alert-radius      Border radius
+     --ts-alert-font-size   Message font size
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-alert-radius: var(--ts-radius-lg);
+  --ts-alert-font-size: var(--ts-font-size-sm);
+}
+
+.alert__base {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ts-spacing-3);
+  padding: var(--ts-spacing-4) var(--ts-spacing-4);
+  border-radius: var(--ts-alert-radius);
+  border: 1px solid transparent;
+  border-inline-start: 3px solid transparent;
+  font-size: var(--ts-alert-font-size);
+  line-height: var(--ts-line-height-normal);
+}
+
+/* ---- Variants ---- */
+:host([variant="info"]) .alert__base {
+  background-color: var(--ts-color-info-bg);
+  border-color: var(--ts-color-info-border);
+  border-inline-start-color: var(--ts-color-info-500);
+  color: var(--ts-color-info-600);
+}
+
+:host([variant="success"]) .alert__base {
+  background-color: var(--ts-color-success-bg);
+  border-color: var(--ts-color-success-border);
+  border-inline-start-color: var(--ts-color-success-500);
+  color: var(--ts-color-success-600);
+}
+
+:host([variant="warning"]) .alert__base {
+  background-color: var(--ts-color-warning-bg);
+  border-color: var(--ts-color-warning-border);
+  border-inline-start-color: var(--ts-color-warning-500);
+  color: var(--ts-color-warning-600);
+}
+
+:host([variant="danger"]) .alert__base {
+  background-color: var(--ts-color-danger-bg);
+  border-color: var(--ts-color-danger-border);
+  border-inline-start-color: var(--ts-color-danger-500);
+  color: var(--ts-color-danger-600);
+}
+
+:host([variant="neutral"]) .alert__base {
+  background-color: var(--ts-color-bg-subtle);
+  border-color: var(--ts-color-border-subtle);
+  border-inline-start-color: var(--ts-color-neutral-400);
+  color: var(--ts-color-text-secondary);
+}
+
+/* ---- Icon ---- */
+.alert__icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.25em;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+/* ---- Message ---- */
+.alert__message {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---- Action ---- */
+.alert__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.alert__action:empty {
+  display: none;
+}
+
+/* ---- Close Button ---- */
+.alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: var(--ts-radius-sm);
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: opacity var(--ts-transition-fast);
+  padding: 0;
+  line-height: 1;
+}
+
+.alert__close:hover {
+  opacity: 1;
+}
+
+.alert__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  opacity: 1;
+}

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,181 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for alert message content.
+ * @slot icon - Custom icon to override the default variant icon.
+ * @slot action - Action buttons or links displayed at the end.
+ *
+ * @part base - The alert container.
+ * @part icon - The icon wrapper.
+ * @part message - The message wrapper.
+ * @part action - The action slot wrapper.
+ * @part close - The close button.
+ */
+export class TsAlert {
+    /** The alert's semantic variant. */
+    variant = 'info';
+    /** Whether the alert can be dismissed. */
+    closable = false;
+    /** Whether the alert is currently visible. */
+    isVisible = true;
+    /** Emitted when the alert is closed. */
+    tsClose;
+    /** Programmatically close the alert. */
+    async close() {
+        this.isVisible = false;
+        this.tsClose.emit();
+    }
+    /** Programmatically show the alert. */
+    async show() {
+        this.isVisible = true;
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderDefaultIcon() {
+        const icons = {
+            info: 'ℹ',
+            success: '✓',
+            warning: '⚠',
+            danger: '✕',
+            primary: 'ℹ',
+            secondary: 'ℹ',
+            neutral: 'ℹ',
+        };
+        return h("span", { "aria-hidden": "true" }, icons[this.variant] || 'ℹ');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        return (h(Host, { class: {
+                'ts-alert': true,
+                [`ts-alert--${this.variant}`]: true,
+            }, role: "alert" }, h("div", { class: "alert__base", part: "base" }, h("div", { class: "alert__icon", part: "icon" }, h("slot", { name: "icon" }, this.renderDefaultIcon())), h("div", { class: "alert__message", part: "message" }, h("slot", null)), h("div", { class: "alert__action", part: "action" }, h("slot", { name: "action" })), this.closable && (h("button", { class: "alert__close", part: "close", type: "button", "aria-label": "Close alert", onClick: this.handleClose }, "\u2715")))));
+    }
+    static get is() { return "ts-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsVariant",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TsVariant": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsVariant",
+                            "referenceLocation": "TsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alert's semantic variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the alert can be dismissed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert is closed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the alert.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically show the alert.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI/E;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,OAAO;IAClB,oCAAoC;IACX,OAAO,GAAc,MAAM,CAAC;IAErD,0CAA0C;IAClC,QAAQ,GAAG,KAAK,CAAC;IAEzB,8CAA8C;IACrC,SAAS,GAAG,IAAI,CAAC;IAE1B,wCAAwC;IACP,OAAO,CAAsB;IAE9D,wCAAwC;IAExC,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,uCAAuC;IAEvC,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,4EAA4E;IACpE,iBAAiB;QACvB,MAAM,KAAK,GAA2B;YACpC,IAAI,EAAE,GAAG;YACT,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,GAAG;YACd,OAAO,EAAE,GAAG;SACb,CAAC;QACF,OAAO,2BAAkB,MAAM,IAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAQ,CAAC;IACtE,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC;QAEjC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aACpC,EACD,IAAI,EAAC,OAAO;YAEZ,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;gBAClC,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;oBAClC,YAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,iBAAiB,EAAE,CAAQ,CAC/C;gBAEN,WAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS;oBACxC,eAAQ,CACJ;gBAEN,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ;oBACtC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBAEL,IAAI,CAAC,QAAQ,IAAI,CAChB,cACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,gBACF,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,aAGlB,CACV,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, State, h, Host, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for alert message content.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot action - Action buttons or links displayed at the end.\n *\n * @part base - The alert container.\n * @part icon - The 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-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class TsAlert {\n  /** The alert's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'info';\n\n  /** Whether the alert can be dismissed. */\n  @Prop() closable = false;\n\n  /** Whether the alert is currently visible. */\n  @State() isVisible = true;\n\n  /** Emitted when the alert is closed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Programmatically close the alert. */\n  @Method()\n  async close(): Promise<void> {\n    this.isVisible = false;\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the alert. */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderDefaultIcon() {\n    const icons: Record<string, string> = {\n      info: 'ℹ',\n      success: '✓',\n      warning: '⚠',\n      danger: '✕',\n      primary: 'ℹ',\n      secondary: 'ℹ',\n      neutral: 'ℹ',\n    };\n    return <span aria-hidden=\"true\">{icons[this.variant] || 'ℹ'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    return (\n      <Host\n        class={{\n          'ts-alert': true,\n          [`ts-alert--${this.variant}`]: true,\n        }}\n        role=\"alert\"\n      >\n        <div class=\"alert__base\" part=\"base\">\n          <div class=\"alert__icon\" part=\"icon\">\n            <slot name=\"icon\">{this.renderDefaultIcon()}</slot>\n          </div>\n\n          <div class=\"alert__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"alert__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.closable && (\n            <button\n              class=\"alert__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close alert\"\n              onClick={this.handleClose}\n            >\n              ✕\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,128 @@
+// Hand-written stories for ts-alert
+export default {
+    title: 'Components/Alert',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
+            description: 'The alert\'s semantic variant.',
+        },
+        closable: { control: 'boolean', description: 'Whether the alert can be dismissed.' },
+        slotContent: { control: 'text', description: 'Alert message content' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined && args.variant !== null)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.closable)
+        attrs.push('closable');
+    return `<ts-alert ${attrs.join(' ')}>${args.slotContent || 'This is an alert message.'}</ts-alert>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'info',
+        closable: false,
+        slotContent: 'Your account settings have been updated successfully.',
+    },
+});
+export const Variants = () => `
+  <ts-stack gap="2" style="max-width: 600px;">
+    <ts-alert variant="info">A new software update is available. See what's new in version 3.2.</ts-alert>
+    <ts-alert variant="success">Your payment of $49.99 has been processed successfully.</ts-alert>
+    <ts-alert variant="warning">Your free trial expires in 3 days. Upgrade now to keep your data.</ts-alert>
+    <ts-alert variant="danger">Unable to connect to the database. Please check your credentials.</ts-alert>
+    <ts-alert variant="primary">Welcome back! You have 5 unread notifications.</ts-alert>
+    <ts-alert variant="secondary">This feature is in beta. Your feedback helps us improve.</ts-alert>
+    <ts-alert variant="neutral">Scheduled maintenance will occur on Sunday from 2-4 AM UTC.</ts-alert>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-stack gap="2" style="max-width: 600px;">
+    <ts-alert variant="info">Standard non-dismissible alert.</ts-alert>
+    <ts-alert variant="success" closable>Dismissible alert — click the close button to hide.</ts-alert>
+    <ts-alert variant="warning" closable>Your session will expire in 10 minutes. Save your work.</ts-alert>
+    <ts-alert variant="danger" closable>Failed to save changes. Please try again.</ts-alert>
+  </ts-stack>
+`;
+export const WithIcons = () => `
+  <ts-stack gap="2" style="max-width: 600px;">
+    <ts-alert variant="info">
+      <ts-icon slot="icon" name="info" size="sm"></ts-icon>
+      Two-factor authentication is now available for your account.
+    </ts-alert>
+    <ts-alert variant="success">
+      <ts-icon slot="icon" name="check-circle" size="sm"></ts-icon>
+      Deployment to production completed in 2m 34s.
+    </ts-alert>
+    <ts-alert variant="warning">
+      <ts-icon slot="icon" name="alert-triangle" size="sm"></ts-icon>
+      API rate limit approaching. 450 of 500 requests used this hour.
+    </ts-alert>
+    <ts-alert variant="danger">
+      <ts-icon slot="icon" name="x-circle" size="sm"></ts-icon>
+      Build failed: 3 test suites did not pass. Check the logs for details.
+    </ts-alert>
+  </ts-stack>
+`;
+export const WithActions = () => `
+  <ts-stack gap="2" style="max-width: 600px;">
+    <ts-alert variant="info" closable>
+      A new version (v3.2.0) is available.
+      <span slot="action">
+        <ts-button size="sm" appearance="outline" variant="primary">Update Now</ts-button>
+      </span>
+    </ts-alert>
+    <ts-alert variant="warning">
+      Your subscription will renew in 5 days at $29/month.
+      <span slot="action">
+        <ts-button size="sm" appearance="ghost" variant="neutral">Manage Plan</ts-button>
+      </span>
+    </ts-alert>
+    <ts-alert variant="danger" closable>
+      <ts-icon slot="icon" name="shield-alert" size="sm"></ts-icon>
+      Unusual login attempt detected from a new device.
+      <span slot="action">
+        <ts-button size="sm" variant="danger">Review Activity</ts-button>
+      </span>
+    </ts-alert>
+    <ts-alert variant="success" closable>
+      <ts-icon slot="icon" name="check-circle" size="sm"></ts-icon>
+      Your file has been uploaded successfully.
+      <span slot="action">
+        <ts-button size="sm" appearance="link" variant="primary">View File</ts-button>
+      </span>
+    </ts-alert>
+  </ts-stack>
+`;
+export const Composition = () => `
+  <ts-stack gap="4" style="max-width: 500px;">
+    <ts-card bordered padding="lg">
+      <span slot="header"><h3 style="margin: 0;">Account Settings</h3></span>
+      <ts-stack gap="3">
+        <ts-alert variant="warning">
+          <ts-icon slot="icon" name="alert-triangle" size="sm"></ts-icon>
+          Your email address has not been verified.
+          <span slot="action">
+            <ts-button size="sm" appearance="outline" variant="warning">Resend Verification</ts-button>
+          </span>
+        </ts-alert>
+        <ts-input label="Email" value="unverified@example.com" type="email">
+          <ts-icon slot="prefix" name="mail" size="sm"></ts-icon>
+        </ts-input>
+        <ts-input label="Phone" type="tel" placeholder="+1 (555) 000-0000">
+          <ts-icon slot="prefix" name="phone" size="sm"></ts-icon>
+        </ts-input>
+        <ts-toggle checked>Enable two-factor authentication</ts-toggle>
+      </ts-stack>
+      <span slot="footer">
+        <ts-row gap="2" justify="end" style="padding-top: 8px;">
+          <ts-button appearance="outline" variant="neutral">Discard</ts-button>
+          <ts-button variant="primary">Save Settings</ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+  </ts-stack>
+`;
+//# sourceMappingURL=alert.stories.js.map