@tessera-ui/core 0.4.0

package/dist/collection/components/pagination/pagination.js

@@ -0,0 +1,220 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @part nav - The nav element.
+ * @part button - Each page button.
+ * @part prev - The previous button.
+ * @part next - The next button.
+ */
+export class TsPagination {
+    /** Total number of items. */
+    total;
+    /** Number of items per page. */
+    pageSize = 10;
+    /** The current active page (1-based). */
+    currentPage = 1;
+    /** Number of sibling pages shown around the current page. */
+    siblingCount = 1;
+    /** The size of the pagination buttons. */
+    size = 'md';
+    /** Emitted when the page changes. */
+    tsChange;
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    getPageRange() {
+        const total = this.totalPages;
+        const current = this.currentPage;
+        const siblings = this.siblingCount;
+        const range = [];
+        const leftSibling = Math.max(current - siblings, 2);
+        const rightSibling = Math.min(current + siblings, total - 1);
+        const showLeftEllipsis = leftSibling > 2;
+        const showRightEllipsis = rightSibling < total - 1;
+        // Always show first page
+        range.push(1);
+        if (showLeftEllipsis) {
+            range.push('ellipsis');
+        }
+        else {
+            for (let i = 2; i < leftSibling; i++) {
+                range.push(i);
+            }
+        }
+        for (let i = leftSibling; i <= rightSibling; i++) {
+            range.push(i);
+        }
+        if (showRightEllipsis) {
+            range.push('ellipsis');
+        }
+        else {
+            for (let i = rightSibling + 1; i < total; i++) {
+                range.push(i);
+            }
+        }
+        // Always show last page (if > 1)
+        if (total > 1) {
+            range.push(total);
+        }
+        return range;
+    }
+    handlePageClick = (page) => {
+        if (page < 1 || page > this.totalPages || page === this.currentPage)
+            return;
+        this.currentPage = page;
+        this.tsChange.emit({ page });
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const pages = this.getPageRange();
+        const isFirstPage = this.currentPage <= 1;
+        const isLastPage = this.currentPage >= this.totalPages;
+        return (h(Host, { key: '8ce453e001c6830299e02d8a83fed0d623328b9f', class: {
+                'ts-pagination': true,
+                [`ts-pagination--${this.size}`]: true,
+            } }, h("nav", { key: 'c9c0d1a1d80010cd7653363c45108a93189f993e', part: "nav", "aria-label": "Pagination", class: "pagination__nav" }, h("button", { key: '03fb8b5042561750aab8371cca844cd2373fa74a', class: "pagination__button pagination__prev", part: "prev", disabled: isFirstPage, "aria-label": "Previous page", onClick: () => this.handlePageClick(this.currentPage - 1) }, h("svg", { key: 'a68fae5805dcffc8fca44ccaaea19b1dbecdb9cb', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'e186ca6298102fa64973edb8f566e87ed4474a22', points: "15 18 9 12 15 6" }))), pages.map((page, index) => page === 'ellipsis' ? (h("span", { class: "pagination__ellipsis", key: `ellipsis-${index}`, "aria-hidden": "true" }, "...")) : (h("button", { class: {
+                pagination__button: true,
+                'pagination__button--active': page === this.currentPage,
+            }, part: "button", "aria-current": page === this.currentPage ? 'page' : undefined, "aria-label": `Page ${page}`, onClick: () => this.handlePageClick(page), key: page }, page))), h("button", { key: '9fce8efe8707cadfc19d20418079cc631a1228a9', class: "pagination__button pagination__next", part: "next", disabled: isLastPage, "aria-label": "Next page", onClick: () => this.handlePageClick(this.currentPage + 1) }, h("svg", { key: '57ca47eb763ab4adfb24deab8221a405fc2635e6', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'c0230ffe8334b72b783b939704dee4b705504dcb', points: "9 18 15 12 9 6" }))))));
+    }
+    static get is() { return "ts-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current active page (1-based)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "siblingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of sibling pages shown around the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sibling-count",
+                "defaultValue": "1"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the pagination buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the page changes."
+                },
+                "complexType": {
+                    "original": "{ page: number }",
+                    "resolved": "{ page: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @part nav - The nav element.\n * @part button - Each page button.\n * @part prev - The previous button.\n * @part next - The next button.\n */\n@Component({\n  tag: 'ts-pagination',\n  styleUrl: 'pagination.css',\n  shadow: true,\n})\nexport class TsPagination {\n  /** Total number of items. */\n  @Prop() total!: number;\n\n  /** Number of items per page. */\n  @Prop() pageSize = 10;\n\n  /** The current active page (1-based). */\n  @Prop({ mutable: true, reflect: true }) currentPage = 1;\n\n  /** Number of sibling pages shown around the current page. */\n  @Prop() siblingCount = 1;\n\n  /** The size of the pagination buttons. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Emitted when the page changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ page: number }>;\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.total / this.pageSize));\n  }\n\n  private getPageRange(): (number | 'ellipsis')[] {\n    const total = this.totalPages;\n    const current = this.currentPage;\n    const siblings = this.siblingCount;\n\n    const range: (number | 'ellipsis')[] = [];\n\n    const leftSibling = Math.max(current - siblings, 2);\n    const rightSibling = Math.min(current + siblings, total - 1);\n\n    const showLeftEllipsis = leftSibling > 2;\n    const showRightEllipsis = rightSibling < total - 1;\n\n    // Always show first page\n    range.push(1);\n\n    if (showLeftEllipsis) {\n      range.push('ellipsis');\n    } else {\n      for (let i = 2; i < leftSibling; i++) {\n        range.push(i);\n      }\n    }\n\n    for (let i = leftSibling; i <= rightSibling; i++) {\n      range.push(i);\n    }\n\n    if (showRightEllipsis) {\n      range.push('ellipsis');\n    } else {\n      for (let i = rightSibling + 1; i < total; i++) {\n        range.push(i);\n      }\n    }\n\n    // Always show last page (if > 1)\n    if (total > 1) {\n      range.push(total);\n    }\n\n    return range;\n  }\n\n  private handlePageClick = (page: number): void => {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    this.currentPage = page;\n    this.tsChange.emit({ page });\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const pages = this.getPageRange();\n    const isFirstPage = this.currentPage <= 1;\n    const isLastPage = this.currentPage >= this.totalPages;\n\n    return (\n      <Host\n        class={{\n          'ts-pagination': true,\n          [`ts-pagination--${this.size}`]: true,\n        }}\n      >\n        <nav part=\"nav\" aria-label=\"Pagination\" class=\"pagination__nav\">\n          <button\n            class=\"pagination__button pagination__prev\"\n            part=\"prev\"\n            disabled={isFirstPage}\n            aria-label=\"Previous page\"\n            onClick={() => this.handlePageClick(this.currentPage - 1)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </button>\n\n          {pages.map((page, index) =>\n            page === 'ellipsis' ? (\n              <span class=\"pagination__ellipsis\" key={`ellipsis-${index}`} aria-hidden=\"true\">\n                ...\n              </span>\n            ) : (\n              <button\n                class={{\n                  pagination__button: true,\n                  'pagination__button--active': page === this.currentPage,\n                }}\n                part=\"button\"\n                aria-current={page === this.currentPage ? 'page' : undefined}\n                aria-label={`Page ${page}`}\n                onClick={() => this.handlePageClick(page)}\n                key={page}\n              >\n                {page}\n              </button>\n            ),\n          )}\n\n          <button\n            class=\"pagination__button pagination__next\"\n            part=\"next\"\n            disabled={isLastPage}\n            aria-label=\"Next page\"\n            onClick={() => this.handlePageClick(this.currentPage + 1)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,92 @@
+// Hand-written stories for ts-pagination
+export default {
+    title: 'Components/Pagination',
+    tags: ['autodocs'],
+    argTypes: {
+        total: {
+            control: 'number',
+            description: 'Total number of items.',
+        },
+        pageSize: {
+            control: 'number',
+            description: 'Number of items per page.',
+        },
+        currentPage: {
+            control: 'number',
+            description: 'The current active page (1-based).',
+        },
+        siblingCount: {
+            control: 'number',
+            description: 'Number of sibling pages shown around the current page.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The size of the pagination buttons.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.total !== undefined)
+        attrs.push(`total="${args.total}"`);
+    if (args.pageSize !== undefined)
+        attrs.push(`page-size="${args.pageSize}"`);
+    if (args.currentPage !== undefined)
+        attrs.push(`current-page="${args.currentPage}"`);
+    if (args.siblingCount !== undefined)
+        attrs.push(`sibling-count="${args.siblingCount}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    return `<ts-pagination ${attrs.join(' ')}></ts-pagination>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        total: 100,
+        pageSize: 10,
+        currentPage: 1,
+        siblingCount: 1,
+        size: 'md',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Small</p>
+      <ts-pagination total="100" page-size="10" current-page="5" size="sm"></ts-pagination>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
+      <ts-pagination total="100" page-size="10" current-page="5" size="md"></ts-pagination>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
+      <ts-pagination total="100" page-size="10" current-page="5" size="lg"></ts-pagination>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">First page (prev disabled)</p>
+      <ts-pagination total="100" page-size="10" current-page="1"></ts-pagination>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Middle page with ellipsis</p>
+      <ts-pagination total="100" page-size="10" current-page="5"></ts-pagination>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Last page (next disabled)</p>
+      <ts-pagination total="100" page-size="10" current-page="10"></ts-pagination>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 600px; font-family: sans-serif;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+      <span style="font-size: 14px; color: #666;">Showing 41-50 of 237 results</span>
+    </div>
+    <ts-pagination total="237" page-size="10" current-page="5" sibling-count="2"></ts-pagination>
+  </div>
+`;
+//# sourceMappingURL=pagination.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAEzC,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,wBAAwB;SACtC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,2BAA2B;SACzC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oCAAoC;SAClD;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,wDAAwD;SACtE;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,qCAAqC;SACnD;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC5E,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACxF,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO,kBAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAelC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOxC,CAAC","sourcesContent":["// Hand-written stories for ts-pagination\n\nexport default {\n  title: 'Components/Pagination',\n  tags: ['autodocs'],\n  argTypes: {\n    total: {\n      control: 'number',\n      description: 'Total number of items.',\n    },\n    pageSize: {\n      control: 'number',\n      description: 'Number of items per page.',\n    },\n    currentPage: {\n      control: 'number',\n      description: 'The current active page (1-based).',\n    },\n    siblingCount: {\n      control: 'number',\n      description: 'Number of sibling pages shown around the current page.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the pagination buttons.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.total !== undefined) attrs.push(`total=\"${args.total}\"`);\n  if (args.pageSize !== undefined) attrs.push(`page-size=\"${args.pageSize}\"`);\n  if (args.currentPage !== undefined) attrs.push(`current-page=\"${args.currentPage}\"`);\n  if (args.siblingCount !== undefined) attrs.push(`sibling-count=\"${args.siblingCount}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `<ts-pagination ${attrs.join(' ')}></ts-pagination>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    total: 100,\n    pageSize: 10,\n    currentPage: 1,\n    siblingCount: 1,\n    size: 'md',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Small</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"sm\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"md\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"lg\"></ts-pagination>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">First page (prev disabled)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"1\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Middle page with ellipsis</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Last page (next disabled)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"10\"></ts-pagination>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 600px; font-family: sans-serif;\">\n    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n      <span style=\"font-size: 14px; color: #666;\">Showing 41-50 of 237 results</span>\n    </div>\n    <ts-pagination total=\"237\" page-size=\"10\" current-page=\"5\" sibling-count=\"2\"></ts-pagination>\n  </div>\n`;\n"]}

package/dist/collection/components/popover/popover.css

@@ -0,0 +1,150 @@
+/* ==========================================================================
+   ts-popover — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-popover-bg          Background color
+     --ts-popover-radius      Border radius
+     --ts-popover-shadow      Box shadow
+     --ts-popover-max-width   Max width
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  position: relative;
+  font-family: var(--ts-font-family-base);
+
+  --ts-popover-bg: var(--ts-color-bg-elevated);
+  --ts-popover-radius: var(--ts-radius-lg);
+  --ts-popover-shadow: var(--ts-shadow-lg);
+  --ts-popover-max-width: 320px;
+}
+
+.popover__trigger {
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* ---- Panel ---- */
+.popover__panel {
+  position: absolute;
+  z-index: var(--ts-z-popover, 1000);
+  padding: var(--ts-spacing-4);
+  background-color: var(--ts-popover-bg);
+  border-radius: var(--ts-popover-radius);
+  box-shadow: var(--ts-popover-shadow);
+  max-inline-size: var(--ts-popover-max-width);
+  border: 1px solid var(--ts-color-border-subtle);
+  font-size: var(--ts-font-size-sm);
+  line-height: var(--ts-line-height-normal);
+  opacity: 0;
+  transform: scale(0.95);
+  pointer-events: none;
+  transition:
+    opacity var(--ts-transition-fast),
+    transform var(--ts-transition-fast);
+}
+
+.popover__panel--visible {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+/* ---- Placements ---- */
+.popover__panel--top {
+  bottom: calc(100% + 10px);
+  left: 50%;
+  margin-left: -50%;
+}
+.popover__panel--top-start {
+  bottom: calc(100% + 10px);
+  inset-inline-start: 0;
+}
+.popover__panel--top-end {
+  bottom: calc(100% + 10px);
+  inset-inline-end: 0;
+}
+
+.popover__panel--bottom {
+  top: calc(100% + 10px);
+  left: 50%;
+  margin-left: -50%;
+}
+.popover__panel--bottom-start {
+  top: calc(100% + 10px);
+  inset-inline-start: 0;
+}
+.popover__panel--bottom-end {
+  top: calc(100% + 10px);
+  inset-inline-end: 0;
+}
+
+.popover__panel--left {
+  inset-inline-end: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.95);
+}
+.popover__panel--left.popover__panel--visible {
+  transform: translateY(-50%) scale(1);
+}
+
+.popover__panel--right {
+  inset-inline-start: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.95);
+}
+.popover__panel--right.popover__panel--visible {
+  transform: translateY(-50%) scale(1);
+}
+
+/* ---- Arrow ---- */
+.popover__arrow {
+  position: absolute;
+  inline-size: 10px;
+  block-size: 10px;
+  background: var(--ts-popover-bg);
+  border: 1px solid var(--ts-color-border-subtle);
+  transform: rotate(45deg);
+}
+
+.popover__panel--top .popover__arrow,
+.popover__panel--top-start .popover__arrow,
+.popover__panel--top-end .popover__arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -5px;
+  border-top: none;
+  border-left: none;
+}
+
+.popover__panel--bottom .popover__arrow,
+.popover__panel--bottom-start .popover__arrow,
+.popover__panel--bottom-end .popover__arrow {
+  top: -6px;
+  left: 50%;
+  margin-left: -5px;
+  border-bottom: none;
+  border-right: none;
+}
+
+.popover__panel--left .popover__arrow {
+  inset-inline-end: -6px;
+  top: 50%;
+  margin-top: -5px;
+  border-bottom: none;
+  border-left: none;
+}
+
+.popover__panel--right .popover__arrow {
+  inset-inline-start: -6px;
+  top: 50%;
+  margin-top: -5px;
+  border-top: none;
+  border-right: none;
+}
+
+/* ---- Content ---- */
+.popover__content {
+  position: relative;
+  z-index: 1;
+}