@cognivo/components 0.8.1 → 0.8.3

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

@@ -1,6 +1,6 @@
 import { css as g, LitElement as u, nothing as d, html as c } from "lit";
 import { property as r, customElement as b } from "lit/decorators.js";
-import { a as p, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+import { a as p, r as f } from "../../chunks/premium.css-B0hBr_uS.js";
 var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, o, l, i) => {
   for (var s = i > 1 ? void 0 : i ? k(o, l) : o, n = e.length - 1, h; n >= 0; n--)
     (h = e[n]) && (s = (i ? h(o, l, s) : h(s)) || s);

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

@@ -1,6 +1,6 @@
 import { css as b, LitElement as p, nothing as h, html as d } from "lit";
 import { property as l, state as g, customElement as u } from "lit/decorators.js";
-import { h as v, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as v, r as f } from "../../chunks/premium.css-B0hBr_uS.js";
 var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, o, c, t) => {
   for (var r = t > 1 ? void 0 : t ? m(o, c) : o, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (t ? n(o, c, r) : n(r)) || r);

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

@@ -1,6 +1,6 @@
 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-DHekUEUt.js";
+import { h as f, r as w } from "../../chunks/premium.css-B0hBr_uS.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);

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

@@ -1,6 +1,6 @@
 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-DHekUEUt.js";
+import { h as b, r as m } from "../../chunks/premium.css-B0hBr_uS.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);

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

@@ -1,6 +1,6 @@
 import { css as g, LitElement as f, html as r } from "lit";
 import { property as i, customElement as p } from "lit/decorators.js";
-import { h as u, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as u, r as m } from "../../chunks/premium.css-B0hBr_uS.js";
 var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, o = (t, l, n, h) => {
   for (var s = h > 1 ? void 0 : h ? d(l, n) : l, c = t.length - 1, a; c >= 0; c--)
     (a = t[c]) && (s = (h ? a(l, n, s) : a(s)) || s);

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

@@ -1,6 +1,6 @@
 import { css as p, LitElement as g, nothing as s, html as l } from "lit";
 import { property as r, state as h, query as f, customElement as v } from "lit/decorators.js";
-import { h as b, r as x } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as b, r as x } from "../../chunks/premium.css-B0hBr_uS.js";
 var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (a, o, c, n) => {
   for (var i = n > 1 ? void 0 : n ? m(o, c) : o, d = a.length - 1, u; d >= 0; d--)
     (u = a[d]) && (i = (n ? u(o, c, i) : u(i)) || i);

package/dist/components/cg-thumbnail/cg-thumbnail.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-thumbnail
+ * A small, fixed-size preview image with optional selectable/clickable
+ * affordances. For large content images use `cg-image`.
+ *
+ * @example
+ * ```html
+ * <cg-thumbnail src="/preview.jpg" alt="Preview" size="md"></cg-thumbnail>
+ * ```
+ *
+ * @example Selectable tile
+ * ```html
+ * <cg-thumbnail src="/a.jpg" alt="Option A" selectable></cg-thumbnail>
+ * ```
+ *
+ * @fires {CustomEvent<{selected: boolean}>} cg-thumbnail-select
+ */
+export declare class CgThumbnail extends LitElement {
+    static styles: import('lit').CSSResult[];
+    src: string;
+    alt: string;
+    size: 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    selectable: boolean;
+    selected: boolean;
+    disabled: boolean;
+    private _placeholder;
+    private _inner;
+    private _toggle;
+    private _onKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-thumbnail': CgThumbnail;
+    }
+}
+//# sourceMappingURL=cg-thumbnail.d.ts.map

package/dist/components/cg-thumbnail/cg-thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-thumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/cg-thumbnail/cg-thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BA2DnB;IAES,GAAG,SAAM;IACT,GAAG,SAAM;IACQ,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtC,UAAU,UAAS;IACnB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,UAAU;IAOT,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,134 @@
+import { css as u, LitElement as h, svg as g, html as l, nothing as b } from "lit";
+import { property as o, customElement as p } from "lit/decorators.js";
+import { h as v, r as f, j as m } from "../../chunks/premium.css-B0hBr_uS.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (i, s, c, a) => {
+  for (var r = a > 1 ? void 0 : a ? _(s, c) : s, d = i.length - 1, n; d >= 0; d--)
+    (n = i[d]) && (r = (a ? n(s, c, r) : n(r)) || r);
+  return a && r && y(s, c, r), r;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = "", this.size = "md", this.rounded = "md", this.selectable = !1, this.selected = !1, this.disabled = !1;
+  }
+  _placeholder() {
+    return l`<span class="placeholder">${g`
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25v13.5A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25Zm2.25-.75a.75.75 0 0 0-.75.75v9.44l3.22-3.22a.75.75 0 0 1 1.06 0l3.19 3.19 2.19-2.19a.75.75 0 0 1 1.06 0l3.22 3.22V5.25a.75.75 0 0 0-.75-.75H5.25ZM9 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" fill="currentColor"/>
+      </svg>`}</span>`;
+  }
+  _inner() {
+    return this.src ? l`<img src=${this.src} alt=${this.alt} loading="lazy" />` : this._placeholder();
+  }
+  _toggle() {
+    this.disabled || (this.selected = !this.selected, this.dispatchEvent(new CustomEvent("cg-thumbnail-select", {
+      detail: { selected: this.selected },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _onKeydown(i) {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._toggle());
+  }
+  render() {
+    return this.selectable ? l`
+      <button
+        class="tile"
+        type="button"
+        role="checkbox"
+        aria-checked=${this.selected ? "true" : "false"}
+        aria-label=${this.alt || b}
+        ?disabled=${this.disabled}
+        @click=${this._toggle}
+        @keydown=${this._onKeydown}
+      >${this._inner()}</button>
+    ` : l`<span class="tile">${this._inner()}</span>`;
+  }
+};
+e.styles = [v, f, u`
+    :host { display: inline-block; }
+
+    .tile {
+      display: block;
+      overflow: hidden;
+      width: var(--_cg-thumb-size, 48px);
+      height: var(--_cg-thumb-size, 48px);
+      border-radius: var(--_cg-thumb-radius, var(--cg-border-radius-100));
+      background: var(--cg-color-surface-inset-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      position: relative;
+      padding: 0;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .tile { --_cg-thumb-size: var(--cg-spacing-32); }
+    :host([size="md"]) .tile { --_cg-thumb-size: var(--cg-spacing-48); }
+    :host([size="lg"]) .tile { --_cg-thumb-size: var(--cg-spacing-80); }
+
+    /* Rounded */
+    :host([rounded="none"]) .tile { --_cg-thumb-radius: 0; }
+    :host([rounded="sm"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-100); }
+    :host([rounded="md"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-200); }
+    :host([rounded="full"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-full); }
+
+    /* Placeholder */
+    .placeholder {
+      width: 100%; height: 100%;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .placeholder svg { width: 40%; height: 40%; }
+
+    /* Selectable interactivity */
+    button.tile {
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    button.tile:hover:not(:disabled) { border-color: var(--cg-color-action-primary-border-default); }
+    button.tile:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
+    button.tile:focus-visible { ${m} }
+
+    :host([selected]) button.tile {
+      border-color: var(--cg-color-action-primary-border-default);
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-action-primary-border-default) inset;
+    }
+
+    :host([disabled]) .tile { opacity: 0.5; cursor: not-allowed; }
+  `];
+t([
+  o()
+], e.prototype, "src", 2);
+t([
+  o()
+], e.prototype, "alt", 2);
+t([
+  o({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  o({ reflect: !0 })
+], e.prototype, "rounded", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "selectable", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = t([
+  p("cg-thumbnail")
+], e);
+export {
+  e as CgThumbnail
+};
+//# sourceMappingURL=cg-thumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-thumbnail.js","sources":["../../../src/components/cg-thumbnail/cg-thumbnail.ts"],"sourcesContent":["import { LitElement, html, css, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, focusRingDual } from '../../styles/index.js';\n\n/**\n * @element cg-thumbnail\n * A small, fixed-size preview image with optional selectable/clickable\n * affordances. For large content images use `cg-image`.\n *\n * @example\n * ```html\n * <cg-thumbnail src=\"/preview.jpg\" alt=\"Preview\" size=\"md\"></cg-thumbnail>\n * ```\n *\n * @example Selectable tile\n * ```html\n * <cg-thumbnail src=\"/a.jpg\" alt=\"Option A\" selectable></cg-thumbnail>\n * ```\n *\n * @fires {CustomEvent<{selected: boolean}>} cg-thumbnail-select\n */\n@customElement('cg-thumbnail')\nexport class CgThumbnail extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    .tile {\n      display: block;\n      overflow: hidden;\n      width: var(--_cg-thumb-size, 48px);\n      height: var(--_cg-thumb-size, 48px);\n      border-radius: var(--_cg-thumb-radius, var(--cg-border-radius-100));\n      background: var(--cg-color-surface-inset-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      position: relative;\n      padding: 0;\n    }\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .tile { --_cg-thumb-size: var(--cg-spacing-32); }\n    :host([size=\"md\"]) .tile { --_cg-thumb-size: var(--cg-spacing-48); }\n    :host([size=\"lg\"]) .tile { --_cg-thumb-size: var(--cg-spacing-80); }\n\n    /* Rounded */\n    :host([rounded=\"none\"]) .tile { --_cg-thumb-radius: 0; }\n    :host([rounded=\"sm\"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-200); }\n    :host([rounded=\"full\"]) .tile { --_cg-thumb-radius: var(--cg-border-radius-full); }\n\n    /* Placeholder */\n    .placeholder {\n      width: 100%; height: 100%;\n      display: flex; align-items: center; justify-content: center;\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .placeholder svg { width: 40%; height: 40%; }\n\n    /* Selectable interactivity */\n    button.tile {\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    button.tile:hover:not(:disabled) { border-color: var(--cg-color-action-primary-border-default); }\n    button.tile:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    button.tile:focus-visible { ${focusRingDual} }\n\n    :host([selected]) button.tile {\n      border-color: var(--cg-color-action-primary-border-default);\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-action-primary-border-default) inset;\n    }\n\n    :host([disabled]) .tile { opacity: 0.5; cursor: not-allowed; }\n  `];\n\n  @property() src = '';\n  @property() alt = '';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ type: Boolean, reflect: true }) selectable = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private _placeholder() {\n    return html`<span class=\"placeholder\">${svg`\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25v13.5A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25Zm2.25-.75a.75.75 0 0 0-.75.75v9.44l3.22-3.22a.75.75 0 0 1 1.06 0l3.19 3.19 2.19-2.19a.75.75 0 0 1 1.06 0l3.22 3.22V5.25a.75.75 0 0 0-.75-.75H5.25ZM9 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z\" fill=\"currentColor\"/>\n      </svg>`}</span>`;\n  }\n\n  private _inner() {\n    return this.src\n      ? html`<img src=${this.src} alt=${this.alt} loading=\"lazy\" />`\n      : this._placeholder();\n  }\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.selected = !this.selected;\n    this.dispatchEvent(new CustomEvent('cg-thumbnail-select', {\n      detail: { selected: this.selected },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  override render() {\n    if (!this.selectable) {\n      return html`<span class=\"tile\">${this._inner()}</span>`;\n    }\n    return html`\n      <button\n        class=\"tile\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=${this.selected ? 'true' : 'false'}\n        aria-label=${this.alt || nothing}\n        ?disabled=${this.disabled}\n        @click=${this._toggle}\n        @keydown=${this._onKeydown}\n      >${this._inner()}</button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-thumbnail': CgThumbnail;\n  }\n}\n"],"names":["CgThumbnail","LitElement","html","svg","e","nothing","hostBlock","reducedMotion","css","focusRingDual","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAsBO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8DO,KAAA,MAAM,IACN,KAAA,MAAM,IACW,KAAA,OAA2B,MAC3B,KAAA,UAAgD,MACjC,KAAA,aAAa,IACb,KAAA,WAAW,IACX,KAAA,WAAW;AAAA,EAAA;AAAA,EAE/C,eAAe;AACrB,WAAOC,8BAAiCC;AAAA;AAAA;AAAA,aAG/B;AAAA,EACX;AAAA,EAEQ,SAAS;AACf,WAAO,KAAK,MACRD,aAAgB,KAAK,GAAG,QAAQ,KAAK,GAAG,uBACxC,KAAK,aAAA;AAAA,EACX;AAAA,EAEQ,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,WAAW,CAAC,KAAK,UACtB,KAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,MACxD,QAAQ,EAAE,UAAU,KAAK,SAAA;AAAA,MACzB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,WAAWE,GAAwB;AACzC,KAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACF,KAAK,QAAA;AAAA,EAET;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,aAGHF;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKY,KAAK,WAAW,SAAS,OAAO;AAAA,qBAClC,KAAK,OAAOG,CAAO;AAAA,oBACpB,KAAK,QAAQ;AAAA,iBAChB,KAAK,OAAO;AAAA,mBACV,KAAK,UAAU;AAAA,SACzB,KAAK,QAAQ;AAAA,QAZTH,uBAA0B,KAAK,OAAA,CAAQ;AAAA,EAclD;AACF;AArHaF,EACK,SAAS,CAACM,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,kCAmDpBC,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5C;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9DCX,EA8DC,WAAA,OAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GA/DCX,EA+DC,WAAA,OAAA,CAAA;AACiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhEhBX,EAgEkB,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjEhBX,EAiEkB,WAAA,WAAA,CAAA;AACeU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlE/BX,EAkEiC,WAAA,cAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnE/BX,EAmEiC,WAAA,YAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApE/BX,EAoEiC,WAAA,YAAA,CAAA;AApEjCA,IAANU,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBZ,CAAA;"}

package/dist/components/cg-time-picker/cg-time-picker.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as h, nothing as p, html as n } from "lit";
 import { property as a, state as l, customElement as v } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as f, r as b } from "../../chunks/premium.css-B0hBr_uS.js";
 var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, i, c, t) => {
   for (var s = t > 1 ? void 0 : t ? _(i, c) : i, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (s = (t ? g(i, c, s) : g(s)) || s);

package/dist/components/cg-timestamp/cg-timestamp.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+export type CgTimestampFormat = 'relative' | 'datetime' | 'date' | 'time';
+/**
+ * @element cg-timestamp
+ * Renders a point in time as relative ("2h ago") or absolute text inside a
+ * semantic `<time>` element, auto-refreshing relative values when `live`.
+ *
+ * @example
+ * ```html
+ * <cg-timestamp datetime="2026-07-03T09:00:00Z" live></cg-timestamp>
+ * ```
+ *
+ * @example Absolute
+ * ```html
+ * <cg-timestamp datetime="2026-07-03T09:00:00Z" format="datetime"></cg-timestamp>
+ * ```
+ */
+export declare class CgTimestamp extends LitElement {
+    static styles: import('lit').CSSResult[];
+    datetime: string;
+    format: CgTimestampFormat;
+    live: boolean;
+    /** Tick counter forcing re-render on the live interval. */
+    private _tick;
+    private _timer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _startTimer;
+    private _stopTimer;
+    private _parse;
+    private _relative;
+    private _absolute;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-timestamp': CgTimestamp;
+    }
+}
+//# sourceMappingURL=cg-timestamp.d.ts.map

package/dist/components/cg-timestamp/cg-timestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-timestamp.d.ts","sourceRoot":"","sources":["../../../src/components/cg-timestamp/cg-timestamp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1E;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAInB;IAE0B,QAAQ,SAAM;IACd,MAAM,EAAE,iBAAiB,CAAc;IACxB,IAAI,UAAS;IAEzD,2DAA2D;IAClD,OAAO,CAAC,KAAK,CAAK;IAE3B,OAAO,CAAC,MAAM,CAA6C;IAElD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,SAAS;IASR,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,81 @@
+import { css as h, LitElement as p, html as u } from "lit";
+import { property as l, state as d, customElement as f } from "lit/decorators.js";
+import { a as _ } from "../../chunks/premium.css-B0hBr_uS.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, m = (t, e, r, n) => {
+  for (var i = n > 1 ? void 0 : n ? g(e, r) : e, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (i = (n ? a(e, r, i) : a(i)) || i);
+  return n && i && v(e, r, i), i;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.datetime = "", this.format = "relative", this.live = !1, this._tick = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._startTimer();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopTimer();
+  }
+  updated(t) {
+    (t.has("live") || t.has("format")) && (this._stopTimer(), this._startTimer());
+  }
+  _startTimer() {
+    this.live && this.format === "relative" && !this._timer && (this._timer = setInterval(() => {
+      this._tick++;
+    }, 6e4));
+  }
+  _stopTimer() {
+    this._timer && (clearInterval(this._timer), this._timer = void 0);
+  }
+  _parse() {
+    if (!this.datetime) return null;
+    const t = Number(this.datetime), e = Number.isFinite(t) && this.datetime.trim() !== "" ? new Date(t) : new Date(this.datetime);
+    return isNaN(e.getTime()) ? null : e;
+  }
+  _relative(t) {
+    const e = t.getTime() - Date.now(), r = e > 0, n = Math.abs(e), i = Math.round(n / 1e3), s = Math.round(i / 60), a = Math.round(s / 60), c = Math.round(a / 24);
+    return i < 60 ? r ? "in a moment" : "just now" : s < 60 ? r ? `in ${s}m` : `${s}m ago` : a < 24 ? r ? `in ${a}h` : `${a}h ago` : c < 7 ? r ? `in ${c}d` : `${c}d ago` : t.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+  }
+  _absolute(t) {
+    switch (this.format) {
+      case "date":
+        return t.toLocaleDateString();
+      case "time":
+        return t.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+      case "datetime":
+      default:
+        return t.toLocaleString();
+    }
+  }
+  render() {
+    this._tick;
+    const t = this._parse();
+    if (!t) return u`<span aria-hidden="true">—</span>`;
+    const e = this.format === "relative" ? this._relative(t) : this._absolute(t);
+    return u`<time datetime=${t.toISOString()} title=${t.toLocaleString()}>${e}</time>`;
+  }
+};
+o.styles = [_, h`
+    :host { display: inline; font-family: var(--cg-font-family-primary); }
+    time { color: inherit; white-space: nowrap; }
+    :host([muted]) time { color: var(--cg-color-surface-container-outlined); }
+  `];
+m([
+  l({ reflect: !0 })
+], o.prototype, "datetime", 2);
+m([
+  l({ reflect: !0 })
+], o.prototype, "format", 2);
+m([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "live", 2);
+m([
+  d()
+], o.prototype, "_tick", 2);
+o = m([
+  f("cg-timestamp")
+], o);
+export {
+  o as CgTimestamp
+};
+//# sourceMappingURL=cg-timestamp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-timestamp.js","sources":["../../../src/components/cg-timestamp/cg-timestamp.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase } from '../../styles/index.js';\n\nexport type CgTimestampFormat = 'relative' | 'datetime' | 'date' | 'time';\n\n/**\n * @element cg-timestamp\n * Renders a point in time as relative (\"2h ago\") or absolute text inside a\n * semantic `<time>` element, auto-refreshing relative values when `live`.\n *\n * @example\n * ```html\n * <cg-timestamp datetime=\"2026-07-03T09:00:00Z\" live></cg-timestamp>\n * ```\n *\n * @example Absolute\n * ```html\n * <cg-timestamp datetime=\"2026-07-03T09:00:00Z\" format=\"datetime\"></cg-timestamp>\n * ```\n */\n@customElement('cg-timestamp')\nexport class CgTimestamp extends LitElement {\n  static override styles = [hostBase, css`\n    :host { display: inline; font-family: var(--cg-font-family-primary); }\n    time { color: inherit; white-space: nowrap; }\n    :host([muted]) time { color: var(--cg-color-surface-container-outlined); }\n  `];\n\n  @property({ reflect: true }) datetime = '';\n  @property({ reflect: true }) format: CgTimestampFormat = 'relative';\n  @property({ type: Boolean, reflect: true }) live = false;\n\n  /** Tick counter forcing re-render on the live interval. */\n  @state() private _tick = 0;\n\n  private _timer: ReturnType<typeof setInterval> | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._startTimer();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopTimer();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('live') || changed.has('format')) {\n      this._stopTimer();\n      this._startTimer();\n    }\n  }\n\n  private _startTimer(): void {\n    if (this.live && this.format === 'relative' && !this._timer) {\n      this._timer = setInterval(() => { this._tick++; }, 60_000);\n    }\n  }\n\n  private _stopTimer(): void {\n    if (this._timer) { clearInterval(this._timer); this._timer = undefined; }\n  }\n\n  private _parse(): Date | null {\n    if (!this.datetime) return null;\n    // Support epoch ms as a numeric string, otherwise defer to Date parsing.\n    const asNumber = Number(this.datetime);\n    const d = Number.isFinite(asNumber) && this.datetime.trim() !== ''\n      ? new Date(asNumber)\n      : new Date(this.datetime);\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private _relative(d: Date): string {\n    const diffMs = d.getTime() - Date.now();\n    const future = diffMs > 0;\n    const abs = Math.abs(diffMs);\n    const sec = Math.round(abs / 1000);\n    const min = Math.round(sec / 60);\n    const hr = Math.round(min / 60);\n    const day = Math.round(hr / 24);\n\n    if (sec < 60) return future ? 'in a moment' : 'just now';\n    if (min < 60) return future ? `in ${min}m` : `${min}m ago`;\n    if (hr < 24) return future ? `in ${hr}h` : `${hr}h ago`;\n    if (day < 7) return future ? `in ${day}d` : `${day}d ago`;\n    // Older than a week → short absolute date.\n    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });\n  }\n\n  private _absolute(d: Date): string {\n    switch (this.format) {\n      case 'date': return d.toLocaleDateString();\n      case 'time': return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });\n      case 'datetime':\n      default: return d.toLocaleString();\n    }\n  }\n\n  override render() {\n    void this._tick; // establish reactive dependency\n    const d = this._parse();\n    if (!d) return html`<span aria-hidden=\"true\">—</span>`;\n\n    const display = this.format === 'relative' ? this._relative(d) : this._absolute(d);\n    return html`<time datetime=${d.toISOString()} title=${d.toLocaleString()}>${display}</time>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-timestamp': CgTimestamp;\n  }\n}\n"],"names":["CgTimestamp","LitElement","changed","asNumber","d","diffMs","future","abs","sec","min","hr","day","html","display","hostBase","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as m, LitElement as f, svg as c, nothing as g, html as l } from "lit";
 import { property as u, state as p, customElement as v } from "lit/decorators.js";
-import { r as h } from "../../chunks/premium.css-DHekUEUt.js";
+import { r as h } from "../../chunks/premium.css-B0hBr_uS.js";
 var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (t, r, a, s) => {
   for (var o = s > 1 ? void 0 : s ? w(r, a) : r, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(r, a, o) : i(o)) || o);

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

@@ -1,6 +1,6 @@
 import { css as l, LitElement as u, html as g } from "lit";
 import { property as e, customElement as h } from "lit/decorators.js";
-import { a as b, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+import { a as b, r as v } from "../../chunks/premium.css-B0hBr_uS.js";
 var p = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (a, s, i, n) => {
   for (var r = n > 1 ? void 0 : n ? f(s, i) : s, c = a.length - 1, d; c >= 0; c--)
     (d = a[c]) && (r = (n ? d(s, i, r) : d(r)) || r);

package/dist/components/cg-toggle-group/cg-toggle-group.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as c, html as h } from "lit";
 import { property as a, queryAssignedElements as p, customElement as d } from "lit/decorators.js";
-import { a as v, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+import { a as v, r as f } from "../../chunks/premium.css-B0hBr_uS.js";
 var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (s, t, e, r) => {
   for (var l = r > 1 ? void 0 : r ? y(t, e) : t, n = s.length - 1, g; n >= 0; n--)
     (g = s[n]) && (l = (r ? g(t, e, l) : g(l)) || l);

package/dist/components/cg-toolbar/cg-toolbar.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-toolbar
+ * Grouped-action container implementing the ARIA `toolbar` roving-tabindex pattern:
+ * a single tab stop, arrow keys move between actions.
+ *
+ * @example
+ * ```html
+ * <cg-toolbar label="Text formatting">
+ *   <cg-button>Bold</cg-button>
+ *   <cg-button>Italic</cg-button>
+ *   <cg-separator orientation="vertical"></cg-separator>
+ *   <cg-button>Link</cg-button>
+ * </cg-toolbar>
+ * ```
+ *
+ * @slot - Interactive actions (cg-button, cg-toggle, cg-separator, …).
+ */
+export declare class CgToolbar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Arrow-key axis + flex direction. */
+    orientation: 'horizontal' | 'vertical';
+    /** aria-label for the toolbar landmark. */
+    label: string;
+    /** Gap/padding scale. */
+    size: 'sm' | 'md' | 'lg';
+    /** Allow items to wrap. */
+    wrap: boolean;
+    private _items;
+    /** Index of the current roving item within _focusable(). */
+    private _rovingIndex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Focusable items = slotted, not disabled, not aria-hidden, not a separator. */
+    private _focusable;
+    /** Apply roving tabindex: only the roving item is tabbable. */
+    private _syncTabindex;
+    firstUpdated(): void;
+    private _onSlotChange;
+    private _onFocusIn;
+    private _onKeydown;
+    /** Move focus to the current roving item (or the first focusable item). */
+    focus(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-toolbar': CgToolbar;
+    }
+}
+//# sourceMappingURL=cg-toolbar.d.ts.map

package/dist/components/cg-toolbar/cg-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-toolbar/cg-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAkCnB;IAEH,uCAAuC;IACV,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEnF,2CAA2C;IAC/B,KAAK,SAAM;IAEvB,yBAAyB;IACI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,2BAA2B;IACiB,IAAI,UAAS;IAEf,OAAO,CAAC,MAAM,CAAiB;IAEzE,4DAA4D;IAC5D,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,iFAAiF;IACjF,OAAO,CAAC,UAAU;IAYlB,+DAA+D;IAC/D,OAAO,CAAC,aAAa;IASZ,YAAY,IAAI,IAAI;IAK7B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU,CAShB;IAEF,OAAO,CAAC,UAAU,CAmBhB;IAEF,2EAA2E;IAClE,KAAK,IAAI,IAAI;IAOb,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,130 @@
+import { css as d, LitElement as h, html as g } from "lit";
+import { property as l, queryAssignedElements as p, customElement as f } from "lit/decorators.js";
+import { a as u, r as b } from "../../chunks/premium.css-B0hBr_uS.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(e, o) : e, n = t.length - 1, c; n >= 0; n--)
+    (c = t[n]) && (r = (s ? c(e, o, r) : c(r)) || r);
+  return s && r && m(e, o, r), r;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.label = "", this.size = "md", this.wrap = !1, this._rovingIndex = 0, this._onFocusIn = (t) => {
+      const e = this._focusable(), o = t.target, s = e.findIndex((r) => r === o || r.contains(o));
+      s >= 0 && (this._rovingIndex = s, this._syncTabindex());
+    }, this._onKeydown = (t) => {
+      const e = this._focusable();
+      if (e.length === 0) return;
+      const o = this.orientation !== "vertical", s = o ? "ArrowRight" : "ArrowDown", r = o ? "ArrowLeft" : "ArrowUp";
+      let n = -1;
+      if (t.key === s) n = (this._rovingIndex + 1) % e.length;
+      else if (t.key === r) n = (this._rovingIndex - 1 + e.length) % e.length;
+      else if (t.key === "Home") n = 0;
+      else if (t.key === "End") n = e.length - 1;
+      else return;
+      t.preventDefault(), this._rovingIndex = n, this._syncTabindex(), e[n]?.focus();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("keydown", this._onKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("keydown", this._onKeydown);
+  }
+  /** Focusable items = slotted, not disabled, not aria-hidden, not a separator. */
+  _focusable() {
+    return (this._items ?? []).filter((t) => {
+      if (t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true" || t.hasAttribute("aria-hidden")) return !1;
+      const e = t.getAttribute("role"), o = t.tagName.toLowerCase();
+      return !(e === "separator" || o === "cg-separator");
+    });
+  }
+  /** Apply roving tabindex: only the roving item is tabbable. */
+  _syncTabindex() {
+    const t = this._focusable();
+    t.length !== 0 && (this._rovingIndex >= t.length && (this._rovingIndex = 0), t.forEach((e, o) => {
+      e.tabIndex = o === this._rovingIndex ? 0 : -1;
+    }));
+  }
+  firstUpdated() {
+    this._syncTabindex();
+  }
+  _onSlotChange() {
+    this._syncTabindex();
+  }
+  /** Move focus to the current roving item (or the first focusable item). */
+  focus() {
+    const t = this._focusable();
+    if (t.length === 0) return;
+    const e = this._rovingIndex < t.length ? this._rovingIndex : 0;
+    t[e]?.focus();
+  }
+  render() {
+    return g`
+      <div
+        class="root"
+        role="toolbar"
+        aria-label=${this.label || "Toolbar"}
+        aria-orientation=${this.orientation}
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+i.styles = [u, b, d`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-component-toolbar-gap-md);
+      padding: var(--cg-component-toolbar-padding-md);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-toolbar-radius);
+    }
+
+    /* ── Orientation ── */
+    :host([orientation="vertical"]) {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    /* ── Wrap ── */
+    :host([wrap]) { flex-wrap: wrap; }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) {
+      gap: var(--cg-component-toolbar-gap-sm);
+      padding: var(--cg-component-toolbar-padding-sm);
+    }
+    :host([size="lg"]) {
+      gap: var(--cg-component-toolbar-gap-lg);
+      padding: var(--cg-component-toolbar-padding-lg);
+    }
+
+    .root {
+      display: contents;
+    }
+  `];
+a([
+  l({ reflect: !0 })
+], i.prototype, "orientation", 2);
+a([
+  l()
+], i.prototype, "label", 2);
+a([
+  l({ reflect: !0 })
+], i.prototype, "size", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "wrap", 2);
+a([
+  p({ flatten: !0 })
+], i.prototype, "_items", 2);
+i = a([
+  f("cg-toolbar")
+], i);
+export {
+  i as CgToolbar
+};
+//# sourceMappingURL=cg-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toolbar.js","sources":["../../../src/components/cg-toolbar/cg-toolbar.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-toolbar\n * Grouped-action container implementing the ARIA `toolbar` roving-tabindex pattern:\n * a single tab stop, arrow keys move between actions.\n *\n * @example\n * ```html\n * <cg-toolbar label=\"Text formatting\">\n *   <cg-button>Bold</cg-button>\n *   <cg-button>Italic</cg-button>\n *   <cg-separator orientation=\"vertical\"></cg-separator>\n *   <cg-button>Link</cg-button>\n * </cg-toolbar>\n * ```\n *\n * @slot - Interactive actions (cg-button, cg-toggle, cg-separator, …).\n */\n@customElement('cg-toolbar')\nexport class CgToolbar extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-component-toolbar-gap-md);\n      padding: var(--cg-component-toolbar-padding-md);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-toolbar-radius);\n    }\n\n    /* ── Orientation ── */\n    :host([orientation=\"vertical\"]) {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    /* ── Wrap ── */\n    :host([wrap]) { flex-wrap: wrap; }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) {\n      gap: var(--cg-component-toolbar-gap-sm);\n      padding: var(--cg-component-toolbar-padding-sm);\n    }\n    :host([size=\"lg\"]) {\n      gap: var(--cg-component-toolbar-gap-lg);\n      padding: var(--cg-component-toolbar-padding-lg);\n    }\n\n    .root {\n      display: contents;\n    }\n  `];\n\n  /** Arrow-key axis + flex direction. */\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** aria-label for the toolbar landmark. */\n  @property() label = '';\n\n  /** Gap/padding scale. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Allow items to wrap. */\n  @property({ type: Boolean, reflect: true }) wrap = false;\n\n  @queryAssignedElements({ flatten: true }) private _items!: HTMLElement[];\n\n  /** Index of the current roving item within _focusable(). */\n  private _rovingIndex = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('focusin', this._onFocusIn);\n    this.addEventListener('keydown', this._onKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focusin', this._onFocusIn);\n    this.removeEventListener('keydown', this._onKeydown);\n  }\n\n  /** Focusable items = slotted, not disabled, not aria-hidden, not a separator. */\n  private _focusable(): HTMLElement[] {\n    return (this._items ?? []).filter((el) => {\n      if (el.hasAttribute('disabled')) return false;\n      if (el.getAttribute('aria-disabled') === 'true') return false;\n      if (el.hasAttribute('aria-hidden')) return false;\n      const role = el.getAttribute('role');\n      const tag = el.tagName.toLowerCase();\n      if (role === 'separator' || tag === 'cg-separator') return false;\n      return true;\n    });\n  }\n\n  /** Apply roving tabindex: only the roving item is tabbable. */\n  private _syncTabindex(): void {\n    const items = this._focusable();\n    if (items.length === 0) return;\n    if (this._rovingIndex >= items.length) this._rovingIndex = 0;\n    items.forEach((el, i) => {\n      el.tabIndex = i === this._rovingIndex ? 0 : -1;\n    });\n  }\n\n  override firstUpdated(): void {\n    // slotchange is unreliable in some test environments; sync once on first paint.\n    this._syncTabindex();\n  }\n\n  private _onSlotChange(): void {\n    this._syncTabindex();\n  }\n\n  private _onFocusIn = (e: FocusEvent): void => {\n    const items = this._focusable();\n    const target = e.target as HTMLElement;\n    // Map the focused element (or its host ancestor) to a roving index.\n    const idx = items.findIndex((el) => el === target || el.contains(target));\n    if (idx >= 0) {\n      this._rovingIndex = idx;\n      this._syncTabindex();\n    }\n  };\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    const items = this._focusable();\n    if (items.length === 0) return;\n\n    const horizontal = this.orientation !== 'vertical';\n    const next = horizontal ? 'ArrowRight' : 'ArrowDown';\n    const prev = horizontal ? 'ArrowLeft' : 'ArrowUp';\n\n    let target = -1;\n    if (e.key === next) target = (this._rovingIndex + 1) % items.length;\n    else if (e.key === prev) target = (this._rovingIndex - 1 + items.length) % items.length;\n    else if (e.key === 'Home') target = 0;\n    else if (e.key === 'End') target = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    this._rovingIndex = target;\n    this._syncTabindex();\n    items[target]?.focus();\n  };\n\n  /** Move focus to the current roving item (or the first focusable item). */\n  override focus(): void {\n    const items = this._focusable();\n    if (items.length === 0) return;\n    const index = this._rovingIndex < items.length ? this._rovingIndex : 0;\n    items[index]?.focus();\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"root\"\n        role=\"toolbar\"\n        aria-label=${this.label || 'Toolbar'}\n        aria-orientation=${this.orientation}\n      >\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-toolbar': CgToolbar;\n  }\n}\n"],"names":["CgToolbar","LitElement","e","items","target","idx","el","horizontal","next","prev","role","tag","i","index","html","hostBase","reducedMotion","css","__decorateClass","property","queryAssignedElements","customElement"],"mappings":"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"}