@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-alert-dialog/cg-alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-alert-dialog.js","sources":["../../../src/components/cg-alert-dialog/cg-alert-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-alert-dialog\n * Destructive confirmation dialog with alertdialog ARIA role. Uses danger styling\n * for destructive actions and focuses cancel button by default for safety.\n *\n * @example\n * ```html\n * <cg-alert-dialog\n *   open\n *   title=\"Delete project?\"\n *   description=\"This action cannot be undone.\"\n *   destructive\n *   confirm-label=\"Delete\"\n * ></cg-alert-dialog>\n * ```\n *\n * @slot - Optional body content (overrides description)\n * @slot icon - Optional icon\n * @slot actions - Override default action buttons\n *\n * @fires {CustomEvent} cg-alert-confirm\n * @fires {CustomEvent} cg-alert-cancel\n * @fires {CustomEvent} cg-alert-open\n * @fires {CustomEvent} cg-alert-close\n */\n@customElement('cg-alert-dialog')\nexport class CgAlertDialog extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\n\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-alert-dialog-width);\n      padding: var(--cg-spacing-24);\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-component-alert-dialog-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translate(-50%, -48%) scale(0.96);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .dialog {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n      pointer-events: auto;\n    }\n\n    .header {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .icon-wrap {\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([destructive]) .icon-wrap {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .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      margin: 0 0 var(--cg-spacing-4);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      margin: 0;\n      line-height: var(--cg-line-height-relaxed);\n    }\n    .header-text { flex: 1; }\n\n    .body {\n      margin: var(--cg-spacing-16) 0;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-24);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() override title = '';\n  @property() description = '';\n  @property({ attribute: 'confirm-label' }) confirmLabel = 'Confirm';\n  @property({ attribute: 'cancel-label' }) cancelLabel = 'Cancel';\n  @property({ type: Boolean, reflect: true }) destructive = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) closable = false;\n\n  @query('.dialog') private _dialogEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n  private _previousOverflow = '';\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    document.body.style.overflow = this._previousOverflow;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-alert-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (this._dialogEl) {\n        // Focus cancel button by default for safety\n        const cancelBtn = this._dialogEl.querySelector<HTMLButtonElement>('[data-cancel]');\n        this._focusTrap.activate(this._dialogEl, {\n          initialFocus: cancelBtn ?? null,\n          handleEscape: this.closable,\n          onEscape: this.closable ? () => this._cancel() : undefined,\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-alert-close', { bubbles: true, composed: true }));\n  }\n\n  private _confirm(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-confirm', { bubbles: true, composed: true }));\n    if (!this.loading) this.open = false;\n  }\n\n  private _cancel(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-cancel', { bubbles: true, composed: true }));\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div class=\"backdrop\" @click=${() => this.closable && this._cancel()}></div>\n      <div\n        class=\"dialog\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"alert-title\"\n        aria-describedby=\"alert-description\"\n        ?inert=${!this.open}\n      >\n        <div class=\"header\">\n          <slot name=\"icon\">\n            ${this.destructive ? html`\n              <div class=\"icon-wrap\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M12 9v4M12 17h.01\"/>\n                  <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n                </svg>\n              </div>\n            ` : nothing}\n          </slot>\n          <div class=\"header-text\">\n            ${this.title ? html`<h2 id=\"alert-title\" class=\"title\">${this.title}</h2>` : nothing}\n            ${this.description ? html`<p id=\"alert-description\" class=\"description\">${this.description}</p>` : nothing}\n          </div>\n        </div>\n        <div class=\"body\"><slot></slot></div>\n        <div class=\"actions\">\n          <slot name=\"actions\">\n            <cg-button\n              variant=\"tertiary\"\n              size=\"md\"\n              data-cancel\n              @click=${this._cancel}\n              ?disabled=${this.loading}\n            >${this.cancelLabel}</cg-button>\n            <cg-button\n              variant=\"primary\"\n              type=\"${this.destructive ? 'danger' : 'normal'}\"\n              size=\"md\"\n              data-confirm\n              @click=${this._confirm}\n              ?loading=${this.loading}\n            >${this.confirmLabel}</cg-button>\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-alert-dialog': CgAlertDialog;\n  }\n}\n"],"names":["CgAlertDialog","LitElement","FocusTrap","changed","cancelBtn","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AA+BO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiGuC,KAAA,OAAO,IACvC,KAAS,QAAQ,IACjB,KAAA,cAAc,IACgB,KAAA,eAAe,WAChB,KAAA,cAAc,UACX,KAAA,cAAc,IACd,KAAA,UAAU,IACzB,KAAA,WAAW,IAIxC,KAAQ,aAAa,IAAIC,EAAA,GACzB,KAAQ,oBAAoB;AAAA,EAAA;AAAA,EAEnB,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,WAAW,WAAA,GAChB,SAAS,KAAK,MAAM,WAAW,KAAK;AAAA,EACtC;AAAA,EAES,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OAAM,KAAK,QAAA,SACV,SAAA;AAAA,EAEd;AAAA,EAEQ,UAAgB;AACtB,SAAK,oBAAoB,SAAS,KAAK,MAAM,UAC7C,SAAS,KAAK,MAAM,WAAW,UAC/B,KAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GAEtF,sBAAsB,MAAM;AAC1B,UAAI,KAAK,WAAW;AAElB,cAAMC,IAAY,KAAK,UAAU,cAAiC,eAAe;AACjF,aAAK,WAAW,SAAS,KAAK,WAAW;AAAA,UACvC,cAAcA,KAAa;AAAA,UAC3B,cAAc,KAAK;AAAA,UACnB,UAAU,KAAK,WAAW,MAAM,KAAK,YAAY;AAAA,QAAA,CAClD;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,WAAiB;AACvB,aAAS,KAAK,MAAM,WAAW,KAAK,mBACpC,KAAK,WAAW,WAAA,GAChB,KAAK,cAAc,IAAI,YAAY,kBAAkB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA,EAEQ,WAAiB;AACvB,SAAK,cAAc,IAAI,YAAY,oBAAoB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACpF,KAAK,YAAS,KAAK,OAAO;AAAA,EACjC;AAAA,EAEQ,UAAgB;AACtB,SAAK,cAAc,IAAI,YAAY,mBAAmB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACxF,KAAK,OAAO;AAAA,EACd;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,qCAC0B,MAAM,KAAK,YAAY,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOzD,CAAC,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,cAIb,KAAK,cAAcA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOjBC,CAAO;AAAA;AAAA;AAAA,cAGT,KAAK,QAAQD,uCAA0C,KAAK,KAAK,UAAUC,CAAO;AAAA,cAClF,KAAK,cAAcD,kDAAqD,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAU/F,KAAK,OAAO;AAAA,0BACT,KAAK,OAAO;AAAA,eACvB,KAAK,WAAW;AAAA;AAAA;AAAA,sBAGT,KAAK,cAAc,WAAW,QAAQ;AAAA;AAAA;AAAA,uBAGrC,KAAK,QAAQ;AAAA,yBACX,KAAK,OAAO;AAAA,eACtB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B;AACF;AAhNaN,EACK,SAAS,CAACO,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8FnD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjG/BX,EAiGiC,WAAA,QAAA,CAAA;AACvBU,EAAA;AAAA,EAApBC,EAAA;AAAS,GAlGCX,EAkGU,WAAA,SAAA,CAAA;AACTU,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnGCX,EAmGC,WAAA,eAAA,CAAA;AAC8BU,EAAA;AAAA,EAAzCC,EAAS,EAAE,WAAW,gBAAA,CAAiB;AAAA,GApG7BX,EAoG+B,WAAA,gBAAA,CAAA;AACDU,EAAA;AAAA,EAAxCC,EAAS,EAAE,WAAW,eAAA,CAAgB;AAAA,GArG5BX,EAqG8B,WAAA,eAAA,CAAA;AACGU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BX,EAsGiC,WAAA,eAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvG/BX,EAuGiC,WAAA,WAAA,CAAA;AACfU,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxGhBX,EAwGkB,WAAA,YAAA,CAAA;AAEHU,EAAA;AAAA,EAAzBE,EAAM,SAAS;AAAA,GA1GLZ,EA0Ge,WAAA,aAAA,CAAA;AA1GfA,IAANU,EAAA;AAAA,EADNG,EAAc,iBAAiB;AAAA,GACnBb,CAAA;"}
+{"version":3,"file":"cg-alert-dialog.js","sources":["../../../src/components/cg-alert-dialog/cg-alert-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-alert-dialog\n * Destructive confirmation dialog with alertdialog ARIA role. Uses danger styling\n * for destructive actions and focuses cancel button by default for safety.\n *\n * @example\n * ```html\n * <cg-alert-dialog\n *   open\n *   title=\"Delete project?\"\n *   description=\"This action cannot be undone.\"\n *   destructive\n *   confirm-label=\"Delete\"\n * ></cg-alert-dialog>\n * ```\n *\n * @slot - Optional body content (overrides description)\n * @slot icon - Optional icon\n * @slot actions - Override default action buttons\n *\n * @fires {CustomEvent} cg-alert-confirm\n * @fires {CustomEvent} cg-alert-cancel\n * @fires {CustomEvent} cg-alert-open\n * @fires {CustomEvent} cg-alert-close\n */\n@customElement('cg-alert-dialog')\nexport class CgAlertDialog extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\n\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-alert-dialog-width);\n      padding: var(--cg-spacing-24);\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-component-alert-dialog-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translate(-50%, -48%) scale(0.96);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .dialog {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n      pointer-events: auto;\n    }\n\n    .header {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .icon-wrap {\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([destructive]) .icon-wrap {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .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      margin: 0 0 var(--cg-spacing-4);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      margin: 0;\n      line-height: var(--cg-line-height-relaxed);\n    }\n    .header-text { flex: 1; }\n\n    .body {\n      margin: var(--cg-spacing-16) 0;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-24);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() override title = '';\n  @property() description = '';\n  @property({ attribute: 'confirm-label' }) confirmLabel = 'Confirm';\n  @property({ attribute: 'cancel-label' }) cancelLabel = 'Cancel';\n  @property({ type: Boolean, reflect: true }) destructive = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) closable = false;\n\n  @query('.dialog') private _dialogEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n  private _previousOverflow = '';\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    document.body.style.overflow = this._previousOverflow;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-alert-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (this._dialogEl) {\n        // Focus cancel button by default for safety\n        const cancelBtn = this._dialogEl.querySelector<HTMLButtonElement>('[data-cancel]');\n        this._focusTrap.activate(this._dialogEl, {\n          initialFocus: cancelBtn ?? null,\n          handleEscape: this.closable,\n          onEscape: this.closable ? () => this._cancel() : undefined,\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-alert-close', { bubbles: true, composed: true }));\n  }\n\n  private _confirm(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-confirm', { bubbles: true, composed: true }));\n    if (!this.loading) this.open = false;\n  }\n\n  private _cancel(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-cancel', { bubbles: true, composed: true }));\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div class=\"backdrop\" @click=${() => this.closable && this._cancel()}></div>\n      <div\n        class=\"dialog\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby=${this.title ? 'alert-title' : nothing}\n        aria-describedby=${this.description ? 'alert-description' : nothing}\n        ?inert=${!this.open}\n      >\n        <div class=\"header\">\n          <slot name=\"icon\">\n            ${this.destructive ? html`\n              <div class=\"icon-wrap\">\n                <svg aria-hidden=\"true\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M12 9v4M12 17h.01\"/>\n                  <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n                </svg>\n              </div>\n            ` : nothing}\n          </slot>\n          <div class=\"header-text\">\n            ${this.title ? html`<h2 id=\"alert-title\" class=\"title\">${this.title}</h2>` : nothing}\n            ${this.description ? html`<p id=\"alert-description\" class=\"description\">${this.description}</p>` : nothing}\n          </div>\n        </div>\n        <div class=\"body\"><slot></slot></div>\n        <div class=\"actions\">\n          <slot name=\"actions\">\n            <cg-button\n              variant=\"tertiary\"\n              size=\"md\"\n              data-cancel\n              @click=${this._cancel}\n              ?disabled=${this.loading}\n            >${this.cancelLabel}</cg-button>\n            <cg-button\n              variant=\"primary\"\n              type=\"${this.destructive ? 'danger' : 'normal'}\"\n              size=\"md\"\n              data-confirm\n              @click=${this._confirm}\n              ?loading=${this.loading}\n            >${this.confirmLabel}</cg-button>\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-alert-dialog': CgAlertDialog;\n  }\n}\n"],"names":["CgAlertDialog","LitElement","FocusTrap","changed","cancelBtn","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAYnB;IAEH,6EAA6E;IAChD,KAAK,EAAE,MAAM,CAAU;IAEpD,4EAA4E;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAW;IAExF,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"cg-aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAYnB;IAEH,6EAA6E;IAChD,KAAK,EAAE,MAAM,CAAU;IAEpD,4EAA4E;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAW;IAExF,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.js

@@ -1,47 +1,51 @@
-import { css as n, LitElement as f, html as m } from "lit";
-import { property as l, customElement as v } from "lit/decorators.js";
-import { h } from "../../chunks/premium.css-9I4kHrsl.js";
-var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, p = (s, e, a, o) => {
-  for (var t = o > 1 ? void 0 : o ? d(e, a) : e, c = s.length - 1, i; c >= 0; c--)
-    (i = s[c]) && (t = (o ? i(e, a, t) : i(t)) || t);
-  return o && t && u(e, a, t), t;
+import { css as f, LitElement as d, html as m } from "lit";
+import { property as l, customElement as n } from "lit/decorators.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+import { h } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(e, s) : e, a = r.length - 1, p; a >= 0; a--)
+    (p = r[a]) && (t = (i ? p(e, s, t) : p(t)) || t);
+  return i && t && _(e, s, t), t;
 };
-let r = class extends f {
+let o = class extends d {
   constructor() {
     super(...arguments), this.ratio = "16/9", this.fit = "cover";
   }
   render() {
-    const e = `--cg-component-aspect-ratio-value: ${this.ratio.replace("/", " / ")}; --cg-component-aspect-ratio-fit: ${this.fit};`;
+    const r = (this.ratio ?? "").trim(), s = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(r) ? r.replace(/\s*\/\s*/g, " / ") : "16 / 9";
     return m`
-      <div class="wrap" style=${e}>
+      <div
+        class="wrap"
+        style=${v({ "--_aspect-ratio": s, "--_aspect-fit": this.fit })}
+      >
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = [h, n`
+o.styles = [h, f`
     .wrap {
       width: 100%;
-      aspect-ratio: var(--cg-component-aspect-ratio-value);
+      aspect-ratio: var(--_aspect-ratio);
       overflow: hidden;
     }
     .wrap ::slotted(*) {
       width: 100%;
       height: 100%;
-      object-fit: var(--cg-component-aspect-ratio-fit);
+      object-fit: var(--_aspect-fit);
       display: block;
     }
   `];
-p([
+c([
   l({ reflect: !0 })
-], r.prototype, "ratio", 2);
-p([
+], o.prototype, "ratio", 2);
+c([
   l({ reflect: !0 })
-], r.prototype, "fit", 2);
-r = p([
-  v("cg-aspect-ratio")
-], r);
+], o.prototype, "fit", 2);
+o = c([
+  n("cg-aspect-ratio")
+], o);
 export {
-  r as CgAspectRatio
+  o as CgAspectRatio
 };
 //# sourceMappingURL=cg-aspect-ratio.js.map

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-aspect-ratio.js","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock } from '../../styles/index.js';\n\n/**\n * @element cg-aspect-ratio\n * Layout primitive that constrains its slotted child to a fixed aspect ratio.\n * The slotted element is sized to fill the box — pick `fit` to control how it\n * fills (default `cover` crops to fill; `contain` letterboxes; `fill` stretches).\n *\n * @example\n * ```html\n * <cg-aspect-ratio ratio=\"16/9\">\n *   <img src=\"hero.jpg\" alt=\"Hero\" />\n * </cg-aspect-ratio>\n *\n * <cg-aspect-ratio ratio=\"1/1\" fit=\"contain\">\n *   <img src=\"logo.svg\" alt=\"Logo\" />\n * </cg-aspect-ratio>\n * ```\n *\n * @slot - Content (usually an `<img>`, `<video>`, `<picture>`, or `<iframe>`).\n */\n@customElement('cg-aspect-ratio')\nexport class CgAspectRatio extends LitElement {\n  static override styles = [hostBlock, css`\n    .wrap {\n      width: 100%;\n      aspect-ratio: var(--cg-component-aspect-ratio-value);\n      overflow: hidden;\n    }\n    .wrap ::slotted(*) {\n      width: 100%;\n      height: 100%;\n      object-fit: var(--cg-component-aspect-ratio-fit);\n      display: block;\n    }\n  `];\n\n  /** Aspect ratio expressed as `\"W/H\"` (e.g. `\"16/9\"`, `\"1/1\"`, `\"4 / 3\"`). */\n  @property({ reflect: true }) ratio: string = '16/9';\n\n  /** How the slotted element fills the box. Defaults to `cover` (cropped). */\n  @property({ reflect: true }) fit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';\n\n  override render() {\n    // Accept \"16/9\" or \"16 / 9\" and normalize to CSS aspect-ratio syntax.\n    const normalized = this.ratio.replace('/', ' / ');\n    const styleVars = `--cg-component-aspect-ratio-value: ${normalized}; --cg-component-aspect-ratio-fit: ${this.fit};`;\n    return html`\n      <div class=\"wrap\" style=${styleVars}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-aspect-ratio': CgAspectRatio;\n  }\n}\n"],"names":["CgAspectRatio","LitElement","styleVars","html","hostBlock","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAwBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgBwB,KAAA,QAAgB,QAGhB,KAAA,MAA4D;AAAA,EAAA;AAAA,EAEhF,SAAS;AAGhB,UAAMC,IAAY,sCADC,KAAK,MAAM,QAAQ,KAAK,KAAK,CACkB,sCAAsC,KAAK,GAAG;AAChH,WAAOC;AAAA,gCACqBD,CAAS;AAAA;AAAA;AAAA;AAAA,EAIvC;AACF;AA/BaF,EACK,SAAS,CAACI,GAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYpC;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhBhBP,EAgBkB,WAAA,SAAA,CAAA;AAGAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnBhBP,EAmBkB,WAAA,OAAA,CAAA;AAnBlBA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}
+{"version":3,"file":"cg-aspect-ratio.js","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { hostBlock } from '../../styles/index.js';\n\n/**\n * @element cg-aspect-ratio\n * Layout primitive that constrains its slotted child to a fixed aspect ratio.\n * The slotted element is sized to fill the box — pick `fit` to control how it\n * fills (default `cover` crops to fill; `contain` letterboxes; `fill` stretches).\n *\n * @example\n * ```html\n * <cg-aspect-ratio ratio=\"16/9\">\n *   <img src=\"hero.jpg\" alt=\"Hero\" />\n * </cg-aspect-ratio>\n *\n * <cg-aspect-ratio ratio=\"1/1\" fit=\"contain\">\n *   <img src=\"logo.svg\" alt=\"Logo\" />\n * </cg-aspect-ratio>\n * ```\n *\n * @slot - Content (usually an `<img>`, `<video>`, `<picture>`, or `<iframe>`).\n */\n@customElement('cg-aspect-ratio')\nexport class CgAspectRatio extends LitElement {\n  static override styles = [hostBlock, css`\n    .wrap {\n      width: 100%;\n      aspect-ratio: var(--_aspect-ratio);\n      overflow: hidden;\n    }\n    .wrap ::slotted(*) {\n      width: 100%;\n      height: 100%;\n      object-fit: var(--_aspect-fit);\n      display: block;\n    }\n  `];\n\n  /** Aspect ratio expressed as `\"W/H\"` (e.g. `\"16/9\"`, `\"1/1\"`, `\"4 / 3\"`). */\n  @property({ reflect: true }) ratio: string = '16/9';\n\n  /** How the slotted element fills the box. Defaults to `cover` (cropped). */\n  @property({ reflect: true }) fit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';\n\n  override render() {\n    // Accept \"16/9\" or \"16 / 9\" and normalize to CSS aspect-ratio syntax.\n    // Validate against W/H to (a) avoid a collapsed 0-height box on garbage\n    // input and (b) prevent CSS injection — styleMap binds the value as a\n    // discrete property value, never a parsed declaration string.\n    const raw = (this.ratio ?? '').trim();\n    const valid = /^\\d+(\\.\\d+)?\\s*\\/\\s*\\d+(\\.\\d+)?$/.test(raw);\n    const normalized = valid ? raw.replace(/\\s*\\/\\s*/g, ' / ') : '16 / 9';\n    return html`\n      <div\n        class=\"wrap\"\n        style=${styleMap({ '--_aspect-ratio': normalized, '--_aspect-fit': this.fit })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-aspect-ratio': CgAspectRatio;\n  }\n}\n"],"names":["CgAspectRatio","LitElement","raw","normalized","html","styleMap","hostBlock","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAyBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgBwB,KAAA,QAAgB,QAGhB,KAAA,MAA4D;AAAA,EAAA;AAAA,EAEhF,SAAS;AAKhB,UAAMC,KAAO,KAAK,SAAS,IAAI,KAAA,GAEzBC,IADQ,mCAAmC,KAAKD,CAAG,IAC9BA,EAAI,QAAQ,aAAa,KAAK,IAAI;AAC7D,WAAOE;AAAA;AAAA;AAAA,gBAGKC,EAAS,EAAE,mBAAmBF,GAAY,iBAAiB,KAAK,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpF;AACF;AAtCaH,EACK,SAAS,CAACM,GAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYpC;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhBhBT,EAgBkB,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnBhBT,EAmBkB,WAAA,OAAA,CAAA;AAnBlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBV,CAAA;"}

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

@@ -34,6 +34,7 @@ export declare class CgAutocomplete extends LitElement {
     private _focused;
     private _activeIndex;
     private _input;
+    private _uid;
     private get _filtered();
     private _onInput;
     private _select;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAqJnB;IAEwB,OAAO,EAAE,kBAAkB,EAAE,CAAM;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACM,QAAQ,UAAS;IACF,KAAK,UAAS;IAC7B,SAAS,UAAS;IAEtC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,KAAK,SAAS,GAIpB;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,eAAe;IAUd,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
+{"version":3,"file":"cg-autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAqJnB;IAEwB,OAAO,EAAE,kBAAkB,EAAE,CAAM;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACM,QAAQ,UAAS;IACF,KAAK,UAAS;IAC7B,SAAS,UAAS;IAEtC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,MAAM,CAAoB;IAIlD,OAAO,CAAC,IAAI,CAAqD;IAEjE,OAAO,KAAK,SAAS,GAIpB;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,OAAO;YAOD,UAAU;IAyBxB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,eAAe;IAUd,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

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

@@ -1,18 +1,18 @@
-import { css as g, LitElement as h, html as s, nothing as d } from "lit";
+import { css as g, LitElement as h, html as s, nothing as l } from "lit";
 import { property as c, state as u, query as v, customElement as f } from "lit/decorators.js";
-import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, r, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? y(r, a) : r, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (i = (n ? p(r, a, i) : p(i)) || i);
-  return n && i && _(r, a, i), i;
+import { h as b, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, a, n) => {
+  for (var i = n > 1 ? void 0 : n ? y(t, a) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (i = (n ? p(t, a, i) : p(i)) || i);
+  return n && i && _(t, a, i), i;
 };
-let t = class extends h {
+let r = class extends h {
   constructor() {
-    super(...arguments), this.options = [], this.rounded = "lg", this.value = "", this.placeholder = "", this.label = "", this.disabled = !1, this.error = !1, this.clearable = !1, this._query = "", this._open = !1, this._focused = !1, this._activeIndex = -1;
+    super(...arguments), this.options = [], this.rounded = "lg", this.value = "", this.placeholder = "", this.label = "", this.disabled = !1, this.error = !1, this.clearable = !1, this._query = "", this._open = !1, this._focused = !1, this._activeIndex = -1, this._uid = `cg-ac-${Math.random().toString(36).slice(2, 9)}`;
   }
   get _filtered() {
     const e = this._query.toLowerCase();
-    return e ? this.options.filter((r) => r.label.toLowerCase().includes(e)) : this.options;
+    return e ? this.options.filter((t) => t.label.toLowerCase().includes(e)) : this.options;
   }
   _onInput(e) {
     this._query = e.target.value, this._open = !0, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-autocomplete-input", { detail: { query: this._query }, bubbles: !0, composed: !0 }));
@@ -20,31 +20,46 @@ let t = class extends h {
   _select(e) {
     this.value = e.value, this._query = e.label, this._open = !1, this.dispatchEvent(new CustomEvent("cg-autocomplete-select", { detail: { value: e.value, label: e.label }, bubbles: !0, composed: !0 }));
   }
-  _onKeyDown(e) {
-    const r = this._filtered;
-    e.key === "ArrowDown" ? (e.preventDefault(), this._open = !0, this._activeIndex = Math.min(this._activeIndex + 1, r.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this._activeIndex = Math.max(this._activeIndex - 1, 0)) : e.key === "Enter" && this._activeIndex >= 0 && r[this._activeIndex] ? (e.preventDefault(), this._select(r[this._activeIndex])) : e.key === "Escape" && (this._open = !1);
+  async _onKeyDown(e) {
+    const t = this._filtered;
+    if (e.key === "ArrowDown")
+      e.preventDefault(), this._open = !0, this._activeIndex = Math.min(this._activeIndex + 1, t.length - 1);
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), this._open = !0, this._activeIndex = Math.max(this._activeIndex - 1, 0);
+    else if (e.key === "Enter" && this._activeIndex >= 0 && t[this._activeIndex]) {
+      e.preventDefault(), this._select(t[this._activeIndex]);
+      return;
+    } else if (e.key === "Escape") {
+      this._open = !1;
+      return;
+    } else
+      return;
+    await this.updateComplete, this.renderRoot.querySelector(".option.active")?.scrollIntoView({ block: "nearest" });
   }
   _clear() {
     this.value = "", this._query = "", this._input.focus(), this.dispatchEvent(new CustomEvent("cg-autocomplete-select", { detail: { value: "", label: "" }, bubbles: !0, composed: !0 }));
   }
   _highlightMatch(e) {
-    const r = this._query.toLowerCase(), a = e.toLowerCase().indexOf(r);
-    if (a < 0 || !r) return e;
-    const n = e.slice(0, a), i = e.slice(a, a + r.length), l = e.slice(a + r.length);
-    return s`${n}<span class="match">${i}</span>${l}`;
+    const t = this._query.toLowerCase(), a = e.toLowerCase().indexOf(t);
+    if (a < 0 || !t) return e;
+    const n = e.slice(0, a), i = e.slice(a, a + t.length), d = e.slice(a + t.length);
+    return s`${n}<span class="match">${i}</span>${d}`;
   }
   render() {
     const e = this._filtered;
     return s`
-      ${this.label ? s`<span class="label">${this.label}</span>` : d}
+      ${this.label ? s`<span class="label">${this.label}</span>` : l}
       <div class="input-wrap ${this._focused ? "focused" : ""} ${this.disabled ? "disabled" : ""}">
         <input
           .value=${this._query}
-          placeholder=${this.placeholder || d}
+          placeholder=${this.placeholder || l}
           ?disabled=${this.disabled}
           role="combobox"
           aria-expanded=${this._open}
           aria-autocomplete="list"
+          aria-controls=${`${this._uid}-listbox`}
+          aria-activedescendant=${this._open && this._activeIndex >= 0 ? `${this._uid}-opt-${this._activeIndex}` : l}
+          aria-invalid=${this.error ? "true" : l}
           aria-label=${this.label || "Autocomplete"}
           @input=${this._onInput}
           @keydown=${this._onKeyDown}
@@ -56,32 +71,33 @@ let t = class extends h {
     }}
         />
         ${this.clearable && this._query ? s`
-          <button class="clear" @mousedown=${(r) => r.preventDefault()} @click=${this._clear} aria-label="Clear">
+          <button class="clear" @mousedown=${(t) => t.preventDefault()} @click=${this._clear} aria-label="Clear">
             <cg-icon name="x" size="xs"></cg-icon>
           </button>
-        ` : d}
+        ` : l}
         <span class="chevron ${this._open ? "open" : ""}">
           <cg-icon name="chevron-down" size="sm"></cg-icon>
         </span>
       </div>
       ${this._open ? s`
-        <div class="dropdown" role="listbox">
-          ${e.length === 0 ? s`<div class="empty">No results found</div>` : e.map((r, a) => s`
+        <div class="dropdown" role="listbox" id=${`${this._uid}-listbox`}>
+          ${e.length === 0 ? s`<div class="empty">No results found</div>` : e.map((t, a) => s`
               <div class="option ${a === this._activeIndex ? "active" : ""}"
                 role="option"
+                id=${`${this._uid}-opt-${a}`}
                 aria-selected=${a === this._activeIndex}
                 @mousedown=${(n) => n.preventDefault()}
-                @click=${() => this._select(r)}>
-                ${r.icon ? s`<cg-icon name="${r.icon}" size="sm"></cg-icon>` : d}
-                <span>${this._highlightMatch(r.label)}</span>
+                @click=${() => this._select(t)}>
+                ${t.icon ? s`<cg-icon name="${t.icon}" size="sm"></cg-icon>` : l}
+                <span>${this._highlightMatch(t.label)}</span>
               </div>
             `)}
         </div>
-      ` : d}
+      ` : l}
     `;
   }
 };
-t.styles = [b, m, g`
+r.styles = [b, m, g`
     :host {
       position: relative;
     }
@@ -233,47 +249,47 @@ t.styles = [b, m, g`
   `];
 o([
   c({ type: Array })
-], t.prototype, "options", 2);
+], r.prototype, "options", 2);
 o([
   c({ reflect: !0 })
-], t.prototype, "rounded", 2);
+], r.prototype, "rounded", 2);
 o([
   c()
-], t.prototype, "value", 2);
+], r.prototype, "value", 2);
 o([
   c()
-], t.prototype, "placeholder", 2);
+], r.prototype, "placeholder", 2);
 o([
   c()
-], t.prototype, "label", 2);
+], r.prototype, "label", 2);
 o([
   c({ type: Boolean })
-], t.prototype, "disabled", 2);
+], r.prototype, "disabled", 2);
 o([
   c({ type: Boolean, reflect: !0 })
-], t.prototype, "error", 2);
+], r.prototype, "error", 2);
 o([
   c({ type: Boolean })
-], t.prototype, "clearable", 2);
+], r.prototype, "clearable", 2);
 o([
   u()
-], t.prototype, "_query", 2);
+], r.prototype, "_query", 2);
 o([
   u()
-], t.prototype, "_open", 2);
+], r.prototype, "_open", 2);
 o([
   u()
-], t.prototype, "_focused", 2);
+], r.prototype, "_focused", 2);
 o([
   u()
-], t.prototype, "_activeIndex", 2);
+], r.prototype, "_activeIndex", 2);
 o([
   v("input")
-], t.prototype, "_input", 2);
-t = o([
+], r.prototype, "_input", 2);
+r = o([
   f("cg-autocomplete")
-], t);
+], r);
 export {
-  t as CgAutocomplete
+  r as CgAutocomplete
 };
 //# sourceMappingURL=cg-autocomplete.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-autocomplete.js","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface AutocompleteOption {\n  value: string;\n  label: string;\n  icon?: string;\n}\n\n/**\n * <cg-autocomplete> — Combobox input with filtered dropdown suggestions.\n *\n * @example\n * ```html\n * <cg-autocomplete label=\"Country\" placeholder=\"Search...\" .options=${countries}></cg-autocomplete>\n * ```\n *\n * @fires {CustomEvent<{query: string}>} cg-autocomplete-input - On input change\n * @fires {CustomEvent<{value: string, label: string}>} cg-autocomplete-select - On option select\n *\n * @cssprop --cg-component-input-radius - Input border radius\n * @cssprop --cg-component-input-height-md - Input height\n * @cssprop --cg-color-input-border-default - Default border color\n */\n@customElement('cg-autocomplete')\nexport class CgAutocomplete extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: relative;\n    }\n\n    .label {\n      display: block;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: 0 var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      min-height: var(--cg-component-input-height-md);\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-wrap:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .input-wrap.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .input-wrap.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    /* ── Error state ── */\n    :host([error]) .input-wrap {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .input-wrap.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-default);\n      min-width: 0;\n      padding: var(--cg-spacing-8) 0;\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:disabled { cursor: not-allowed; }\n\n    .clear {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: none;\n      padding: 0;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .clear:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    .chevron {\n      flex-shrink: 0;\n      color: var(--cg-color-input-icon-default);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .chevron.open { transform: rotate(180deg); }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\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-100);\n      box-shadow: var(--cg-elevation-3);\n      max-height: 280px;\n      overflow-y: auto;\n      z-index: var(--cg-z-index-400);\n      padding: var(--cg-spacing-6);\n      animation: dropIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    @keyframes dropIn {\n      from { opacity: 0; transform: scale(0.96) translateY(calc(var(--cg-spacing-4) * -1)); }\n      to { opacity: 1; transform: scale(1) translateY(0); }\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option:hover, .option.active {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .option .match {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .input-wrap { border-radius: 0; }\n    :host([rounded=\"sm\"]) .input-wrap { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .input-wrap { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .input-wrap { border-radius: var(--cg-component-input-radius); }\n    :host([rounded=\"full\"]) .input-wrap { border-radius: var(--cg-border-radius-full); }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .dropdown { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) options: AutocompleteOption[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() value = '';\n  @property() placeholder = '';\n  @property() label = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean }) clearable = false;\n\n  @state() private _query = '';\n  @state() private _open = false;\n  @state() private _focused = false;\n  @state() private _activeIndex = -1;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private get _filtered(): AutocompleteOption[] {\n    const q = this._query.toLowerCase();\n    if (!q) return this.options;\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _onInput(e: Event) {\n    this._query = (e.target as HTMLInputElement).value;\n    this._open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-input', { detail: { query: this._query }, bubbles: true, composed: true }));\n  }\n\n  private _select(opt: AutocompleteOption) {\n    this.value = opt.value;\n    this._query = opt.label;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: opt.value, label: opt.label }, bubbles: true, composed: true }));\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const list = this._filtered;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._open = true;\n      this._activeIndex = Math.min(this._activeIndex + 1, list.length - 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._activeIndex = Math.max(this._activeIndex - 1, 0);\n    } else if (e.key === 'Enter' && this._activeIndex >= 0 && list[this._activeIndex]) {\n      e.preventDefault();\n      this._select(list[this._activeIndex]!);\n    } else if (e.key === 'Escape') {\n      this._open = false;\n    }\n  }\n\n  private _clear() {\n    this.value = '';\n    this._query = '';\n    this._input.focus();\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: '', label: '' }, bubbles: true, composed: true }));\n  }\n\n  private _highlightMatch(label: string): unknown {\n    const q = this._query.toLowerCase();\n    const idx = label.toLowerCase().indexOf(q);\n    if (idx < 0 || !q) return label;\n    const before = label.slice(0, idx);\n    const match = label.slice(idx, idx + q.length);\n    const after = label.slice(idx + q.length);\n    return html`${before}<span class=\"match\">${match}</span>${after}`;\n  }\n\n  override render() {\n    const filtered = this._filtered;\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div class=\"input-wrap ${this._focused ? 'focused' : ''} ${this.disabled ? 'disabled' : ''}\">\n        <input\n          .value=${this._query}\n          placeholder=${this.placeholder || nothing}\n          ?disabled=${this.disabled}\n          role=\"combobox\"\n          aria-expanded=${this._open}\n          aria-autocomplete=\"list\"\n          aria-label=${this.label || 'Autocomplete'}\n          @input=${this._onInput}\n          @keydown=${this._onKeyDown}\n          @focus=${() => { this._focused = true; this._open = true; }}\n          @blur=${() => { this._focused = false; this._open = false; }}\n        />\n        ${this.clearable && this._query ? html`\n          <button class=\"clear\" @mousedown=${(e: Event) => e.preventDefault()} @click=${this._clear} aria-label=\"Clear\">\n            <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n          </button>\n        ` : nothing}\n        <span class=\"chevron ${this._open ? 'open' : ''}\">\n          <cg-icon name=\"chevron-down\" size=\"sm\"></cg-icon>\n        </span>\n      </div>\n      ${this._open ? html`\n        <div class=\"dropdown\" role=\"listbox\">\n          ${filtered.length === 0 ? html`<div class=\"empty\">No results found</div>` :\n            filtered.map((opt, i) => html`\n              <div class=\"option ${i === this._activeIndex ? 'active' : ''}\"\n                role=\"option\"\n                aria-selected=${i === this._activeIndex}\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @click=${() => this._select(opt)}>\n                ${opt.icon ? html`<cg-icon name=\"${opt.icon}\" size=\"sm\"></cg-icon>` : nothing}\n                <span>${this._highlightMatch(opt.label)}</span>\n              </div>\n            `)}\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-autocomplete': CgAutocomplete;\n  }\n}\n"],"names":["CgAutocomplete","LitElement","q","o","opt","list","label","idx","before","match","after","html","filtered","nothing","e","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-autocomplete.js","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface AutocompleteOption {\n  value: string;\n  label: string;\n  icon?: string;\n}\n\n/**\n * <cg-autocomplete> — Combobox input with filtered dropdown suggestions.\n *\n * @example\n * ```html\n * <cg-autocomplete label=\"Country\" placeholder=\"Search...\" .options=${countries}></cg-autocomplete>\n * ```\n *\n * @fires {CustomEvent<{query: string}>} cg-autocomplete-input - On input change\n * @fires {CustomEvent<{value: string, label: string}>} cg-autocomplete-select - On option select\n *\n * @cssprop --cg-component-input-radius - Input border radius\n * @cssprop --cg-component-input-height-md - Input height\n * @cssprop --cg-color-input-border-default - Default border color\n */\n@customElement('cg-autocomplete')\nexport class CgAutocomplete extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: relative;\n    }\n\n    .label {\n      display: block;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: 0 var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      min-height: var(--cg-component-input-height-md);\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-wrap:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .input-wrap.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .input-wrap.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    /* ── Error state ── */\n    :host([error]) .input-wrap {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .input-wrap.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-default);\n      min-width: 0;\n      padding: var(--cg-spacing-8) 0;\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:disabled { cursor: not-allowed; }\n\n    .clear {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: none;\n      padding: 0;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .clear:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    .chevron {\n      flex-shrink: 0;\n      color: var(--cg-color-input-icon-default);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .chevron.open { transform: rotate(180deg); }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\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-100);\n      box-shadow: var(--cg-elevation-3);\n      max-height: 280px;\n      overflow-y: auto;\n      z-index: var(--cg-z-index-400);\n      padding: var(--cg-spacing-6);\n      animation: dropIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    @keyframes dropIn {\n      from { opacity: 0; transform: scale(0.96) translateY(calc(var(--cg-spacing-4) * -1)); }\n      to { opacity: 1; transform: scale(1) translateY(0); }\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option:hover, .option.active {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .option .match {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .input-wrap { border-radius: 0; }\n    :host([rounded=\"sm\"]) .input-wrap { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .input-wrap { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .input-wrap { border-radius: var(--cg-component-input-radius); }\n    :host([rounded=\"full\"]) .input-wrap { border-radius: var(--cg-border-radius-full); }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .dropdown { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) options: AutocompleteOption[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() value = '';\n  @property() placeholder = '';\n  @property() label = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean }) clearable = false;\n\n  @state() private _query = '';\n  @state() private _open = false;\n  @state() private _focused = false;\n  @state() private _activeIndex = -1;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  // Per-instance id prefix so aria-controls / aria-activedescendant references\n  // never collide across multiple autocompletes on the same page.\n  private _uid = `cg-ac-${Math.random().toString(36).slice(2, 9)}`;\n\n  private get _filtered(): AutocompleteOption[] {\n    const q = this._query.toLowerCase();\n    if (!q) return this.options;\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _onInput(e: Event) {\n    this._query = (e.target as HTMLInputElement).value;\n    this._open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-input', { detail: { query: this._query }, bubbles: true, composed: true }));\n  }\n\n  private _select(opt: AutocompleteOption) {\n    this.value = opt.value;\n    this._query = opt.label;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: opt.value, label: opt.label }, bubbles: true, composed: true }));\n  }\n\n  private async _onKeyDown(e: KeyboardEvent) {\n    const list = this._filtered;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._open = true;\n      this._activeIndex = Math.min(this._activeIndex + 1, list.length - 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._open = true;\n      this._activeIndex = Math.max(this._activeIndex - 1, 0);\n    } else if (e.key === 'Enter' && this._activeIndex >= 0 && list[this._activeIndex]) {\n      e.preventDefault();\n      this._select(list[this._activeIndex]!);\n      return;\n    } else if (e.key === 'Escape') {\n      this._open = false;\n      return;\n    } else {\n      return;\n    }\n    // Keep the active option visible when navigating past the scroll window.\n    await this.updateComplete;\n    this.renderRoot.querySelector('.option.active')?.scrollIntoView({ block: 'nearest' });\n  }\n\n  private _clear() {\n    this.value = '';\n    this._query = '';\n    this._input.focus();\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: '', label: '' }, bubbles: true, composed: true }));\n  }\n\n  private _highlightMatch(label: string): unknown {\n    const q = this._query.toLowerCase();\n    const idx = label.toLowerCase().indexOf(q);\n    if (idx < 0 || !q) return label;\n    const before = label.slice(0, idx);\n    const match = label.slice(idx, idx + q.length);\n    const after = label.slice(idx + q.length);\n    return html`${before}<span class=\"match\">${match}</span>${after}`;\n  }\n\n  override render() {\n    const filtered = this._filtered;\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div class=\"input-wrap ${this._focused ? 'focused' : ''} ${this.disabled ? 'disabled' : ''}\">\n        <input\n          .value=${this._query}\n          placeholder=${this.placeholder || nothing}\n          ?disabled=${this.disabled}\n          role=\"combobox\"\n          aria-expanded=${this._open}\n          aria-autocomplete=\"list\"\n          aria-controls=${`${this._uid}-listbox`}\n          aria-activedescendant=${this._open && this._activeIndex >= 0 ? `${this._uid}-opt-${this._activeIndex}` : nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          aria-label=${this.label || 'Autocomplete'}\n          @input=${this._onInput}\n          @keydown=${this._onKeyDown}\n          @focus=${() => { this._focused = true; this._open = true; }}\n          @blur=${() => { this._focused = false; this._open = false; }}\n        />\n        ${this.clearable && this._query ? html`\n          <button class=\"clear\" @mousedown=${(e: Event) => e.preventDefault()} @click=${this._clear} aria-label=\"Clear\">\n            <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n          </button>\n        ` : nothing}\n        <span class=\"chevron ${this._open ? 'open' : ''}\">\n          <cg-icon name=\"chevron-down\" size=\"sm\"></cg-icon>\n        </span>\n      </div>\n      ${this._open ? html`\n        <div class=\"dropdown\" role=\"listbox\" id=${`${this._uid}-listbox`}>\n          ${filtered.length === 0 ? html`<div class=\"empty\">No results found</div>` :\n            filtered.map((opt, i) => html`\n              <div class=\"option ${i === this._activeIndex ? 'active' : ''}\"\n                role=\"option\"\n                id=${`${this._uid}-opt-${i}`}\n                aria-selected=${i === this._activeIndex}\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @click=${() => this._select(opt)}>\n                ${opt.icon ? html`<cg-icon name=\"${opt.icon}\" size=\"sm\"></cg-icon>` : nothing}\n                <span>${this._highlightMatch(opt.label)}</span>\n              </div>\n            `)}\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-autocomplete': CgAutocomplete;\n  }\n}\n"],"names":["CgAutocomplete","LitElement","q","o","opt","list","label","idx","before","match","after","html","filtered","nothing","e","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6FnB;IAES,GAAG,SAAM;IACT,GAAG,SAAM;IACT,IAAI,SAAM;IACO,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAC7D,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAQ;IACnC,YAAY,SAAM;IAEnD,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIN,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"cg-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6FnB;IAES,GAAG,SAAM;IACT,GAAG,SAAM;IACT,IAAI,SAAM;IACO,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAC7D,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAQ;IACnC,YAAY,SAAM;IAEnD,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIN,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -1,17 +1,17 @@
-import { css as g, LitElement as d, svg as v, nothing as u, html as n } from "lit";
-import { property as r, state as p, customElement as f } from "lit/decorators.js";
-import { a as m, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var z = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (s, e, c, i) => {
-  for (var o = i > 1 ? void 0 : i ? x(e, c) : e, l = s.length - 1, h; l >= 0; l--)
-    (h = s[l]) && (o = (i ? h(e, c, o) : h(o)) || o);
-  return i && o && z(e, c, o), o;
+import { css as g, LitElement as d, svg as v, nothing as u, html as l } from "lit";
+import { property as o, state as p, customElement as f } from "lit/decorators.js";
+import { a as m, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+var z = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, r, c, i) => {
+  for (var s = i > 1 ? void 0 : i ? x(r, c) : r, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (s = (i ? h(r, c, s) : h(s)) || s);
+  return i && s && z(r, c, s), s;
 };
 let t = class extends d {
   constructor() {
     super(...arguments), this.src = "", this.alt = "", this.name = "", this.size = "md", this.shape = "circle", this.status = null, this.type = null, this.fallbackIcon = "", this._imgFailed = !1;
   }
-  _getInitials(s) {
-    return s ? s.trim().split(/\s+/).slice(0, 2).map((e) => e[0] || "").join("").toUpperCase() : "";
+  _getInitials(e) {
+    return e ? e.trim().split(/\s+/).slice(0, 2).map((r) => r[0] || "").join("").toUpperCase() : "";
   }
   _onError() {
     this._imgFailed = !0;
@@ -20,24 +20,24 @@ let t = class extends d {
     this._imgFailed = !1;
   }
   render() {
-    const s = this._getInitials(this.name), e = this.src && !this._imgFailed, c = this.alt || this.name || "Avatar", i = v`
+    const e = this._getInitials(this.name), r = this.src && !this._imgFailed, c = this.type ? `${this.type} ` : "", i = this.status ? `, ${this.status}` : "", s = `${c}${this.alt || this.name || "Avatar"}${i}`, n = v`
       <svg class="fallback-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
         <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
         <circle cx="12" cy="7" r="4"></circle>
       </svg>
     `;
-    return n`
-      <div class="avatar" role="img" aria-label=${c}>
-        ${e ? n`
+    return l`
+      <div class="avatar" role="img" aria-label=${s}>
+        ${r ? l`
           <img
             src=${this.src}
             alt=${this.alt || this.name || ""}
             @error=${this._onError}
             @load=${this._onLoad}
           />
-        ` : s ? n`<span class="initials">${s}</span>` : n`<slot name="fallback">${i}</slot>`}
+        ` : e ? l`<span class="initials">${e}</span>` : l`<slot name="fallback">${n}</slot>`}
       </div>
-      ${this.status ? n`<span class="status ${this.status}" aria-hidden="true"></span>` : u}
+      ${this.status ? l`<span class="status ${this.status}" aria-hidden="true"></span>` : u}
     `;
   }
 };
@@ -57,7 +57,7 @@ t.styles = [m, b, g`
       align-items: center;
       justify-content: center;
       background: var(--cg-color-action-secondary-background-default);
-      color: var(--cg-color-surface-container-text);
+      color: var(--cg-color-action-secondary-text-default);
       overflow: hidden;
       border-radius: var(--cg-border-radius-full);
       font-weight: var(--cg-font-weight-semibold);
@@ -136,28 +136,28 @@ t.styles = [m, b, g`
     }
   `];
 a([
-  r()
+  o()
 ], t.prototype, "src", 2);
 a([
-  r()
+  o()
 ], t.prototype, "alt", 2);
 a([
-  r()
+  o()
 ], t.prototype, "name", 2);
 a([
-  r({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "size", 2);
 a([
-  r({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "shape", 2);
 a([
-  r({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "status", 2);
 a([
-  r({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "type", 2);
 a([
-  r({ attribute: "fallback-icon" })
+  o({ attribute: "fallback-icon" })
 ], t.prototype, "fallbackIcon", 2);
 a([
   p()