@cognivo/components 0.8.0

package/dist/chunks/focus-trap-BdRNhSPD.js

@@ -0,0 +1,53 @@
+const a = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), audio[controls], video[controls], summary, details, iframe, object, embed';
+function c(i) {
+  const t = i instanceof HTMLElement && i.shadowRoot ? [...i.shadowRoot.querySelectorAll(a)] : i instanceof ShadowRoot ? [...i.querySelectorAll(a)] : [], e = i instanceof HTMLElement ? [...i.querySelectorAll(a)] : [];
+  return [...t, ...e].filter((s) => !(s.closest("[hidden]") || s.offsetParent === null && s.tagName !== "INPUT"));
+}
+class r {
+  constructor() {
+    this._root = null, this._previousFocus = null, this._options = {}, this._active = !1, this._handleKeydown = (t) => {
+      if (!this._active || !this._root) return;
+      if (t.key === "Escape" && this._options.handleEscape) {
+        t.preventDefault(), this._options.onEscape?.();
+        return;
+      }
+      if (t.key !== "Tab") return;
+      const e = c(this._root);
+      if (e.length === 0) {
+        t.preventDefault();
+        return;
+      }
+      const s = e[0], o = e[e.length - 1], n = this._root.shadowRoot?.activeElement || document.activeElement;
+      t.shiftKey ? (n === s || !e.includes(n)) && (t.preventDefault(), o.focus()) : n === o && (t.preventDefault(), s.focus());
+    };
+  }
+  activate(t, e = {}) {
+    this._active && this.deactivate(), this._root = t, this._options = { returnFocus: !0, handleEscape: !0, ...e }, this._previousFocus = document.activeElement, this._active = !0, t.addEventListener("keydown", this._handleKeydown), requestAnimationFrame(() => {
+      if (!this._active || !this._root) return;
+      const s = this._options.initialFocus;
+      if (s)
+        s.focus();
+      else {
+        const o = c(this._root);
+        o.length > 0 && o[0].focus();
+      }
+    });
+  }
+  deactivate() {
+    if (!(!this._active || !this._root)) {
+      if (this._root.removeEventListener("keydown", this._handleKeydown), this._active = !1, this._options.returnFocus && this._previousFocus)
+        try {
+          this._previousFocus.focus();
+        } catch {
+        }
+      this._root = null, this._previousFocus = null;
+    }
+  }
+  isActive() {
+    return this._active;
+  }
+}
+export {
+  r as F
+};
+//# sourceMappingURL=focus-trap-BdRNhSPD.js.map

package/dist/chunks/focus-trap-BdRNhSPD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-BdRNhSPD.js","sources":["../../src/utils/focus-trap.ts"],"sourcesContent":["/**\n * Focus trap utility — shared by cg-modal, cg-popover, cg-alert-dialog, cg-command, cg-context-menu.\n * Extracted from the focus trap logic in cg-modal._handleKeydown.\n */\n\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), ' +\n  'textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), audio[controls], video[controls], ' +\n  'summary, details, iframe, object, embed';\n\n/**\n * Returns all visible, non-disabled, focusable elements within a root.\n * Walks both shadow DOM and light DOM.\n */\nexport function getFocusableElements(root: HTMLElement | ShadowRoot): HTMLElement[] {\n  const shadowFocusable = root instanceof HTMLElement && root.shadowRoot\n    ? [...root.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]\n    : root instanceof ShadowRoot\n      ? [...root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]\n      : [];\n\n  const lightFocusable = root instanceof HTMLElement\n    ? [...root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]\n    : [];\n\n  return [...shadowFocusable, ...lightFocusable].filter(el => {\n    if (el.closest('[hidden]')) return false;\n    if (el.offsetParent === null && el.tagName !== 'INPUT') return false;\n    return true;\n  });\n}\n\nexport interface FocusTrapOptions {\n  /** Element to focus first when activated. Defaults to first focusable element. */\n  initialFocus?: HTMLElement | null | undefined;\n  /** Return focus to the previously active element on deactivate. Default: true */\n  returnFocus?: boolean | undefined;\n  /** Called when Escape key is pressed. */\n  onEscape?: (() => void) | undefined;\n  /** Whether to handle Escape key. Default: true */\n  handleEscape?: boolean | undefined;\n}\n\n/**\n * Manages focus trapping within a root element.\n * - Activates: captures prior focus, focuses initial element, binds keydown.\n * - Deactivates: unbinds keydown, optionally returns focus to prior element.\n * - Handles Tab/Shift+Tab cycling within the trap.\n * - Optionally handles Escape.\n */\nexport class FocusTrap {\n  private _root: HTMLElement | null = null;\n  private _previousFocus: HTMLElement | null = null;\n  private _options: FocusTrapOptions = {};\n  private _active = false;\n\n  activate(root: HTMLElement, options: FocusTrapOptions = {}): void {\n    if (this._active) this.deactivate();\n\n    this._root = root;\n    this._options = { returnFocus: true, handleEscape: true, ...options };\n    this._previousFocus = document.activeElement as HTMLElement | null;\n    this._active = true;\n\n    root.addEventListener('keydown', this._handleKeydown);\n\n    // Focus initial element on next frame to allow render\n    requestAnimationFrame(() => {\n      if (!this._active || !this._root) return;\n      const initial = this._options.initialFocus;\n      if (initial) {\n        initial.focus();\n      } else {\n        const focusable = getFocusableElements(this._root);\n        if (focusable.length > 0) focusable[0]!.focus();\n      }\n    });\n  }\n\n  deactivate(): void {\n    if (!this._active || !this._root) return;\n\n    this._root.removeEventListener('keydown', this._handleKeydown);\n    this._active = false;\n\n    if (this._options.returnFocus && this._previousFocus) {\n      try { this._previousFocus.focus(); } catch {}\n    }\n\n    this._root = null;\n    this._previousFocus = null;\n  }\n\n  isActive(): boolean {\n    return this._active;\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._active || !this._root) return;\n\n    if (e.key === 'Escape' && this._options.handleEscape) {\n      e.preventDefault();\n      this._options.onEscape?.();\n      return;\n    }\n\n    if (e.key !== 'Tab') return;\n\n    const focusable = getFocusableElements(this._root);\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const first = focusable[0]!;\n    const last = focusable[focusable.length - 1]!;\n    const active = (this._root.shadowRoot?.activeElement as HTMLElement) || (document.activeElement as HTMLElement);\n\n    if (e.shiftKey) {\n      if (active === first || !focusable.includes(active)) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      if (active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  };\n}\n"],"names":["FOCUSABLE_SELECTOR","getFocusableElements","root","shadowFocusable","lightFocusable","el","FocusTrap","e","focusable","first","last","active","options","initial"],"mappings":"AAKA,MAAMA,IACJ;AAQK,SAASC,EAAqBC,GAA+C;AAClF,QAAMC,IAAkBD,aAAgB,eAAeA,EAAK,aACxD,CAAC,GAAGA,EAAK,WAAW,iBAA8BF,CAAkB,CAAC,IACrEE,aAAgB,aACd,CAAC,GAAGA,EAAK,iBAA8BF,CAAkB,CAAC,IAC1D,CAAA,GAEAI,IAAiBF,aAAgB,cACnC,CAAC,GAAGA,EAAK,iBAA8BF,CAAkB,CAAC,IAC1D,CAAA;AAEJ,SAAO,CAAC,GAAGG,GAAiB,GAAGC,CAAc,EAAE,OAAO,CAAAC,MAChD,EAAAA,EAAG,QAAQ,UAAU,KACrBA,EAAG,iBAAiB,QAAQA,EAAG,YAAY,QAEhD;AACH;AAoBO,MAAMC,EAAU;AAAA,EAAhB,cAAA;AACL,SAAQ,QAA4B,MACpC,KAAQ,iBAAqC,MAC7C,KAAQ,WAA6B,CAAA,GACrC,KAAQ,UAAU,IA2ClB,KAAQ,iBAAiB,CAACC,MAA2B;AACnD,UAAI,CAAC,KAAK,WAAW,CAAC,KAAK,MAAO;AAElC,UAAIA,EAAE,QAAQ,YAAY,KAAK,SAAS,cAAc;AACpD,QAAAA,EAAE,eAAA,GACF,KAAK,SAAS,WAAA;AACd;AAAA,MACF;AAEA,UAAIA,EAAE,QAAQ,MAAO;AAErB,YAAMC,IAAYP,EAAqB,KAAK,KAAK;AACjD,UAAIO,EAAU,WAAW,GAAG;AAC1B,QAAAD,EAAE,eAAA;AACF;AAAA,MACF;AAEA,YAAME,IAAQD,EAAU,CAAC,GACnBE,IAAOF,EAAUA,EAAU,SAAS,CAAC,GACrCG,IAAU,KAAK,MAAM,YAAY,iBAAkC,SAAS;AAElF,MAAIJ,EAAE,YACAI,MAAWF,KAAS,CAACD,EAAU,SAASG,CAAM,OAChDJ,EAAE,eAAA,GACFG,EAAK,MAAA,KAGHC,MAAWD,MACbH,EAAE,eAAA,GACFE,EAAM,MAAA;AAAA,IAGZ;AAAA,EAAA;AAAA,EAzEA,SAASP,GAAmBU,IAA4B,IAAU;AAChE,IAAI,KAAK,WAAS,KAAK,WAAA,GAEvB,KAAK,QAAQV,GACb,KAAK,WAAW,EAAE,aAAa,IAAM,cAAc,IAAM,GAAGU,EAAA,GAC5D,KAAK,iBAAiB,SAAS,eAC/B,KAAK,UAAU,IAEfV,EAAK,iBAAiB,WAAW,KAAK,cAAc,GAGpD,sBAAsB,MAAM;AAC1B,UAAI,CAAC,KAAK,WAAW,CAAC,KAAK,MAAO;AAClC,YAAMW,IAAU,KAAK,SAAS;AAC9B,UAAIA;AACF,QAAAA,EAAQ,MAAA;AAAA,WACH;AACL,cAAML,IAAYP,EAAqB,KAAK,KAAK;AACjD,QAAIO,EAAU,SAAS,KAAGA,EAAU,CAAC,EAAG,MAAA;AAAA,MAC1C;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,aAAmB;AACjB,QAAI,GAAC,KAAK,WAAW,CAAC,KAAK,QAK3B;AAAA,UAHA,KAAK,MAAM,oBAAoB,WAAW,KAAK,cAAc,GAC7D,KAAK,UAAU,IAEX,KAAK,SAAS,eAAe,KAAK;AACpC,YAAI;AAAE,eAAK,eAAe,MAAA;AAAA,QAAS,QAAQ;AAAA,QAAC;AAG9C,WAAK,QAAQ,MACb,KAAK,iBAAiB;AAAA;AAAA,EACxB;AAAA,EAEA,WAAoB;AAClB,WAAO,KAAK;AAAA,EACd;AAmCF;"}

package/dist/chunks/outside-click-CP1P1fK3.js

@@ -0,0 +1,15 @@
+function l(n, i) {
+  let e = null;
+  const c = setTimeout(() => {
+    e = (t) => {
+      t.composedPath().includes(n) || i(t);
+    }, document.addEventListener("click", e);
+  }, 0);
+  return () => {
+    clearTimeout(c), e && (document.removeEventListener("click", e), e = null);
+  };
+}
+export {
+  l as b
+};
+//# sourceMappingURL=outside-click-CP1P1fK3.js.map

package/dist/chunks/outside-click-CP1P1fK3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outside-click-CP1P1fK3.js","sources":["../../src/utils/outside-click.ts"],"sourcesContent":["/**\n * Outside-click helper.\n *\n * Used by any component that opens a floating surface (menu, popover, dropdown,\n * autocomplete, color picker, etc.) and needs to close when the user clicks\n * outside. Uses `composedPath()` so it works correctly across Shadow DOM\n * boundaries.\n *\n * The listener is attached on the next macrotask (`setTimeout 0`) to make sure\n * the click that opened the surface does not immediately bubble up and close\n * it again.\n *\n * Dependency-free — no Lit or framework imports allowed.\n */\n\n/**\n * Call `onOutside` when the user clicks outside `host`.\n *\n * @param host        The element whose interior should be considered \"inside\".\n * @param onOutside   Invoked with the triggering `MouseEvent` on outside click.\n * @returns           Disposer — cancels the pending attach if not yet attached,\n *                    otherwise removes the listener.\n */\nexport function bindOutsideClick(\n  host: Element,\n  onOutside: (e: MouseEvent) => void,\n): () => void {\n  let listener: ((e: MouseEvent) => void) | null = null;\n  const frame = setTimeout(() => {\n    listener = (e: MouseEvent) => {\n      if (!e.composedPath().includes(host)) onOutside(e);\n    };\n    document.addEventListener('click', listener);\n  }, 0);\n\n  return () => {\n    clearTimeout(frame);\n    if (listener) {\n      document.removeEventListener('click', listener);\n      listener = null;\n    }\n  };\n}\n"],"names":["bindOutsideClick","host","onOutside","listener","frame","e"],"mappings":"AAuBO,SAASA,EACdC,GACAC,GACY;AACZ,MAAIC,IAA6C;AACjD,QAAMC,IAAQ,WAAW,MAAM;AAC7B,IAAAD,IAAW,CAACE,MAAkB;AAC5B,MAAKA,EAAE,aAAA,EAAe,SAASJ,CAAI,OAAaI,CAAC;AAAA,IACnD,GACA,SAAS,iBAAiB,SAASF,CAAQ;AAAA,EAC7C,GAAG,CAAC;AAEJ,SAAO,MAAM;AACX,iBAAaC,CAAK,GACdD,MACF,SAAS,oBAAoB,SAASA,CAAQ,GAC9CA,IAAW;AAAA,EAEf;AACF;"}

package/dist/chunks/premium.css-9I4kHrsl.js

@@ -0,0 +1,466 @@
+import { css as a } from "lit";
+a`
+  box-shadow:
+    0 0 0 2px var(--cg-color-surface-base-background),
+    0 0 0 4px var(--cg-focus-ring-color);
+  outline: none;
+`;
+a`
+  box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+  outline: none;
+`;
+const t = a`
+  .menu {
+    display: flex;
+    flex-direction: column;
+    min-width: 200px;
+    max-width: 320px;
+    padding: var(--cg-spacing-6);
+    background: var(--cg-color-modal-container-background);
+    border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+    border-radius: var(--cg-border-radius-100);
+    box-shadow: var(--cg-elevation-3);
+    opacity: 0;
+    transform: scale(0.96);
+    transform-origin: top left;
+    pointer-events: none;
+    transition:
+      opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+      transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    list-style: none;
+    margin: 0;
+  }
+
+  @keyframes cg-menu-enter {
+    0% { transform: scale(0.96); }
+    60% { transform: scale(1.03); }
+    100% { transform: scale(1); }
+  }
+  :host([open]) .menu {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+    animation: cg-menu-enter var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+  }
+
+  @keyframes cg-menu-exit {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.95); }
+  }
+  .menu.closing {
+    animation: cg-menu-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu {
+      transition: opacity var(--cg-transition-duration-fast) ease;
+      transform: scale(1) !important;
+    }
+    :host([open]) .menu { animation: none; }
+    .menu.closing { animation: none; opacity: 0; }
+  }
+
+  /* Rounded variants — picked up by host attribute */
+  :host([rounded="none"]) .menu { border-radius: 0; }
+  :host([rounded="none"]) .menu-item { border-radius: 0; }
+  :host([rounded="sm"]) .menu { border-radius: var(--cg-border-radius-50); }
+  :host([rounded="sm"]) .menu-item { border-radius: var(--cg-border-radius-50); }
+  :host([rounded="md"]) .menu { border-radius: var(--cg-border-radius-100); }
+  :host([rounded="md"]) .menu-item { border-radius: var(--cg-border-radius-50); }
+  :host([rounded="lg"]) .menu { border-radius: var(--cg-border-radius-150); }
+  :host([rounded="lg"]) .menu-item { border-radius: var(--cg-border-radius-100); }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--cg-spacing-8);
+    padding: var(--cg-spacing-8) var(--cg-spacing-12);
+    border-radius: var(--cg-border-radius-50);
+    font-size: var(--cg-font-size-sm);
+    color: var(--cg-color-surface-container-text);
+    background: transparent;
+    border: none;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    line-height: var(--cg-line-height-snug);
+    white-space: nowrap;
+    transition:
+      background-color var(--cg-transition-duration-fast) ease,
+      color var(--cg-transition-duration-fast) ease;
+    -webkit-font-smoothing: antialiased;
+    animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;
+    animation-delay: calc(var(--stagger-index, 0) * 40ms);
+  }
+
+  .menu-item:hover:not([disabled]):not(.disabled),
+  .menu-item[data-active]:not([disabled]):not(.disabled),
+  .menu-item.active:not([disabled]):not(.disabled) {
+    background: var(--cg-color-action-tertiary-background-hover);
+  }
+  .menu-item:active:not([disabled]):not(.disabled) {
+    background: var(--cg-color-action-tertiary-background-active);
+  }
+  .menu-item:focus-visible {
+    box-shadow:
+      0 0 0 2px var(--cg-color-focus-ring-offset),
+      0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);
+    outline: none;
+  }
+  .menu-item.active {
+    font-weight: var(--cg-font-weight-medium);
+  }
+  .menu-item[disabled],
+  .menu-item.disabled {
+    color: var(--cg-color-surface-container-outlined);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .menu-item.danger {
+    color: var(--cg-color-status-error-text-default);
+  }
+  .menu-item.danger:hover:not([disabled]):not(.disabled),
+  .menu-item.danger[data-active]:not([disabled]):not(.disabled) {
+    background: var(--cg-color-status-error-background-default);
+  }
+
+  .menu-item-icon {
+    flex-shrink: 0;
+    opacity: 0.7;
+  }
+  .menu-item:hover:not([disabled]):not(.disabled) .menu-item-icon {
+    opacity: 1;
+  }
+
+  .menu-item-shortcut {
+    margin-left: auto;
+    padding-left: var(--cg-spacing-16);
+    font-size: var(--cg-font-size-xs);
+    color: var(--cg-color-surface-container-outlined);
+    font-family: inherit;
+    pointer-events: none;
+  }
+
+  .divider {
+    height: var(--cg-border-width-50);
+    margin: var(--cg-spacing-4) 0;
+    background: var(--cg-color-modal-container-border);
+    border: none;
+  }
+`;
+a`
+  transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+`;
+a`
+  transition:
+    transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default),
+    background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+    border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+    box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+`;
+a`
+  transform: scale(var(--cg-interaction-press-scale));
+`;
+const e = a`
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+`, o = a`
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`, n = a`
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`, i = a`
+  @keyframes fadeSlideIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+`, s = a`
+  @keyframes shimmer {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+  }
+`, c = a`
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+`, d = a`
+  @keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+`;
+a`
+  @keyframes scaleOut {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.95); }
+  }
+`;
+a`
+  @keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+a`
+  @keyframes slideInLeft {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+`;
+a`
+  @keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+`;
+a`
+  transform: translateY(var(--cg-interaction-hover-lift));
+`;
+a`
+  transition:
+    transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+    box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+
+  &:hover {
+    transform: translateY(var(--cg-interaction-hover-lift));
+    box-shadow: var(--cg-elevation-2);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+`;
+const l = a`
+  :host {
+    display: inline-flex;
+    font-family: var(--cg-font-family-primary);
+    box-sizing: border-box;
+    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+  }
+`, g = a`
+  :host {
+    display: block;
+    font-family: var(--cg-font-family-primary);
+    box-sizing: border-box;
+    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+  }
+`;
+a`
+  :host([hidden]) { display: none; }
+`;
+a``;
+a``;
+a``;
+a``;
+a``;
+a`
+  box-shadow: 0 0 var(--cg-ai-effect-glow-blur) var(--cg-ai-effect-glow-spread) var(--cg-ai-effect-glow-color);
+`;
+a`
+  background: linear-gradient(135deg, var(--cg-ai-effect-gradient-from), var(--cg-ai-effect-gradient-to));
+`;
+a`
+  background: linear-gradient(
+    90deg,
+    var(--cg-color-surface-base-text) 25%,
+    var(--cg-color-accent-text) 50%,
+    var(--cg-color-surface-base-text) 75%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;
+`;
+a`
+  background: linear-gradient(
+    90deg,
+    var(--cg-color-surface-container-background) 25%,
+    var(--cg-color-surface-container-border) 50%,
+    var(--cg-color-surface-container-background) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;
+`;
+a`
+  backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));
+  -webkit-backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));
+`;
+a`
+  box-shadow: inset 0 1px 0 0 var(--cg-overlay-white-light);
+`;
+a`
+  background-image: linear-gradient(
+    to bottom,
+    var(--cg-overlay-white-subtle) 0%,
+    transparent 100%
+  );
+`;
+a`
+  transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+  &:hover:not(:disabled):not([disabled]):not(.disabled) {
+    transform: scale(1.02);
+  }
+  &:active:not(:disabled):not([disabled]):not(.disabled) {
+    transform: scale(var(--cg-interaction-press-scale));
+  }
+`;
+a`
+  &:hover:not(:disabled):not([disabled]):not(.disabled) {
+    background-color: var(--cg-overlay-accent-subtle);
+  }
+`;
+a`
+  box-shadow: 0 0 0 0px transparent, 0 0 0 0px transparent;
+  transition: box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+  &:focus-visible {
+    box-shadow:
+      0 0 0 2px var(--cg-color-surface-base-background),
+      0 0 0 4px var(--cg-focus-ring-color);
+    outline: none;
+  }
+`;
+a`
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      circle at 50% 50%,
+      var(--cg-overlay-white-strong) 0%,
+      transparent 70%
+    );
+    opacity: 0;
+    transform: scale(0);
+    transition: transform 400ms ease-out, opacity 400ms ease-out;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+  &:active:not(:disabled)::after {
+    opacity: 1;
+    transform: scale(2.5);
+    transition: 0s;
+  }
+`;
+const f = a`
+  @keyframes dotPulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.4); opacity: 0.7; }
+  }
+`;
+a`
+  @keyframes valueChangePulse {
+    0% { transform: scale(1); }
+    40% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+`;
+const m = a`
+  @keyframes staggerFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+a`
+  @keyframes exitFadeScale {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.85); }
+  }
+`;
+a`
+  background: var(--cg-overlay-white-subtle);
+  backdrop-filter: blur(12px) saturate(1.1);
+  -webkit-backdrop-filter: blur(12px) saturate(1.1);
+  border: 1px solid var(--cg-overlay-white-medium);
+  box-shadow:
+    0 8px 32px var(--cg-overlay-dark-strong),
+    inset 0 1px 0 var(--cg-overlay-white-light);
+`;
+a`
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0.02;
+    pointer-events: none;
+    z-index: 1;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mix-blend-mode: overlay;
+  }
+`;
+a`
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      var(--cg-color-accent-text) 0%,
+      var(--cg-overlay-accent-subtle) 100%
+    );
+    opacity: 0.06;
+    transform: translateY(102%);
+    transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    z-index: -1;
+    border-radius: inherit;
+  }
+  &:hover::before {
+    transform: translateY(0);
+  }
+`;
+a`
+  @keyframes cgBorderSpin {
+    to { --cg-border-angle: 360deg; }
+  }
+`;
+a`
+  @keyframes cgScrollReveal {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+export {
+  l as a,
+  s as b,
+  o as c,
+  f as d,
+  m as e,
+  i as f,
+  n as g,
+  g as h,
+  t as m,
+  c as p,
+  e as r,
+  d as s
+};
+//# sourceMappingURL=premium.css-9I4kHrsl.js.map

package/dist/chunks/premium.css-9I4kHrsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium.css-9I4kHrsl.js","sources":["../../src/styles/focus.css.ts","../../src/styles/menu.css.ts","../../src/styles/motion.css.ts","../../src/styles/base.css.ts","../../src/styles/elevation.css.ts","../../src/styles/ai-effects.css.ts","../../src/styles/premium.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Dual-layer focus ring for standalone interactive elements (buttons, links, nav items).\n * Uses the focus-ring token set from tier 2 semantic tokens.\n */\nexport const focusRingDual = css`\n  box-shadow:\n    0 0 0 2px var(--cg-color-surface-base-background),\n    0 0 0 4px var(--cg-focus-ring-color);\n  outline: none;\n`;\n\n/**\n * Single-layer focus ring for form fields (input, textarea, select).\n * Softer glow that works with existing borders.\n */\nexport const focusRingSingle = css`\n  box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n  outline: none;\n`;\n","import { css } from 'lit';\n\n/**\n * Shared menu-list styling used by cg-dropdown, cg-split-button, and any\n * component that renders a list of keyboard-navigable menu items.\n *\n * Covers: surface (background/border/radius/shadow/padding), entrance and\n * exit animation, reduced-motion fallback, `.menu-item` layout and states,\n * `.menu-item-icon`, `.menu-item-shortcut`, `.divider`, and rounded variants\n * driven by a `rounded` attribute on the host.\n *\n * Positioning (absolute vs fixed, top/left placement) is intentionally NOT\n * included — each consumer owns its own positioning strategy.\n */\nexport const menuListStyles = css`\n  .menu {\n    display: flex;\n    flex-direction: column;\n    min-width: 200px;\n    max-width: 320px;\n    padding: var(--cg-spacing-6);\n    background: var(--cg-color-modal-container-background);\n    border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n    border-radius: var(--cg-border-radius-100);\n    box-shadow: var(--cg-elevation-3);\n    opacity: 0;\n    transform: scale(0.96);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n      transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    list-style: none;\n    margin: 0;\n  }\n\n  @keyframes cg-menu-enter {\n    0% { transform: scale(0.96); }\n    60% { transform: scale(1.03); }\n    100% { transform: scale(1); }\n  }\n  :host([open]) .menu {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n    animation: cg-menu-enter var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n  }\n\n  @keyframes cg-menu-exit {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n  .menu.closing {\n    animation: cg-menu-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .menu {\n      transition: opacity var(--cg-transition-duration-fast) ease;\n      transform: scale(1) !important;\n    }\n    :host([open]) .menu { animation: none; }\n    .menu.closing { animation: none; opacity: 0; }\n  }\n\n  /* Rounded variants — picked up by host attribute */\n  :host([rounded=\"none\"]) .menu { border-radius: 0; }\n  :host([rounded=\"none\"]) .menu-item { border-radius: 0; }\n  :host([rounded=\"sm\"]) .menu { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"sm\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"md\"]) .menu { border-radius: var(--cg-border-radius-100); }\n  :host([rounded=\"md\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"lg\"]) .menu { border-radius: var(--cg-border-radius-150); }\n  :host([rounded=\"lg\"]) .menu-item { border-radius: var(--cg-border-radius-100); }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cg-spacing-8);\n    padding: var(--cg-spacing-8) var(--cg-spacing-12);\n    border-radius: var(--cg-border-radius-50);\n    font-size: var(--cg-font-size-sm);\n    color: var(--cg-color-surface-container-text);\n    background: transparent;\n    border: none;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: left;\n    cursor: pointer;\n    font-family: inherit;\n    line-height: var(--cg-line-height-snug);\n    white-space: nowrap;\n    transition:\n      background-color var(--cg-transition-duration-fast) ease,\n      color var(--cg-transition-duration-fast) ease;\n    -webkit-font-smoothing: antialiased;\n    animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n    animation-delay: calc(var(--stagger-index, 0) * 40ms);\n  }\n\n  .menu-item:hover:not([disabled]):not(.disabled),\n  .menu-item[data-active]:not([disabled]):not(.disabled),\n  .menu-item.active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-hover);\n  }\n  .menu-item:active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-active);\n  }\n  .menu-item:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-focus-ring-offset),\n      0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n    outline: none;\n  }\n  .menu-item.active {\n    font-weight: var(--cg-font-weight-medium);\n  }\n  .menu-item[disabled],\n  .menu-item.disabled {\n    color: var(--cg-color-surface-container-outlined);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .menu-item.danger {\n    color: var(--cg-color-status-error-text-default);\n  }\n  .menu-item.danger:hover:not([disabled]):not(.disabled),\n  .menu-item.danger[data-active]:not([disabled]):not(.disabled) {\n    background: var(--cg-color-status-error-background-default);\n  }\n\n  .menu-item-icon {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n  .menu-item:hover:not([disabled]):not(.disabled) .menu-item-icon {\n    opacity: 1;\n  }\n\n  .menu-item-shortcut {\n    margin-left: auto;\n    padding-left: var(--cg-spacing-16);\n    font-size: var(--cg-font-size-xs);\n    color: var(--cg-color-surface-container-outlined);\n    font-family: inherit;\n    pointer-events: none;\n  }\n\n  .divider {\n    height: var(--cg-border-width-50);\n    margin: var(--cg-spacing-4) 0;\n    background: var(--cg-color-modal-container-border);\n    border: none;\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Standard color/opacity transition for :host elements.\n * Maps to --cg-transition-duration-fast + --cg-transition-easing-default.\n */\nexport const hostTransition = css`\n  transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Multi-property transition for interactive elements (buttons, cards, list items).\n * Covers transform, background, border, and box-shadow.\n */\nexport const interactiveTransition = css`\n  transition:\n    transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default),\n    background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Press scale feedback for :active state.\n */\nexport const pressScale = css`\n  transform: scale(var(--cg-interaction-press-scale));\n`;\n\n/** Reduced motion media query — disables transitions and animations for a11y. */\nexport const reducedMotion = css`\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n      transition-duration: 0.01ms !important;\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n    }\n  }\n`;\n\n/** Spin keyframes for loading spinners. */\nexport const spinKeyframes = css`\n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n`;\n\n/** Fade-in keyframes. */\nexport const fadeInKeyframes = css`\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\n/** Slide + fade entrance animation. */\nexport const fadeSlideInKeyframes = css`\n  @keyframes fadeSlideIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n`;\n\n/** Shimmer sweep for loading skeletons and AI text effects. */\nexport const shimmerKeyframes = css`\n  @keyframes shimmer {\n    from { background-position: 200% 0; }\n    to { background-position: -200% 0; }\n  }\n`;\n\n/** Opacity pulse for thinking indicators. */\nexport const pulseKeyframes = css`\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n`;\n\n/** Scale + fade entrance for modals and dropdowns. */\nexport const scaleInKeyframes = css`\n  @keyframes scaleIn {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n`;\n\n/** Scale + fade exit for modals and dropdowns. */\nexport const scaleOutKeyframes = css`\n  @keyframes scaleOut {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n`;\n\n/** Fade out. */\nexport const fadeOutKeyframes = css`\n  @keyframes fadeOut {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\n/** Slide in from left for drawers. */\nexport const slideInLeftKeyframes = css`\n  @keyframes slideInLeft {\n    from { transform: translateX(-100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Slide in from right for drawers. */\nexport const slideInRightKeyframes = css`\n  @keyframes slideInRight {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Hover lift for interactive cards and surfaces. */\nexport const hoverLift = css`\n  transform: translateY(var(--cg-interaction-hover-lift));\n`;\n\n/** Card hover pattern: lift + enhanced shadow on hover, settle on active. */\nexport const cardHoverLift = css`\n  transition:\n    transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n\n  &:hover {\n    transform: translateY(var(--cg-interaction-hover-lift));\n    box-shadow: var(--cg-elevation-2);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Base :host styles for inline-flex components (buttons, badges, chips).\n * Includes font-family, color transition, and box-sizing.\n */\nexport const hostBase = css`\n  :host {\n    display: inline-flex;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/**\n * Base :host styles for block-level components (cards, inputs, containers).\n */\nexport const hostBlock = css`\n  :host {\n    display: block;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/** Hide host when [hidden] attribute is present. */\nexport const hostHidden = css`\n  :host([hidden]) { display: none; }\n`;\n","import { css } from 'lit';\n\n// ── Elevation utilities ──\n// These box-shadow exports are no longer consumed by any component\n// (shadows were removed in the design-token cleanup pass).\n// Exports are kept to avoid breaking downstream imports, but values\n// are emptied. Use border / border-color tokens instead for depth cues.\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation1 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation2 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation3 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation4 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation5 = css``;\n","import { css } from 'lit';\n\n/** AI glow effect using ai-effect tokens. */\nexport const aiGlow = css`\n  box-shadow: 0 0 var(--cg-ai-effect-glow-blur) var(--cg-ai-effect-glow-spread) var(--cg-ai-effect-glow-color);\n`;\n\n/** AI gradient background (lime-yellow brand). */\nexport const aiGradient = css`\n  background: linear-gradient(135deg, var(--cg-ai-effect-gradient-from), var(--cg-ai-effect-gradient-to));\n`;\n\n/** AI shimmer text effect — gradient that sweeps across text. */\nexport const aiShimmerText = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-base-text) 25%,\n    var(--cg-color-accent-text) 50%,\n    var(--cg-color-surface-base-text) 75%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI shimmer loading skeleton effect. */\nexport const aiShimmerSkeleton = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-container-background) 25%,\n    var(--cg-color-surface-container-border) 50%,\n    var(--cg-color-surface-container-background) 75%\n  );\n  background-size: 200% 100%;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI backdrop blur. */\nexport const aiBackdropBlur = css`\n  backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n  -webkit-backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n`;\n","import { css } from 'lit';\n\n// ─────────────────────────────────────────────────────────\n// Premium Visual Effects — shared across all components\n// Inspired by HeroUI, Shadcn, Radix, Aceternity patterns\n// ─────────────────────────────────────────────────────────\n\n/**\n * Top-edge light simulation on dark surfaces.\n * Creates a 1px white highlight at the top of the element,\n * simulating overhead lighting hitting a raised surface.\n * (Apple/macOS pattern used in premium dark UIs)\n */\nexport const insetHighlight = css`\n  box-shadow: inset 0 1px 0 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Subtle top-to-bottom gradient on surfaces for depth.\n * The 3% lightness difference creates a physical-object feel\n * without being visually distracting.\n */\nexport const surfaceGradient = css`\n  background-image: linear-gradient(\n    to bottom,\n    var(--cg-overlay-white-subtle) 0%,\n    transparent 100%\n  );\n`;\n\n/**\n * Micro-scale on hover for interactive elements.\n * The 1.02 scale is subtle enough to feel natural but\n * noticeable enough to communicate interactivity.\n */\nexport const hoverScale = css`\n  transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(1.02);\n  }\n  &:active:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(var(--cg-interaction-press-scale));\n  }\n`;\n\n/**\n * Color-matched hover background using the accent hue\n * at very low opacity. This feels intentional rather than\n * a generic gray overlay. (Radix/Shadcn pattern)\n */\nexport const colorMatchedHover = css`\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    background-color: var(--cg-overlay-accent-subtle);\n  }\n`;\n\n/**\n * Focus ring that transitions in smoothly rather than\n * appearing instantly. The ring spreads from 0px to full\n * size over 150ms with deceleration easing.\n */\nexport const focusRingAnimated = css`\n  box-shadow: 0 0 0 0px transparent, 0 0 0 0px transparent;\n  transition: box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n  &:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-surface-base-background),\n      0 0 0 4px var(--cg-focus-ring-color);\n    outline: none;\n  }\n`;\n\n/**\n * CSS-only ripple effect on click.\n * Uses ::after pseudo-element with radial gradient that\n * expands from center on :active. Requires parent to have\n * position: relative and overflow: hidden.\n */\nexport const rippleEffect = css`\n  position: relative;\n  overflow: hidden;\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(\n      circle at 50% 50%,\n      var(--cg-overlay-white-strong) 0%,\n      transparent 70%\n    );\n    opacity: 0;\n    transform: scale(0);\n    transition: transform 400ms ease-out, opacity 400ms ease-out;\n    pointer-events: none;\n    border-radius: inherit;\n  }\n  &:active:not(:disabled)::after {\n    opacity: 1;\n    transform: scale(2.5);\n    transition: 0s;\n  }\n`;\n\n/** Dot/indicator pulse animation for badges and status indicators. */\nexport const dotPulseKeyframes = css`\n  @keyframes dotPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.4); opacity: 0.7; }\n  }\n`;\n\n/** Value change pulse for numbers and metrics. */\nexport const valueChangePulseKeyframes = css`\n  @keyframes valueChangePulse {\n    0% { transform: scale(1); }\n    40% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n`;\n\n/** Entrance animation with stagger support via --stagger-index custom property. */\nexport const entranceStagger = css`\n  @keyframes staggerFadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n`;\n\n/** Exit animation for removed elements (badges, chips, list items). */\nexport const exitFadeScaleKeyframes = css`\n  @keyframes exitFadeScale {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.85); }\n  }\n`;\n\n// ─────────────────────────────────────────────────────────\n// Advanced Effects — cutting-edge CSS techniques\n// ─────────────────────────────────────────────────────────\n\n/**\n * Dark glassmorphism card — frosted glass with layered shadows.\n * The saturate(1.1) adds vibrancy behind the blur.\n * Use sparingly: max 2-3 glass elements per viewport.\n */\nexport const glassCard = css`\n  background: var(--cg-overlay-white-subtle);\n  backdrop-filter: blur(12px) saturate(1.1);\n  -webkit-backdrop-filter: blur(12px) saturate(1.1);\n  border: 1px solid var(--cg-overlay-white-medium);\n  box-shadow:\n    0 8px 32px var(--cg-overlay-dark-strong),\n    inset 0 1px 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Noise texture overlay for premium dark surfaces.\n * Inline SVG avoids external file dependencies in Shadow DOM.\n * The mix-blend-mode: overlay enhances surfaces without washing out.\n */\nexport const noiseOverlay = css`\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: 0.02;\n    pointer-events: none;\n    z-index: 1;\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n    mix-blend-mode: overlay;\n  }\n`;\n\n/**\n * Liquid fill hover — gradient sweeps up from bottom on hover.\n * More dramatic than colorMatchedHover, for hero/featured elements.\n */\nexport const liquidFillHover = css`\n  position: relative;\n  overflow: hidden;\n  z-index: 0;\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      180deg,\n      var(--cg-color-accent-text) 0%,\n      var(--cg-overlay-accent-subtle) 100%\n    );\n    opacity: 0.06;\n    transform: translateY(102%);\n    transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    z-index: -1;\n    border-radius: inherit;\n  }\n  &:hover::before {\n    transform: translateY(0);\n  }\n`;\n\n/**\n * AI processing glow ring — rotating conic gradient border.\n * Register --cg-border-angle via CSS.registerProperty() in connectedCallback.\n */\nexport const aiGlowRing = css`\n  @keyframes cgBorderSpin {\n    to { --cg-border-angle: 360deg; }\n  }\n`;\n\n/**\n * Scroll-driven reveal animation.\n * Elements fade+slide in as they enter the viewport.\n * Progressive enhancement — works in Chrome 115+, Firefox 110+, Safari 18+.\n */\nexport const scrollReveal = css`\n  @keyframes cgScrollReveal {\n    from {\n      opacity: 0;\n      transform: translateY(20px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n`;\n"],"names":["css","menuListStyles","reducedMotion","spinKeyframes","fadeInKeyframes","fadeSlideInKeyframes","shimmerKeyframes","pulseKeyframes","scaleInKeyframes","hostBase","hostBlock","dotPulseKeyframes","entranceStagger"],"mappings":"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"}

package/dist/chunks/roving-index-BuO0tTba.js

@@ -0,0 +1,31 @@
+function o(d, i) {
+  const { items: r, activeIndex: e, isSkippable: a, onSelect: c, onEscape: l } = i, s = a ? r.filter((t) => !a(t)) : r.slice(), n = s.length;
+  if (d.key === "Escape")
+    return l?.(), { index: e, handled: !0 };
+  if (n === 0)
+    return { index: e, handled: !1 };
+  switch (d.key) {
+    case "ArrowDown":
+      return { index: ((e < 0 ? -1 : e) + 1) % n, handled: !0 };
+    case "ArrowUp":
+      return { index: ((e < 0 ? 0 : e) - 1 + n) % n, handled: !0 };
+    case "Home":
+      return { index: 0, handled: !0 };
+    case "End":
+      return { index: n - 1, handled: !0 };
+    case "Enter":
+    case " ": {
+      if (e >= 0 && e < n) {
+        const t = s[e];
+        t !== void 0 && c?.(t, e);
+      }
+      return { index: e, handled: !0 };
+    }
+    default:
+      return { index: e, handled: !1 };
+  }
+}
+export {
+  o as h
+};
+//# sourceMappingURL=roving-index-BuO0tTba.js.map

package/dist/chunks/roving-index-BuO0tTba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-index-BuO0tTba.js","sources":["../../src/utils/roving-index.ts"],"sourcesContent":["/**\n * Keyboard navigation helper for the roving-tabindex list pattern.\n *\n * Used by menu-like components (cg-context-menu, cg-dropdown, cg-split-button,\n * cg-command, …) that track an \"active\" item index internally and advance it\n * with ArrowUp / ArrowDown / Home / End, select with Enter or Space, and\n * dismiss with Escape.\n *\n * Dependency-free — no Lit or framework imports allowed.\n */\n\nexport interface RovingKeyOptions<T> {\n  /** The full source list of items (including separators / disabled). */\n  items: T[];\n  /**\n   * Current active index.\n   *\n   * IMPORTANT: this index refers to the *selectable* sub-list (items remaining\n   * after `isSkippable` filtering), not the raw `items` array. Every caller in\n   * the Cognivo codebase tracks `_activeIndex` this way, so the return value\n   * is also a selectable-list index.\n   */\n  activeIndex: number;\n  /** Return true if an item should be skipped during navigation. */\n  isSkippable?: (item: T) => boolean;\n  /** Invoked when the user activates the current item (Enter or Space). */\n  onSelect?: (item: T, selectableIndex: number) => void;\n  /** Invoked on Escape. */\n  onEscape?: () => void;\n}\n\nexport interface RovingKeyResult {\n  /** New selectable-list index. Unchanged if the key was not handled. */\n  index: number;\n  /** True if the key was handled (caller should `e.preventDefault()`). */\n  handled: boolean;\n}\n\n/**\n * Handle a keyboard event for a roving-tabindex list pattern.\n *\n * The caller is responsible for:\n *  - Updating `_activeIndex` with `result.index`.\n *  - Calling `e.preventDefault()` when `result.handled === true`.\n *\n * Handled keys:\n *  - `ArrowDown` — advance by 1 (wraps).\n *  - `ArrowUp`   — recede by 1 (wraps).\n *  - `Home`      — jump to first selectable item.\n *  - `End`       — jump to last selectable item.\n *  - `Enter` / `Space` — invoke `onSelect` with the active selectable item.\n *  - `Escape`    — invoke `onEscape`.\n *\n * Any other key returns `{ index: activeIndex, handled: false }`.\n */\nexport function handleRovingKey<T>(\n  e: KeyboardEvent,\n  opts: RovingKeyOptions<T>,\n): RovingKeyResult {\n  const { items, activeIndex, isSkippable, onSelect, onEscape } = opts;\n  const selectable = isSkippable ? items.filter((item) => !isSkippable(item)) : items.slice();\n  const count = selectable.length;\n\n  if (e.key === 'Escape') {\n    onEscape?.();\n    return { index: activeIndex, handled: true };\n  }\n\n  if (count === 0) {\n    return { index: activeIndex, handled: false };\n  }\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      const base = activeIndex < 0 ? -1 : activeIndex;\n      return { index: (base + 1) % count, handled: true };\n    }\n    case 'ArrowUp': {\n      const base = activeIndex < 0 ? 0 : activeIndex;\n      return { index: (base - 1 + count) % count, handled: true };\n    }\n    case 'Home':\n      return { index: 0, handled: true };\n    case 'End':\n      return { index: count - 1, handled: true };\n    case 'Enter':\n    case ' ': {\n      if (activeIndex >= 0 && activeIndex < count) {\n        const item = selectable[activeIndex];\n        if (item !== undefined) onSelect?.(item, activeIndex);\n      }\n      return { index: activeIndex, handled: true };\n    }\n    default:\n      return { index: activeIndex, handled: false };\n  }\n}\n"],"names":["handleRovingKey","e","opts","items","activeIndex","isSkippable","onSelect","onEscape","selectable","item","count"],"mappings":"AAuDO,SAASA,EACdC,GACAC,GACiB;AACjB,QAAM,EAAE,OAAAC,GAAO,aAAAC,GAAa,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaL,GAC1DM,IAAaH,IAAcF,EAAM,OAAO,CAACM,MAAS,CAACJ,EAAYI,CAAI,CAAC,IAAIN,EAAM,MAAA,GAC9EO,IAAQF,EAAW;AAEzB,MAAIP,EAAE,QAAQ;AACZ,WAAAM,IAAA,GACO,EAAE,OAAOH,GAAa,SAAS,GAAA;AAGxC,MAAIM,MAAU;AACZ,WAAO,EAAE,OAAON,GAAa,SAAS,GAAA;AAGxC,UAAQH,EAAE,KAAA;AAAA,IACR,KAAK;AAEH,aAAO,EAAE,SADIG,IAAc,IAAI,KAAKA,KACZ,KAAKM,GAAO,SAAS,GAAA;AAAA,IAE/C,KAAK;AAEH,aAAO,EAAE,SADIN,IAAc,IAAI,IAAIA,KACX,IAAIM,KAASA,GAAO,SAAS,GAAA;AAAA,IAEvD,KAAK;AACH,aAAO,EAAE,OAAO,GAAG,SAAS,GAAA;AAAA,IAC9B,KAAK;AACH,aAAO,EAAE,OAAOA,IAAQ,GAAG,SAAS,GAAA;AAAA,IACtC,KAAK;AAAA,IACL,KAAK,KAAK;AACR,UAAIN,KAAe,KAAKA,IAAcM,GAAO;AAC3C,cAAMD,IAAOD,EAAWJ,CAAW;AACnC,QAAIK,MAAS,UAAWH,IAAWG,GAAML,CAAW;AAAA,MACtD;AACA,aAAO,EAAE,OAAOA,GAAa,SAAS,GAAA;AAAA,IACxC;AAAA,IACA;AACE,aAAO,EAAE,OAAOA,GAAa,SAAS,GAAA;AAAA,EAAM;AAElD;"}