@cognivo/components 0.8.0

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

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+export interface MenubarChildItem {
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+    id?: string;
+}
+export interface MenubarItem {
+    label: string;
+    id?: string;
+    children: MenubarChildItem[];
+}
+/**
+ * @element cg-menubar
+ * App-style horizontal menu bar (File/Edit/View) with dropdown submenus.
+ *
+ * @fires {CustomEvent<{menu:string,item:string}>} cg-menubar-select
+ */
+export declare class CgMenubar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: MenubarItem[];
+    /** Border-radius variant — matches cg-button's `rounded` scale. */
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /** Size variant — drives padding, gap, and font size. */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Active-menu indicator style.
+     * - `"underline"` (default): magnetic 2px bar slides between open menus —
+     *    modern web menubars (Notion, Vercel, Linear) use this style.
+     * - `"none"`: rely only on the open trigger's background highlight —
+     *    canonical macOS / VSCode / Figma app-menubar look.
+     */
+    indicator: 'underline' | 'none';
+    private _openIndex;
+    /** Roving-tabindex: only the focused menubar item is in the tab order. */
+    private _focusedTopIndex;
+    /** Magnetic indicator geometry, measured from the active trigger. */
+    private _indicatorLeft;
+    private _indicatorWidth;
+    private _outsideHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    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
+     * activate on hover when no menu is open — that would be hostile. */
+    private _onTopHover;
+    private _onTopKeydown;
+    private _onSubmenuKeydown;
+    /** Find the next menubar item whose label starts with the typed character,
+     * starting AFTER `fromIdx`. Wraps around. Returns -1 if none match. */
+    private _findTypeaheadIndex;
+    private _focusTop;
+    private _selectChild;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-menubar': CgMenubar;
+    }
+}
+//# sourceMappingURL=cg-menubar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,338 @@
+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;
+};
+let i = class extends m {
+  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) => {
+      e.composedPath().includes(this) || (this._openIndex = -1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._outsideHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._outsideHandler);
+  }
+  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;
+      }
+    }
+  }
+  /** 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. */
+  _onTopHover(e) {
+    this._openIndex >= 0 && this._openIndex !== e && (this._openIndex = e, this._focusedTopIndex = e);
+  }
+  _onTopKeydown(e, r) {
+    const o = this.items.length;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), this._focusTop((r - 1 + o) % o);
+        break;
+      case "ArrowRight":
+        e.preventDefault(), this._focusTop((r + 1) % o);
+        break;
+      case "ArrowDown":
+      case "Enter":
+      case " ":
+        e.preventDefault(), this._openIndex = r, this.updateComplete.then(() => {
+          this.shadowRoot?.querySelector(".menu .menu-item:not(.disabled)")?.focus();
+        });
+        break;
+      case "Home":
+        e.preventDefault(), this._focusTop(0);
+        break;
+      case "End":
+        e.preventDefault(), this._focusTop(o - 1);
+        break;
+      case "Escape":
+        e.preventDefault(), this._openIndex = -1;
+        break;
+      default:
+        if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          const t = this._findTypeaheadIndex(e.key, r);
+          t !== -1 && t !== r && (e.preventDefault(), this._focusTop(t));
+        }
+    }
+  }
+  _onSubmenuKeydown(e, r) {
+    const o = this.items.length;
+    if (e.key === "Escape") {
+      e.preventDefault(), this._openIndex = -1, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll(".top-trigger")?.[r]?.focus();
+      });
+      return;
+    }
+    if (e.key === "Tab") {
+      this._openIndex = -1;
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const n = (r + 1) % o;
+      this._openIndex = n, this._focusedTopIndex = n, 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(() => {
+        this.shadowRoot?.querySelector(".menu .menu-item:not(.disabled)")?.focus();
+      });
+      return;
+    }
+    const t = Array.from(
+      this.shadowRoot?.querySelectorAll(".menu .menu-item:not(.disabled)") ?? []
+    );
+    if (!t.length) return;
+    const s = t.findIndex((n) => n === 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();
+    } 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;
+      for (let p = 0; p < t.length; p++) {
+        const g = (a + p) % t.length;
+        if (t[g]?.textContent?.trim().toLowerCase().startsWith(n)) {
+          e.preventDefault(), t[g]?.focus();
+          break;
+        }
+      }
+    }
+  }
+  /** Find the next menubar item whose label starts with the typed character,
+   * 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;
+    }
+    return -1;
+  }
+  _focusTop(e) {
+    this._openIndex = this._openIndex >= 0 ? e : -1, this._focusedTopIndex = e, this.updateComplete.then(() => {
+      this.shadowRoot?.querySelectorAll(".top-trigger")?.[e]?.focus();
+    });
+  }
+  _selectChild(e, r) {
+    r.disabled || r.separator || (this.dispatchEvent(new CustomEvent("cg-menubar-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { menu: e.id ?? e.label, item: r.id ?? r.label }
+    })), this._openIndex = -1);
+  }
+  render() {
+    const e = `transform: translateX(${this._indicatorLeft}px); width: ${this._indicatorWidth}px;`;
+    return d`
+      <div role="menubar">
+        <div class="indicator ${this._openIndex >= 0 ? "visible" : ""}" style=${e} aria-hidden="true"></div>
+        ${this.items.map((r, o) => d`
+          <div class="menu-wrap">
+            <button
+              class="top-trigger ${this._openIndex === o ? "open" : ""}"
+              role="menuitem"
+              aria-haspopup="menu"
+              aria-expanded=${this._openIndex === o ? "true" : "false"}
+              tabindex=${this._focusedTopIndex === o ? 0 : -1}
+              @click=${(t) => {
+      t.stopPropagation(), this._focusedTopIndex = o, this._openIndex = this._openIndex === o ? -1 : o;
+    }}
+              @focus=${() => {
+      this._focusedTopIndex = o;
+    }}
+              @mouseenter=${() => this._onTopHover(o)}
+              @keydown=${(t) => this._onTopKeydown(t, o)}
+            >${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`
+                    <button
+                      class="menu-item ${t.disabled ? "disabled" : ""} ${t.danger ? "danger" : ""}"
+                      role="menuitem"
+                      aria-disabled=${t.disabled ? "true" : "false"}
+                      style="--stagger-index: ${s}"
+                      @click=${() => this._selectChild(r, t)}
+                    >
+                      <span>${t.label}</span>
+                      ${t.shortcut ? d`<span class="menu-item-shortcut">${t.shortcut}</span>` : h}
+                    </button>
+                  `)}
+              </div>
+            ` : h}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+i.styles = [b, y, _, f`
+    :host {
+      display: block;
+      color: var(--cg-color-surface-container-text);
+    }
+
+    /* Top-level horizontal bar containing the menu triggers. */
+    [role="menubar"] {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-6);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      border-radius: var(--cg-border-radius-100);
+      position: relative; /* anchor for the magnetic underline indicator */
+    }
+
+    /* Magnetic underline that slides under the active trigger. JS measures
+       the trigger's position; CSS handles the smooth slide. */
+    .indicator {
+      position: absolute;
+      bottom: calc(var(--cg-spacing-2) * -1);
+      left: 0;
+      height: var(--cg-spacing-2);
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+      pointer-events: none;
+      opacity: 0;
+      transform: translateX(0);
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),
+        width var(--cg-transition-duration-default) var(--cg-transition-easing-bounce),
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .indicator.visible {
+      opacity: 1;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .indicator { transition: opacity var(--cg-transition-duration-fast) ease; }
+    }
+    /* Indicator can be disabled for the canonical macOS / VSCode app-menubar
+       look — only the open trigger's background highlight remains. */
+    :host([indicator="none"]) .indicator { display: none; }
+
+    /* ── Rounded variants — match cg-button's rounded scale ── */
+    :host([rounded="none"]) [role="menubar"] { border-radius: 0; }
+    :host([rounded="sm"])   [role="menubar"] { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"])   [role="menubar"] { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"])   [role="menubar"] { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) [role="menubar"] { border-radius: var(--cg-border-radius-full); }
+    /* Fully-rounded bar wants pill triggers too so corners don't clash. */
+    :host([rounded="full"]) .top-trigger { border-radius: var(--cg-border-radius-full); }
+
+    /* ── Size variants ── */
+    :host([size="sm"]) [role="menubar"] {
+      gap: var(--cg-spacing-2);
+      padding: var(--cg-spacing-4);
+    }
+    :host([size="lg"]) [role="menubar"] {
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-8);
+    }
+
+    .top-trigger {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: transparent;
+      border: none;
+      color: inherit;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      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);
+      font-size: var(--cg-font-size-xs);
+    }
+    :host([size="lg"]) .top-trigger {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-base);
+    }
+    .top-trigger:hover,
+    .top-trigger.open {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .top-trigger.open {
+      color: var(--cg-color-surface-base-text);
+    }
+    .top-trigger:active:not([disabled]) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .top-trigger {
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .top-trigger:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    /* Submenu positioning — visual styling (surface, items, divider, animation,
+       rounded variants) inherited from menuListStyles for consistency with
+       cg-dropdown / cg-split-button. */
+    .menu-wrap {
+      position: relative;
+    }
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-6));
+      left: 0;
+      z-index: var(--cg-z-index-500);
+    }
+  `];
+c([
+  l({ type: Array })
+], i.prototype, "items", 2);
+c([
+  l({ reflect: !0 })
+], i.prototype, "rounded", 2);
+c([
+  l({ reflect: !0 })
+], i.prototype, "size", 2);
+c([
+  l({ reflect: !0 })
+], i.prototype, "indicator", 2);
+c([
+  u()
+], i.prototype, "_openIndex", 2);
+c([
+  u()
+], i.prototype, "_focusedTopIndex", 2);
+c([
+  u()
+], i.prototype, "_indicatorLeft", 2);
+c([
+  u()
+], i.prototype, "_indicatorWidth", 2);
+i = c([
+  v("cg-menubar")
+], i);
+export {
+  i as CgMenubar
+};
+//# sourceMappingURL=cg-menubar.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-meter
+ * Measurement gauge (battery, disk, score) with threshold coloring.
+ * Different from cg-progress-bar: meter = measurement within a range, progress = task completion.
+ *
+ * @example
+ * ```html
+ * <cg-meter value="72" low="20" high="80" optimum="50" label="CPU usage" show-value></cg-meter>
+ * <cg-meter variant="circular" value="85" label="Battery"></cg-meter>
+ * ```
+ */
+export declare class CgMeter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    low: number | null;
+    high: number | null;
+    optimum: number | null;
+    label: string;
+    variant: 'linear' | 'circular';
+    size: 'sm' | 'md' | 'lg';
+    showValue: boolean;
+    disabled: boolean;
+    /** Compute color class from thresholds, mirroring <meter> semantics. */
+    private _level;
+    private _pct;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-meter': CgMeter;
+    }
+}
+//# sourceMappingURL=cg-meter.d.ts.map

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

@@ -0,0 +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"}