@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,12 +1,12 @@
-import { css as v, LitElement as h, html as i, nothing as o } from "lit";
+import { css as h, LitElement as v, html as i, nothing as o } from "lit";
 import { property as c, customElement as u } from "lit/decorators.js";
-import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as p, r as f } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
   for (var n = l > 1 ? void 0 : l ? m(t, r) : t, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (n = (l ? g(t, r, n) : g(n)) || n);
   return l && n && b(t, r, n), n;
 };
-let a = class extends h {
+let a = class extends v {
   constructor() {
     super(...arguments), this.items = [], this.variant = "plain", this.dividers = !1, this.hoverable = !0, this.clickable = !1, this.contained = !1, this.emptyText = "No items";
   }
@@ -55,13 +55,13 @@ let a = class extends h {
         <div class="right">
           ${e.meta ? i`<span class="meta">${e.meta}</span>` : o}
           ${e.actionLabel ? i`<button class="action-btn" @click=${(r) => this._handleAction(r, e, t)}>${e.actionLabel}</button>` : o}
-          ${this.clickable ? i`<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>` : o}
+          ${this.clickable ? i`<svg class="chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>` : o}
         </div>
       </div>
     `)}</div>`;
   }
 };
-a.styles = [p, f, v`
+a.styles = [p, f, h`
 
     /* ── Empty state ── */
     .empty {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-list.js","sources":["../../../src/components/cg-list/cg-list.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-list. */\nexport interface ListItem {\n  title: string;\n  subtitle?: string;\n  image?: string;\n  icon?: string;\n  action?: string;\n  actionLabel?: string;\n  meta?: string;\n}\n\n/**\n * @element cg-list\n * Data list with bullet, number, image, or plain variants.\n *\n * @fires {CustomEvent<{item: ListItem, index: number}>} cg-list-click - When a clickable item is clicked\n * @fires {CustomEvent<{item: ListItem, index: number, action: string}>} cg-list-action - When an action button is clicked\n */\n@customElement('cg-list')\nexport class CgList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Empty state ── */\n    .empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .empty-icon {\n      width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      opacity: 0.3;\n    }\n    .empty-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Item ── */\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      min-height: var(--cg-spacing-48);\n    }\n\n    /* ── Contained variant — list shell.\n       Concentric corners: outer radius = inner item radius + padding\n       (20 = 12 + 8). Card-radius (28) was too big for a list shell;\n       radius-150 fits items snugly without visible corner offset. */\n    :host([contained]) {\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-8);\n      background: var(--cg-color-surface-cards-background);\n    }\n\n    /* role=list wrapper — flush by default. Only [contained] mode adds\n       a small gap so items read as separated pills inside the shell\n       (which makes the container padding visible). [dividers] mode\n       collapses the gap so the lines themselves are the separator. */\n    [role=\"list\"] {\n      display: flex;\n      flex-direction: column;\n    }\n    :host([contained]) [role=\"list\"] { gap: var(--cg-spacing-2); }\n    :host([contained][dividers]) [role=\"list\"] { gap: 0; }\n\n    /* ── Dividers — items keep their own horizontal padding; the divider\n       is absolutely positioned so it spans the item's full width\n       regardless of item padding. */\n    :host([dividers]) .item {\n      border-radius: 0;\n      position: relative;\n    }\n    :host([dividers]) .item::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n    }\n    :host([dividers]) .item:last-child::after { display: none; }\n\n    /* Inside a [contained] shell, the divider's base-divider colour\n       (gray-800 in dark) sits too close to the card-bg (gray-900) to be\n       visible. surface-cards-border is the high-contrast option meant\n       for hairlines on card surfaces. */\n    :host([contained][dividers]) .item::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* Inset dividers when leading element present */\n    :host([dividers][variant=\"image\"]) .item::after,\n    :host([dividers][variant=\"number\"]) .item::after,\n    :host([dividers][variant=\"bullet\"]) .item::after {\n      left: var(--cg-spacing-48);\n    }\n\n    /* ── Contained without dividers — items get a visible thin border\n       so they read as separate tiles inside the shell. Bg can't help\n       here: surface-cards-background and surface-container-background\n       resolve to the same color, so a bg change is invisible. The\n       border + the role=list gap (2px) make the shell padding obvious. */\n    :host([contained]:not([dividers])) .item {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Hover — uses theme-aware tertiary hover token (lightens in dark,\n       darkens in light). overlay-dark-subtle was wrong in dark mode where\n       a darken-overlay on already-dark surfaces makes hover less visible. */\n    :host([hoverable]) .item:hover,\n    :host([clickable]) .item:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    :host([clickable]) .item {\n      cursor: pointer;\n    }\n    :host([clickable]) .item:active {\n      background: var(--cg-overlay-accent-subtle);\n    }\n    :host([clickable]) .item:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n      border-radius: var(--cg-border-radius-100);\n    }\n\n    /* ── Number indicator — subtle, not heavy ── */\n    .num {\n      width: var(--cg-spacing-24);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Bullet ── */\n    .bullet {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      margin: 0 var(--cg-spacing-4);\n    }\n\n    /* ── Avatar ── */\n    .avatar {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      object-fit: cover;\n      flex-shrink: 0;\n      background: var(--cg-color-surface-container-background);\n    }\n\n    /* ── Body ── */\n    .body {\n      flex: 1;\n      min-width: 0;\n    }\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .subtitle {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Right side — actions appear on hover ── */\n    .right {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n    .meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      white-space: nowrap;\n    }\n\n    .action-btn {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-accent-text);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      white-space: nowrap;\n      background: none;\n      border: none;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      font-family: inherit;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Reveal-on-hover only on devices that support hover. Touch devices\n       always show the action button — without this guard the action would\n       be invisible on phones/tablets (no hover event fires). */\n    @media (hover: hover) {\n      .action-btn { opacity: 0; }\n      .item:hover .action-btn { opacity: 1; }\n    }\n    .action-btn:hover { background: var(--cg-overlay-accent-light); }\n    .action-btn:focus-visible {\n      opacity: 1;\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      opacity: 0.5;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item:hover .chevron { opacity: 1; }\n  `];\n\n  @property({ type: Array }) items: ListItem[] = [];\n  @property({ reflect: true }) variant: 'number' | 'bullet' | 'image' | 'plain' = 'plain';\n  @property({ type: Boolean, reflect: true }) dividers = false;\n  @property({ type: Boolean, reflect: true }) hoverable = true;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) contained = false;\n  @property() emptyText = 'No items';\n\n  private _handleItemClick(item: ListItem, index: number) {\n    if (!this.clickable) return;\n    this.dispatchEvent(new CustomEvent('cg-list-click', {\n      detail: { item, index },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleAction(e: Event, item: ListItem, index: number) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('cg-list-action', {\n      detail: { item, index, action: item.action },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (this.items.length === 0) {\n      return html`\n        <div class=\"empty\">\n          <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n            <path d=\"M8 8h8M8 12h5M8 16h3\"></path>\n          </svg>\n          <span class=\"empty-text\">${this.emptyText}</span>\n        </div>\n      `;\n    }\n\n    return html`<div role=\"list\">${this.items.map((item, i) => html`\n      <div\n        class=\"item\"\n        role=\"listitem\"\n        tabindex=${this.clickable ? '0' : nothing}\n        @click=${() => this._handleItemClick(item, i)}\n        @keydown=${(e: KeyboardEvent) => { if (this.clickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleItemClick(item, i); } }}\n      >\n        ${this.variant === 'number' ? html`<span class=\"num\">${i + 1}</span>` : nothing}\n        ${this.variant === 'bullet' ? html`<span class=\"bullet\"></span>` : nothing}\n        ${this.variant === 'image' && item.image ? html`<img class=\"avatar\" src=${item.image} alt=\"\" loading=\"lazy\" />` : nothing}\n\n        <div class=\"body\">\n          <div class=\"title\">${item.title}</div>\n          ${item.subtitle ? html`<div class=\"subtitle\">${item.subtitle}</div>` : nothing}\n        </div>\n\n        <div class=\"right\">\n          ${item.meta ? html`<span class=\"meta\">${item.meta}</span>` : nothing}\n          ${item.actionLabel ? html`<button class=\"action-btn\" @click=${(e: Event) => this._handleAction(e, item, i)}>${item.actionLabel}</button>` : nothing}\n          ${this.clickable ? html`<svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>` : nothing}\n        </div>\n      </div>\n    `)}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-list': CgList; }\n}\n"],"names":["CgList","LitElement","item","index","html","i","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-list.js","sources":["../../../src/components/cg-list/cg-list.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-list. */\nexport interface ListItem {\n  title: string;\n  subtitle?: string;\n  image?: string;\n  icon?: string;\n  action?: string;\n  actionLabel?: string;\n  meta?: string;\n}\n\n/**\n * @element cg-list\n * Data list with bullet, number, image, or plain variants.\n *\n * @fires {CustomEvent<{item: ListItem, index: number}>} cg-list-click - When a clickable item is clicked\n * @fires {CustomEvent<{item: ListItem, index: number, action: string}>} cg-list-action - When an action button is clicked\n */\n@customElement('cg-list')\nexport class CgList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Empty state ── */\n    .empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .empty-icon {\n      width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      opacity: 0.3;\n    }\n    .empty-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Item ── */\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      min-height: var(--cg-spacing-48);\n    }\n\n    /* ── Contained variant — list shell.\n       Concentric corners: outer radius = inner item radius + padding\n       (20 = 12 + 8). Card-radius (28) was too big for a list shell;\n       radius-150 fits items snugly without visible corner offset. */\n    :host([contained]) {\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-8);\n      background: var(--cg-color-surface-cards-background);\n    }\n\n    /* role=list wrapper — flush by default. Only [contained] mode adds\n       a small gap so items read as separated pills inside the shell\n       (which makes the container padding visible). [dividers] mode\n       collapses the gap so the lines themselves are the separator. */\n    [role=\"list\"] {\n      display: flex;\n      flex-direction: column;\n    }\n    :host([contained]) [role=\"list\"] { gap: var(--cg-spacing-2); }\n    :host([contained][dividers]) [role=\"list\"] { gap: 0; }\n\n    /* ── Dividers — items keep their own horizontal padding; the divider\n       is absolutely positioned so it spans the item's full width\n       regardless of item padding. */\n    :host([dividers]) .item {\n      border-radius: 0;\n      position: relative;\n    }\n    :host([dividers]) .item::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n    }\n    :host([dividers]) .item:last-child::after { display: none; }\n\n    /* Inside a [contained] shell, the divider's base-divider colour\n       (gray-800 in dark) sits too close to the card-bg (gray-900) to be\n       visible. surface-cards-border is the high-contrast option meant\n       for hairlines on card surfaces. */\n    :host([contained][dividers]) .item::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* Inset dividers when leading element present */\n    :host([dividers][variant=\"image\"]) .item::after,\n    :host([dividers][variant=\"number\"]) .item::after,\n    :host([dividers][variant=\"bullet\"]) .item::after {\n      left: var(--cg-spacing-48);\n    }\n\n    /* ── Contained without dividers — items get a visible thin border\n       so they read as separate tiles inside the shell. Bg can't help\n       here: surface-cards-background and surface-container-background\n       resolve to the same color, so a bg change is invisible. The\n       border + the role=list gap (2px) make the shell padding obvious. */\n    :host([contained]:not([dividers])) .item {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Hover — uses theme-aware tertiary hover token (lightens in dark,\n       darkens in light). overlay-dark-subtle was wrong in dark mode where\n       a darken-overlay on already-dark surfaces makes hover less visible. */\n    :host([hoverable]) .item:hover,\n    :host([clickable]) .item:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    :host([clickable]) .item {\n      cursor: pointer;\n    }\n    :host([clickable]) .item:active {\n      background: var(--cg-overlay-accent-subtle);\n    }\n    :host([clickable]) .item:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n      border-radius: var(--cg-border-radius-100);\n    }\n\n    /* ── Number indicator — subtle, not heavy ── */\n    .num {\n      width: var(--cg-spacing-24);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Bullet ── */\n    .bullet {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      margin: 0 var(--cg-spacing-4);\n    }\n\n    /* ── Avatar ── */\n    .avatar {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      object-fit: cover;\n      flex-shrink: 0;\n      background: var(--cg-color-surface-container-background);\n    }\n\n    /* ── Body ── */\n    .body {\n      flex: 1;\n      min-width: 0;\n    }\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .subtitle {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Right side — actions appear on hover ── */\n    .right {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n    .meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      white-space: nowrap;\n    }\n\n    .action-btn {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-accent-text);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      white-space: nowrap;\n      background: none;\n      border: none;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      font-family: inherit;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Reveal-on-hover only on devices that support hover. Touch devices\n       always show the action button — without this guard the action would\n       be invisible on phones/tablets (no hover event fires). */\n    @media (hover: hover) {\n      .action-btn { opacity: 0; }\n      .item:hover .action-btn { opacity: 1; }\n    }\n    .action-btn:hover { background: var(--cg-overlay-accent-light); }\n    .action-btn:focus-visible {\n      opacity: 1;\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      opacity: 0.5;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item:hover .chevron { opacity: 1; }\n  `];\n\n  @property({ type: Array }) items: ListItem[] = [];\n  @property({ reflect: true }) variant: 'number' | 'bullet' | 'image' | 'plain' = 'plain';\n  @property({ type: Boolean, reflect: true }) dividers = false;\n  @property({ type: Boolean, reflect: true }) hoverable = true;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) contained = false;\n  @property() emptyText = 'No items';\n\n  private _handleItemClick(item: ListItem, index: number) {\n    if (!this.clickable) return;\n    this.dispatchEvent(new CustomEvent('cg-list-click', {\n      detail: { item, index },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleAction(e: Event, item: ListItem, index: number) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('cg-list-action', {\n      detail: { item, index, action: item.action },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (this.items.length === 0) {\n      return html`\n        <div class=\"empty\">\n          <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n            <path d=\"M8 8h8M8 12h5M8 16h3\"></path>\n          </svg>\n          <span class=\"empty-text\">${this.emptyText}</span>\n        </div>\n      `;\n    }\n\n    return html`<div role=\"list\">${this.items.map((item, i) => html`\n      <div\n        class=\"item\"\n        role=\"listitem\"\n        tabindex=${this.clickable ? '0' : nothing}\n        @click=${() => this._handleItemClick(item, i)}\n        @keydown=${(e: KeyboardEvent) => { if (this.clickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleItemClick(item, i); } }}\n      >\n        ${this.variant === 'number' ? html`<span class=\"num\">${i + 1}</span>` : nothing}\n        ${this.variant === 'bullet' ? html`<span class=\"bullet\"></span>` : nothing}\n        ${this.variant === 'image' && item.image ? html`<img class=\"avatar\" src=${item.image} alt=\"\" loading=\"lazy\" />` : nothing}\n\n        <div class=\"body\">\n          <div class=\"title\">${item.title}</div>\n          ${item.subtitle ? html`<div class=\"subtitle\">${item.subtitle}</div>` : nothing}\n        </div>\n\n        <div class=\"right\">\n          ${item.meta ? html`<span class=\"meta\">${item.meta}</span>` : nothing}\n          ${item.actionLabel ? html`<button class=\"action-btn\" @click=${(e: Event) => this._handleAction(e, item, i)}>${item.actionLabel}</button>` : nothing}\n          ${this.clickable ? html`<svg class=\"chevron\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>` : nothing}\n        </div>\n      </div>\n    `)}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-list': CgList; }\n}\n"],"names":["CgList","LitElement","item","index","html","i","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-listbox.d.ts","sourceRoot":"","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,6BAA6B;AAC7B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAgHnB;IAEwB,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IACE,QAAQ,UAAS;IAChC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAW;IAC3D,KAAK,SAAM;IACX,SAAS,SAAgB;IAE5B,OAAO,CAAC,iBAAiB,CAAM;IACxC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAyDtB,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,SAAS,CAAC;KAAE;CAC7D"}
+{"version":3,"file":"cg-listbox.d.ts","sourceRoot":"","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,6BAA6B;AAC7B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAqHnB;IAEwB,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IACE,QAAQ,UAAS;IAChC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAW;IAC3D,KAAK,SAAM;IACX,SAAS,SAAgB;IAE5B,OAAO,CAAC,iBAAiB,CAAM;IACxC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAyDtB,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,SAAS,CAAC;KAAE;CAC7D"}

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

@@ -1,12 +1,12 @@
-import { css as g, LitElement as p, html as d, nothing as h } from "lit";
-import { property as c, state as u, customElement as v } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
-  for (var r = o > 1 ? void 0 : o ? y(i, t) : i, a = e.length - 1, l; a >= 0; a--)
-    (l = e[a]) && (r = (o ? l(i, t, r) : l(r)) || r);
-  return o && r && m(i, t, r), r;
+import { css as g, LitElement as p, html as h, nothing as c } from "lit";
+import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { h as f, r as b, g as m } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(i, t) : i, s = e.length - 1, l; s >= 0; s--)
+    (l = e[s]) && (r = (o ? l(i, t, r) : l(r)) || r);
+  return o && r && y(i, t, r), r;
 };
-let s = class extends p {
+let a = class extends p {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.multiple = !1, this.checkPosition = "right", this.label = "", this.emptyText = "No options", this._highlightedIndex = -1, this._typeBuffer = "", this._typeTimer = 0;
   }
@@ -31,8 +31,8 @@ let s = class extends p {
     const t = this.options;
     let o = -1;
     if (this._highlightedIndex >= 0) {
-      const a = t[this._highlightedIndex];
-      a && (o = i.indexOf(a));
+      const s = t[this._highlightedIndex];
+      s && (o = i.indexOf(s));
     }
     let r = o;
     switch (e.key) {
@@ -57,14 +57,14 @@ let s = class extends p {
           this._typeBuffer += e.key.toLowerCase(), clearTimeout(this._typeTimer), this._typeTimer = window.setTimeout(() => {
             this._typeBuffer = "";
           }, 500);
-          const a = i.findIndex((l) => l.label.toLowerCase().startsWith(this._typeBuffer));
-          a >= 0 && (r = a);
+          const s = i.findIndex((l) => l.label.toLowerCase().startsWith(this._typeBuffer));
+          s >= 0 && (r = s);
         }
         return;
     }
     if (r >= 0 && r < i.length) {
-      const a = i[r];
-      this._highlightedIndex = t.indexOf(a), this._scrollToHighlighted();
+      const s = i[r];
+      this._highlightedIndex = t.indexOf(s), this._scrollToHighlighted();
     }
   }
   _scrollToHighlighted() {
@@ -74,28 +74,29 @@ let s = class extends p {
   }
   render() {
     if (this.options.length === 0)
-      return d`<div class="empty">${this.emptyText}</div>`;
+      return h`<div class="empty">${this.emptyText}</div>`;
     const e = this._getSelected();
     let i = "";
-    return d`
+    return h`
       <div
         class="listbox"
         role="listbox"
-        aria-label=${this.label || h}
-        aria-multiselectable=${this.multiple ? "true" : h}
+        aria-label=${this.label || c}
+        aria-multiselectable=${this.multiple ? "true" : c}
+        aria-activedescendant=${this._highlightedIndex >= 0 && this.options[this._highlightedIndex] ? `opt-${this.options[this._highlightedIndex].value}` : c}
         tabindex="0"
         @keydown=${this._handleKeydown}
       >
         ${this.options.map((t, o) => {
-      const r = e.has(t.value), a = o === this._highlightedIndex, l = t.group && t.group !== i ? d`<div class="group-header" role="presentation">${i = t.group, t.group}</div>` : (t.group && (i = t.group), h);
-      return d`
+      const r = e.has(t.value), s = o === this._highlightedIndex, l = t.group && t.group !== i ? h`<div class="group-header" role="presentation">${i = t.group, t.group}</div>` : (t.group && (i = t.group), c);
+      return h`
             ${l}
             <div
-              class="option ${r ? "selected" : ""} ${a ? "highlighted" : ""} ${t.disabled ? "disabled" : ""}"
+              class="option ${r ? "selected" : ""} ${s ? "highlighted" : ""} ${t.disabled ? "disabled" : ""}"
               role="option"
               id="opt-${t.value}"
               aria-selected=${r}
-              aria-disabled=${t.disabled ? "true" : h}
+              aria-disabled=${t.disabled ? "true" : c}
               @click=${() => this._select(t)}
               @mouseenter=${() => {
         this._highlightedIndex = o;
@@ -103,7 +104,7 @@ let s = class extends p {
             >
               <span class="option-body">
                 <span class="option-label">${t.label}</span>
-                ${t.description ? d`<span class="option-desc">${t.description}</span>` : h}
+                ${t.description ? h`<span class="option-desc">${t.description}</span>` : c}
               </span>
               <span class="check" aria-hidden="true">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>
@@ -115,7 +116,7 @@ let s = class extends p {
     `;
   }
 };
-s.styles = [f, b, g`
+a.styles = [f, b, g`
     :host {
       display: block;
       width: 100%;
@@ -131,6 +132,11 @@ s.styles = [f, b, g`
       overflow-y: auto;
       max-height: 320px;
     }
+    /* The listbox itself is the focusable element (tabindex=0); without this
+       a keyboard user tabbing in got no visible focus indicator (WCAG 2.4.7). */
+    .listbox:focus-visible {
+      ${m}
+    }
 
     .option {
       display: flex;
@@ -229,30 +235,30 @@ s.styles = [f, b, g`
     }
   `];
 n([
-  c({ type: Array })
-], s.prototype, "options", 2);
+  d({ type: Array })
+], a.prototype, "options", 2);
 n([
-  c()
-], s.prototype, "value", 2);
+  d()
+], a.prototype, "value", 2);
 n([
-  c({ type: Boolean, reflect: !0 })
-], s.prototype, "multiple", 2);
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "multiple", 2);
 n([
-  c({ reflect: !0 })
-], s.prototype, "checkPosition", 2);
+  d({ reflect: !0 })
+], a.prototype, "checkPosition", 2);
 n([
-  c()
-], s.prototype, "label", 2);
+  d()
+], a.prototype, "label", 2);
 n([
-  c()
-], s.prototype, "emptyText", 2);
+  d()
+], a.prototype, "emptyText", 2);
 n([
   u()
-], s.prototype, "_highlightedIndex", 2);
-s = n([
+], a.prototype, "_highlightedIndex", 2);
+a = n([
   v("cg-listbox")
-], s);
+], a);
 export {
-  s as CgListbox
+  a as CgListbox
 };
 //# sourceMappingURL=cg-listbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-listbox.js","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Option for cg-listbox. */\nexport interface ListboxOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  group?: string;\n}\n\n/**\n * <cg-listbox> — Selectable option list with single or multi-select, keyboard nav, and type-ahead.\n *\n * @fires {CustomEvent<{value: string | string[]}>} cg-change - When selection changes\n */\n@customElement('cg-listbox')\nexport class CgListbox extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    .listbox {\n      padding: var(--cg-spacing-6);\n      overflow-y: auto;\n      max-height: 320px;\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      border: var(--cg-border-width-50) solid transparent;\n      min-height: 44px;\n    }\n\n    .option.highlighted {\n      background: var(--cg-overlay-dark-subtle);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    .option.selected {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .option.disabled {\n      opacity: 0.45;\n      pointer-events: none;\n      cursor: not-allowed;\n    }\n\n    .option:active:not(.disabled) {\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* Checkmark tick */\n    .check {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option.selected .check {\n      opacity: 1;\n    }\n\n    /* Right-aligned by default */\n    :host(:not([checkPosition=\"left\"])) .check {\n      margin-left: auto;\n    }\n\n    /* Left position */\n    :host([checkPosition=\"left\"]) .check {\n      order: -1;\n      margin-left: 0;\n    }\n\n    .option-body {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-label {\n      line-height: var(--cg-line-height-snug);\n    }\n    .option-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Group header */\n    .group-header {\n      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      pointer-events: none;\n    }\n    .group-header:not(:first-child) {\n      margin-top: var(--cg-spacing-4);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding-top: var(--cg-spacing-12);\n    }\n\n    /* Empty */\n    .empty {\n      padding: var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) options: ListboxOption[] = [];\n  @property() value: string | string[] = '';\n  @property({ type: Boolean, reflect: true }) multiple = false;\n  @property({ reflect: true }) checkPosition: 'left' | 'right' = 'right';\n  @property() label = '';\n  @property() emptyText = 'No options';\n\n  @state() private _highlightedIndex = -1;\n  private _typeBuffer = '';\n  private _typeTimer = 0;\n\n  private _getSelected(): Set<string> {\n    if (Array.isArray(this.value)) return new Set(this.value);\n    return this.value ? new Set([this.value]) : new Set();\n  }\n\n  private _enabledOptions(): ListboxOption[] {\n    return this.options.filter(o => !o.disabled);\n  }\n\n  private _select(opt: ListboxOption) {\n    if (opt.disabled) return;\n    const selected = this._getSelected();\n\n    if (this.multiple) {\n      if (selected.has(opt.value)) {\n        selected.delete(opt.value);\n      } else {\n        selected.add(opt.value);\n      }\n      this.value = [...selected];\n    } else {\n      this.value = opt.value;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabled = this._enabledOptions();\n    if (enabled.length === 0) return;\n\n    const allOptions = this.options;\n    let currentEnabledIdx = -1;\n    if (this._highlightedIndex >= 0) {\n      const highlightedOpt = allOptions[this._highlightedIndex];\n      if (highlightedOpt) currentEnabledIdx = enabled.indexOf(highlightedOpt);\n    }\n\n    let nextEnabledIdx = currentEnabledIdx;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextEnabledIdx = Math.min(currentEnabledIdx + 1, enabled.length - 1);\n        if (currentEnabledIdx === -1) nextEnabledIdx = 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextEnabledIdx = Math.max(currentEnabledIdx - 1, 0);\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextEnabledIdx = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextEnabledIdx = enabled.length - 1;\n        break;\n      case ' ':\n      case 'Enter':\n        e.preventDefault();\n        if (this._highlightedIndex >= 0 && allOptions[this._highlightedIndex]) {\n          this._select(allOptions[this._highlightedIndex]!);\n        }\n        return;\n      default:\n        // Type-ahead\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          this._typeBuffer += e.key.toLowerCase();\n          clearTimeout(this._typeTimer);\n          this._typeTimer = window.setTimeout(() => { this._typeBuffer = ''; }, 500);\n          const match = enabled.findIndex(o => o.label.toLowerCase().startsWith(this._typeBuffer));\n          if (match >= 0) nextEnabledIdx = match;\n        }\n        return;\n    }\n\n    if (nextEnabledIdx >= 0 && nextEnabledIdx < enabled.length) {\n      const nextOpt = enabled[nextEnabledIdx]!;\n      this._highlightedIndex = allOptions.indexOf(nextOpt);\n      this._scrollToHighlighted();\n    }\n  }\n\n  private _scrollToHighlighted() {\n    requestAnimationFrame(() => {\n      const el = this.shadowRoot?.querySelector('.option.highlighted') as HTMLElement | null;\n      el?.scrollIntoView({ block: 'nearest' });\n    });\n  }\n\n  override render() {\n    if (this.options.length === 0) {\n      return html`<div class=\"empty\">${this.emptyText}</div>`;\n    }\n\n    const selected = this._getSelected();\n    let lastGroup = '';\n\n    return html`\n      <div\n        class=\"listbox\"\n        role=\"listbox\"\n        aria-label=${this.label || nothing}\n        aria-multiselectable=${this.multiple ? 'true' : nothing}\n        tabindex=\"0\"\n        @keydown=${this._handleKeydown}\n      >\n        ${this.options.map((opt, i) => {\n          const isSelected = selected.has(opt.value);\n          const isHighlighted = i === this._highlightedIndex;\n          const groupHeader = opt.group && opt.group !== lastGroup\n            ? html`<div class=\"group-header\" role=\"presentation\">${(lastGroup = opt.group, opt.group)}</div>`\n            : (opt.group && (lastGroup = opt.group), nothing);\n\n          return html`\n            ${groupHeader}\n            <div\n              class=\"option ${isSelected ? 'selected' : ''} ${isHighlighted ? 'highlighted' : ''} ${opt.disabled ? 'disabled' : ''}\"\n              role=\"option\"\n              id=\"opt-${opt.value}\"\n              aria-selected=${isSelected}\n              aria-disabled=${opt.disabled ? 'true' : nothing}\n              @click=${() => this._select(opt)}\n              @mouseenter=${() => { this._highlightedIndex = i; }}\n            >\n              <span class=\"option-body\">\n                <span class=\"option-label\">${opt.label}</span>\n                ${opt.description ? html`<span class=\"option-desc\">${opt.description}</span>` : nothing}\n              </span>\n              <span class=\"check\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"></path></svg>\n              </span>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-listbox': CgListbox; }\n}\n"],"names":["CgListbox","LitElement","o","opt","selected","enabled","allOptions","currentEnabledIdx","highlightedOpt","nextEnabledIdx","match","nextOpt","html","lastGroup","nothing","i","isSelected","isHighlighted","groupHeader","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmHsB,KAAA,UAA2B,CAAA,GAC1C,KAAA,QAA2B,IACK,KAAA,WAAW,IAC1B,KAAA,gBAAkC,SACnD,KAAA,QAAQ,IACR,KAAA,YAAY,cAEf,KAAQ,oBAAoB,IACrC,KAAQ,cAAc,IACtB,KAAQ,aAAa;AAAA,EAAA;AAAA,EAEb,eAA4B;AAClC,WAAI,MAAM,QAAQ,KAAK,KAAK,IAAU,IAAI,IAAI,KAAK,KAAK,IACjD,KAAK,QAAQ,oBAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,oBAAI,IAAA;AAAA,EAClD;AAAA,EAEQ,kBAAmC;AACzC,WAAO,KAAK,QAAQ,OAAO,CAAAC,MAAK,CAACA,EAAE,QAAQ;AAAA,EAC7C;AAAA,EAEQ,QAAQC,GAAoB;AAClC,QAAIA,EAAI,SAAU;AAClB,UAAMC,IAAW,KAAK,aAAA;AAEtB,IAAI,KAAK,YACHA,EAAS,IAAID,EAAI,KAAK,IACxBC,EAAS,OAAOD,EAAI,KAAK,IAEzBC,EAAS,IAAID,EAAI,KAAK,GAExB,KAAK,QAAQ,CAAC,GAAGC,CAAQ,KAEzB,KAAK,QAAQD,EAAI,OAGnB,KAAK,cAAc,IAAI,YAAY,aAAa;AAAA,MAC9C,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAe,GAAkB;AACvC,UAAME,IAAU,KAAK,gBAAA;AACrB,QAAIA,EAAQ,WAAW,EAAG;AAE1B,UAAMC,IAAa,KAAK;AACxB,QAAIC,IAAoB;AACxB,QAAI,KAAK,qBAAqB,GAAG;AAC/B,YAAMC,IAAiBF,EAAW,KAAK,iBAAiB;AACxD,MAAIE,MAAgBD,IAAoBF,EAAQ,QAAQG,CAAc;AAAA,IACxE;AAEA,QAAIC,IAAiBF;AAErB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK;AACH,UAAE,eAAA,GACFE,IAAiB,KAAK,IAAIF,IAAoB,GAAGF,EAAQ,SAAS,CAAC,GAC/DE,MAAsB,OAAIE,IAAiB;AAC/C;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFA,IAAiB,KAAK,IAAIF,IAAoB,GAAG,CAAC;AAClD;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFE,IAAiB;AACjB;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFA,IAAiBJ,EAAQ,SAAS;AAClC;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,UAAE,eAAA,GACE,KAAK,qBAAqB,KAAKC,EAAW,KAAK,iBAAiB,KAClE,KAAK,QAAQA,EAAW,KAAK,iBAAiB,CAAE;AAElD;AAAA,MACF;AAEE,YAAI,EAAE,IAAI,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS;AAClD,eAAK,eAAe,EAAE,IAAI,YAAA,GAC1B,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAAO,WAAW,MAAM;AAAE,iBAAK,cAAc;AAAA,UAAI,GAAG,GAAG;AACzE,gBAAMI,IAAQL,EAAQ,UAAU,CAAAH,MAAKA,EAAE,MAAM,YAAA,EAAc,WAAW,KAAK,WAAW,CAAC;AACvF,UAAIQ,KAAS,MAAGD,IAAiBC;AAAA,QACnC;AACA;AAAA,IAAA;AAGJ,QAAID,KAAkB,KAAKA,IAAiBJ,EAAQ,QAAQ;AAC1D,YAAMM,IAAUN,EAAQI,CAAc;AACtC,WAAK,oBAAoBH,EAAW,QAAQK,CAAO,GACnD,KAAK,qBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,uBAAuB;AAC7B,0BAAsB,MAAM;AAE1B,MADW,KAAK,YAAY,cAAc,qBAAqB,GAC3D,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,IACzC,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,QAAQ,WAAW;AAC1B,aAAOC,uBAA0B,KAAK,SAAS;AAGjD,UAAMR,IAAW,KAAK,aAAA;AACtB,QAAIS,IAAY;AAEhB,WAAOD;AAAA;AAAA;AAAA;AAAA,qBAIU,KAAK,SAASE,CAAO;AAAA,+BACX,KAAK,WAAW,SAASA,CAAO;AAAA;AAAA,mBAE5C,KAAK,cAAc;AAAA;AAAA,UAE5B,KAAK,QAAQ,IAAI,CAACX,GAAKY,MAAM;AAC7B,YAAMC,IAAaZ,EAAS,IAAID,EAAI,KAAK,GACnCc,IAAgBF,MAAM,KAAK,mBAC3BG,IAAcf,EAAI,SAASA,EAAI,UAAUU,IAC3CD,kDAAsDC,IAAYV,EAAI,OAAOA,EAAI,KAAM,YACtFA,EAAI,UAAUU,IAAYV,EAAI,QAAQW;AAE3C,aAAOF;AAAA,cACHM,CAAW;AAAA;AAAA,8BAEKF,IAAa,aAAa,EAAE,IAAIC,IAAgB,gBAAgB,EAAE,IAAId,EAAI,WAAW,aAAa,EAAE;AAAA;AAAA,wBAE1GA,EAAI,KAAK;AAAA,8BACHa,CAAU;AAAA,8BACVb,EAAI,WAAW,SAASW,CAAO;AAAA,uBACtC,MAAM,KAAK,QAAQX,CAAG,CAAC;AAAA,4BAClB,MAAM;AAAE,aAAK,oBAAoBY;AAAA,MAAG,CAAC;AAAA;AAAA;AAAA,6CAGpBZ,EAAI,KAAK;AAAA,kBACpCA,EAAI,cAAcS,8BAAiCT,EAAI,WAAW,YAAYW,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO/F,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AA7Qad,EACK,SAAS,CAACmB,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgHnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAnHdvB,EAmHgB,WAAA,WAAA,CAAA;AACfsB,EAAA;AAAA,EAAXC,EAAA;AAAS,GApHCvB,EAoHC,WAAA,SAAA,CAAA;AACgCsB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArH/BvB,EAqHiC,WAAA,YAAA,CAAA;AACfsB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtHhBvB,EAsHkB,WAAA,iBAAA,CAAA;AACjBsB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvHCvB,EAuHC,WAAA,SAAA,CAAA;AACAsB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxHCvB,EAwHC,WAAA,aAAA,CAAA;AAEKsB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1HIxB,EA0HM,WAAA,qBAAA,CAAA;AA1HNA,IAANsB,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdzB,CAAA;"}
+{"version":3,"file":"cg-listbox.js","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, focusRingSingle } from '../../styles/index.js';\n\n/** Option for cg-listbox. */\nexport interface ListboxOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  group?: string;\n}\n\n/**\n * <cg-listbox> — Selectable option list with single or multi-select, keyboard nav, and type-ahead.\n *\n * @fires {CustomEvent<{value: string | string[]}>} cg-change - When selection changes\n */\n@customElement('cg-listbox')\nexport class CgListbox extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    .listbox {\n      padding: var(--cg-spacing-6);\n      overflow-y: auto;\n      max-height: 320px;\n    }\n    /* The listbox itself is the focusable element (tabindex=0); without this\n       a keyboard user tabbing in got no visible focus indicator (WCAG 2.4.7). */\n    .listbox:focus-visible {\n      ${focusRingSingle}\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      border: var(--cg-border-width-50) solid transparent;\n      min-height: 44px;\n    }\n\n    .option.highlighted {\n      background: var(--cg-overlay-dark-subtle);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    .option.selected {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .option.disabled {\n      opacity: 0.45;\n      pointer-events: none;\n      cursor: not-allowed;\n    }\n\n    .option:active:not(.disabled) {\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* Checkmark tick */\n    .check {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option.selected .check {\n      opacity: 1;\n    }\n\n    /* Right-aligned by default */\n    :host(:not([checkPosition=\"left\"])) .check {\n      margin-left: auto;\n    }\n\n    /* Left position */\n    :host([checkPosition=\"left\"]) .check {\n      order: -1;\n      margin-left: 0;\n    }\n\n    .option-body {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-label {\n      line-height: var(--cg-line-height-snug);\n    }\n    .option-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Group header */\n    .group-header {\n      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      pointer-events: none;\n    }\n    .group-header:not(:first-child) {\n      margin-top: var(--cg-spacing-4);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding-top: var(--cg-spacing-12);\n    }\n\n    /* Empty */\n    .empty {\n      padding: var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) options: ListboxOption[] = [];\n  @property() value: string | string[] = '';\n  @property({ type: Boolean, reflect: true }) multiple = false;\n  @property({ reflect: true }) checkPosition: 'left' | 'right' = 'right';\n  @property() label = '';\n  @property() emptyText = 'No options';\n\n  @state() private _highlightedIndex = -1;\n  private _typeBuffer = '';\n  private _typeTimer = 0;\n\n  private _getSelected(): Set<string> {\n    if (Array.isArray(this.value)) return new Set(this.value);\n    return this.value ? new Set([this.value]) : new Set();\n  }\n\n  private _enabledOptions(): ListboxOption[] {\n    return this.options.filter(o => !o.disabled);\n  }\n\n  private _select(opt: ListboxOption) {\n    if (opt.disabled) return;\n    const selected = this._getSelected();\n\n    if (this.multiple) {\n      if (selected.has(opt.value)) {\n        selected.delete(opt.value);\n      } else {\n        selected.add(opt.value);\n      }\n      this.value = [...selected];\n    } else {\n      this.value = opt.value;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabled = this._enabledOptions();\n    if (enabled.length === 0) return;\n\n    const allOptions = this.options;\n    let currentEnabledIdx = -1;\n    if (this._highlightedIndex >= 0) {\n      const highlightedOpt = allOptions[this._highlightedIndex];\n      if (highlightedOpt) currentEnabledIdx = enabled.indexOf(highlightedOpt);\n    }\n\n    let nextEnabledIdx = currentEnabledIdx;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextEnabledIdx = Math.min(currentEnabledIdx + 1, enabled.length - 1);\n        if (currentEnabledIdx === -1) nextEnabledIdx = 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextEnabledIdx = Math.max(currentEnabledIdx - 1, 0);\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextEnabledIdx = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextEnabledIdx = enabled.length - 1;\n        break;\n      case ' ':\n      case 'Enter':\n        e.preventDefault();\n        if (this._highlightedIndex >= 0 && allOptions[this._highlightedIndex]) {\n          this._select(allOptions[this._highlightedIndex]!);\n        }\n        return;\n      default:\n        // Type-ahead\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          this._typeBuffer += e.key.toLowerCase();\n          clearTimeout(this._typeTimer);\n          this._typeTimer = window.setTimeout(() => { this._typeBuffer = ''; }, 500);\n          const match = enabled.findIndex(o => o.label.toLowerCase().startsWith(this._typeBuffer));\n          if (match >= 0) nextEnabledIdx = match;\n        }\n        return;\n    }\n\n    if (nextEnabledIdx >= 0 && nextEnabledIdx < enabled.length) {\n      const nextOpt = enabled[nextEnabledIdx]!;\n      this._highlightedIndex = allOptions.indexOf(nextOpt);\n      this._scrollToHighlighted();\n    }\n  }\n\n  private _scrollToHighlighted() {\n    requestAnimationFrame(() => {\n      const el = this.shadowRoot?.querySelector('.option.highlighted') as HTMLElement | null;\n      el?.scrollIntoView({ block: 'nearest' });\n    });\n  }\n\n  override render() {\n    if (this.options.length === 0) {\n      return html`<div class=\"empty\">${this.emptyText}</div>`;\n    }\n\n    const selected = this._getSelected();\n    let lastGroup = '';\n\n    return html`\n      <div\n        class=\"listbox\"\n        role=\"listbox\"\n        aria-label=${this.label || nothing}\n        aria-multiselectable=${this.multiple ? 'true' : nothing}\n        aria-activedescendant=${this._highlightedIndex >= 0 && this.options[this._highlightedIndex] ? `opt-${this.options[this._highlightedIndex]!.value}` : nothing}\n        tabindex=\"0\"\n        @keydown=${this._handleKeydown}\n      >\n        ${this.options.map((opt, i) => {\n          const isSelected = selected.has(opt.value);\n          const isHighlighted = i === this._highlightedIndex;\n          const groupHeader = opt.group && opt.group !== lastGroup\n            ? html`<div class=\"group-header\" role=\"presentation\">${(lastGroup = opt.group, opt.group)}</div>`\n            : (opt.group && (lastGroup = opt.group), nothing);\n\n          return html`\n            ${groupHeader}\n            <div\n              class=\"option ${isSelected ? 'selected' : ''} ${isHighlighted ? 'highlighted' : ''} ${opt.disabled ? 'disabled' : ''}\"\n              role=\"option\"\n              id=\"opt-${opt.value}\"\n              aria-selected=${isSelected}\n              aria-disabled=${opt.disabled ? 'true' : nothing}\n              @click=${() => this._select(opt)}\n              @mouseenter=${() => { this._highlightedIndex = i; }}\n            >\n              <span class=\"option-body\">\n                <span class=\"option-label\">${opt.label}</span>\n                ${opt.description ? html`<span class=\"option-desc\">${opt.description}</span>` : nothing}\n              </span>\n              <span class=\"check\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"></path></svg>\n              </span>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-listbox': CgListbox; }\n}\n"],"names":["CgListbox","LitElement","o","opt","selected","enabled","allOptions","currentEnabledIdx","highlightedOpt","nextEnabledIdx","match","nextOpt","html","lastGroup","nothing","i","isSelected","isHighlighted","groupHeader","hostBlock","reducedMotion","css","focusRingSingle","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwHsB,KAAA,UAA2B,CAAA,GAC1C,KAAA,QAA2B,IACK,KAAA,WAAW,IAC1B,KAAA,gBAAkC,SACnD,KAAA,QAAQ,IACR,KAAA,YAAY,cAEf,KAAQ,oBAAoB,IACrC,KAAQ,cAAc,IACtB,KAAQ,aAAa;AAAA,EAAA;AAAA,EAEb,eAA4B;AAClC,WAAI,MAAM,QAAQ,KAAK,KAAK,IAAU,IAAI,IAAI,KAAK,KAAK,IACjD,KAAK,QAAQ,oBAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,oBAAI,IAAA;AAAA,EAClD;AAAA,EAEQ,kBAAmC;AACzC,WAAO,KAAK,QAAQ,OAAO,CAAAC,MAAK,CAACA,EAAE,QAAQ;AAAA,EAC7C;AAAA,EAEQ,QAAQC,GAAoB;AAClC,QAAIA,EAAI,SAAU;AAClB,UAAMC,IAAW,KAAK,aAAA;AAEtB,IAAI,KAAK,YACHA,EAAS,IAAID,EAAI,KAAK,IACxBC,EAAS,OAAOD,EAAI,KAAK,IAEzBC,EAAS,IAAID,EAAI,KAAK,GAExB,KAAK,QAAQ,CAAC,GAAGC,CAAQ,KAEzB,KAAK,QAAQD,EAAI,OAGnB,KAAK,cAAc,IAAI,YAAY,aAAa;AAAA,MAC9C,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAe,GAAkB;AACvC,UAAME,IAAU,KAAK,gBAAA;AACrB,QAAIA,EAAQ,WAAW,EAAG;AAE1B,UAAMC,IAAa,KAAK;AACxB,QAAIC,IAAoB;AACxB,QAAI,KAAK,qBAAqB,GAAG;AAC/B,YAAMC,IAAiBF,EAAW,KAAK,iBAAiB;AACxD,MAAIE,MAAgBD,IAAoBF,EAAQ,QAAQG,CAAc;AAAA,IACxE;AAEA,QAAIC,IAAiBF;AAErB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK;AACH,UAAE,eAAA,GACFE,IAAiB,KAAK,IAAIF,IAAoB,GAAGF,EAAQ,SAAS,CAAC,GAC/DE,MAAsB,OAAIE,IAAiB;AAC/C;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFA,IAAiB,KAAK,IAAIF,IAAoB,GAAG,CAAC;AAClD;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFE,IAAiB;AACjB;AAAA,MACF,KAAK;AACH,UAAE,eAAA,GACFA,IAAiBJ,EAAQ,SAAS;AAClC;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,UAAE,eAAA,GACE,KAAK,qBAAqB,KAAKC,EAAW,KAAK,iBAAiB,KAClE,KAAK,QAAQA,EAAW,KAAK,iBAAiB,CAAE;AAElD;AAAA,MACF;AAEE,YAAI,EAAE,IAAI,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS;AAClD,eAAK,eAAe,EAAE,IAAI,YAAA,GAC1B,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAAO,WAAW,MAAM;AAAE,iBAAK,cAAc;AAAA,UAAI,GAAG,GAAG;AACzE,gBAAMI,IAAQL,EAAQ,UAAU,CAAAH,MAAKA,EAAE,MAAM,YAAA,EAAc,WAAW,KAAK,WAAW,CAAC;AACvF,UAAIQ,KAAS,MAAGD,IAAiBC;AAAA,QACnC;AACA;AAAA,IAAA;AAGJ,QAAID,KAAkB,KAAKA,IAAiBJ,EAAQ,QAAQ;AAC1D,YAAMM,IAAUN,EAAQI,CAAc;AACtC,WAAK,oBAAoBH,EAAW,QAAQK,CAAO,GACnD,KAAK,qBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,uBAAuB;AAC7B,0BAAsB,MAAM;AAE1B,MADW,KAAK,YAAY,cAAc,qBAAqB,GAC3D,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,IACzC,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,QAAQ,WAAW;AAC1B,aAAOC,uBAA0B,KAAK,SAAS;AAGjD,UAAMR,IAAW,KAAK,aAAA;AACtB,QAAIS,IAAY;AAEhB,WAAOD;AAAA;AAAA;AAAA;AAAA,qBAIU,KAAK,SAASE,CAAO;AAAA,+BACX,KAAK,WAAW,SAASA,CAAO;AAAA,gCAC/B,KAAK,qBAAqB,KAAK,KAAK,QAAQ,KAAK,iBAAiB,IAAI,OAAO,KAAK,QAAQ,KAAK,iBAAiB,EAAG,KAAK,KAAKA,CAAO;AAAA;AAAA,mBAEjJ,KAAK,cAAc;AAAA;AAAA,UAE5B,KAAK,QAAQ,IAAI,CAACX,GAAKY,MAAM;AAC7B,YAAMC,IAAaZ,EAAS,IAAID,EAAI,KAAK,GACnCc,IAAgBF,MAAM,KAAK,mBAC3BG,IAAcf,EAAI,SAASA,EAAI,UAAUU,IAC3CD,kDAAsDC,IAAYV,EAAI,OAAOA,EAAI,KAAM,YACtFA,EAAI,UAAUU,IAAYV,EAAI,QAAQW;AAE3C,aAAOF;AAAA,cACHM,CAAW;AAAA;AAAA,8BAEKF,IAAa,aAAa,EAAE,IAAIC,IAAgB,gBAAgB,EAAE,IAAId,EAAI,WAAW,aAAa,EAAE;AAAA;AAAA,wBAE1GA,EAAI,KAAK;AAAA,8BACHa,CAAU;AAAA,8BACVb,EAAI,WAAW,SAASW,CAAO;AAAA,uBACtC,MAAM,KAAK,QAAQX,CAAG,CAAC;AAAA,4BAClB,MAAM;AAAE,aAAK,oBAAoBY;AAAA,MAAG,CAAC;AAAA;AAAA;AAAA,6CAGpBZ,EAAI,KAAK;AAAA,kBACpCA,EAAI,cAAcS,8BAAiCT,EAAI,WAAW,YAAYW,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO/F,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AAnRad,EACK,SAAS,CAACmB,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAmB9CC,CAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkGpB;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAxHdxB,EAwHgB,WAAA,WAAA,CAAA;AACfuB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzHCxB,EAyHC,WAAA,SAAA,CAAA;AACgCuB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1H/BxB,EA0HiC,WAAA,YAAA,CAAA;AACfuB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA3HhBxB,EA2HkB,WAAA,iBAAA,CAAA;AACjBuB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA5HCxB,EA4HC,WAAA,SAAA,CAAA;AACAuB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7HCxB,EA6HC,WAAA,aAAA,CAAA;AAEKuB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA/HIzB,EA+HM,WAAA,qBAAA,CAAA;AA/HNA,IAANuB,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACd1B,CAAA;"}

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

@@ -30,6 +30,8 @@ export declare class CgMarkdown extends LitElement {
      */
     private _inline;
     updated(changed: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _bindAnchor;
     private _bindCopyButton;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"cg-markdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-markdown/cg-markdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAsH5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAuSnB;IAES,IAAI,SAAM;IAEtB;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO;IAyIf;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAkCN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWrD,OAAO,CAAC,eAAe;IAqBd,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,aAAa,EAAE,UAAU,CAAC;KAAE;CAAE"}
+{"version":3,"file":"cg-markdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-markdown/cg-markdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAuH5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA2TnB;IAES,IAAI,SAAM;IAEtB;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO;IAmKf;;;;OAIG;IACH,OAAO,CAAC,OAAO;IA6CN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAY5C,YAAY,IAAI,IAAI;IAU7B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,eAAe;IAwBd,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,aAAa,EAAE,UAAU,CAAC;KAAE;CAAE"}