@tessera-ui/core 0.4.0

package/dist/collection/components/popover/popover.js

@@ -0,0 +1,305 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot trigger - The element that triggers the popover.
+ * @slot - Default slot for popover content.
+ *
+ * @part base - The popover container.
+ * @part arrow - The popover arrow.
+ * @part trigger - The trigger wrapper.
+ */
+export class TsPopover {
+    hostEl;
+    popoverId = generateId('ts-popover');
+    outsideClickHandler;
+    escapeHandler;
+    /** Whether the popover is currently visible. */
+    open = false;
+    /** Placement of the popover relative to the trigger. */
+    placement = 'bottom';
+    /** How the popover is triggered. */
+    trigger = 'click';
+    /** Whether the popover closes on outside click or Escape. */
+    dismissible = true;
+    /** Emitted when the popover opens. */
+    tsOpen;
+    /** Emitted when the popover closes. */
+    tsClose;
+    isVisible = false;
+    handleOpenChange(newValue) {
+        this.isVisible = newValue;
+        if (newValue) {
+            this.tsOpen.emit();
+            this.addGlobalListeners();
+        }
+        else {
+            this.tsClose.emit();
+            this.removeGlobalListeners();
+        }
+    }
+    connectedCallback() {
+        if (this.open) {
+            this.isVisible = true;
+            this.addGlobalListeners();
+        }
+    }
+    disconnectedCallback() {
+        this.removeGlobalListeners();
+    }
+    /** Programmatically show the popover. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically hide the popover. */
+    async hide() {
+        this.open = false;
+    }
+    addGlobalListeners() {
+        if (this.dismissible) {
+            this.outsideClickHandler = (event) => {
+                const path = event.composedPath();
+                if (!path.includes(this.hostEl)) {
+                    this.open = false;
+                }
+            };
+            this.escapeHandler = (event) => {
+                if (event.key === 'Escape') {
+                    this.open = false;
+                }
+            };
+            // Use setTimeout to avoid capturing the click that opened the popover
+            setTimeout(() => {
+                document.addEventListener('click', this.outsideClickHandler);
+                document.addEventListener('keydown', this.escapeHandler);
+            }, 0);
+        }
+    }
+    removeGlobalListeners() {
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = undefined;
+        }
+        if (this.escapeHandler) {
+            document.removeEventListener('keydown', this.escapeHandler);
+            this.escapeHandler = undefined;
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.trigger === 'click') {
+            this.open = !this.open;
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (this.trigger === 'click' && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.open = !this.open;
+        }
+    };
+    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: '9a797e457251167901cee8ebcb7077b5129bc88d', class: {
+                'ts-popover': true,
+                'ts-popover--open': this.isVisible,
+                [`ts-popover--${this.placement}`]: true,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { key: 'cec789e62522c7d0580fae48563d16ae41c92da4', class: "popover__trigger", part: "trigger", "aria-expanded": this.isVisible ? 'true' : 'false', "aria-controls": this.popoverId, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown }, h("slot", { key: '6cbc8158004db058b42935af9dc07f8bf6457f6d', name: "trigger" })), h("div", { key: 'dc0cfb77b4fbda578336b7c63a78fdac9107d598', class: {
+                'popover__panel': true,
+                [`popover__panel--${this.placement}`]: true,
+                'popover__panel--visible': this.isVisible,
+            }, part: "base", id: this.popoverId, role: "dialog", "aria-hidden": !this.isVisible ? 'true' : undefined }, h("div", { key: 'bcef96d994c1364274eca367a053ef5ec9ddcc8a', class: "popover__arrow", part: "arrow" }), h("div", { key: '027a7e705132e20533ce0f4616b47d5e912e0d78', class: "popover__content" }, h("slot", { key: '838183659524f7687ed2d17ae2c00aa21db2b6d8' })))));
+    }
+    static get is() { return "ts-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.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 popover is currently visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsPopoverPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "TsPopoverPlacement": {
+                            "location": "global",
+                            "id": "global::TsPopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the popover relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover' | 'manual'",
+                    "resolved": "\"click\" | \"hover\" | \"manual\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How the popover is triggered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'click'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover closes on outside click or Escape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsOpen",
+                "name": "tsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover 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 show the popover.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide the popover.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Element, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\ntype TsPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n\n/**\n * @slot trigger - The element that triggers the popover.\n * @slot - Default slot for popover content.\n *\n * @part base - The popover container.\n * @part arrow - The popover arrow.\n * @part trigger - The trigger wrapper.\n */\n@Component({\n  tag: 'ts-popover',\n  styleUrl: 'popover.css',\n  shadow: true,\n})\nexport class TsPopover {\n  @Element() hostEl!: HTMLElement;\n\n  private popoverId = generateId('ts-popover');\n  private outsideClickHandler?: (event: MouseEvent) => void;\n  private escapeHandler?: (event: KeyboardEvent) => void;\n\n  /** Whether the popover is currently visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Placement of the popover relative to the trigger. */\n  @Prop({ reflect: true }) placement: TsPopoverPlacement = 'bottom';\n\n  /** How the popover is triggered. */\n  @Prop() trigger: 'click' | 'hover' | 'manual' = 'click';\n\n  /** Whether the popover closes on outside click or Escape. */\n  @Prop() dismissible = true;\n\n  /** Emitted when the popover opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the popover closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    this.isVisible = newValue;\n    if (newValue) {\n      this.tsOpen.emit();\n      this.addGlobalListeners();\n    } else {\n      this.tsClose.emit();\n      this.removeGlobalListeners();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.addGlobalListeners();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.removeGlobalListeners();\n  }\n\n  /** Programmatically show the popover. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically hide the popover. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  private addGlobalListeners(): void {\n    if (this.dismissible) {\n      this.outsideClickHandler = (event: MouseEvent) => {\n        const path = event.composedPath();\n        if (!path.includes(this.hostEl)) {\n          this.open = false;\n        }\n      };\n      this.escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          this.open = false;\n        }\n      };\n      // Use setTimeout to avoid capturing the click that opened the popover\n      setTimeout(() => {\n        document.addEventListener('click', this.outsideClickHandler!);\n        document.addEventListener('keydown', this.escapeHandler!);\n      }, 0);\n    }\n  }\n\n  private removeGlobalListeners(): void {\n    if (this.outsideClickHandler) {\n      document.removeEventListener('click', this.outsideClickHandler);\n      this.outsideClickHandler = undefined;\n    }\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = undefined;\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 (this.trigger === 'click' && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      this.open = !this.open;\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-popover': true,\n          'ts-popover--open': this.isVisible,\n          [`ts-popover--${this.placement}`]: true,\n        }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span\n          class=\"popover__trigger\"\n          part=\"trigger\"\n          aria-expanded={this.isVisible ? 'true' : 'false'}\n          aria-controls={this.popoverId}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeydown}\n        >\n          <slot name=\"trigger\" />\n        </span>\n\n        <div\n          class={{\n            'popover__panel': true,\n            [`popover__panel--${this.placement}`]: true,\n            'popover__panel--visible': this.isVisible,\n          }}\n          part=\"base\"\n          id={this.popoverId}\n          role=\"dialog\"\n          aria-hidden={!this.isVisible ? 'true' : undefined}\n        >\n          <div class=\"popover__arrow\" part=\"arrow\" />\n          <div class=\"popover__content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,112 @@
+// Hand-written stories for ts-popover
+export default {
+    title: 'Components/Popover',
+    tags: ['autodocs'],
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Whether the popover is currently visible.',
+        },
+        placement: {
+            control: 'select',
+            options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],
+            description: 'Placement of the popover relative to the trigger.',
+        },
+        trigger: {
+            control: 'select',
+            options: ['click', 'hover', 'manual'],
+            description: 'How the popover is triggered.',
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Whether the popover closes on outside click or Escape.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.open)
+        attrs.push('open');
+    if (args.placement !== undefined)
+        attrs.push(`placement="${args.placement}"`);
+    if (args.trigger !== undefined)
+        attrs.push(`trigger="${args.trigger}"`);
+    if (args.dismissible !== undefined && !args.dismissible)
+        attrs.push('dismissible="false"');
+    return `
+    <div style="display: flex; justify-content: center; padding: 100px 0;">
+      <ts-popover ${attrs.join(' ')}>
+        <ts-button slot="trigger">Click me</ts-button>
+        <div style="padding: 16px; max-width: 240px;">
+          <h4 style="margin: 0 0 8px; font-family: sans-serif;">Popover Title</h4>
+          <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666;">
+            This is a rich content popover with some helpful information.
+          </p>
+        </div>
+      </ts-popover>
+    </div>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        open: false,
+        placement: 'bottom',
+        trigger: 'click',
+        dismissible: true,
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; gap: 24px; justify-content: center; padding: 120px 0;">
+    <ts-popover placement="top" trigger="click">
+      <ts-button slot="trigger" appearance="outline">Top</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Popover on top</div>
+    </ts-popover>
+    <ts-popover placement="bottom" trigger="click">
+      <ts-button slot="trigger" appearance="outline">Bottom</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Popover on bottom</div>
+    </ts-popover>
+    <ts-popover placement="left" trigger="click">
+      <ts-button slot="trigger" appearance="outline">Left</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Popover on left</div>
+    </ts-popover>
+    <ts-popover placement="right" trigger="click">
+      <ts-button slot="trigger" appearance="outline">Right</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Popover on right</div>
+    </ts-popover>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; gap: 24px; justify-content: center; padding: 120px 0;">
+    <ts-popover trigger="click">
+      <ts-button slot="trigger">Click trigger</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Opened by click</div>
+    </ts-popover>
+    <ts-popover trigger="hover">
+      <ts-button slot="trigger" appearance="outline">Hover trigger</ts-button>
+      <div style="padding: 12px; font-family: sans-serif;">Opened by hover</div>
+    </ts-popover>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; justify-content: center; padding: 80px 0 200px;">
+    <ts-popover placement="bottom-start" trigger="click">
+      <ts-button slot="trigger" variant="primary">User Profile</ts-button>
+      <div style="padding: 16px; min-width: 240px; font-family: sans-serif;">
+        <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 12px;">
+          <ts-avatar name="Jane Doe" size="md"></ts-avatar>
+          <div>
+            <div style="font-weight: 600;">Jane Doe</div>
+            <div style="font-size: 13px; color: #666;">jane@example.com</div>
+          </div>
+        </div>
+        <ts-divider></ts-divider>
+        <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 12px;">
+          <ts-button appearance="ghost" block size="sm">View Profile</ts-button>
+          <ts-button appearance="ghost" block size="sm">Settings</ts-button>
+          <ts-button appearance="ghost" block size="sm" variant="danger">Sign out</ts-button>
+        </div>
+      </div>
+    </ts-popover>
+  </div>
+`;
+//# sourceMappingURL=popover.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/popover.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2CAA2C;SACzD;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,CAAC;YACjG,WAAW,EAAE,mDAAmD;SACjE;QACD,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;YACrC,WAAW,EAAE,+BAA+B;SAC7C;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,wDAAwD;SACtE;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,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC3F,OAAO;;oBAEW,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;GAUhC,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,QAAQ;QACnB,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,IAAI;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBxC,CAAC","sourcesContent":["// Hand-written stories for ts-popover\n\nexport default {\n  title: 'Components/Popover',\n  tags: ['autodocs'],\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Whether the popover is currently visible.',\n    },\n    placement: {\n      control: 'select',\n      options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],\n      description: 'Placement of the popover relative to the trigger.',\n    },\n    trigger: {\n      control: 'select',\n      options: ['click', 'hover', 'manual'],\n      description: 'How the popover is triggered.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the popover closes on outside click or Escape.',\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.trigger !== undefined) attrs.push(`trigger=\"${args.trigger}\"`);\n  if (args.dismissible !== undefined && !args.dismissible) attrs.push('dismissible=\"false\"');\n  return `\n    <div style=\"display: flex; justify-content: center; padding: 100px 0;\">\n      <ts-popover ${attrs.join(' ')}>\n        <ts-button slot=\"trigger\">Click me</ts-button>\n        <div style=\"padding: 16px; max-width: 240px;\">\n          <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Popover Title</h4>\n          <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666;\">\n            This is a rich content popover with some helpful information.\n          </p>\n        </div>\n      </ts-popover>\n    </div>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    placement: 'bottom',\n    trigger: 'click',\n    dismissible: true,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 24px; justify-content: center; padding: 120px 0;\">\n    <ts-popover placement=\"top\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Top</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on top</div>\n    </ts-popover>\n    <ts-popover placement=\"bottom\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Bottom</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on bottom</div>\n    </ts-popover>\n    <ts-popover placement=\"left\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Left</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on left</div>\n    </ts-popover>\n    <ts-popover placement=\"right\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Right</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on right</div>\n    </ts-popover>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 24px; justify-content: center; padding: 120px 0;\">\n    <ts-popover trigger=\"click\">\n      <ts-button slot=\"trigger\">Click trigger</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Opened by click</div>\n    </ts-popover>\n    <ts-popover trigger=\"hover\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Hover trigger</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Opened by hover</div>\n    </ts-popover>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; justify-content: center; padding: 80px 0 200px;\">\n    <ts-popover placement=\"bottom-start\" trigger=\"click\">\n      <ts-button slot=\"trigger\" variant=\"primary\">User Profile</ts-button>\n      <div style=\"padding: 16px; min-width: 240px; font-family: sans-serif;\">\n        <div style=\"display: flex; gap: 12px; align-items: center; margin-bottom: 12px;\">\n          <ts-avatar name=\"Jane Doe\" size=\"md\"></ts-avatar>\n          <div>\n            <div style=\"font-weight: 600;\">Jane Doe</div>\n            <div style=\"font-size: 13px; color: #666;\">jane@example.com</div>\n          </div>\n        </div>\n        <ts-divider></ts-divider>\n        <div style=\"display: flex; flex-direction: column; gap: 8px; margin-top: 12px;\">\n          <ts-button appearance=\"ghost\" block size=\"sm\">View Profile</ts-button>\n          <ts-button appearance=\"ghost\" block size=\"sm\">Settings</ts-button>\n          <ts-button appearance=\"ghost\" block size=\"sm\" variant=\"danger\">Sign out</ts-button>\n        </div>\n      </div>\n    </ts-popover>\n  </div>\n`;\n"]}

package/dist/collection/components/progress/progress.css

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   ts-progress — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-progress-track-bg     Track background color
+     --ts-progress-fill-bg      Fill bar background color
+     --ts-progress-radius       Border radius
+     --ts-progress-height       Track height
+   ========================================================================== */
+
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+
+  --ts-progress-track-bg: var(--ts-color-neutral-200);
+  --ts-progress-fill-bg: var(--ts-color-interactive-primary);
+  --ts-progress-radius: var(--ts-radius-full);
+  --ts-progress-height: 0.5rem;
+}
+
+/* ---- Track ---- */
+.progress__track {
+  flex: 1;
+  block-size: var(--ts-progress-height);
+  background-color: var(--ts-progress-track-bg);
+  border-radius: var(--ts-progress-radius);
+  overflow: hidden;
+  position: relative;
+}
+
+/* ---- Fill ---- */
+.progress__fill {
+  block-size: 100%;
+  background-color: var(--ts-progress-fill-bg);
+  border-radius: var(--ts-progress-radius);
+  transition: width var(--ts-transition-normal);
+}
+
+/* ---- Label ---- */
+.progress__label {
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-secondary);
+  min-inline-size: 3ch;
+  text-align: end;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  --ts-progress-height: 0.25rem;
+}
+
+:host([size="lg"]) {
+  --ts-progress-height: 0.75rem;
+}
+
+/* ---- Variants ---- */
+:host([variant="success"]) {
+  --ts-progress-fill-bg: var(--ts-color-success-600);
+}
+
+:host([variant="warning"]) {
+  --ts-progress-fill-bg: var(--ts-color-warning-600);
+}
+
+:host([variant="danger"]) {
+  --ts-progress-fill-bg: var(--ts-color-danger-500);
+}
+
+:host([variant="info"]) {
+  --ts-progress-fill-bg: var(--ts-color-info-500);
+}
+
+/* ---- Indeterminate animation ---- */
+:host([indeterminate]) .progress__fill {
+  width: 40%;
+  animation: ts-progress-slide 1.5s ease-in-out infinite;
+}
+
+@keyframes ts-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}