@cognivo/components 0.8.0

package/dist/components/cg-split-button/cg-split-button.js

@@ -0,0 +1,330 @@
+import { css as g, LitElement as h, nothing as d, html as c } from "lit";
+import { property as i, state as b, query as p, customElement as m } from "lit/decorators.js";
+import { a as v, r as f, e as y, m as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as _ } from "../../chunks/floating-DfsaYJnh.js";
+import { b as w } from "../../chunks/outside-click-CP1P1fK3.js";
+import { h as x } from "../../chunks/roving-index-BuO0tTba.js";
+var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, e, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? C(e, a) : e, u = t.length - 1, l; u >= 0; u--)
+    (l = t[u]) && (s = (n ? l(e, a, s) : l(s)) || s);
+  return n && s && $(e, a, s), s;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.label = "", this.variant = "primary", this.size = "md", this.type = "normal", this.disabled = !1, this.loading = !1, this.items = [], this.open = !1, this.menuPlacement = "bottom-end", this.rounded = "md", this._activeIndex = -1, this._disposeOutsideClick = null, this._handleKeydown = (t) => {
+      if (!this.open) return;
+      const { index: e, handled: a } = x(t, {
+        items: this.items,
+        activeIndex: this._activeIndex,
+        isSkippable: (n) => !!(n.separator || n.disabled),
+        onSelect: (n) => this._select(n),
+        onEscape: () => this._close()
+      });
+      a && (t.preventDefault(), this._activeIndex = e);
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._disposeOutsideClick?.(), this._disposeOutsideClick = null, document.removeEventListener("keydown", this._handleKeydown);
+  }
+  _onPrimaryClick(t) {
+    t.stopPropagation(), !(this.disabled || this.loading) && this.dispatchEvent(new CustomEvent("cg-split-button-click", { bubbles: !0, composed: !0 }));
+  }
+  _toggle() {
+    this.disabled || (this.open ? this._close() : this._openMenu());
+  }
+  _openMenu() {
+    this.open || (this.open = !0, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-split-button-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+      !this._menuEl || !this._chevronEl || _(this._chevronEl, this._menuEl, {
+        placement: this.menuPlacement,
+        offset: 4,
+        flip: !0,
+        shift: !0
+      });
+    }), this._disposeOutsideClick?.(), this._disposeOutsideClick = w(this, () => this._close()), setTimeout(() => {
+      document.addEventListener("keydown", this._handleKeydown);
+    }, 0));
+  }
+  _close() {
+    this.open && (this.open = !1, this._activeIndex = -1, this._disposeOutsideClick?.(), this._disposeOutsideClick = null, document.removeEventListener("keydown", this._handleKeydown), this.dispatchEvent(new CustomEvent("cg-split-button-close", { bubbles: !0, composed: !0 })));
+  }
+  _select(t) {
+    t.disabled || t.separator || (this.dispatchEvent(new CustomEvent("cg-split-button-select", {
+      detail: { id: t.id, item: t },
+      bubbles: !0,
+      composed: !0
+    })), this._close());
+  }
+  _onPrimaryKeydown(t) {
+    (t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), this._openMenu());
+  }
+  render() {
+    let t = -1;
+    return c`
+      <div class="group">
+        <button
+          class="primary"
+          type="button"
+          aria-label=${this.label}
+          ?disabled=${this.disabled || this.loading}
+          @click=${this._onPrimaryClick}
+          @keydown=${this._onPrimaryKeydown}
+        >
+          ${this.loading ? c`<span class="spinner" aria-hidden="true"></span>` : d}
+          ${this.label}
+        </button>
+        <button
+          class="chevron"
+          type="button"
+          aria-label="More actions"
+          aria-haspopup="menu"
+          aria-expanded=${this.open ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this._toggle}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+      </div>
+      <ul class="menu" role="menu" ?hidden=${!this.open}>
+        ${this.items.map((e, a) => {
+      if (e.separator) return c`<li role="separator" class="divider"></li>`;
+      t++;
+      const n = t === this._activeIndex;
+      return c`
+            <li role="none">
+              <button
+                class="menu-item ${e.danger ? "danger" : ""}"
+                role="menuitem"
+                ?disabled=${e.disabled}
+                data-active=${n ? "true" : d}
+                style="--stagger-index: ${a}"
+                @click=${() => this._select(e)}
+              >
+                ${e.icon ? c`<cg-icon class="menu-item-icon" name="${e.icon}" size="sm"></cg-icon>` : d}
+                <span>${e.label}</span>
+                ${e.shortcut ? c`<span class="menu-item-shortcut">${e.shortcut}</span>` : d}
+              </button>
+            </li>
+          `;
+    })}
+      </ul>
+    `;
+  }
+};
+r.styles = [v, f, y, k, g`
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    /* Outer group — carries the border-radius so inner buttons inherit corners. */
+    .group {
+      display: inline-flex;
+      align-items: stretch;
+      border-radius: var(--cg-component-button-radius-md);
+    }
+    :host([size="sm"]) .group { border-radius: var(--cg-component-button-radius-sm); }
+    :host([size="lg"]) .group { border-radius: var(--cg-component-button-radius-lg); }
+
+    /* Rounded prop overrides the size-derived radius (matches cg-button). */
+    :host([rounded="none"]) .group { border-radius: 0; }
+    :host([rounded="sm"]) .group { border-radius: var(--cg-component-button-radius-sm); }
+    :host([rounded="md"]) .group { border-radius: var(--cg-component-button-radius-md); }
+    :host([rounded="lg"]) .group { border-radius: var(--cg-component-button-radius-lg); }
+
+    /* Group-button baseline — scoped to .group so it doesn't hit menu items. */
+    .group > button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-8);
+      height: var(--cg-component-button-height-md);
+      padding: 0 var(--cg-spacing-16);
+      border: var(--cg-border-width-50) solid transparent;
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+      white-space: nowrap;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      -webkit-font-smoothing: antialiased;
+      transition:
+        background-color var(--cg-transition-duration-fast) ease,
+        border-color var(--cg-transition-duration-fast) ease,
+        box-shadow var(--cg-transition-duration-fast) ease,
+        transform var(--cg-transition-duration-fast) ease;
+    }
+    .group > button:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .group > button:focus-visible {
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+      outline: none;
+      z-index: 1;
+    }
+    .group > button:disabled { opacity: 0.5; pointer-events: none; }
+
+    /* Sizes — scoped to .group. */
+    :host([size="sm"]) .group > button { height: var(--cg-component-button-height-sm); padding: 0 var(--cg-spacing-12); font-size: var(--cg-font-size-xs); }
+    :host([size="lg"]) .group > button { height: var(--cg-component-button-height-lg); padding: 0 var(--cg-spacing-24); font-size: var(--cg-font-size-base); }
+
+    .primary {
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
+    }
+    /* Divider between primary and chevron — a dedicated line rendered as a pseudo
+       element, so it's not fighting the button's own border shorthand. */
+    .primary::after {
+      content: '';
+      position: absolute;
+      top: 18%;
+      right: calc(-1 * var(--cg-border-width-50));
+      width: var(--cg-border-width-50);
+      height: 64%;
+      background: color-mix(in srgb, var(--cg-color-action-primary-text-default) 22%, transparent);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .chevron {
+      padding: 0 var(--cg-spacing-8);
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+    .chevron svg {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      transition: transform var(--cg-transition-duration-fast) ease;
+    }
+    :host([open]) .chevron svg { transform: rotate(180deg); }
+
+    /* ── Primary variant (default) ── */
+    :host([variant="primary"]) .group > button {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-border-default);
+    }
+    :host([variant="primary"]) .group > button:not(:disabled):hover {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+
+    /* ── Secondary variant ── */
+    :host([variant="secondary"]) .group > button {
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-action-secondary-text-default);
+      border-color: var(--cg-color-action-secondary-border-default);
+    }
+    :host([variant="secondary"]) .group > button:not(:disabled):hover {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    :host([variant="secondary"]) .primary::after {
+      background: var(--cg-color-action-secondary-border-default);
+    }
+
+    /* ── Tertiary (ghost) variant ── */
+    :host([variant="tertiary"]) .group > button {
+      background: transparent;
+      color: var(--cg-color-action-tertiary-text-default);
+      border-color: transparent;
+    }
+    :host([variant="tertiary"]) .group > button:not(:disabled):hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    :host([variant="tertiary"]) .primary::after {
+      background: var(--cg-color-surface-cards-border);
+    }
+
+    /* ── Danger type ── */
+    :host([type="danger"]) .group > button {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    :host([type="danger"][variant="primary"]) .group > button {
+      background: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-status-error-text-inverse);
+      border-color: transparent;
+    }
+    :host([type="danger"]) .group > button:not(:disabled):hover,
+    :host([type="danger"][variant="primary"]) .group > button:not(:disabled):hover {
+      background: var(--cg-color-status-error-background-hover);
+    }
+    :host([type="danger"]) .primary::after { background: color-mix(in srgb, var(--cg-color-status-error-text-default) 25%, transparent); }
+
+    /* Loading spinner on primary button */
+    .spinner {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid currentColor;
+      border-right-color: transparent;
+      border-radius: var(--cg-border-radius-full);
+      animation: spin 600ms linear infinite;
+      margin-right: var(--cg-spacing-8);
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    :host([loading]) .primary { pointer-events: none; }
+
+    /* Menu positioning — visual styling inherited from menuListStyles.
+       cg-split-button uses fixed positioning + floating-ui placement computed in JS. */
+    .menu {
+      position: fixed;
+      z-index: var(--cg-z-index-500);
+    }
+    :host([menu-placement="bottom-start"]) .menu { transform-origin: top left; }
+    :host([menu-placement="bottom-end"]) .menu { transform-origin: top right; }
+    :host([menu-placement="top-start"]) .menu { transform-origin: bottom left; }
+    :host([menu-placement="top-end"]) .menu { transform-origin: bottom right; }
+  `];
+o([
+  i()
+], r.prototype, "label", 2);
+o([
+  i({ reflect: !0 })
+], r.prototype, "variant", 2);
+o([
+  i({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  i({ reflect: !0 })
+], r.prototype, "type", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+o([
+  i({ type: Array })
+], r.prototype, "items", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+o([
+  i({ attribute: "menu-placement", reflect: !0 })
+], r.prototype, "menuPlacement", 2);
+o([
+  i({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  b()
+], r.prototype, "_activeIndex", 2);
+o([
+  p(".menu")
+], r.prototype, "_menuEl", 2);
+o([
+  p(".chevron")
+], r.prototype, "_chevronEl", 2);
+r = o([
+  m("cg-split-button")
+], r);
+export {
+  r as CgSplitButton
+};
+//# sourceMappingURL=cg-split-button.js.map

package/dist/components/cg-split-button/cg-split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-split-button.js","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, 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 SplitButtonItem {\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-split-button\n * Primary action button with an attached dropdown for related actions\n * (`Save ▼` → Save / Save As / Save a copy). Shares variant/size with cg-button.\n *\n * @example\n * ```html\n * <cg-split-button\n *   label=\"Save\"\n *   variant=\"primary\"\n *   .items=${[\n *     { id: 'save-as', label: 'Save as…', shortcut: '⌘⇧S' },\n *     { id: 'copy', label: 'Save a copy' },\n *     { separator: true, id: 's1', label: '' },\n *     { id: 'delete', label: 'Delete', danger: true },\n *   ]}\n * ></cg-split-button>\n * ```\n *\n * @fires {CustomEvent} cg-split-button-click  - Primary action triggered\n * @fires {CustomEvent<{id:string, item:SplitButtonItem}>} cg-split-button-select - Menu item selected\n * @fires {CustomEvent} cg-split-button-open   - Menu opened\n * @fires {CustomEvent} cg-split-button-close  - Menu closed\n */\n@customElement('cg-split-button')\nexport class CgSplitButton extends LitElement {\n  static override styles = [hostBase, reducedMotion, entranceStagger, menuListStyles, css`\n    :host {\n      display: inline-flex;\n      position: relative;\n    }\n\n    /* Outer group — carries the border-radius so inner buttons inherit corners. */\n    .group {\n      display: inline-flex;\n      align-items: stretch;\n      border-radius: var(--cg-component-button-radius-md);\n    }\n    :host([size=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([size=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Rounded prop overrides the size-derived radius (matches cg-button). */\n    :host([rounded=\"none\"]) .group { border-radius: 0; }\n    :host([rounded=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([rounded=\"md\"]) .group { border-radius: var(--cg-component-button-radius-md); }\n    :host([rounded=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Group-button baseline — scoped to .group so it doesn't hit menu items. */\n    .group > button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      height: var(--cg-component-button-height-md);\n      padding: 0 var(--cg-spacing-16);\n      border: var(--cg-border-width-50) solid transparent;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        background-color var(--cg-transition-duration-fast) ease,\n        border-color var(--cg-transition-duration-fast) ease,\n        box-shadow var(--cg-transition-duration-fast) ease,\n        transform var(--cg-transition-duration-fast) ease;\n    }\n    .group > button:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .group > button:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n      outline: none;\n      z-index: 1;\n    }\n    .group > button:disabled { opacity: 0.5; pointer-events: none; }\n\n    /* Sizes — scoped to .group. */\n    :host([size=\"sm\"]) .group > button { height: var(--cg-component-button-height-sm); padding: 0 var(--cg-spacing-12); font-size: var(--cg-font-size-xs); }\n    :host([size=\"lg\"]) .group > button { height: var(--cg-component-button-height-lg); padding: 0 var(--cg-spacing-24); font-size: var(--cg-font-size-base); }\n\n    .primary {\n      border-top-left-radius: inherit;\n      border-bottom-left-radius: inherit;\n    }\n    /* Divider between primary and chevron — a dedicated line rendered as a pseudo\n       element, so it's not fighting the button's own border shorthand. */\n    .primary::after {\n      content: '';\n      position: absolute;\n      top: 18%;\n      right: calc(-1 * var(--cg-border-width-50));\n      width: var(--cg-border-width-50);\n      height: 64%;\n      background: color-mix(in srgb, var(--cg-color-action-primary-text-default) 22%, transparent);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    .chevron {\n      padding: 0 var(--cg-spacing-8);\n      border-top-right-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n    .chevron svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      transition: transform var(--cg-transition-duration-fast) ease;\n    }\n    :host([open]) .chevron svg { transform: rotate(180deg); }\n\n    /* ── Primary variant (default) ── */\n    :host([variant=\"primary\"]) .group > button {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n    }\n    :host([variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Secondary variant ── */\n    :host([variant=\"secondary\"]) .group > button {\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-action-secondary-text-default);\n      border-color: var(--cg-color-action-secondary-border-default);\n    }\n    :host([variant=\"secondary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    :host([variant=\"secondary\"]) .primary::after {\n      background: var(--cg-color-action-secondary-border-default);\n    }\n\n    /* ── Tertiary (ghost) variant ── */\n    :host([variant=\"tertiary\"]) .group > button {\n      background: transparent;\n      color: var(--cg-color-action-tertiary-text-default);\n      border-color: transparent;\n    }\n    :host([variant=\"tertiary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([variant=\"tertiary\"]) .primary::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Danger type ── */\n    :host([type=\"danger\"]) .group > button {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button {\n      background: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-inverse);\n      border-color: transparent;\n    }\n    :host([type=\"danger\"]) .group > button:not(:disabled):hover,\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n    :host([type=\"danger\"]) .primary::after { background: color-mix(in srgb, var(--cg-color-status-error-text-default) 25%, transparent); }\n\n    /* Loading spinner on primary button */\n    .spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid currentColor;\n      border-right-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 600ms linear infinite;\n      margin-right: var(--cg-spacing-8);\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n    :host([loading]) .primary { pointer-events: none; }\n\n    /* Menu positioning — visual styling inherited from menuListStyles.\n       cg-split-button uses fixed positioning + floating-ui placement computed in JS. */\n    .menu {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n    }\n    :host([menu-placement=\"bottom-start\"]) .menu { transform-origin: top left; }\n    :host([menu-placement=\"bottom-end\"]) .menu { transform-origin: top right; }\n    :host([menu-placement=\"top-start\"]) .menu { transform-origin: bottom left; }\n    :host([menu-placement=\"top-end\"]) .menu { transform-origin: bottom right; }\n  `];\n\n  @property() label = '';\n  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) type: 'normal' | 'danger' = 'normal';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Array }) items: SplitButtonItem[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ attribute: 'menu-placement', reflect: true }) menuPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-end';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  @state() private _activeIndex = -1;\n  @query('.menu') private _menuEl!: HTMLElement;\n  @query('.chevron') private _chevronEl!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _onPrimaryClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled || this.loading) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-click', { bubbles: true, composed: true }));\n  }\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open ? this._close() : this._openMenu();\n  }\n\n  private _openMenu(): void {\n    if (this.open) return;\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-split-button-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (!this._menuEl || !this._chevronEl) return;\n      applyFloatingPosition(this._chevronEl, this._menuEl, {\n        placement: this.menuPlacement, offset: 4, flip: true, shift: true,\n      });\n    });\n\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n    setTimeout(() => {\n      document.addEventListener('keydown', this._handleKeydown);\n    }, 0);\n  }\n\n  private _close(): void {\n    if (!this.open) return;\n    this.open = false;\n    this._activeIndex = -1;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n    this.dispatchEvent(new CustomEvent('cg-split-button-close', { bubbles: true, composed: true }));\n  }\n\n  private _select(item: SplitButtonItem): void {\n    if (item.disabled || item.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-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._select(item),\n      onEscape: () => this._close(),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  };\n\n  private _onPrimaryKeydown(e: KeyboardEvent): void {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  override render() {\n    let selectableIdx = -1;\n    return html`\n      <div class=\"group\">\n        <button\n          class=\"primary\"\n          type=\"button\"\n          aria-label=${this.label}\n          ?disabled=${this.disabled || this.loading}\n          @click=${this._onPrimaryClick}\n          @keydown=${this._onPrimaryKeydown}\n        >\n          ${this.loading ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>` : nothing}\n          ${this.label}\n        </button>\n        <button\n          class=\"chevron\"\n          type=\"button\"\n          aria-label=\"More actions\"\n          aria-haspopup=\"menu\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          @click=${this._toggle}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 9l6 6 6-6\"/>\n          </svg>\n        </button>\n      </div>\n      <ul class=\"menu\" role=\"menu\" ?hidden=${!this.open}>\n        ${this.items.map((item, index) => {\n          if (item.separator) return html`<li role=\"separator\" class=\"divider\"></li>`;\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: ${index}\"\n                @click=${() => this._select(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-split-button': CgSplitButton;\n  }\n}\n"],"names":["CgSplitButton","LitElement","e","index","handled","handleRovingKey","i","item","applyFloatingPosition","bindOutsideClick","selectableIdx","html","nothing","isActive","hostBase","reducedMotion","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-stack> — Flex layout container for composing child components.
+ *
+ * Features beyond OpenUI's Stack:
+ * - wrap support
+ * - responsive breakpoint attrs (inline, not media queries)
+ * - align-self on children via slot
+ */
+export declare class CgStack extends LitElement {
+    static styles: import('lit').CSSResult[];
+    direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    wrap: 'none' | 'wrap' | 'reverse';
+    full: boolean;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-stack': CgStack;
+    }
+}
+//# sourceMappingURL=cg-stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-stack.d.ts","sourceRoot":"","sources":["../../../src/components/cg-stack/cg-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BA2CnB;IAE0B,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAY;IAC1E,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAC9D,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAa;IACvE,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAW;IAChF,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAU;IAC5B,IAAI,UAAS;IAEhD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,85 @@
+import { css as p, LitElement as g, html as f } from "lit";
+import { property as s, customElement as h } from "lit/decorators.js";
+import { h as u, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (c, o, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? d(o, n) : o, a = c.length - 1, l; a >= 0; a--)
+    (l = c[a]) && (e = (i ? l(o, n, e) : l(e)) || e);
+  return i && e && m(o, n, e), e;
+};
+let t = class extends g {
+  constructor() {
+    super(...arguments), this.direction = "column", this.gap = "md", this.align = "stretch", this.justify = "start", this.wrap = "none", this.full = !1;
+  }
+  render() {
+    return f`<slot></slot>`;
+  }
+};
+t.styles = [u, y, p`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-16);
+    }
+
+    /* Direction */
+    :host([direction="row"]) { flex-direction: row; }
+    :host([direction="column"]) { flex-direction: column; }
+    :host([direction="row-reverse"]) { flex-direction: row-reverse; }
+    :host([direction="column-reverse"]) { flex-direction: column-reverse; }
+
+    /* Gap */
+    :host([gap="none"]) { gap: 0; }
+    :host([gap="xs"]) { gap: var(--cg-spacing-4); }
+    :host([gap="sm"]) { gap: var(--cg-spacing-8); }
+    :host([gap="md"]) { gap: var(--cg-spacing-16); }
+    :host([gap="lg"]) { gap: var(--cg-spacing-24); }
+    :host([gap="xl"]) { gap: var(--cg-spacing-32); }
+    :host([gap="2xl"]) { gap: var(--cg-spacing-48); }
+
+    /* Align */
+    :host([align="start"]) { align-items: flex-start; }
+    :host([align="center"]) { align-items: center; }
+    :host([align="end"]) { align-items: flex-end; }
+    :host([align="stretch"]) { align-items: stretch; }
+    :host([align="baseline"]) { align-items: baseline; }
+
+    /* Justify */
+    :host([justify="start"]) { justify-content: flex-start; }
+    :host([justify="center"]) { justify-content: center; }
+    :host([justify="end"]) { justify-content: flex-end; }
+    :host([justify="between"]) { justify-content: space-between; }
+    :host([justify="around"]) { justify-content: space-around; }
+    :host([justify="evenly"]) { justify-content: space-evenly; }
+
+    /* Wrap */
+    :host([wrap="wrap"]) { flex-wrap: wrap; }
+    :host([wrap="reverse"]) { flex-wrap: wrap-reverse; }
+
+    /* Full width/height */
+    :host([full]) { width: 100%; }
+  `];
+r([
+  s({ reflect: !0 })
+], t.prototype, "direction", 2);
+r([
+  s({ reflect: !0 })
+], t.prototype, "gap", 2);
+r([
+  s({ reflect: !0 })
+], t.prototype, "align", 2);
+r([
+  s({ reflect: !0 })
+], t.prototype, "justify", 2);
+r([
+  s({ reflect: !0 })
+], t.prototype, "wrap", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "full", 2);
+t = r([
+  h("cg-stack")
+], t);
+export {
+  t as CgStack
+};
+//# sourceMappingURL=cg-stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-stack.js","sources":["../../../src/components/cg-stack/cg-stack.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-stack> — Flex layout container for composing child components.\n *\n * Features beyond OpenUI's Stack:\n * - wrap support\n * - responsive breakpoint attrs (inline, not media queries)\n * - align-self on children via slot\n */\n@customElement('cg-stack')\nexport class CgStack extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-16);\n    }\n\n    /* Direction */\n    :host([direction=\"row\"]) { flex-direction: row; }\n    :host([direction=\"column\"]) { flex-direction: column; }\n    :host([direction=\"row-reverse\"]) { flex-direction: row-reverse; }\n    :host([direction=\"column-reverse\"]) { flex-direction: column-reverse; }\n\n    /* Gap */\n    :host([gap=\"none\"]) { gap: 0; }\n    :host([gap=\"xs\"]) { gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) { gap: var(--cg-spacing-16); }\n    :host([gap=\"lg\"]) { gap: var(--cg-spacing-24); }\n    :host([gap=\"xl\"]) { gap: var(--cg-spacing-32); }\n    :host([gap=\"2xl\"]) { gap: var(--cg-spacing-48); }\n\n    /* Align */\n    :host([align=\"start\"]) { align-items: flex-start; }\n    :host([align=\"center\"]) { align-items: center; }\n    :host([align=\"end\"]) { align-items: flex-end; }\n    :host([align=\"stretch\"]) { align-items: stretch; }\n    :host([align=\"baseline\"]) { align-items: baseline; }\n\n    /* Justify */\n    :host([justify=\"start\"]) { justify-content: flex-start; }\n    :host([justify=\"center\"]) { justify-content: center; }\n    :host([justify=\"end\"]) { justify-content: flex-end; }\n    :host([justify=\"between\"]) { justify-content: space-between; }\n    :host([justify=\"around\"]) { justify-content: space-around; }\n    :host([justify=\"evenly\"]) { justify-content: space-evenly; }\n\n    /* Wrap */\n    :host([wrap=\"wrap\"]) { flex-wrap: wrap; }\n    :host([wrap=\"reverse\"]) { flex-wrap: wrap-reverse; }\n\n    /* Full width/height */\n    :host([full]) { width: 100%; }\n  `];\n\n  @property({ reflect: true }) direction: 'row' | 'column' | 'row-reverse' | 'column-reverse' = 'column';\n  @property({ reflect: true }) gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n  @property({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n  @property({ reflect: true }) justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n  @property({ reflect: true }) wrap: 'none' | 'wrap' | 'reverse' = 'none';\n  @property({ type: Boolean, reflect: true }) full = false;\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-stack': CgStack;\n  }\n}\n"],"names":["CgStack","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAaO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8CwB,KAAA,YAAiE,UACjE,KAAA,MAAyD,MACzD,KAAA,QAA6D,WAC7D,KAAA,UAAwE,SACxE,KAAA,OAAoC,QACrB,KAAA,OAAO;AAAA,EAAA;AAAA,EAE1C,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAxDaF,EACK,SAAS,CAACG,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,GA2CnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9ChBP,EA8CkB,WAAA,aAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA/ChBP,EA+CkB,WAAA,OAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhDhBP,EAgDkB,WAAA,SAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjDhBP,EAiDkB,WAAA,WAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlDhBP,EAkDkB,WAAA,QAAA,CAAA;AACeM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnD/BP,EAmDiC,WAAA,QAAA,CAAA;AAnDjCA,IAANM,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZR,CAAA;"}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/** Step definition for cg-steps. */
+export interface StepItem {
+    title: string;
+    description?: string;
+    status?: 'done' | 'active' | 'pending' | 'error';
+}
+/**
+ * <cg-steps> — Step indicator with vertical/horizontal mode and clickable steps.
+ *
+ * @example
+ * ```html
+ * <cg-steps .items=${[{title:'Account',status:'done'},{title:'Profile',status:'active'},{title:'Review'}]}></cg-steps>
+ * ```
+ *
+ * @fires {CustomEvent<{index, item}>} cg-step-click - When a clickable step is clicked
+ *
+ * @cssprop --cg-color-status-success-text-default - Done state color
+ * @cssprop --cg-color-action-primary-background-default - Active state color
+ */
+export declare class CgSteps extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: StepItem[];
+    direction: 'vertical' | 'horizontal';
+    clickable: boolean;
+    compact: boolean;
+    private _handleClick;
+    private _renderCircle;
+    private _getStatus;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-steps': CgSteps;
+    }
+}
+//# sourceMappingURL=cg-steps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-steps.d.ts","sourceRoot":"","sources":["../../../src/components/cg-steps/cg-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,oCAAoC;AACpC,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;CAClD;AAED;;;;;;;;;;;;GAYG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAyJnB;IAEwB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACrB,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IACnC,SAAS,UAAS;IAClB,OAAO,UAAS;IAE5D,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,UAAU;IAIT,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAC;KAAE;CACzD"}