@tessera-ui/core 0.4.0

package/dist/collection/components/menu/menu.js

@@ -0,0 +1,295 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot trigger - The element that opens the menu (e.g., a button).
+ * @slot - Default slot for ts-menu-item children.
+ *
+ * @part panel - The dropdown panel container.
+ */
+export class TsMenu {
+    hostEl;
+    menuId = generateId('ts-menu');
+    triggerEl;
+    /** Whether the menu dropdown is open. */
+    open = false;
+    /** How the menu is triggered. */
+    trigger = 'click';
+    /** Placement of the dropdown relative to the trigger. */
+    placement = 'bottom-start';
+    /** Emitted when the menu opens. */
+    tsOpen;
+    /** Emitted when the menu closes. */
+    tsClose;
+    /** Tracks the currently focused item index for keyboard navigation. */
+    focusedIndex = -1;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.tsOpen.emit();
+            requestAnimationFrame(() => {
+                this.focusFirstItem();
+            });
+        }
+        else {
+            this.focusedIndex = -1;
+            this.tsClose.emit();
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.open && !this.hostEl.contains(event.target)) {
+            this.open = false;
+        }
+    }
+    handleItemSelect() {
+        this.open = false;
+        this.triggerEl?.focus();
+    }
+    handleKeydown(event) {
+        if (!this.open)
+            return;
+        const items = this.getMenuItems();
+        if (items.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                this.focusedIndex = (this.focusedIndex + 1) % items.length;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.focusItem(items[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.focusedIndex = items.length - 1;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                this.open = false;
+                this.triggerEl?.focus();
+                break;
+            }
+            case 'Tab': {
+                this.open = false;
+                break;
+            }
+        }
+    }
+    getMenuItems() {
+        return Array.from(this.hostEl.querySelectorAll('ts-menu-item:not([disabled])'));
+    }
+    focusItem(el) {
+        const item = el;
+        if (typeof item.setFocus === 'function') {
+            item.setFocus();
+        }
+        else {
+            el.focus();
+        }
+    }
+    focusFirstItem() {
+        const items = this.getMenuItems();
+        if (items.length > 0) {
+            this.focusedIndex = 0;
+            this.focusItem(items[0]);
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.trigger === 'click') {
+            this.open = !this.open;
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open = true;
+        }
+    };
+    handleMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.open = true;
+        }
+    };
+    handleMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.open = false;
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '779dbf74095a42f69a4e9c044423cb04ec19cd41', class: {
+                'ts-menu': true,
+                'ts-menu--open': this.open,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '6116720d4806a302576a65a88877f70c7be6d6a0', class: "menu__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, "aria-haspopup": "true", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.menuId }, h("slot", { key: 'e0dbd29ac0e2eec75047ff0c6c48c1f8d1df0b22', name: "trigger" })), h("div", { key: '8f137fbe94c1793bd670cc473c062b7e60e60f8b', class: {
+                'menu__panel': true,
+                'menu__panel--open': this.open,
+                [`menu__panel--${this.placement}`]: true,
+            }, part: "panel", id: this.menuId, role: "menu", "aria-hidden": !this.open ? 'true' : undefined }, h("slot", { key: '4d9d31af73853300a50781b82b31764f6d6529b5' }))));
+    }
+    static get is() { return "ts-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menu.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 menu dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsMenuTrigger",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {
+                        "TsMenuTrigger": {
+                            "location": "local",
+                            "path": "/home/runner/work/tessera-ui/tessera-ui/src/components/menu/menu.tsx",
+                            "id": "src/components/menu/menu.tsx::TsMenuTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How the menu is triggered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trigger",
+                "defaultValue": "'click'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsMenuPlacement",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "TsMenuPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/tessera-ui/tessera-ui/src/components/menu/menu.tsx",
+                            "id": "src/components/menu/menu.tsx::TsMenuPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the dropdown relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsOpen",
+                "name": "tsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the menu opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the menu closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "tsSelect",
+                "method": "handleItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Watch, Listen } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nexport type TsMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\n\nexport type TsMenuTrigger = 'click' | 'hover';\n\n/**\n * @slot trigger - The element that opens the menu (e.g., a button).\n * @slot - Default slot for ts-menu-item children.\n *\n * @part panel - The dropdown panel container.\n */\n@Component({\n  tag: 'ts-menu',\n  styleUrl: 'menu.css',\n  shadow: true,\n})\nexport class TsMenu {\n  @Element() hostEl!: HTMLElement;\n\n  private menuId = generateId('ts-menu');\n  private triggerEl?: HTMLElement;\n\n  /** Whether the menu dropdown is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** How the menu is triggered. */\n  @Prop({ reflect: true }) trigger: TsMenuTrigger = 'click';\n\n  /** Placement of the dropdown relative to the trigger. */\n  @Prop({ reflect: true }) placement: TsMenuPlacement = 'bottom-start';\n\n  /** Emitted when the menu opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the menu closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Tracks the currently focused item index for keyboard navigation. */\n  @State() focusedIndex = -1;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.tsOpen.emit();\n      requestAnimationFrame(() => {\n        this.focusFirstItem();\n      });\n    } else {\n      this.focusedIndex = -1;\n      this.tsClose.emit();\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent): void {\n    if (this.open && !this.hostEl.contains(event.target as Node)) {\n      this.open = false;\n    }\n  }\n\n  @Listen('tsSelect')\n  handleItemSelect(): void {\n    this.open = false;\n    this.triggerEl?.focus();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event: KeyboardEvent): void {\n    if (!this.open) return;\n\n    const items = this.getMenuItems();\n    if (items.length === 0) return;\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        this.focusedIndex = (this.focusedIndex + 1) % items.length;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        this.focusedIndex = 0;\n        this.focusItem(items[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        this.focusedIndex = items.length - 1;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'Escape': {\n        event.preventDefault();\n        this.open = false;\n        this.triggerEl?.focus();\n        break;\n      }\n      case 'Tab': {\n        this.open = false;\n        break;\n      }\n    }\n  }\n\n  private getMenuItems(): HTMLElement[] {\n    return Array.from(this.hostEl.querySelectorAll<HTMLElement>('ts-menu-item:not([disabled])'));\n  }\n\n  private focusItem(el: HTMLElement): void {\n    const item = el as HTMLElement & { setFocus?: () => Promise<void> };\n    if (typeof item.setFocus === 'function') {\n      item.setFocus();\n    } else {\n      el.focus();\n    }\n  }\n\n  private focusFirstItem(): void {\n    const items = this.getMenuItems();\n    if (items.length > 0) {\n      this.focusedIndex = 0;\n      this.focusItem(items[0]);\n    }\n  }\n\n  private handleTriggerClick = (): void => {\n    if (this.trigger === 'click') {\n      this.open = !this.open;\n    }\n  };\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open = true;\n    }\n  };\n\n  private handleMouseEnter = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = false;\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-menu': true,\n          'ts-menu--open': this.open,\n        }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div\n          class=\"menu__trigger\"\n          ref={(el) => (this.triggerEl = el)}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeydown}\n          aria-haspopup=\"true\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={this.menuId}\n        >\n          <slot name=\"trigger\" />\n        </div>\n\n        <div\n          class={{\n            'menu__panel': true,\n            'menu__panel--open': this.open,\n            [`menu__panel--${this.placement}`]: true,\n          }}\n          part=\"panel\"\n          id={this.menuId}\n          role=\"menu\"\n          aria-hidden={!this.open ? 'true' : undefined}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,126 @@
+// Hand-written stories for ts-menu
+export default {
+    title: 'Components/Menu',
+    tags: ['autodocs'],
+    argTypes: {
+        open: { control: 'boolean', description: 'Whether the menu dropdown is open.' },
+        trigger: {
+            control: 'select',
+            options: ['click', 'hover'],
+            description: 'How the menu is triggered.',
+        },
+        placement: {
+            control: 'select',
+            options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+            description: 'Placement of the dropdown relative to the trigger.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.open)
+        attrs.push('open');
+    if (args.trigger !== undefined && args.trigger !== null)
+        attrs.push(`trigger="${args.trigger}"`);
+    if (args.placement !== undefined && args.placement !== null)
+        attrs.push(`placement="${args.placement}"`);
+    return `
+    <ts-menu ${attrs.join(' ')}>
+      <ts-button slot="trigger">Actions</ts-button>
+      <ts-menu-item value="edit">Edit</ts-menu-item>
+      <ts-menu-item value="duplicate">Duplicate</ts-menu-item>
+      <ts-menu-item value="archive">Archive</ts-menu-item>
+      <ts-menu-item value="delete">Delete</ts-menu-item>
+    </ts-menu>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        open: false,
+        trigger: 'click',
+        placement: 'bottom-start',
+    },
+});
+export const Placements = () => `
+  <div style="display: flex; gap: 24px; flex-wrap: wrap; padding: 80px 20px;">
+    <ts-menu placement="bottom-start">
+      <ts-button slot="trigger">Bottom Start</ts-button>
+      <ts-menu-item value="one">Option One</ts-menu-item>
+      <ts-menu-item value="two">Option Two</ts-menu-item>
+      <ts-menu-item value="three">Option Three</ts-menu-item>
+    </ts-menu>
+    <ts-menu placement="bottom-end">
+      <ts-button slot="trigger">Bottom End</ts-button>
+      <ts-menu-item value="one">Option One</ts-menu-item>
+      <ts-menu-item value="two">Option Two</ts-menu-item>
+      <ts-menu-item value="three">Option Three</ts-menu-item>
+    </ts-menu>
+    <ts-menu placement="top-start">
+      <ts-button slot="trigger">Top Start</ts-button>
+      <ts-menu-item value="one">Option One</ts-menu-item>
+      <ts-menu-item value="two">Option Two</ts-menu-item>
+      <ts-menu-item value="three">Option Three</ts-menu-item>
+    </ts-menu>
+    <ts-menu placement="top-end">
+      <ts-button slot="trigger">Top End</ts-button>
+      <ts-menu-item value="one">Option One</ts-menu-item>
+      <ts-menu-item value="two">Option Two</ts-menu-item>
+      <ts-menu-item value="three">Option Three</ts-menu-item>
+    </ts-menu>
+  </div>
+`;
+export const WithDisabledItems = () => `
+  <ts-menu>
+    <ts-button slot="trigger">File Actions</ts-button>
+    <ts-menu-item value="edit">Edit</ts-menu-item>
+    <ts-menu-item value="duplicate">Duplicate</ts-menu-item>
+    <ts-menu-item value="move" disabled>Move (no permission)</ts-menu-item>
+    <ts-menu-item value="archive">Archive</ts-menu-item>
+    <ts-menu-item value="delete" disabled>Delete (locked)</ts-menu-item>
+  </ts-menu>
+`;
+export const HoverTrigger = () => `
+  <ts-menu trigger="hover">
+    <ts-button slot="trigger">Hover Me</ts-button>
+    <ts-menu-item value="profile">Profile</ts-menu-item>
+    <ts-menu-item value="settings">Settings</ts-menu-item>
+    <ts-menu-item value="help">Help Center</ts-menu-item>
+    <ts-menu-item value="logout">Log Out</ts-menu-item>
+  </ts-menu>
+`;
+export const WithLinks = () => `
+  <ts-menu>
+    <ts-button slot="trigger">Navigate</ts-button>
+    <ts-menu-item value="docs" href="https://example.com/docs">Documentation</ts-menu-item>
+    <ts-menu-item value="api" href="https://example.com/api">API Reference</ts-menu-item>
+    <ts-menu-item value="changelog" href="https://example.com/changelog">Changelog</ts-menu-item>
+    <ts-menu-item value="support" href="https://example.com/support">Support</ts-menu-item>
+  </ts-menu>
+`;
+export const ContextMenu = () => `
+  <div style="display: flex; gap: 16px;">
+    <ts-menu placement="bottom-end">
+      <ts-button slot="trigger" appearance="ghost" size="sm">...</ts-button>
+      <ts-menu-item value="edit">Edit</ts-menu-item>
+      <ts-menu-item value="duplicate">Duplicate</ts-menu-item>
+      <ts-menu-item value="archive">Archive</ts-menu-item>
+      <ts-menu-item value="delete">Delete</ts-menu-item>
+    </ts-menu>
+  </div>
+`;
+export const UserMenu = () => `
+  <ts-menu placement="bottom-end">
+    <ts-button slot="trigger" appearance="ghost">
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <ts-avatar name="James Kennedy" color="#6366f1" size="xs"></ts-avatar>
+        <span>James Kennedy</span>
+      </div>
+    </ts-button>
+    <ts-menu-item value="profile">My Profile</ts-menu-item>
+    <ts-menu-item value="settings">Account Settings</ts-menu-item>
+    <ts-menu-item value="billing">Billing</ts-menu-item>
+    <ts-menu-item value="team">Team Management</ts-menu-item>
+    <ts-menu-item value="logout">Sign Out</ts-menu-item>
+  </ts-menu>
+`;
+//# sourceMappingURL=menu.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.stories.js","sourceRoot":"","sources":["../../../src/components/menu/menu.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oCAAoC,EAAE;QAC/E,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;YAC3B,WAAW,EAAE,4BAA4B;SAC1C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,CAAC;YAC/D,WAAW,EAAE,oDAAoD;SAClE;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,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,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACzG,OAAO;eACM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;GAO3B,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,OAAO;QAChB,SAAS,EAAE,cAAc;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;CAS9C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQzC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUxC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;CAcrC,CAAC","sourcesContent":["// Hand-written stories for ts-menu\n\nexport default {\n  title: 'Components/Menu',\n  tags: ['autodocs'],\n  argTypes: {\n    open: { control: 'boolean', description: 'Whether the menu dropdown is open.' },\n    trigger: {\n      control: 'select',\n      options: ['click', 'hover'],\n      description: 'How the menu is triggered.',\n    },\n    placement: {\n      control: 'select',\n      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],\n      description: 'Placement of the dropdown relative to the trigger.',\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.trigger !== undefined && args.trigger !== null) attrs.push(`trigger=\"${args.trigger}\"`);\n  if (args.placement !== undefined && args.placement !== null) attrs.push(`placement=\"${args.placement}\"`);\n  return `\n    <ts-menu ${attrs.join(' ')}>\n      <ts-button slot=\"trigger\">Actions</ts-button>\n      <ts-menu-item value=\"edit\">Edit</ts-menu-item>\n      <ts-menu-item value=\"duplicate\">Duplicate</ts-menu-item>\n      <ts-menu-item value=\"archive\">Archive</ts-menu-item>\n      <ts-menu-item value=\"delete\">Delete</ts-menu-item>\n    </ts-menu>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    trigger: 'click',\n    placement: 'bottom-start',\n  },\n});\n\nexport const Placements = (): string => `\n  <div style=\"display: flex; gap: 24px; flex-wrap: wrap; padding: 80px 20px;\">\n    <ts-menu placement=\"bottom-start\">\n      <ts-button slot=\"trigger\">Bottom Start</ts-button>\n      <ts-menu-item value=\"one\">Option One</ts-menu-item>\n      <ts-menu-item value=\"two\">Option Two</ts-menu-item>\n      <ts-menu-item value=\"three\">Option Three</ts-menu-item>\n    </ts-menu>\n    <ts-menu placement=\"bottom-end\">\n      <ts-button slot=\"trigger\">Bottom End</ts-button>\n      <ts-menu-item value=\"one\">Option One</ts-menu-item>\n      <ts-menu-item value=\"two\">Option Two</ts-menu-item>\n      <ts-menu-item value=\"three\">Option Three</ts-menu-item>\n    </ts-menu>\n    <ts-menu placement=\"top-start\">\n      <ts-button slot=\"trigger\">Top Start</ts-button>\n      <ts-menu-item value=\"one\">Option One</ts-menu-item>\n      <ts-menu-item value=\"two\">Option Two</ts-menu-item>\n      <ts-menu-item value=\"three\">Option Three</ts-menu-item>\n    </ts-menu>\n    <ts-menu placement=\"top-end\">\n      <ts-button slot=\"trigger\">Top End</ts-button>\n      <ts-menu-item value=\"one\">Option One</ts-menu-item>\n      <ts-menu-item value=\"two\">Option Two</ts-menu-item>\n      <ts-menu-item value=\"three\">Option Three</ts-menu-item>\n    </ts-menu>\n  </div>\n`;\n\nexport const WithDisabledItems = (): string => `\n  <ts-menu>\n    <ts-button slot=\"trigger\">File Actions</ts-button>\n    <ts-menu-item value=\"edit\">Edit</ts-menu-item>\n    <ts-menu-item value=\"duplicate\">Duplicate</ts-menu-item>\n    <ts-menu-item value=\"move\" disabled>Move (no permission)</ts-menu-item>\n    <ts-menu-item value=\"archive\">Archive</ts-menu-item>\n    <ts-menu-item value=\"delete\" disabled>Delete (locked)</ts-menu-item>\n  </ts-menu>\n`;\n\nexport const HoverTrigger = (): string => `\n  <ts-menu trigger=\"hover\">\n    <ts-button slot=\"trigger\">Hover Me</ts-button>\n    <ts-menu-item value=\"profile\">Profile</ts-menu-item>\n    <ts-menu-item value=\"settings\">Settings</ts-menu-item>\n    <ts-menu-item value=\"help\">Help Center</ts-menu-item>\n    <ts-menu-item value=\"logout\">Log Out</ts-menu-item>\n  </ts-menu>\n`;\n\nexport const WithLinks = (): string => `\n  <ts-menu>\n    <ts-button slot=\"trigger\">Navigate</ts-button>\n    <ts-menu-item value=\"docs\" href=\"https://example.com/docs\">Documentation</ts-menu-item>\n    <ts-menu-item value=\"api\" href=\"https://example.com/api\">API Reference</ts-menu-item>\n    <ts-menu-item value=\"changelog\" href=\"https://example.com/changelog\">Changelog</ts-menu-item>\n    <ts-menu-item value=\"support\" href=\"https://example.com/support\">Support</ts-menu-item>\n  </ts-menu>\n`;\n\nexport const ContextMenu = (): string => `\n  <div style=\"display: flex; gap: 16px;\">\n    <ts-menu placement=\"bottom-end\">\n      <ts-button slot=\"trigger\" appearance=\"ghost\" size=\"sm\">...</ts-button>\n      <ts-menu-item value=\"edit\">Edit</ts-menu-item>\n      <ts-menu-item value=\"duplicate\">Duplicate</ts-menu-item>\n      <ts-menu-item value=\"archive\">Archive</ts-menu-item>\n      <ts-menu-item value=\"delete\">Delete</ts-menu-item>\n    </ts-menu>\n  </div>\n`;\n\nexport const UserMenu = (): string => `\n  <ts-menu placement=\"bottom-end\">\n    <ts-button slot=\"trigger\" appearance=\"ghost\">\n      <div style=\"display: flex; align-items: center; gap: 8px;\">\n        <ts-avatar name=\"James Kennedy\" color=\"#6366f1\" size=\"xs\"></ts-avatar>\n        <span>James Kennedy</span>\n      </div>\n    </ts-button>\n    <ts-menu-item value=\"profile\">My Profile</ts-menu-item>\n    <ts-menu-item value=\"settings\">Account Settings</ts-menu-item>\n    <ts-menu-item value=\"billing\">Billing</ts-menu-item>\n    <ts-menu-item value=\"team\">Team Management</ts-menu-item>\n    <ts-menu-item value=\"logout\">Sign Out</ts-menu-item>\n  </ts-menu>\n`;\n"]}

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,131 @@
+/* ==========================================================================
+   ts-modal — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-modal-bg          Dialog background
+     --ts-modal-overlay-bg  Overlay background
+     --ts-modal-radius      Dialog border radius
+     --ts-modal-shadow      Dialog box-shadow
+   ========================================================================== */
+
+:host {
+  font-family: var(--ts-font-family-base);
+
+  --ts-modal-bg: var(--ts-color-bg-elevated);
+  --ts-modal-overlay-bg: var(--ts-color-bg-overlay);
+  --ts-modal-radius: var(--ts-shape-overlay);
+  --ts-modal-shadow: var(--ts-shadow-xl);
+}
+
+/* ---- Overlay ---- */
+.modal__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-modal-overlay-bg);
+  animation: ts-fade-in 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* ---- Dialog ---- */
+.modal__dialog {
+  position: relative;
+  background-color: var(--ts-modal-bg);
+  border-radius: var(--ts-modal-radius);
+  box-shadow: var(--ts-modal-shadow);
+  max-height: calc(100vh - var(--ts-spacing-16));
+  overflow-y: auto;
+  animation: ts-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+
+/* ---- Sizes ---- */
+.modal__dialog--xs  { width: 100%; max-width: 320px; }
+.modal__dialog--sm  { width: 100%; max-width: 440px; }
+.modal__dialog--md  { width: 100%; max-width: 560px; }
+.modal__dialog--lg  { width: 100%; max-width: 720px; }
+.modal__dialog--xl  { width: 100%; max-width: 960px; }
+
+/* ---- Close Button ---- */
+.modal__close {
+  position: absolute;
+  top: 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;
+}
+
+.modal__close:hover {
+  background-color: var(--ts-color-bg-hover);
+  color: var(--ts-color-text-secondary);
+}
+
+.modal__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Sections ---- */
+.modal__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);
+}
+
+.modal__header:empty {
+  display: none;
+}
+
+.modal__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);
+}
+
+.modal__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);
+}
+
+.modal__footer:empty {
+  display: none;
+}
+
+/* ---- Animations ---- */
+@keyframes ts-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ts-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}