@tessera-ui/core 0.4.0

package/dist/collection/components/modal/modal.js

@@ -0,0 +1,339 @@
+import { h, Host, } from "@stencil/core";
+import { generateId, trapFocus } from "../../utils/aria";
+/**
+ * @slot - Default slot for modal body content.
+ * @slot header - Modal header content.
+ * @slot footer - Modal footer content (e.g., action buttons).
+ *
+ * @part overlay - The backdrop overlay.
+ * @part dialog - The dialog container.
+ * @part header - The header wrapper.
+ * @part body - The body wrapper.
+ * @part footer - The footer wrapper.
+ * @part close - The close button.
+ */
+export class TsModal {
+    hostEl;
+    dialogEl;
+    removeFocusTrap;
+    previouslyFocused;
+    modalId = generateId('ts-modal');
+    /** Whether the modal is open. */
+    open = false;
+    /** The modal's width size preset. */
+    size = 'md';
+    /** Label for accessibility (used as aria-label). */
+    label;
+    /** Whether clicking the overlay closes the modal. */
+    closeOnOverlay = true;
+    /** Whether pressing Escape closes the modal. */
+    closeOnEscape = true;
+    /** Whether to show the close button. */
+    showClose = true;
+    /** Emitted when the modal opens. */
+    tsOpen;
+    /** Emitted when the modal closes. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openModal();
+        }
+        else {
+            this.closeModal();
+        }
+    }
+    /** Programmatically open the modal. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the modal. */
+    async close() {
+        this.open = false;
+    }
+    openModal() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        this.tsOpen.emit();
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.dialogEl) {
+                this.removeFocusTrap = trapFocus(this.dialogEl);
+                // Focus the dialog itself
+                this.dialogEl.focus();
+            }
+        });
+    }
+    closeModal() {
+        this.isAnimating = false;
+        this.tsClose.emit();
+        // Restore body scroll
+        document.body.style.overflow = '';
+        // Clean up focus trap
+        this.removeFocusTrap?.();
+        // Restore focus
+        this.previouslyFocused?.focus();
+    }
+    disconnectedCallback() {
+        this.removeFocusTrap?.();
+        document.body.style.overflow = '';
+    }
+    handleOverlayClick = () => {
+        if (this.closeOnOverlay) {
+            this.close();
+        }
+    };
+    handleDialogClick = (event) => {
+        // Prevent overlay click from firing when clicking inside the dialog
+        event.stopPropagation();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.closeOnEscape) {
+            event.stopPropagation();
+            this.close();
+        }
+    };
+    handleCloseClick = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.open)
+            return null;
+        return (h(Host, { class: {
+                'ts-modal': true,
+                'ts-modal--open': this.open,
+            }, onKeyDown: this.handleKeydown }, h("div", { class: "modal__overlay", part: "overlay", onClick: this.handleOverlayClick }, h("div", { ref: (el) => (this.dialogEl = el), class: {
+                'modal__dialog': true,
+                [`modal__dialog--${this.size}`]: true,
+            }, part: "dialog", role: "dialog", "aria-modal": "true", "aria-label": this.label, "aria-labelledby": !this.label ? `${this.modalId}-header` : undefined, tabindex: -1, onClick: this.handleDialogClick }, this.showClose && (h("button", { class: "modal__close", part: "close", type: "button", "aria-label": "Close modal", onClick: this.handleCloseClick }, "\u2715")), h("div", { class: "modal__header", part: "header", id: `${this.modalId}-header` }, h("slot", { name: "header" })), h("div", { class: "modal__body", part: "body" }, h("slot", null)), h("div", { class: "modal__footer", part: "footer" }, h("slot", { name: "footer" }))))));
+    }
+    static get is() { return "ts-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The modal's width size preset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for accessibility (used as aria-label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "closeOnOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking the overlay closes the modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-overlay",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether pressing Escape closes the modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAnimating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsOpen",
+                "name": "tsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically open the modal.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the modal.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  h,\n  Host,\n  Element,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for modal body content.\n * @slot header - Modal header content.\n * @slot footer - Modal footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class TsModal {\n  @Element() hostEl!: HTMLElement;\n\n  private dialogEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private modalId = generateId('ts-modal');\n\n  /** Whether the modal is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The modal's width size preset. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label for accessibility (used as aria-label). */\n  @Prop() label?: string;\n\n  /** Whether clicking the overlay closes the modal. */\n  @Prop() closeOnOverlay = true;\n\n  /** Whether pressing Escape closes the modal. */\n  @Prop() closeOnEscape = true;\n\n  /** Whether to show the close button. */\n  @Prop() showClose = true;\n\n  /** Emitted when the modal opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the modal closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Internal animation state. */\n  @State() isAnimating = false;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.openModal();\n    } else {\n      this.closeModal();\n    }\n  }\n\n  /** Programmatically open the modal. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the modal. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openModal(): void {\n    this.previouslyFocused = document.activeElement as HTMLElement;\n    this.isAnimating = true;\n    this.tsOpen.emit();\n\n    // Prevent body scroll\n    document.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.dialogEl) {\n        this.removeFocusTrap = trapFocus(this.dialogEl);\n        // Focus the dialog itself\n        this.dialogEl.focus();\n      }\n    });\n  }\n\n  private closeModal(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    // Restore body scroll\n    document.body.style.overflow = '';\n\n    // Clean up focus trap\n    this.removeFocusTrap?.();\n\n    // Restore focus\n    this.previouslyFocused?.focus();\n  }\n\n  disconnectedCallback(): void {\n    this.removeFocusTrap?.();\n    document.body.style.overflow = '';\n  }\n\n  private handleOverlayClick = (): void => {\n    if (this.closeOnOverlay) {\n      this.close();\n    }\n  };\n\n  private handleDialogClick = (event: MouseEvent): void => {\n    // Prevent overlay click from firing when clicking inside the dialog\n    event.stopPropagation();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.closeOnEscape) {\n      event.stopPropagation();\n      this.close();\n    }\n  };\n\n  private handleCloseClick = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.open) return null;\n\n    return (\n      <Host\n        class={{\n          'ts-modal': true,\n          'ts-modal--open': this.open,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"modal__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.dialogEl = el)}\n            class={{\n              'modal__dialog': true,\n              [`modal__dialog--${this.size}`]: true,\n            }}\n            part=\"dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.label}\n            aria-labelledby={!this.label ? `${this.modalId}-header` : undefined}\n            tabindex={-1}\n            onClick={this.handleDialogClick}\n          >\n            {this.showClose && (\n              <button\n                class=\"modal__close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close modal\"\n                onClick={this.handleCloseClick}\n              >\n                ✕\n              </button>\n            )}\n\n            <div class=\"modal__header\" part=\"header\" id={`${this.modalId}-header`}>\n              <slot name=\"header\" />\n            </div>\n\n            <div class=\"modal__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"modal__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,233 @@
+// Hand-written stories for ts-modal
+export default {
+    title: 'Components/Modal',
+    tags: ['autodocs'],
+    argTypes: {
+        open: { control: 'boolean', description: 'Whether the modal is open.' },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The modal\'s width size preset.',
+        },
+        label: { control: 'text', description: 'Label for accessibility (used as aria-label).' },
+        closeOnOverlay: { control: 'boolean', description: 'Whether clicking the overlay closes the modal.' },
+        closeOnEscape: { control: 'boolean', description: 'Whether pressing Escape closes the modal.' },
+        showClose: { control: 'boolean', description: 'Whether to show the close button.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.open)
+        attrs.push('open');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null && args.label !== '')
+        attrs.push(`label="${args.label}"`);
+    if (args.closeOnOverlay === false)
+        attrs.push('close-on-overlay="false"');
+    if (args.closeOnEscape === false)
+        attrs.push('close-on-escape="false"');
+    if (args.showClose === false)
+        attrs.push('show-close="false"');
+    return `
+    <ts-button variant="primary" onclick="this.nextElementSibling.open = true">Open Modal</ts-button>
+    <ts-modal ${attrs.join(' ')}>
+      <span slot="header"><h3 style="margin: 0;">Edit Profile</h3></span>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <ts-input label="Display Name" value="Sarah Chen" placeholder="Enter your name"></ts-input>
+        <ts-input label="Email" type="email" value="sarah@example.com" placeholder="Enter your email"></ts-input>
+      </div>
+      <span slot="footer">
+        <div style="display: flex; justify-content: flex-end; gap: 12px;">
+          <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+          <ts-button variant="primary">Save Changes</ts-button>
+        </div>
+      </span>
+    </ts-modal>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        open: false,
+        size: 'md',
+        label: 'Edit Profile',
+        closeOnOverlay: true,
+        closeOnEscape: true,
+        showClose: true,
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-xs').open = true">Extra Small</ts-button>
+    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-sm').open = true">Small</ts-button>
+    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-md').open = true">Medium</ts-button>
+    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-lg').open = true">Large</ts-button>
+    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-xl').open = true">Extra Large</ts-button>
+  </div>
+
+  <ts-modal id="modal-xs" size="xs" label="Extra Small Modal">
+    <span slot="header"><h3 style="margin: 0;">Quick Confirm</h3></span>
+    <p style="margin: 0;">Are you sure?</p>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button size="sm" appearance="outline" variant="neutral">No</ts-button>
+        <ts-button size="sm" variant="primary">Yes</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+
+  <ts-modal id="modal-sm" size="sm" label="Small Modal">
+    <span slot="header"><h3 style="margin: 0;">Rename File</h3></span>
+    <ts-input label="File Name" value="quarterly-report.pdf"></ts-input>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button size="sm" appearance="outline" variant="neutral">Cancel</ts-button>
+        <ts-button size="sm" variant="primary">Rename</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+
+  <ts-modal id="modal-md" size="md" label="Medium Modal">
+    <span slot="header"><h3 style="margin: 0;">Create New Project</h3></span>
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <ts-input label="Project Name" placeholder="My Awesome Project"></ts-input>
+      <ts-input label="Description" placeholder="A brief description of the project"></ts-input>
+    </div>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+        <ts-button variant="primary">Create Project</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+
+  <ts-modal id="modal-lg" size="lg" label="Large Modal">
+    <span slot="header"><h3 style="margin: 0;">User Preferences</h3></span>
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <ts-input label="Display Name" placeholder="Your name"></ts-input>
+      <ts-input label="Email" type="email" placeholder="you@example.com"></ts-input>
+      <ts-input label="Organization" placeholder="Company name"></ts-input>
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <ts-toggle>Enable email notifications</ts-toggle>
+        <ts-toggle checked>Enable dark mode</ts-toggle>
+      </div>
+    </div>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+        <ts-button variant="primary">Save Preferences</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+
+  <ts-modal id="modal-xl" size="xl" label="Extra Large Modal">
+    <span slot="header"><h3 style="margin: 0;">Dashboard Overview</h3></span>
+    <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+      <ts-card bordered style="flex: 1; min-width: 200px;">
+        <div style="text-align: center;">
+          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-primary-600);">2,847</div>
+          <div style="color: var(--ts-color-text-secondary);">Total Users</div>
+        </div>
+      </ts-card>
+      <ts-card bordered style="flex: 1; min-width: 200px;">
+        <div style="text-align: center;">
+          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-success-600);">$12,459</div>
+          <div style="color: var(--ts-color-text-secondary);">Revenue</div>
+        </div>
+      </ts-card>
+      <ts-card bordered style="flex: 1; min-width: 200px;">
+        <div style="text-align: center;">
+          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-warning-600);">94%</div>
+          <div style="color: var(--ts-color-text-secondary);">Uptime</div>
+        </div>
+      </ts-card>
+    </div>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end;">
+        <ts-button appearance="outline" variant="neutral">Close</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+`;
+export const States = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+    <ts-button variant="danger" onclick="document.getElementById('modal-confirm-delete').open = true">
+      <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
+      Delete Account
+    </ts-button>
+    <ts-button variant="primary" onclick="document.getElementById('modal-no-close').open = true">
+      Non-dismissible Modal
+    </ts-button>
+  </div>
+
+  <ts-modal id="modal-confirm-delete" size="sm" label="Confirm Deletion">
+    <span slot="header"><h3 style="margin: 0; color: var(--ts-color-danger-600);">Delete Account</h3></span>
+    <div>
+      <ts-alert variant="danger">This action cannot be undone. All your data will be permanently removed.</ts-alert>
+      <div style="margin-top: 16px;">
+        <ts-input label="Type DELETE to confirm" placeholder="DELETE" error=""></ts-input>
+      </div>
+    </div>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+        <ts-button variant="danger">
+          <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
+          Delete Forever
+        </ts-button>
+      </div>
+    </span>
+  </ts-modal>
+
+  <ts-modal id="modal-no-close" size="sm" label="Terms and Conditions" close-on-overlay="false" close-on-escape="false" show-close="false">
+    <span slot="header"><h3 style="margin: 0;">Accept Terms</h3></span>
+    <p style="margin: 0;">You must accept the terms and conditions to continue using this service. Please review our updated privacy policy.</p>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 8px;">
+        <ts-button appearance="outline" variant="neutral" onclick="document.getElementById('modal-no-close').open = false">Decline</ts-button>
+        <ts-button variant="primary" onclick="document.getElementById('modal-no-close').open = false">Accept</ts-button>
+      </div>
+    </span>
+  </ts-modal>
+`;
+export const Composition = () => `
+  <ts-button variant="primary" onclick="document.getElementById('modal-compose').open = true">
+    <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
+    Add Team Member
+  </ts-button>
+
+  <ts-modal id="modal-compose" size="md" label="Add Team Member">
+    <span slot="header">
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <ts-icon name="user-plus" size="sm"></ts-icon>
+        <h3 style="margin: 0;">Add Team Member</h3>
+      </div>
+    </span>
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="display: flex; gap: 12px;">
+        <ts-input label="First Name" placeholder="Jane" style="flex: 1;"></ts-input>
+        <ts-input label="Last Name" placeholder="Doe" style="flex: 1;"></ts-input>
+      </div>
+      <ts-input label="Email Address" type="email" placeholder="jane@company.com" required>
+        <ts-icon slot="prefix" name="mail" size="sm"></ts-icon>
+      </ts-input>
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <span style="font-weight: 600; font-size: 14px;">Permissions</span>
+        <ts-toggle>Can edit projects</ts-toggle>
+        <ts-toggle>Can manage team members</ts-toggle>
+        <ts-toggle checked>Can view analytics</ts-toggle>
+      </div>
+      <ts-alert variant="info">An invitation email will be sent to the provided address.</ts-alert>
+    </div>
+    <span slot="footer">
+      <div style="display: flex; justify-content: flex-end; gap: 12px;">
+        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+        <ts-button variant="primary">
+          <ts-icon slot="prefix" name="send" size="sm"></ts-icon>
+          Send Invitation
+        </ts-button>
+      </div>
+    </span>
+  </ts-modal>
+`;
+//# sourceMappingURL=modal.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;QACvE,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;QACxF,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gDAAgD,EAAE;QACrG,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,2CAA2C,EAAE;QAC/F,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,mCAAmC,EAAE;KACpF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,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,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,cAAc,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC1E,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/D,OAAO;;gBAEO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;GAa5B,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,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,cAAc;QACrB,cAAc,EAAE,IAAI;QACpB,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,IAAI;KAChB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxC,CAAC","sourcesContent":["// Hand-written stories for ts-modal\n\nexport default {\n  title: 'Components/Modal',\n  tags: ['autodocs'],\n  argTypes: {\n    open: { control: 'boolean', description: 'Whether the modal is open.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The modal\\'s width size preset.',\n    },\n    label: { control: 'text', description: 'Label for accessibility (used as aria-label).' },\n    closeOnOverlay: { control: 'boolean', description: 'Whether clicking the overlay closes the modal.' },\n    closeOnEscape: { control: 'boolean', description: 'Whether pressing Escape closes the modal.' },\n    showClose: { control: 'boolean', description: 'Whether to show the close button.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null && args.label !== '') attrs.push(`label=\"${args.label}\"`);\n  if (args.closeOnOverlay === false) attrs.push('close-on-overlay=\"false\"');\n  if (args.closeOnEscape === false) attrs.push('close-on-escape=\"false\"');\n  if (args.showClose === false) attrs.push('show-close=\"false\"');\n  return `\n    <ts-button variant=\"primary\" onclick=\"this.nextElementSibling.open = true\">Open Modal</ts-button>\n    <ts-modal ${attrs.join(' ')}>\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Edit Profile</h3></span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-input label=\"Display Name\" value=\"Sarah Chen\" placeholder=\"Enter your name\"></ts-input>\n        <ts-input label=\"Email\" type=\"email\" value=\"sarah@example.com\" placeholder=\"Enter your email\"></ts-input>\n      </div>\n      <span slot=\"footer\">\n        <div style=\"display: flex; justify-content: flex-end; gap: 12px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n          <ts-button variant=\"primary\">Save Changes</ts-button>\n        </div>\n      </span>\n    </ts-modal>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    size: 'md',\n    label: 'Edit Profile',\n    closeOnOverlay: true,\n    closeOnEscape: true,\n    showClose: true,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-xs').open = true\">Extra Small</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-sm').open = true\">Small</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-md').open = true\">Medium</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-lg').open = true\">Large</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-xl').open = true\">Extra Large</ts-button>\n  </div>\n\n  <ts-modal id=\"modal-xs\" size=\"xs\" label=\"Extra Small Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Quick Confirm</h3></span>\n    <p style=\"margin: 0;\">Are you sure?</p>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">No</ts-button>\n        <ts-button size=\"sm\" variant=\"primary\">Yes</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-sm\" size=\"sm\" label=\"Small Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Rename File</h3></span>\n    <ts-input label=\"File Name\" value=\"quarterly-report.pdf\"></ts-input>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button size=\"sm\" variant=\"primary\">Rename</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-md\" size=\"md\" label=\"Medium Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Create New Project</h3></span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <ts-input label=\"Project Name\" placeholder=\"My Awesome Project\"></ts-input>\n      <ts-input label=\"Description\" placeholder=\"A brief description of the project\"></ts-input>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">Create Project</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-lg\" size=\"lg\" label=\"Large Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">User Preferences</h3></span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <ts-input label=\"Display Name\" placeholder=\"Your name\"></ts-input>\n      <ts-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></ts-input>\n      <ts-input label=\"Organization\" placeholder=\"Company name\"></ts-input>\n      <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n        <ts-toggle>Enable email notifications</ts-toggle>\n        <ts-toggle checked>Enable dark mode</ts-toggle>\n      </div>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">Save Preferences</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-xl\" size=\"xl\" label=\"Extra Large Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Dashboard Overview</h3></span>\n    <div style=\"display: flex; gap: 16px; flex-wrap: wrap;\">\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-primary-600);\">2,847</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Total Users</div>\n        </div>\n      </ts-card>\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-success-600);\">$12,459</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Revenue</div>\n        </div>\n      </ts-card>\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-warning-600);\">94%</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Uptime</div>\n        </div>\n      </ts-card>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Close</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-button variant=\"danger\" onclick=\"document.getElementById('modal-confirm-delete').open = true\">\n      <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      Delete Account\n    </ts-button>\n    <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-no-close').open = true\">\n      Non-dismissible Modal\n    </ts-button>\n  </div>\n\n  <ts-modal id=\"modal-confirm-delete\" size=\"sm\" label=\"Confirm Deletion\">\n    <span slot=\"header\"><h3 style=\"margin: 0; color: var(--ts-color-danger-600);\">Delete Account</h3></span>\n    <div>\n      <ts-alert variant=\"danger\">This action cannot be undone. All your data will be permanently removed.</ts-alert>\n      <div style=\"margin-top: 16px;\">\n        <ts-input label=\"Type DELETE to confirm\" placeholder=\"DELETE\" error=\"\"></ts-input>\n      </div>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"danger\">\n          <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n          Delete Forever\n        </ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-no-close\" size=\"sm\" label=\"Terms and Conditions\" close-on-overlay=\"false\" close-on-escape=\"false\" show-close=\"false\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Accept Terms</h3></span>\n    <p style=\"margin: 0;\">You must accept the terms and conditions to continue using this service. Please review our updated privacy policy.</p>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-no-close').open = false\">Decline</ts-button>\n        <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-no-close').open = false\">Accept</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n\nexport const Composition = (): string => `\n  <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-compose').open = true\">\n    <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n    Add Team Member\n  </ts-button>\n\n  <ts-modal id=\"modal-compose\" size=\"md\" label=\"Add Team Member\">\n    <span slot=\"header\">\n      <div style=\"display: flex; align-items: center; gap: 8px;\">\n        <ts-icon name=\"user-plus\" size=\"sm\"></ts-icon>\n        <h3 style=\"margin: 0;\">Add Team Member</h3>\n      </div>\n    </span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <div style=\"display: flex; gap: 12px;\">\n        <ts-input label=\"First Name\" placeholder=\"Jane\" style=\"flex: 1;\"></ts-input>\n        <ts-input label=\"Last Name\" placeholder=\"Doe\" style=\"flex: 1;\"></ts-input>\n      </div>\n      <ts-input label=\"Email Address\" type=\"email\" placeholder=\"jane@company.com\" required>\n        <ts-icon slot=\"prefix\" name=\"mail\" size=\"sm\"></ts-icon>\n      </ts-input>\n      <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n        <span style=\"font-weight: 600; font-size: 14px;\">Permissions</span>\n        <ts-toggle>Can edit projects</ts-toggle>\n        <ts-toggle>Can manage team members</ts-toggle>\n        <ts-toggle checked>Can view analytics</ts-toggle>\n      </div>\n      <ts-alert variant=\"info\">An invitation email will be sent to the provided address.</ts-alert>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 12px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">\n          <ts-icon slot=\"prefix\" name=\"send\" size=\"sm\"></ts-icon>\n          Send Invitation\n        </ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n"]}