@tessera-ui/core 0.4.0

package/dist/cjs/ts-pagination.cjs.entry.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const paginationCss = () => `:host{display:block;--ts-pagination-button-size:2.25rem;--ts-pagination-active-bg:var(--ts-color-interactive-primary);--ts-pagination-active-color:var(--ts-color-text-on-primary)}.pagination__nav{display:flex;align-items:center;gap:var(--ts-spacing-1)}.pagination__button{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--ts-pagination-button-size);block-size:var(--ts-pagination-button-size);padding-inline:var(--ts-spacing-2);border:1px solid var(--ts-color-border-default);border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-primary);font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-sm);cursor:pointer;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     color var(--ts-transition-fast);outline:none}.pagination__button:hover:not(:disabled):not(.pagination__button--active){background-color:var(--ts-color-bg-subtle);border-color:var(--ts-color-border-strong)}.pagination__button:focus-visible{box-shadow:var(--ts-focus-ring)}.pagination__button:disabled{opacity:0.5;cursor:not-allowed}.pagination__button--active{background-color:var(--ts-pagination-active-bg);border-color:var(--ts-pagination-active-bg);color:var(--ts-pagination-active-color);font-weight:var(--ts-font-weight-semi)}.pagination__prev svg,.pagination__next svg{inline-size:1em;block-size:1em}.pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--ts-pagination-button-size);block-size:var(--ts-pagination-button-size);color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-sm);user-select:none}:host([size="sm"]){--ts-pagination-button-size:1.75rem}:host([size="sm"]) .pagination__button{font-size:var(--ts-font-size-xs)}:host([size="lg"]){--ts-pagination-button-size:2.75rem}:host([size="lg"]) .pagination__button{font-size:var(--ts-font-size-md)}`;
+
+const TsPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    /** 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 (index.h(index.Host, { key: '8ce453e001c6830299e02d8a83fed0d623328b9f', class: {
+                'ts-pagination': true,
+                [`ts-pagination--${this.size}`]: true,
+            } }, index.h("nav", { key: 'c9c0d1a1d80010cd7653363c45108a93189f993e', part: "nav", "aria-label": "Pagination", class: "pagination__nav" }, index.h("button", { key: '03fb8b5042561750aab8371cca844cd2373fa74a', class: "pagination__button pagination__prev", part: "prev", disabled: isFirstPage, "aria-label": "Previous page", onClick: () => this.handlePageClick(this.currentPage - 1) }, index.h("svg", { key: 'a68fae5805dcffc8fca44ccaaea19b1dbecdb9cb', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: 'e186ca6298102fa64973edb8f566e87ed4474a22', points: "15 18 9 12 15 6" }))), pages.map((page, index$1) => page === 'ellipsis' ? (index.h("span", { class: "pagination__ellipsis", key: `ellipsis-${index$1}`, "aria-hidden": "true" }, "...")) : (index.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))), index.h("button", { key: '9fce8efe8707cadfc19d20418079cc631a1228a9', class: "pagination__button pagination__next", part: "next", disabled: isLastPage, "aria-label": "Next page", onClick: () => this.handlePageClick(this.currentPage + 1) }, index.h("svg", { key: '57ca47eb763ab4adfb24deab8221a405fc2635e6', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: 'c0230ffe8334b72b783b939704dee4b705504dcb', points: "9 18 15 12 9 6" }))))));
+    }
+};
+TsPagination.style = paginationCss();
+
+exports.ts_pagination = TsPagination;
+//# sourceMappingURL=ts-pagination.entry.cjs.js.map
+
+//# sourceMappingURL=ts-pagination.cjs.entry.js.map

package/dist/cjs/ts-pagination.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-pagination.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,03DAA03D,CAAC;;MCe34D,YAAY,GAAA,MAAA;;;;;;AAEf,IAAA,KAAK;;IAGL,QAAQ,GAAG,EAAE;;IAGmB,WAAW,GAAG,CAAC;;IAG/C,YAAY,GAAG,CAAC;;IAGC,IAAI,GAAW,IAAI;;AAGV,IAAA,QAAQ;AAE1C,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;;IAGnD,YAAY,GAAA;AAClB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW;AAChC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY;QAElC,MAAM,KAAK,GAA4B,EAAE;AAEzC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC;AACnD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC;AAE5D,QAAA,MAAM,gBAAgB,GAAG,WAAW,GAAG,CAAC;AACxC,QAAA,MAAM,iBAAiB,GAAG,YAAY,GAAG,KAAK,GAAG,CAAC;;AAGlD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAEb,IAAI,gBAAgB,EAAE;AACpB,YAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;;aACjB;AACL,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;AACpC,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;;AAIjB,QAAA,KAAK,IAAI,CAAC,GAAG,WAAW,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE;AAChD,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;QAGf,IAAI,iBAAiB,EAAE;AACrB,YAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;;aACjB;AACL,YAAA,KAAK,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;;;AAKjB,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGnB,QAAA,OAAO,KAAK;;AAGN,IAAA,eAAe,GAAG,CAAC,IAAY,KAAU;AAC/C,QAAA,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE;AACrE,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;AAC9B,KAAC;;IAGD,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;QACzC,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU;QAEtD,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACtC,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,KAAK,EAAA,YAAA,EAAY,YAAY,EAAC,KAAK,EAAC,iBAAiB,EAAA,EAC7DA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qCAAqC,EAC3C,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,WAAW,EAAA,YAAA,EACV,eAAe,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAEzDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,qBAAiB,OAAO,EAAA,EACxHA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,CACjC,CACC,EAER,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK,KACrB,IAAI,KAAK,UAAU,IACjBF,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,CAAA,SAAA,EAAYE,OAAK,CAAA,CAAE,EAAA,aAAA,EAAc,MAAM,EAAA,EAAA,KAAA,CAExE,KAEPF,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,4BAA4B,EAAE,IAAI,KAAK,IAAI,CAAC,WAAW;AACxD,aAAA,EACD,IAAI,EAAC,QAAQ,kBACC,IAAI,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,gBAChD,QAAQ,IAAI,CAAA,CAAE,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,GAAG,EAAE,IAAI,IAER,IAAI,CACE,CACV,CACF,EAEDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qCAAqC,EAC3C,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,UAAU,EAAA,YAAA,EACT,WAAW,EACtB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAEzDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,qBAAiB,OAAO,EAAA,EACxHA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,CAChC,CACC,CACL,CACD;;;;;;;","names":["h","Host","index"],"sources":["src/components/pagination/pagination.css?tag=ts-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-pagination — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-pagination-button-size    Button dimensions\n     --ts-pagination-active-bg      Active page background\n     --ts-pagination-active-color   Active page text color\n   ========================================================================== */\n\n:host {\n  display: block;\n\n  --ts-pagination-button-size: 2.25rem;\n  --ts-pagination-active-bg: var(--ts-color-interactive-primary);\n  --ts-pagination-active-color: var(--ts-color-text-on-primary);\n}\n\n.pagination__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n}\n\n/* ---- Buttons ---- */\n.pagination__button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-inline-size: var(--ts-pagination-button-size);\n  block-size: var(--ts-pagination-button-size);\n  padding-inline: var(--ts-spacing-2);\n  border: 1px solid var(--ts-color-border-default);\n  border-radius: var(--ts-radius-md);\n  background: transparent;\n  color: var(--ts-color-text-primary);\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-sm);\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n  outline: none;\n}\n\n.pagination__button:hover:not(:disabled):not(.pagination__button--active) {\n  background-color: var(--ts-color-bg-subtle);\n  border-color: var(--ts-color-border-strong);\n}\n\n.pagination__button:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n.pagination__button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Active page ---- */\n.pagination__button--active {\n  background-color: var(--ts-pagination-active-bg);\n  border-color: var(--ts-pagination-active-bg);\n  color: var(--ts-pagination-active-color);\n  font-weight: var(--ts-font-weight-semi);\n}\n\n/* ---- Prev/Next arrows ---- */\n.pagination__prev svg,\n.pagination__next svg {\n  inline-size: 1em;\n  block-size: 1em;\n}\n\n/* ---- Ellipsis ---- */\n.pagination__ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-inline-size: var(--ts-pagination-button-size);\n  block-size: var(--ts-pagination-button-size);\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-sm);\n  user-select: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  --ts-pagination-button-size: 1.75rem;\n}\n\n:host([size=\"sm\"]) .pagination__button {\n  font-size: var(--ts-font-size-xs);\n}\n\n:host([size=\"lg\"]) {\n  --ts-pagination-button-size: 2.75rem;\n}\n\n:host([size=\"lg\"]) .pagination__button {\n  font-size: var(--ts-font-size-md);\n}\n","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"],"version":3}

package/dist/cjs/ts-popover.cjs.entry.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const popoverCss = () => `: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}.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}.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)}.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}.popover__content{position:relative;z-index:1}`;
+
+const TsPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsOpen = index.createEvent(this, "tsOpen");
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    get hostEl() { return index.getElement(this); }
+    popoverId = aria.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 (index.h(index.Host, { key: '9a797e457251167901cee8ebcb7077b5129bc88d', class: {
+                'ts-popover': true,
+                'ts-popover--open': this.isVisible,
+                [`ts-popover--${this.placement}`]: true,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.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 }, index.h("slot", { key: '6cbc8158004db058b42935af9dc07f8bf6457f6d', name: "trigger" })), index.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 }, index.h("div", { key: 'bcef96d994c1364274eca367a053ef5ec9ddcc8a', class: "popover__arrow", part: "arrow" }), index.h("div", { key: '027a7e705132e20533ce0f4616b47d5e912e0d78', class: "popover__content" }, index.h("slot", { key: '838183659524f7687ed2d17ae2c00aa21db2b6d8' })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsPopover.style = popoverCss();
+
+exports.ts_popover = TsPopover;
+//# sourceMappingURL=ts-popover.entry.cjs.js.map
+
+//# sourceMappingURL=ts-popover.cjs.entry.js.map

package/dist/cjs/ts-popover.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-popover.cjs.entry.js","mappings":"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","names":["generateId","h","Host"],"sources":["src/components/popover/popover.css?tag=ts-popover&encapsulation=shadow","src/components/popover/popover.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-popover — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-popover-bg          Background color\n     --ts-popover-radius      Border radius\n     --ts-popover-shadow      Box shadow\n     --ts-popover-max-width   Max width\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--ts-font-family-base);\n\n  --ts-popover-bg: var(--ts-color-bg-elevated);\n  --ts-popover-radius: var(--ts-radius-lg);\n  --ts-popover-shadow: var(--ts-shadow-lg);\n  --ts-popover-max-width: 320px;\n}\n\n.popover__trigger {\n  display: inline-block;\n  cursor: pointer;\n}\n\n/* ---- Panel ---- */\n.popover__panel {\n  position: absolute;\n  z-index: var(--ts-z-popover, 1000);\n  padding: var(--ts-spacing-4);\n  background-color: var(--ts-popover-bg);\n  border-radius: var(--ts-popover-radius);\n  box-shadow: var(--ts-popover-shadow);\n  max-inline-size: var(--ts-popover-max-width);\n  border: 1px solid var(--ts-color-border-subtle);\n  font-size: var(--ts-font-size-sm);\n  line-height: var(--ts-line-height-normal);\n  opacity: 0;\n  transform: scale(0.95);\n  pointer-events: none;\n  transition:\n    opacity var(--ts-transition-fast),\n    transform var(--ts-transition-fast);\n}\n\n.popover__panel--visible {\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ---- Placements ---- */\n.popover__panel--top {\n  bottom: calc(100% + 10px);\n  left: 50%;\n  margin-left: -50%;\n}\n.popover__panel--top-start {\n  bottom: calc(100% + 10px);\n  inset-inline-start: 0;\n}\n.popover__panel--top-end {\n  bottom: calc(100% + 10px);\n  inset-inline-end: 0;\n}\n\n.popover__panel--bottom {\n  top: calc(100% + 10px);\n  left: 50%;\n  margin-left: -50%;\n}\n.popover__panel--bottom-start {\n  top: calc(100% + 10px);\n  inset-inline-start: 0;\n}\n.popover__panel--bottom-end {\n  top: calc(100% + 10px);\n  inset-inline-end: 0;\n}\n\n.popover__panel--left {\n  inset-inline-end: calc(100% + 10px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.95);\n}\n.popover__panel--left.popover__panel--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n.popover__panel--right {\n  inset-inline-start: calc(100% + 10px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.95);\n}\n.popover__panel--right.popover__panel--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* ---- Arrow ---- */\n.popover__arrow {\n  position: absolute;\n  inline-size: 10px;\n  block-size: 10px;\n  background: var(--ts-popover-bg);\n  border: 1px solid var(--ts-color-border-subtle);\n  transform: rotate(45deg);\n}\n\n.popover__panel--top .popover__arrow,\n.popover__panel--top-start .popover__arrow,\n.popover__panel--top-end .popover__arrow {\n  bottom: -6px;\n  left: 50%;\n  margin-left: -5px;\n  border-top: none;\n  border-left: none;\n}\n\n.popover__panel--bottom .popover__arrow,\n.popover__panel--bottom-start .popover__arrow,\n.popover__panel--bottom-end .popover__arrow {\n  top: -6px;\n  left: 50%;\n  margin-left: -5px;\n  border-bottom: none;\n  border-right: none;\n}\n\n.popover__panel--left .popover__arrow {\n  inset-inline-end: -6px;\n  top: 50%;\n  margin-top: -5px;\n  border-bottom: none;\n  border-left: none;\n}\n\n.popover__panel--right .popover__arrow {\n  inset-inline-start: -6px;\n  top: 50%;\n  margin-top: -5px;\n  border-top: none;\n  border-right: none;\n}\n\n/* ---- Content ---- */\n.popover__content {\n  position: relative;\n  z-index: 1;\n}\n","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"],"version":3}

package/dist/cjs/ts-progress.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const progressCss = () => `: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}.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}.progress__fill{block-size:100%;background-color:var(--ts-progress-fill-bg);border-radius:var(--ts-progress-radius);transition:width var(--ts-transition-normal)}.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}:host([size="sm"]){--ts-progress-height:0.25rem}:host([size="lg"]){--ts-progress-height:0.75rem}: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)}: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%)}}`;
+
+const TsProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Current progress value (0 to max). */
+    value = 0;
+    /** Maximum value. */
+    max = 100;
+    /** The color variant. */
+    variant = 'primary';
+    /** The size of the progress bar. */
+    size = 'md';
+    /** Whether the progress is indeterminate. */
+    indeterminate = false;
+    /** Accessible label for the progress bar. */
+    label;
+    /** Whether to display the percentage value. */
+    showValue = false;
+    get percentage() {
+        if (this.max <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const percent = this.percentage;
+        return (index.h(index.Host, { key: 'd74892b8e752c9a837c01ef147ae83a53d4460d4', class: {
+                'ts-progress': true,
+                [`ts-progress--${this.variant}`]: true,
+                [`ts-progress--${this.size}`]: true,
+                'ts-progress--indeterminate': this.indeterminate,
+            } }, index.h("div", { key: '2a43e6036aa6709d3880f07a7f0598a6ade68268', class: "progress__track", part: "track", role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label || undefined }, index.h("div", { key: '09f9f244e037a34024a1dacb8beacd8be9cb9de9', class: "progress__fill", part: "fill", style: this.indeterminate ? undefined : { width: `${percent}%` } })), this.showValue && !this.indeterminate && (index.h("span", { key: '795864d0e9d184c7c354179e845e954aca3d7113', class: "progress__label", part: "label", "aria-hidden": "true" }, Math.round(percent), "%"))));
+    }
+};
+TsProgress.style = progressCss();
+
+exports.ts_progress = TsProgress;
+//# sourceMappingURL=ts-progress.entry.cjs.js.map
+
+//# sourceMappingURL=ts-progress.cjs.entry.js.map

package/dist/cjs/ts-progress.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-progress.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+1CAA+1C,CAAC;;MCe92C,UAAU,GAAA,MAAA;;;;;IAEb,KAAK,GAAG,CAAC;;IAGT,GAAG,GAAG,GAAG;;IAGQ,OAAO,GAAsB,SAAS;;IAGtC,IAAI,GAAW,IAAI;;IAGnB,aAAa,GAAG,KAAK;;AAGtC,IAAA,KAAK;;IAGY,SAAS,GAAG,KAAK;AAE1C,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QAC3B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;;;IAIlE,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU;QAE/B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACtC,gBAAA,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBACnC,4BAA4B,EAAE,IAAI,CAAC,aAAa;AACjD,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,mBAC3C,CAAC,EAAA,eAAA,EACD,IAAI,CAAC,GAAG,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,IAAI,SAAS,EAAA,EAEnCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,KAAK,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,CAAG,EAAE,EAAA,CAChE,CACE,EACL,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,KACpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,EAAA,EAC1D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MACf,CACR,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/progress/progress.css?tag=ts-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-progress — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-progress-track-bg     Track background color\n     --ts-progress-fill-bg      Fill bar background color\n     --ts-progress-radius       Border radius\n     --ts-progress-height       Track height\n   ========================================================================== */\n\n:host {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n\n  --ts-progress-track-bg: var(--ts-color-neutral-200);\n  --ts-progress-fill-bg: var(--ts-color-interactive-primary);\n  --ts-progress-radius: var(--ts-radius-full);\n  --ts-progress-height: 0.5rem;\n}\n\n/* ---- Track ---- */\n.progress__track {\n  flex: 1;\n  block-size: var(--ts-progress-height);\n  background-color: var(--ts-progress-track-bg);\n  border-radius: var(--ts-progress-radius);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ---- Fill ---- */\n.progress__fill {\n  block-size: 100%;\n  background-color: var(--ts-progress-fill-bg);\n  border-radius: var(--ts-progress-radius);\n  transition: width var(--ts-transition-normal);\n}\n\n/* ---- Label ---- */\n.progress__label {\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-secondary);\n  min-inline-size: 3ch;\n  text-align: end;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  --ts-progress-height: 0.25rem;\n}\n\n:host([size=\"lg\"]) {\n  --ts-progress-height: 0.75rem;\n}\n\n/* ---- Variants ---- */\n:host([variant=\"success\"]) {\n  --ts-progress-fill-bg: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]) {\n  --ts-progress-fill-bg: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]) {\n  --ts-progress-fill-bg: var(--ts-color-danger-500);\n}\n\n:host([variant=\"info\"]) {\n  --ts-progress-fill-bg: var(--ts-color-info-500);\n}\n\n/* ---- Indeterminate animation ---- */\n:host([indeterminate]) .progress__fill {\n  width: 40%;\n  animation: ts-progress-slide 1.5s ease-in-out infinite;\n}\n\n@keyframes ts-progress-slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(350%);\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\ntype TsProgressVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * @part track - The progress track.\n * @part fill - The progress fill bar.\n * @part label - The value label text.\n */\n@Component({\n  tag: 'ts-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class TsProgress {\n  /** Current progress value (0 to max). */\n  @Prop() value = 0;\n\n  /** Maximum value. */\n  @Prop() max = 100;\n\n  /** The color variant. */\n  @Prop({ reflect: true }) variant: TsProgressVariant = 'primary';\n\n  /** The size of the progress bar. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Whether the progress is indeterminate. */\n  @Prop({ reflect: true }) indeterminate = false;\n\n  /** Accessible label for the progress bar. */\n  @Prop() label?: string;\n\n  /** Whether to display the percentage value. */\n  @Prop({ reflect: true }) showValue = false;\n\n  private get percentage(): number {\n    if (this.max <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const percent = this.percentage;\n\n    return (\n      <Host\n        class={{\n          'ts-progress': true,\n          [`ts-progress--${this.variant}`]: true,\n          [`ts-progress--${this.size}`]: true,\n          'ts-progress--indeterminate': this.indeterminate,\n        }}\n      >\n        <div\n          class=\"progress__track\"\n          part=\"track\"\n          role=\"progressbar\"\n          aria-valuenow={this.indeterminate ? undefined : this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          aria-label={this.label || undefined}\n        >\n          <div\n            class=\"progress__fill\"\n            part=\"fill\"\n            style={this.indeterminate ? undefined : { width: `${percent}%` }}\n          />\n        </div>\n        {this.showValue && !this.indeterminate && (\n          <span class=\"progress__label\" part=\"label\" aria-hidden=\"true\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-radio.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const radioCss = () => `:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-radio-size:1.25rem;--ts-radio-color:var(--ts-color-interactive-primary);--ts-radio-border-color:var(--ts-color-border-default)}.radio__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.radio__base:focus-visible .radio__control{box-shadow:var(--ts-focus-ring)}.radio__control{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-radio-size);height:var(--ts-radio-size);box-sizing:border-box;border:2px solid var(--ts-radio-border-color);border-radius:50%;background-color:var(--ts-color-bg-elevated);transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);flex-shrink:0}.radio__dot{width:0;height:0;border-radius:50%;background-color:var(--ts-color-text-on-primary);transition:width var(--ts-transition-fast),     height var(--ts-transition-fast)}:host([checked]) .radio__control{background-color:var(--ts-radio-color);border-color:var(--ts-radio-color)}:host([checked]) .radio__dot{width:40%;height:40%}.radio__base:hover:not([aria-disabled="true"]) .radio__control{border-color:var(--ts-color-primary-500)}:host([disabled]) .radio__base{opacity:0.5;cursor:not-allowed;pointer-events:none}:host([size="sm"]){--ts-radio-size:1rem}:host([size="sm"]) .radio__label{font-size:var(--ts-font-size-sm)}:host([size="md"]) .radio__label{font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-radio-size:1.5rem}:host([size="lg"]) .radio__label{font-size:var(--ts-font-size-lg)}.radio__label{color:var(--ts-color-text-primary);line-height:var(--ts-line-height-normal);user-select:none}`;
+
+const TsRadio = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.getElement(this); }
+    inputId = aria.generateId('ts-radio');
+    /** Whether the radio is checked. */
+    checked = false;
+    /** Renders the radio as disabled. */
+    disabled = false;
+    /** The value associated with this radio. */
+    value = '';
+    /** Name attribute for form submission. */
+    name;
+    /** Label text. If omitted, use the default slot. */
+    label;
+    /** The radio size. */
+    size = 'md';
+    /** Emitted when the radio is selected. */
+    tsChange;
+    /** Programmatically select the radio. */
+    async select() {
+        if (!this.disabled && !this.checked) {
+            this.checked = true;
+            this.tsChange.emit({ checked: this.checked, value: this.value });
+        }
+    }
+    handleClick = () => {
+        this.select();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.select();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '83a85914dbe352dbb58101fb0ec5a2eefea1b069', class: {
+                'ts-radio': true,
+                [`ts-radio--${this.size}`]: true,
+                'ts-radio--checked': this.checked,
+                'ts-radio--disabled': this.disabled,
+            } }, index.h("div", { key: 'e78da4f35aaa992df0e4a1b411f63714adad01da', class: "radio__base", part: "base", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("div", { key: 'd434933511980c1b1ae62727694f718b782eafb1', class: "radio__control", part: "control" }, index.h("div", { key: '240fc60b023fc0e3084d6f1504273b9ba6cc82b3', class: "radio__dot" })), index.h("label", { key: '21539dae9031f841f3095091225ac534902e4e15', class: "radio__label", part: "label", id: `${this.inputId}-label` }, this.label ? this.label : index.h("slot", null)))));
+    }
+};
+TsRadio.style = radioCss();
+
+exports.ts_radio = TsRadio;
+//# sourceMappingURL=ts-radio.entry.cjs.js.map
+
+//# sourceMappingURL=ts-radio.cjs.entry.js.map

package/dist/cjs/ts-radio.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-radio.cjs.entry.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,sqDAAsqD,CAAC;;MCiBlrD,OAAO,GAAA,MAAA;;;;;;AAGV,IAAA,OAAO,GAAGA,eAAU,CAAC,UAAU,CAAC;;IAGA,OAAO,GAAG,KAAK;;IAG9B,QAAQ,GAAG,KAAK;;IAGjC,KAAK,GAAG,EAAE;;AAGV,IAAA,IAAI;;AAGJ,IAAA,KAAK;;IAGY,IAAI,GAAuB,IAAI;;AAGtB,IAAA,QAAQ;;AAI1C,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;;IAI5D,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,MAAM,EAAE;AACf,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE;;AAEjB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;AAChB,gBAAA,CAAC,aAAa,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBAChC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;AACpC,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,CAAG,CACtB,EAENA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,MAAA,CAAQ,EAAA,EACjE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAGA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CAC7B,CACJ,CACD;;;;;;;","names":["generateId","h","Host"],"sources":["src/components/radio/radio.css?tag=ts-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-radio — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-radio-size           Radio circle size\n     --ts-radio-color          Selected color\n     --ts-radio-border-color   Default border color\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-radio-size: 1.25rem;\n  --ts-radio-color: var(--ts-color-interactive-primary);\n  --ts-radio-border-color: var(--ts-color-border-default);\n}\n\n/* ---- Base container ---- */\n.radio__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  cursor: pointer;\n  outline: none;\n}\n\n.radio__base:focus-visible .radio__control {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Control circle ---- */\n.radio__control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ts-radio-size);\n  height: var(--ts-radio-size);\n  box-sizing: border-box;\n  border: 2px solid var(--ts-radio-border-color);\n  border-radius: 50%;\n  background-color: var(--ts-color-bg-elevated);\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  flex-shrink: 0;\n}\n\n/* ---- Inner dot ---- */\n.radio__dot {\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background-color: var(--ts-color-text-on-primary);\n  transition:\n    width var(--ts-transition-fast),\n    height var(--ts-transition-fast);\n}\n\n/* ---- Checked state ---- */\n:host([checked]) .radio__control {\n  background-color: var(--ts-radio-color);\n  border-color: var(--ts-radio-color);\n}\n\n:host([checked]) .radio__dot {\n  width: 40%;\n  height: 40%;\n}\n\n/* ---- Hover ---- */\n.radio__base:hover:not([aria-disabled=\"true\"]) .radio__control {\n  border-color: var(--ts-color-primary-500);\n}\n\n/* ---- Disabled state ---- */\n:host([disabled]) .radio__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  --ts-radio-size: 1rem;\n}\n\n:host([size=\"sm\"]) .radio__label {\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .radio__label {\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) {\n  --ts-radio-size: 1.5rem;\n}\n\n:host([size=\"lg\"]) .radio__label {\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Label ---- */\n.radio__label {\n  color: var(--ts-color-text-primary);\n  line-height: var(--ts-line-height-normal);\n  user-select: none;\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the radio label.\n *\n * @part base - The radio container.\n * @part control - The visual radio circle.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class TsRadio {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-radio');\n\n  /** Whether the radio is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Renders the radio as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this radio. */\n  @Prop() value = '';\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Label text. If omitted, use the default slot. */\n  @Prop() label?: string;\n\n  /** The radio size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the radio is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically select the radio. */\n  @Method()\n  async select(): Promise<void> {\n    if (!this.disabled && !this.checked) {\n      this.checked = true;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.select();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-radio': true,\n          [`ts-radio--${this.size}`]: true,\n          'ts-radio--checked': this.checked,\n          'ts-radio--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"radio__base\"\n          part=\"base\"\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"radio__control\" part=\"control\">\n            <div class=\"radio__dot\" />\n          </div>\n\n          <label class=\"radio__label\" part=\"label\" id={`${this.inputId}-label`}>\n            {this.label ? this.label : <slot />}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-row.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const rowCss = () => `:host{display:flex;flex-direction:row}:host([reverse]){flex-direction:row-reverse}@media (max-width: 639px){:host([stack-at="sm"]){flex-direction:column}:host([stack-at="sm"][reverse]){flex-direction:column-reverse}}@media (max-width: 767px){:host([stack-at="md"]){flex-direction:column}:host([stack-at="md"][reverse]){flex-direction:column-reverse}}@media (max-width: 1023px){:host([stack-at="lg"]){flex-direction:column}:host([stack-at="lg"][reverse]){flex-direction:column-reverse}}`;
+
+const TsRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Spacing token number controlling the gap between items. */
+    gap = '2';
+    /** Cross-axis alignment of items. */
+    align = 'center';
+    /** Main-axis alignment of items. */
+    justify = 'start';
+    /** Whether items should wrap to the next line. */
+    wrap = true;
+    /** Reverse the row direction. */
+    reverse = false;
+    /** Breakpoint at which the row stacks vertically. */
+    stackAt = 'never';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            between: 'space-between',
+            around: 'space-around',
+            evenly: 'space-evenly',
+        };
+        return (index.h(index.Host, { key: 'd66b197cc25e95aef4de4b9b71672cfcfb31ae4d', style: {
+                gap: `var(--ts-spacing-${this.gap})`,
+                alignItems: alignMap[this.align] || 'center',
+                justifyContent: justifyMap[this.justify] || 'flex-start',
+                flexWrap: this.wrap ? 'wrap' : 'nowrap',
+            } }, index.h("slot", { key: '3d515733c0c1fa827d5c2b0d63bb6fc1ccdb60ba' })));
+    }
+};
+TsRow.style = rowCss();
+
+exports.ts_row = TsRow;
+//# sourceMappingURL=ts-row.entry.cjs.js.map
+
+//# sourceMappingURL=ts-row.cjs.entry.js.map

package/dist/cjs/ts-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-row.cjs.entry.js","mappings":";;;;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,qeAAqe,CAAC;;MCU/e,KAAK,GAAA,MAAA;;;;;IAES,GAAG,GAAW,GAAG;;IAGjB,KAAK,GAAwD,QAAQ;;IAGrE,OAAO,GAAiE,OAAO;;IAG/E,IAAI,GAAY,IAAI;;IAGpB,OAAO,GAAY,KAAK;;IAGD,OAAO,GAAiC,OAAO;;IAG/F,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA2B;AACzC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;QAED,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,GAAG,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,GAAG,CAAA,CAAA,CAAG;gBACpC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ;gBAC5C,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,YAAY;gBACxD,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;AACxC,aAAA,EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/row/row.css?tag=ts-row&encapsulation=shadow","src/components/row/row.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-row — Shadow DOM Scoped Styles\n\n   A horizontal flex row layout primitive with wrap and responsive stacking.\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: row;\n}\n\n:host([reverse]) {\n  flex-direction: row-reverse;\n}\n\n/* ---- Responsive stacking ---- */\n@media (max-width: 639px) {\n  :host([stack-at=\"sm\"]) {\n    flex-direction: column;\n  }\n  :host([stack-at=\"sm\"][reverse]) {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (max-width: 767px) {\n  :host([stack-at=\"md\"]) {\n    flex-direction: column;\n  }\n  :host([stack-at=\"md\"][reverse]) {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (max-width: 1023px) {\n  :host([stack-at=\"lg\"]) {\n    flex-direction: column;\n  }\n  :host([stack-at=\"lg\"][reverse]) {\n    flex-direction: column-reverse;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for row content.\n */\n@Component({\n  tag: 'ts-row',\n  styleUrl: 'row.css',\n  shadow: true,\n})\nexport class TsRow {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '2';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'center';\n\n  /** Main-axis alignment of items. */\n  @Prop({ reflect: true }) justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /** Whether items should wrap to the next line. */\n  @Prop({ reflect: true }) wrap: boolean = true;\n\n  /** Reverse the row direction. */\n  @Prop({ reflect: true }) reverse: boolean = false;\n\n  /** Breakpoint at which the row stacks vertically. */\n  @Prop({ reflect: true, attribute: 'stack-at' }) stackAt: 'sm' | 'md' | 'lg' | 'never' = 'never';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'center',\n          justifyContent: justifyMap[this.justify] || 'flex-start',\n          flexWrap: this.wrap ? 'wrap' : 'nowrap',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}