@tessera-ui/core 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-pagination.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,131 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.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) {
+        registerInstance(this, hostRef);
+        this.tsOpen = createEvent(this, "tsOpen");
+        this.tsClose = createEvent(this, "tsClose");
+    }
+    get hostEl() { return getElement(this); }
+    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 watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsPopover.style = popoverCss();
+
+export { TsPopover as ts_popover };
+//# sourceMappingURL=ts-popover.entry.js.map
+
+//# sourceMappingURL=ts-popover.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-popover.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.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) {
+        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 (h(Host, { key: 'd74892b8e752c9a837c01ef147ae83a53d4460d4', class: {
+                'ts-progress': true,
+                [`ts-progress--${this.variant}`]: true,
+                [`ts-progress--${this.size}`]: true,
+                'ts-progress--indeterminate': this.indeterminate,
+            } }, 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 }, h("div", { key: '09f9f244e037a34024a1dacb8beacd8be9cb9de9', class: "progress__fill", part: "fill", style: this.indeterminate ? undefined : { width: `${percent}%` } })), this.showValue && !this.indeterminate && (h("span", { key: '795864d0e9d184c7c354179e845e954aca3d7113', class: "progress__label", part: "label", "aria-hidden": "true" }, Math.round(percent), "%"))));
+    }
+};
+TsProgress.style = progressCss();
+
+export { TsProgress as ts_progress };
+//# sourceMappingURL=ts-progress.entry.js.map
+
+//# sourceMappingURL=ts-progress.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-progress.entry.js","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"],"names":[],"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,QACE,CAAA,CAAC,IAAI,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,EAED,CAAA,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,EAEnC,CAAA,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,KACpC,CAAA,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;;;;;;;"}

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

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.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) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return getElement(this); }
+    inputId = 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 (h(Host, { key: '83a85914dbe352dbb58101fb0ec5a2eefea1b069', class: {
+                'ts-radio': true,
+                [`ts-radio--${this.size}`]: true,
+                'ts-radio--checked': this.checked,
+                'ts-radio--disabled': this.disabled,
+            } }, 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 }, h("div", { key: 'd434933511980c1b1ae62727694f718b782eafb1', class: "radio__control", part: "control" }, h("div", { key: '240fc60b023fc0e3084d6f1504273b9ba6cc82b3', class: "radio__dot" })), h("label", { key: '21539dae9031f841f3095091225ac534902e4e15', class: "radio__label", part: "label", id: `${this.inputId}-label` }, this.label ? this.label : h("slot", null)))));
+    }
+};
+TsRadio.style = radioCss();
+
+export { TsRadio as ts_radio };
+//# sourceMappingURL=ts-radio.entry.js.map
+
+//# sourceMappingURL=ts-radio.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-radio.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,sqDAAsqD,CAAC;;MCiBlrD,OAAO,GAAA,MAAA;;;;;;AAGV,IAAA,OAAO,GAAG,UAAU,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,QACE,CAAA,CAAC,IAAI,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,EAED,CAAA,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,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,CAAG,CACtB,EAEN,CAAA,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,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CAC7B,CACJ,CACD;;;;;;;"}

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

@@ -0,0 +1,51 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.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) {
+        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 (h(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',
+            } }, h("slot", { key: '3d515733c0c1fa827d5c2b0d63bb6fc1ccdb60ba' })));
+    }
+};
+TsRow.style = rowCss();
+
+export { TsRow as ts_row };
+//# sourceMappingURL=ts-row.entry.js.map
+
+//# sourceMappingURL=ts-row.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-row.entry.js","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"],"names":[],"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,QACE,CAAA,CAAC,IAAI,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,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

package/dist/esm/ts-select.entry.js

@@ -0,0 +1,219 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.js';
+
+const selectCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-select-bg:var(--ts-color-neutral-50);--ts-select-border-color:var(--ts-color-border-default);--ts-select-radius:var(--ts-radius-md);--ts-select-focus-ring:var(--ts-focus-ring)}.select__label{display:block;margin-block-end:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal)}.select__required{color:var(--ts-color-danger-500)}.select__container{position:relative}.select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-spacing-2);width:100%;border:1px solid var(--ts-select-border-color);border-radius:var(--ts-select-radius);background-color:var(--ts-select-bg);font-family:inherit;color:var(--ts-color-text-primary);cursor:pointer;outline:none;transition:border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);text-align:start;appearance:none}.select__trigger:focus-visible{border-color:var(--ts-color-primary-500);box-shadow:var(--ts-select-focus-ring)}.select__trigger--error{border-color:var(--ts-color-danger-500)}.select__trigger--error:focus-visible{box-shadow:0 0 0 3px var(--ts-color-focus-ring-danger)}.select__trigger--disabled{background-color:var(--ts-color-bg-disabled);opacity:0.6;cursor:not-allowed}.select__trigger--open{border-color:var(--ts-color-primary-500);box-shadow:var(--ts-select-focus-ring)}.select__display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select__display--placeholder{color:var(--ts-color-text-tertiary)}.select__chevron{width:1em;height:1em;flex-shrink:0;transition:transform var(--ts-transition-fast);color:var(--ts-color-text-tertiary)}:host(.ts-select--open) .select__chevron{transform:rotate(180deg)}.select__dropdown{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + var(--ts-spacing-1));z-index:1000;background-color:var(--ts-color-bg-elevated);border:1px solid var(--ts-color-border-default);border-radius:var(--ts-radius-md);box-shadow:var(--ts-shadow-lg);max-height:15rem;overflow-y:auto;padding-block:var(--ts-spacing-1)}.select__option{display:flex;align-items:center;padding:var(--ts-spacing-2) var(--ts-spacing-3);cursor:pointer;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast);color:var(--ts-color-text-primary);font-size:inherit}.select__option:hover:not(.select__option--disabled){background-color:var(--ts-color-interactive-primary-subtle)}.select__option--focused{background-color:var(--ts-color-bg-subtle)}.select__option--selected{color:var(--ts-color-interactive-primary);font-weight:var(--ts-font-weight-medium)}.select__option--disabled{opacity:0.5;cursor:not-allowed}:host([size="sm"]) .select__trigger{padding:var(--ts-spacing-1) var(--ts-spacing-2);font-size:var(--ts-font-size-sm);border-radius:var(--ts-radius-sm)}:host([size="md"]) .select__trigger{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-md)}:host([size="lg"]) .select__trigger{padding:var(--ts-spacing-3) var(--ts-spacing-4);font-size:var(--ts-font-size-lg)}:host([size="xl"]) .select__trigger{padding:var(--ts-spacing-4) var(--ts-spacing-5);font-size:var(--ts-font-size-xl);border-radius:var(--ts-radius-lg)}.select__hidden-slot{display:none}.select__help,.select__error{margin-block-start:var(--ts-spacing-1);font-size:var(--ts-font-size-xs);line-height:var(--ts-line-height-normal)}.select__help{color:var(--ts-color-text-tertiary)}.select__error{color:var(--ts-color-danger-600);font-weight:var(--ts-font-weight-medium)}`;
+
+const TsSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+        this.tsFocus = createEvent(this, "tsFocus");
+        this.tsBlur = createEvent(this, "tsBlur");
+    }
+    get hostEl() { return getElement(this); }
+    inputId = generateId('ts-select');
+    triggerEl;
+    /** The current value. */
+    value = '';
+    /** Placeholder text when no value is selected. */
+    placeholder;
+    /** Renders the select as disabled. */
+    disabled = false;
+    /** The select size. */
+    size = 'md';
+    /** Label text displayed above the select. */
+    label;
+    /** Help text displayed below the select. */
+    helpText;
+    /** Renders the select in an error state. */
+    error = false;
+    /** Error message displayed below the select. */
+    errorMessage;
+    /** Makes the select required. */
+    required = false;
+    /** Name attribute for form submission. */
+    name;
+    /** Allow multiple selections. */
+    multiple = false;
+    /** Whether the dropdown is open. */
+    isOpen = false;
+    /** The index of the currently focused option. */
+    focusedIndex = -1;
+    /** Parsed options from slotted <option> elements. */
+    options = [];
+    /** Emitted when the value changes. */
+    tsChange;
+    /** Emitted when the select gains focus. */
+    tsFocus;
+    /** Emitted when the select loses focus. */
+    tsBlur;
+    handleValueChange() {
+        // Value was changed externally; ensure UI is in sync
+    }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.hostEl.contains(event.target)) {
+            this.close();
+        }
+    }
+    componentWillLoad() {
+        this.parseOptions();
+    }
+    componentDidLoad() {
+        // Observe slot changes to re-parse options
+        const slot = this.hostEl.shadowRoot?.querySelector('.select__hidden-slot slot');
+        slot?.addEventListener('slotchange', () => this.parseOptions());
+    }
+    parseOptions() {
+        const slottedOptions = this.hostEl.querySelectorAll('option');
+        this.options = Array.from(slottedOptions).map((opt) => ({
+            value: opt.value,
+            label: opt.textContent?.trim() ?? opt.value,
+            disabled: opt.disabled,
+        }));
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+        this.focusedIndex = this.options.findIndex((o) => o.value === this.value);
+        if (this.focusedIndex < 0)
+            this.focusedIndex = 0;
+    }
+    close() {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.triggerEl?.focus();
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.tsChange.emit({ value: this.value });
+        this.close();
+    }
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.open();
+                }
+                else if (event.key === 'Enter' || event.key === ' ') {
+                    if (this.focusedIndex >= 0 && this.options[this.focusedIndex]) {
+                        this.selectOption(this.options[this.focusedIndex]);
+                    }
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.open();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    };
+    handleDropdownKeydown = (event) => {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveFocus(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.options[this.focusedIndex] && !this.options[this.focusedIndex].disabled) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[0]) : 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[enabledOptions.length - 1]) : this.options.length - 1;
+                break;
+        }
+    };
+    moveFocus(direction) {
+        let next = this.focusedIndex + direction;
+        while (next >= 0 && next < this.options.length && this.options[next].disabled) {
+            next += direction;
+        }
+        if (next >= 0 && next < this.options.length) {
+            this.focusedIndex = next;
+        }
+    }
+    handleFocus = () => {
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.tsBlur.emit();
+    };
+    getDisplayText() {
+        const selected = this.options.find((o) => o.value === this.value);
+        return selected?.label ?? '';
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = this.error && !!this.errorMessage;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        const listboxId = `${this.inputId}-listbox`;
+        const displayText = this.getDisplayText();
+        return (h(Host, { key: '9b3a0e36fdea320fce2428978bcf5052fdfd4de9', class: {
+                'ts-select': true,
+                [`ts-select--${this.size}`]: true,
+                'ts-select--open': this.isOpen,
+                'ts-select--disabled': this.disabled,
+                'ts-select--error': this.error,
+            } }, this.label && (h("label", { key: '71a6c856fc09aa61ac26c4481e572f2ae5e45bdf', class: "select__label", part: "label", id: labelId }, this.label, this.required && h("span", { key: 'fa1aa9a6d2dde47fdec5e8d0728b8f5a65589430', class: "select__required", "aria-hidden": "true" }, " *"))), h("div", { key: 'f3897e2538d5133ce07ab4591cbd52a1321ec938', class: "select__container" }, h("button", { key: 'f78d7565c491639e1007026b1e979e7fe7cdc185', ref: (el) => (this.triggerEl = el), class: {
+                'select__trigger': true,
+                'select__trigger--open': this.isOpen,
+                'select__trigger--error': this.error,
+                'select__trigger--disabled': this.disabled,
+            }, part: "trigger", type: "button", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.disabled, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '47ef7c569d488efcdbdcb0c4dde6bda31b71783a', class: { 'select__display': true, 'select__display--placeholder': !displayText } }, displayText || this.placeholder || '\u00A0'), h("svg", { key: 'a416413862109fa8fcf9a4a2b82c6b37fa6a0336', class: "select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'aea2702514b5b0a8e5981e3b901d2b5f74b5ac45', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.isOpen && (h("div", { key: '61c28bf0a413a73460f9ecf14e5dd85e82502249', class: "select__dropdown", part: "dropdown", role: "listbox", id: listboxId, "aria-labelledby": this.label ? labelId : undefined, onKeyDown: this.handleDropdownKeydown }, this.options.map((option, index) => (h("div", { class: {
+                'select__option': true,
+                'select__option--selected': option.value === this.value,
+                'select__option--focused': index === this.focusedIndex,
+                'select__option--disabled': option.disabled,
+            }, part: "option", role: "option", "aria-selected": option.value === this.value ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.selectOption(option) }, option.label)))))), h("div", { key: 'a9a59b1565505fd6262a81ce202f1bd4fbb3af1f', class: "select__hidden-slot" }, h("slot", { key: '7f5a9e5b313694ff80f0b86e4d1268a20d165556' })), hasError && (h("div", { key: 'b91fafea4a65f2d95822b560c2e75ff7d5ff4831', class: "select__error", part: "error-text", id: errorId, role: "alert" }, this.errorMessage)), !hasError && this.helpText && (h("div", { key: 'aed81b58a86b674c53c28c4dd1c97d0e4a2b8cc3', class: "select__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsSelect.style = selectCss();
+
+export { TsSelect as ts_select };
+//# sourceMappingURL=ts-select.entry.js.map
+
+//# sourceMappingURL=ts-select.entry.js.map