@cognivo/components 0.8.0 → 0.8.2

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

@@ -33,6 +33,8 @@ export declare class CgMenubar extends LitElement {
      *    canonical macOS / VSCode / Figma app-menubar look.
      */
     indicator: 'underline' | 'none';
+    /** Accessible name for the menubar (W3C APG requires a labeled menubar). */
+    label: string;
     private _openIndex;
     /** Roving-tabindex: only the focused menubar item is in the tab order. */
     private _focusedTopIndex;
@@ -40,8 +42,12 @@ export declare class CgMenubar extends LitElement {
     private _indicatorLeft;
     private _indicatorWidth;
     private _outsideHandler;
+    /** Re-measure the indicator on resize so it doesn't drift while a menu is open. */
+    private _resizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Measure the active trigger and slide the underline indicator under it. */
+    private _measureIndicator;
     updated(changed: Map<string, unknown>): void;
     /** Hover-switches: once a menu is open, hovering a sibling top-trigger
      * instantly switches to that menu. Standard app-bar behavior. Does NOT

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

@@ -1 +1 @@
-{"version":3,"file":"cg-menubar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-menubar/cg-menubar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAyHnB;IAEwB,KAAK,EAAE,WAAW,EAAE,CAAM;IACrD,mEAAmE;IACtC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClF,yDAAyD;IAC5B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D;;;;;;OAMG;IAC0B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAe;IAElE,OAAO,CAAC,UAAU,CAAM;IACjC,0EAA0E;IACjE,OAAO,CAAC,gBAAgB,CAAK;IACtC,qEAAqE;IAC5D,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,eAAe,CAAK;IAErC,OAAO,CAAC,eAAe,CAErB;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAerD;;yEAEqE;IACrE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,iBAAiB;IAuEzB;2EACuE;IACvE,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,YAAY;IASX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"cg-menubar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-menubar/cg-menubar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAwHnB;IAEwB,KAAK,EAAE,WAAW,EAAE,CAAM;IACrD,mEAAmE;IACtC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClF,yDAAyD;IAC5B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D;;;;;;OAMG;IAC0B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAe;IAC3E,4EAA4E;IAChE,KAAK,SAAsB;IAE9B,OAAO,CAAC,UAAU,CAAM;IACjC,0EAA0E;IACjE,OAAO,CAAC,gBAAgB,CAAK;IACtC,qEAAqE;IAC5D,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,eAAe,CAAK;IAErC,OAAO,CAAC,eAAe,CAErB;IAEF,mFAAmF;IACnF,OAAO,CAAC,eAAe,CAA6B;IAE3C,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAOrC,6EAA6E;IAC7E,OAAO,CAAC,iBAAiB;IAYhB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWrD;;yEAEqE;IACrE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IAwDrB,OAAO,CAAC,iBAAiB;IA4EzB;2EACuE;IACvE,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,YAAY;IASX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -1,32 +1,36 @@
-import { css as f, LitElement as m, nothing as h, html as d } from "lit";
-import { property as l, state as u, customElement as v } from "lit/decorators.js";
-import { h as b, r as y, m as _ } from "../../chunks/premium.css-9I4kHrsl.js";
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (e, r, o, t) => {
-  for (var s = t > 1 ? void 0 : t ? x(r, o) : r, n = e.length - 1, a; n >= 0; n--)
-    (a = e[n]) && (s = (t ? a(r, o, s) : a(s)) || s);
-  return t && s && w(r, o, s), s;
+import { css as f, LitElement as b, nothing as h, html as d } from "lit";
+import { property as l, state as u, customElement as m } from "lit/decorators.js";
+import { h as v, r as _, m as y, e as w } from "../../chunks/premium.css-DHekUEUt.js";
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, r, o, t) => {
+  for (var n = t > 1 ? void 0 : t ? k(r, o) : r, s = e.length - 1, c; s >= 0; s--)
+    (c = e[s]) && (n = (t ? c(r, o, n) : c(n)) || n);
+  return t && n && x(r, o, n), n;
 };
-let i = class extends m {
+let i = class extends b {
   constructor() {
-    super(...arguments), this.items = [], this.rounded = "md", this.size = "md", this.indicator = "underline", this._openIndex = -1, this._focusedTopIndex = 0, this._indicatorLeft = 0, this._indicatorWidth = 0, this._outsideHandler = (e) => {
+    super(...arguments), this.items = [], this.rounded = "md", this.size = "md", this.indicator = "underline", this.label = "Application menu", this._openIndex = -1, this._focusedTopIndex = 0, this._indicatorLeft = 0, this._indicatorWidth = 0, this._outsideHandler = (e) => {
       e.composedPath().includes(this) || (this._openIndex = -1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._outsideHandler);
+    super.connectedCallback(), document.addEventListener("click", this._outsideHandler), this._resizeObserver = new ResizeObserver(() => {
+      this._openIndex >= 0 && this._measureIndicator();
+    }), this._resizeObserver.observe(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._outsideHandler);
+    super.disconnectedCallback(), document.removeEventListener("click", this._outsideHandler), this._resizeObserver?.disconnect(), this._resizeObserver = void 0;
   }
-  updated(e) {
-    if (e.has("_openIndex") && this._openIndex >= 0) {
-      const r = this.shadowRoot?.querySelectorAll(".top-trigger"), o = this.shadowRoot?.querySelector('[role="menubar"]'), t = r?.[this._openIndex];
-      if (t && o) {
-        const s = t.getBoundingClientRect(), n = o.getBoundingClientRect();
-        this._indicatorLeft = s.left - n.left, this._indicatorWidth = s.width;
-      }
+  /** Measure the active trigger and slide the underline indicator under it. */
+  _measureIndicator() {
+    const e = this.shadowRoot?.querySelectorAll(".top-trigger"), r = this.shadowRoot?.querySelector('[role="menubar"]'), o = e?.[this._openIndex];
+    if (o && r) {
+      const t = o.getBoundingClientRect(), n = r.getBoundingClientRect();
+      this._indicatorLeft = t.left - n.left, this._indicatorWidth = t.width;
     }
   }
+  updated(e) {
+    this.toggleAttribute("open", this._openIndex >= 0), e.has("_openIndex") && this._openIndex >= 0 && this._measureIndicator();
+  }
   /** Hover-switches: once a menu is open, hovering a sibling top-trigger
    * instantly switches to that menu. Standard app-bar behavior. Does NOT
    * activate on hover when no menu is open — that would be hostile. */
@@ -55,6 +59,12 @@ let i = class extends m {
       case "End":
         e.preventDefault(), this._focusTop(o - 1);
         break;
+      case "ArrowUp":
+        e.preventDefault(), this._openIndex = r, this.updateComplete.then(() => {
+          const t = this.shadowRoot?.querySelectorAll(".menu .menu-item:not(.disabled)");
+          t?.[t.length - 1]?.focus();
+        });
+        break;
       case "Escape":
         e.preventDefault(), this._openIndex = -1;
         break;
@@ -74,21 +84,21 @@ let i = class extends m {
       return;
     }
     if (e.key === "Tab") {
-      this._openIndex = -1;
+      this._focusedTopIndex = r, this.shadowRoot?.querySelectorAll(".top-trigger")[r]?.focus(), this._openIndex = -1;
       return;
     }
     if (e.key === "ArrowRight") {
       e.preventDefault();
-      const n = (r + 1) % o;
-      this._openIndex = n, this._focusedTopIndex = n, this.updateComplete.then(() => {
+      const s = (r + 1) % o;
+      this._openIndex = s, this._focusedTopIndex = s, this.updateComplete.then(() => {
         this.shadowRoot?.querySelector(".menu .menu-item:not(.disabled)")?.focus();
       });
       return;
     }
     if (e.key === "ArrowLeft") {
       e.preventDefault();
-      const n = (r - 1 + o) % o;
-      this._openIndex = n, this._focusedTopIndex = n, this.updateComplete.then(() => {
+      const s = (r - 1 + o) % o;
+      this._openIndex = s, this._focusedTopIndex = s, this.updateComplete.then(() => {
         this.shadowRoot?.querySelector(".menu .menu-item:not(.disabled)")?.focus();
       });
       return;
@@ -97,20 +107,20 @@ let i = class extends m {
       this.shadowRoot?.querySelectorAll(".menu .menu-item:not(.disabled)") ?? []
     );
     if (!t.length) return;
-    const s = t.findIndex((n) => n === this.shadowRoot?.activeElement);
+    const n = t.findIndex((s) => s === this.shadowRoot?.activeElement);
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
-      const n = e.key === "ArrowDown" ? 1 : -1, a = (s + n + t.length) % t.length;
-      t[a]?.focus();
+      const s = e.key === "ArrowDown" ? 1 : -1, c = (n + s + t.length) % t.length;
+      t[c]?.focus();
     } else if (e.key === "Home")
       e.preventDefault(), t[0]?.focus();
     else if (e.key === "End")
       e.preventDefault(), t[t.length - 1]?.focus();
     else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
-      const n = e.key.toLowerCase(), a = s >= 0 ? (s + 1) % t.length : 0;
+      const s = e.key.toLowerCase(), c = n >= 0 ? (n + 1) % t.length : 0;
       for (let p = 0; p < t.length; p++) {
-        const g = (a + p) % t.length;
-        if (t[g]?.textContent?.trim().toLowerCase().startsWith(n)) {
+        const g = (c + p) % t.length;
+        if (t[g]?.textContent?.trim().toLowerCase().startsWith(s)) {
           e.preventDefault(), t[g]?.focus();
           break;
         }
@@ -121,9 +131,9 @@ let i = class extends m {
    * starting AFTER `fromIdx`. Wraps around. Returns -1 if none match. */
   _findTypeaheadIndex(e, r) {
     const o = e.toLowerCase(), t = this.items.length;
-    for (let s = 1; s <= t; s++) {
-      const n = (r + s) % t;
-      if (this.items[n]?.label.toLowerCase().startsWith(o)) return n;
+    for (let n = 1; n <= t; n++) {
+      const s = (r + n) % t;
+      if (this.items[s]?.label.toLowerCase().startsWith(o)) return s;
     }
     return -1;
   }
@@ -142,7 +152,7 @@ let i = class extends m {
   render() {
     const e = `transform: translateX(${this._indicatorLeft}px); width: ${this._indicatorWidth}px;`;
     return d`
-      <div role="menubar">
+      <div role="menubar" aria-label=${this.label}>
         <div class="indicator ${this._openIndex >= 0 ? "visible" : ""}" style=${e} aria-hidden="true"></div>
         ${this.items.map((r, o) => d`
           <div class="menu-wrap">
@@ -163,12 +173,12 @@ let i = class extends m {
             >${r.label}</button>
             ${this._openIndex === o ? d`
               <div class="menu" role="menu" aria-label=${r.label} @keydown=${(t) => this._onSubmenuKeydown(t, o)}>
-                ${r.children.map((t, s) => t.separator ? d`<div class="divider" role="separator"></div>` : d`
+                ${r.children.map((t, n) => t.separator ? d`<div class="divider" role="separator"></div>` : d`
                     <button
                       class="menu-item ${t.disabled ? "disabled" : ""} ${t.danger ? "danger" : ""}"
                       role="menuitem"
                       aria-disabled=${t.disabled ? "true" : "false"}
-                      style="--stagger-index: ${s}"
+                      style="--stagger-index: ${n}"
                       @click=${() => this._selectChild(r, t)}
                     >
                       <span>${t.label}</span>
@@ -183,7 +193,7 @@ let i = class extends m {
     `;
   }
 };
-i.styles = [b, y, _, f`
+i.styles = [v, _, y, w, f`
     :host {
       display: block;
       color: var(--cg-color-surface-container-text);
@@ -259,7 +269,6 @@ i.styles = [b, y, _, f`
       font-weight: var(--cg-font-weight-medium);
       border-radius: var(--cg-border-radius-50);
       cursor: pointer;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([size="sm"]) .top-trigger {
       padding: var(--cg-spacing-6) var(--cg-spacing-8);
@@ -305,32 +314,35 @@ i.styles = [b, y, _, f`
       z-index: var(--cg-z-index-500);
     }
   `];
-c([
+a([
   l({ type: Array })
 ], i.prototype, "items", 2);
-c([
+a([
   l({ reflect: !0 })
 ], i.prototype, "rounded", 2);
-c([
+a([
   l({ reflect: !0 })
 ], i.prototype, "size", 2);
-c([
+a([
   l({ reflect: !0 })
 ], i.prototype, "indicator", 2);
-c([
+a([
+  l()
+], i.prototype, "label", 2);
+a([
   u()
 ], i.prototype, "_openIndex", 2);
-c([
+a([
   u()
 ], i.prototype, "_focusedTopIndex", 2);
-c([
+a([
   u()
 ], i.prototype, "_indicatorLeft", 2);
-c([
+a([
   u()
 ], i.prototype, "_indicatorWidth", 2);
-i = c([
-  v("cg-menubar")
+i = a([
+  m("cg-menubar")
 ], i);
 export {
   i as CgMenubar

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

@@ -1 +1 @@
-{"version":3,"file":"cg-menubar.js","sources":["../../../src/components/cg-menubar/cg-menubar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, menuListStyles } from '../../styles/index.js';\n\nexport interface MenubarChildItem {\n  label: string;\n  shortcut?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  separator?: boolean;\n  id?: string;\n}\n\nexport interface MenubarItem {\n  label: string;\n  id?: string;\n  children: MenubarChildItem[];\n}\n\n/**\n * @element cg-menubar\n * App-style horizontal menu bar (File/Edit/View) with dropdown submenus.\n *\n * @fires {CustomEvent<{menu:string,item:string}>} cg-menubar-select\n */\n@customElement('cg-menubar')\nexport class CgMenubar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, menuListStyles, css`\n    :host {\n      display: block;\n      color: var(--cg-color-surface-container-text);\n    }\n\n    /* Top-level horizontal bar containing the menu triggers. */\n    [role=\"menubar\"] {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-100);\n      position: relative; /* anchor for the magnetic underline indicator */\n    }\n\n    /* Magnetic underline that slides under the active trigger. JS measures\n       the trigger's position; CSS handles the smooth slide. */\n    .indicator {\n      position: absolute;\n      bottom: calc(var(--cg-spacing-2) * -1);\n      left: 0;\n      height: var(--cg-spacing-2);\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      pointer-events: none;\n      opacity: 0;\n      transform: translateX(0);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .indicator.visible {\n      opacity: 1;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .indicator { transition: opacity var(--cg-transition-duration-fast) ease; }\n    }\n    /* Indicator can be disabled for the canonical macOS / VSCode app-menubar\n       look — only the open trigger's background highlight remains. */\n    :host([indicator=\"none\"]) .indicator { display: none; }\n\n    /* ── Rounded variants — match cg-button's rounded scale ── */\n    :host([rounded=\"none\"]) [role=\"menubar\"] { border-radius: 0; }\n    :host([rounded=\"sm\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) [role=\"menubar\"] { border-radius: var(--cg-border-radius-full); }\n    /* Fully-rounded bar wants pill triggers too so corners don't clash. */\n    :host([rounded=\"full\"]) .top-trigger { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Size variants ── */\n    :host([size=\"sm\"]) [role=\"menubar\"] {\n      gap: var(--cg-spacing-2);\n      padding: var(--cg-spacing-4);\n    }\n    :host([size=\"lg\"]) [role=\"menubar\"] {\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-8);\n    }\n\n    .top-trigger {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([size=\"sm\"]) .top-trigger {\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) .top-trigger {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-base);\n    }\n    .top-trigger:hover,\n    .top-trigger.open {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .top-trigger.open {\n      color: var(--cg-color-surface-base-text);\n    }\n    .top-trigger:active:not([disabled]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .top-trigger {\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .top-trigger:focus-visible {\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    /* Submenu positioning — visual styling (surface, items, divider, animation,\n       rounded variants) inherited from menuListStyles for consistency with\n       cg-dropdown / cg-split-button. */\n    .menu-wrap {\n      position: relative;\n    }\n    .menu {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-6));\n      left: 0;\n      z-index: var(--cg-z-index-500);\n    }\n  `];\n\n  @property({ type: Array }) items: MenubarItem[] = [];\n  /** Border-radius variant — matches cg-button's `rounded` scale. */\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  /** Size variant — drives padding, gap, and font size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  /**\n   * Active-menu indicator style.\n   * - `\"underline\"` (default): magnetic 2px bar slides between open menus —\n   *    modern web menubars (Notion, Vercel, Linear) use this style.\n   * - `\"none\"`: rely only on the open trigger's background highlight —\n   *    canonical macOS / VSCode / Figma app-menubar look.\n   */\n  @property({ reflect: true }) indicator: 'underline' | 'none' = 'underline';\n\n  @state() private _openIndex = -1;\n  /** Roving-tabindex: only the focused menubar item is in the tab order. */\n  @state() private _focusedTopIndex = 0;\n  /** Magnetic indicator geometry, measured from the active trigger. */\n  @state() private _indicatorLeft = 0;\n  @state() private _indicatorWidth = 0;\n\n  private _outsideHandler = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this)) this._openIndex = -1;\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._outsideHandler);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._outsideHandler);\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    // Measure the active trigger and slide the underline indicator under it.\n    if (changed.has('_openIndex') && this._openIndex >= 0) {\n      const triggers = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n      const bar = this.shadowRoot?.querySelector<HTMLElement>('[role=\"menubar\"]');\n      const trigger = triggers?.[this._openIndex];\n      if (trigger && bar) {\n        const tRect = trigger.getBoundingClientRect();\n        const bRect = bar.getBoundingClientRect();\n        this._indicatorLeft = tRect.left - bRect.left;\n        this._indicatorWidth = tRect.width;\n      }\n    }\n  }\n\n  /** Hover-switches: once a menu is open, hovering a sibling top-trigger\n   * instantly switches to that menu. Standard app-bar behavior. Does NOT\n   * activate on hover when no menu is open — that would be hostile. */\n  private _onTopHover(idx: number): void {\n    if (this._openIndex >= 0 && this._openIndex !== idx) {\n      this._openIndex = idx;\n      this._focusedTopIndex = idx;\n    }\n  }\n\n  private _onTopKeydown(e: KeyboardEvent, idx: number): void {\n    const n = this.items.length;\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        this._focusTop((idx - 1 + n) % n);\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        this._focusTop((idx + 1) % n);\n        break;\n      case 'ArrowDown':\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._openIndex = idx;\n        this.updateComplete.then(() => {\n          const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n          first?.focus();\n        });\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusTop(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusTop(n - 1);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this._openIndex = -1;\n        break;\n      default:\n        // Typeahead — single printable character jumps to next menubar item\n        // whose label starts with that character (W3C APG menubar pattern).\n        if (e.key.length === 1 && /\\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {\n          const target = this._findTypeaheadIndex(e.key, idx);\n          if (target !== -1 && target !== idx) {\n            e.preventDefault();\n            this._focusTop(target);\n          }\n        }\n    }\n  }\n\n  private _onSubmenuKeydown(e: KeyboardEvent, triggerIdx: number): void {\n    const n = this.items.length;\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this._openIndex = -1;\n      this.updateComplete.then(() => {\n        const btns = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n        btns?.[triggerIdx]?.focus();\n      });\n      return;\n    }\n    if (e.key === 'Tab') {\n      // Per W3C APG: Tab exits the menubar entirely. Close the submenu and\n      // let the browser's natural tab order take over.\n      this._openIndex = -1;\n      return;\n    }\n    if (e.key === 'ArrowRight') {\n      // Close current submenu, move to next menubar item, open its submenu.\n      e.preventDefault();\n      const next = (triggerIdx + 1) % n;\n      this._openIndex = next;\n      this._focusedTopIndex = next;\n      this.updateComplete.then(() => {\n        const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n        first?.focus();\n      });\n      return;\n    }\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      const prev = (triggerIdx - 1 + n) % n;\n      this._openIndex = prev;\n      this._focusedTopIndex = prev;\n      this.updateComplete.then(() => {\n        const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n        first?.focus();\n      });\n      return;\n    }\n    const items = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.menu .menu-item:not(.disabled)') ?? [],\n    );\n    if (!items.length) return;\n    const current = items.findIndex(el => el === this.shadowRoot?.activeElement);\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      const delta = e.key === 'ArrowDown' ? 1 : -1;\n      const next = (current + delta + items.length) % items.length;\n      items[next]?.focus();\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      items[0]?.focus();\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      items[items.length - 1]?.focus();\n    } else if (e.key.length === 1 && /\\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {\n      // Typeahead inside an open submenu.\n      const ch = e.key.toLowerCase();\n      const start = current >= 0 ? (current + 1) % items.length : 0;\n      for (let i = 0; i < items.length; i++) {\n        const j = (start + i) % items.length;\n        if (items[j]?.textContent?.trim().toLowerCase().startsWith(ch)) {\n          e.preventDefault();\n          items[j]?.focus();\n          break;\n        }\n      }\n    }\n  }\n\n  /** Find the next menubar item whose label starts with the typed character,\n   * starting AFTER `fromIdx`. Wraps around. Returns -1 if none match. */\n  private _findTypeaheadIndex(char: string, fromIdx: number): number {\n    const ch = char.toLowerCase();\n    const n = this.items.length;\n    for (let i = 1; i <= n; i++) {\n      const j = (fromIdx + i) % n;\n      if (this.items[j]?.label.toLowerCase().startsWith(ch)) return j;\n    }\n    return -1;\n  }\n\n  private _focusTop(idx: number): void {\n    this._openIndex = this._openIndex >= 0 ? idx : -1;\n    this._focusedTopIndex = idx;\n    this.updateComplete.then(() => {\n      const btns = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n      btns?.[idx]?.focus();\n    });\n  }\n\n  private _selectChild(menu: MenubarItem, child: MenubarChildItem): void {\n    if (child.disabled || child.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-menubar-select', {\n      bubbles: true, composed: true,\n      detail: { menu: menu.id ?? menu.label, item: child.id ?? child.label },\n    }));\n    this._openIndex = -1;\n  }\n\n  override render() {\n    const indicatorStyle = `transform: translateX(${this._indicatorLeft}px); width: ${this._indicatorWidth}px;`;\n    return html`\n      <div role=\"menubar\">\n        <div class=\"indicator ${this._openIndex >= 0 ? 'visible' : ''}\" style=${indicatorStyle} aria-hidden=\"true\"></div>\n        ${this.items.map((menu, i) => html`\n          <div class=\"menu-wrap\">\n            <button\n              class=\"top-trigger ${this._openIndex === i ? 'open' : ''}\"\n              role=\"menuitem\"\n              aria-haspopup=\"menu\"\n              aria-expanded=${this._openIndex === i ? 'true' : 'false'}\n              tabindex=${this._focusedTopIndex === i ? 0 : -1}\n              @click=${(e: MouseEvent) => { e.stopPropagation(); this._focusedTopIndex = i; this._openIndex = this._openIndex === i ? -1 : i; }}\n              @focus=${() => { this._focusedTopIndex = i; }}\n              @mouseenter=${() => this._onTopHover(i)}\n              @keydown=${(e: KeyboardEvent) => this._onTopKeydown(e, i)}\n            >${menu.label}</button>\n            ${this._openIndex === i ? html`\n              <div class=\"menu\" role=\"menu\" aria-label=${menu.label} @keydown=${(e: KeyboardEvent) => this._onSubmenuKeydown(e, i)}>\n                ${menu.children.map((child, idx) => child.separator\n                  ? html`<div class=\"divider\" role=\"separator\"></div>`\n                  : html`\n                    <button\n                      class=\"menu-item ${child.disabled ? 'disabled' : ''} ${child.danger ? 'danger' : ''}\"\n                      role=\"menuitem\"\n                      aria-disabled=${child.disabled ? 'true' : 'false'}\n                      style=\"--stagger-index: ${idx}\"\n                      @click=${() => this._selectChild(menu, child)}\n                    >\n                      <span>${child.label}</span>\n                      ${child.shortcut ? html`<span class=\"menu-item-shortcut\">${child.shortcut}</span>` : nothing}\n                    </button>\n                  `)}\n              </div>\n            ` : nothing}\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-menubar': CgMenubar;\n  }\n}\n"],"names":["CgMenubar","LitElement","changed","triggers","bar","trigger","tRect","bRect","idx","n","target","triggerIdx","next","prev","items","current","el","delta","ch","start","i","j","char","fromIdx","menu","child","indicatorStyle","html","e","nothing","hostBlock","reducedMotion","menuListStyles","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-menubar.js","sources":["../../../src/components/cg-menubar/cg-menubar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, menuListStyles, entranceStagger } from '../../styles/index.js';\n\nexport interface MenubarChildItem {\n  label: string;\n  shortcut?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  separator?: boolean;\n  id?: string;\n}\n\nexport interface MenubarItem {\n  label: string;\n  id?: string;\n  children: MenubarChildItem[];\n}\n\n/**\n * @element cg-menubar\n * App-style horizontal menu bar (File/Edit/View) with dropdown submenus.\n *\n * @fires {CustomEvent<{menu:string,item:string}>} cg-menubar-select\n */\n@customElement('cg-menubar')\nexport class CgMenubar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, menuListStyles, entranceStagger, css`\n    :host {\n      display: block;\n      color: var(--cg-color-surface-container-text);\n    }\n\n    /* Top-level horizontal bar containing the menu triggers. */\n    [role=\"menubar\"] {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-100);\n      position: relative; /* anchor for the magnetic underline indicator */\n    }\n\n    /* Magnetic underline that slides under the active trigger. JS measures\n       the trigger's position; CSS handles the smooth slide. */\n    .indicator {\n      position: absolute;\n      bottom: calc(var(--cg-spacing-2) * -1);\n      left: 0;\n      height: var(--cg-spacing-2);\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      pointer-events: none;\n      opacity: 0;\n      transform: translateX(0);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .indicator.visible {\n      opacity: 1;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .indicator { transition: opacity var(--cg-transition-duration-fast) ease; }\n    }\n    /* Indicator can be disabled for the canonical macOS / VSCode app-menubar\n       look — only the open trigger's background highlight remains. */\n    :host([indicator=\"none\"]) .indicator { display: none; }\n\n    /* ── Rounded variants — match cg-button's rounded scale ── */\n    :host([rounded=\"none\"]) [role=\"menubar\"] { border-radius: 0; }\n    :host([rounded=\"sm\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   [role=\"menubar\"] { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) [role=\"menubar\"] { border-radius: var(--cg-border-radius-full); }\n    /* Fully-rounded bar wants pill triggers too so corners don't clash. */\n    :host([rounded=\"full\"]) .top-trigger { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Size variants ── */\n    :host([size=\"sm\"]) [role=\"menubar\"] {\n      gap: var(--cg-spacing-2);\n      padding: var(--cg-spacing-4);\n    }\n    :host([size=\"lg\"]) [role=\"menubar\"] {\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-8);\n    }\n\n    .top-trigger {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n    }\n    :host([size=\"sm\"]) .top-trigger {\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) .top-trigger {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-base);\n    }\n    .top-trigger:hover,\n    .top-trigger.open {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .top-trigger.open {\n      color: var(--cg-color-surface-base-text);\n    }\n    .top-trigger:active:not([disabled]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .top-trigger {\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .top-trigger:focus-visible {\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    /* Submenu positioning — visual styling (surface, items, divider, animation,\n       rounded variants) inherited from menuListStyles for consistency with\n       cg-dropdown / cg-split-button. */\n    .menu-wrap {\n      position: relative;\n    }\n    .menu {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-6));\n      left: 0;\n      z-index: var(--cg-z-index-500);\n    }\n  `];\n\n  @property({ type: Array }) items: MenubarItem[] = [];\n  /** Border-radius variant — matches cg-button's `rounded` scale. */\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  /** Size variant — drives padding, gap, and font size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  /**\n   * Active-menu indicator style.\n   * - `\"underline\"` (default): magnetic 2px bar slides between open menus —\n   *    modern web menubars (Notion, Vercel, Linear) use this style.\n   * - `\"none\"`: rely only on the open trigger's background highlight —\n   *    canonical macOS / VSCode / Figma app-menubar look.\n   */\n  @property({ reflect: true }) indicator: 'underline' | 'none' = 'underline';\n  /** Accessible name for the menubar (W3C APG requires a labeled menubar). */\n  @property() label = 'Application menu';\n\n  @state() private _openIndex = -1;\n  /** Roving-tabindex: only the focused menubar item is in the tab order. */\n  @state() private _focusedTopIndex = 0;\n  /** Magnetic indicator geometry, measured from the active trigger. */\n  @state() private _indicatorLeft = 0;\n  @state() private _indicatorWidth = 0;\n\n  private _outsideHandler = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this)) this._openIndex = -1;\n  };\n\n  /** Re-measure the indicator on resize so it doesn't drift while a menu is open. */\n  private _resizeObserver: ResizeObserver | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._outsideHandler);\n    this._resizeObserver = new ResizeObserver(() => {\n      if (this._openIndex >= 0) this._measureIndicator();\n    });\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._outsideHandler);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  /** Measure the active trigger and slide the underline indicator under it. */\n  private _measureIndicator(): void {\n    const triggers = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n    const bar = this.shadowRoot?.querySelector<HTMLElement>('[role=\"menubar\"]');\n    const trigger = triggers?.[this._openIndex];\n    if (trigger && bar) {\n      const tRect = trigger.getBoundingClientRect();\n      const bRect = bar.getBoundingClientRect();\n      this._indicatorLeft = tRect.left - bRect.left;\n      this._indicatorWidth = tRect.width;\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    // Reflect open state so menuListStyles' `:host([open]) .menu` reveal rule\n    // (and the shared cg-menu-enter animation) activates — matches\n    // cg-dropdown / cg-split-button. `open` is not a reactive property, so\n    // this cannot trigger an update loop.\n    this.toggleAttribute('open', this._openIndex >= 0);\n    if (changed.has('_openIndex') && this._openIndex >= 0) {\n      this._measureIndicator();\n    }\n  }\n\n  /** Hover-switches: once a menu is open, hovering a sibling top-trigger\n   * instantly switches to that menu. Standard app-bar behavior. Does NOT\n   * activate on hover when no menu is open — that would be hostile. */\n  private _onTopHover(idx: number): void {\n    if (this._openIndex >= 0 && this._openIndex !== idx) {\n      this._openIndex = idx;\n      this._focusedTopIndex = idx;\n    }\n  }\n\n  private _onTopKeydown(e: KeyboardEvent, idx: number): void {\n    const n = this.items.length;\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        this._focusTop((idx - 1 + n) % n);\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        this._focusTop((idx + 1) % n);\n        break;\n      case 'ArrowDown':\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._openIndex = idx;\n        this.updateComplete.then(() => {\n          const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n          first?.focus();\n        });\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusTop(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusTop(n - 1);\n        break;\n      case 'ArrowUp':\n        // W3C APG: ArrowUp on a menubar item opens its submenu and focuses\n        // the LAST item (complement of ArrowDown-focuses-first).\n        e.preventDefault();\n        this._openIndex = idx;\n        this.updateComplete.then(() => {\n          const menuItems = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n          menuItems?.[menuItems.length - 1]?.focus();\n        });\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this._openIndex = -1;\n        break;\n      default:\n        // Typeahead — single printable character jumps to next menubar item\n        // whose label starts with that character (W3C APG menubar pattern).\n        if (e.key.length === 1 && /\\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {\n          const target = this._findTypeaheadIndex(e.key, idx);\n          if (target !== -1 && target !== idx) {\n            e.preventDefault();\n            this._focusTop(target);\n          }\n        }\n    }\n  }\n\n  private _onSubmenuKeydown(e: KeyboardEvent, triggerIdx: number): void {\n    const n = this.items.length;\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this._openIndex = -1;\n      this.updateComplete.then(() => {\n        const btns = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n        btns?.[triggerIdx]?.focus();\n      });\n      return;\n    }\n    if (e.key === 'Tab') {\n      // Per W3C APG: Tab exits the menubar entirely. Synchronously move focus\n      // back to the owning trigger (which holds the roving tabindex=0) before\n      // the default Tab action runs, so Tab / Shift+Tab proceed from the\n      // menubar to the adjacent tab-sequence element instead of dropping\n      // focus to <body> when the submenu is removed. No preventDefault.\n      this._focusedTopIndex = triggerIdx;\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger')[triggerIdx]?.focus();\n      this._openIndex = -1;\n      return;\n    }\n    if (e.key === 'ArrowRight') {\n      // Close current submenu, move to next menubar item, open its submenu.\n      e.preventDefault();\n      const next = (triggerIdx + 1) % n;\n      this._openIndex = next;\n      this._focusedTopIndex = next;\n      this.updateComplete.then(() => {\n        const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n        first?.focus();\n      });\n      return;\n    }\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      const prev = (triggerIdx - 1 + n) % n;\n      this._openIndex = prev;\n      this._focusedTopIndex = prev;\n      this.updateComplete.then(() => {\n        const first = this.shadowRoot?.querySelector<HTMLButtonElement>('.menu .menu-item:not(.disabled)');\n        first?.focus();\n      });\n      return;\n    }\n    const items = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.menu .menu-item:not(.disabled)') ?? [],\n    );\n    if (!items.length) return;\n    const current = items.findIndex(el => el === this.shadowRoot?.activeElement);\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      const delta = e.key === 'ArrowDown' ? 1 : -1;\n      const next = (current + delta + items.length) % items.length;\n      items[next]?.focus();\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      items[0]?.focus();\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      items[items.length - 1]?.focus();\n    } else if (e.key.length === 1 && /\\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {\n      // Typeahead inside an open submenu.\n      const ch = e.key.toLowerCase();\n      const start = current >= 0 ? (current + 1) % items.length : 0;\n      for (let i = 0; i < items.length; i++) {\n        const j = (start + i) % items.length;\n        if (items[j]?.textContent?.trim().toLowerCase().startsWith(ch)) {\n          e.preventDefault();\n          items[j]?.focus();\n          break;\n        }\n      }\n    }\n  }\n\n  /** Find the next menubar item whose label starts with the typed character,\n   * starting AFTER `fromIdx`. Wraps around. Returns -1 if none match. */\n  private _findTypeaheadIndex(char: string, fromIdx: number): number {\n    const ch = char.toLowerCase();\n    const n = this.items.length;\n    for (let i = 1; i <= n; i++) {\n      const j = (fromIdx + i) % n;\n      if (this.items[j]?.label.toLowerCase().startsWith(ch)) return j;\n    }\n    return -1;\n  }\n\n  private _focusTop(idx: number): void {\n    this._openIndex = this._openIndex >= 0 ? idx : -1;\n    this._focusedTopIndex = idx;\n    this.updateComplete.then(() => {\n      const btns = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.top-trigger');\n      btns?.[idx]?.focus();\n    });\n  }\n\n  private _selectChild(menu: MenubarItem, child: MenubarChildItem): void {\n    if (child.disabled || child.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-menubar-select', {\n      bubbles: true, composed: true,\n      detail: { menu: menu.id ?? menu.label, item: child.id ?? child.label },\n    }));\n    this._openIndex = -1;\n  }\n\n  override render() {\n    const indicatorStyle = `transform: translateX(${this._indicatorLeft}px); width: ${this._indicatorWidth}px;`;\n    return html`\n      <div role=\"menubar\" aria-label=${this.label}>\n        <div class=\"indicator ${this._openIndex >= 0 ? 'visible' : ''}\" style=${indicatorStyle} aria-hidden=\"true\"></div>\n        ${this.items.map((menu, i) => html`\n          <div class=\"menu-wrap\">\n            <button\n              class=\"top-trigger ${this._openIndex === i ? 'open' : ''}\"\n              role=\"menuitem\"\n              aria-haspopup=\"menu\"\n              aria-expanded=${this._openIndex === i ? 'true' : 'false'}\n              tabindex=${this._focusedTopIndex === i ? 0 : -1}\n              @click=${(e: MouseEvent) => { e.stopPropagation(); this._focusedTopIndex = i; this._openIndex = this._openIndex === i ? -1 : i; }}\n              @focus=${() => { this._focusedTopIndex = i; }}\n              @mouseenter=${() => this._onTopHover(i)}\n              @keydown=${(e: KeyboardEvent) => this._onTopKeydown(e, i)}\n            >${menu.label}</button>\n            ${this._openIndex === i ? html`\n              <div class=\"menu\" role=\"menu\" aria-label=${menu.label} @keydown=${(e: KeyboardEvent) => this._onSubmenuKeydown(e, i)}>\n                ${menu.children.map((child, idx) => child.separator\n                  ? html`<div class=\"divider\" role=\"separator\"></div>`\n                  : html`\n                    <button\n                      class=\"menu-item ${child.disabled ? 'disabled' : ''} ${child.danger ? 'danger' : ''}\"\n                      role=\"menuitem\"\n                      aria-disabled=${child.disabled ? 'true' : 'false'}\n                      style=\"--stagger-index: ${idx}\"\n                      @click=${() => this._selectChild(menu, child)}\n                    >\n                      <span>${child.label}</span>\n                      ${child.shortcut ? html`<span class=\"menu-item-shortcut\">${child.shortcut}</span>` : nothing}\n                    </button>\n                  `)}\n              </div>\n            ` : nothing}\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-menubar': CgMenubar;\n  }\n}\n"],"names":["CgMenubar","LitElement","triggers","bar","trigger","tRect","bRect","changed","idx","n","menuItems","target","triggerIdx","next","prev","items","current","el","delta","ch","start","i","j","char","fromIdx","menu","child","indicatorStyle","html","e","nothing","hostBlock","reducedMotion","menuListStyles","entranceStagger","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-meter.d.ts","sourceRoot":"","sources":["../../../src/components/cg-meter/cg-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;GAUG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAsFnB;IAEyB,KAAK,SAAK;IACV,GAAG,SAAK;IACR,GAAG,SAAO;IACV,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC1B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9C,KAAK,SAAM;IACM,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAC1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACP,SAAS,UAAS;IAC5B,QAAQ,UAAS;IAE7D,wEAAwE;IACxE,OAAO,CAAC,MAAM;IAoBd,OAAO,CAAC,IAAI;IAOH,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"cg-meter.d.ts","sourceRoot":"","sources":["../../../src/components/cg-meter/cg-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;GAUG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAsFnB;IAEyB,KAAK,SAAK;IACV,GAAG,SAAK;IACR,GAAG,SAAO;IACV,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC1B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9C,KAAK,SAAM;IACM,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAC1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACP,SAAS,UAAS;IAC5B,QAAQ,UAAS;IAE7D,wEAAwE;IACxE,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,IAAI;IAOH,MAAM;CA+DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -1,81 +1,81 @@
-import { css as d, LitElement as m, nothing as l, html as u, svg as g } from "lit";
-import { property as c, customElement as v } from "lit/decorators.js";
-import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (a, o, n, t) => {
-  for (var i = t > 1 ? void 0 : t ? w(o, n) : o, e = a.length - 1, h; e >= 0; e--)
-    (h = a[e]) && (i = (t ? h(o, n, i) : h(i)) || i);
-  return t && i && b(o, n, i), i;
+import { css as d, LitElement as v, nothing as s, html as h, svg as p } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
+import { h as b, r as w } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (l, r, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? x(r, n) : r, u = l.length - 1, c; u >= 0; u--)
+    (c = l[u]) && (t = (i ? c(r, n, t) : c(t)) || t);
+  return i && t && y(r, n, t), t;
 };
-let r = class extends m {
+let e = class extends v {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.low = null, this.high = null, this.optimum = null, this.label = "", this.variant = "linear", this.size = "md", this.showValue = !1, this.disabled = !1;
   }
   /** Compute color class from thresholds, mirroring <meter> semantics. */
   _level() {
-    const { value: a, min: o, max: n } = this, t = this.low ?? o, i = this.high ?? n, e = this.optimum;
-    return a >= t && a <= i ? e == null || e >= t && e <= i ? "ok" : "warn" : e == null || a < t && e > i || a > i && e < t ? "bad" : "warn";
+    const { value: l, min: r, max: n } = this, i = this.low ?? r, t = this.high ?? n, u = this.optimum ?? (r + n) / 2, c = (g) => g < i ? 0 : g > t ? 2 : 1, m = Math.abs(c(l) - c(u));
+    return m === 0 ? "ok" : m === 1 ? "warn" : "bad";
   }
   _pct() {
-    const a = this.max - this.min;
-    return a <= 0 ? 0 : (Math.max(this.min, Math.min(this.max, this.value)) - this.min) / a * 100;
+    const l = this.max - this.min;
+    return l <= 0 ? 0 : (Math.max(this.min, Math.min(this.max, this.value)) - this.min) / l * 100;
   }
   render() {
-    const a = this._level(), o = this._pct(), n = this.showValue ? `${Math.round(o)}%` : "", t = this.label ? "cg-meter-label" : void 0;
+    const l = this._level(), r = this._pct(), n = Math.max(this.min, Math.min(this.max, this.value)), i = this.showValue ? `${Math.round(r)}%` : "", t = this.label ? "cg-meter-label" : void 0;
     if (this.variant === "circular") {
-      const e = 2 * Math.PI * 42, h = e - o / 100 * e;
-      return u`
-        ${this.label ? u`
+      const c = 2 * Math.PI * 42, m = c - r / 100 * c;
+      return h`
+        ${this.label ? h`
           <div class="header">
             <span class="label" id=${t}>${this.label}</span>
           </div>
-        ` : l}
+        ` : s}
         <div class="circular"
           role="meter"
-          aria-valuenow=${this.value}
+          aria-valuenow=${n}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
-          aria-labelledby=${t ?? l}
-          aria-label=${t ? l : this.label || "Meter"}
-          aria-disabled=${this.disabled ? "true" : l}
+          aria-valuetext=${this.showValue ? i : s}
+          aria-labelledby=${t ?? s}
+          aria-label=${t ? s : this.label || "Meter"}
         >
-          ${g`
+          ${p`
             <svg viewBox="0 0 100 100">
               <circle class="bg" cx="50" cy="50" r="${42}" fill="none" stroke-width="10"></circle>
               <circle
-                class="fg ${a}"
+                class="fg ${l}"
                 cx="50" cy="50" r="${42}"
                 fill="none" stroke-width="10"
-                stroke-dasharray="${e}"
-                stroke-dashoffset="${h}"
+                stroke-dasharray="${c}"
+                stroke-dashoffset="${m}"
               ></circle>
             </svg>
           `}
-          ${this.showValue ? u`<div class="center">${n}</div>` : l}
+          ${this.showValue ? h`<div class="center">${i}</div>` : s}
         </div>
       `;
     }
-    return u`
-      ${this.label || this.showValue ? u`
+    return h`
+      ${this.label || this.showValue ? h`
         <div class="header">
-          ${this.label ? u`<span class="label" id=${t}>${this.label}</span>` : l}
-          ${this.showValue ? u`<span class="value-text">${n}</span>` : l}
+          ${this.label ? h`<span class="label" id=${t}>${this.label}</span>` : s}
+          ${this.showValue ? h`<span class="value-text">${i}</span>` : s}
         </div>
-      ` : l}
+      ` : s}
       <div class="track"
         role="meter"
-        aria-valuenow=${this.value}
+        aria-valuenow=${n}
         aria-valuemin=${this.min}
         aria-valuemax=${this.max}
-        aria-labelledby=${t ?? l}
-        aria-label=${t ? l : this.label || "Meter"}
-        aria-disabled=${this.disabled ? "true" : l}
+        aria-valuetext=${this.showValue ? i : s}
+        aria-labelledby=${t ?? s}
+        aria-label=${t ? s : this.label || "Meter"}
       >
-        <div class="fill ${a}" style="width: ${o}%"></div>
+        <div class="fill ${l}" style="width: ${r}%"></div>
       </div>
     `;
   }
 };
-r.styles = [p, f, d`
+e.styles = [b, w, d`
     :host { width: 100%; font-family: var(--cg-font-family-primary); }
     :host([disabled]) { opacity: 0.5; cursor: not-allowed; }
     :host([disabled]) .track,
@@ -104,7 +104,7 @@ r.styles = [p, f, d`
     /* ── Linear ── */
     .track {
       width: 100%;
-      background: var(--cg-color-surface-container-background);
+      background: var(--cg-color-loading-spinner-secondary);
       border-radius: var(--cg-component-meter-radius);
       overflow: hidden;
       position: relative;
@@ -140,7 +140,7 @@ r.styles = [p, f, d`
       transform: rotate(-90deg);
     }
     .circular .bg {
-      stroke: var(--cg-color-surface-container-background);
+      stroke: var(--cg-color-loading-spinner-secondary);
     }
     .circular .fg {
       transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
@@ -162,43 +162,43 @@ r.styles = [p, f, d`
       font-variant-numeric: tabular-nums;
     }
   `];
-s([
-  c({ type: Number })
-], r.prototype, "value", 2);
-s([
-  c({ type: Number })
-], r.prototype, "min", 2);
-s([
-  c({ type: Number })
-], r.prototype, "max", 2);
-s([
-  c({ type: Number })
-], r.prototype, "low", 2);
-s([
-  c({ type: Number })
-], r.prototype, "high", 2);
-s([
-  c({ type: Number })
-], r.prototype, "optimum", 2);
-s([
-  c()
-], r.prototype, "label", 2);
-s([
-  c({ reflect: !0 })
-], r.prototype, "variant", 2);
-s([
-  c({ reflect: !0 })
-], r.prototype, "size", 2);
-s([
-  c({ type: Boolean, attribute: "show-value" })
-], r.prototype, "showValue", 2);
-s([
-  c({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-r = s([
-  v("cg-meter")
-], r);
+a([
+  o({ type: Number })
+], e.prototype, "value", 2);
+a([
+  o({ type: Number })
+], e.prototype, "min", 2);
+a([
+  o({ type: Number })
+], e.prototype, "max", 2);
+a([
+  o({ type: Number })
+], e.prototype, "low", 2);
+a([
+  o({ type: Number })
+], e.prototype, "high", 2);
+a([
+  o({ type: Number })
+], e.prototype, "optimum", 2);
+a([
+  o()
+], e.prototype, "label", 2);
+a([
+  o({ reflect: !0 })
+], e.prototype, "variant", 2);
+a([
+  o({ reflect: !0 })
+], e.prototype, "size", 2);
+a([
+  o({ type: Boolean, attribute: "show-value" })
+], e.prototype, "showValue", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = a([
+  f("cg-meter")
+], e);
 export {
-  r as CgMeter
+  e as CgMeter
 };
 //# sourceMappingURL=cg-meter.js.map