@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-drawer.js","sources":["../../../src/components/cg-drawer/cg-drawer.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { spinKeyframes, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-drawer\n * Slide-in side panel with backdrop, focus trap, and scroll lock.\n *\n * @example\n * ```html\n * <cg-drawer title=\"Settings\" side=\"right\" size=\"md\" open>\n *   <p>Drawer content here.</p>\n * </cg-drawer>\n * ```\n *\n * @slot - Default slot for drawer body content\n * @slot footer - Action buttons area below the body\n *\n * @fires {CustomEvent} cg-drawer-open - When the drawer opens\n * @fires {CustomEvent} cg-drawer-close - When the drawer closes\n * @fires {CustomEvent} cg-drawer-back - When the back button is clicked\n *\n * @cssprop --cg-color-modal-container-background - Panel background\n * @cssprop --cg-border-radius-200 - Panel border radius (28px)\n * @cssprop --cg-transition-easing-ease-out - Slide spring easing\n * @cssprop --cg-color-focus-ring - Close button focus ring\n */\n@customElement('cg-drawer')\nexport class CgDrawer extends LitElement {\n  static override styles = [spinKeyframes, reducedMotion, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    /* ── Backdrop ── */\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)) saturate(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    /* ── Panel ──\n       The shadow is intentionally directional (set per side below) so it\n       only casts inward toward the page content, not into the viewport edge\n       it's flush against. Casting onto the off-edge side produces visible\n       compositing artifacts at certain zoom levels and burns paint cycles. */\n    .panel {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      z-index: var(--cg-z-index-top);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      overflow: hidden;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop { transition: opacity var(--cg-transition-duration-fast) ease; }\n      .panel { transition: transform var(--cg-transition-duration-fast) ease; }\n    }\n\n    /* ── Side: Left ── */\n    :host([side=\"left\"]) .panel {\n      left: 0;\n      border-left: none;\n      border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0;\n      transform: translateX(-100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"left\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Side: Right ── */\n    :host([side=\"right\"]) .panel {\n      right: 0;\n      border-right: none;\n      border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius);\n      transform: translateX(100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"right\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes drawer-exit-left {\n      from { transform: translateX(0); }\n      to { transform: translateX(-100%); }\n    }\n    @keyframes drawer-exit-right {\n      from { transform: translateX(0); }\n      to { transform: translateX(100%); }\n    }\n    @keyframes backdrop-exit {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n    :host([side=\"left\"]) .panel.closing {\n      animation: drawer-exit-left var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    :host([side=\"right\"]) .panel.closing {\n      animation: drawer-exit-right var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    .backdrop.closing {\n      pointer-events: auto;\n      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .panel { width: var(--cg-component-drawer-width-sm); max-width: 85vw; }\n    :host([size=\"md\"]) .panel { width: var(--cg-component-drawer-width-md); max-width: 85vw; }\n    :host([size=\"lg\"]) .panel { width: var(--cg-component-drawer-width-lg); max-width: 90vw; }\n    :host([size=\"full\"]) .panel {\n      width: 100vw;\n      max-width: 100vw;\n      border-radius: 0;\n    }\n\n    /* ── Header ── */\n    .drawer-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      flex-shrink: 0;\n    }\n\n    .drawer-header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .drawer-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: var(--cg-color-accent-text);\n    }\n\n    .drawer-title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-modal-header-text);\n      margin: 0;\n      line-height: var(--cg-line-height-snug);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Header icon buttons (close + back) share the same chrome — round,\n       muted at rest, outlined-text on hover, press-scale on active. */\n    .close-btn,\n    .back-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\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        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover,\n    .back-btn:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n    .close-btn:active,\n    .back-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .close-btn:focus-visible,\n    .back-btn: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\n    /* ── Body ── */\n    .drawer-body {\n      position: relative;\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-4) var(--cg-spacing-24) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Footer ── */\n    .drawer-footer {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n    .drawer-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-12);\n    }\n    .drawer-footer:empty,\n    .drawer-footer ::slotted(:empty) {\n      display: none;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"][side=\"left\"]) .panel { border-radius: 0; }\n    :host([rounded=\"none\"][side=\"right\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0; }\n    :host([rounded=\"sm\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-50) 0 0 var(--cg-border-radius-50); }\n    :host([rounded=\"md\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0; }\n    :host([rounded=\"md\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0; }\n    :host([rounded=\"lg\"][side=\"right\"]) .panel { border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius); }\n    :host([rounded=\"full\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    :host([rounded=\"full\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n\n    /* ── Loading overlay ── */\n    .drawer-loading-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      background: var(--cg-color-modal-container-background);\n    }\n    .drawer-spinner {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    .drawer-loading-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Error banner ── */\n    .drawer-error-banner {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: 0 var(--cg-spacing-24);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n    }\n    .drawer-error-icon {\n      flex-shrink: 0;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) side: 'left' | 'right' = 'right';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) override title = '';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) back = false;\n  @property({ type: Boolean }) closable = true;\n  @property({ type: Boolean }) persistent = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String }) error = '';\n\n  @state() private _hasFooter = false;\n  @state() private _closing = false;\n\n  private _previousOverflow = '';\n  private _focusTrap = new FocusTrap();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this._onOpen();\n      } else {\n        if (changed.get('open') === true) {\n          this._closing = true;\n          setTimeout(() => { this._closing = false; }, 200);\n        }\n        this._onClose();\n      }\n    }\n  }\n\n  private _onOpen() {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-drawer-open', { bubbles: true, composed: true }));\n\n    // Activate the shared focus trap synchronously — by the time `updated()`\n    // fires, the panel is already in the shadow DOM. (Wrapping in\n    // `updateComplete.then` would defer past the caller's `await` and miss\n    // events fired immediately after the open flip.)\n    const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n    if (panel) {\n      this._focusTrap.activate(panel, {\n        returnFocus: true,\n        handleEscape: this.closable,\n        onEscape: () => this._requestClose(),\n      });\n    }\n  }\n\n  private _onClose() {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-drawer-close', { bubbles: true, composed: true }));\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    // Only restore body overflow if we actually locked it\n    if (this.open) {\n      document.body.style.overflow = this._previousOverflow || '';\n    }\n  }\n\n  private _handleBack() {\n    this.dispatchEvent(new CustomEvent('cg-drawer-back', { bubbles: true, composed: true }));\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleBackdropClick() {\n    if (!this.persistent && this.closable) {\n      this._requestClose();\n    }\n  }\n\n  private _requestClose() {\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"backdrop ${this._closing ? 'closing' : ''}\"\n        @click=\"${this._handleBackdropClick}\"\n        aria-hidden=\"true\"\n      ></div>\n      <div\n        class=\"panel ${this._closing ? 'closing' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${this.title ? nothing : 'Side panel'}\"\n        aria-labelledby=\"${this.title ? 'drawer-title' : nothing}\"\n        tabindex=\"-1\"\n      >\n        ${this.title || this.closable || this.back ? html`\n          <div class=\"drawer-header\">\n            <div class=\"drawer-header-left\">\n              ${this.back ? html`\n                <button class=\"back-btn\" aria-label=\"Go back\" @click=\"${this._handleBack}\">\n                  <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n                </button>\n              ` : nothing}\n              ${this.icon ? html`\n                <span class=\"drawer-icon\"><cg-icon name=\"${this.icon}\" size=\"md\"></cg-icon></span>\n              ` : nothing}\n              <h2 class=\"drawer-title\" id=\"drawer-title\">${this.title}</h2>\n            </div>\n            ${this.closable ? html`\n              <button\n                class=\"close-btn\"\n                aria-label=\"Close panel\"\n                @click=\"${this._requestClose}\"\n              >\n                <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n              </button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        ${this.error ? html`\n          <div class=\"drawer-error-banner\" role=\"alert\">\n            <cg-icon class=\"drawer-error-icon\" name=\"warning\" size=\"sm\" color=\"danger\"></cg-icon>\n            <span>${this.error}</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"drawer-body\">\n          <slot></slot>\n          ${this.loading ? html`\n            <div class=\"drawer-loading-overlay\" aria-busy=\"true\" aria-label=\"Loading\">\n              <span class=\"drawer-spinner\"></span>\n              <span class=\"drawer-loading-text\">Loading...</span>\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"drawer-footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=\"${this._handleFooterSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-drawer': CgDrawer;\n  }\n}\n"],"names":["CgDrawer","LitElement","FocusTrap","changed","panel","e","slot","html","nothing","spinKeyframes","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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;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;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,GAwQvD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3Q/Bb,EA2QiC,WAAA,QAAA,CAAA;AACDY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5Q9Bb,EA4QgC,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7Q9Bb,EA6QgC,WAAA,QAAA,CAAA;AACdY,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9QhBb,EA8QkB,WAAA,WAAA,CAAA;AACQY,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Qfb,EA+Q0B,WAAA,SAAA,CAAA;AACTY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhRfb,EAgRiB,WAAA,QAAA,CAAA;AACCY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjRhBb,EAiRkB,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlRhBb,EAkRkB,WAAA,YAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnRhBb,EAmRkB,WAAA,cAAA,CAAA;AACeY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApR/Bb,EAoRiC,WAAA,WAAA,CAAA;AAChBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArRfb,EAqRiB,WAAA,SAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvRId,EAuRM,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxRId,EAwRM,WAAA,YAAA,CAAA;AAxRNA,IAANY,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbf,CAAA;"}

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

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+/** Menu item for cg-dropdown, with id, label, optional icon, keyboard shortcut, disabled state, and divider flag. */
+export interface DropdownItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    divider?: boolean;
+}
+/**
+ * @element cg-dropdown
+ * Floating dropdown menu with scale+fade animation and full keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <cg-dropdown
+ *   position="bottom-start"
+ *   .items=${[{id:'edit',label:'Edit'},{id:'delete',label:'Delete'}]}
+ * >
+ *   <cg-button slot="trigger">Actions <cg-icon slot="suffix" name="chevron-down" size="sm"></cg-icon></cg-button>
+ * </cg-dropdown>
+ * ```
+ *
+ * @slot trigger - The element that toggles the dropdown on click
+ *
+ * @fires {CustomEvent} cg-dropdown-open - When the menu opens
+ * @fires {CustomEvent} cg-dropdown-close - When the menu closes
+ * @fires {CustomEvent<{id: string, label: string}>} cg-dropdown-select - When an item is selected
+ *
+ * @cssprop --cg-color-modal-container-background - Menu background
+ * @cssprop --cg-border-radius-100 - Menu border radius (12px)
+ * @cssprop --cg-color-focus-ring - Focus ring color
+ */
+export declare class CgDropdown extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    position: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    items: DropdownItem[];
+    loading: boolean;
+    private _activeIndex;
+    private _closing;
+    private _menu;
+    private _disposeOutsideClick;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _toggle;
+    private _open;
+    private _close;
+    private _selectItem;
+    private get _enabledItems();
+    private _handleKeydown;
+    private _focusActiveItem;
+    private _focusTrigger;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-dropdown': CgDropdown;
+    }
+}
+//# sourceMappingURL=cg-dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,qHAAqH;AACrH,MAAM,WAAW,YAAY;IAC3B,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,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA2EnB;IAEyC,IAAI,UAAS;IACd,QAAQ,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAkB;IACjG,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,YAAY,EAAE,CAAM;IACV,OAAO,UAAS;IAEnD,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAClB,OAAO,CAAC,KAAK,CAAe;IAE5C,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAcrC,oBAAoB;IAM7B,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,WAAW;IAUnB,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,cAAc;IAyCtB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,aAAa;IAcZ,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -0,0 +1,232 @@
+import { css as g, LitElement as h, nothing as c, html as a } from "lit";
+import { property as l, state as u, query as m, customElement as f } from "lit/decorators.js";
+import { e as v, m as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { b as _ } from "../../chunks/outside-click-CP1P1fK3.js";
+import { h as y } from "../../chunks/roving-index-BuO0tTba.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, s, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? w(s, o) : s, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (r = (t ? p(s, o, r) : p(r)) || r);
+  return t && r && x(s, o, r), r;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.position = "bottom-start", this.rounded = "lg", this.items = [], this.loading = !1, this._activeIndex = -1, this._closing = !1, this._disposeOutsideClick = null;
+  }
+  updated(e) {
+    e.has("open") && !this.open && e.get("open") === !0 && (this._closing = !0, setTimeout(() => {
+      this._closing = !1;
+    }, 100)), e.has("open") && (this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this.open && (this._disposeOutsideClick = _(this, () => this._close())));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._disposeOutsideClick?.(), this._disposeOutsideClick = null;
+  }
+  _toggle() {
+    this.open ? this._close() : this._open();
+  }
+  _open() {
+    this.open = !0, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-dropdown-open", { bubbles: !0, composed: !0 }));
+  }
+  _close() {
+    this.open = !1, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-dropdown-close", { bubbles: !0, composed: !0 }));
+  }
+  _selectItem(e) {
+    e.disabled || (this.dispatchEvent(new CustomEvent("cg-dropdown-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, label: e.label }
+    })), this._close());
+  }
+  get _enabledItems() {
+    return this.items.filter((e) => !e.divider && !e.disabled);
+  }
+  _handleKeydown(e) {
+    if (!this.open) {
+      (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), this._open(), this.updateComplete.then(() => {
+        this._activeIndex = 0, this._focusActiveItem();
+      }));
+      return;
+    }
+    if (e.key === "Tab") {
+      this._close();
+      return;
+    }
+    const { index: s, handled: o } = y(e, {
+      items: this.items,
+      activeIndex: this._activeIndex,
+      isSkippable: (t) => !!(t.divider || t.disabled),
+      onSelect: (t) => {
+        this._selectItem(t), this._focusTrigger();
+      },
+      onEscape: () => {
+        this._close(), this._focusTrigger();
+      }
+    });
+    o && (e.preventDefault(), this._activeIndex !== s && (this._activeIndex = s, this._focusActiveItem()));
+  }
+  _focusActiveItem() {
+    this.updateComplete.then(() => {
+      const e = this.shadowRoot?.querySelectorAll(".menu-item:not(.disabled)");
+      e && e[this._activeIndex] && e[this._activeIndex].focus();
+    });
+  }
+  _focusTrigger() {
+    this.updateComplete.then(() => {
+      const o = (this.shadowRoot?.querySelector('slot[name="trigger"]')?.assignedElements?.() ?? []).find((t) => t.focus);
+      o ? o.focus() : this.shadowRoot?.querySelector(".trigger")?.focus();
+    });
+  }
+  render() {
+    return a`
+      <div
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded="${this.open}"
+        @click="${this._toggle}"
+        @keydown="${this._handleKeydown}"
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        class="menu ${this._closing ? "closing" : ""}"
+        role="menu"
+        aria-label="Dropdown menu"
+        @keydown="${this._handleKeydown}"
+      >
+        ${this.loading ? a`
+          <div class="menu-loading" aria-busy="true">
+            <span class="menu-loading-spinner"></span>
+            <span>Loading...</span>
+          </div>
+        ` : this.items.length === 0 ? a`
+          <div class="menu-empty">No items</div>
+        ` : c}
+        ${this.loading ? c : this.items.map((e, s) => {
+      if (e.divider)
+        return a`<div class="divider" role="separator"></div>`;
+      const o = this._enabledItems.indexOf(e);
+      return a`
+            <button
+              class="menu-item ${e.disabled ? "disabled" : ""} ${o === this._activeIndex ? "active" : ""}"
+              role="menuitem"
+              tabindex="${this.open && !e.disabled ? "0" : "-1"}"
+              aria-disabled="${e.disabled ? "true" : "false"}"
+              style="--stagger-index: ${s}"
+              @click="${() => this._selectItem(e)}"
+            >
+              ${e.icon ? a`<cg-icon class="menu-item-icon" name="${e.icon}" size="sm"></cg-icon>` : c}
+              ${e.label}
+              ${e.shortcut ? a`<span class="menu-item-shortcut">${e.shortcut}</span>` : c}
+            </button>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+i.styles = [v, b, g`
+    :host {
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: inline-block;
+      position: relative;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    .trigger {
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* Positioning — unique to cg-dropdown (absolute to host, not fixed) */
+    .menu {
+      position: absolute;
+      z-index: var(--cg-z-index-400);
+    }
+    :host([position="bottom-start"]) .menu {
+      top: 100%;
+      left: 0;
+      margin-top: var(--cg-spacing-4);
+      transform-origin: top left;
+    }
+    :host([position="bottom-end"]) .menu {
+      top: 100%;
+      right: 0;
+      margin-top: var(--cg-spacing-4);
+      transform-origin: top right;
+    }
+    :host([position="top-start"]) .menu {
+      bottom: 100%;
+      left: 0;
+      margin-bottom: var(--cg-spacing-4);
+      transform-origin: bottom left;
+    }
+    :host([position="top-end"]) .menu {
+      bottom: 100%;
+      right: 0;
+      margin-bottom: var(--cg-spacing-4);
+      transform-origin: bottom right;
+    }
+
+    /* ── Loading state ── */
+    .menu-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-16) var(--cg-spacing-12);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+    .menu-loading-spinner {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);
+      border-top-color: var(--cg-color-surface-container-text);
+      border-radius: var(--cg-border-radius-full);
+      animation: spin var(--cg-transition-duration-slow) linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ── Empty state ── */
+    .menu-empty {
+      padding: var(--cg-spacing-16) var(--cg-spacing-12);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* Rounded variants — inherited from menuListStyles */
+  `];
+n([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+n([
+  l({ type: String, reflect: !0 })
+], i.prototype, "position", 2);
+n([
+  l({ reflect: !0 })
+], i.prototype, "rounded", 2);
+n([
+  l({ type: Array })
+], i.prototype, "items", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
+n([
+  u()
+], i.prototype, "_activeIndex", 2);
+n([
+  u()
+], i.prototype, "_closing", 2);
+n([
+  m(".menu")
+], i.prototype, "_menu", 2);
+i = n([
+  f("cg-dropdown")
+], i);
+export {
+  i as CgDropdown
+};
+//# sourceMappingURL=cg-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-dropdown.js","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { entranceStagger, menuListStyles } from '../../styles/index.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\n/** Menu item for cg-dropdown, with id, label, optional icon, keyboard shortcut, disabled state, and divider flag. */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\n/**\n * @element cg-dropdown\n * Floating dropdown menu with scale+fade animation and full keyboard navigation.\n *\n * @example\n * ```html\n * <cg-dropdown\n *   position=\"bottom-start\"\n *   .items=${[{id:'edit',label:'Edit'},{id:'delete',label:'Delete'}]}\n * >\n *   <cg-button slot=\"trigger\">Actions <cg-icon slot=\"suffix\" name=\"chevron-down\" size=\"sm\"></cg-icon></cg-button>\n * </cg-dropdown>\n * ```\n *\n * @slot trigger - The element that toggles the dropdown on click\n *\n * @fires {CustomEvent} cg-dropdown-open - When the menu opens\n * @fires {CustomEvent} cg-dropdown-close - When the menu closes\n * @fires {CustomEvent<{id: string, label: string}>} cg-dropdown-select - When an item is selected\n *\n * @cssprop --cg-color-modal-container-background - Menu background\n * @cssprop --cg-border-radius-100 - Menu border radius (12px)\n * @cssprop --cg-color-focus-ring - Focus ring color\n */\n@customElement('cg-dropdown')\nexport class CgDropdown extends LitElement {\n  static override styles = [entranceStagger, menuListStyles, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: inline-block;\n      position: relative;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .trigger {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    /* Positioning — unique to cg-dropdown (absolute to host, not fixed) */\n    .menu {\n      position: absolute;\n      z-index: var(--cg-z-index-400);\n    }\n    :host([position=\"bottom-start\"]) .menu {\n      top: 100%;\n      left: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top left;\n    }\n    :host([position=\"bottom-end\"]) .menu {\n      top: 100%;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top right;\n    }\n    :host([position=\"top-start\"]) .menu {\n      bottom: 100%;\n      left: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom left;\n    }\n    :host([position=\"top-end\"]) .menu {\n      bottom: 100%;\n      right: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom right;\n    }\n\n    /* ── Loading state ── */\n    .menu-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .menu-loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* ── Empty state ── */\n    .menu-empty {\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* Rounded variants — inherited from menuListStyles */\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) position: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-start';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) items: DropdownItem[] = [];\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  @state() private _activeIndex = -1;\n  @state() private _closing = false;\n  @query('.menu') private _menu!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open') && !this.open && changed.get('open') === true) {\n      this._closing = true;\n      setTimeout(() => { this._closing = false; }, 100);\n    }\n    if (changed.has('open')) {\n      this._disposeOutsideClick?.();\n      this._disposeOutsideClick = null;\n      if (this.open) {\n        this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n  }\n\n  private _toggle() {\n    if (this.open) {\n      this._close();\n    } else {\n      this._open();\n    }\n  }\n\n  private _open() {\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-open', { bubbles: true, composed: true }));\n  }\n\n  private _close() {\n    this.open = false;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-close', { bubbles: true, composed: true }));\n  }\n\n  private _selectItem(item: DropdownItem) {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-select', {\n      bubbles: true,\n      composed: true,\n      detail: { id: item.id, label: item.label },\n    }));\n    this._close();\n  }\n\n  private get _enabledItems(): DropdownItem[] {\n    return this.items.filter(i => !i.divider && !i.disabled);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (!this.open) {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        this._open();\n        // Focus first item after open\n        this.updateComplete.then(() => {\n          this._activeIndex = 0;\n          this._focusActiveItem();\n        });\n      }\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      this._close();\n      return;\n    }\n\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.divider || i.disabled),\n      onSelect: item => {\n        this._selectItem(item);\n        this._focusTrigger();\n      },\n      onEscape: () => {\n        this._close();\n        this._focusTrigger();\n      },\n    });\n    if (handled) {\n      e.preventDefault();\n      if (this._activeIndex !== index) {\n        this._activeIndex = index;\n        this._focusActiveItem();\n      }\n    }\n  }\n\n  private _focusActiveItem() {\n    this.updateComplete.then(() => {\n      const items = this.shadowRoot?.querySelectorAll('.menu-item:not(.disabled)');\n      if (items && items[this._activeIndex]) {\n        (items[this._activeIndex] as HTMLElement).focus();\n      }\n    });\n  }\n\n  private _focusTrigger() {\n    this.updateComplete.then(() => {\n      const slot = this.shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n      const assigned = slot?.assignedElements?.() ?? [];\n      const focusable = assigned.find(el => (el as HTMLElement).focus) as HTMLElement | undefined;\n      if (focusable) {\n        focusable.focus();\n      } else {\n        const trigger = this.shadowRoot?.querySelector('.trigger') as HTMLElement;\n        trigger?.focus();\n      }\n    });\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${this.open}\"\n        @click=\"${this._toggle}\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        class=\"menu ${this._closing ? 'closing' : ''}\"\n        role=\"menu\"\n        aria-label=\"Dropdown menu\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        ${this.loading ? html`\n          <div class=\"menu-loading\" aria-busy=\"true\">\n            <span class=\"menu-loading-spinner\"></span>\n            <span>Loading...</span>\n          </div>\n        ` : this.items.length === 0 ? html`\n          <div class=\"menu-empty\">No items</div>\n        ` : nothing}\n        ${!this.loading ? this.items.map((item, index) => {\n          if (item.divider) {\n            return html`<div class=\"divider\" role=\"separator\"></div>`;\n          }\n          const enabledIndex = this._enabledItems.indexOf(item);\n          return html`\n            <button\n              class=\"menu-item ${item.disabled ? 'disabled' : ''} ${enabledIndex === this._activeIndex ? 'active' : ''}\"\n              role=\"menuitem\"\n              tabindex=\"${this.open && !item.disabled ? '0' : '-1'}\"\n              aria-disabled=\"${item.disabled ? 'true' : 'false'}\"\n              style=\"--stagger-index: ${index}\"\n              @click=\"${() => this._selectItem(item)}\"\n            >\n              ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=\"${item.icon}\" size=\"sm\"></cg-icon>` : nothing}\n              ${item.label}\n              ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n            </button>\n          `;\n        }) : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-dropdown': CgDropdown;\n  }\n}\n"],"names":["CgDropdown","LitElement","changed","bindOutsideClick","item","i","index","handled","handleRovingKey","items","focusable","el","html","nothing","enabledIndex","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-droppable
+ * Drop zone that pairs with `<cg-draggable>`. Listens to the active drag
+ * session (broadcast on `document` by the drag-manager) and fires
+ * `cg-drop` when a draggable of an accepted type is released over its
+ * bounding box.
+ *
+ * The `over` boolean attribute reflects while a valid drag hovers, so
+ * consumers can style the hover state via attribute selectors. The
+ * `invalid-over` attribute reflects when an out-of-type drag hovers.
+ *
+ * @example
+ * ```html
+ * <cg-droppable accepts="card" @cg-drop=${onDrop}>
+ *   <div class="column">Drop cards here</div>
+ * </cg-droppable>
+ * ```
+ *
+ * @example Multiple accepted types
+ * ```html
+ * <cg-droppable accepts="card task" @cg-drop=${onDrop}>…</cg-droppable>
+ * ```
+ *
+ * @slot - The drop-zone content.
+ *
+ * @fires {CustomEvent<{type: string, payload: unknown, clientX: number, clientY: number}>} cg-drop - A draggable of an accepted type was dropped over this zone.
+ * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-enter - A valid drag entered the zone
+ * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-leave - A valid drag left the zone
+ */
+export declare class CgDroppable extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Space-separated list of accepted draggable types. Empty = accept any. */
+    accepts: string;
+    /** Disable the drop zone (still listens but never accepts). */
+    disabled: boolean;
+    /** Reflects while a valid drag hovers. */
+    over: boolean;
+    /** Reflects while an out-of-type drag hovers. */
+    invalidOver: boolean;
+    private _wasOver;
+    private _onDragStart;
+    private _onDragMove;
+    private _onDragEnd;
+    private _evaluateHover;
+    private _pointInside;
+    private _accepts;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-droppable': CgDroppable;
+    }
+}
+//# sourceMappingURL=cg-droppable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-droppable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-droppable/cg-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiBnB;IAEH,4EAA4E;IAChE,OAAO,SAAM;IAEzB,+DAA+D;IACnB,QAAQ,UAAS;IAE7D,0CAA0C;IACE,IAAI,UAAS;IAEzD,iDAAiD;IACsB,WAAW,UAAS;IAElF,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,UAAU,CA+BhB;IAEF,OAAO,CAAC,cAAc;IAwCtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,QAAQ;IAMP,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,114 @@
+import { css as l, LitElement as p, html as v } from "lit";
+import { property as n, state as u, customElement as h } from "lit/decorators.js";
+import { h as g, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, e, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? m(e, r) : e, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (o = (a ? d(e, r, o) : d(o)) || o);
+  return a && o && b(e, r, o), o;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.accepts = "", this.disabled = !1, this.over = !1, this.invalidOver = !1, this._wasOver = !1, this._onDragStart = (t) => {
+      this._wasOver = !1;
+      const e = t.detail;
+      this._evaluateHover(e);
+    }, this._onDragMove = (t) => {
+      const e = t.detail;
+      this._evaluateHover(e);
+    }, this._onDragEnd = (t) => {
+      const e = t.detail, r = this._accepts(e.type), a = this._pointInside(e.clientX, e.clientY);
+      this._wasOver && this.dispatchEvent(new CustomEvent("cg-drop-leave", {
+        detail: { type: e.type, payload: e.payload },
+        bubbles: !0,
+        composed: !0
+      })), this.over = !1, this.invalidOver = !1, this._wasOver = !1, !this.disabled && r && a && !e.dropped && (this.dispatchEvent(new CustomEvent("cg-drop", {
+        detail: {
+          type: e.type,
+          payload: e.payload,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          source: e.source
+        },
+        bubbles: !0,
+        composed: !0
+      })), document.dispatchEvent(new Event("cg-drop")));
+    };
+  }
+  _evaluateHover(t) {
+    if (this.disabled) {
+      this.over = !1, this.invalidOver = !1;
+      return;
+    }
+    const e = this._pointInside(t.clientX, t.clientY), r = this._accepts(t.type);
+    e && r ? (this.over || (this.dispatchEvent(new CustomEvent("cg-drop-enter", {
+      detail: { type: t.type, payload: t.payload },
+      bubbles: !0,
+      composed: !0
+    })), this._wasOver = !0), this.over = !0, this.invalidOver = !1) : e && !r ? (this.over && this.dispatchEvent(new CustomEvent("cg-drop-leave", {
+      detail: { type: t.type, payload: t.payload },
+      bubbles: !0,
+      composed: !0
+    })), this.over = !1, this.invalidOver = !0) : (this.over && this.dispatchEvent(new CustomEvent("cg-drop-leave", {
+      detail: { type: t.type, payload: t.payload },
+      bubbles: !0,
+      composed: !0
+    })), this.over = !1, this.invalidOver = !1);
+  }
+  _pointInside(t, e) {
+    if (t < 0 && e < 0) return !1;
+    const r = this.getBoundingClientRect();
+    return t >= r.left && t <= r.right && e >= r.top && e <= r.bottom;
+  }
+  _accepts(t) {
+    return this.accepts ? this.accepts.trim().split(/\s+/).includes(t) : !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("cg-drag-start", this._onDragStart), document.addEventListener("cg-drag-move", this._onDragMove), document.addEventListener("cg-drag-end", this._onDragEnd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("cg-drag-start", this._onDragStart), document.removeEventListener("cg-drag-move", this._onDragMove), document.removeEventListener("cg-drag-end", this._onDragEnd);
+  }
+  render() {
+    return v`<slot></slot>`;
+  }
+};
+s.styles = [g, f, l`
+    :host {
+      display: block;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), outline-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([over]) {
+      background: var(--cg-color-action-tertiary-background-hover);
+      outline: var(--cg-border-width-100) dashed var(--cg-color-action-primary-border-default);
+      outline-offset: calc(-1 * var(--cg-border-width-100));
+    }
+    :host([invalid-over]) {
+      outline: var(--cg-border-width-100) dashed var(--cg-color-status-error-border-default);
+      outline-offset: calc(-1 * var(--cg-border-width-100));
+    }
+    :host([disabled]) {
+      pointer-events: none;
+    }
+  `];
+i([
+  n()
+], s.prototype, "accepts", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "over", 2);
+i([
+  n({ type: Boolean, reflect: !0, attribute: "invalid-over" })
+], s.prototype, "invalidOver", 2);
+i([
+  u()
+], s.prototype, "_wasOver", 2);
+s = i([
+  h("cg-droppable")
+], s);
+export {
+  s as CgDroppable
+};
+//# sourceMappingURL=cg-droppable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-droppable.js","sources":["../../../src/components/cg-droppable/cg-droppable.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport type { DragMoveDetail, DragEndDetail } from '../../utils/drag-manager.js';\n\n/**\n * @element cg-droppable\n * Drop zone that pairs with `<cg-draggable>`. Listens to the active drag\n * session (broadcast on `document` by the drag-manager) and fires\n * `cg-drop` when a draggable of an accepted type is released over its\n * bounding box.\n *\n * The `over` boolean attribute reflects while a valid drag hovers, so\n * consumers can style the hover state via attribute selectors. The\n * `invalid-over` attribute reflects when an out-of-type drag hovers.\n *\n * @example\n * ```html\n * <cg-droppable accepts=\"card\" @cg-drop=${onDrop}>\n *   <div class=\"column\">Drop cards here</div>\n * </cg-droppable>\n * ```\n *\n * @example Multiple accepted types\n * ```html\n * <cg-droppable accepts=\"card task\" @cg-drop=${onDrop}>…</cg-droppable>\n * ```\n *\n * @slot - The drop-zone content.\n *\n * @fires {CustomEvent<{type: string, payload: unknown, clientX: number, clientY: number}>} cg-drop - A draggable of an accepted type was dropped over this zone.\n * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-enter - A valid drag entered the zone\n * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-leave - A valid drag left the zone\n */\n@customElement('cg-droppable')\nexport class CgDroppable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), outline-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([over]) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      outline: var(--cg-border-width-100) dashed var(--cg-color-action-primary-border-default);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n    :host([invalid-over]) {\n      outline: var(--cg-border-width-100) dashed var(--cg-color-status-error-border-default);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n    :host([disabled]) {\n      pointer-events: none;\n    }\n  `];\n\n  /** Space-separated list of accepted draggable types. Empty = accept any. */\n  @property() accepts = '';\n\n  /** Disable the drop zone (still listens but never accepts). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Reflects while a valid drag hovers. */\n  @property({ type: Boolean, reflect: true }) over = false;\n\n  /** Reflects while an out-of-type drag hovers. */\n  @property({ type: Boolean, reflect: true, attribute: 'invalid-over' }) invalidOver = false;\n\n  @state() private _wasOver = false;\n\n  private _onDragStart = (e: Event): void => {\n    this._wasOver = false;\n    const detail = (e as CustomEvent<DragMoveDetail>).detail;\n    this._evaluateHover(detail);\n  };\n\n  private _onDragMove = (e: Event): void => {\n    const detail = (e as CustomEvent<DragMoveDetail>).detail;\n    this._evaluateHover(detail);\n  };\n\n  private _onDragEnd = (e: Event): void => {\n    const detail = (e as CustomEvent<DragEndDetail>).detail;\n    const accepts = this._accepts(detail.type);\n    const inside = this._pointInside(detail.clientX, detail.clientY);\n\n    if (this._wasOver) {\n      this.dispatchEvent(new CustomEvent('cg-drop-leave', {\n        detail: { type: detail.type, payload: detail.payload },\n        bubbles: true, composed: true,\n      }));\n    }\n\n    this.over = false;\n    this.invalidOver = false;\n    this._wasOver = false;\n\n    if (!this.disabled && accepts && inside && !detail.dropped) {\n      this.dispatchEvent(new CustomEvent('cg-drop', {\n        detail: {\n          type: detail.type,\n          payload: detail.payload,\n          clientX: detail.clientX,\n          clientY: detail.clientY,\n          source: detail.source,\n        },\n        bubbles: true, composed: true,\n      }));\n      // Broadcast on document so the originating cg-draggable can mark its\n      // session as `dropped: true`.\n      document.dispatchEvent(new Event('cg-drop'));\n    }\n  };\n\n  private _evaluateHover(detail: DragMoveDetail): void {\n    if (this.disabled) {\n      this.over = false;\n      this.invalidOver = false;\n      return;\n    }\n    const inside = this._pointInside(detail.clientX, detail.clientY);\n    const accepts = this._accepts(detail.type);\n\n    if (inside && accepts) {\n      if (!this.over) {\n        this.dispatchEvent(new CustomEvent('cg-drop-enter', {\n          detail: { type: detail.type, payload: detail.payload },\n          bubbles: true, composed: true,\n        }));\n        this._wasOver = true;\n      }\n      this.over = true;\n      this.invalidOver = false;\n    } else if (inside && !accepts) {\n      if (this.over) {\n        this.dispatchEvent(new CustomEvent('cg-drop-leave', {\n          detail: { type: detail.type, payload: detail.payload },\n          bubbles: true, composed: true,\n        }));\n      }\n      this.over = false;\n      this.invalidOver = true;\n    } else {\n      if (this.over) {\n        this.dispatchEvent(new CustomEvent('cg-drop-leave', {\n          detail: { type: detail.type, payload: detail.payload },\n          bubbles: true, composed: true,\n        }));\n      }\n      this.over = false;\n      this.invalidOver = false;\n    }\n  }\n\n  private _pointInside(x: number, y: number): boolean {\n    if (x < 0 && y < 0) return false; // sentinel for cancelled drags\n    const r = this.getBoundingClientRect();\n    return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;\n  }\n\n  private _accepts(type: string): boolean {\n    if (!this.accepts) return true;\n    const allowed = this.accepts.trim().split(/\\s+/);\n    return allowed.includes(type);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('cg-drag-start', this._onDragStart);\n    document.addEventListener('cg-drag-move', this._onDragMove);\n    document.addEventListener('cg-drag-end', this._onDragEnd);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('cg-drag-start', this._onDragStart);\n    document.removeEventListener('cg-drag-move', this._onDragMove);\n    document.removeEventListener('cg-drag-end', this._onDragEnd);\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-droppable': CgDroppable;\n  }\n}\n"],"names":["CgDroppable","LitElement","e","detail","accepts","inside","x","y","type","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-empty-state/cg-empty-state.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-empty-state
+ * Empty / no-results / error state with icon, title, description, and
+ * actions slot. Use `container` to wrap the content in a card or dashed
+ * placeholder zone — useful when the empty state sits inside a panel
+ * where bare centered text would feel floaty.
+ *
+ * @example
+ * ```html
+ * <!-- bare (default) — centered content, no container -->
+ * <cg-empty-state variant="search" title="No results" description="Try a different query">
+ *   <cg-button slot="actions">Clear filters</cg-button>
+ * </cg-empty-state>
+ *
+ * <!-- card-wrapped — solid bg + border, like cg-card variant="elevated" -->
+ * <cg-empty-state container="card" title="No customers yet"
+ *   description="When you add your first customer, they will appear here.">
+ *   <cg-button slot="actions" variant="primary">Add customer</cg-button>
+ * </cg-empty-state>
+ *
+ * <!-- dashed placeholder — drop-zone / "click to add" feel -->
+ * <cg-empty-state container="dashed" variant="ai" title="Drop a file or paste text"
+ *   description="The AI will summarize it for you.">
+ *   <cg-button slot="actions" variant="tertiary">Browse files</cg-button>
+ * </cg-empty-state>
+ * ```
+ *
+ * @slot icon - Override the default icon
+ * @slot - Extra body content below description
+ * @slot actions - Buttons row at the bottom
+ */
+export declare class CgEmptyState extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'default' | 'search' | 'error' | 'success' | 'info' | 'ai';
+    /**
+     * Wrap the empty state in a container shell:
+     *   none   (default) — centered content with padding only (current behaviour)
+     *   card             — solid bg + 1px border + radius (like cg-card)
+     *   dashed           — dashed border + transparent bg (drop-zone / "click to add")
+     */
+    container: 'none' | 'card' | 'dashed';
+    title: string;
+    description: string;
+    icon: string;
+    private _defaultIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-empty-state': CgEmptyState;
+    }
+}
+//# sourceMappingURL=cg-empty-state.d.ts.map

package/dist/components/cg-empty-state/cg-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/cg-empty-state/cg-empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgGnB;IAE0B,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAa;IAC7G;;;;;OAKG;IAC0B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAU;IACvD,KAAK,SAAM;IACpB,WAAW,SAAM;IACjB,IAAI,SAAM;IAEtB,OAAO,CAAC,YAAY;IAiDX,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}