@tessera-ui/core 0.4.0

package/dist/collection/components/drawer/drawer.js

@@ -0,0 +1,288 @@
+import { h, Host } from "@stencil/core";
+import { generateId, trapFocus } from "../../utils/aria";
+/**
+ * @slot - Default slot for drawer body content.
+ * @slot footer - Drawer footer content (e.g., action buttons).
+ *
+ * @part overlay - The backdrop overlay.
+ * @part panel - The slide-in panel container.
+ * @part header - The header wrapper.
+ * @part body - The body wrapper.
+ * @part footer - The footer wrapper.
+ * @part close - The close button.
+ */
+export class TsDrawer {
+    hostEl;
+    panelEl;
+    removeFocusTrap;
+    previouslyFocused;
+    drawerId = generateId('ts-drawer');
+    /** Whether the drawer is open. */
+    open = false;
+    /** Which edge the drawer slides in from. */
+    placement = 'end';
+    /** The drawer's width/height preset. */
+    size = 'md';
+    /** Whether clicking the overlay or pressing Escape closes the drawer. */
+    dismissible = true;
+    /** Accessible heading for the drawer. */
+    heading;
+    /** Emitted when the drawer closes. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openDrawer();
+        }
+        else {
+            this.closeDrawer();
+        }
+    }
+    /** Programmatically open the drawer. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the drawer. */
+    async close() {
+        this.open = false;
+    }
+    openDrawer() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.panelEl) {
+                this.removeFocusTrap = trapFocus(this.panelEl);
+                this.panelEl.focus();
+            }
+        });
+    }
+    closeDrawer() {
+        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();
+        }
+    };
+    handlePanelClick = (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;
+        return (h(Host, { class: {
+                'ts-drawer': true,
+                'ts-drawer--open': this.open,
+                [`ts-drawer--${this.placement}`]: true,
+                [`ts-drawer--${this.size}`]: true,
+            }, onKeyDown: this.handleKeydown }, h("div", { class: "drawer__overlay", part: "overlay", onClick: this.handleOverlayClick }, h("div", { ref: (el) => (this.panelEl = el), class: {
+                'drawer__panel': true,
+                [`drawer__panel--${this.placement}`]: true,
+                [`drawer__panel--${this.size}`]: true,
+            }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-labelledby": !this.heading ? `${this.drawerId}-header` : undefined, tabindex: -1, onClick: this.handlePanelClick }, h("div", { class: "drawer__header", part: "header", id: `${this.drawerId}-header` }, this.heading && h("span", { class: "drawer__title" }, this.heading), this.dismissible && (h("button", { class: "drawer__close", part: "close", type: "button", "aria-label": "Close drawer", onClick: this.handleCloseClick }, "\u2715"))), h("div", { class: "drawer__body", part: "body" }, h("slot", null)), h("div", { class: "drawer__footer", part: "footer" }, h("slot", { name: "footer" }))))));
+    }
+    static get is() { return "ts-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.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 drawer is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which edge the drawer slides in from."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'end'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The drawer's width/height preset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking the overlay or pressing Escape closes the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible heading for the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+    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 drawer 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 drawer.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the drawer.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Method, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for drawer body content.\n * @slot footer - Drawer footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part panel - The slide-in panel 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-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class TsDrawer {\n  @Element() hostEl!: HTMLElement;\n\n  private panelEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private drawerId = generateId('ts-drawer');\n\n  /** Whether the drawer is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge the drawer slides in from. */\n  @Prop({ reflect: true }) placement: 'start' | 'end' | 'top' | 'bottom' = 'end';\n\n  /** The drawer's width/height preset. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  /** Whether clicking the overlay or pressing Escape closes the drawer. */\n  @Prop() dismissible = true;\n\n  /** Accessible heading for the drawer. */\n  @Prop() heading?: string;\n\n  /** Emitted when the drawer 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.openDrawer();\n    } else {\n      this.closeDrawer();\n    }\n  }\n\n  /** Programmatically open the drawer. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the drawer. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openDrawer(): 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.panelEl) {\n        this.removeFocusTrap = trapFocus(this.panelEl);\n        this.panelEl.focus();\n      }\n    });\n  }\n\n  private closeDrawer(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    document.body.style.overflow = '';\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 handlePanelClick = (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    return (\n      <Host\n        class={{\n          'ts-drawer': true,\n          'ts-drawer--open': this.open,\n          [`ts-drawer--${this.placement}`]: true,\n          [`ts-drawer--${this.size}`]: true,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"drawer__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.panelEl = el)}\n            class={{\n              'drawer__panel': true,\n              [`drawer__panel--${this.placement}`]: true,\n              [`drawer__panel--${this.size}`]: true,\n            }}\n            part=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.heading}\n            aria-labelledby={!this.heading ? `${this.drawerId}-header` : undefined}\n            tabindex={-1}\n            onClick={this.handlePanelClick}\n          >\n            <div class=\"drawer__header\" part=\"header\" id={`${this.drawerId}-header`}>\n              {this.heading && <span class=\"drawer__title\">{this.heading}</span>}\n              {this.dismissible && (\n                <button\n                  class=\"drawer__close\"\n                  part=\"close\"\n                  type=\"button\"\n                  aria-label=\"Close drawer\"\n                  onClick={this.handleCloseClick}\n                >\n                  &#x2715;\n                </button>\n              )}\n            </div>\n\n            <div class=\"drawer__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"drawer__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,143 @@
+// Hand-written stories for ts-drawer
+export default {
+    title: 'Components/Drawer',
+    tags: ['autodocs'],
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Whether the drawer is open.',
+        },
+        placement: {
+            control: 'select',
+            options: ['start', 'end', 'top', 'bottom'],
+            description: 'Which edge the drawer slides in from.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg', 'full'],
+            description: 'The drawer\'s width/height preset.',
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Whether clicking the overlay or pressing Escape closes the drawer.',
+        },
+        heading: {
+            control: 'text',
+            description: 'Accessible heading for the drawer.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.open)
+        attrs.push('open');
+    if (args.placement !== undefined)
+        attrs.push(`placement="${args.placement}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    if (args.dismissible !== undefined && !args.dismissible) {
+        // dismissible defaults to true
+    }
+    else {
+        attrs.push('dismissible');
+    }
+    if (args.heading !== undefined)
+        attrs.push(`heading="${args.heading}"`);
+    return `
+    <ts-button onclick="this.nextElementSibling.setAttribute('open','')">Open Drawer</ts-button>
+    <ts-drawer ${attrs.join(' ')}>
+      <p style="font-family: sans-serif; margin: 0;">This is the drawer content area.</p>
+      <div slot="footer" style="display: flex; gap: 8px; justify-content: flex-end;">
+        <ts-button appearance="outline" onclick="this.closest('ts-drawer').removeAttribute('open')">Cancel</ts-button>
+        <ts-button variant="primary" onclick="this.closest('ts-drawer').removeAttribute('open')">Save</ts-button>
+      </div>
+    </ts-drawer>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        open: false,
+        placement: 'end',
+        size: 'md',
+        dismissible: true,
+        heading: 'Settings',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 8px;">
+    <ts-button appearance="outline" onclick="document.getElementById('drawer-sm').setAttribute('open','')">Small</ts-button>
+    <ts-button appearance="outline" onclick="document.getElementById('drawer-md').setAttribute('open','')">Medium</ts-button>
+    <ts-button appearance="outline" onclick="document.getElementById('drawer-lg').setAttribute('open','')">Large</ts-button>
+    <ts-button appearance="outline" onclick="document.getElementById('drawer-full').setAttribute('open','')">Full</ts-button>
+  </div>
+  <ts-drawer id="drawer-sm" heading="Small Drawer" size="sm" dismissible>
+    <p style="font-family: sans-serif;">Small drawer content.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-md" heading="Medium Drawer" size="md" dismissible>
+    <p style="font-family: sans-serif;">Medium drawer content.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-lg" heading="Large Drawer" size="lg" dismissible>
+    <p style="font-family: sans-serif;">Large drawer content.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-full" heading="Full Drawer" size="full" dismissible>
+    <p style="font-family: sans-serif;">Full-width drawer content.</p>
+  </ts-drawer>
+`;
+export const States = () => `
+  <div style="display: flex; gap: 8px;">
+    <ts-button onclick="document.getElementById('drawer-start').setAttribute('open','')">From Start</ts-button>
+    <ts-button onclick="document.getElementById('drawer-end').setAttribute('open','')">From End</ts-button>
+    <ts-button onclick="document.getElementById('drawer-top').setAttribute('open','')">From Top</ts-button>
+    <ts-button onclick="document.getElementById('drawer-bottom').setAttribute('open','')">From Bottom</ts-button>
+  </div>
+  <ts-drawer id="drawer-start" heading="Start Drawer" placement="start" dismissible>
+    <p style="font-family: sans-serif;">Slides in from the start (left) edge.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-end" heading="End Drawer" placement="end" dismissible>
+    <p style="font-family: sans-serif;">Slides in from the end (right) edge.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-top" heading="Top Drawer" placement="top" dismissible>
+    <p style="font-family: sans-serif;">Slides in from the top edge.</p>
+  </ts-drawer>
+  <ts-drawer id="drawer-bottom" heading="Bottom Drawer" placement="bottom" dismissible>
+    <p style="font-family: sans-serif;">Slides in from the bottom edge.</p>
+  </ts-drawer>
+`;
+export const Composition = () => `
+  <ts-button variant="primary" onclick="document.getElementById('drawer-settings').setAttribute('open','')">Open Settings Panel</ts-button>
+  <ts-drawer id="drawer-settings" heading="Settings" placement="end" size="md" dismissible>
+    <div style="font-family: sans-serif; display: flex; flex-direction: column; gap: 20px;">
+      <div>
+        <h4 style="margin: 0 0 12px;">Notifications</h4>
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          <ts-toggle label="Email notifications"></ts-toggle>
+          <ts-toggle label="Push notifications"></ts-toggle>
+          <ts-toggle label="SMS alerts"></ts-toggle>
+        </div>
+      </div>
+      <ts-divider></ts-divider>
+      <div>
+        <h4 style="margin: 0 0 12px;">Appearance</h4>
+        <ts-select label="Theme" placeholder="Choose theme">
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+          <option value="auto">System</option>
+        </ts-select>
+      </div>
+      <ts-divider></ts-divider>
+      <div>
+        <h4 style="margin: 0 0 12px;">Language</h4>
+        <ts-select label="Preferred language" placeholder="Select language">
+          <option value="en">English</option>
+          <option value="es">Spanish</option>
+          <option value="fr">French</option>
+        </ts-select>
+      </div>
+    </div>
+    <div slot="footer" style="display: flex; gap: 8px; justify-content: flex-end;">
+      <ts-button appearance="outline" onclick="document.getElementById('drawer-settings').removeAttribute('open')">Cancel</ts-button>
+      <ts-button variant="primary" onclick="document.getElementById('drawer-settings').removeAttribute('open')">Save Changes</ts-button>
+    </div>
+  </ts-drawer>
+`;
+//# sourceMappingURL=drawer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6BAA6B;SAC3C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;YAC1C,WAAW,EAAE,uCAAuC;SACrD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;YACnC,WAAW,EAAE,oCAAoC;SAClD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oEAAoE;SAClF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oCAAoC;SAClD;KACF;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,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC9E,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACxD,+BAA+B;IACjC,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5B,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,OAAO;;iBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;GAO7B,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,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxC,CAAC","sourcesContent":["// Hand-written stories for ts-drawer\n\nexport default {\n  title: 'Components/Drawer',\n  tags: ['autodocs'],\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Whether the drawer is open.',\n    },\n    placement: {\n      control: 'select',\n      options: ['start', 'end', 'top', 'bottom'],\n      description: 'Which edge the drawer slides in from.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'full'],\n      description: 'The drawer\\'s width/height preset.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether clicking the overlay or pressing Escape closes the drawer.',\n    },\n    heading: {\n      control: 'text',\n      description: 'Accessible heading for the drawer.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.placement !== undefined) attrs.push(`placement=\"${args.placement}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.dismissible !== undefined && !args.dismissible) {\n    // dismissible defaults to true\n  } else {\n    attrs.push('dismissible');\n  }\n  if (args.heading !== undefined) attrs.push(`heading=\"${args.heading}\"`);\n  return `\n    <ts-button onclick=\"this.nextElementSibling.setAttribute('open','')\">Open Drawer</ts-button>\n    <ts-drawer ${attrs.join(' ')}>\n      <p style=\"font-family: sans-serif; margin: 0;\">This is the drawer content area.</p>\n      <div slot=\"footer\" style=\"display: flex; gap: 8px; justify-content: flex-end;\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-drawer').removeAttribute('open')\">Cancel</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-drawer').removeAttribute('open')\">Save</ts-button>\n      </div>\n    </ts-drawer>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    placement: 'end',\n    size: 'md',\n    dismissible: true,\n    heading: 'Settings',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 8px;\">\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-sm').setAttribute('open','')\">Small</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-md').setAttribute('open','')\">Medium</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-lg').setAttribute('open','')\">Large</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-full').setAttribute('open','')\">Full</ts-button>\n  </div>\n  <ts-drawer id=\"drawer-sm\" heading=\"Small Drawer\" size=\"sm\" dismissible>\n    <p style=\"font-family: sans-serif;\">Small drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-md\" heading=\"Medium Drawer\" size=\"md\" dismissible>\n    <p style=\"font-family: sans-serif;\">Medium drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-lg\" heading=\"Large Drawer\" size=\"lg\" dismissible>\n    <p style=\"font-family: sans-serif;\">Large drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-full\" heading=\"Full Drawer\" size=\"full\" dismissible>\n    <p style=\"font-family: sans-serif;\">Full-width drawer content.</p>\n  </ts-drawer>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 8px;\">\n    <ts-button onclick=\"document.getElementById('drawer-start').setAttribute('open','')\">From Start</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-end').setAttribute('open','')\">From End</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-top').setAttribute('open','')\">From Top</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-bottom').setAttribute('open','')\">From Bottom</ts-button>\n  </div>\n  <ts-drawer id=\"drawer-start\" heading=\"Start Drawer\" placement=\"start\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the start (left) edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-end\" heading=\"End Drawer\" placement=\"end\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the end (right) edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-top\" heading=\"Top Drawer\" placement=\"top\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the top edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-bottom\" heading=\"Bottom Drawer\" placement=\"bottom\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the bottom edge.</p>\n  </ts-drawer>\n`;\n\nexport const Composition = (): string => `\n  <ts-button variant=\"primary\" onclick=\"document.getElementById('drawer-settings').setAttribute('open','')\">Open Settings Panel</ts-button>\n  <ts-drawer id=\"drawer-settings\" heading=\"Settings\" placement=\"end\" size=\"md\" dismissible>\n    <div style=\"font-family: sans-serif; display: flex; flex-direction: column; gap: 20px;\">\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Notifications</h4>\n        <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n          <ts-toggle label=\"Email notifications\"></ts-toggle>\n          <ts-toggle label=\"Push notifications\"></ts-toggle>\n          <ts-toggle label=\"SMS alerts\"></ts-toggle>\n        </div>\n      </div>\n      <ts-divider></ts-divider>\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Appearance</h4>\n        <ts-select label=\"Theme\" placeholder=\"Choose theme\">\n          <option value=\"light\">Light</option>\n          <option value=\"dark\">Dark</option>\n          <option value=\"auto\">System</option>\n        </ts-select>\n      </div>\n      <ts-divider></ts-divider>\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Language</h4>\n        <ts-select label=\"Preferred language\" placeholder=\"Select language\">\n          <option value=\"en\">English</option>\n          <option value=\"es\">Spanish</option>\n          <option value=\"fr\">French</option>\n        </ts-select>\n      </div>\n    </div>\n    <div slot=\"footer\" style=\"display: flex; gap: 8px; justify-content: flex-end;\">\n      <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-settings').removeAttribute('open')\">Cancel</ts-button>\n      <ts-button variant=\"primary\" onclick=\"document.getElementById('drawer-settings').removeAttribute('open')\">Save Changes</ts-button>\n    </div>\n  </ts-drawer>\n`;\n"]}

package/dist/collection/components/empty-state/empty-state.css

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   ts-empty-state — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-empty-state-icon-size    Icon size
+     --ts-empty-state-icon-color   Icon color
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-empty-state-icon-size: 3rem;
+  --ts-empty-state-icon-color: var(--ts-color-text-tertiary);
+}
+
+.empty-state__base {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-inline: var(--ts-spacing-6);
+  padding-block: var(--ts-spacing-8);
+  gap: var(--ts-spacing-3);
+}
+
+/* ---- Icon ---- */
+.empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ts-empty-state-icon-color);
+  font-size: var(--ts-empty-state-icon-size);
+  margin-block-end: var(--ts-spacing-2);
+}
+
+.empty-state__icon:empty {
+  display: none;
+}
+
+/* ---- Heading ---- */
+.empty-state__heading {
+  margin: 0;
+  font-size: var(--ts-font-size-lg);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+  line-height: var(--ts-line-height-tight);
+}
+
+/* ---- Description ---- */
+.empty-state__description {
+  margin: 0;
+  font-size: var(--ts-font-size-sm);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+  max-inline-size: 36ch;
+}
+
+/* ---- Content ---- */
+.empty-state__content:empty {
+  display: none;
+}
+
+/* ---- Action ---- */
+.empty-state__action {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  margin-block-start: var(--ts-spacing-2);
+}
+
+.empty-state__action:empty {
+  display: none;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .empty-state__base {
+  padding-inline: var(--ts-spacing-4);
+  padding-block: var(--ts-spacing-4);
+  gap: var(--ts-spacing-2);
+}
+
+:host([size="sm"]) .empty-state__icon {
+  --ts-empty-state-icon-size: 2rem;
+}
+
+:host([size="sm"]) .empty-state__heading {
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="sm"]) .empty-state__description {
+  font-size: var(--ts-font-size-xs);
+}
+
+:host([size="lg"]) .empty-state__base {
+  padding-inline: var(--ts-spacing-8);
+  padding-block: var(--ts-spacing-12);
+  gap: var(--ts-spacing-4);
+}
+
+:host([size="lg"]) .empty-state__icon {
+  --ts-empty-state-icon-size: 4.5rem;
+}
+
+:host([size="lg"]) .empty-state__heading {
+  font-size: var(--ts-font-size-xl);
+}
+
+:host([size="lg"]) .empty-state__description {
+  font-size: var(--ts-font-size-md);
+  max-inline-size: 48ch;
+}