@tessera-ui/core 0.4.0

package/dist/collection/components/dialog/dialog.css

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   ts-dialog — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-dialog-bg          Dialog background
+     --ts-dialog-radius      Dialog border radius
+     --ts-dialog-shadow      Dialog box-shadow
+     --ts-dialog-overlay-bg  Overlay background
+   ========================================================================== */
+
+:host {
+  font-family: var(--ts-font-family-base);
+
+  --ts-dialog-bg: var(--ts-color-bg-elevated);
+  --ts-dialog-radius: var(--ts-shape-overlay);
+  --ts-dialog-shadow: var(--ts-shadow-xl);
+  --ts-dialog-overlay-bg: var(--ts-color-bg-overlay);
+}
+
+/* ---- Overlay ---- */
+.dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ts-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ts-spacing-4);
+  background-color: var(--ts-dialog-overlay-bg);
+  animation: ts-dialog-fade-in 200ms ease-out;
+}
+
+/* ---- Panel ---- */
+.dialog__panel {
+  position: relative;
+  background-color: var(--ts-dialog-bg);
+  border-radius: var(--ts-dialog-radius);
+  box-shadow: var(--ts-dialog-shadow);
+  max-height: calc(100vh - var(--ts-spacing-16));
+  overflow-y: auto;
+  animation: ts-dialog-scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+
+/* ---- Sizes ---- */
+.dialog__panel--sm { width: 100%; max-width: 400px; }
+.dialog__panel--md { width: 100%; max-width: 520px; }
+.dialog__panel--lg { width: 100%; max-width: 680px; }
+
+/* ---- Close Button ---- */
+.dialog__close {
+  position: absolute;
+  inset-block-start: var(--ts-spacing-3);
+  inset-inline-end: var(--ts-spacing-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: var(--ts-radius-md);
+  background: transparent;
+  color: var(--ts-color-text-tertiary);
+  font-size: var(--ts-font-size-md);
+  cursor: pointer;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+  z-index: 1;
+  padding: 0;
+  line-height: 1;
+}
+
+.dialog__close:hover {
+  background-color: var(--ts-color-bg-hover);
+  color: var(--ts-color-text-secondary);
+}
+
+.dialog__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Header ---- */
+.dialog__header {
+  padding: var(--ts-spacing-5) var(--ts-spacing-6) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-lg);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+  padding-inline-end: var(--ts-spacing-10);
+}
+
+/* ---- Body ---- */
+.dialog__body {
+  padding: var(--ts-spacing-3) var(--ts-spacing-6);
+  font-size: var(--ts-font-size-md);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+}
+
+/* ---- Footer ---- */
+.dialog__footer {
+  padding: var(--ts-spacing-3) var(--ts-spacing-6) var(--ts-spacing-5);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ts-spacing-2);
+}
+
+.dialog__footer:empty {
+  display: none;
+}
+
+/* ---- Animations ---- */
+@keyframes ts-dialog-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ts-dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

package/dist/collection/components/dialog/dialog.js

@@ -0,0 +1,264 @@
+import { h, Host } from "@stencil/core";
+import { generateId, trapFocus } from "../../utils/aria";
+/**
+ * @slot - Default slot for dialog body content.
+ * @slot footer - Footer content (e.g., action buttons).
+ *
+ * @part overlay - The backdrop overlay.
+ * @part dialog - The dialog container.
+ * @part header - The heading wrapper.
+ * @part body - The body content wrapper.
+ * @part footer - The footer wrapper.
+ * @part close - The close button.
+ */
+export class TsDialog {
+    hostEl;
+    dialogEl;
+    removeFocusTrap;
+    previouslyFocused;
+    dialogId = generateId('ts-dialog');
+    /** Whether the dialog is open. */
+    open = false;
+    /** The dialog heading text. */
+    heading;
+    /** The dialog's width size preset. */
+    size = 'sm';
+    /** Whether the dialog can be dismissed via close button, Escape, or overlay click. */
+    dismissible = true;
+    /** Emitted when the dialog is closed. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openDialog();
+        }
+        else {
+            this.closeDialog();
+        }
+    }
+    /** Programmatically open the dialog. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the dialog. */
+    async close() {
+        this.open = false;
+    }
+    openDialog() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.dialogEl) {
+                this.removeFocusTrap = trapFocus(this.dialogEl);
+                this.dialogEl.focus();
+            }
+        });
+    }
+    closeDialog() {
+        this.isAnimating = false;
+        this.tsClose.emit();
+        document.body.style.overflow = '';
+        this.removeFocusTrap?.();
+        this.previouslyFocused?.focus();
+    }
+    disconnectedCallback() {
+        this.removeFocusTrap?.();
+        document.body.style.overflow = '';
+    }
+    handleOverlayClick = () => {
+        if (this.dismissible) {
+            this.close();
+        }
+    };
+    handleDialogClick = (event) => {
+        event.stopPropagation();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.dismissible) {
+            event.stopPropagation();
+            this.close();
+        }
+    };
+    handleCloseClick = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.open)
+            return null;
+        const headingId = `${this.dialogId}-heading`;
+        return (h(Host, { class: {
+                'ts-dialog': true,
+                'ts-dialog--open': this.open,
+            }, onKeyDown: this.handleKeydown }, h("div", { class: "dialog__overlay", part: "overlay", onClick: this.handleOverlayClick }, h("div", { ref: (el) => (this.dialogEl = el), class: {
+                'dialog__panel': true,
+                [`dialog__panel--${this.size}`]: true,
+            }, part: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? headingId : undefined, tabindex: -1, onClick: this.handleDialogClick }, this.dismissible && (h("button", { class: "dialog__close", part: "close", type: "button", "aria-label": "Close dialog", onClick: this.handleCloseClick }, "\u2715")), this.heading && (h("div", { class: "dialog__header", part: "header", id: headingId }, this.heading)), h("div", { class: "dialog__body", part: "body" }, h("slot", null)), h("div", { class: "dialog__footer", part: "footer" }, h("slot", { name: "footer" }))))));
+    }
+    static get is() { return "ts-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog.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 dialog is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The dialog heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The dialog's width size preset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog can be dismissed via close button, Escape, or overlay click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAnimating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is closed."
+                },
+                "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 dialog.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the dialog.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for dialog body content.\n * @slot footer - Footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The heading wrapper.\n * @part body - The body content wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class TsDialog {\n  @Element() hostEl!: HTMLElement;\n\n  private dialogEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private dialogId = generateId('ts-dialog');\n\n  /** Whether the dialog is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog heading text. */\n  @Prop() heading?: string;\n\n  /** The dialog's width size preset. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /** Whether the dialog can be dismissed via close button, Escape, or overlay click. */\n  @Prop() dismissible = true;\n\n  /** Emitted when the dialog is closed. */\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.openDialog();\n    } else {\n      this.closeDialog();\n    }\n  }\n\n  /** Programmatically open the dialog. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the dialog. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openDialog(): void {\n    this.previouslyFocused = document.activeElement as HTMLElement;\n    this.isAnimating = true;\n\n    document.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.dialogEl) {\n        this.removeFocusTrap = trapFocus(this.dialogEl);\n        this.dialogEl.focus();\n      }\n    });\n  }\n\n  private closeDialog(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    document.body.style.overflow = '';\n\n    this.removeFocusTrap?.();\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.dismissible) {\n      this.close();\n    }\n  };\n\n  private handleDialogClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.dismissible) {\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    const headingId = `${this.dialogId}-heading`;\n\n    return (\n      <Host\n        class={{\n          'ts-dialog': true,\n          'ts-dialog--open': this.open,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"dialog__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.dialogEl = el)}\n            class={{\n              'dialog__panel': true,\n              [`dialog__panel--${this.size}`]: true,\n            }}\n            part=\"dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.heading ? headingId : undefined}\n            tabindex={-1}\n            onClick={this.handleDialogClick}\n          >\n            {this.dismissible && (\n              <button\n                class=\"dialog__close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                onClick={this.handleCloseClick}\n              >\n                &#x2715;\n              </button>\n            )}\n\n            {this.heading && (\n              <div class=\"dialog__header\" part=\"header\" id={headingId}>\n                {this.heading}\n              </div>\n            )}\n\n            <div class=\"dialog__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"dialog__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,147 @@
+// Hand-written stories for ts-dialog
+export default {
+    title: 'Components/Dialog',
+    tags: ['autodocs'],
+    argTypes: {
+        open: { control: 'boolean', description: 'Whether the dialog is open.' },
+        heading: { control: 'text', description: 'The dialog heading text.' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: "The dialog's width size preset.",
+        },
+        dismissible: { control: 'boolean', description: 'Whether the dialog can be dismissed via close button, Escape, or overlay click.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.open)
+        attrs.push('open');
+    if (args.heading !== undefined && args.heading !== null)
+        attrs.push(`heading="${args.heading}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.dismissible === false)
+        attrs.push('dismissible="false"');
+    return `
+    <ts-button onclick="this.nextElementSibling.show()">Open Dialog</ts-button>
+    <ts-dialog ${attrs.join(' ')}>
+      <p style="margin: 0; font-family: sans-serif;">This is the dialog body content. You can place any content here.</p>
+      <div slot="footer">
+        <ts-row gap="2" justify="end">
+          <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
+          <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Confirm</ts-button>
+        </ts-row>
+      </div>
+    </ts-dialog>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        open: false,
+        heading: 'Dialog Title',
+        size: 'sm',
+        dismissible: true,
+    },
+});
+export const Sizes = () => `
+  <ts-row gap="2">
+    <div>
+      <ts-button onclick="this.nextElementSibling.show()">Small Dialog</ts-button>
+      <ts-dialog heading="Small Dialog" size="sm">
+        <p style="margin: 0; font-family: sans-serif;">This is a small dialog, suitable for simple confirmations.</p>
+        <div slot="footer">
+          <ts-row gap="2" justify="end">
+            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
+          </ts-row>
+        </div>
+      </ts-dialog>
+    </div>
+    <div>
+      <ts-button onclick="this.nextElementSibling.show()">Medium Dialog</ts-button>
+      <ts-dialog heading="Medium Dialog" size="md">
+        <p style="margin: 0; font-family: sans-serif;">This is a medium dialog with more room for content. It works well for forms and moderate amounts of information.</p>
+        <div slot="footer">
+          <ts-row gap="2" justify="end">
+            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
+          </ts-row>
+        </div>
+      </ts-dialog>
+    </div>
+    <div>
+      <ts-button onclick="this.nextElementSibling.show()">Large Dialog</ts-button>
+      <ts-dialog heading="Large Dialog" size="lg">
+        <p style="margin: 0; font-family: sans-serif;">This is a large dialog, ideal for complex content like data tables, multi-step forms, or detailed previews.</p>
+        <div slot="footer">
+          <ts-row gap="2" justify="end">
+            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
+          </ts-row>
+        </div>
+      </ts-dialog>
+    </div>
+  </ts-row>
+`;
+export const DeleteConfirmation = () => `
+  <ts-button variant="danger" onclick="this.nextElementSibling.show()">Delete Item</ts-button>
+  <ts-dialog heading="Delete this item?" size="sm">
+    <p style="margin: 0; font-family: sans-serif; color: #555;">
+      Are you sure you want to delete this item? This action cannot be undone and all associated data will be permanently removed.
+    </p>
+    <div slot="footer">
+      <ts-row gap="2" justify="end">
+        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
+        <ts-button variant="danger" onclick="this.closest('ts-dialog').close()">Delete</ts-button>
+      </ts-row>
+    </div>
+  </ts-dialog>
+`;
+export const UnsavedChanges = () => `
+  <ts-button onclick="this.nextElementSibling.show()">Leave Page</ts-button>
+  <ts-dialog heading="Unsaved changes" size="sm">
+    <p style="margin: 0; font-family: sans-serif; color: #555;">
+      You have unsaved changes. If you leave this page, your changes will be lost. Would you like to save before leaving?
+    </p>
+    <div slot="footer">
+      <ts-row gap="2" justify="end">
+        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Discard</ts-button>
+        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Save Changes</ts-button>
+      </ts-row>
+    </div>
+  </ts-dialog>
+`;
+export const NonDismissible = () => `
+  <ts-button onclick="this.nextElementSibling.show()">Open Non-Dismissible</ts-button>
+  <ts-dialog heading="Terms of Service" size="md" dismissible="false">
+    <div style="font-family: sans-serif; color: #555;">
+      <p style="margin: 0 0 12px;">Please read and accept the terms of service to continue using this application.</p>
+      <div style="padding: 12px; background: #f9fafb; border-radius: 6px; max-height: 150px; overflow-y: auto; font-size: 14px;">
+        <p style="margin: 0 0 8px;">1. You agree to use this software responsibly.</p>
+        <p style="margin: 0 0 8px;">2. You will not share your credentials with others.</p>
+        <p style="margin: 0 0 8px;">3. Data uploaded remains your intellectual property.</p>
+        <p style="margin: 0;">4. We reserve the right to update these terms.</p>
+      </div>
+    </div>
+    <div slot="footer">
+      <ts-row gap="2" justify="end">
+        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">I Accept</ts-button>
+      </ts-row>
+    </div>
+  </ts-dialog>
+`;
+export const FormDialog = () => `
+  <ts-button onclick="this.nextElementSibling.show()">Edit Profile</ts-button>
+  <ts-dialog heading="Edit Profile" size="md">
+    <ts-stack gap="3">
+      <ts-input label="Full Name" placeholder="Enter your name" value="James Kennedy"></ts-input>
+      <ts-input label="Email" placeholder="Enter your email" value="james@example.com"></ts-input>
+      <ts-textarea label="Bio" placeholder="Tell us about yourself..." rows="3"></ts-textarea>
+    </ts-stack>
+    <div slot="footer">
+      <ts-row gap="2" justify="end">
+        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
+        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Save</ts-button>
+      </ts-row>
+    </div>
+  </ts-dialog>
+`;
+//# sourceMappingURL=dialog.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,6BAA6B,EAAE;QACxE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,0BAA0B,EAAE;QACrE,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iFAAiF,EAAE;KACpI;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,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,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAClE,OAAO;;iBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;GAS7B,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,OAAO,EAAE,cAAc;QACvB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,IAAI;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoClC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;CAa/C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;CAa3C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkB3C,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAevC,CAAC","sourcesContent":["// Hand-written stories for ts-dialog\n\nexport default {\n  title: 'Components/Dialog',\n  tags: ['autodocs'],\n  argTypes: {\n    open: { control: 'boolean', description: 'Whether the dialog is open.' },\n    heading: { control: 'text', description: 'The dialog heading text.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: \"The dialog's width size preset.\",\n    },\n    dismissible: { control: 'boolean', description: 'Whether the dialog can be dismissed via close button, Escape, or overlay click.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.heading !== undefined && args.heading !== null) attrs.push(`heading=\"${args.heading}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.dismissible === false) attrs.push('dismissible=\"false\"');\n  return `\n    <ts-button onclick=\"this.nextElementSibling.show()\">Open Dialog</ts-button>\n    <ts-dialog ${attrs.join(' ')}>\n      <p style=\"margin: 0; font-family: sans-serif;\">This is the dialog body content. You can place any content here.</p>\n      <div slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\">\n          <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n          <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Confirm</ts-button>\n        </ts-row>\n      </div>\n    </ts-dialog>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    heading: 'Dialog Title',\n    size: 'sm',\n    dismissible: true,\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-row gap=\"2\">\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Small Dialog</ts-button>\n      <ts-dialog heading=\"Small Dialog\" size=\"sm\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a small dialog, suitable for simple confirmations.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Medium Dialog</ts-button>\n      <ts-dialog heading=\"Medium Dialog\" size=\"md\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a medium dialog with more room for content. It works well for forms and moderate amounts of information.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Large Dialog</ts-button>\n      <ts-dialog heading=\"Large Dialog\" size=\"lg\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a large dialog, ideal for complex content like data tables, multi-step forms, or detailed previews.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n  </ts-row>\n`;\n\nexport const DeleteConfirmation = (): string => `\n  <ts-button variant=\"danger\" onclick=\"this.nextElementSibling.show()\">Delete Item</ts-button>\n  <ts-dialog heading=\"Delete this item?\" size=\"sm\">\n    <p style=\"margin: 0; font-family: sans-serif; color: #555;\">\n      Are you sure you want to delete this item? This action cannot be undone and all associated data will be permanently removed.\n    </p>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n        <ts-button variant=\"danger\" onclick=\"this.closest('ts-dialog').close()\">Delete</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const UnsavedChanges = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Leave Page</ts-button>\n  <ts-dialog heading=\"Unsaved changes\" size=\"sm\">\n    <p style=\"margin: 0; font-family: sans-serif; color: #555;\">\n      You have unsaved changes. If you leave this page, your changes will be lost. Would you like to save before leaving?\n    </p>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Discard</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Save Changes</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const NonDismissible = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Open Non-Dismissible</ts-button>\n  <ts-dialog heading=\"Terms of Service\" size=\"md\" dismissible=\"false\">\n    <div style=\"font-family: sans-serif; color: #555;\">\n      <p style=\"margin: 0 0 12px;\">Please read and accept the terms of service to continue using this application.</p>\n      <div style=\"padding: 12px; background: #f9fafb; border-radius: 6px; max-height: 150px; overflow-y: auto; font-size: 14px;\">\n        <p style=\"margin: 0 0 8px;\">1. You agree to use this software responsibly.</p>\n        <p style=\"margin: 0 0 8px;\">2. You will not share your credentials with others.</p>\n        <p style=\"margin: 0 0 8px;\">3. Data uploaded remains your intellectual property.</p>\n        <p style=\"margin: 0;\">4. We reserve the right to update these terms.</p>\n      </div>\n    </div>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">I Accept</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const FormDialog = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Edit Profile</ts-button>\n  <ts-dialog heading=\"Edit Profile\" size=\"md\">\n    <ts-stack gap=\"3\">\n      <ts-input label=\"Full Name\" placeholder=\"Enter your name\" value=\"James Kennedy\"></ts-input>\n      <ts-input label=\"Email\" placeholder=\"Enter your email\" value=\"james@example.com\"></ts-input>\n      <ts-textarea label=\"Bio\" placeholder=\"Tell us about yourself...\" rows=\"3\"></ts-textarea>\n    </ts-stack>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Save</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n"]}

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,94 @@
+/* ==========================================================================
+   ts-divider — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-divider-color     Line color
+     --ts-divider-spacing   Spacing above/below (or left/right for vertical)
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-divider-color: var(--ts-color-border-subtle);
+  --ts-divider-spacing: var(--ts-spacing-3);
+}
+
+/* ---- Horizontal ---- */
+:host([orientation="horizontal"]) {
+  inline-size: 100%;
+  padding-block: var(--ts-divider-spacing);
+}
+
+:host([orientation="horizontal"]) .divider__base {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+}
+
+:host([orientation="horizontal"]:not([class*="has-label"])) .divider__line {
+  flex: 1;
+  block-size: 0;
+  border-block-start: 1px solid var(--ts-divider-color);
+}
+
+:host([orientation="horizontal"]) .divider__line--start,
+:host([orientation="horizontal"]) .divider__line--end {
+  flex: 1;
+  block-size: 0;
+  border-block-start: 1px solid var(--ts-divider-color);
+}
+
+/* ---- Dashed ---- */
+:host([variant="dashed"]) .divider__line,
+:host([variant="dashed"]) .divider__line--start,
+:host([variant="dashed"]) .divider__line--end {
+  border-block-start-style: dashed;
+}
+
+/* ---- Dotted ---- */
+:host([variant="dotted"]) .divider__line,
+:host([variant="dotted"]) .divider__line--start,
+:host([variant="dotted"]) .divider__line--end {
+  border-block-start-style: dotted;
+}
+
+/* ---- Label ---- */
+.divider__label {
+  padding-inline: var(--ts-spacing-3);
+  font-size: var(--ts-font-size-xs);
+  color: var(--ts-color-text-secondary);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* ---- Vertical ---- */
+:host([orientation="vertical"]) {
+  display: inline-block;
+  block-size: 100%;
+  padding-inline: var(--ts-divider-spacing);
+}
+
+:host([orientation="vertical"]) .divider__base {
+  display: flex;
+  block-size: 100%;
+}
+
+:host([orientation="vertical"]) .divider__line {
+  inline-size: 0;
+  block-size: 100%;
+  border-inline-start: 1px solid var(--ts-divider-color);
+}
+
+:host([orientation="vertical"][variant="dashed"]) .divider__line {
+  border-inline-start-style: dashed;
+}
+
+:host([orientation="vertical"][variant="dotted"]) .divider__line {
+  border-inline-start-style: dotted;
+}
+
+/* ---- Has-label class (for horizontal with text) ---- */
+.ts-divider--has-label .divider__line {
+  /* overridden by --start/--end when label present */
+}