@cognivo/components 0.8.0

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

@@ -0,0 +1,339 @@
+import { css as u, LitElement as m, html as c, nothing as p } from "lit";
+import { property as d, state as v, query as g, customElement as h } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { F as y } from "../../chunks/focus-trap-BdRNhSPD.js";
+import { h as x } from "../../chunks/roving-index-BuO0tTba.js";
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? w(t, o) : t, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (s = (a ? l(t, o, s) : l(s)) || s);
+  return a && s && _(t, o, s), s;
+};
+let r = class extends m {
+  constructor() {
+    super(...arguments), this.open = !1, this.placeholder = "Type a command or search...", this.commands = [], this.value = "", this.emptyText = "No results found.", this.loading = !1, this._activeIndex = 0, this._focusTrap = new y();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._focusTrap.deactivate();
+  }
+  updated(e) {
+    e.has("open") && (this.open ? this._onOpen() : this._onClose());
+  }
+  _onOpen() {
+    this._activeIndex = 0, this.dispatchEvent(new CustomEvent("cg-command-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+      this._paletteEl && this._focusTrap.activate(this._paletteEl, {
+        initialFocus: this._inputEl,
+        onEscape: () => {
+          this.open = !1;
+        }
+      });
+    });
+  }
+  _onClose() {
+    this._focusTrap.deactivate(), this.dispatchEvent(new CustomEvent("cg-command-close", { bubbles: !0, composed: !0 }));
+  }
+  get _filteredCommands() {
+    const e = this.value.toLowerCase().trim();
+    return e ? this.commands.filter((t) => {
+      if (t.disabled) return !1;
+      const o = t.label.toLowerCase(), a = (t.keywords || []).join(" ").toLowerCase();
+      return o.includes(e) || a.includes(e);
+    }) : this.commands;
+  }
+  get _groupedCommands() {
+    const e = this._filteredCommands, t = /* @__PURE__ */ new Map();
+    for (const o of e) {
+      const a = o.group || "";
+      t.has(a) || t.set(a, []), t.get(a).push(o);
+    }
+    return Array.from(t.entries()).map(([o, a]) => ({ group: o, items: a }));
+  }
+  _handleInput(e) {
+    this.value = e.target.value, this._activeIndex = 0, this.dispatchEvent(new CustomEvent("cg-command-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleKeydown(e) {
+    if (e.key === " ") return;
+    const { index: t, handled: o } = x(e, {
+      items: this._filteredCommands,
+      activeIndex: this._activeIndex,
+      onSelect: (a) => this._select(a)
+    });
+    o && (e.preventDefault(), this._activeIndex = t);
+  }
+  _select(e) {
+    e.disabled || (this.dispatchEvent(new CustomEvent("cg-command-select", {
+      detail: { id: e.id, command: e },
+      bubbles: !0,
+      composed: !0
+    })), this.open = !1, this.value = "");
+  }
+  render() {
+    const e = this._groupedCommands, t = this._filteredCommands;
+    let o = -1;
+    return c`
+      <div class="backdrop" @click=${() => this.open = !1}></div>
+      <div
+        class="palette"
+        role="dialog"
+        aria-label="Command palette"
+        aria-modal="true"
+        ?hidden=${!this.open}
+      >
+        <slot name="header"></slot>
+        <div class="input-wrap">
+          <cg-icon class="search-icon" name="minimalistic-magnifer-linear" size="sm" aria-hidden="true"></cg-icon>
+          <input
+            type="text"
+            role="combobox"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls="command-list"
+            aria-autocomplete="list"
+            placeholder=${this.placeholder}
+            .value=${this.value}
+            @input=${this._handleInput}
+            @keydown=${this._handleKeydown}
+          />
+        </div>
+        <div class="list" id="command-list" role="listbox">
+          ${this.loading ? c`
+            <div class="loading" aria-busy="true">
+              <cg-spinner size="sm"></cg-spinner>
+              <span>Loading…</span>
+            </div>
+          ` : t.length === 0 ? c`
+            <slot name="empty">
+              <div class="empty">${this.emptyText}</div>
+            </slot>
+          ` : e.map(({ group: a, items: s }) => c`
+            ${a ? c`<div class="group-label">${a}</div>` : p}
+            ${s.map((i) => {
+      o++;
+      const l = o === this._activeIndex;
+      return c`
+                <button
+                  class="item"
+                  role="option"
+                  ?disabled=${i.disabled}
+                  aria-selected=${l ? "true" : "false"}
+                  data-active=${l ? "true" : p}
+                  @click=${() => this._select(i)}
+                  @mouseenter=${() => {
+        this._activeIndex = o;
+      }}
+                >
+                  ${i.icon ? c`<cg-icon class="item-icon" name=${i.icon} size="sm" aria-hidden="true"></cg-icon>` : p}
+                  <span class="item-label">${i.label}</span>
+                  ${i.shortcut ? c`<span class="shortcut">${i.shortcut}</span>` : p}
+                </button>
+              `;
+    })}
+          `)}
+        </div>
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [f, b, u`
+    :host {
+      display: contents;
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: var(--cg-z-index-500);
+      background: var(--cg-color-modal-overlay-background);
+      backdrop-filter: blur(var(--cg-blur-backdrop));
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([open]) .backdrop {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .palette {
+      position: fixed;
+      top: 20%;
+      left: 50%;
+      z-index: var(--cg-z-index-top);
+      width: calc(100% - var(--cg-spacing-32));
+      max-width: var(--cg-component-command-width);
+      max-height: var(--cg-component-command-max-height);
+      display: flex;
+      flex-direction: column;
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-command-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      opacity: 0;
+      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8))) scale(0.96);
+      pointer-events: none;
+      overflow: hidden;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([open]) .palette {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    .input-wrap {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .search-icon {
+      color: var(--cg-color-surface-container-outlined);
+      flex-shrink: 0;
+    }
+    input {
+      flex: 1;
+      border: none;
+      outline: none;
+      background: none;
+      color: var(--cg-color-surface-base-text);
+      font-family: inherit;
+      font-size: var(--cg-font-size-base);
+    }
+    input::placeholder { color: var(--cg-color-surface-container-outlined); }
+
+    .list {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-8);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+    }
+
+    /* Group label — uppercase mono. Extra top margin separates groups
+       visually so the eye groups items by section. First group hugs the top. */
+    .group-label {
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      margin-top: var(--cg-spacing-12);
+      font: 600 var(--cg-font-size-xs) var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .group-label:first-child { margin-top: 0; }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+      /* min-height + real padding instead of fixed height — gives labels room
+         to breathe and lets items grow if content wraps. */
+      min-height: var(--cg-component-command-item-height);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border: none;
+      background: none;
+      color: var(--cg-color-surface-base-text);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-snug);
+      text-align: left;
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-100);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    /* Hover (mouse) AND data-active (keyboard) get the same treatment so both
+       input methods feel instant — no waiting for a state-driven re-render. */
+    .item:hover:not([disabled]),
+    .item[data-active]:not([disabled]) {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+    }
+    .item:active:not([disabled]) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .item[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .item-icon {
+      flex-shrink: 0;
+      color: var(--cg-color-surface-container-outlined);
+      opacity: 0.85;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .item[data-active] .item-icon {
+      color: var(--cg-color-action-primary-background-default);
+      opacity: 1;
+    }
+    .item-label { flex: 1; }
+
+    /* Loading state — small spinner + label, replaces empty/list when loading. */
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+    .shortcut {
+      font: 500 var(--cg-font-size-xs) var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-container-background);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-40);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+n([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+n([
+  d()
+], r.prototype, "placeholder", 2);
+n([
+  d({ type: Array })
+], r.prototype, "commands", 2);
+n([
+  d()
+], r.prototype, "value", 2);
+n([
+  d({ attribute: "empty-text" })
+], r.prototype, "emptyText", 2);
+n([
+  d({ type: Boolean })
+], r.prototype, "loading", 2);
+n([
+  v()
+], r.prototype, "_activeIndex", 2);
+n([
+  g("input")
+], r.prototype, "_inputEl", 2);
+n([
+  g(".palette")
+], r.prototype, "_paletteEl", 2);
+r = n([
+  h("cg-command")
+], r);
+export {
+  r as CgCommand
+};
+//# sourceMappingURL=cg-command.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-command.js","sources":["../../../src/components/cg-command/cg-command.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  group?: string;\n  icon?: string;\n  shortcut?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\n/**\n * @element cg-command\n * Searchable command palette foundation. Combobox pattern with grouped items,\n * keyboard navigation, and type-ahead filtering.\n *\n * @example\n * ```html\n * <cg-command\n *   open\n *   placeholder=\"Type a command...\"\n *   .commands=${[\n *     { id: 'new', label: 'New file', group: 'File', shortcut: '⌘N' },\n *     { id: 'open', label: 'Open file', group: 'File', shortcut: '⌘O' },\n *   ]}\n * ></cg-command>\n * ```\n *\n * @slot header - Content above the input\n * @slot footer - Content below the list\n * @slot empty - Custom empty state\n *\n * @fires {CustomEvent<{id: string, command: CommandItem}>} cg-command-select\n * @fires {CustomEvent<{value: string}>} cg-command-input\n * @fires {CustomEvent} cg-command-open\n * @fires {CustomEvent} cg-command-close\n */\n@customElement('cg-command')\nexport class CgCommand extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\n\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .palette {\n      position: fixed;\n      top: 20%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-command-width);\n      max-height: var(--cg-component-command-max-height);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-command-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8))) scale(0.96);\n      pointer-events: none;\n      overflow: hidden;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .palette {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .search-icon {\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n    }\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n    }\n    input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    .list {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n\n    /* Group label — uppercase mono. Extra top margin separates groups\n       visually so the eye groups items by section. First group hugs the top. */\n    .group-label {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      margin-top: var(--cg-spacing-12);\n      font: 600 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    .group-label:first-child { margin-top: 0; }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      /* min-height + real padding instead of fixed height — gives labels room\n         to breathe and lets items grow if content wraps. */\n      min-height: var(--cg-component-command-item-height);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      text-align: left;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Hover (mouse) AND data-active (keyboard) get the same treatment so both\n       input methods feel instant — no waiting for a state-driven re-render. */\n    .item:hover:not([disabled]),\n    .item[data-active]:not([disabled]) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item:active:not([disabled]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .item[disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    .item-icon {\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.85;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item[data-active] .item-icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 1;\n    }\n    .item-label { flex: 1; }\n\n    /* Loading state — small spinner + label, replaces empty/list when loading. */\n    .loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .shortcut {\n      font: 500 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-container-background);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-40);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placeholder = 'Type a command or search...';\n  @property({ type: Array }) commands: CommandItem[] = [];\n  @property() value = '';\n  @property({ attribute: 'empty-text' }) emptyText = 'No results found.';\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _activeIndex = 0;\n\n  @query('input') private _inputEl!: HTMLInputElement;\n  @query('.palette') private _paletteEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-open', { bubbles: true, composed: true }));\n    requestAnimationFrame(() => {\n      if (this._paletteEl) {\n        this._focusTrap.activate(this._paletteEl, {\n          initialFocus: this._inputEl,\n          onEscape: () => { this.open = false; },\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-command-close', { bubbles: true, composed: true }));\n  }\n\n  private get _filteredCommands(): CommandItem[] {\n    const query = this.value.toLowerCase().trim();\n    if (!query) return this.commands;\n    return this.commands.filter(c => {\n      if (c.disabled) return false;\n      const label = c.label.toLowerCase();\n      const keywords = (c.keywords || []).join(' ').toLowerCase();\n      return label.includes(query) || keywords.includes(query);\n    });\n  }\n\n  private get _groupedCommands(): Array<{ group: string; items: CommandItem[] }> {\n    const filtered = this._filteredCommands;\n    const groups = new Map<string, CommandItem[]>();\n    for (const cmd of filtered) {\n      const group = cmd.group || '';\n      if (!groups.has(group)) groups.set(group, []);\n      groups.get(group)!.push(cmd);\n    }\n    return Array.from(groups.entries()).map(([group, items]) => ({ group, items }));\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-input', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    // Enter-only select — Space is reserved for typing the query.\n    if (e.key === ' ') return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this._filteredCommands,\n      activeIndex: this._activeIndex,\n      onSelect: item => this._select(item),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  }\n\n  private _select(item: CommandItem): void {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-command-select', {\n      detail: { id: item.id, command: item },\n      bubbles: true,\n      composed: true,\n    }));\n    this.open = false;\n    this.value = '';\n  }\n\n  override render() {\n    const groups = this._groupedCommands;\n    const filtered = this._filteredCommands;\n    let flatIndex = -1;\n\n    return html`\n      <div class=\"backdrop\" @click=${() => this.open = false}></div>\n      <div\n        class=\"palette\"\n        role=\"dialog\"\n        aria-label=\"Command palette\"\n        aria-modal=\"true\"\n        ?hidden=${!this.open}\n      >\n        <slot name=\"header\"></slot>\n        <div class=\"input-wrap\">\n          <cg-icon class=\"search-icon\" name=\"minimalistic-magnifer-linear\" size=\"sm\" aria-hidden=\"true\"></cg-icon>\n          <input\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"command-list\"\n            aria-autocomplete=\"list\"\n            placeholder=${this.placeholder}\n            .value=${this.value}\n            @input=${this._handleInput}\n            @keydown=${this._handleKeydown}\n          />\n        </div>\n        <div class=\"list\" id=\"command-list\" role=\"listbox\">\n          ${this.loading ? html`\n            <div class=\"loading\" aria-busy=\"true\">\n              <cg-spinner size=\"sm\"></cg-spinner>\n              <span>Loading…</span>\n            </div>\n          ` : filtered.length === 0 ? html`\n            <slot name=\"empty\">\n              <div class=\"empty\">${this.emptyText}</div>\n            </slot>\n          ` : groups.map(({ group, items }) => html`\n            ${group ? html`<div class=\"group-label\">${group}</div>` : nothing}\n            ${items.map(item => {\n              flatIndex++;\n              const isActive = flatIndex === this._activeIndex;\n              return html`\n                <button\n                  class=\"item\"\n                  role=\"option\"\n                  ?disabled=${item.disabled}\n                  aria-selected=${isActive ? 'true' : 'false'}\n                  data-active=${isActive ? 'true' : nothing}\n                  @click=${() => this._select(item)}\n                  @mouseenter=${() => { this._activeIndex = flatIndex; }}\n                >\n                  ${item.icon ? html`<cg-icon class=\"item-icon\" name=${item.icon} size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n                  <span class=\"item-label\">${item.label}</span>\n                  ${item.shortcut ? html`<span class=\"shortcut\">${item.shortcut}</span>` : nothing}\n                </button>\n              `;\n            })}\n          `)}\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-command': CgCommand;\n  }\n}\n"],"names":["CgCommand","LitElement","FocusTrap","changed","query","c","label","keywords","filtered","groups","cmd","group","items","index","handled","handleRovingKey","item","flatIndex","html","nothing","isActive","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;AA2CO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwKuC,KAAA,OAAO,IACvC,KAAA,cAAc,+BACC,KAAA,WAA0B,CAAA,GACzC,KAAA,QAAQ,IACmB,KAAA,YAAY,qBACtB,KAAA,UAAU,IAE9B,KAAQ,eAAe,GAKhC,KAAQ,aAAa,IAAIC,EAAA;AAAA,EAAU;AAAA,EAE1B,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,WAAW,WAAA;AAAA,EAClB;AAAA,EAES,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OAAM,KAAK,QAAA,SACV,SAAA;AAAA,EAEd;AAAA,EAEQ,UAAgB;AACtB,SAAK,eAAe,GACpB,KAAK,cAAc,IAAI,YAAY,mBAAmB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACxF,sBAAsB,MAAM;AAC1B,MAAI,KAAK,cACP,KAAK,WAAW,SAAS,KAAK,YAAY;AAAA,QACxC,cAAc,KAAK;AAAA,QACnB,UAAU,MAAM;AAAE,eAAK,OAAO;AAAA,QAAO;AAAA,MAAA,CACtC;AAAA,IAEL,CAAC;AAAA,EACH;AAAA,EAEQ,WAAiB;AACvB,SAAK,WAAW,WAAA,GAChB,KAAK,cAAc,IAAI,YAAY,oBAAoB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC3F;AAAA,EAEA,IAAY,oBAAmC;AAC7C,UAAMC,IAAQ,KAAK,MAAM,YAAA,EAAc,KAAA;AACvC,WAAKA,IACE,KAAK,SAAS,OAAO,CAAAC,MAAK;AAC/B,UAAIA,EAAE,SAAU,QAAO;AACvB,YAAMC,IAAQD,EAAE,MAAM,YAAA,GAChBE,KAAYF,EAAE,YAAY,CAAA,GAAI,KAAK,GAAG,EAAE,YAAA;AAC9C,aAAOC,EAAM,SAASF,CAAK,KAAKG,EAAS,SAASH,CAAK;AAAA,IACzD,CAAC,IANkB,KAAK;AAAA,EAO1B;AAAA,EAEA,IAAY,mBAAmE;AAC7E,UAAMI,IAAW,KAAK,mBAChBC,wBAAa,IAAA;AACnB,eAAWC,KAAOF,GAAU;AAC1B,YAAMG,IAAQD,EAAI,SAAS;AAC3B,MAAKD,EAAO,IAAIE,CAAK,KAAGF,EAAO,IAAIE,GAAO,EAAE,GAC5CF,EAAO,IAAIE,CAAK,EAAG,KAAKD,CAAG;AAAA,IAC7B;AACA,WAAO,MAAM,KAAKD,EAAO,QAAA,CAAS,EAAE,IAAI,CAAC,CAACE,GAAOC,CAAK,OAAO,EAAE,OAAAD,GAAO,OAAAC,IAAQ;AAAA,EAChF;AAAA,EAEQ,aAAa,GAAgB;AACnC,SAAK,QAAS,EAAE,OAA4B,OAC5C,KAAK,eAAe,GACpB,KAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,MACrD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAe,GAAwB;AAE7C,QAAI,EAAE,QAAQ,IAAK;AACnB,UAAM,EAAE,OAAAC,GAAO,SAAAC,MAAYC,EAAgB,GAAG;AAAA,MAC5C,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,UAAU,CAAAC,MAAQ,KAAK,QAAQA,CAAI;AAAA,IAAA,CACpC;AACD,IAAIF,MACF,EAAE,eAAA,GACF,KAAK,eAAeD;AAAA,EAExB;AAAA,EAEQ,QAAQG,GAAyB;AACvC,IAAIA,EAAK,aACT,KAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,QAAQ,EAAE,IAAIA,EAAK,IAAI,SAASA,EAAA;AAAA,MAChC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC,GACF,KAAK,OAAO,IACZ,KAAK,QAAQ;AAAA,EACf;AAAA,EAES,SAAS;AAChB,UAAMP,IAAS,KAAK,kBACdD,IAAW,KAAK;AACtB,QAAIS,IAAY;AAEhB,WAAOC;AAAA,qCAC0B,MAAM,KAAK,OAAO,EAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAM1C,CAAC,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQA,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA;AAAA,0BAG9B,KAAK,WAAW;AAAA,qBACrB,KAAK,KAAK;AAAA,qBACV,KAAK,YAAY;AAAA,uBACf,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,YAI9B,KAAK,UAAUA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKbV,EAAS,WAAW,IAAIU;AAAA;AAAA,mCAEH,KAAK,SAAS;AAAA;AAAA,cAEnCT,EAAO,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,QAAYM;AAAA,cACjCP,IAAQO,6BAAgCP,CAAK,WAAWQ,CAAO;AAAA,cAC/DP,EAAM,IAAI,CAAAI,MAAQ;AAClB,MAAAC;AACA,YAAMG,IAAWH,MAAc,KAAK;AACpC,aAAOC;AAAA;AAAA;AAAA;AAAA,8BAISF,EAAK,QAAQ;AAAA,kCACTI,IAAW,SAAS,OAAO;AAAA,gCAC7BA,IAAW,SAASD,CAAO;AAAA,2BAChC,MAAM,KAAK,QAAQH,CAAI,CAAC;AAAA,gCACnB,MAAM;AAAE,aAAK,eAAeC;AAAA,MAAW,CAAC;AAAA;AAAA,oBAEpDD,EAAK,OAAOE,oCAAuCF,EAAK,IAAI,6CAA6CG,CAAO;AAAA,6CACvFH,EAAK,KAAK;AAAA,oBACnCA,EAAK,WAAWE,2BAA8BF,EAAK,QAAQ,YAAYG,CAAO;AAAA;AAAA;AAAA,IAGtF,CAAC,CAAC;AAAA,WACH,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV;AACF;AA/UanB,EACK,SAAS,CAACqB,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqKnD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxK/BzB,EAwKiC,WAAA,QAAA,CAAA;AAChCwB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzKCzB,EAyKC,WAAA,eAAA,CAAA;AACewB,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA1KdzB,EA0KgB,WAAA,YAAA,CAAA;AACfwB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA3KCzB,EA2KC,WAAA,SAAA,CAAA;AAC2BwB,EAAA;AAAA,EAAtCC,EAAS,EAAE,WAAW,aAAA,CAAc;AAAA,GA5K1BzB,EA4K4B,WAAA,aAAA,CAAA;AACVwB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA7KhBzB,EA6KkB,WAAA,WAAA,CAAA;AAEZwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA/KI1B,EA+KM,WAAA,gBAAA,CAAA;AAEOwB,EAAA;AAAA,EAAvBpB,EAAM,OAAO;AAAA,GAjLHJ,EAiLa,WAAA,YAAA,CAAA;AACGwB,EAAA;AAAA,EAA1BpB,EAAM,UAAU;AAAA,GAlLNJ,EAkLgB,WAAA,cAAA,CAAA;AAlLhBA,IAANwB,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACd3B,CAAA;"}

package/dist/components/cg-context-menu/cg-context-menu.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+}
+/**
+ * @element cg-context-menu
+ * Right-click context menu with keyboard navigation, shortcuts, and danger variants.
+ *
+ * @example
+ * ```html
+ * <cg-context-menu .items=${[
+ *   { id: 'copy', label: 'Copy', shortcut: '⌘C' },
+ *   { id: 'cut', label: 'Cut', shortcut: '⌘X' },
+ *   { separator: true, id: 'sep1', label: '' },
+ *   { id: 'delete', label: 'Delete', danger: true },
+ * ]}>
+ *   <div>Right-click me</div>
+ * </cg-context-menu>
+ * ```
+ *
+ * @slot - Element to attach contextmenu listener to
+ *
+ * @fires {CustomEvent<{id: string, item: ContextMenuItem}>} cg-context-menu-select
+ * @fires {CustomEvent} cg-context-menu-open
+ * @fires {CustomEvent} cg-context-menu-close
+ */
+export declare class CgContextMenu extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    items: ContextMenuItem[];
+    disabled: boolean;
+    private _activeIndex;
+    private _menuEl;
+    private _disposeOutsideClick;
+    /** Long-press support — touch equivalent of right-click. Opens the menu
+     * after 500ms of stationary press. Auto-cancels if the pointer moves more
+     * than a few pixels (a drag, not a press). */
+    private _pressTimer;
+    private _pressStartX;
+    private _pressStartY;
+    private static readonly LONG_PRESS_MS;
+    private static readonly LONG_PRESS_TOLERANCE_PX;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _cancelLongPress;
+    private _onContextMenu;
+    private _close;
+    private _handleItemClick;
+    private _handleKeydown;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-context-menu': CgContextMenu;
+    }
+}
+//# sourceMappingURL=cg-context-menu.d.ts.map

package/dist/components/cg-context-menu/cg-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/cg-context-menu/cg-context-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,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;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAiBnB;IAEyC,IAAI,UAAS;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAM;IACb,QAAQ,UAAS;IAEpD,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,OAAO,CAAe;IAE9C,OAAO,CAAC,oBAAoB,CAA6B;IAEzD;;kDAE8C;IAC9C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAO;IAC5C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,uBAAuB,CAAK;IAE3C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAarC,OAAO,CAAC,cAAc,CAepB;IAEF,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,cAAc,CA4BpB;IAEF,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc,CAapB;IAEO,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU5C,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-context-menu/cg-context-menu.js

@@ -0,0 +1,165 @@
+import { css as p, LitElement as u, html as l, nothing as d } from "lit";
+import { property as h, state as _, query as m, customElement as v } from "lit/decorators.js";
+import { h as f, r as b, m as E } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as g } from "../../chunks/floating-DfsaYJnh.js";
+import { b as L } from "../../chunks/outside-click-CP1P1fK3.js";
+import { h as x } from "../../chunks/roving-index-BuO0tTba.js";
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, e, n, i) => {
+  for (var o = i > 1 ? void 0 : i ? C(e, n) : e, c = t.length - 1, a; c >= 0; c--)
+    (a = t[c]) && (o = (i ? a(e, n, o) : a(o)) || o);
+  return i && o && y(e, n, o), o;
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.open = !1, this.items = [], this.disabled = !1, this._activeIndex = -1, this._disposeOutsideClick = null, this._pressTimer = null, this._pressStartX = 0, this._pressStartY = 0, this._onPointerDown = (t) => {
+      t.pointerType !== "touch" && t.pointerType !== "pen" || this.disabled || (this._pressStartX = t.clientX, this._pressStartY = t.clientY, this._pressTimer = window.setTimeout(() => {
+        const e = new MouseEvent("contextmenu", {
+          clientX: this._pressStartX,
+          clientY: this._pressStartY,
+          bubbles: !0
+        });
+        this._onContextMenu(e);
+      }, s.LONG_PRESS_MS));
+    }, this._onPointerMove = (t) => {
+      if (this._pressTimer === null) return;
+      const e = Math.abs(t.clientX - this._pressStartX), n = Math.abs(t.clientY - this._pressStartY);
+      (e > s.LONG_PRESS_TOLERANCE_PX || n > s.LONG_PRESS_TOLERANCE_PX) && this._cancelLongPress();
+    }, this._cancelLongPress = () => {
+      this._pressTimer !== null && (window.clearTimeout(this._pressTimer), this._pressTimer = null);
+    }, this._onContextMenu = (t) => {
+      if (this.disabled) return;
+      const e = t;
+      e.preventDefault(), this.open = !0, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-context-menu-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+        if (!this._menuEl) return;
+        g({
+          getBoundingClientRect: () => ({
+            top: e.clientY,
+            left: e.clientX,
+            width: 1,
+            height: 1,
+            bottom: e.clientY + 1,
+            right: e.clientX + 1,
+            x: e.clientX,
+            y: e.clientY,
+            toJSON() {
+              return this;
+            }
+          })
+        }, this._menuEl, {
+          placement: "bottom-start",
+          offset: 0,
+          flip: !0,
+          shift: !0
+        });
+      }), this._disposeOutsideClick?.(), this._disposeOutsideClick = L(this, () => this._close());
+    }, this._handleKeydown = (t) => {
+      if (!this.open) return;
+      const { index: e, handled: n } = x(t, {
+        items: this.items,
+        activeIndex: this._activeIndex,
+        isSkippable: (i) => !!(i.separator || i.disabled),
+        onSelect: (i) => this._handleItemClick(i),
+        onEscape: () => this._close()
+      });
+      n && (t.preventDefault(), this._activeIndex = e);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._cancelLongPress), this.addEventListener("pointercancel", this._cancelLongPress), this.addEventListener("pointerleave", this._cancelLongPress);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._cancelLongPress), this.removeEventListener("pointercancel", this._cancelLongPress), this.removeEventListener("pointerleave", this._cancelLongPress), this._cancelLongPress(), this._disposeOutsideClick?.(), this._disposeOutsideClick = null;
+  }
+  _close() {
+    this.open = !1, this._activeIndex = -1, this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this.dispatchEvent(new CustomEvent("cg-context-menu-close", { bubbles: !0, composed: !0 }));
+  }
+  _handleItemClick(t) {
+    t.disabled || t.separator || (this.dispatchEvent(new CustomEvent("cg-context-menu-select", {
+      detail: { id: t.id, item: t },
+      bubbles: !0,
+      composed: !0
+    })), this._close());
+  }
+  updated(t) {
+    t.has("open") && (this.open ? document.addEventListener("keydown", this._handleKeydown) : document.removeEventListener("keydown", this._handleKeydown));
+  }
+  render() {
+    let t = -1;
+    return l`
+      <div class="trigger">
+        <slot></slot>
+      </div>
+      <ul
+        class="menu"
+        role="menu"
+        aria-orientation="vertical"
+        ?hidden=${!this.open}
+      >
+        ${this.items.map((e, n) => {
+      if (e.separator)
+        return l`<li role="separator" class="divider"></li>`;
+      t++;
+      const i = t === this._activeIndex;
+      return l`
+            <li role="none">
+              <button
+                class="menu-item ${e.danger ? "danger" : ""}"
+                role="menuitem"
+                ?disabled=${e.disabled}
+                data-active=${i ? "true" : d}
+                style="--stagger-index: ${n}"
+                @click=${() => this._handleItemClick(e)}
+              >
+                ${e.icon ? l`<cg-icon class="menu-item-icon" name=${e.icon} size="sm"></cg-icon>` : d}
+                <span>${e.label}</span>
+                ${e.shortcut ? l`<span class="menu-item-shortcut">${e.shortcut}</span>` : d}
+              </button>
+            </li>
+          `;
+    })}
+      </ul>
+    `;
+  }
+};
+s.styles = [f, b, E, p`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .trigger { display: inline-flex; }
+
+    /* Context-menu-specific positioning. Visual styling (surface, items,
+       icons, shortcut, divider, animation, rounded variants) inherited
+       from menuListStyles for consistency with cg-dropdown / cg-menubar /
+       cg-split-button. */
+    .menu {
+      position: fixed;
+      z-index: var(--cg-z-index-500);
+      list-style: none;
+    }
+  `];
+s.LONG_PRESS_MS = 500;
+s.LONG_PRESS_TOLERANCE_PX = 8;
+r([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+r([
+  h({ type: Array })
+], s.prototype, "items", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+r([
+  _()
+], s.prototype, "_activeIndex", 2);
+r([
+  m(".menu")
+], s.prototype, "_menuEl", 2);
+s = r([
+  v("cg-context-menu")
+], s);
+export {
+  s as CgContextMenu
+};
+//# sourceMappingURL=cg-context-menu.js.map

package/dist/components/cg-context-menu/cg-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-context-menu.js","sources":["../../../src/components/cg-context-menu/cg-context-menu.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, menuListStyles } from '../../styles/index.js';\nimport { applyFloatingPosition } from '../../utils/floating.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface ContextMenuItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  separator?: boolean;\n}\n\n/**\n * @element cg-context-menu\n * Right-click context menu with keyboard navigation, shortcuts, and danger variants.\n *\n * @example\n * ```html\n * <cg-context-menu .items=${[\n *   { id: 'copy', label: 'Copy', shortcut: '⌘C' },\n *   { id: 'cut', label: 'Cut', shortcut: '⌘X' },\n *   { separator: true, id: 'sep1', label: '' },\n *   { id: 'delete', label: 'Delete', danger: true },\n * ]}>\n *   <div>Right-click me</div>\n * </cg-context-menu>\n * ```\n *\n * @slot - Element to attach contextmenu listener to\n *\n * @fires {CustomEvent<{id: string, item: ContextMenuItem}>} cg-context-menu-select\n * @fires {CustomEvent} cg-context-menu-open\n * @fires {CustomEvent} cg-context-menu-close\n */\n@customElement('cg-context-menu')\nexport class CgContextMenu extends LitElement {\n  static override styles = [hostBlock, reducedMotion, menuListStyles, css`\n    :host {\n      display: inline-block;\n      position: relative;\n    }\n\n    .trigger { display: inline-flex; }\n\n    /* Context-menu-specific positioning. Visual styling (surface, items,\n       icons, shortcut, divider, animation, rounded variants) inherited\n       from menuListStyles for consistency with cg-dropdown / cg-menubar /\n       cg-split-button. */\n    .menu {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n      list-style: none;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Array }) items: ContextMenuItem[] = [];\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _activeIndex = -1;\n\n  @query('.menu') private _menuEl!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  /** Long-press support — touch equivalent of right-click. Opens the menu\n   * after 500ms of stationary press. Auto-cancels if the pointer moves more\n   * than a few pixels (a drag, not a press). */\n  private _pressTimer: number | null = null;\n  private _pressStartX = 0;\n  private _pressStartY = 0;\n  private static readonly LONG_PRESS_MS = 500;\n  private static readonly LONG_PRESS_TOLERANCE_PX = 8;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('contextmenu', this._onContextMenu);\n    this.addEventListener('pointerdown', this._onPointerDown);\n    this.addEventListener('pointermove', this._onPointerMove);\n    this.addEventListener('pointerup', this._cancelLongPress);\n    this.addEventListener('pointercancel', this._cancelLongPress);\n    this.addEventListener('pointerleave', this._cancelLongPress);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('contextmenu', this._onContextMenu);\n    this.removeEventListener('pointerdown', this._onPointerDown);\n    this.removeEventListener('pointermove', this._onPointerMove);\n    this.removeEventListener('pointerup', this._cancelLongPress);\n    this.removeEventListener('pointercancel', this._cancelLongPress);\n    this.removeEventListener('pointerleave', this._cancelLongPress);\n    this._cancelLongPress();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    // Only touch / pen — mouse uses contextmenu.\n    if (e.pointerType !== 'touch' && e.pointerType !== 'pen') return;\n    if (this.disabled) return;\n    this._pressStartX = e.clientX;\n    this._pressStartY = e.clientY;\n    this._pressTimer = window.setTimeout(() => {\n      // Synthesize a contextmenu-equivalent event at the press location.\n      const synthetic = new MouseEvent('contextmenu', {\n        clientX: this._pressStartX,\n        clientY: this._pressStartY,\n        bubbles: true,\n      });\n      this._onContextMenu(synthetic);\n    }, CgContextMenu.LONG_PRESS_MS);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (this._pressTimer === null) return;\n    const dx = Math.abs(e.clientX - this._pressStartX);\n    const dy = Math.abs(e.clientY - this._pressStartY);\n    if (dx > CgContextMenu.LONG_PRESS_TOLERANCE_PX || dy > CgContextMenu.LONG_PRESS_TOLERANCE_PX) {\n      this._cancelLongPress();\n    }\n  };\n\n  private _cancelLongPress = (): void => {\n    if (this._pressTimer !== null) {\n      window.clearTimeout(this._pressTimer);\n      this._pressTimer = null;\n    }\n  };\n\n  private _onContextMenu = (e: Event): void => {\n    if (this.disabled) return;\n    const mouseEvent = e as MouseEvent;\n    mouseEvent.preventDefault();\n\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-context-menu-open', { bubbles: true, composed: true }));\n\n    // Position at mouse coords — use a synthetic \"reference\" element positioned at the pointer.\n    requestAnimationFrame(() => {\n      if (!this._menuEl) return;\n      const pointRef = {\n        getBoundingClientRect: () => ({\n          top: mouseEvent.clientY, left: mouseEvent.clientX,\n          width: 1, height: 1,\n          bottom: mouseEvent.clientY + 1, right: mouseEvent.clientX + 1,\n          x: mouseEvent.clientX, y: mouseEvent.clientY,\n          toJSON() { return this; },\n        }) as DOMRect,\n      } as Element;\n      applyFloatingPosition(pointRef, this._menuEl, {\n        placement: 'bottom-start', offset: 0, flip: true, shift: true,\n      });\n    });\n\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n  };\n\n  private _close(): void {\n    this.open = false;\n    this._activeIndex = -1;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    this.dispatchEvent(new CustomEvent('cg-context-menu-close', { bubbles: true, composed: true }));\n  }\n\n  private _handleItemClick(item: ContextMenuItem): void {\n    if (item.disabled || item.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-context-menu-select', {\n      detail: { id: item.id, item },\n      bubbles: true,\n      composed: true,\n    }));\n    this._close();\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this.open) return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.separator || i.disabled),\n      onSelect: item => this._handleItemClick(item),\n      onEscape: () => this._close(),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  };\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) {\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  override render() {\n    let selectableIdx = -1;\n    return html`\n      <div class=\"trigger\">\n        <slot></slot>\n      </div>\n      <ul\n        class=\"menu\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        ?hidden=${!this.open}\n      >\n        ${this.items.map((item, idx) => {\n          if (item.separator) {\n            return html`<li role=\"separator\" class=\"divider\"></li>`;\n          }\n          selectableIdx++;\n          const isActive = selectableIdx === this._activeIndex;\n          return html`\n            <li role=\"none\">\n              <button\n                class=\"menu-item ${item.danger ? 'danger' : ''}\"\n                role=\"menuitem\"\n                ?disabled=${item.disabled}\n                data-active=${isActive ? 'true' : nothing}\n                style=\"--stagger-index: ${idx}\"\n                @click=${() => this._handleItemClick(item)}\n              >\n                ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=${item.icon} size=\"sm\"></cg-icon>` : nothing}\n                <span>${item.label}</span>\n                ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n              </button>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-context-menu': CgContextMenu;\n  }\n}\n"],"names":["CgContextMenu","LitElement","e","synthetic","dx","dy","mouseEvent","applyFloatingPosition","bindOutsideClick","index","handled","handleRovingKey","item","changed","selectableIdx","html","idx","isActive","nothing","hostBlock","reducedMotion","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}