@tessera-ui/core 0.4.0

package/dist/esm/tessera-ui.js

@@ -0,0 +1,23 @@
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-V8-ENixA.js';
+export { s as setNonce } from './index-V8-ENixA.js';
+
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["ts-banner",[[769,"ts-banner",{"variant":[513],"dismissible":[516],"icon":[1],"sticky":[516],"isVisible":[32],"close":[64],"show":[64]}]]],["ts-empty-state",[[769,"ts-empty-state",{"heading":[1],"description":[1],"icon":[1],"size":[513]}]]],["ts-nav-item",[[769,"ts-nav-item",{"href":[1],"active":[516],"disabled":[516],"icon":[1]}]]],["ts-step",[[769,"ts-step",{"label":[1],"description":[1],"completed":[516],"error":[516],"disabled":[516],"icon":[1]}]]],["ts-switch-option",[[769,"ts-switch-option",{"value":[513],"disabled":[516],"icon":[1],"active":[1540]}]]],["ts-tabs",[[769,"ts-tabs",{"value":[1537],"variant":[513],"size":[513]},null,{"value":[{"handleValueChange":0}]}]]],["ts-tree-item",[[769,"ts-tree-item",{"label":[1],"expanded":[1540],"selected":[1540],"disabled":[516],"icon":[1],"hasChildren":[32]},null,{"expanded":[{"onExpandedChange":0}]}]]],["ts-accordion",[[769,"ts-accordion",{"multiple":[4]},[[0,"tsToggle","handleToggle"]]]]],["ts-accordion-item",[[769,"ts-accordion-item",{"open":[1540],"disabled":[516],"heading":[1],"internalOpen":[32]},null,{"open":[{"onOpenChange":0}]}]]],["ts-alert",[[769,"ts-alert",{"variant":[513],"closable":[4],"isVisible":[32],"close":[64],"show":[64]}]]],["ts-avatar",[[769,"ts-avatar",{"src":[1],"alt":[1],"name":[1],"size":[513],"variant":[513],"color":[1],"hasError":[32]}]]],["ts-badge",[[769,"ts-badge",{"variant":[513],"size":[513],"pill":[516],"dot":[516],"outline":[516]}]]],["ts-breadcrumb",[[769,"ts-breadcrumb",{"separator":[1]}]]],["ts-breadcrumb-item",[[769,"ts-breadcrumb-item",{"href":[1],"current":[516],"separator":[1]}]]],["ts-button",[[769,"ts-button",{"variant":[513],"appearance":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[1],"href":[1],"target":[1]}]]],["ts-card",[[769,"ts-card",{"elevation":[513],"interactive":[516],"bordered":[516],"padding":[513]}]]],["ts-checkbox",[[769,"ts-checkbox",{"checked":[1540],"indeterminate":[1540],"disabled":[516],"value":[1],"name":[1],"label":[1],"size":[513],"error":[516],"toggle":[64]}]]],["ts-chip",[[769,"ts-chip",{"variant":[513],"size":[513],"removable":[516],"disabled":[516],"selected":[516],"outline":[516]}]]],["ts-container",[[769,"ts-container",{"size":[513],"padding":[516]}]]],["ts-date-picker",[[513,"ts-date-picker",{"value":[1537],"placeholder":[1],"disabled":[516],"min":[1],"max":[1],"label":[1],"error":[516],"errorMessage":[1,"error-message"],"size":[513],"name":[1],"isOpen":[32],"viewMonth":[32],"viewYear":[32],"focusedDay":[32]},null,{"value":[{"handleValueChange":0}]}]]],["ts-dialog",[[769,"ts-dialog",{"open":[1540],"heading":[1],"size":[513],"dismissible":[4],"isAnimating":[32],"show":[64],"close":[64]},null,{"open":[{"handleOpenChange":0}]}]]],["ts-divider",[[513,"ts-divider",{"orientation":[513],"variant":[513],"label":[1]}]]],["ts-drawer",[[769,"ts-drawer",{"open":[1540],"placement":[513],"size":[513],"dismissible":[4],"heading":[1],"isAnimating":[32],"show":[64],"close":[64]},null,{"open":[{"handleOpenChange":0}]}]]],["ts-file-upload",[[769,"ts-file-upload",{"accept":[1],"multiple":[4],"maxSize":[2,"max-size"],"disabled":[516],"label":[1],"name":[1],"isDragOver":[32]}]]],["ts-grid",[[769,"ts-grid",{"columns":[513],"gap":[513],"minColumnWidth":[513,"min-column-width"],"align":[513]}]]],["ts-input",[[769,"ts-input",{"value":[1537],"type":[513],"size":[513],"label":[1],"placeholder":[1],"helpText":[1,"help-text"],"error":[1],"required":[516],"disabled":[516],"readonly":[516],"maxlength":[2],"minlength":[2],"pattern":[1],"autocomplete":[1],"name":[1],"hasFocus":[32],"setFocus":[64],"selectText":[64]},null,{"value":[{"handleValueChange":0}]}]]],["ts-menu",[[769,"ts-menu",{"open":[1540],"trigger":[513],"placement":[513],"focusedIndex":[32]},[[4,"click","handleDocumentClick"],[0,"tsSelect","handleItemSelect"],[0,"keydown","handleKeydown"]],{"open":[{"handleOpenChange":0}]}]]],["ts-menu-item",[[769,"ts-menu-item",{"disabled":[516],"value":[513],"href":[1],"setFocus":[64]}]]],["ts-modal",[[769,"ts-modal",{"open":[1540],"size":[513],"label":[1],"closeOnOverlay":[4,"close-on-overlay"],"closeOnEscape":[4,"close-on-escape"],"showClose":[4,"show-close"],"isAnimating":[32],"show":[64],"close":[64]},null,{"open":[{"handleOpenChange":0}]}]]],["ts-nav",[[769,"ts-nav",{"variant":[513],"collapsed":[516]}]]],["ts-pagination",[[513,"ts-pagination",{"total":[2],"pageSize":[2,"page-size"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"size":[513]}]]],["ts-popover",[[769,"ts-popover",{"open":[1540],"placement":[513],"trigger":[1],"dismissible":[4],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":[{"handleOpenChange":0}]}]]],["ts-progress",[[513,"ts-progress",{"value":[2],"max":[2],"variant":[513],"size":[513],"indeterminate":[516],"label":[1],"showValue":[516,"show-value"]}]]],["ts-radio",[[769,"ts-radio",{"checked":[1540],"disabled":[516],"value":[1],"name":[1],"label":[1],"size":[513],"select":[64]}]]],["ts-row",[[769,"ts-row",{"gap":[513],"align":[513],"justify":[513],"wrap":[516],"reverse":[516],"stackAt":[513,"stack-at"]}]]],["ts-select",[[769,"ts-select",{"value":[1537],"placeholder":[1],"disabled":[516],"size":[513],"label":[1],"helpText":[1,"help-text"],"error":[516],"errorMessage":[1,"error-message"],"required":[516],"name":[1],"multiple":[516],"isOpen":[32],"focusedIndex":[32],"options":[32]},[[4,"click","handleDocumentClick"]],{"value":[{"handleValueChange":0}]}]]],["ts-skeleton",[[513,"ts-skeleton",{"variant":[513],"width":[1],"height":[1],"lines":[2],"animation":[513]}]]],["ts-slider",[[513,"ts-slider",{"value":[1538],"min":[2],"max":[2],"step":[2],"disabled":[516],"label":[1],"showValue":[516,"show-value"],"size":[513],"dragging":[32]}]]],["ts-spacer",[[513,"ts-spacer",{"size":[513],"axis":[513]}]]],["ts-spinner",[[513,"ts-spinner",{"size":[513],"color":[1],"label":[1]}]]],["ts-stack",[[769,"ts-stack",{"gap":[513],"align":[513]}]]],["ts-stepper",[[769,"ts-stepper",{"activeStep":[514,"active-step"],"orientation":[513],"linear":[4]},null,{"activeStep":[{"handleActiveStepChange":0}]}]]],["ts-switch-group",[[769,"ts-switch-group",{"value":[1537],"size":[513],"disabled":[516],"fullWidth":[516,"full-width"]},[[0,"tsOptionSelect","handleOptionSelect"],[0,"keydown","handleKeyDown"]],{"value":[{"onValueChange":0}]}]]],["ts-tab-panel",[[769,"ts-tab-panel",{"tab":[1],"value":[513],"disabled":[516],"icon":[1]}]]],["ts-table",[[772,"ts-table",{"striped":[516],"bordered":[516],"hoverable":[516],"compact":[516],"stickyHeader":[516,"sticky-header"]}]]],["ts-textarea",[[513,"ts-textarea",{"value":[1537],"placeholder":[1],"disabled":[516],"readonly":[516],"size":[513],"label":[1],"helpText":[1,"help-text"],"error":[516],"errorMessage":[1,"error-message"],"required":[516],"name":[1],"rows":[2],"resize":[513],"maxlength":[2],"hasFocus":[32],"setFocus":[64],"selectText":[64]},null,{"value":[{"handleValueChange":0}]}]]],["ts-toast",[[769,"ts-toast",{"variant":[513],"duration":[2],"dismissible":[4],"open":[1540],"position":[513],"isVisible":[32],"close":[64],"show":[64]},null,{"open":[{"handleOpenChange":0}]}]]],["ts-toggle",[[769,"ts-toggle",{"checked":[1540],"size":[513],"disabled":[516],"name":[1],"value":[1],"toggle":[64]}]]],["ts-toolbar",[[769,"ts-toolbar",{"variant":[513],"size":[513]}]]],["ts-tooltip",[[769,"ts-tooltip",{"content":[1],"placement":[513],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"disabled":[516],"isVisible":[32],"show":[64],"hide":[64]}]]],["ts-tree",[[769,"ts-tree",{"selectable":[516]},[[0,"keydown","handleKeyDown"]]]]],["ts-icon",[[769,"ts-icon",{"name":[513],"src":[1],"size":[513],"label":[1],"color":[513],"svgContent":[32]},null,{"name":[{"nameChanged":0}]}]]]], options);
+});
+//# sourceMappingURL=tessera-ui.js.map
+
+//# sourceMappingURL=tessera-ui.js.map

package/dist/esm/tessera-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tessera-ui.js","sources":["node_modules/.pnpm/@stencil+core@4.43.3/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/dist/esm/ts-accordion-item.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-V8-ENixA.js';
+
+const accordionItemCss = () => `:host{display:block}.accordion-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-spacing-2);padding-block:var(--ts-spacing-3);padding-inline:var(--ts-spacing-4);background:var(--ts-accordion-header-bg, transparent);border:none;cursor:pointer;font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-md);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary);outline:none;transition:background-color var(--ts-transition-fast);user-select:none}.accordion-item__header:hover:not([aria-disabled="true"]){background-color:var(--ts-color-bg-subtle)}.accordion-item__header:focus-visible{box-shadow:var(--ts-focus-ring)}:host([disabled]) .accordion-item__header{opacity:0.5;cursor:not-allowed}.accordion-item__icon{display:inline-flex;align-items:center;transition:transform var(--ts-transition-fast)}.accordion-item__icon svg{inline-size:1.25em;block-size:1.25em}:host(.ts-accordion-item--open) .accordion-item__icon{transform:rotate(180deg)}.accordion-item__panel{overflow:hidden;transition:max-block-size var(--ts-transition-normal)}.accordion-item__panel[hidden]{display:none}.accordion-item__content{padding-block:var(--ts-spacing-2);padding-inline:var(--ts-spacing-4);padding-block-end:var(--ts-spacing-4);font-size:var(--ts-font-size-md);color:var(--ts-color-text-secondary)}`;
+
+let accordionItemId = 0;
+const TsAccordionItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsToggle = createEvent(this, "tsToggle");
+    }
+    headerId;
+    panelId;
+    /** Whether the item is expanded. */
+    open = false;
+    /** Disables toggling. */
+    disabled = false;
+    /** Header text for the item. */
+    heading;
+    /** Emitted when the item is toggled. */
+    tsToggle;
+    internalOpen = false;
+    onOpenChange(newVal) {
+        this.internalOpen = newVal;
+    }
+    connectedCallback() {
+        const id = accordionItemId++;
+        this.headerId = `ts-accordion-header-${id}`;
+        this.panelId = `ts-accordion-panel-${id}`;
+        this.internalOpen = this.open;
+    }
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.internalOpen = this.open;
+        this.tsToggle.emit({ open: this.open });
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'aa3316d5e46a7c4e7c055497e52db820e2eb2804', class: {
+                'ts-accordion-item': true,
+                'ts-accordion-item--open': this.internalOpen,
+                'ts-accordion-item--disabled': this.disabled,
+            } }, h("div", { key: '27e63690847de4d816057891141402f51375a179', class: "accordion-item__header", part: "header", id: this.headerId, role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.internalOpen ? 'true' : 'false', "aria-controls": this.panelId, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'fd3c289960510c7953c1853a10dd4b544e361d0c', name: "header" }, h("span", { key: '8cd789055352fb8f0773511985e2a27cfb92551b', class: "accordion-item__heading" }, this.heading)), h("span", { key: '2f33c59115a23e86e92fb0e3dcbc6098718e16e1', class: "accordion-item__icon", "aria-hidden": "true" }, h("svg", { key: '632affef71463346f8ff771cfd58db096675d532', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'ee66ca775b9f9081cd9a6c265aee0e075e12f2cb', points: "6 9 12 15 18 9" })))), h("div", { key: 'aa58f91f91dba2000579597767d33fdd10c52547', class: "accordion-item__panel", part: "panel", id: this.panelId, role: "region", "aria-labelledby": this.headerId, hidden: !this.internalOpen }, h("div", { key: '980de82df6259725bf743a22734cb9be96f0a01b', class: "accordion-item__content" }, h("slot", { key: 'ae98ce52f3686885e61b7fdf4a8b6c60f0cebd72' })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+TsAccordionItem.style = accordionItemCss();
+
+export { TsAccordionItem as ts_accordion_item };
+//# sourceMappingURL=ts-accordion-item.entry.js.map
+
+//# sourceMappingURL=ts-accordion-item.entry.js.map

package/dist/esm/ts-accordion-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-accordion-item.entry.js","sources":["src/components/accordion/accordion-item.css?tag=ts-accordion-item&encapsulation=shadow","src/components/accordion/accordion-item.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-accordion-item — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n/* ---- Header ---- */\n.accordion-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ts-spacing-2);\n  padding-block: var(--ts-spacing-3);\n  padding-inline: var(--ts-spacing-4);\n  background: var(--ts-accordion-header-bg, transparent);\n  border: none;\n  cursor: pointer;\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-md);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n  outline: none;\n  transition: background-color var(--ts-transition-fast);\n  user-select: none;\n}\n\n.accordion-item__header:hover:not([aria-disabled=\"true\"]) {\n  background-color: var(--ts-color-bg-subtle);\n}\n\n.accordion-item__header:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .accordion-item__header {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Chevron icon ---- */\n.accordion-item__icon {\n  display: inline-flex;\n  align-items: center;\n  transition: transform var(--ts-transition-fast);\n}\n\n.accordion-item__icon svg {\n  inline-size: 1.25em;\n  block-size: 1.25em;\n}\n\n:host(.ts-accordion-item--open) .accordion-item__icon {\n  transform: rotate(180deg);\n}\n\n/* ---- Panel ---- */\n.accordion-item__panel {\n  overflow: hidden;\n  transition: max-block-size var(--ts-transition-normal);\n}\n\n.accordion-item__panel[hidden] {\n  display: none;\n}\n\n.accordion-item__content {\n  padding-block: var(--ts-spacing-2);\n  padding-inline: var(--ts-spacing-4);\n  padding-block-end: var(--ts-spacing-4);\n  font-size: var(--ts-font-size-md);\n  color: var(--ts-color-text-secondary);\n}\n","import { Component, Prop, Event, h, Host, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nlet accordionItemId = 0;\n\n/**\n * @slot - Default slot for panel content.\n * @slot header - Custom header content (replaces heading text).\n *\n * @part header - The header button.\n * @part panel - The content panel.\n */\n@Component({\n  tag: 'ts-accordion-item',\n  styleUrl: 'accordion-item.css',\n  shadow: true,\n})\nexport class TsAccordionItem {\n  private headerId!: string;\n  private panelId!: string;\n\n  /** Whether the item is expanded. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Disables toggling. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Header text for the item. */\n  @Prop() heading?: string;\n\n  /** Emitted when the item is toggled. */\n  @Event({ eventName: 'tsToggle' }) tsToggle!: EventEmitter<{ open: boolean }>;\n\n  @State() internalOpen = false;\n\n  @Watch('open')\n  onOpenChange(newVal: boolean): void {\n    this.internalOpen = newVal;\n  }\n\n  connectedCallback(): void {\n    const id = accordionItemId++;\n    this.headerId = `ts-accordion-header-${id}`;\n    this.panelId = `ts-accordion-panel-${id}`;\n    this.internalOpen = this.open;\n  }\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.internalOpen = this.open;\n    this.tsToggle.emit({ open: this.open });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-accordion-item': true,\n          'ts-accordion-item--open': this.internalOpen,\n          'ts-accordion-item--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"accordion-item__header\"\n          part=\"header\"\n          id={this.headerId}\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.internalOpen ? 'true' : 'false'}\n          aria-controls={this.panelId}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <slot name=\"header\">\n            <span class=\"accordion-item__heading\">{this.heading}</span>\n          </slot>\n          <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"6 9 12 15 18 9\" />\n            </svg>\n          </span>\n        </div>\n        <div\n          class=\"accordion-item__panel\"\n          part=\"panel\"\n          id={this.panelId}\n          role=\"region\"\n          aria-labelledby={this.headerId}\n          hidden={!this.internalOpen}\n        >\n          <div class=\"accordion-item__content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,+zCAA+zC,CAAC;;ACGh2C,IAAI,eAAe,GAAG,CAAC;MAcV,eAAe,GAAA,MAAA;;;;;AAClB,IAAA,QAAQ;AACR,IAAA,OAAO;;IAGyB,IAAI,GAAG,KAAK;;IAG3B,QAAQ,GAAG,KAAK;;AAGjC,IAAA,OAAO;;AAGmB,IAAA,QAAQ;IAEjC,YAAY,GAAG,KAAK;AAG7B,IAAA,YAAY,CAAC,MAAe,EAAA;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM;;IAG5B,iBAAiB,GAAA;AACf,QAAA,MAAM,EAAE,GAAG,eAAe,EAAE;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAA,oBAAA,EAAuB,EAAE,EAAE;AAC3C,QAAA,IAAI,CAAC,OAAO,GAAG,CAAA,mBAAA,EAAsB,EAAE,EAAE;AACzC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAGvB,WAAW,GAAG,MAAW;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;AAC7B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACzC,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE;;AAEtB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,yBAAyB,EAAE,IAAI,CAAC,YAAY;gBAC5C,6BAA6B,EAAE,IAAI,CAAC,QAAQ;AAC7C,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,mBACjB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EACpC,IAAI,CAAC,OAAO,EAAA,eAAA,EACZ,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACtD,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EACnD,CAAA,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,EACxH,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,CAChC,CACD,CACH,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACI,IAAI,CAAC,QAAQ,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;;;;;;"}

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

@@ -0,0 +1,34 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const accordionCss = () => `:host{display:block;--ts-accordion-border-color:var(--ts-color-border-default);--ts-accordion-header-bg:transparent;--ts-accordion-radius:var(--ts-radius-lg)}::slotted(ts-accordion-item){border-block-end:1px solid var(--ts-accordion-border-color)}::slotted(ts-accordion-item:first-child){border-start-start-radius:var(--ts-accordion-radius);border-start-end-radius:var(--ts-accordion-radius)}::slotted(ts-accordion-item:last-child){border-end-start-radius:var(--ts-accordion-radius);border-end-end-radius:var(--ts-accordion-radius);border-block-end:none}`;
+
+const TsAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** Allow multiple items to be open simultaneously. */
+    multiple = false;
+    handleToggle(event) {
+        if (!this.multiple && event.detail.open) {
+            const target = event.target;
+            const items = this.hostEl.querySelectorAll('ts-accordion-item');
+            items.forEach((item) => {
+                if (item !== target) {
+                    item.setAttribute('open', 'false');
+                    item.removeAttribute('open');
+                }
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '737635093f0c31076c08a6fb2a88804604b1b77e', class: "ts-accordion" }, h("slot", { key: '9daa06ca9dd44478594e686792da9529637f69a3' })));
+    }
+};
+TsAccordion.style = accordionCss();
+
+export { TsAccordion as ts_accordion };
+//# sourceMappingURL=ts-accordion.entry.js.map
+
+//# sourceMappingURL=ts-accordion.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-accordion.entry.js","sources":["src/components/accordion/accordion.css?tag=ts-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-accordion — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-accordion-border-color    Border color between items\n     --ts-accordion-header-bg       Header background color\n     --ts-accordion-radius          Border radius\n   ========================================================================== */\n\n:host {\n  display: block;\n\n  --ts-accordion-border-color: var(--ts-color-border-default);\n  --ts-accordion-header-bg: transparent;\n  --ts-accordion-radius: var(--ts-radius-lg);\n}\n\n::slotted(ts-accordion-item) {\n  border-block-end: 1px solid var(--ts-accordion-border-color);\n}\n\n::slotted(ts-accordion-item:first-child) {\n  border-start-start-radius: var(--ts-accordion-radius);\n  border-start-end-radius: var(--ts-accordion-radius);\n}\n\n::slotted(ts-accordion-item:last-child) {\n  border-end-start-radius: var(--ts-accordion-radius);\n  border-end-end-radius: var(--ts-accordion-radius);\n  border-block-end: none;\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-accordion-item children.\n */\n@Component({\n  tag: 'ts-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class TsAccordion {\n  @Element() hostEl!: HTMLElement;\n\n  /** Allow multiple items to be open simultaneously. */\n  @Prop() multiple = false;\n\n  @Listen('tsToggle')\n  handleToggle(event: CustomEvent<{ open: boolean }>): void {\n    if (!this.multiple && event.detail.open) {\n      const target = event.target as HTMLElement;\n      const items = this.hostEl.querySelectorAll('ts-accordion-item');\n      items.forEach((item) => {\n        if (item !== target) {\n          item.setAttribute('open', 'false');\n          item.removeAttribute('open');\n        }\n      });\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host class=\"ts-accordion\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,0iBAA0iB,CAAC;;MCU1jB,WAAW,GAAA,MAAA;;;;;;IAId,QAAQ,GAAG,KAAK;AAGxB,IAAA,YAAY,CAAC,KAAqC,EAAA;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE;AACvC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;YAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;AAC/D,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACrB,gBAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACnB,oBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;AAClC,oBAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;;AAEhC,aAAC,CAAC;;;;IAKN,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,cAAc,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

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

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-V8-ENixA.js';
+
+const alertCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-alert-radius:var(--ts-radius-lg);--ts-alert-font-size:var(--ts-font-size-sm)}.alert__base{display:flex;align-items:flex-start;gap:var(--ts-spacing-3);padding:var(--ts-spacing-4) var(--ts-spacing-4);border-radius:var(--ts-alert-radius);border:1px solid transparent;border-inline-start:3px solid transparent;font-size:var(--ts-alert-font-size);line-height:var(--ts-line-height-normal)}:host([variant="info"]) .alert__base{background-color:var(--ts-color-info-bg);border-color:var(--ts-color-info-border);border-inline-start-color:var(--ts-color-info-500);color:var(--ts-color-info-600)}:host([variant="success"]) .alert__base{background-color:var(--ts-color-success-bg);border-color:var(--ts-color-success-border);border-inline-start-color:var(--ts-color-success-500);color:var(--ts-color-success-600)}:host([variant="warning"]) .alert__base{background-color:var(--ts-color-warning-bg);border-color:var(--ts-color-warning-border);border-inline-start-color:var(--ts-color-warning-500);color:var(--ts-color-warning-600)}:host([variant="danger"]) .alert__base{background-color:var(--ts-color-danger-bg);border-color:var(--ts-color-danger-border);border-inline-start-color:var(--ts-color-danger-500);color:var(--ts-color-danger-600)}:host([variant="neutral"]) .alert__base{background-color:var(--ts-color-bg-subtle);border-color:var(--ts-color-border-subtle);border-inline-start-color:var(--ts-color-neutral-400);color:var(--ts-color-text-secondary)}.alert__icon{display:flex;align-items:center;font-size:1.25em;flex-shrink:0;margin-top:1px}.alert__message{flex:1;min-width:0}.alert__action{display:flex;align-items:center;flex-shrink:0}.alert__action:empty{display:none}.alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border:none;border-radius:var(--ts-radius-sm);background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.8em;transition:opacity var(--ts-transition-fast);padding:0;line-height:1}.alert__close:hover{opacity:1}.alert__close:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}`;
+
+const TsAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsClose = createEvent(this, "tsClose");
+    }
+    /** The alert's semantic variant. */
+    variant = 'info';
+    /** Whether the alert can be dismissed. */
+    closable = false;
+    /** Whether the alert is currently visible. */
+    isVisible = true;
+    /** Emitted when the alert is closed. */
+    tsClose;
+    /** Programmatically close the alert. */
+    async close() {
+        this.isVisible = false;
+        this.tsClose.emit();
+    }
+    /** Programmatically show the alert. */
+    async show() {
+        this.isVisible = true;
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderDefaultIcon() {
+        const icons = {
+            info: 'ℹ',
+            success: '✓',
+            warning: '⚠',
+            danger: '✕',
+            primary: 'ℹ',
+            secondary: 'ℹ',
+            neutral: 'ℹ',
+        };
+        return h("span", { "aria-hidden": "true" }, icons[this.variant] || 'ℹ');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        return (h(Host, { class: {
+                'ts-alert': true,
+                [`ts-alert--${this.variant}`]: true,
+            }, role: "alert" }, h("div", { class: "alert__base", part: "base" }, h("div", { class: "alert__icon", part: "icon" }, h("slot", { name: "icon" }, this.renderDefaultIcon())), h("div", { class: "alert__message", part: "message" }, h("slot", null)), h("div", { class: "alert__action", part: "action" }, h("slot", { name: "action" })), this.closable && (h("button", { class: "alert__close", part: "close", type: "button", "aria-label": "Close alert", onClick: this.handleClose }, "\u2715")))));
+    }
+};
+TsAlert.style = alertCss();
+
+export { TsAlert as ts_alert };
+//# sourceMappingURL=ts-alert.entry.js.map
+
+//# sourceMappingURL=ts-alert.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-alert.entry.js","sources":["src/components/alert/alert.css?tag=ts-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-alert — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-alert-radius      Border radius\n     --ts-alert-font-size   Message font size\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-alert-radius: var(--ts-radius-lg);\n  --ts-alert-font-size: var(--ts-font-size-sm);\n}\n\n.alert__base {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ts-spacing-3);\n  padding: var(--ts-spacing-4) var(--ts-spacing-4);\n  border-radius: var(--ts-alert-radius);\n  border: 1px solid transparent;\n  border-inline-start: 3px solid transparent;\n  font-size: var(--ts-alert-font-size);\n  line-height: var(--ts-line-height-normal);\n}\n\n/* ---- Variants ---- */\n:host([variant=\"info\"]) .alert__base {\n  background-color: var(--ts-color-info-bg);\n  border-color: var(--ts-color-info-border);\n  border-inline-start-color: var(--ts-color-info-500);\n  color: var(--ts-color-info-600);\n}\n\n:host([variant=\"success\"]) .alert__base {\n  background-color: var(--ts-color-success-bg);\n  border-color: var(--ts-color-success-border);\n  border-inline-start-color: var(--ts-color-success-500);\n  color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]) .alert__base {\n  background-color: var(--ts-color-warning-bg);\n  border-color: var(--ts-color-warning-border);\n  border-inline-start-color: var(--ts-color-warning-500);\n  color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]) .alert__base {\n  background-color: var(--ts-color-danger-bg);\n  border-color: var(--ts-color-danger-border);\n  border-inline-start-color: var(--ts-color-danger-500);\n  color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"neutral\"]) .alert__base {\n  background-color: var(--ts-color-bg-subtle);\n  border-color: var(--ts-color-border-subtle);\n  border-inline-start-color: var(--ts-color-neutral-400);\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Icon ---- */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  font-size: 1.25em;\n  flex-shrink: 0;\n  margin-top: 1px;\n}\n\n/* ---- Message ---- */\n.alert__message {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ---- Action ---- */\n.alert__action {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.alert__action:empty {\n  display: none;\n}\n\n/* ---- Close Button ---- */\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  border-radius: var(--ts-radius-sm);\n  background: transparent;\n  color: currentColor;\n  opacity: 0.6;\n  cursor: pointer;\n  font-size: 0.8em;\n  transition: opacity var(--ts-transition-fast);\n  padding: 0;\n  line-height: 1;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n\n.alert__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  opacity: 1;\n}\n","import { Component, Prop, Event, State, h, Host, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for alert message content.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot action - Action buttons or links displayed at the end.\n *\n * @part base - The alert container.\n * @part icon - The icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class TsAlert {\n  /** The alert's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'info';\n\n  /** Whether the alert can be dismissed. */\n  @Prop() closable = false;\n\n  /** Whether the alert is currently visible. */\n  @State() isVisible = true;\n\n  /** Emitted when the alert is closed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Programmatically close the alert. */\n  @Method()\n  async close(): Promise<void> {\n    this.isVisible = false;\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the alert. */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderDefaultIcon() {\n    const icons: Record<string, string> = {\n      info: 'ℹ',\n      success: '✓',\n      warning: '⚠',\n      danger: '✕',\n      primary: 'ℹ',\n      secondary: 'ℹ',\n      neutral: 'ℹ',\n    };\n    return <span aria-hidden=\"true\">{icons[this.variant] || 'ℹ'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    return (\n      <Host\n        class={{\n          'ts-alert': true,\n          [`ts-alert--${this.variant}`]: true,\n        }}\n        role=\"alert\"\n      >\n        <div class=\"alert__base\" part=\"base\">\n          <div class=\"alert__icon\" part=\"icon\">\n            <slot name=\"icon\">{this.renderDefaultIcon()}</slot>\n          </div>\n\n          <div class=\"alert__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"alert__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.closable && (\n            <button\n              class=\"alert__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close alert\"\n              onClick={this.handleClose}\n            >\n              ✕\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,2lEAA2lE,CAAC;;MCoBvmE,OAAO,GAAA,MAAA;;;;;;IAEO,OAAO,GAAc,MAAM;;IAG5C,QAAQ,GAAG,KAAK;;IAGf,SAAS,GAAG,IAAI;;AAGQ,IAAA,OAAO;;AAIxC,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;AAKrB,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGf,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,KAAK,EAAE;AACd,KAAC;;IAGO,iBAAiB,GAAA;AACvB,QAAA,MAAM,KAAK,GAA2B;AACpC,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,OAAO,EAAE,GAAG;SACb;AACD,QAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAA,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAQ;;;IAIrE,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,IAAI;AAEhC,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;AAChB,gBAAA,CAAC,aAAa,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACpC,aAAA,EACD,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAQ,CAC/C,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EAEL,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAAA,QAAA,CAGlB,CACV,CACG,CACD;;;;;;;"}

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const avatarCss = () => `:host{display:inline-flex;vertical-align:middle;--ts-avatar-size:2.5rem;--ts-avatar-bg:var(--ts-color-neutral-200);--ts-avatar-color:var(--ts-color-text-primary);--ts-avatar-radius:var(--ts-shape-full)}:host([size="xs"]){--ts-avatar-size:1.5rem;font-size:var(--ts-font-size-xs)}:host([size="sm"]){--ts-avatar-size:2rem;font-size:var(--ts-font-size-sm)}:host([size="md"]){--ts-avatar-size:2.5rem;font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-avatar-size:3rem;font-size:var(--ts-font-size-lg)}:host([size="xl"]){--ts-avatar-size:4rem;font-size:var(--ts-font-size-xl)}:host([variant="square"]){--ts-avatar-radius:var(--ts-radius-full)}.avatar__base{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-avatar-size);height:var(--ts-avatar-size);border-radius:var(--ts-avatar-radius);background-color:var(--ts-avatar-bg);color:var(--ts-avatar-color);overflow:hidden;user-select:none;flex-shrink:0}.avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar__initials{font-family:var(--ts-font-family-base);font-weight:var(--ts-font-weight-semi);font-size:inherit;line-height:1;text-transform:uppercase}`;
+
+const TsAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Image URL for the avatar. */
+    src;
+    /** Alt text for the avatar image. */
+    alt;
+    /** Name used to generate initials fallback. */
+    name;
+    /** The size of the avatar. */
+    size = 'md';
+    /** Shape variant of the avatar. */
+    variant = 'circle';
+    /** Background color for the initials fallback. */
+    color;
+    /** Whether the image failed to load. */
+    hasError = false;
+    handleError = () => {
+        this.hasError = true;
+    };
+    getInitials() {
+        if (!this.name)
+            return '';
+        const words = this.name.trim().split(/\s+/);
+        if (words.length === 1) {
+            return words[0].charAt(0).toUpperCase();
+        }
+        return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const showImage = this.src && !this.hasError;
+        const initials = this.getInitials();
+        const showInitials = !showImage && initials;
+        return (h(Host, { key: '11d72d9cc86c6f14c01ac01a6f37736b8e1872bd', class: {
+                'ts-avatar': true,
+                [`ts-avatar--${this.size}`]: true,
+                [`ts-avatar--${this.variant}`]: true,
+            } }, h("div", { key: '74c5395cc637d642bc0e53fa3a19315e9a6be2cb', class: "avatar__base", part: "base", role: "img", "aria-label": this.alt || this.name || 'Avatar', style: this.color && !showImage ? { backgroundColor: this.color } : undefined }, showImage && (h("img", { key: '7544f0a8907645da2334e8d5f55eab475488299d', class: "avatar__image", part: "image", src: this.src, alt: this.alt || this.name || '', onError: this.handleError })), showInitials && (h("span", { key: '4425c8f4dc882b10e7c54b3c53d3cbc37a410c2f', class: "avatar__initials", part: "initials", "aria-hidden": "true" }, initials)), !showImage && !showInitials && h("slot", { key: 'a1ea8a822e01d541c135b4fc4aba9f25c117beb8' }))));
+    }
+};
+TsAvatar.style = avatarCss();
+
+export { TsAvatar as ts_avatar };
+//# sourceMappingURL=ts-avatar.entry.js.map
+
+//# sourceMappingURL=ts-avatar.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-avatar.entry.js","sources":["src/components/avatar/avatar.css?tag=ts-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-avatar — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-avatar-size       Avatar dimensions\n     --ts-avatar-bg         Background color for initials/slot\n     --ts-avatar-color      Text color for initials\n     --ts-avatar-radius     Border radius\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n\n  --ts-avatar-size: 2.5rem;\n  --ts-avatar-bg: var(--ts-color-neutral-200);\n  --ts-avatar-color: var(--ts-color-text-primary);\n  --ts-avatar-radius: var(--ts-shape-full);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) { --ts-avatar-size: 1.5rem;  font-size: var(--ts-font-size-xs); }\n:host([size=\"sm\"]) { --ts-avatar-size: 2rem;    font-size: var(--ts-font-size-sm); }\n:host([size=\"md\"]) { --ts-avatar-size: 2.5rem;  font-size: var(--ts-font-size-md); }\n:host([size=\"lg\"]) { --ts-avatar-size: 3rem;    font-size: var(--ts-font-size-lg); }\n:host([size=\"xl\"]) { --ts-avatar-size: 4rem;    font-size: var(--ts-font-size-xl); }\n\n/* ---- Variant: square ---- */\n:host([variant=\"square\"]) {\n  --ts-avatar-radius: var(--ts-radius-full);\n}\n\n/* ---- Base container ---- */\n.avatar__base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ts-avatar-size);\n  height: var(--ts-avatar-size);\n  border-radius: var(--ts-avatar-radius);\n  background-color: var(--ts-avatar-bg);\n  color: var(--ts-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n/* ---- Image ---- */\n.avatar__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n/* ---- Initials ---- */\n.avatar__initials {\n  font-family: var(--ts-font-family-base);\n  font-weight: var(--ts-font-weight-semi);\n  font-size: inherit;\n  line-height: 1;\n  text-transform: uppercase;\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom content (e.g., icon).\n *\n * @part base - The avatar container.\n * @part image - The avatar image element.\n * @part initials - The initials text element.\n */\n@Component({\n  tag: 'ts-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class TsAvatar {\n  /** Image URL for the avatar. */\n  @Prop() src?: string;\n\n  /** Alt text for the avatar image. */\n  @Prop() alt?: string;\n\n  /** Name used to generate initials fallback. */\n  @Prop() name?: string;\n\n  /** The size of the avatar. */\n  @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** Shape variant of the avatar. */\n  @Prop({ reflect: true }) variant: 'circle' | 'square' = 'circle';\n\n  /** Background color for the initials fallback. */\n  @Prop() color?: string;\n\n  /** Whether the image failed to load. */\n  @State() hasError = false;\n\n  private handleError = (): void => {\n    this.hasError = true;\n  };\n\n  private getInitials(): string {\n    if (!this.name) return '';\n    const words = this.name.trim().split(/\\s+/);\n    if (words.length === 1) {\n      return words[0].charAt(0).toUpperCase();\n    }\n    return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const showImage = this.src && !this.hasError;\n    const initials = this.getInitials();\n    const showInitials = !showImage && initials;\n\n    return (\n      <Host\n        class={{\n          'ts-avatar': true,\n          [`ts-avatar--${this.size}`]: true,\n          [`ts-avatar--${this.variant}`]: true,\n        }}\n      >\n        <div\n          class=\"avatar__base\"\n          part=\"base\"\n          role=\"img\"\n          aria-label={this.alt || this.name || 'Avatar'}\n          style={this.color && !showImage ? { backgroundColor: this.color } : undefined}\n        >\n          {showImage && (\n            <img\n              class=\"avatar__image\"\n              part=\"image\"\n              src={this.src}\n              alt={this.alt || this.name || ''}\n              onError={this.handleError}\n            />\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\" part=\"initials\" aria-hidden=\"true\">\n              {initials}\n            </span>\n          )}\n          {!showImage && !showInitials && <slot />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,qoCAAqoC,CAAC;;MCclpC,QAAQ,GAAA,MAAA;;;;;AAEX,IAAA,GAAG;;AAGH,IAAA,GAAG;;AAGH,IAAA,IAAI;;IAGa,IAAI,GAAqC,IAAI;;IAG7C,OAAO,GAAwB,QAAQ;;AAGxD,IAAA,KAAK;;IAGJ,QAAQ,GAAG,KAAK;IAEjB,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,KAAC;IAEO,WAAW,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;AACzB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3C,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;;AAEzC,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE;;;IAI/E,MAAM,GAAA;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;AAC5C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;AACnC,QAAA,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,QAAQ;QAE3C,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACjC,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACrC,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,SAAS,EAAA,EAE5E,SAAS,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACA,YAAY,KACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,UAAU,EAAA,aAAA,EAAa,MAAM,EAAA,EAC9D,QAAQ,CACJ,CACR,EACA,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACpC,CACD;;;;;;;"}

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const badgeCss = () => `:host{display:inline-flex;vertical-align:middle;font-family:var(--ts-font-family-base);--ts-badge-radius:var(--ts-shape-badge);--ts-badge-font-weight:var(--ts-font-weight-medium)}.badge__base{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--ts-badge-font-weight);letter-spacing:0;line-height:1;white-space:nowrap;border-radius:var(--ts-badge-radius);border:1px solid transparent}:host([size="xs"]) .badge__base{padding:2px var(--ts-spacing-1);font-size:0.625rem}:host([size="sm"]) .badge__base{padding:3px var(--ts-spacing-2);font-size:var(--ts-font-size-xs)}:host([size="md"]) .badge__base{padding:var(--ts-spacing-1) var(--ts-spacing-3);font-size:var(--ts-font-size-xs)}:host([size="lg"]) .badge__base{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-sm)}:host([size="xl"]) .badge__base{padding:var(--ts-spacing-2) var(--ts-spacing-4);font-size:var(--ts-font-size-md)}:host([pill]) .badge__base{border-radius:var(--ts-radius-full)}:host([dot]) .badge__base{width:8px;height:8px;padding:0;border-radius:var(--ts-radius-full)}:host([dot][size="lg"]) .badge__base{width:10px;height:10px}:host([dot][size="xl"]) .badge__base{width:12px;height:12px}:host([variant="primary"]:not([outline])) .badge__base{background:var(--ts-color-primary-500);color:var(--ts-color-text-on-primary)}:host([variant="success"]:not([outline])) .badge__base{background:var(--ts-color-success-500);color:var(--ts-color-text-on-success)}:host([variant="warning"]:not([outline])) .badge__base{background:var(--ts-color-warning-500);color:var(--ts-color-text-on-warning)}:host([variant="danger"]:not([outline])) .badge__base{background:var(--ts-color-danger-500);color:var(--ts-color-text-on-danger)}:host([variant="info"]:not([outline])) .badge__base{background:var(--ts-color-info-500);color:var(--ts-color-text-on-info)}:host([variant="neutral"]:not([outline])) .badge__base{background:var(--ts-color-neutral-200);color:var(--ts-color-text-secondary)}:host([variant="secondary"]:not([outline])) .badge__base{background:var(--ts-color-neutral-100);color:var(--ts-color-text-tertiary)}:host([outline][variant="primary"]) .badge__base{border-color:var(--ts-color-primary-500);color:var(--ts-color-primary-600);background:transparent}:host([outline][variant="success"]) .badge__base{border-color:var(--ts-color-success-500);color:var(--ts-color-success-600);background:transparent}:host([outline][variant="danger"]) .badge__base{border-color:var(--ts-color-danger-500);color:var(--ts-color-danger-600);background:transparent}:host([outline][variant="warning"]) .badge__base{border-color:var(--ts-color-warning-500);color:var(--ts-color-warning-600);background:transparent}:host([outline][variant="neutral"]) .badge__base{border-color:var(--ts-color-border-strong);color:var(--ts-color-text-tertiary);background:transparent}`;
+
+const TsBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The badge's color variant. */
+    variant = 'primary';
+    /** The badge's size. */
+    size = 'md';
+    /** Renders the badge with rounded-pill shape. */
+    pill = false;
+    /** Renders the badge as a small dot indicator (content is hidden). */
+    dot = false;
+    /** Renders an outlined style instead of solid. */
+    outline = false;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '57fde8ab4ea72562b647c9278ed22e1167c21084', class: {
+                'ts-badge': true,
+                [`ts-badge--${this.variant}`]: true,
+                [`ts-badge--${this.size}`]: true,
+                'ts-badge--pill': this.pill,
+                'ts-badge--dot': this.dot,
+                'ts-badge--outline': this.outline,
+            } }, h("span", { key: '926775a060f709af0771e7f6ba6d0c8fee9bf451', class: "badge__base", part: "base" }, !this.dot && h("slot", { key: '48aaec48b5454d7f4c76092e28357ea588b0904e' }))));
+    }
+};
+TsBadge.style = badgeCss();
+
+export { TsBadge as ts_badge };
+//# sourceMappingURL=ts-badge.entry.js.map
+
+//# sourceMappingURL=ts-badge.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-badge.entry.js","sources":["src/components/badge/badge.css?tag=ts-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-badge — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-badge-radius       Border radius\n     --ts-badge-font-weight  Label font weight\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  font-family: var(--ts-font-family-base);\n\n  --ts-badge-radius: var(--ts-shape-badge);\n  --ts-badge-font-weight: var(--ts-font-weight-medium);\n}\n\n.badge__base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: var(--ts-badge-font-weight);\n  letter-spacing: 0;\n  line-height: 1;\n  white-space: nowrap;\n  border-radius: var(--ts-badge-radius);\n  border: 1px solid transparent;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) .badge__base { padding: 2px var(--ts-spacing-1); font-size: 0.625rem; }\n:host([size=\"sm\"]) .badge__base { padding: 3px var(--ts-spacing-2); font-size: var(--ts-font-size-xs); }\n:host([size=\"md\"]) .badge__base { padding: var(--ts-spacing-1) var(--ts-spacing-3); font-size: var(--ts-font-size-xs); }\n:host([size=\"lg\"]) .badge__base { padding: var(--ts-spacing-2) var(--ts-spacing-3); font-size: var(--ts-font-size-sm); }\n:host([size=\"xl\"]) .badge__base { padding: var(--ts-spacing-2) var(--ts-spacing-4); font-size: var(--ts-font-size-md); }\n\n/* ---- Pill ---- */\n:host([pill]) .badge__base {\n  border-radius: var(--ts-radius-full);\n}\n\n/* ---- Dot ---- */\n:host([dot]) .badge__base {\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  border-radius: var(--ts-radius-full);\n}\n\n:host([dot][size=\"lg\"]) .badge__base { width: 10px; height: 10px; }\n:host([dot][size=\"xl\"]) .badge__base { width: 12px; height: 12px; }\n\n/* ---- Solid Variants ---- */\n:host([variant=\"primary\"]:not([outline])) .badge__base   { background: var(--ts-color-primary-500); color: var(--ts-color-text-on-primary); }\n:host([variant=\"success\"]:not([outline])) .badge__base   { background: var(--ts-color-success-500); color: var(--ts-color-text-on-success); }\n:host([variant=\"warning\"]:not([outline])) .badge__base   { background: var(--ts-color-warning-500); color: var(--ts-color-text-on-warning); }\n:host([variant=\"danger\"]:not([outline])) .badge__base    { background: var(--ts-color-danger-500); color: var(--ts-color-text-on-danger); }\n:host([variant=\"info\"]:not([outline])) .badge__base      { background: var(--ts-color-info-500); color: var(--ts-color-text-on-info); }\n:host([variant=\"neutral\"]:not([outline])) .badge__base   { background: var(--ts-color-neutral-200); color: var(--ts-color-text-secondary); }\n:host([variant=\"secondary\"]:not([outline])) .badge__base { background: var(--ts-color-neutral-100); color: var(--ts-color-text-tertiary); }\n\n/* ---- Outline Variants ---- */\n:host([outline][variant=\"primary\"]) .badge__base   { border-color: var(--ts-color-primary-500); color: var(--ts-color-primary-600); background: transparent; }\n:host([outline][variant=\"success\"]) .badge__base   { border-color: var(--ts-color-success-500); color: var(--ts-color-success-600); background: transparent; }\n:host([outline][variant=\"danger\"]) .badge__base    { border-color: var(--ts-color-danger-500); color: var(--ts-color-danger-600); background: transparent; }\n:host([outline][variant=\"warning\"]) .badge__base   { border-color: var(--ts-color-warning-500); color: var(--ts-color-warning-600); background: transparent; }\n:host([outline][variant=\"neutral\"]) .badge__base   { border-color: var(--ts-color-border-strong); color: var(--ts-color-text-tertiary); background: transparent; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize, TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for badge content.\n *\n * @part base - The badge element.\n */\n@Component({\n  tag: 'ts-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class TsBadge {\n  /** The badge's color variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The badge's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the badge with rounded-pill shape. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Renders the badge as a small dot indicator (content is hidden). */\n  @Prop({ reflect: true }) dot = false;\n\n  /** Renders an outlined style instead of solid. */\n  @Prop({ reflect: true }) outline = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-badge': true,\n          [`ts-badge--${this.variant}`]: true,\n          [`ts-badge--${this.size}`]: true,\n          'ts-badge--pill': this.pill,\n          'ts-badge--dot': this.dot,\n          'ts-badge--outline': this.outline,\n        }}\n      >\n        <span class=\"badge__base\" part=\"base\">\n          {!this.dot && <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,oyFAAoyF,CAAC;;MCahzF,OAAO,GAAA,MAAA;;;;;IAEO,OAAO,GAAc,SAAS;;IAG9B,IAAI,GAAW,IAAI;;IAGnB,IAAI,GAAG,KAAK;;IAGZ,GAAG,GAAG,KAAK;;IAGX,OAAO,GAAG,KAAK;;IAGxC,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,OAAO,CAAA,CAAE,GAAG,IAAI;AACnC,gBAAA,CAAC,aAAa,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBAChC,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,eAAe,EAAE,IAAI,CAAC,GAAG;gBACzB,mBAAmB,EAAE,IAAI,CAAC,OAAO;AAClC,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAC,IAAI,CAAC,GAAG,IAAI,8DAAQ,CACjB,CACF;;;;;;;"}

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

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-V8-ENixA.js';
+
+const bannerCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-banner-bg:var(--ts-color-info-bg);--ts-banner-border-color:var(--ts-color-info-border)}:host([sticky]){position:sticky;inset-block-start:0;z-index:var(--ts-z-sticky, 100)}.banner__base{display:flex;align-items:center;gap:var(--ts-spacing-3);padding-inline:var(--ts-spacing-4);padding-block:var(--ts-spacing-3);background-color:var(--ts-banner-bg);border-block-end:1px solid var(--ts-banner-border-color);font-size:var(--ts-font-size-sm);line-height:var(--ts-line-height-normal);inline-size:100%}:host([variant="info"]){--ts-banner-bg:var(--ts-color-info-bg);--ts-banner-border-color:var(--ts-color-info-border)}:host([variant="info"]) .banner__base{color:var(--ts-color-info-600)}:host([variant="success"]){--ts-banner-bg:var(--ts-color-success-bg);--ts-banner-border-color:var(--ts-color-success-border)}:host([variant="success"]) .banner__base{color:var(--ts-color-success-600)}:host([variant="warning"]){--ts-banner-bg:var(--ts-color-warning-bg);--ts-banner-border-color:var(--ts-color-warning-border)}:host([variant="warning"]) .banner__base{color:var(--ts-color-warning-600)}:host([variant="danger"]){--ts-banner-bg:var(--ts-color-danger-bg);--ts-banner-border-color:var(--ts-color-danger-border)}:host([variant="danger"]) .banner__base{color:var(--ts-color-danger-600)}:host([variant="neutral"]){--ts-banner-bg:var(--ts-color-bg-subtle);--ts-banner-border-color:var(--ts-color-border-subtle)}:host([variant="neutral"]) .banner__base{color:var(--ts-color-text-secondary)}.banner__icon{display:flex;align-items:center;font-size:1.15em;flex-shrink:0}.banner__message{flex:1;min-inline-size:0}.banner__action{display:flex;align-items:center;flex-shrink:0}.banner__action:empty{display:none}.banner__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;border:none;border-radius:var(--ts-radius-sm);background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.8em;transition:opacity var(--ts-transition-fast);padding:0;line-height:1}.banner__close:hover{opacity:1}.banner__close:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}`;
+
+const TsBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsClose = createEvent(this, "tsClose");
+    }
+    /** The banner's semantic variant. */
+    variant = 'info';
+    /** Whether the banner can be dismissed. */
+    dismissible = false;
+    /** Optional Lucide icon name. */
+    icon;
+    /** Whether the banner sticks to the top of the viewport. */
+    sticky = false;
+    /** Whether the banner is currently visible. */
+    isVisible = true;
+    /** Emitted when the banner is dismissed. */
+    tsClose;
+    /** Programmatically close the banner. */
+    async close() {
+        this.isVisible = false;
+        this.tsClose.emit();
+    }
+    /** Programmatically show the banner. */
+    async show() {
+        this.isVisible = true;
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderDefaultIcon() {
+        const icons = {
+            info: '\u2139',
+            success: '\u2713',
+            warning: '\u26A0',
+            danger: '\u2715',
+            primary: '\u2139',
+            secondary: '\u2139',
+            neutral: '\u2139',
+        };
+        return h("span", { "aria-hidden": "true" }, icons[this.variant] || '\u2139');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        const role = this.variant === 'danger' ? 'alert' : 'banner';
+        const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';
+        return (h(Host, { class: {
+                'ts-banner': true,
+                [`ts-banner--${this.variant}`]: true,
+                'ts-banner--sticky': this.sticky,
+            }, role: role, "aria-live": ariaLive }, h("div", { class: "banner__base", part: "base" }, h("div", { class: "banner__icon", part: "icon" }, this.icon ? h("ts-icon", { name: this.icon }) : this.renderDefaultIcon()), h("div", { class: "banner__message", part: "message" }, h("slot", null)), h("div", { class: "banner__action", part: "action" }, h("slot", { name: "action" })), this.dismissible && (h("button", { class: "banner__close", part: "close", type: "button", "aria-label": "Dismiss banner", onClick: this.handleClose }, "\\u2715")))));
+    }
+};
+TsBanner.style = bannerCss();
+
+export { TsBanner as ts_banner };
+//# sourceMappingURL=ts-banner.entry.js.map
+
+//# sourceMappingURL=ts-banner.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-banner.entry.js","sources":["src/components/banner/banner.css?tag=ts-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-banner — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-banner-bg             Background color\n     --ts-banner-border-color   Border color\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-banner-bg: var(--ts-color-info-bg);\n  --ts-banner-border-color: var(--ts-color-info-border);\n}\n\n:host([sticky]) {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--ts-z-sticky, 100);\n}\n\n.banner__base {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-3);\n  padding-inline: var(--ts-spacing-4);\n  padding-block: var(--ts-spacing-3);\n  background-color: var(--ts-banner-bg);\n  border-block-end: 1px solid var(--ts-banner-border-color);\n  font-size: var(--ts-font-size-sm);\n  line-height: var(--ts-line-height-normal);\n  inline-size: 100%;\n}\n\n/* ---- Variants ---- */\n:host([variant=\"info\"]) {\n  --ts-banner-bg: var(--ts-color-info-bg);\n  --ts-banner-border-color: var(--ts-color-info-border);\n}\n:host([variant=\"info\"]) .banner__base {\n  color: var(--ts-color-info-600);\n}\n\n:host([variant=\"success\"]) {\n  --ts-banner-bg: var(--ts-color-success-bg);\n  --ts-banner-border-color: var(--ts-color-success-border);\n}\n:host([variant=\"success\"]) .banner__base {\n  color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]) {\n  --ts-banner-bg: var(--ts-color-warning-bg);\n  --ts-banner-border-color: var(--ts-color-warning-border);\n}\n:host([variant=\"warning\"]) .banner__base {\n  color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]) {\n  --ts-banner-bg: var(--ts-color-danger-bg);\n  --ts-banner-border-color: var(--ts-color-danger-border);\n}\n:host([variant=\"danger\"]) .banner__base {\n  color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"neutral\"]) {\n  --ts-banner-bg: var(--ts-color-bg-subtle);\n  --ts-banner-border-color: var(--ts-color-border-subtle);\n}\n:host([variant=\"neutral\"]) .banner__base {\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Icon ---- */\n.banner__icon {\n  display: flex;\n  align-items: center;\n  font-size: 1.15em;\n  flex-shrink: 0;\n}\n\n/* ---- Message ---- */\n.banner__message {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n/* ---- Action ---- */\n.banner__action {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.banner__action:empty {\n  display: none;\n}\n\n/* ---- Close Button ---- */\n.banner__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: 1.5rem;\n  block-size: 1.5rem;\n  border: none;\n  border-radius: var(--ts-radius-sm);\n  background: transparent;\n  color: currentColor;\n  opacity: 0.6;\n  cursor: pointer;\n  font-size: 0.8em;\n  transition: opacity var(--ts-transition-fast);\n  padding: 0;\n  line-height: 1;\n}\n\n.banner__close:hover {\n  opacity: 1;\n}\n\n.banner__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  opacity: 1;\n}\n","import { Component, Prop, Event, State, h, Host, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - CTA button.\n *\n * @part base - The banner container.\n * @part icon - The icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close/dismiss button.\n */\n@Component({\n  tag: 'ts-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class TsBanner {\n  /** The banner's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'info';\n\n  /** Whether the banner can be dismissed. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** Optional Lucide icon name. */\n  @Prop() icon?: string;\n\n  /** Whether the banner sticks to the top of the viewport. */\n  @Prop({ reflect: true }) sticky = false;\n\n  /** Whether the banner is currently visible. */\n  @State() isVisible = true;\n\n  /** Emitted when the banner is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Programmatically close the banner. */\n  @Method()\n  async close(): Promise<void> {\n    this.isVisible = false;\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the banner. */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderDefaultIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      primary: '\\u2139',\n      secondary: '\\u2139',\n      neutral: '\\u2139',\n    };\n    return <span aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const role = this.variant === 'danger' ? 'alert' : 'banner';\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-banner': true,\n          [`ts-banner--${this.variant}`]: true,\n          'ts-banner--sticky': this.sticky,\n        }}\n        role={role}\n        aria-live={ariaLive}\n      >\n        <div class=\"banner__base\" part=\"base\">\n          <div class=\"banner__icon\" part=\"icon\">\n            {this.icon ? <ts-icon name={this.icon} /> : this.renderDefaultIcon()}\n          </div>\n\n          <div class=\"banner__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"banner__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"banner__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss banner\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,moEAAmoE,CAAC;;MCmBhpE,QAAQ,GAAA,MAAA;;;;;;IAEM,OAAO,GAAc,MAAM;;IAG3B,WAAW,GAAG,KAAK;;AAGpC,IAAA,IAAI;;IAGa,MAAM,GAAG,KAAK;;IAG9B,SAAS,GAAG,IAAI;;AAGQ,IAAA,OAAO;;AAIxC,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;AAKrB,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGf,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,KAAK,EAAE;AACd,KAAC;;IAGO,iBAAiB,GAAA;AACvB,QAAA,MAAM,KAAK,GAA2B;AACpC,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,OAAO,EAAE,QAAQ;SAClB;AACD,QAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAA,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAQ;;;IAI1E,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,IAAI;AAEhC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ;AAC3D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,WAAW,GAAG,QAAQ;AAEnE,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;gBACpC,mBAAmB,EAAE,IAAI,CAAC,MAAM;AACjC,aAAA,EACD,IAAI,EAAE,IAAI,EAAA,WAAA,EACC,QAAQ,EAAA,EAEnB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAChE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EAEL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,gBAAgB,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAAA,SAAA,CAGlB,CACV,CACG,CACD;;;;;;;"}

package/dist/esm/ts-breadcrumb-item.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const breadcrumbItemCss = () => `:host{display:contents}.breadcrumb-item__li{display:inline-flex;align-items:center;gap:var(--ts-spacing-1)}.breadcrumb-item__link{color:var(--ts-breadcrumb-link-color, var(--ts-color-interactive-primary));text-decoration:none;transition:color var(--ts-transition-fast)}.breadcrumb-item__link:hover{text-decoration:underline;text-underline-offset:2px}.breadcrumb-item__link:focus-visible{box-shadow:var(--ts-focus-ring);border-radius:var(--ts-radius-sm);outline:none}.breadcrumb-item__text{color:var(--ts-color-text-primary)}:host(.ts-breadcrumb-item--current) .breadcrumb-item__text{font-weight:var(--ts-font-weight-semi)}.breadcrumb-item__separator{color:var(--ts-breadcrumb-separator-color, var(--ts-color-text-tertiary));margin-inline:var(--ts-spacing-1);user-select:none}`;
+
+const TsBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** If set, renders as a link. */
+    href;
+    /** Marks this item as the current page. */
+    current = false;
+    /** Separator character (set by parent ts-breadcrumb). */
+    separator;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isLink = !!this.href && !this.current;
+        return (h(Host, { key: 'dd4faad961e0208052a4bac87ea55a7ee7c21cb1', class: { 'ts-breadcrumb-item': true, 'ts-breadcrumb-item--current': this.current } }, h("li", { key: '044de74c3a547b7384bb37b9c0a9899e19ad121a', class: "breadcrumb-item__li" }, isLink ? (h("a", { href: this.href, part: "link", class: "breadcrumb-item__link" }, h("slot", null))) : (h("span", { part: "link", class: "breadcrumb-item__text", "aria-current": this.current ? 'page' : undefined }, h("slot", null))), this.separator && (h("span", { key: '429becb1278bd5db6b050535e70811f922a6ffbc', class: "breadcrumb-item__separator", part: "separator", "aria-hidden": "true" }, this.separator)))));
+    }
+};
+TsBreadcrumbItem.style = breadcrumbItemCss();
+
+export { TsBreadcrumbItem as ts_breadcrumb_item };
+//# sourceMappingURL=ts-breadcrumb-item.entry.js.map
+
+//# sourceMappingURL=ts-breadcrumb-item.entry.js.map

package/dist/esm/ts-breadcrumb-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-breadcrumb-item.entry.js","sources":["src/components/breadcrumb/breadcrumb-item.css?tag=ts-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-breadcrumb-item — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: contents;\n}\n\n.breadcrumb-item__li {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n}\n\n.breadcrumb-item__link {\n  color: var(--ts-breadcrumb-link-color, var(--ts-color-interactive-primary));\n  text-decoration: none;\n  transition: color var(--ts-transition-fast);\n}\n\n.breadcrumb-item__link:hover {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.breadcrumb-item__link:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  border-radius: var(--ts-radius-sm);\n  outline: none;\n}\n\n.breadcrumb-item__text {\n  color: var(--ts-color-text-primary);\n}\n\n:host(.ts-breadcrumb-item--current) .breadcrumb-item__text {\n  font-weight: var(--ts-font-weight-semi);\n}\n\n.breadcrumb-item__separator {\n  color: var(--ts-breadcrumb-separator-color, var(--ts-color-text-tertiary));\n  margin-inline: var(--ts-spacing-1);\n  user-select: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part link - The anchor or span element.\n * @part separator - The separator element.\n */\n@Component({\n  tag: 'ts-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: true,\n})\nexport class TsBreadcrumbItem {\n  /** If set, renders as a link. */\n  @Prop() href?: string;\n\n  /** Marks this item as the current page. */\n  @Prop({ reflect: true }) current = false;\n\n  /** Separator character (set by parent ts-breadcrumb). */\n  @Prop() separator?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href && !this.current;\n\n    return (\n      <Host class={{ 'ts-breadcrumb-item': true, 'ts-breadcrumb-item--current': this.current }}>\n        <li class=\"breadcrumb-item__li\">\n          {isLink ? (\n            <a href={this.href} part=\"link\" class=\"breadcrumb-item__link\">\n              <slot />\n            </a>\n          ) : (\n            <span\n              part=\"link\"\n              class=\"breadcrumb-item__text\"\n              aria-current={this.current ? 'page' : undefined}\n            >\n              <slot />\n            </span>\n          )}\n          {this.separator && (\n            <span class=\"breadcrumb-item__separator\" part=\"separator\" aria-hidden=\"true\">\n              {this.separator}\n            </span>\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,uwBAAuwB,CAAC;;MCa5xB,gBAAgB,GAAA,MAAA;;;;;AAEnB,IAAA,IAAI;;IAGa,OAAO,GAAG,KAAK;;AAGhC,IAAA,SAAS;;IAGjB,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO;AAE3C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EACtF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,qBAAqB,EAAA,EAC5B,MAAM,IACL,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAAA,EAC3D,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,uBAAuB,EAAA,cAAA,EACf,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,EAE/C,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,CACR,EACA,IAAI,CAAC,SAAS,KACb,6DAAM,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EACzE,IAAI,CAAC,SAAS,CACV,CACR,CACE,CACA;;;;;;;"}

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const breadcrumbCss = () => `:host{display:block;--ts-breadcrumb-separator-color:var(--ts-color-text-tertiary);--ts-breadcrumb-link-color:var(--ts-color-interactive-primary)}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ts-spacing-1);list-style:none;margin:0;padding:0;font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-sm)}`;
+
+const TsBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** The separator character between breadcrumb items. */
+    separator = '/';
+    componentDidRender() {
+        const items = this.hostEl.querySelectorAll('ts-breadcrumb-item');
+        items.forEach((item, index) => {
+            if (index < items.length - 1) {
+                item.setAttribute('separator', this.separator);
+            }
+            else {
+                item.removeAttribute('separator');
+            }
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'c11ecfd52a2cdd8782fcb6015b3cefbda9739af0', class: "ts-breadcrumb" }, h("nav", { key: '70b0109d5706643be765d9e73559c6bb9447da81', part: "nav", "aria-label": "Breadcrumb" }, h("ol", { key: 'ebca2980c9c6376bdeb44b7743f7894355f2e9c4', part: "list", class: "breadcrumb__list" }, h("slot", { key: '876f0e6f5b11df1e4b5145676adf16f5462c0e72' })))));
+    }
+};
+TsBreadcrumb.style = breadcrumbCss();
+
+export { TsBreadcrumb as ts_breadcrumb };
+//# sourceMappingURL=ts-breadcrumb.entry.js.map
+
+//# sourceMappingURL=ts-breadcrumb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-breadcrumb.entry.js","sources":["src/components/breadcrumb/breadcrumb.css?tag=ts-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-breadcrumb — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-breadcrumb-separator-color   Separator color\n     --ts-breadcrumb-link-color        Link color\n   ========================================================================== */\n\n:host {\n  display: block;\n\n  --ts-breadcrumb-separator-color: var(--ts-color-text-tertiary);\n  --ts-breadcrumb-link-color: var(--ts-color-interactive-primary);\n}\n\n.breadcrumb__list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-sm);\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-breadcrumb-item children.\n *\n * @part nav - The nav element.\n * @part list - The ordered list element.\n */\n@Component({\n  tag: 'ts-breadcrumb',\n  styleUrl: 'breadcrumb.css',\n  shadow: true,\n})\nexport class TsBreadcrumb {\n  @Element() hostEl!: HTMLElement;\n\n  /** The separator character between breadcrumb items. */\n  @Prop() separator = '/';\n\n  componentDidRender(): void {\n    const items = this.hostEl.querySelectorAll('ts-breadcrumb-item');\n    items.forEach((item, index) => {\n      if (index < items.length - 1) {\n        item.setAttribute('separator', this.separator);\n      } else {\n        item.removeAttribute('separator');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host class=\"ts-breadcrumb\">\n        <nav part=\"nav\" aria-label=\"Breadcrumb\">\n          <ol part=\"list\" class=\"breadcrumb__list\">\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,qVAAqV,CAAC;;MCatW,YAAY,GAAA,MAAA;;;;;;IAIf,SAAS,GAAG,GAAG;IAEvB,kBAAkB,GAAA;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;QAChE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAC5B,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC5B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC;;iBACzC;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;;AAErC,SAAC,CAAC;;;IAIJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,KAAK,EAAA,YAAA,EAAY,YAAY,EAAA,EACrC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,CACD,CACD;;;;;;;"}