@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-app-sidebar/ai-app-sidebar.js

@@ -1,10 +1,10 @@
 import { css as p, LitElement as v, nothing as d, html as i } from "lit";
 import { property as g, customElement as b } from "lit/decorators.js";
-import { h as f, r as u, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, r, e, s) => {
-  for (var t = s > 1 ? void 0 : s ? w(r, e) : r, n = a.length - 1, l; n >= 0; n--)
-    (l = a[n]) && (t = (s ? l(r, e, t) : l(t)) || t);
-  return s && t && m(r, e, t), t;
+import { h as f, r as u, f as h } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? w(t, e) : t, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (r = (s ? l(t, e, r) : l(r)) || r);
+  return s && r && m(t, e, r), r;
 };
 let o = class extends v {
   constructor() {
@@ -35,14 +35,14 @@ let o = class extends v {
         >${a}</button>
 
         <div class="sections">
-          ${this.sections.map((r) => i`
-            ${this.collapsed ? d : i`<div class="section-title">${r.title}</div>`}
-            ${r.items.map((e) => i`
+          ${this.sections.map((t) => i`
+            ${this.collapsed ? d : i`<div class="section-title">${t.title}</div>`}
+            ${t.items.map((e) => i`
               <button
                 class="item"
                 role="menuitem"
                 tabindex="0"
-                aria-current=${e.id === this.activeId ? "true" : "false"}
+                aria-current=${e.id === this.activeId ? "page" : "false"}
                 aria-label=${e.label}
                 @click=${() => this._handleItemClick(e)}
               >
@@ -69,12 +69,12 @@ o.styles = [f, u, h, p`
       height: 100%;
       background: var(--cg-color-surface-sidebar-background);
       border-right: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);
-      width: var(--ai-sidebar-width, 240px);
+      width: var(--ai-sidebar-width, var(--cg-component-sidebar-width));
       overflow: hidden;
       transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
     }
     :host([collapsed]) .sidebar {
-      width: var(--ai-sidebar-collapsed-width, 56px);
+      width: var(--ai-sidebar-collapsed-width, var(--cg-component-sidebar-collapsed-width));
     }
 
     .collapse-btn {
@@ -181,8 +181,8 @@ o.styles = [f, u, h, p`
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-semibold);
       border-radius: var(--cg-border-radius-100);
-      background: var(--cg-overlay-accent-strong);
-      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-badge-background-default);
+      color: var(--cg-color-badge-text-default);
     }
     :host([collapsed]) .item-badge {
       display: none;

package/dist/components/ai-app-sidebar/ai-app-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-app-sidebar.js","sources":["../../../src/components/ai-app-sidebar/ai-app-sidebar.ts"],"sourcesContent":["/**\n * @element ai-app-sidebar\n * Data-driven application sidebar with grouped sections, item icons, badges,\n * and a collapse-to-icon-only mode. Renamed from `<ai-sidebar>` to clarify that\n * it is the *AI app shell* sidebar (data-driven via `sections` prop), distinct\n * from the slot-based foundation `<cg-sidebar>`.\n *\n * @example\n * ```html\n * <ai-app-sidebar\n *   active-id=\"chat\"\n *   .sections=${[{\n *     title: 'Tools',\n *     items: [\n *       { id: 'chat', label: 'Chat', icon: '[chat icon]', badge: '3' },\n *       { id: 'search', label: 'Search', icon: '[search icon]' }\n *     ]\n *   }]}\n * ></ai-app-sidebar>\n * ```\n *\n * @prop {SidebarSection[]} sections - Array of section groups with title and items\n * @prop {boolean} collapsed - Whether sidebar is in icon-only mode\n * @prop {string} activeId - ID of the currently active item\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-app-sidebar-item-click - When an item is clicked\n * @fires {CustomEvent<{collapsed: boolean}>} ai-app-sidebar-collapse - When collapse state toggles\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface SidebarItem {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string;\n}\n\nexport interface SidebarSection {\n  title: string;\n  items: SidebarItem[];\n}\n\n@customElement('ai-app-sidebar')\nexport class AiAppSidebar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--cg-color-surface-sidebar-background);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      width: var(--ai-sidebar-width, 240px);\n      overflow: hidden;\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([collapsed]) .sidebar {\n      width: var(--ai-sidebar-collapsed-width, 56px);\n    }\n\n    .collapse-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      color: var(--cg-color-surface-sidebar-text);\n      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .collapse-btn:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    .collapse-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n\n    .sections {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8) 0;\n    }\n\n    .section-title {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-surface-sidebar-text);\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    :host([collapsed]) .section-title {\n      opacity: 0;\n      height: 0;\n      padding: 0;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-sidebar-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: hidden;\n      text-align: left;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        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    :host([collapsed]) .item {\n      justify-content: center;\n      padding: var(--cg-spacing-8) 0;\n    }\n    .item:hover {\n      background: var(--cg-color-surface-sidebar-hover-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .item:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n    .item[aria-current=\"true\"] {\n      background: var(--cg-color-surface-sidebar-active-background);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: inherit;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    :host([collapsed]) .item-label {\n      display: none;\n    }\n\n    .item-badge {\n      flex-shrink: 0;\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-overlay-accent-strong);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([collapsed]) .item-badge {\n      display: none;\n    }\n  `];\n\n  @property({ type: Array }) sections: SidebarSection[] = [];\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: 'active-id' }) activeId = '';\n\n  private _handleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-collapse', {\n      detail: { collapsed: this.collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleItemClick(item: SidebarItem): void {\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-item-click', {\n      detail: { id: item.id, label: item.label },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const chevron = this.collapsed ? '\\u25B6' : '\\u25C0';\n    return html`\n      <nav class=\"sidebar\" role=\"navigation\" aria-label=\"Sidebar navigation\">\n        <button\n          class=\"collapse-btn\"\n          @click=${this._handleCollapse}\n          aria-label=${this.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        >${chevron}</button>\n\n        <div class=\"sections\">\n          ${this.sections.map(section => html`\n            ${!this.collapsed ? html`<div class=\"section-title\">${section.title}</div>` : nothing}\n            ${section.items.map(item => html`\n              <button\n                class=\"item\"\n                role=\"menuitem\"\n                tabindex=\"0\"\n                aria-current=${item.id === this.activeId ? 'true' : 'false'}\n                aria-label=${item.label}\n                @click=${() => this._handleItemClick(item)}\n              >\n                ${item.icon ? html`<span class=\"item-icon\">${item.icon}</span>` : nothing}\n                <span class=\"item-label\">${item.label}</span>\n                ${item.badge ? html`<span class=\"item-badge\">${item.badge}</span>` : nothing}\n              </button>\n            `)}\n          `)}\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-app-sidebar': AiAppSidebar;\n  }\n}\n"],"names":["AiAppSidebar","LitElement","item","chevron","html","section","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-app-sidebar.js","sources":["../../../src/components/ai-app-sidebar/ai-app-sidebar.ts"],"sourcesContent":["/**\n * @element ai-app-sidebar\n * Data-driven application sidebar with grouped sections, item icons, badges,\n * and a collapse-to-icon-only mode. Renamed from `<ai-sidebar>` to clarify that\n * it is the *AI app shell* sidebar (data-driven via `sections` prop), distinct\n * from the slot-based foundation `<cg-sidebar>`.\n *\n * @example\n * ```html\n * <ai-app-sidebar\n *   active-id=\"chat\"\n *   .sections=${[{\n *     title: 'Tools',\n *     items: [\n *       { id: 'chat', label: 'Chat', icon: '[chat icon]', badge: '3' },\n *       { id: 'search', label: 'Search', icon: '[search icon]' }\n *     ]\n *   }]}\n * ></ai-app-sidebar>\n * ```\n *\n * @prop {SidebarSection[]} sections - Array of section groups with title and items\n * @prop {boolean} collapsed - Whether sidebar is in icon-only mode\n * @prop {string} activeId - ID of the currently active item\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-app-sidebar-item-click - When an item is clicked\n * @fires {CustomEvent<{collapsed: boolean}>} ai-app-sidebar-collapse - When collapse state toggles\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface SidebarItem {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string;\n}\n\nexport interface SidebarSection {\n  title: string;\n  items: SidebarItem[];\n}\n\n@customElement('ai-app-sidebar')\nexport class AiAppSidebar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--cg-color-surface-sidebar-background);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      width: var(--ai-sidebar-width, var(--cg-component-sidebar-width));\n      overflow: hidden;\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([collapsed]) .sidebar {\n      width: var(--ai-sidebar-collapsed-width, var(--cg-component-sidebar-collapsed-width));\n    }\n\n    .collapse-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      color: var(--cg-color-surface-sidebar-text);\n      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .collapse-btn:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    .collapse-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n\n    .sections {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8) 0;\n    }\n\n    .section-title {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-surface-sidebar-text);\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    :host([collapsed]) .section-title {\n      opacity: 0;\n      height: 0;\n      padding: 0;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-sidebar-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: hidden;\n      text-align: left;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        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    :host([collapsed]) .item {\n      justify-content: center;\n      padding: var(--cg-spacing-8) 0;\n    }\n    .item:hover {\n      background: var(--cg-color-surface-sidebar-hover-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .item:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n    .item[aria-current=\"true\"] {\n      background: var(--cg-color-surface-sidebar-active-background);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: inherit;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    :host([collapsed]) .item-label {\n      display: none;\n    }\n\n    .item-badge {\n      flex-shrink: 0;\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-badge-background-default);\n      color: var(--cg-color-badge-text-default);\n    }\n    :host([collapsed]) .item-badge {\n      display: none;\n    }\n  `];\n\n  @property({ type: Array }) sections: SidebarSection[] = [];\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: 'active-id' }) activeId = '';\n\n  private _handleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-collapse', {\n      detail: { collapsed: this.collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleItemClick(item: SidebarItem): void {\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-item-click', {\n      detail: { id: item.id, label: item.label },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const chevron = this.collapsed ? '\\u25B6' : '\\u25C0';\n    return html`\n      <nav class=\"sidebar\" role=\"navigation\" aria-label=\"Sidebar navigation\">\n        <button\n          class=\"collapse-btn\"\n          @click=${this._handleCollapse}\n          aria-label=${this.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        >${chevron}</button>\n\n        <div class=\"sections\">\n          ${this.sections.map(section => html`\n            ${!this.collapsed ? html`<div class=\"section-title\">${section.title}</div>` : nothing}\n            ${section.items.map(item => html`\n              <button\n                class=\"item\"\n                role=\"menuitem\"\n                tabindex=\"0\"\n                aria-current=${item.id === this.activeId ? 'page' : 'false'}\n                aria-label=${item.label}\n                @click=${() => this._handleItemClick(item)}\n              >\n                ${item.icon ? html`<span class=\"item-icon\">${item.icon}</span>` : nothing}\n                <span class=\"item-label\">${item.label}</span>\n                ${item.badge ? html`<span class=\"item-badge\">${item.badge}</span>` : nothing}\n              </button>\n            `)}\n          `)}\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-app-sidebar': AiAppSidebar;\n  }\n}\n"],"names":["AiAppSidebar","LitElement","item","chevron","html","section","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-assistant-widget/ai-assistant-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-assistant-widget.d.ts","sourceRoot":"","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAkNnB;IAEyC,QAAQ,UAAS;IAClB,QAAQ,EAAE,cAAc,GAAG,aAAa,CAAkB;IACzE,cAAc,SAAyB;IAC9B,KAAK,SAAe;IACzB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEzD,OAAO,CAAC,WAAW,CAAM;IACd,OAAO,CAAC,WAAW,CAAe;IAC/B,OAAO,CAAC,QAAQ,CAAoB;IAE3D,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,eAAe;IAMd,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"ai-assistant-widget.d.ts","sourceRoot":"","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAoNnB;IAEyC,QAAQ,UAAS;IAClB,QAAQ,EAAE,cAAc,GAAG,aAAa,CAAkB;IACzE,cAAc,SAAyB;IAC9B,KAAK,SAAe;IACzB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEzD,OAAO,CAAC,WAAW,CAAM;IACd,OAAO,CAAC,WAAW,CAAe;IAC/B,OAAO,CAAC,QAAQ,CAAoB;IAE3D,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,eAAe;IAMd,MAAM;CAqDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/ai-assistant-widget/ai-assistant-widget.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as v, nothing as g, html as n } from "lit";
 import { property as o, state as b, query as p, customElement as f } from "lit/decorators.js";
-import { h, r as m, f as x, s as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as m, f as x, s as y } from "../../chunks/premium.css-DHekUEUt.js";
 var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, i, c, s) => {
   for (var r = s > 1 ? void 0 : s ? _(i, c) : i, l = e.length - 1, d; l >= 0; l--)
     (d = e[l]) && (r = (s ? d(i, c, r) : d(r)) || r);
@@ -70,6 +70,7 @@ let t = class extends v {
             />
             <button
               class="send-btn"
+              part="send-btn"
               @click=${this._send}
               ?disabled=${!this._inputValue.trim()}
               aria-label="Send message"
@@ -289,9 +290,11 @@ t.styles = [h, m, x, y, u`
     .send-btn:hover { filter: brightness(0.9); }
     .send-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
     .send-btn:disabled {
-      opacity: 0.4;
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
       cursor: not-allowed;
     }
+    .send-btn:disabled:hover { filter: none; }
     .send-btn:focus-visible {
       outline: none;
       box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);

package/dist/components/ai-assistant-widget/ai-assistant-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-assistant-widget.js","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"sourcesContent":["/**\n * @element ai-assistant-widget\n * Floating embedded chat widget with FAB trigger, expandable chat panel, and message list.\n *\n * @example\n * ```html\n * <ai-assistant-widget\n *   title=\"AI Help\"\n *   welcomeMessage=\"How can I help you today?\"\n *   .messages=${[{role:'ai',content:'Hello!'}]}\n * ></ai-assistant-widget>\n * ```\n *\n * @fires {CustomEvent} ai-assistant-open - Widget expanded\n * @fires {CustomEvent} ai-assistant-close - Widget collapsed\n * @fires {CustomEvent<{message: string}>} ai-assistant-send - Message sent\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - FAB and send button accent\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes } from '../../styles/index.js';\n\nexport interface AssistantMessage {\n  role: 'user' | 'ai';\n  content: string;\n}\n\n@customElement('ai-assistant-widget')\nexport class AiAssistantWidget extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes, css`\n    :host {\n      display: block;\n      position: fixed;\n      z-index: var(--cg-z-index-top);\n    }\n    :host([hidden]) { display: none; }\n    :host([position=\"bottom-right\"]), :host(:not([position])) {\n      bottom: var(--cg-spacing-24);\n      right: var(--cg-spacing-24);\n    }\n    :host([position=\"bottom-left\"]) {\n      bottom: var(--cg-spacing-24);\n      left: var(--cg-spacing-24);\n    }\n\n    /* ── FAB ── */\n    .fab {\n      width: var(--cg-spacing-56);\n      height: var(--cg-spacing-56);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      box-shadow: var(--cg-elevation-3);\n    }\n    .fab:hover {\n      filter: brightness(0.9);\n      transform: scale(1.05);\n    }\n    .fab:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .fab:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Panel ── */\n    .panel {\n      position: absolute;\n      bottom: var(--cg-spacing-64);\n      width: 360px;\n      height: var(--cg-spacing-480);\n      max-width: calc(100vw - var(--cg-spacing-32));\n      max-height: calc(100vh - var(--cg-spacing-128));\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-elevation-4);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      animation: scaleIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    :host([position=\"bottom-right\"]) .panel,\n    :host(:not([position])) .panel {\n      right: 0;\n    }\n    :host([position=\"bottom-left\"]) .panel {\n      left: 0;\n    }\n\n    /* ── Header ── */\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .panel-title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .close-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .close-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Messages ── */\n    .messages {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n\n    .welcome {\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-20) 0;\n    }\n\n    .msg {\n      max-width: 85%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n      word-break: break-word;\n    }\n\n    .msg.user {\n      align-self: flex-end;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-bottom-right-radius: var(--cg-border-radius-50);\n    }\n\n    .msg.ai {\n      align-self: flex-start;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n      border-bottom-left-radius: var(--cg-border-radius-50);\n    }\n\n    /* ── Input ── */\n    .input-area {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .input-field {\n      flex: 1;\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-border-radius-150);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-field::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .input-field:focus {\n      border-color: var(--cg-color-focus-ring);\n    }\n\n    .send-btn {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-150);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      transition:\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .send-btn:hover { filter: brightness(0.9); }\n    .send-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .send-btn:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n    .send-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .panel { animation: none !important; }\n      .fab { transition: none !important; }\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n  @property({ type: String, reflect: true }) position: 'bottom-right' | 'bottom-left' = 'bottom-right';\n  @property({ type: String }) welcomeMessage = 'How can I help you?';\n  @property({ type: String }) override title = 'Assistant';\n  @property({ attribute: false }) messages: AssistantMessage[] = [];\n\n  @state() private _inputValue = '';\n  @query('.messages') private _messagesEl!: HTMLElement;\n  @query('.input-field') private _inputEl!: HTMLInputElement;\n\n  private _toggle() {\n    this.expanded = !this.expanded;\n    const eventName = this.expanded ? 'ai-assistant-open' : 'ai-assistant-close';\n    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));\n    if (this.expanded) {\n      this.updateComplete.then(() => {\n        this._inputEl?.focus();\n        this._scrollToBottom();\n      });\n    }\n  }\n\n  private _close() {\n    this.expanded = false;\n    this.dispatchEvent(new CustomEvent('ai-assistant-close', { bubbles: true, composed: true }));\n  }\n\n  private _send() {\n    const msg = this._inputValue.trim();\n    if (!msg) return;\n    this.dispatchEvent(new CustomEvent('ai-assistant-send', {\n      detail: { message: msg },\n      bubbles: true, composed: true,\n    }));\n    this._inputValue = '';\n    this.updateComplete.then(() => this._scrollToBottom());\n  }\n\n  private _onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      this._send();\n    }\n    if (e.key === 'Escape') {\n      this._close();\n    }\n  }\n\n  private _scrollToBottom() {\n    if (this._messagesEl) {\n      this._messagesEl.scrollTop = this._messagesEl.scrollHeight;\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.expanded ? html`\n        <div class=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${this.title}\" @keydown=${(e: KeyboardEvent) => { if (e.key === 'Escape') this._close(); }}>\n          <div class=\"panel-header\">\n            <span class=\"panel-title\">${this.title}</span>\n            <button class=\"close-btn\" @click=${this._close} aria-label=\"Close assistant\">\n              <cg-icon name=\"x\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n\n          <div class=\"messages\" role=\"log\" aria-live=\"polite\">\n            ${this.messages.length === 0 && this.welcomeMessage ? html`\n              <div class=\"welcome\">${this.welcomeMessage}</div>\n            ` : nothing}\n            ${this.messages.map(m => html`\n              <div class=\"msg ${m.role}\" aria-label=\"${m.role === 'user' ? 'You' : 'Assistant'}\">${m.content}</div>\n            `)}\n          </div>\n\n          <div class=\"input-area\">\n            <input\n              class=\"input-field\"\n              type=\"text\"\n              placeholder=\"Type a message...\"\n              .value=${this._inputValue}\n              @input=${(e: Event) => { this._inputValue = (e.target as HTMLInputElement).value; }}\n              @keydown=${this._onKeydown}\n              aria-label=\"Message input\"\n            />\n            <button\n              class=\"send-btn\"\n              @click=${this._send}\n              ?disabled=${!this._inputValue.trim()}\n              aria-label=\"Send message\"\n            >\n              <cg-icon name=\"arrow-up\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n        </div>\n      ` : nothing}\n\n      <button\n        class=\"fab ${this.expanded ? 'open' : ''}\"\n        @click=${this._toggle}\n        aria-label=\"${this.expanded ? 'Close assistant' : 'Open assistant'}\"\n        aria-expanded=${this.expanded}\n      >\n        <cg-icon name=\"${this.expanded ? 'x' : 'message-circle'}\" size=\"md\"></cg-icon>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-assistant-widget': AiAssistantWidget;\n  }\n}\n"],"names":["AiAssistantWidget","LitElement","eventName","msg","html","nothing","m","hostBlock","reducedMotion","fadeSlideInKeyframes","scaleInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-assistant-widget.js","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"sourcesContent":["/**\n * @element ai-assistant-widget\n * Floating embedded chat widget with FAB trigger, expandable chat panel, and message list.\n *\n * @example\n * ```html\n * <ai-assistant-widget\n *   title=\"AI Help\"\n *   welcomeMessage=\"How can I help you today?\"\n *   .messages=${[{role:'ai',content:'Hello!'}]}\n * ></ai-assistant-widget>\n * ```\n *\n * @fires {CustomEvent} ai-assistant-open - Widget expanded\n * @fires {CustomEvent} ai-assistant-close - Widget collapsed\n * @fires {CustomEvent<{message: string}>} ai-assistant-send - Message sent\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - FAB and send button accent\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes } from '../../styles/index.js';\n\nexport interface AssistantMessage {\n  role: 'user' | 'ai';\n  content: string;\n}\n\n@customElement('ai-assistant-widget')\nexport class AiAssistantWidget extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes, css`\n    :host {\n      display: block;\n      position: fixed;\n      z-index: var(--cg-z-index-top);\n    }\n    :host([hidden]) { display: none; }\n    :host([position=\"bottom-right\"]), :host(:not([position])) {\n      bottom: var(--cg-spacing-24);\n      right: var(--cg-spacing-24);\n    }\n    :host([position=\"bottom-left\"]) {\n      bottom: var(--cg-spacing-24);\n      left: var(--cg-spacing-24);\n    }\n\n    /* ── FAB ── */\n    .fab {\n      width: var(--cg-spacing-56);\n      height: var(--cg-spacing-56);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      box-shadow: var(--cg-elevation-3);\n    }\n    .fab:hover {\n      filter: brightness(0.9);\n      transform: scale(1.05);\n    }\n    .fab:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .fab:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Panel ── */\n    .panel {\n      position: absolute;\n      bottom: var(--cg-spacing-64);\n      width: 360px;\n      height: var(--cg-spacing-480);\n      max-width: calc(100vw - var(--cg-spacing-32));\n      max-height: calc(100vh - var(--cg-spacing-128));\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-elevation-4);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      animation: scaleIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    :host([position=\"bottom-right\"]) .panel,\n    :host(:not([position])) .panel {\n      right: 0;\n    }\n    :host([position=\"bottom-left\"]) .panel {\n      left: 0;\n    }\n\n    /* ── Header ── */\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .panel-title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .close-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .close-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Messages ── */\n    .messages {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n\n    .welcome {\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-20) 0;\n    }\n\n    .msg {\n      max-width: 85%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n      word-break: break-word;\n    }\n\n    .msg.user {\n      align-self: flex-end;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-bottom-right-radius: var(--cg-border-radius-50);\n    }\n\n    .msg.ai {\n      align-self: flex-start;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n      border-bottom-left-radius: var(--cg-border-radius-50);\n    }\n\n    /* ── Input ── */\n    .input-area {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .input-field {\n      flex: 1;\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-border-radius-150);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-field::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .input-field:focus {\n      border-color: var(--cg-color-focus-ring);\n    }\n\n    .send-btn {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-150);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      transition:\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .send-btn:hover { filter: brightness(0.9); }\n    .send-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .send-btn:disabled {\n      background: var(--cg-color-action-primary-background-disable);\n      color: var(--cg-color-action-primary-text-disable);\n      cursor: not-allowed;\n    }\n    .send-btn:disabled:hover { filter: none; }\n    .send-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .panel { animation: none !important; }\n      .fab { transition: none !important; }\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n  @property({ type: String, reflect: true }) position: 'bottom-right' | 'bottom-left' = 'bottom-right';\n  @property({ type: String }) welcomeMessage = 'How can I help you?';\n  @property({ type: String }) override title = 'Assistant';\n  @property({ attribute: false }) messages: AssistantMessage[] = [];\n\n  @state() private _inputValue = '';\n  @query('.messages') private _messagesEl!: HTMLElement;\n  @query('.input-field') private _inputEl!: HTMLInputElement;\n\n  private _toggle() {\n    this.expanded = !this.expanded;\n    const eventName = this.expanded ? 'ai-assistant-open' : 'ai-assistant-close';\n    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));\n    if (this.expanded) {\n      this.updateComplete.then(() => {\n        this._inputEl?.focus();\n        this._scrollToBottom();\n      });\n    }\n  }\n\n  private _close() {\n    this.expanded = false;\n    this.dispatchEvent(new CustomEvent('ai-assistant-close', { bubbles: true, composed: true }));\n  }\n\n  private _send() {\n    const msg = this._inputValue.trim();\n    if (!msg) return;\n    this.dispatchEvent(new CustomEvent('ai-assistant-send', {\n      detail: { message: msg },\n      bubbles: true, composed: true,\n    }));\n    this._inputValue = '';\n    this.updateComplete.then(() => this._scrollToBottom());\n  }\n\n  private _onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      this._send();\n    }\n    if (e.key === 'Escape') {\n      this._close();\n    }\n  }\n\n  private _scrollToBottom() {\n    if (this._messagesEl) {\n      this._messagesEl.scrollTop = this._messagesEl.scrollHeight;\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.expanded ? html`\n        <div class=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${this.title}\" @keydown=${(e: KeyboardEvent) => { if (e.key === 'Escape') this._close(); }}>\n          <div class=\"panel-header\">\n            <span class=\"panel-title\">${this.title}</span>\n            <button class=\"close-btn\" @click=${this._close} aria-label=\"Close assistant\">\n              <cg-icon name=\"x\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n\n          <div class=\"messages\" role=\"log\" aria-live=\"polite\">\n            ${this.messages.length === 0 && this.welcomeMessage ? html`\n              <div class=\"welcome\">${this.welcomeMessage}</div>\n            ` : nothing}\n            ${this.messages.map(m => html`\n              <div class=\"msg ${m.role}\" aria-label=\"${m.role === 'user' ? 'You' : 'Assistant'}\">${m.content}</div>\n            `)}\n          </div>\n\n          <div class=\"input-area\">\n            <input\n              class=\"input-field\"\n              type=\"text\"\n              placeholder=\"Type a message...\"\n              .value=${this._inputValue}\n              @input=${(e: Event) => { this._inputValue = (e.target as HTMLInputElement).value; }}\n              @keydown=${this._onKeydown}\n              aria-label=\"Message input\"\n            />\n            <button\n              class=\"send-btn\"\n              part=\"send-btn\"\n              @click=${this._send}\n              ?disabled=${!this._inputValue.trim()}\n              aria-label=\"Send message\"\n            >\n              <cg-icon name=\"arrow-up\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n        </div>\n      ` : nothing}\n\n      <button\n        class=\"fab ${this.expanded ? 'open' : ''}\"\n        @click=${this._toggle}\n        aria-label=\"${this.expanded ? 'Close assistant' : 'Open assistant'}\"\n        aria-expanded=${this.expanded}\n      >\n        <cg-icon name=\"${this.expanded ? 'x' : 'message-circle'}\" size=\"md\"></cg-icon>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-assistant-widget': AiAssistantWidget;\n  }\n}\n"],"names":["AiAssistantWidget","LitElement","eventName","msg","html","nothing","m","hostBlock","reducedMotion","fadeSlideInKeyframes","scaleInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/components/ai-audio-player/ai-audio-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-audio-player.d.ts","sourceRoot":"","sources":["../../../src/components/ai-audio-player/ai-audio-player.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAmInB;IACyB,GAAG,SAAM;IACA,KAAK,SAAW;IACzB,QAAQ,SAAK;IAEhC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,SAAS,CAAgB;IAE1C,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,OAAO,CAAe;IAErB,iBAAiB;IAiBjB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,KAAK,CAKX;IAEF,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,IAAI;IAMH,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"ai-audio-player.d.ts","sourceRoot":"","sources":["../../../src/components/ai-audio-player/ai-audio-player.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAuInB;IACyB,GAAG,SAAM;IACA,KAAK,SAAW;IACzB,QAAQ,SAAK;IAEhC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,SAAS,CAAgB;IAE1C,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,OAAO,CAAe;IAErB,iBAAiB;IAiBjB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,KAAK,CAKX;IAEF,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,IAAI;IAMH,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/ai-audio-player/ai-audio-player.js

@@ -1,10 +1,10 @@
 import { css as h, LitElement as g, html as u } from "lit";
 import { property as l, state as c, customElement as p } from "lit/decorators.js";
-import { h as f, r as v, f as _ } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, a, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? m(a, r) : a, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (i = (o ? d(a, r, i) : d(i)) || i);
-  return o && i && b(a, r, i), i;
+import { h as f, r as v, f as b } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, r, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? m(r, a) : r, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (i = (o ? d(r, a, i) : d(i)) || i);
+  return o && i && _(r, a, i), i;
 };
 let e = class extends g {
   constructor() {
@@ -31,16 +31,16 @@ let e = class extends g {
     }), this._playing = !0, this._raf = requestAnimationFrame(this._tick), this.dispatchEvent(new CustomEvent("ai-audio-play", { bubbles: !0, composed: !0 }))));
   }
   _seek(t) {
-    const r = t.currentTarget.getBoundingClientRect(), o = Math.max(0, Math.min(1, (t.clientX - r.left) / r.width)), i = this.duration || this._audio?.duration || 0;
+    const a = t.currentTarget.getBoundingClientRect(), o = Math.max(0, Math.min(1, (t.clientX - a.left) / a.width)), i = this.duration || this._audio?.duration || 0;
     this._audio && i && (this._audio.currentTime = o * i, this._currentTime = this._audio.currentTime);
   }
   _seekKeydown(t) {
-    const a = this.duration || this._audio?.duration || 0;
-    if (!this._audio || !a) return;
-    let r = !0;
+    const r = this.duration || this._audio?.duration || 0;
+    if (!this._audio || !r) return;
+    let a = !0;
     switch (t.key) {
       case "ArrowRight":
-        this._audio.currentTime = Math.min(a, this._audio.currentTime + 5);
+        this._audio.currentTime = Math.min(r, this._audio.currentTime + 5);
         break;
       case "ArrowLeft":
         this._audio.currentTime = Math.max(0, this._audio.currentTime - 5);
@@ -49,23 +49,23 @@ let e = class extends g {
         this._audio.currentTime = 0;
         break;
       case "End":
-        this._audio.currentTime = a;
+        this._audio.currentTime = r;
         break;
       default:
-        r = !1;
+        a = !1;
     }
-    r && (t.preventDefault(), this._currentTime = this._audio.currentTime);
+    a && (t.preventDefault(), this._currentTime = this._audio.currentTime);
   }
   _cycleSpeed() {
     const t = this._speeds.indexOf(this._speed);
     this._speed = this._speeds[(t + 1) % this._speeds.length] ?? 1, this._audio && (this._audio.playbackRate = this._speed);
   }
   _fmt(t) {
-    const a = Math.floor(t / 60), r = Math.floor(t % 60);
-    return `${a}:${r.toString().padStart(2, "0")}`;
+    const r = Math.floor(t / 60), a = Math.floor(t % 60);
+    return `${r}:${a.toString().padStart(2, "0")}`;
   }
   render() {
-    const t = this.duration || this._audio?.duration || 0, a = t > 0 ? this._currentTime / t * 100 : 0, r = t > 0 ? this._currentTime / t : 0;
+    const t = this.duration || this._audio?.duration || 0, r = t > 0 ? this._currentTime / t * 100 : 0, a = t > 0 ? this._currentTime / t : 0;
     return u`
       <div class="player" role="region" aria-label="Audio player: ${this.title}">
         <button
@@ -83,7 +83,7 @@ let e = class extends g {
           </div>
           <div class="waveform" aria-hidden="true">
             ${this._waveBars.map((o, i) => {
-      const n = i / this._waveBars.length <= r;
+      const n = i / this._waveBars.length <= a;
       return u`<span class="wave-bar ${n ? "past" : "future"}" style="height: ${o}%"></span>`;
     })}
           </div>
@@ -98,7 +98,7 @@ let e = class extends g {
             @click=${this._seek}
             @keydown=${this._seekKeydown}
           >
-            <div class="progress-fill" style="width: ${a}%"></div>
+            <div class="progress-fill" style="width: ${r}%"></div>
           </div>
         </div>
 
@@ -109,7 +109,7 @@ let e = class extends g {
     `;
   }
 };
-e.styles = [f, v, _, h`
+e.styles = [f, v, b, h`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
     }
@@ -236,6 +236,10 @@ e.styles = [f, v, _, h`
       outline: none;
       box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
     }
+    .progress-track:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
     @media (prefers-reduced-motion: reduce) {
       .wave-bar { transition: none; }
       .progress-fill { transition: none; }

package/dist/components/ai-audio-player/ai-audio-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-audio-player.js","sources":["../../../src/components/ai-audio-player/ai-audio-player.ts"],"sourcesContent":["/**\n * @element ai-audio-player\n * Audio player with decorative waveform visualization, progress seek bar, and speed control.\n *\n * @example\n * ```html\n * <ai-audio-player\n *   src=\"/audio/podcast-ep12.mp3\"\n *   title=\"Episode 12: AI Safety\"\n *   duration=\"1842\"\n * ></ai-audio-player>\n * ```\n *\n * @fires {CustomEvent} ai-audio-play - Playback started\n * @fires {CustomEvent} ai-audio-pause - Playback paused\n * @fires {CustomEvent} ai-audio-end - Playback reached the end\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Play button, waveform progress, and seek fill color\n */\nimport { LitElement, html, css } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-audio-player')\nexport class AiAudioPlayer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .player {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n    }\n\n    .play-btn {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      border: none;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .play-btn:hover { transform: scale(1.05); }\n    .play-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .play-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    .content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n\n    .title-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .title {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .time {\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-variant-numeric: tabular-nums;\n      flex-shrink: 0;\n    }\n\n    .waveform {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-2);\n      height: var(--cg-spacing-24);\n    }\n\n    .wave-bar {\n      flex: 1;\n      min-width: var(--cg-spacing-2);\n      max-width: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .wave-bar.past {\n      background: var(--cg-color-action-primary-background-default);\n    }\n    .wave-bar.future {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    .progress-track {\n      width: 100%;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      position: relative;\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-linear);\n    }\n\n    .speed-btn {\n      background: none;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      flex-shrink: 0;\n      font-family: inherit;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .speed-btn:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .speed-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .wave-bar { transition: none; }\n      .progress-fill { transition: none; }\n    }\n  `];\n  @property({ type: String }) src = '';\n  @property({ type: String }) override title = 'Audio';\n  @property({ type: Number }) duration = 0;\n\n  @state() private _playing = false;\n  @state() private _currentTime = 0;\n  @state() private _loaded = false;\n  @state() private _speed = 1;\n  @state() private _waveBars: number[] = [];\n\n  private _audio: HTMLAudioElement | null = null;\n  private _raf = 0;\n  private _speeds = [1, 1.5, 2];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._waveBars = Array.from({ length: 40 }, () => 20 + Math.random() * 80);\n    this._audio = new Audio();\n    this._audio.addEventListener('loadedmetadata', () => {\n      this._loaded = true;\n      if (!this.duration) this.duration = this._audio!.duration;\n    });\n    this._audio.addEventListener('ended', () => {\n      this._playing = false;\n      this._currentTime = 0;\n      cancelAnimationFrame(this._raf);\n      this.dispatchEvent(new CustomEvent('ai-audio-end', { bubbles: true, composed: true }));\n    });\n    if (this.src) this._audio.src = this.src;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    cancelAnimationFrame(this._raf);\n    this._audio?.pause();\n    this._audio = null;\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('src') && this._audio && this.src) {\n      this._audio.src = this.src;\n      this._audio.load();\n    }\n  }\n\n  private _tick = () => {\n    if (this._audio && this._playing) {\n      this._currentTime = this._audio.currentTime;\n      this._raf = requestAnimationFrame(this._tick);\n    }\n  };\n\n  private _togglePlay() {\n    if (!this._audio) return;\n    if (this._playing) {\n      this._audio.pause();\n      this._playing = false;\n      cancelAnimationFrame(this._raf);\n      this.dispatchEvent(new CustomEvent('ai-audio-pause', { bubbles: true, composed: true }));\n    } else {\n      this._audio.play().catch(() => {\n        this._playing = false;\n      });\n      this._playing = true;\n      this._raf = requestAnimationFrame(this._tick);\n      this.dispatchEvent(new CustomEvent('ai-audio-play', { bubbles: true, composed: true }));\n    }\n  }\n\n  private _seek(e: MouseEvent) {\n    const track = e.currentTarget as HTMLElement;\n    const rect = track.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const dur = this.duration || this._audio?.duration || 0;\n    if (this._audio && dur) {\n      this._audio.currentTime = pct * dur;\n      this._currentTime = this._audio.currentTime;\n    }\n  }\n\n  private _seekKeydown(e: KeyboardEvent) {\n    const dur = this.duration || this._audio?.duration || 0;\n    if (!this._audio || !dur) return;\n    let handled = true;\n    switch (e.key) {\n      case 'ArrowRight': this._audio.currentTime = Math.min(dur, this._audio.currentTime + 5); break;\n      case 'ArrowLeft': this._audio.currentTime = Math.max(0, this._audio.currentTime - 5); break;\n      case 'Home': this._audio.currentTime = 0; break;\n      case 'End': this._audio.currentTime = dur; break;\n      default: handled = false;\n    }\n    if (handled) {\n      e.preventDefault();\n      this._currentTime = this._audio.currentTime;\n    }\n  }\n\n  private _cycleSpeed() {\n    const idx = this._speeds.indexOf(this._speed);\n    this._speed = this._speeds[(idx + 1) % this._speeds.length] ?? 1;\n    if (this._audio) this._audio.playbackRate = this._speed;\n  }\n\n  private _fmt(sec: number): string {\n    const m = Math.floor(sec / 60);\n    const s = Math.floor(sec % 60);\n    return `${m}:${s.toString().padStart(2, '0')}`;\n  }\n\n  override render() {\n    const dur = this.duration || this._audio?.duration || 0;\n    const pct = dur > 0 ? (this._currentTime / dur) * 100 : 0;\n    const barPct = dur > 0 ? this._currentTime / dur : 0;\n\n    return html`\n      <div class=\"player\" role=\"region\" aria-label=\"Audio player: ${this.title}\">\n        <button\n          class=\"play-btn\"\n          aria-label=${this._playing ? 'Pause' : 'Play'}\n          @click=${this._togglePlay}\n        >\n          <cg-icon name=\"${this._playing ? 'pause' : 'play'}\" size=\"sm\"></cg-icon>\n        </button>\n\n        <div class=\"content\">\n          <div class=\"title-row\">\n            <span class=\"title\">${this.title}</span>\n            <span class=\"time\">${this._fmt(this._currentTime)} / ${this._fmt(dur)}</span>\n          </div>\n          <div class=\"waveform\" aria-hidden=\"true\">\n            ${this._waveBars.map((h, i) => {\n              const past = i / this._waveBars.length <= barPct;\n              return html`<span class=\"wave-bar ${past ? 'past' : 'future'}\" style=\"height: ${h}%\"></span>`;\n            })}\n          </div>\n          <div\n            class=\"progress-track\"\n            role=\"slider\"\n            tabindex=\"0\"\n            aria-label=\"Seek\"\n            aria-valuemin=\"0\"\n            aria-valuemax=${Math.floor(dur)}\n            aria-valuenow=${Math.floor(this._currentTime)}\n            @click=${this._seek}\n            @keydown=${this._seekKeydown}\n          >\n            <div class=\"progress-fill\" style=\"width: ${pct}%\"></div>\n          </div>\n        </div>\n\n        <button class=\"speed-btn\" aria-label=\"Playback speed\" @click=${this._cycleSpeed}>\n          ${this._speed}x\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-audio-player': AiAudioPlayer;\n  }\n}\n"],"names":["AiAudioPlayer","LitElement","changed","e","rect","pct","dur","handled","idx","sec","m","s","barPct","html","h","past","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-audio-player.js","sources":["../../../src/components/ai-audio-player/ai-audio-player.ts"],"sourcesContent":["/**\n * @element ai-audio-player\n * Audio player with decorative waveform visualization, progress seek bar, and speed control.\n *\n * @example\n * ```html\n * <ai-audio-player\n *   src=\"/audio/podcast-ep12.mp3\"\n *   title=\"Episode 12: AI Safety\"\n *   duration=\"1842\"\n * ></ai-audio-player>\n * ```\n *\n * @fires {CustomEvent} ai-audio-play - Playback started\n * @fires {CustomEvent} ai-audio-pause - Playback paused\n * @fires {CustomEvent} ai-audio-end - Playback reached the end\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Play button, waveform progress, and seek fill color\n */\nimport { LitElement, html, css } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-audio-player')\nexport class AiAudioPlayer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .player {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n    }\n\n    .play-btn {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      border: none;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .play-btn:hover { transform: scale(1.05); }\n    .play-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .play-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    .content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n\n    .title-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .title {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .time {\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-variant-numeric: tabular-nums;\n      flex-shrink: 0;\n    }\n\n    .waveform {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-2);\n      height: var(--cg-spacing-24);\n    }\n\n    .wave-bar {\n      flex: 1;\n      min-width: var(--cg-spacing-2);\n      max-width: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .wave-bar.past {\n      background: var(--cg-color-action-primary-background-default);\n    }\n    .wave-bar.future {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    .progress-track {\n      width: 100%;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      position: relative;\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-linear);\n    }\n\n    .speed-btn {\n      background: none;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      flex-shrink: 0;\n      font-family: inherit;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .speed-btn:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .speed-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .progress-track:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .wave-bar { transition: none; }\n      .progress-fill { transition: none; }\n    }\n  `];\n  @property({ type: String }) src = '';\n  @property({ type: String }) override title = 'Audio';\n  @property({ type: Number }) duration = 0;\n\n  @state() private _playing = false;\n  @state() private _currentTime = 0;\n  @state() private _loaded = false;\n  @state() private _speed = 1;\n  @state() private _waveBars: number[] = [];\n\n  private _audio: HTMLAudioElement | null = null;\n  private _raf = 0;\n  private _speeds = [1, 1.5, 2];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._waveBars = Array.from({ length: 40 }, () => 20 + Math.random() * 80);\n    this._audio = new Audio();\n    this._audio.addEventListener('loadedmetadata', () => {\n      this._loaded = true;\n      if (!this.duration) this.duration = this._audio!.duration;\n    });\n    this._audio.addEventListener('ended', () => {\n      this._playing = false;\n      this._currentTime = 0;\n      cancelAnimationFrame(this._raf);\n      this.dispatchEvent(new CustomEvent('ai-audio-end', { bubbles: true, composed: true }));\n    });\n    if (this.src) this._audio.src = this.src;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    cancelAnimationFrame(this._raf);\n    this._audio?.pause();\n    this._audio = null;\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('src') && this._audio && this.src) {\n      this._audio.src = this.src;\n      this._audio.load();\n    }\n  }\n\n  private _tick = () => {\n    if (this._audio && this._playing) {\n      this._currentTime = this._audio.currentTime;\n      this._raf = requestAnimationFrame(this._tick);\n    }\n  };\n\n  private _togglePlay() {\n    if (!this._audio) return;\n    if (this._playing) {\n      this._audio.pause();\n      this._playing = false;\n      cancelAnimationFrame(this._raf);\n      this.dispatchEvent(new CustomEvent('ai-audio-pause', { bubbles: true, composed: true }));\n    } else {\n      this._audio.play().catch(() => {\n        this._playing = false;\n      });\n      this._playing = true;\n      this._raf = requestAnimationFrame(this._tick);\n      this.dispatchEvent(new CustomEvent('ai-audio-play', { bubbles: true, composed: true }));\n    }\n  }\n\n  private _seek(e: MouseEvent) {\n    const track = e.currentTarget as HTMLElement;\n    const rect = track.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const dur = this.duration || this._audio?.duration || 0;\n    if (this._audio && dur) {\n      this._audio.currentTime = pct * dur;\n      this._currentTime = this._audio.currentTime;\n    }\n  }\n\n  private _seekKeydown(e: KeyboardEvent) {\n    const dur = this.duration || this._audio?.duration || 0;\n    if (!this._audio || !dur) return;\n    let handled = true;\n    switch (e.key) {\n      case 'ArrowRight': this._audio.currentTime = Math.min(dur, this._audio.currentTime + 5); break;\n      case 'ArrowLeft': this._audio.currentTime = Math.max(0, this._audio.currentTime - 5); break;\n      case 'Home': this._audio.currentTime = 0; break;\n      case 'End': this._audio.currentTime = dur; break;\n      default: handled = false;\n    }\n    if (handled) {\n      e.preventDefault();\n      this._currentTime = this._audio.currentTime;\n    }\n  }\n\n  private _cycleSpeed() {\n    const idx = this._speeds.indexOf(this._speed);\n    this._speed = this._speeds[(idx + 1) % this._speeds.length] ?? 1;\n    if (this._audio) this._audio.playbackRate = this._speed;\n  }\n\n  private _fmt(sec: number): string {\n    const m = Math.floor(sec / 60);\n    const s = Math.floor(sec % 60);\n    return `${m}:${s.toString().padStart(2, '0')}`;\n  }\n\n  override render() {\n    const dur = this.duration || this._audio?.duration || 0;\n    const pct = dur > 0 ? (this._currentTime / dur) * 100 : 0;\n    const barPct = dur > 0 ? this._currentTime / dur : 0;\n\n    return html`\n      <div class=\"player\" role=\"region\" aria-label=\"Audio player: ${this.title}\">\n        <button\n          class=\"play-btn\"\n          aria-label=${this._playing ? 'Pause' : 'Play'}\n          @click=${this._togglePlay}\n        >\n          <cg-icon name=\"${this._playing ? 'pause' : 'play'}\" size=\"sm\"></cg-icon>\n        </button>\n\n        <div class=\"content\">\n          <div class=\"title-row\">\n            <span class=\"title\">${this.title}</span>\n            <span class=\"time\">${this._fmt(this._currentTime)} / ${this._fmt(dur)}</span>\n          </div>\n          <div class=\"waveform\" aria-hidden=\"true\">\n            ${this._waveBars.map((h, i) => {\n              const past = i / this._waveBars.length <= barPct;\n              return html`<span class=\"wave-bar ${past ? 'past' : 'future'}\" style=\"height: ${h}%\"></span>`;\n            })}\n          </div>\n          <div\n            class=\"progress-track\"\n            role=\"slider\"\n            tabindex=\"0\"\n            aria-label=\"Seek\"\n            aria-valuemin=\"0\"\n            aria-valuemax=${Math.floor(dur)}\n            aria-valuenow=${Math.floor(this._currentTime)}\n            @click=${this._seek}\n            @keydown=${this._seekKeydown}\n          >\n            <div class=\"progress-fill\" style=\"width: ${pct}%\"></div>\n          </div>\n        </div>\n\n        <button class=\"speed-btn\" aria-label=\"Playback speed\" @click=${this._cycleSpeed}>\n          ${this._speed}x\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-audio-player': AiAudioPlayer;\n  }\n}\n"],"names":["AiAudioPlayer","LitElement","changed","e","rect","pct","dur","handled","idx","sec","m","s","barPct","html","h","past","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-avatar/ai-avatar.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as d, html as u } from "lit";
 import { property as i, customElement as v } from "lit/decorators.js";
-import { a as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as y } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-avatar/cg-avatar.js";
 var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (s, a, o, n) => {
   for (var t = n > 1 ? void 0 : n ? b(a, o) : a, c = s.length - 1, l; c >= 0; c--)

package/dist/components/ai-badge/ai-badge.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as d, html as y } from "lit";
 import { property as r, customElement as g } from "lit/decorators.js";
-import { a as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as m } from "../../chunks/premium.css-DHekUEUt.js";
 import "../ai-confidence-badge/ai-confidence-badge.js";
 var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (i, s, n, h) => {
   for (var o = h > 1 ? void 0 : h ? u(s, n) : s, a = i.length - 1, l; a >= 0; a--)

package/dist/components/ai-batch-progress/ai-batch-progress.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as p, nothing as r, html as s } from "lit";
 import { property as o, customElement as v } from "lit/decorators.js";
-import { h as b, r as h, p as f, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as h, p as f, f as m } from "../../chunks/premium.css-DHekUEUt.js";
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (c, i, l, n) => {
   for (var a = n > 1 ? void 0 : n ? y(i, l) : i, d = c.length - 1, g; d >= 0; d--)
     (g = c[d]) && (a = (n ? g(i, l, a) : g(a)) || a);
@@ -158,7 +158,7 @@ t.styles = [b, h, f, m, u`
       font-weight: var(--cg-font-weight-bold);
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      padding: var(--cg-spacing-3) var(--cg-spacing-8);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
       border-radius: var(--cg-border-radius-100);
     }
     .status-badge.running {
@@ -175,7 +175,7 @@ t.styles = [b, h, f, m, u`
     }
     .status-badge.paused {
       background: var(--cg-color-status-warning-background-default);
-      color: var(--cg-color-status-warning-text);
+      color: var(--cg-color-status-warning-text-default);
     }
 
     /* ── Stats row ── */
@@ -223,7 +223,7 @@ t.styles = [b, h, f, m, u`
     }
 
     .progress-track {
-      height: 10px;
+      height: var(--cg-component-progress-height-lg);
       background: var(--cg-color-surface-cards-border);
       border-radius: var(--cg-border-radius-50);
       overflow: hidden;
@@ -284,11 +284,11 @@ t.styles = [b, h, f, m, u`
       color: var(--cg-color-surface-base-text);
     }
     .action-btn:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
-    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text); color: var(--cg-color-status-warning-text); }
+    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text-default); color: var(--cg-color-status-warning-text-default); }
     .action-btn.cancel:hover { border-color: var(--cg-color-status-error-text-default); color: var(--cg-color-status-error-text-default); }
     .action-btn.retry {
       background: var(--cg-color-action-primary-background-default);

package/dist/components/ai-batch-progress/ai-batch-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-batch-progress.js","sources":["../../../src/components/ai-batch-progress/ai-batch-progress.ts"],"sourcesContent":["/**\n * @element ai-batch-progress\n * Batch job progress tracker with segmented success/fail bar, stats, and pause/cancel/retry controls.\n *\n * @example\n * ```html\n * <ai-batch-progress\n *   total=\"500\" completed=\"312\" failed=\"8\"\n *   heading=\"Embedding Generation\"\n *   status=\"running\"\n * ></ai-batch-progress>\n * ```\n *\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-pause - Pause clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-cancel - Cancel clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-retry - Retry/Resume clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Accent for percentage text\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-batch-progress')\nexport class AiBatchProgress extends LitElement {\n  static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .container {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .status-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: var(--cg-spacing-3) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n    }\n    .status-badge.running {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .status-badge.complete {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .status-badge.failed {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .status-badge.paused {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text);\n    }\n\n    /* ── Stats row ── */\n    .stats {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .stat {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .stat-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .stat-value {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    .stat-value.success { color: var(--cg-color-status-success-text-default); }\n    .stat-value.fail { color: var(--cg-color-status-error-text-default); }\n    .stat-value.pending { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Progress bar ── */\n    .progress-section {\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .progress-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .progress-percent {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .progress-track {\n      height: 10px;\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      display: flex;\n    }\n\n    .progress-success {\n      height: 100%;\n      background: var(--cg-color-status-success-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .progress-fail {\n      height: 100%;\n      background: var(--cg-color-status-error-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Pulse animation for running ── */\n    .pulse-dot {\n      display: inline-block;\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-status-info-text-default);\n      margin-right: var(--cg-spacing-6);\n      animation: pulse 1.5s infinite;\n    }\n\n    .eta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-border-hover);\n      margin-top: var(--cg-spacing-6);\n    }\n\n    /* ── Actions ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-16);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .action-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .action-btn:hover {\n      border-color: var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .action-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text); color: var(--cg-color-status-warning-text); }\n    .action-btn.cancel:hover { border-color: var(--cg-color-status-error-text-default); color: var(--cg-color-status-error-text-default); }\n    .action-btn.retry {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .action-btn.retry:hover { filter: brightness(0.9); }\n\n    .complete-text {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* Reduced motion: stop pulse animation, show static dot */\n    @media (prefers-reduced-motion: reduce) {\n      .pulse-dot {\n        animation: none !important;\n        opacity: 1;\n      }\n    }\n  `];\n  @property({ type: Number }) total = 0;\n  @property({ type: Number }) completed = 0;\n  @property({ type: Number }) failed = 0;\n  @property({ type: String }) heading = 'Batch Job';\n  @property({ type: String }) status: 'running' | 'complete' | 'failed' | 'paused' = 'running';\n\n  private get _pending(): number {\n    return Math.max(0, this.total - this.completed - this.failed);\n  }\n\n  private get _percent(): number {\n    if (this.total <= 0) return 0;\n    return Math.round(((this.completed + this.failed) / this.total) * 100);\n  }\n\n  private get _successPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.completed / this.total) * 100;\n  }\n\n  private get _failPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.failed / this.total) * 100;\n  }\n\n  private _dispatch(eventName: string) {\n    this.dispatchEvent(new CustomEvent(eventName, {\n      detail: { total: this.total, completed: this.completed, failed: this.failed, status: this.status },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"${this.heading} progress\">\n        <div class=\"header\">\n          <span class=\"title\">\n            ${this.status === 'running' ? html`<span class=\"pulse-dot\" aria-hidden=\"true\"></span>` : nothing}\n            ${this.heading}\n          </span>\n          <span class=\"status-badge ${this.status}\">${this.status}</span>\n        </div>\n\n        <div class=\"stats\">\n          <div class=\"stat\">\n            <span class=\"stat-label\">Completed</span>\n            <span class=\"stat-value success\">${this.completed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Failed</span>\n            <span class=\"stat-value fail\">${this.failed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Pending</span>\n            <span class=\"stat-value pending\">${this._pending}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Total</span>\n            <span class=\"stat-value\">${this.total}</span>\n          </div>\n        </div>\n\n        <div class=\"progress-section\">\n          <div class=\"progress-header\">\n            <span>Progress</span>\n            <span class=\"progress-percent\">${this._percent}%</span>\n          </div>\n          <div\n            class=\"progress-track\"\n            role=\"progressbar\"\n            aria-valuenow=${this._percent}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-label=\"Batch progress: ${this._percent}%\"\n          >\n            <div class=\"progress-success\" style=\"width:${this._successPercent}%\"></div>\n            <div class=\"progress-fail\" style=\"width:${this._failPercent}%\"></div>\n          </div>\n          ${this.status === 'running' && this._pending > 0 ? html`\n            <div class=\"eta\">\n              ~${this._pending} items remaining\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"actions\">\n          ${this.status === 'running' ? html`\n            <button\n              class=\"action-btn pause\"\n              @click=${() => this._dispatch('ai-batch-pause')}\n              aria-label=\"Pause batch job\"\n              tabindex=\"0\"\n            >Pause</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'paused' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Resume batch job\"\n              tabindex=\"0\"\n            >Resume</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'failed' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Retry failed items\"\n              tabindex=\"0\"\n            >Retry Failed</button>\n          ` : nothing}\n          ${this.status === 'complete' ? html`\n            <span class=\"complete-text\">All items processed</span>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-batch-progress': AiBatchProgress;\n  }\n}\n"],"names":["AiBatchProgress","LitElement","eventName","html","nothing","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-batch-progress.js","sources":["../../../src/components/ai-batch-progress/ai-batch-progress.ts"],"sourcesContent":["/**\n * @element ai-batch-progress\n * Batch job progress tracker with segmented success/fail bar, stats, and pause/cancel/retry controls.\n *\n * @example\n * ```html\n * <ai-batch-progress\n *   total=\"500\" completed=\"312\" failed=\"8\"\n *   heading=\"Embedding Generation\"\n *   status=\"running\"\n * ></ai-batch-progress>\n * ```\n *\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-pause - Pause clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-cancel - Cancel clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-retry - Retry/Resume clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Accent for percentage text\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-batch-progress')\nexport class AiBatchProgress extends LitElement {\n  static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .container {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .status-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n    }\n    .status-badge.running {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .status-badge.complete {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .status-badge.failed {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .status-badge.paused {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n    }\n\n    /* ── Stats row ── */\n    .stats {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .stat {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .stat-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .stat-value {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    .stat-value.success { color: var(--cg-color-status-success-text-default); }\n    .stat-value.fail { color: var(--cg-color-status-error-text-default); }\n    .stat-value.pending { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Progress bar ── */\n    .progress-section {\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .progress-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .progress-percent {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .progress-track {\n      height: var(--cg-component-progress-height-lg);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      display: flex;\n    }\n\n    .progress-success {\n      height: 100%;\n      background: var(--cg-color-status-success-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .progress-fail {\n      height: 100%;\n      background: var(--cg-color-status-error-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Pulse animation for running ── */\n    .pulse-dot {\n      display: inline-block;\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-status-info-text-default);\n      margin-right: var(--cg-spacing-6);\n      animation: pulse 1.5s infinite;\n    }\n\n    .eta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-border-hover);\n      margin-top: var(--cg-spacing-6);\n    }\n\n    /* ── Actions ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-16);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .action-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .action-btn:hover {\n      border-color: var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .action-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text-default); color: var(--cg-color-status-warning-text-default); }\n    .action-btn.cancel:hover { border-color: var(--cg-color-status-error-text-default); color: var(--cg-color-status-error-text-default); }\n    .action-btn.retry {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .action-btn.retry:hover { filter: brightness(0.9); }\n\n    .complete-text {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* Reduced motion: stop pulse animation, show static dot */\n    @media (prefers-reduced-motion: reduce) {\n      .pulse-dot {\n        animation: none !important;\n        opacity: 1;\n      }\n    }\n  `];\n  @property({ type: Number }) total = 0;\n  @property({ type: Number }) completed = 0;\n  @property({ type: Number }) failed = 0;\n  @property({ type: String }) heading = 'Batch Job';\n  @property({ type: String }) status: 'running' | 'complete' | 'failed' | 'paused' = 'running';\n\n  private get _pending(): number {\n    return Math.max(0, this.total - this.completed - this.failed);\n  }\n\n  private get _percent(): number {\n    if (this.total <= 0) return 0;\n    return Math.round(((this.completed + this.failed) / this.total) * 100);\n  }\n\n  private get _successPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.completed / this.total) * 100;\n  }\n\n  private get _failPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.failed / this.total) * 100;\n  }\n\n  private _dispatch(eventName: string) {\n    this.dispatchEvent(new CustomEvent(eventName, {\n      detail: { total: this.total, completed: this.completed, failed: this.failed, status: this.status },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"${this.heading} progress\">\n        <div class=\"header\">\n          <span class=\"title\">\n            ${this.status === 'running' ? html`<span class=\"pulse-dot\" aria-hidden=\"true\"></span>` : nothing}\n            ${this.heading}\n          </span>\n          <span class=\"status-badge ${this.status}\">${this.status}</span>\n        </div>\n\n        <div class=\"stats\">\n          <div class=\"stat\">\n            <span class=\"stat-label\">Completed</span>\n            <span class=\"stat-value success\">${this.completed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Failed</span>\n            <span class=\"stat-value fail\">${this.failed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Pending</span>\n            <span class=\"stat-value pending\">${this._pending}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Total</span>\n            <span class=\"stat-value\">${this.total}</span>\n          </div>\n        </div>\n\n        <div class=\"progress-section\">\n          <div class=\"progress-header\">\n            <span>Progress</span>\n            <span class=\"progress-percent\">${this._percent}%</span>\n          </div>\n          <div\n            class=\"progress-track\"\n            role=\"progressbar\"\n            aria-valuenow=${this._percent}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-label=\"Batch progress: ${this._percent}%\"\n          >\n            <div class=\"progress-success\" style=\"width:${this._successPercent}%\"></div>\n            <div class=\"progress-fail\" style=\"width:${this._failPercent}%\"></div>\n          </div>\n          ${this.status === 'running' && this._pending > 0 ? html`\n            <div class=\"eta\">\n              ~${this._pending} items remaining\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"actions\">\n          ${this.status === 'running' ? html`\n            <button\n              class=\"action-btn pause\"\n              @click=${() => this._dispatch('ai-batch-pause')}\n              aria-label=\"Pause batch job\"\n              tabindex=\"0\"\n            >Pause</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'paused' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Resume batch job\"\n              tabindex=\"0\"\n            >Resume</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'failed' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Retry failed items\"\n              tabindex=\"0\"\n            >Retry Failed</button>\n          ` : nothing}\n          ${this.status === 'complete' ? html`\n            <span class=\"complete-text\">All items processed</span>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-batch-progress': AiBatchProgress;\n  }\n}\n"],"names":["AiBatchProgress","LitElement","eventName","html","nothing","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-cache-indicator/ai-cache-indicator.d.ts

@@ -5,20 +5,7 @@ export declare class AiCacheIndicator extends LitElement {
     hitRate: number;
     latencySaved: string;
     cacheAge: string;
-    /** Optional: tokens served from cache. Surfaces OpenAI's cached_tokens / Anthropic's cache_read_input_tokens. */
-    tokensCached: number;
-    /** Optional: dollar cost saved, formatted by the consumer (e.g. "$0.04"). */
-    costSaved: string;
     showDetails: boolean;
-    /**
-     * Optional async clear handler. When provided, the Clear button uses
-     * cg-button.runAction() so the user gets a spinner → ✓ / × pop on the
-     * same button instead of a plain click. Without this prop we just fire
-     * `ai-cache-clear` and let the consumer manage state.
-     */
-    clearAction?: () => Promise<void>;
-    private get _hitRateTier();
-    private _formatTokens;
     private _toggleDetails;
     private _onClear;
     render(): import('lit').TemplateResult<1>;

package/dist/components/ai-cache-indicator/ai-cache-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-cache-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/ai-cache-indicator/ai-cache-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,OAAO,2BAA2B,CAAC;AAGnC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAqKnB;IAEyB,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAc;IAChD,OAAO,SAAK;IACP,YAAY,SAAM;IACtB,QAAQ,SAAM;IAClE,iHAAiH;IACzD,YAAY,SAAK;IACzE,6EAA6E;IACxB,SAAS,SAAM;IACG,WAAW,UAAS;IAC3F;;;;;OAKG;IAC6B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAElE,OAAO,KAAK,YAAY,GAIvB;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,QAAQ;IAaP,MAAM;CAmFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"ai-cache-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/ai-cache-indicator/ai-cache-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA6HnB;IAEyB,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAc;IACvE,OAAO,SAAK;IACZ,YAAY,SAAM;IAClB,QAAQ,SAAM;IACb,WAAW,UAAS;IAEjD,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,QAAQ;IAMP,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}