@cognivo/components 0.8.0

package/dist/components/cg-tabs/cg-tabs.js

@@ -0,0 +1,241 @@
+import { css as u, LitElement as v, nothing as b, html as d } from "lit";
+import { property as n, state as g, query as p, customElement as h } from "lit/decorators.js";
+import { h as f, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (a, i, s, e) => {
+  for (var t = e > 1 ? void 0 : e ? m(i, s) : i, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (t = (e ? l(i, s, t) : l(t)) || t);
+  return e && t && _(i, s, t), t;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.size = "md", this.tabs = [], this.value = "", this.variant = "underline", this.rounded = "default", this._active = "", this._indicatorLeft = 0, this._indicatorWidth = 0;
+  }
+  willUpdate(a) {
+    (a.has("value") || a.has("tabs")) && (this._active = this.value || (this.tabs.length > 0 ? this.tabs[0].value : ""));
+  }
+  updated() {
+    this._updateIndicator();
+  }
+  _updateIndicator() {
+    if (!this._tabList) return;
+    const a = this._tabList.querySelector(".tab.active");
+    a && (this._indicatorLeft = a.offsetLeft, this._indicatorWidth = a.offsetWidth);
+  }
+  _select(a) {
+    a.disabled || (this._active = a.value, this.dispatchEvent(new CustomEvent("cg-tab-change", {
+      detail: { value: a.value, label: a.label },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _handleKeydown(a) {
+    const i = this.tabs.filter((t) => !t.disabled), s = i.findIndex((t) => t.value === this._active);
+    let e = s;
+    switch (a.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e = (s + 1) % i.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e = (s - 1 + i.length) % i.length;
+        break;
+      case "Home":
+        e = 0;
+        break;
+      case "End":
+        e = i.length - 1;
+        break;
+      default:
+        return;
+    }
+    a.preventDefault(), this._select(i[e]), requestAnimationFrame(() => {
+      this._tabList.querySelectorAll(".tab:not(.disabled)")[e]?.focus();
+    });
+  }
+  render() {
+    return d`
+      <div class="tab-list" role="tablist" @keydown=${this._handleKeydown}>
+        ${this.tabs.map((a) => d`
+          <button
+            class="tab ${a.value === this._active ? "active" : ""} ${a.disabled ? "disabled" : ""}"
+            role="tab"
+            id="tab-${a.value}"
+            tabindex=${a.value === this._active ? "0" : "-1"}
+            aria-selected=${a.value === this._active}
+            aria-controls="panel-${a.value}"
+            ?disabled=${a.disabled}
+            @click=${() => this._select(a)}
+          >
+            <span>${a.label}</span>
+            ${a.count !== void 0 ? d`<span class="tab-count">${a.count}</span>` : b}
+          </button>
+        `)}
+        <div class="indicator" style="left: ${this._indicatorLeft}px; width: ${this._indicatorWidth}px;"></div>
+      </div>
+      <div class="panel" role="tabpanel" id="panel-${this._active}" aria-labelledby="tab-${this._active}">
+        <slot name=${this._active}></slot>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [f, w, u`
+    .tab-list {
+      display: flex;
+      position: relative;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    .tab-list::-webkit-scrollbar { display: none; }
+
+    /* Underline variant (default) */
+    :host(:not([variant="pills"])) .tab-list {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-tabbar-border);
+    }
+
+    :host(:not([variant="pills"])) .indicator {
+      position: absolute;
+      bottom: calc(-1 * var(--cg-spacing-1));
+      height: var(--cg-border-width-100);
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+      transition: left var(--cg-transition-duration-default) var(--cg-transition-easing-default), width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .tab {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      background: none;
+      border: none;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default), background var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+      font-family: inherit;
+      position: relative;
+    }
+
+    .tab:hover:not(.disabled) {
+      color: var(--cg-color-surface-base-text);
+    }
+    .tab.active {
+      color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .tab.disabled { opacity: 0.5; cursor: not-allowed; }
+    .tab:active:not(.disabled) { transform: scale(var(--cg-interaction-press-scale)); }
+
+    .tab:focus-visible {
+      outline: none;
+      border-radius: var(--cg-border-radius-50);
+      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    /* Count badge */
+    .tab-count {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-surface-container-outlined);
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      line-height: var(--cg-line-height-snug);
+    }
+    .tab.active .tab-count {
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-action-primary-background-default);
+    }
+
+    /* Pills variant */
+    :host([variant="pills"]) .tab-list {
+      gap: var(--cg-spacing-4);
+      background: var(--cg-color-surface-tabbar-background);
+      padding: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-150);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-tabbar-border);
+    }
+    :host([variant="pills"]) .tab {
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border: var(--cg-border-width-50) solid transparent;
+    }
+    :host([variant="pills"]) .tab.active {
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    :host([variant="pills"]) .tab:hover:not(.active):not(.disabled) {
+      background: var(--cg-color-surface-tabbar-hover-background);
+    }
+
+    /* Sliding pill indicator */
+    :host([variant="pills"]) .indicator {
+      position: absolute;
+      top: var(--cg-spacing-4);
+      bottom: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-tabbar-selected-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      transition: left var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+      z-index: 0;
+    }
+    :host([variant="pills"]) .tab { z-index: 1; }
+
+    /* Full rounded pills */
+    :host([variant="pills"][rounded="full"]) .tab-list {
+      border-radius: var(--cg-border-radius-full);
+    }
+    :host([variant="pills"][rounded="full"]) .tab {
+      border-radius: var(--cg-border-radius-full);
+    }
+    :host([variant="pills"][rounded="full"]) .indicator {
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    /* Panel */
+    .panel {
+      padding: var(--cg-spacing-16) 0;
+    }
+
+    /* Size variants */
+    :host([size="sm"]) .tab { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-6) var(--cg-spacing-12); }
+    :host([size="lg"]) .tab { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) var(--cg-spacing-20); }
+  `];
+o([
+  n({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  n({ type: Array })
+], r.prototype, "tabs", 2);
+o([
+  n()
+], r.prototype, "value", 2);
+o([
+  n({ reflect: !0 })
+], r.prototype, "variant", 2);
+o([
+  n({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  g()
+], r.prototype, "_active", 2);
+o([
+  g()
+], r.prototype, "_indicatorLeft", 2);
+o([
+  g()
+], r.prototype, "_indicatorWidth", 2);
+o([
+  p(".tab-list")
+], r.prototype, "_tabList", 2);
+r = o([
+  h("cg-tabs")
+], r);
+export {
+  r as CgTabs
+};
+//# sourceMappingURL=cg-tabs.js.map

package/dist/components/cg-tabs/cg-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tabs.js","sources":["../../../src/components/cg-tabs/cg-tabs.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Tab definition for cg-tabs. */\nexport interface TabItem {\n  value: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  count?: number;\n}\n\n/**\n * @element cg-tabs\n * Tabbed navigation with animated sliding indicator, count badges, and keyboard nav.\n *\n * @fires {CustomEvent<{value: string, label: string}>} cg-tab-change - When a tab is selected\n */\n@customElement('cg-tabs')\nexport class CgTabs extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .tab-list {\n      display: flex;\n      position: relative;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .tab-list::-webkit-scrollbar { display: none; }\n\n    /* Underline variant (default) */\n    :host(:not([variant=\"pills\"])) .tab-list {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-tabbar-border);\n    }\n\n    :host(:not([variant=\"pills\"])) .indicator {\n      position: absolute;\n      bottom: calc(-1 * var(--cg-spacing-1));\n      height: var(--cg-border-width-100);\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: left var(--cg-transition-duration-default) var(--cg-transition-easing-default), width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .tab {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      background: none;\n      border: none;\n      cursor: pointer;\n      white-space: nowrap;\n      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default), background var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n      font-family: inherit;\n      position: relative;\n    }\n\n    .tab:hover:not(.disabled) {\n      color: var(--cg-color-surface-base-text);\n    }\n    .tab.active {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .tab.disabled { opacity: 0.5; cursor: not-allowed; }\n    .tab:active:not(.disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n\n    .tab:focus-visible {\n      outline: none;\n      border-radius: var(--cg-border-radius-50);\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* Count badge */\n    .tab-count {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-surface-container-outlined);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      line-height: var(--cg-line-height-snug);\n    }\n    .tab.active .tab-count {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* Pills variant */\n    :host([variant=\"pills\"]) .tab-list {\n      gap: var(--cg-spacing-4);\n      background: var(--cg-color-surface-tabbar-background);\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-150);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-tabbar-border);\n    }\n    :host([variant=\"pills\"]) .tab {\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border: var(--cg-border-width-50) solid transparent;\n    }\n    :host([variant=\"pills\"]) .tab.active {\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    :host([variant=\"pills\"]) .tab:hover:not(.active):not(.disabled) {\n      background: var(--cg-color-surface-tabbar-hover-background);\n    }\n\n    /* Sliding pill indicator */\n    :host([variant=\"pills\"]) .indicator {\n      position: absolute;\n      top: var(--cg-spacing-4);\n      bottom: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-tabbar-selected-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      transition: left var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n      z-index: 0;\n    }\n    :host([variant=\"pills\"]) .tab { z-index: 1; }\n\n    /* Full rounded pills */\n    :host([variant=\"pills\"][rounded=\"full\"]) .tab-list {\n      border-radius: var(--cg-border-radius-full);\n    }\n    :host([variant=\"pills\"][rounded=\"full\"]) .tab {\n      border-radius: var(--cg-border-radius-full);\n    }\n    :host([variant=\"pills\"][rounded=\"full\"]) .indicator {\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* Panel */\n    .panel {\n      padding: var(--cg-spacing-16) 0;\n    }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .tab { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([size=\"lg\"]) .tab { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) var(--cg-spacing-20); }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) tabs: TabItem[] = [];\n  @property() value = '';\n  @property({ reflect: true }) variant: 'underline' | 'pills' = 'underline';\n  @property({ reflect: true }) rounded: 'default' | 'full' = 'default';\n\n  @state() private _active = '';\n  @state() private _indicatorLeft = 0;\n  @state() private _indicatorWidth = 0;\n\n  @query('.tab-list') private _tabList!: HTMLElement;\n\n  override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('tabs')) {\n      this._active = this.value || (this.tabs.length > 0 ? this.tabs[0]!.value : '');\n    }\n  }\n\n  override updated() {\n    this._updateIndicator();\n  }\n\n  private _updateIndicator() {\n    if (!this._tabList) return;\n    const activeBtn = this._tabList.querySelector('.tab.active') as HTMLElement | null;\n    if (activeBtn) {\n      this._indicatorLeft = activeBtn.offsetLeft;\n      this._indicatorWidth = activeBtn.offsetWidth;\n    }\n  }\n\n  private _select(tab: TabItem) {\n    if (tab.disabled) return;\n    this._active = tab.value;\n    this.dispatchEvent(new CustomEvent('cg-tab-change', {\n      detail: { value: tab.value, label: tab.label },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabled = this.tabs.filter(t => !t.disabled);\n    const idx = enabled.findIndex(t => t.value === this._active);\n    let next = idx;\n\n    switch (e.key) {\n      case 'ArrowRight': case 'ArrowDown': next = (idx + 1) % enabled.length; break;\n      case 'ArrowLeft': case 'ArrowUp': next = (idx - 1 + enabled.length) % enabled.length; break;\n      case 'Home': next = 0; break;\n      case 'End': next = enabled.length - 1; break;\n      default: return;\n    }\n\n    e.preventDefault();\n    this._select(enabled[next]!);\n\n    requestAnimationFrame(() => {\n      const btns = this._tabList.querySelectorAll('.tab:not(.disabled)');\n      (btns[next] as HTMLElement)?.focus();\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"tab-list\" role=\"tablist\" @keydown=${this._handleKeydown}>\n        ${this.tabs.map(tab => html`\n          <button\n            class=\"tab ${tab.value === this._active ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}\"\n            role=\"tab\"\n            id=\"tab-${tab.value}\"\n            tabindex=${tab.value === this._active ? '0' : '-1'}\n            aria-selected=${tab.value === this._active}\n            aria-controls=\"panel-${tab.value}\"\n            ?disabled=${tab.disabled}\n            @click=${() => this._select(tab)}\n          >\n            <span>${tab.label}</span>\n            ${tab.count !== undefined ? html`<span class=\"tab-count\">${tab.count}</span>` : nothing}\n          </button>\n        `)}\n        <div class=\"indicator\" style=\"left: ${this._indicatorLeft}px; width: ${this._indicatorWidth}px;\"></div>\n      </div>\n      <div class=\"panel\" role=\"tabpanel\" id=\"panel-${this._active}\" aria-labelledby=\"tab-${this._active}\">\n        <slot name=${this._active}></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-tabs': CgTabs; }\n}\n"],"names":["CgTabs","LitElement","changed","activeBtn","tab","e","enabled","idx","next","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;AAoBO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA+HwB,KAAA,OAA2B,MAC7B,KAAA,OAAkB,CAAA,GACjC,KAAA,QAAQ,IACS,KAAA,UAAiC,aACjC,KAAA,UAA8B,WAElD,KAAQ,UAAU,IAClB,KAAQ,iBAAiB,GACzB,KAAQ,kBAAkB;AAAA,EAAA;AAAA,EAI1B,WAAWC,GAA+B;AACjD,KAAIA,EAAQ,IAAI,OAAO,KAAKA,EAAQ,IAAI,MAAM,OAC5C,KAAK,UAAU,KAAK,UAAU,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,CAAC,EAAG,QAAQ;AAAA,EAE/E;AAAA,EAES,UAAU;AACjB,SAAK,iBAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB;AACzB,QAAI,CAAC,KAAK,SAAU;AACpB,UAAMC,IAAY,KAAK,SAAS,cAAc,aAAa;AAC3D,IAAIA,MACF,KAAK,iBAAiBA,EAAU,YAChC,KAAK,kBAAkBA,EAAU;AAAA,EAErC;AAAA,EAEQ,QAAQC,GAAc;AAC5B,IAAIA,EAAI,aACR,KAAK,UAAUA,EAAI,OACnB,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAOA,EAAI,OAAO,OAAOA,EAAI,MAAA;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAeC,GAAkB;AACvC,UAAMC,IAAU,KAAK,KAAK,OAAO,CAAA,MAAK,CAAC,EAAE,QAAQ,GAC3CC,IAAMD,EAAQ,UAAU,OAAK,EAAE,UAAU,KAAK,OAAO;AAC3D,QAAIE,IAAOD;AAEX,YAAQF,EAAE,KAAA;AAAA,MACR,KAAK;AAAA,MAAc,KAAK;AAAa,QAAAG,KAAQD,IAAM,KAAKD,EAAQ;AAAQ;AAAA,MACxE,KAAK;AAAA,MAAa,KAAK;AAAW,QAAAE,KAAQD,IAAM,IAAID,EAAQ,UAAUA,EAAQ;AAAQ;AAAA,MACtF,KAAK;AAAQ,QAAAE,IAAO;AAAG;AAAA,MACvB,KAAK;AAAO,QAAAA,IAAOF,EAAQ,SAAS;AAAG;AAAA,MACvC;AAAS;AAAA,IAAA;AAGX,IAAAD,EAAE,eAAA,GACF,KAAK,QAAQC,EAAQE,CAAI,CAAE,GAE3B,sBAAsB,MAAM;AAEzB,MADY,KAAK,SAAS,iBAAiB,qBAAqB,EAC3DA,CAAI,GAAmB,MAAA;AAAA,IAC/B,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,sDAC2C,KAAK,cAAc;AAAA,UAC/D,KAAK,KAAK,IAAI,CAAAL,MAAOK;AAAA;AAAA,yBAENL,EAAI,UAAU,KAAK,UAAU,WAAW,EAAE,IAAIA,EAAI,WAAW,aAAa,EAAE;AAAA;AAAA,sBAE/EA,EAAI,KAAK;AAAA,uBACRA,EAAI,UAAU,KAAK,UAAU,MAAM,IAAI;AAAA,4BAClCA,EAAI,UAAU,KAAK,OAAO;AAAA,mCACnBA,EAAI,KAAK;AAAA,wBACpBA,EAAI,QAAQ;AAAA,qBACf,MAAM,KAAK,QAAQA,CAAG,CAAC;AAAA;AAAA,oBAExBA,EAAI,KAAK;AAAA,cACfA,EAAI,UAAU,SAAYK,4BAA+BL,EAAI,KAAK,YAAYM,CAAO;AAAA;AAAA,SAE1F,CAAC;AAAA,8CACoC,KAAK,cAAc,cAAc,KAAK,eAAe;AAAA;AAAA,qDAE9C,KAAK,OAAO,0BAA0B,KAAK,OAAO;AAAA,qBAClF,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,EAI/B;AACF;AAxNaV,EACK,SAAS,CAACW,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4HnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA/HhBf,EA+HkB,WAAA,QAAA,CAAA;AACFc,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhIdf,EAgIgB,WAAA,QAAA,CAAA;AACfc,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjICf,EAiIC,WAAA,SAAA,CAAA;AACiBc,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlIhBf,EAkIkB,WAAA,WAAA,CAAA;AACAc,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnIhBf,EAmIkB,WAAA,WAAA,CAAA;AAEZc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArIIhB,EAqIM,WAAA,WAAA,CAAA;AACAc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtIIhB,EAsIM,WAAA,kBAAA,CAAA;AACAc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvIIhB,EAuIM,WAAA,mBAAA,CAAA;AAEWc,EAAA;AAAA,EAA3BG,EAAM,WAAW;AAAA,GAzIPjB,EAyIiB,WAAA,YAAA,CAAA;AAzIjBA,IAANc,EAAA;AAAA,EADNI,EAAc,SAAS;AAAA,GACXlB,CAAA;"}

package/dist/components/cg-tag-input/cg-tag-input.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-tag-input
+ * Chip-based multi-value input. Type + Enter/comma to add tags.
+ *
+ * @example
+ * ```html
+ * <cg-tag-input label="Tags" placeholder="Add a tag..." max="10"></cg-tag-input>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string[], tag: string}>} cg-tag-add
+ * @fires {CustomEvent<{value: string[], tag: string}>} cg-tag-remove
+ * @fires {CustomEvent<{value: string[]}>} cg-tag-change
+ */
+export declare class CgTagInput extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    value: string[];
+    label: string;
+    placeholder: string;
+    helper: string;
+    name: string;
+    delimiter: string;
+    max: number;
+    allowDuplicates: boolean;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    size: 'md' | 'lg';
+    private _inputValue;
+    private _focused;
+    private _announcement;
+    private _inputEl;
+    updated(changed: Map<string, unknown>): void;
+    private _addTag;
+    private _removeTag;
+    private _announce;
+    private _handleInput;
+    private _handleKeydown;
+    private _handleContainerClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-tag-input': CgTagInput;
+    }
+}
+//# sourceMappingURL=cg-tag-input.d.ts.map

package/dist/components/cg-tag-input/cg-tag-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tag-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-tag-input/cg-tag-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAoJnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASX,KAAK,EAAE,MAAM,EAAE,CAAM;IACpC,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,IAAI,SAAM;IACV,SAAS,SAAO;IACA,GAAG,SAAK;IACwB,eAAe,UAAS;IACxC,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAM;IAEpB,OAAO,CAAC,QAAQ,CAAoB;IAE3C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,OAAO;IA0Bf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,qBAAqB;IAIpB,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/cg-tag-input/cg-tag-input.js

@@ -0,0 +1,307 @@
+import { css as d, LitElement as h, nothing as p, html as c } from "lit";
+import { property as r, state as g, query as v, customElement as f } from "lit/decorators.js";
+import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, o, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? _(o, n) : o, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (i = (s ? u(o, n, i) : u(i)) || i);
+  return s && i && y(o, n, i), i;
+};
+let t = class extends h {
+  constructor() {
+    super(), this.value = [], this.label = "", this.placeholder = "", this.helper = "", this.name = "", this.delimiter = ",", this.max = 0, this.allowDuplicates = !1, this.disabled = !1, this.error = !1, this.success = !1, this.size = "md", this._inputValue = "", this._focused = !1, this._announcement = "", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(e) {
+    e.has("value") && this._internals?.setFormValue(this.value.join(","));
+  }
+  _addTag(e) {
+    if (e = e.trim(), !!e) {
+      if (!this.allowDuplicates && this.value.includes(e)) {
+        this._announce(`Tag "${e}" already exists`);
+        return;
+      }
+      if (this.max > 0 && this.value.length >= this.max) {
+        this._announce(`Maximum of ${this.max} tags reached`);
+        return;
+      }
+      this.value = [...this.value, e], this._inputValue = "", this._announce(`Added tag ${e}`), this.dispatchEvent(new CustomEvent("cg-tag-add", {
+        detail: { value: this.value, tag: e },
+        bubbles: !0,
+        composed: !0
+      })), this.dispatchEvent(new CustomEvent("cg-tag-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  _removeTag(e) {
+    const o = this.value[e];
+    o && (this.value = this.value.filter((n, s) => s !== e), this._announce(`Removed tag ${o}`), this.dispatchEvent(new CustomEvent("cg-tag-remove", {
+      detail: { value: this.value, tag: o },
+      bubbles: !0,
+      composed: !0
+    })), this.dispatchEvent(new CustomEvent("cg-tag-change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _announce(e) {
+    this._announcement = "", requestAnimationFrame(() => {
+      this._announcement = e;
+    });
+  }
+  _handleInput(e) {
+    this._inputValue = e.target.value;
+  }
+  _handleKeydown(e) {
+    e.key === "Enter" || e.key === this.delimiter ? (e.preventDefault(), this._addTag(this._inputValue)) : e.key === "Backspace" && this._inputValue === "" && this.value.length > 0 ? (e.preventDefault(), this._removeTag(this.value.length - 1)) : e.key === "Escape" && (this._inputValue = "");
+  }
+  _handleContainerClick() {
+    this._inputEl?.focus();
+  }
+  render() {
+    return c`
+      ${this.label ? c`<label>${this.label}</label>` : p}
+      <div
+        class="container ${this._focused ? "focused" : ""}"
+        @click=${this._handleContainerClick}
+      >
+        ${this.value.map((e, o) => c`
+          <span class="tag">
+            ${e}
+            <button
+              class="tag-remove"
+              type="button"
+              aria-label=${`Remove ${e}`}
+              @click=${(n) => {
+      n.stopPropagation(), this._removeTag(o);
+    }}
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+                <path d="M7.5 2.5L2.5 7.5M2.5 2.5l5 5"/>
+              </svg>
+            </button>
+          </span>
+        `)}
+        <input
+          type="text"
+          .value=${this._inputValue}
+          placeholder=${this.value.length === 0 ? this.placeholder : ""}
+          ?disabled=${this.disabled}
+          @input=${this._handleInput}
+          @keydown=${this._handleKeydown}
+          @focus=${() => this._focused = !0}
+          @blur=${() => this._focused = !1}
+        />
+      </div>
+      ${this.helper ? c`<div class="helper">${this.helper}</div>` : p}
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</div>
+    `;
+  }
+};
+t.styles = [b, m, d`
+    :host { display: block; }
+
+    label {
+      display: block;
+      margin-bottom: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--cg-component-tag-input-gap);
+      min-height: var(--cg-component-tag-input-min-height);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-tag-input-radius);
+      cursor: text;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* ── Size: lg ── */
+    :host([size="lg"]) .container {
+      min-height: var(--cg-component-input-height-lg);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      gap: var(--cg-spacing-8);
+    }
+    .container:hover { border-color: var(--cg-color-input-border-hover); }
+    .container.focused {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    :host([error]) .container { border-color: var(--cg-color-status-error-border-default); }
+    :host([error]) .container.focused {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([success]) .container { border-color: var(--cg-color-status-success-border-default); }
+    :host([success]) .container.focused {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+    :host([disabled]) .container { opacity: 0.6; pointer-events: none; }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-6) var(--cg-spacing-6) var(--cg-spacing-6) var(--cg-spacing-12);
+      background: var(--cg-color-action-secondary-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+      color: var(--cg-color-surface-base-text);
+      animation: tagIn var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .tag:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+      border-color: var(--cg-color-input-border-hover);
+    }
+    :host([size="lg"]) .tag {
+      padding: var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-16);
+      gap: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-sm);
+    }
+    :host([size="lg"]) .tag-remove {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+    }
+    @keyframes tagIn {
+      from { opacity: 0; transform: scale(0.8); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    .tag-remove:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .tag-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-full);
+      opacity: 0.6;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .tag-remove:hover {
+      opacity: 1;
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+
+    input {
+      flex: 1;
+      min-width: var(--cg-spacing-80);
+      height: var(--cg-spacing-24);
+      line-height: var(--cg-spacing-24);
+      padding: 0;
+      border: none;
+      outline: none;
+      background: none;
+      color: var(--cg-color-input-text-default);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+    }
+    :host([size="lg"]) input {
+      height: var(--cg-spacing-32);
+      line-height: var(--cg-spacing-32);
+      font-size: var(--cg-font-size-base);
+    }
+    input::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    .helper {
+      margin-top: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+
+    /* Visually-hidden live region for screen readers */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `];
+t.formAssociated = !0;
+a([
+  r({ type: Array })
+], t.prototype, "value", 2);
+a([
+  r()
+], t.prototype, "label", 2);
+a([
+  r()
+], t.prototype, "placeholder", 2);
+a([
+  r()
+], t.prototype, "helper", 2);
+a([
+  r()
+], t.prototype, "name", 2);
+a([
+  r()
+], t.prototype, "delimiter", 2);
+a([
+  r({ type: Number })
+], t.prototype, "max", 2);
+a([
+  r({ type: Boolean, attribute: "allow-duplicates" })
+], t.prototype, "allowDuplicates", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "success", 2);
+a([
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
+a([
+  g()
+], t.prototype, "_inputValue", 2);
+a([
+  g()
+], t.prototype, "_focused", 2);
+a([
+  g()
+], t.prototype, "_announcement", 2);
+a([
+  v("input")
+], t.prototype, "_inputEl", 2);
+t = a([
+  f("cg-tag-input")
+], t);
+export {
+  t as CgTagInput
+};
+//# sourceMappingURL=cg-tag-input.js.map

package/dist/components/cg-tag-input/cg-tag-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tag-input.js","sources":["../../../src/components/cg-tag-input/cg-tag-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-tag-input\n * Chip-based multi-value input. Type + Enter/comma to add tags.\n *\n * @example\n * ```html\n * <cg-tag-input label=\"Tags\" placeholder=\"Add a tag...\" max=\"10\"></cg-tag-input>\n * ```\n *\n * @fires {CustomEvent<{value: string[], tag: string}>} cg-tag-add\n * @fires {CustomEvent<{value: string[], tag: string}>} cg-tag-remove\n * @fires {CustomEvent<{value: string[]}>} cg-tag-change\n */\n@customElement('cg-tag-input')\nexport class CgTagInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    label {\n      display: block;\n      margin-bottom: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .container {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--cg-component-tag-input-gap);\n      min-height: var(--cg-component-tag-input-min-height);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-tag-input-radius);\n      cursor: text;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Size: lg ── */\n    :host([size=\"lg\"]) .container {\n      min-height: var(--cg-component-input-height-lg);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      gap: var(--cg-spacing-8);\n    }\n    .container:hover { border-color: var(--cg-color-input-border-hover); }\n    .container.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    :host([error]) .container { border-color: var(--cg-color-status-error-border-default); }\n    :host([error]) .container.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([success]) .container { border-color: var(--cg-color-status-success-border-default); }\n    :host([success]) .container.focused {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n    :host([disabled]) .container { opacity: 0.6; pointer-events: none; }\n\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-6) var(--cg-spacing-6) var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-color-action-secondary-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      color: var(--cg-color-surface-base-text);\n      animation: tagIn var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tag:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      border-color: var(--cg-color-input-border-hover);\n    }\n    :host([size=\"lg\"]) .tag {\n      padding: var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-16);\n      gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n    }\n    :host([size=\"lg\"]) .tag-remove {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n    }\n    @keyframes tagIn {\n      from { opacity: 0; transform: scale(0.8); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    .tag-remove:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .tag-remove {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-full);\n      opacity: 0.6;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tag-remove:hover {\n      opacity: 1;\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n\n    input {\n      flex: 1;\n      min-width: var(--cg-spacing-80);\n      height: var(--cg-spacing-24);\n      line-height: var(--cg-spacing-24);\n      padding: 0;\n      border: none;\n      outline: none;\n      background: none;\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n    }\n    :host([size=\"lg\"]) input {\n      height: var(--cg-spacing-32);\n      line-height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-base);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .helper {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n\n    /* Visually-hidden live region for screen readers */\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property({ type: Array }) value: string[] = [];\n  @property() label = '';\n  @property() placeholder = '';\n  @property() helper = '';\n  @property() name = '';\n  @property() delimiter = ',';\n  @property({ type: Number }) max = 0;\n  @property({ type: Boolean, attribute: 'allow-duplicates' }) allowDuplicates = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n\n  @state() private _inputValue = '';\n  @state() private _focused = false;\n  @state() private _announcement = '';\n\n  @query('input') private _inputEl!: HTMLInputElement;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value.join(','));\n    }\n  }\n\n  private _addTag(tag: string): void {\n    tag = tag.trim();\n    if (!tag) return;\n    if (!this.allowDuplicates && this.value.includes(tag)) {\n      this._announce(`Tag \"${tag}\" already exists`);\n      return;\n    }\n    if (this.max > 0 && this.value.length >= this.max) {\n      this._announce(`Maximum of ${this.max} tags reached`);\n      return;\n    }\n    this.value = [...this.value, tag];\n    this._inputValue = '';\n    this._announce(`Added tag ${tag}`);\n    this.dispatchEvent(new CustomEvent('cg-tag-add', {\n      detail: { value: this.value, tag },\n      bubbles: true,\n      composed: true,\n    }));\n    this.dispatchEvent(new CustomEvent('cg-tag-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _removeTag(idx: number): void {\n    const tag = this.value[idx];\n    if (!tag) return;\n    this.value = this.value.filter((_, i) => i !== idx);\n    this._announce(`Removed tag ${tag}`);\n    this.dispatchEvent(new CustomEvent('cg-tag-remove', {\n      detail: { value: this.value, tag },\n      bubbles: true,\n      composed: true,\n    }));\n    this.dispatchEvent(new CustomEvent('cg-tag-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _announce(message: string): void {\n    this._announcement = '';\n    requestAnimationFrame(() => { this._announcement = message; });\n  }\n\n  private _handleInput(e: Event): void {\n    this._inputValue = (e.target as HTMLInputElement).value;\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === this.delimiter) {\n      e.preventDefault();\n      this._addTag(this._inputValue);\n    } else if (e.key === 'Backspace' && this._inputValue === '' && this.value.length > 0) {\n      e.preventDefault();\n      this._removeTag(this.value.length - 1);\n    } else if (e.key === 'Escape') {\n      this._inputValue = '';\n    }\n  }\n\n  private _handleContainerClick(): void {\n    this._inputEl?.focus();\n  }\n\n  override render() {\n    return html`\n      ${this.label ? html`<label>${this.label}</label>` : nothing}\n      <div\n        class=\"container ${this._focused ? 'focused' : ''}\"\n        @click=${this._handleContainerClick}\n      >\n        ${this.value.map((tag, idx) => html`\n          <span class=\"tag\">\n            ${tag}\n            <button\n              class=\"tag-remove\"\n              type=\"button\"\n              aria-label=${`Remove ${tag}`}\n              @click=${(e: Event) => { e.stopPropagation(); this._removeTag(idx); }}\n            >\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n                <path d=\"M7.5 2.5L2.5 7.5M2.5 2.5l5 5\"/>\n              </svg>\n            </button>\n          </span>\n        `)}\n        <input\n          type=\"text\"\n          .value=${this._inputValue}\n          placeholder=${this.value.length === 0 ? this.placeholder : ''}\n          ?disabled=${this.disabled}\n          @input=${this._handleInput}\n          @keydown=${this._handleKeydown}\n          @focus=${() => this._focused = true}\n          @blur=${() => this._focused = false}\n        />\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n      <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${this._announcement}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-tag-input': CgTagInput;\n  }\n}\n"],"names":["CgTagInput","LitElement","changed","tag","idx","_","i","message","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EA0JzC,cAAc;AACZ,UAAA,GAMyB,KAAA,QAAkB,CAAA,GACjC,KAAA,QAAQ,IACR,KAAA,cAAc,IACd,KAAA,SAAS,IACT,KAAA,OAAO,IACP,KAAA,YAAY,KACI,KAAA,MAAM,GAC0B,KAAA,kBAAkB,IAClC,KAAA,WAAW,IACX,KAAA,QAAQ,IACR,KAAA,UAAU,IACzB,KAAA,OAAoB,MAExC,KAAQ,cAAc,IACtB,KAAQ,WAAW,IACnB,KAAQ,gBAAgB,IApB3B,OAAO,KAAK,mBAAoB,eAClC,KAAK,aAAa,KAAK,gBAAA;AAAA,EAE3B;AAAA,EAqBS,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,OAAO,KACrB,KAAK,YAAY,aAAa,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EAEtD;AAAA,EAEQ,QAAQC,GAAmB;AAEjC,QADAA,IAAMA,EAAI,KAAA,GACN,EAACA,GACL;AAAA,UAAI,CAAC,KAAK,mBAAmB,KAAK,MAAM,SAASA,CAAG,GAAG;AACrD,aAAK,UAAU,QAAQA,CAAG,kBAAkB;AAC5C;AAAA,MACF;AACA,UAAI,KAAK,MAAM,KAAK,KAAK,MAAM,UAAU,KAAK,KAAK;AACjD,aAAK,UAAU,cAAc,KAAK,GAAG,eAAe;AACpD;AAAA,MACF;AACA,WAAK,QAAQ,CAAC,GAAG,KAAK,OAAOA,CAAG,GAChC,KAAK,cAAc,IACnB,KAAK,UAAU,aAAaA,CAAG,EAAE,GACjC,KAAK,cAAc,IAAI,YAAY,cAAc;AAAA,QAC/C,QAAQ,EAAE,OAAO,KAAK,OAAO,KAAAA,EAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC,GACF,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,QAClD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA;AAAA,EACJ;AAAA,EAEQ,WAAWC,GAAmB;AACpC,UAAMD,IAAM,KAAK,MAAMC,CAAG;AAC1B,IAAKD,MACL,KAAK,QAAQ,KAAK,MAAM,OAAO,CAACE,GAAGC,MAAMA,MAAMF,CAAG,GAClD,KAAK,UAAU,eAAeD,CAAG,EAAE,GACnC,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAO,KAAK,OAAO,KAAAA,EAAA;AAAA,MAC7B,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC,GACF,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,UAAUI,GAAuB;AACvC,SAAK,gBAAgB,IACrB,sBAAsB,MAAM;AAAE,WAAK,gBAAgBA;AAAA,IAAS,CAAC;AAAA,EAC/D;AAAA,EAEQ,aAAa,GAAgB;AACnC,SAAK,cAAe,EAAE,OAA4B;AAAA,EACpD;AAAA,EAEQ,eAAe,GAAwB;AAC7C,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK,aACtC,EAAE,eAAA,GACF,KAAK,QAAQ,KAAK,WAAW,KACpB,EAAE,QAAQ,eAAe,KAAK,gBAAgB,MAAM,KAAK,MAAM,SAAS,KACjF,EAAE,eAAA,GACF,KAAK,WAAW,KAAK,MAAM,SAAS,CAAC,KAC5B,EAAE,QAAQ,aACnB,KAAK,cAAc;AAAA,EAEvB;AAAA,EAEQ,wBAA8B;AACpC,SAAK,UAAU,MAAA;AAAA,EACjB;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,QACH,KAAK,QAAQA,WAAc,KAAK,KAAK,aAAaC,CAAO;AAAA;AAAA,2BAEtC,KAAK,WAAW,YAAY,EAAE;AAAA,iBACxC,KAAK,qBAAqB;AAAA;AAAA,UAEjC,KAAK,MAAM,IAAI,CAACN,GAAKC,MAAQI;AAAA;AAAA,cAEzBL,CAAG;AAAA;AAAA;AAAA;AAAA,2BAIU,UAAUA,CAAG,EAAE;AAAA,uBACnB,CAACO,MAAa;AAAE,MAAAA,EAAE,gBAAA,GAAmB,KAAK,WAAWN,CAAG;AAAA,IAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAO1E,CAAC;AAAA;AAAA;AAAA,mBAGS,KAAK,WAAW;AAAA,wBACX,KAAK,MAAM,WAAW,IAAI,KAAK,cAAc,EAAE;AAAA,sBACjD,KAAK,QAAQ;AAAA,mBAChB,KAAK,YAAY;AAAA,qBACf,KAAK,cAAc;AAAA,mBACrB,MAAM,KAAK,WAAW,EAAI;AAAA,kBAC3B,MAAM,KAAK,WAAW,EAAK;AAAA;AAAA;AAAA,QAGrC,KAAK,SAASI,wBAA2B,KAAK,MAAM,WAAWC,CAAO;AAAA,iFACG,KAAK,aAAa;AAAA;AAAA,EAEjG;AACF;AAnSaT,EACK,SAAS,CAACW,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoJnD;AArJUb,EAuJJ,iBAAiB;AAUGc,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAjKdf,EAiKgB,WAAA,SAAA,CAAA;AACfc,EAAA;AAAA,EAAXC,EAAA;AAAS,GAlKCf,EAkKC,WAAA,SAAA,CAAA;AACAc,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnKCf,EAmKC,WAAA,eAAA,CAAA;AACAc,EAAA;AAAA,EAAXC,EAAA;AAAS,GApKCf,EAoKC,WAAA,UAAA,CAAA;AACAc,EAAA;AAAA,EAAXC,EAAA;AAAS,GArKCf,EAqKC,WAAA,QAAA,CAAA;AACAc,EAAA;AAAA,EAAXC,EAAA;AAAS,GAtKCf,EAsKC,WAAA,aAAA,CAAA;AACgBc,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvKff,EAuKiB,WAAA,OAAA,CAAA;AACgCc,EAAA;AAAA,EAA3DC,EAAS,EAAE,MAAM,SAAS,WAAW,oBAAoB;AAAA,GAxK/Cf,EAwKiD,WAAA,mBAAA,CAAA;AAChBc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzK/Bf,EAyKiC,WAAA,YAAA,CAAA;AACAc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1K/Bf,EA0KiC,WAAA,SAAA,CAAA;AACAc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3K/Bf,EA2KiC,WAAA,WAAA,CAAA;AACfc,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5KhBf,EA4KkB,WAAA,QAAA,CAAA;AAEZc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9KIhB,EA8KM,WAAA,eAAA,CAAA;AACAc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA/KIhB,EA+KM,WAAA,YAAA,CAAA;AACAc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhLIhB,EAgLM,WAAA,iBAAA,CAAA;AAEOc,EAAA;AAAA,EAAvBG,EAAM,OAAO;AAAA,GAlLHjB,EAkLa,WAAA,YAAA,CAAA;AAlLbA,IAANc,EAAA;AAAA,EADNI,EAAc,cAAc;AAAA,GAChBlB,CAAA;"}