@cognivo/components 0.8.0

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

@@ -0,0 +1,136 @@
+import { css as h, LitElement as u, html as g } from "lit";
+import { property as l, state as f, customElement as v } from "lit/decorators.js";
+import { h as _, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
+let r = null;
+function m() {
+  return r !== null;
+}
+function E(t, e, n) {
+  r || (r = t, document.dispatchEvent(new CustomEvent("cg-drag-start", {
+    detail: { ...t, clientX: e, clientY: n }
+  })));
+}
+function b(t, e) {
+  r && document.dispatchEvent(new CustomEvent("cg-drag-move", {
+    detail: { ...r, clientX: t, clientY: e }
+  }));
+}
+function D(t, e, n) {
+  if (!r) return null;
+  const i = r;
+  return document.dispatchEvent(new CustomEvent("cg-drag-end", {
+    detail: { ...i, clientX: t, clientY: e, dropped: n }
+  })), r = null, i;
+}
+function p() {
+  r && (document.dispatchEvent(new CustomEvent("cg-drag-end", {
+    detail: { ...r, clientX: -1, clientY: -1, dropped: !1 }
+  })), r = null);
+}
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (t, e, n, i) => {
+  for (var s = i > 1 ? void 0 : i ? P(e, n) : e, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (s = (i ? d(e, n, s) : d(s)) || s);
+  return i && s && w(e, n, s), s;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.type = "", this.payload = null, this.disabled = !1, this.dragging = !1, this._origin = null, this._pointerId = null, this._onPointerDown = (t) => {
+      if (!(this.disabled || m()) && !(t.button !== void 0 && t.button !== 0)) {
+        this._pointerId = t.pointerId, this._origin = { x: t.clientX, y: t.clientY }, this.dragging = !0;
+        try {
+          this.setPointerCapture(t.pointerId);
+        } catch {
+        }
+        E({ payload: this.payload, type: this.type, source: this }, t.clientX, t.clientY), this.dispatchEvent(new CustomEvent("cg-drag-start", {
+          detail: { type: this.type, payload: this.payload },
+          bubbles: !0,
+          composed: !0
+        }));
+      }
+    }, this._onPointerMove = (t) => {
+      if (!this.dragging || t.pointerId !== this._pointerId || !this._origin) return;
+      const e = t.clientX - this._origin.x, n = t.clientY - this._origin.y;
+      this.style.transform = `translate(${e}px, ${n}px)`, b(t.clientX, t.clientY);
+    }, this._onPointerUp = (t) => {
+      !this.dragging || t.pointerId !== this._pointerId || this._finishDrag(t.clientX, t.clientY, !1);
+    }, this._onPointerCancel = (t) => {
+      !this.dragging || t.pointerId !== this._pointerId || this._finishDrag(t.clientX, t.clientY, !0);
+    }, this._onKeyDown = (t) => {
+      t.key === "Escape" && this.dragging && (t.preventDefault(), p(), this._cleanupAfterDrag(!1));
+    };
+  }
+  _finishDrag(t, e, n) {
+    if (n) {
+      p(), this._cleanupAfterDrag(!1);
+      return;
+    }
+    const i = C(t, e);
+    this._cleanupAfterDrag(i);
+  }
+  _cleanupAfterDrag(t) {
+    if (this.style.transform = "", this._pointerId !== null)
+      try {
+        this.releasePointerCapture(this._pointerId);
+      } catch {
+      }
+    this.dragging = !1, this._pointerId = null, this._origin = null, this.dispatchEvent(new CustomEvent("cg-drag-end", {
+      detail: { type: this.type, payload: this.payload, dropped: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerCancel), this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerCancel), this.removeEventListener("keydown", this._onKeyDown);
+  }
+  render() {
+    return g`<slot></slot>`;
+  }
+};
+o.styles = [_, y, h`
+    :host {
+      display: block;
+      touch-action: none;
+      cursor: grab;
+    }
+    :host([disabled]) {
+      cursor: default;
+      touch-action: auto;
+    }
+    :host([dragging]) {
+      cursor: grabbing;
+      opacity: var(--cg-component-draggable-opacity, 0.6);
+      z-index: 1;
+    }
+  `];
+a([
+  l()
+], o.prototype, "type", 2);
+a([
+  l({ attribute: !1 })
+], o.prototype, "payload", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "dragging", 2);
+a([
+  f()
+], o.prototype, "_origin", 2);
+o = a([
+  v("cg-draggable")
+], o);
+function C(t, e) {
+  let n = !1;
+  const i = () => {
+    n = !0;
+  };
+  return document.addEventListener("cg-drop", i, { once: !0 }), D(t, e, !1), document.removeEventListener("cg-drop", i), n;
+}
+export {
+  o as CgDraggable
+};
+//# sourceMappingURL=cg-draggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-draggable.js","sources":["../../../src/utils/drag-manager.ts","../../../src/components/cg-draggable/cg-draggable.ts"],"sourcesContent":["/**\n * Module-scope drag coordinator shared between cg-draggable and cg-droppable.\n *\n * Pointer-event-based drag/drop works uniformly across mouse, touch, and\n * stylus and survives modern bundling. Each active drag broadcasts on the\n * document so any cg-droppable in any subtree can opt in.\n */\n\nexport type DragType = string;\n\nexport interface DragSession {\n  /** Application-defined payload. cg-droppable receives this on cg-drop. */\n  payload: unknown;\n  /** Type tag — cg-droppable.accepts is matched against this. */\n  type: DragType;\n  /** Source element that initiated the drag. */\n  source: HTMLElement;\n}\n\nexport interface DragMoveDetail extends DragSession {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface DragEndDetail extends DragMoveDetail {\n  /** If true, the drop landed on a registered droppable. */\n  dropped: boolean;\n}\n\nlet active: DragSession | null = null;\n\n/** True while a drag is in progress. */\nexport function isDragging(): boolean {\n  return active !== null;\n}\n\n/** Start a drag session. Idempotent: a second start while active is ignored. */\nexport function startDrag(session: DragSession, x: number, y: number): void {\n  if (active) return;\n  active = session;\n  document.dispatchEvent(new CustomEvent<DragMoveDetail>('cg-drag-start', {\n    detail: { ...session, clientX: x, clientY: y },\n  }));\n}\n\n/** Broadcast a move during the current drag. */\nexport function moveDrag(x: number, y: number): void {\n  if (!active) return;\n  document.dispatchEvent(new CustomEvent<DragMoveDetail>('cg-drag-move', {\n    detail: { ...active, clientX: x, clientY: y },\n  }));\n}\n\n/**\n * End the current drag session. Returns the session that was active so\n * cg-draggable can fire its own end event with the same payload.\n */\nexport function endDrag(x: number, y: number, dropped: boolean): DragSession | null {\n  if (!active) return null;\n  const finished = active;\n  document.dispatchEvent(new CustomEvent<DragEndDetail>('cg-drag-end', {\n    detail: { ...finished, clientX: x, clientY: y, dropped },\n  }));\n  active = null;\n  return finished;\n}\n\n/** Cancel any in-progress drag without firing a drop. Useful for Escape key handling. */\nexport function cancelDrag(): void {\n  if (!active) return;\n  document.dispatchEvent(new CustomEvent<DragEndDetail>('cg-drag-end', {\n    detail: { ...active, clientX: -1, clientY: -1, dropped: false },\n  }));\n  active = null;\n}\n\n/** Inspect the current session without ending it. Returns null when no drag is active. */\nexport function currentSession(): DragSession | null {\n  return active;\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { startDrag, moveDrag, endDrag, cancelDrag, isDragging } from '../../utils/drag-manager.js';\n\n/**\n * @element cg-draggable\n * Wraps content that can be picked up with a pointer and dropped on a\n * matching `<cg-droppable>`. Pointer-event-based — works on mouse, touch,\n * and stylus.\n *\n * Carries an opaque `payload` (object reference is preserved across the\n * drag) and a `type` tag that the droppable filters on. The dragged\n * element is visually translated under the pointer; a `dragging` attribute\n * on the host lets consumers style the source state.\n *\n * @example\n * ```html\n * <cg-draggable type=\"card\" .payload=${cardData}>\n *   <cg-card>…</cg-card>\n * </cg-draggable>\n * ```\n *\n * @slot - The draggable content.\n *\n * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drag-start - Drag begins\n * @fires {CustomEvent<{type: string, payload: unknown, dropped: boolean}>} cg-drag-end - Drag ends (with or without a successful drop)\n */\n@customElement('cg-draggable')\nexport class CgDraggable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      touch-action: none;\n      cursor: grab;\n    }\n    :host([disabled]) {\n      cursor: default;\n      touch-action: auto;\n    }\n    :host([dragging]) {\n      cursor: grabbing;\n      opacity: var(--cg-component-draggable-opacity, 0.6);\n      z-index: 1;\n    }\n  `];\n\n  /** Identifier matched against cg-droppable.accepts. */\n  @property() type = '';\n\n  /** Application payload passed to the droppable on drop. */\n  @property({ attribute: false }) payload: unknown = null;\n\n  /** Disable picking up. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Reflects while a drag from this element is active. */\n  @property({ type: Boolean, reflect: true }) dragging = false;\n\n  @state() private _origin: { x: number; y: number } | null = null;\n\n  private _pointerId: number | null = null;\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled || isDragging()) return;\n    if (e.button !== undefined && e.button !== 0) return;\n\n    this._pointerId = e.pointerId;\n    this._origin = { x: e.clientX, y: e.clientY };\n    this.dragging = true;\n    try { this.setPointerCapture(e.pointerId); } catch { /* happy-dom */ }\n\n    startDrag({ payload: this.payload, type: this.type, source: this }, e.clientX, e.clientY);\n\n    this.dispatchEvent(new CustomEvent('cg-drag-start', {\n      detail: { type: this.type, payload: this.payload },\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId || !this._origin) return;\n    const dx = e.clientX - this._origin.x;\n    const dy = e.clientY - this._origin.y;\n    this.style.transform = `translate(${dx}px, ${dy}px)`;\n    moveDrag(e.clientX, e.clientY);\n  };\n\n  private _onPointerUp = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId) return;\n    this._finishDrag(e.clientX, e.clientY, false);\n  };\n\n  private _onPointerCancel = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId) return;\n    this._finishDrag(e.clientX, e.clientY, true);\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.dragging) {\n      e.preventDefault();\n      cancelDrag();\n      this._cleanupAfterDrag(false);\n    }\n  };\n\n  private _finishDrag(x: number, y: number, cancelled: boolean): void {\n    if (cancelled) {\n      cancelDrag();\n      this._cleanupAfterDrag(false);\n      return;\n    }\n    // The droppable hit-test happens inside the drag-manager event flow:\n    // listening cg-droppables snapshot whether they were under (x,y) when\n    // cg-drag-end fires. We expose `dropped: true` if any droppable accepted.\n    const dropped = endDragAndDetectDrop(x, y);\n    this._cleanupAfterDrag(dropped);\n  }\n\n  private _cleanupAfterDrag(dropped: boolean): void {\n    this.style.transform = '';\n    if (this._pointerId !== null) {\n      try { this.releasePointerCapture(this._pointerId); } catch { /* ignore */ }\n    }\n    this.dragging = false;\n    this._pointerId = null;\n    this._origin = null;\n\n    this.dispatchEvent(new CustomEvent('cg-drag-end', {\n      detail: { type: this.type, payload: this.payload, dropped },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerdown', this._onPointerDown);\n    this.addEventListener('pointermove', this._onPointerMove);\n    this.addEventListener('pointerup', this._onPointerUp);\n    this.addEventListener('pointercancel', this._onPointerCancel);\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerdown', this._onPointerDown);\n    this.removeEventListener('pointermove', this._onPointerMove);\n    this.removeEventListener('pointerup', this._onPointerUp);\n    this.removeEventListener('pointercancel', this._onPointerCancel);\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Hit-test against registered droppables at (x, y). Walks up from the\n * topmost element under the point looking for the closest cg-droppable\n * with a matching `accepts` type. Returns true if a drop is dispatched.\n */\nfunction endDragAndDetectDrop(x: number, y: number): boolean {\n  // The drag-manager's endDrag broadcasts cg-drag-end with the coords; each\n  // cg-droppable listens and decides for itself. We just call endDrag and\n  // observe the dropped flag through a shared mutable cell.\n  let dropped = false;\n  const onDrop = () => { dropped = true; };\n  document.addEventListener('cg-drop', onDrop, { once: true });\n  endDrag(x, y, false);\n  document.removeEventListener('cg-drop', onDrop);\n  return dropped;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-draggable': CgDraggable;\n  }\n}\n"],"names":["active","isDragging","startDrag","session","x","y","moveDrag","endDrag","dropped","finished","cancelDrag","CgDraggable","LitElement","e","dx","dy","cancelled","endDragAndDetectDrop","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement","onDrop"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-drawer
+ * Slide-in side panel with backdrop, focus trap, and scroll lock.
+ *
+ * @example
+ * ```html
+ * <cg-drawer title="Settings" side="right" size="md" open>
+ *   <p>Drawer content here.</p>
+ * </cg-drawer>
+ * ```
+ *
+ * @slot - Default slot for drawer body content
+ * @slot footer - Action buttons area below the body
+ *
+ * @fires {CustomEvent} cg-drawer-open - When the drawer opens
+ * @fires {CustomEvent} cg-drawer-close - When the drawer closes
+ * @fires {CustomEvent} cg-drawer-back - When the back button is clicked
+ *
+ * @cssprop --cg-color-modal-container-background - Panel background
+ * @cssprop --cg-border-radius-200 - Panel border radius (28px)
+ * @cssprop --cg-transition-easing-ease-out - Slide spring easing
+ * @cssprop --cg-color-focus-ring - Close button focus ring
+ */
+export declare class CgDrawer extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    side: 'left' | 'right';
+    size: 'sm' | 'md' | 'lg' | 'full';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    title: string;
+    icon: string;
+    back: boolean;
+    closable: boolean;
+    persistent: boolean;
+    loading: boolean;
+    error: string;
+    private _hasFooter;
+    private _closing;
+    private _previousOverflow;
+    private _focusTrap;
+    updated(changed: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    disconnectedCallback(): void;
+    private _handleBack;
+    private _handleFooterSlotChange;
+    private _handleBackdropClick;
+    private _requestClose;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-drawer': CgDrawer;
+    }
+}
+//# sourceMappingURL=cg-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/cg-drawer/cg-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAwQnB;IAEyC,IAAI,UAAS;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAW;IACjC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAC7C,KAAK,SAAM;IACpB,IAAI,SAAM;IACT,IAAI,UAAS;IACb,QAAQ,UAAQ;IAChB,UAAU,UAAS;IACJ,OAAO,UAAS;IAChC,KAAK,SAAM;IAE9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAmB;IAE5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc9C,OAAO,CAAC,OAAO;IAmBf,OAAO,CAAC,QAAQ;IAMP,oBAAoB;IAS7B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAIZ,MAAM;CA+DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,421 @@
+import { css as u, LitElement as h, nothing as o, html as s } from "lit";
+import { property as a, state as p, customElement as v } from "lit/decorators.js";
+import { c as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { F as m } from "../../chunks/focus-trap-BdRNhSPD.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, n, c, d) => {
+  for (var i = d > 1 ? void 0 : d ? y(n, c) : n, l = t.length - 1, g; l >= 0; l--)
+    (g = t[l]) && (i = (d ? g(n, c, i) : g(i)) || i);
+  return d && i && w(n, c, i), i;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.side = "right", this.size = "md", this.rounded = "lg", this.title = "", this.icon = "", this.back = !1, this.closable = !0, this.persistent = !1, this.loading = !1, this.error = "", this._hasFooter = !1, this._closing = !1, this._previousOverflow = "", this._focusTrap = new m();
+  }
+  updated(t) {
+    t.has("open") && (this.open ? this._onOpen() : (t.get("open") === !0 && (this._closing = !0, setTimeout(() => {
+      this._closing = !1;
+    }, 200)), this._onClose()));
+  }
+  _onOpen() {
+    this._previousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.dispatchEvent(new CustomEvent("cg-drawer-open", { bubbles: !0, composed: !0 }));
+    const t = this.shadowRoot?.querySelector(".panel");
+    t && this._focusTrap.activate(t, {
+      returnFocus: !0,
+      handleEscape: this.closable,
+      onEscape: () => this._requestClose()
+    });
+  }
+  _onClose() {
+    document.body.style.overflow = this._previousOverflow, this._focusTrap.deactivate(), this.dispatchEvent(new CustomEvent("cg-drawer-close", { bubbles: !0, composed: !0 }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._focusTrap.deactivate(), this.open && (document.body.style.overflow = this._previousOverflow || "");
+  }
+  _handleBack() {
+    this.dispatchEvent(new CustomEvent("cg-drawer-back", { bubbles: !0, composed: !0 }));
+  }
+  _handleFooterSlotChange(t) {
+    const n = t.target;
+    this._hasFooter = n.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleBackdropClick() {
+    !this.persistent && this.closable && this._requestClose();
+  }
+  _requestClose() {
+    this.open = !1;
+  }
+  render() {
+    return s`
+      <div
+        class="backdrop ${this._closing ? "closing" : ""}"
+        @click="${this._handleBackdropClick}"
+        aria-hidden="true"
+      ></div>
+      <div
+        class="panel ${this._closing ? "closing" : ""}"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${this.title ? o : "Side panel"}"
+        aria-labelledby="${this.title ? "drawer-title" : o}"
+        tabindex="-1"
+      >
+        ${this.title || this.closable || this.back ? s`
+          <div class="drawer-header">
+            <div class="drawer-header-left">
+              ${this.back ? s`
+                <button class="back-btn" aria-label="Go back" @click="${this._handleBack}">
+                  <cg-icon name="chevron-left" size="sm"></cg-icon>
+                </button>
+              ` : o}
+              ${this.icon ? s`
+                <span class="drawer-icon"><cg-icon name="${this.icon}" size="md"></cg-icon></span>
+              ` : o}
+              <h2 class="drawer-title" id="drawer-title">${this.title}</h2>
+            </div>
+            ${this.closable ? s`
+              <button
+                class="close-btn"
+                aria-label="Close panel"
+                @click="${this._requestClose}"
+              >
+                <cg-icon name="x" size="xs"></cg-icon>
+              </button>
+            ` : o}
+          </div>
+        ` : o}
+
+        ${this.error ? s`
+          <div class="drawer-error-banner" role="alert">
+            <cg-icon class="drawer-error-icon" name="warning" size="sm" color="danger"></cg-icon>
+            <span>${this.error}</span>
+          </div>
+        ` : o}
+
+        <div class="drawer-body">
+          <slot></slot>
+          ${this.loading ? s`
+            <div class="drawer-loading-overlay" aria-busy="true" aria-label="Loading">
+              <span class="drawer-spinner"></span>
+              <span class="drawer-loading-text">Loading...</span>
+            </div>
+          ` : o}
+        </div>
+
+        <div class="drawer-footer" ?hidden=${!this._hasFooter}>
+          <slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [f, b, u`
+    :host {
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: contents;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    /* ── Backdrop ── */
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: var(--cg-z-index-500);
+      background: var(--cg-color-modal-overlay-background);
+      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);
+      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([open]) .backdrop {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* ── Panel ──
+       The shadow is intentionally directional (set per side below) so it
+       only casts inward toward the page content, not into the viewport edge
+       it's flush against. Casting onto the off-edge side produces visible
+       compositing artifacts at certain zoom levels and burns paint cycles. */
+    .panel {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      z-index: var(--cg-z-index-top);
+      display: flex;
+      flex-direction: column;
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      overflow: hidden;
+      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .backdrop { transition: opacity var(--cg-transition-duration-fast) ease; }
+      .panel { transition: transform var(--cg-transition-duration-fast) ease; }
+    }
+
+    /* ── Side: Left ── */
+    :host([side="left"]) .panel {
+      left: 0;
+      border-left: none;
+      border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0;
+      transform: translateX(-100%);
+      box-shadow: var(--cg-shadow-elevation-xl);
+    }
+    :host([side="left"][open]) .panel {
+      transform: translateX(0);
+    }
+
+    /* ── Side: Right ── */
+    :host([side="right"]) .panel {
+      right: 0;
+      border-right: none;
+      border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius);
+      transform: translateX(100%);
+      box-shadow: var(--cg-shadow-elevation-xl);
+    }
+    :host([side="right"][open]) .panel {
+      transform: translateX(0);
+    }
+
+    /* ── Closing animation ── */
+    @keyframes drawer-exit-left {
+      from { transform: translateX(0); }
+      to { transform: translateX(-100%); }
+    }
+    @keyframes drawer-exit-right {
+      from { transform: translateX(0); }
+      to { transform: translateX(100%); }
+    }
+    @keyframes backdrop-exit {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+    :host([side="left"]) .panel.closing {
+      animation: drawer-exit-left var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+    :host([side="right"]) .panel.closing {
+      animation: drawer-exit-right var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+    .backdrop.closing {
+      pointer-events: auto;
+      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) .panel { width: var(--cg-component-drawer-width-sm); max-width: 85vw; }
+    :host([size="md"]) .panel { width: var(--cg-component-drawer-width-md); max-width: 85vw; }
+    :host([size="lg"]) .panel { width: var(--cg-component-drawer-width-lg); max-width: 90vw; }
+    :host([size="full"]) .panel {
+      width: 100vw;
+      max-width: 100vw;
+      border-radius: 0;
+    }
+
+    /* ── Header ── */
+    .drawer-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+      flex-shrink: 0;
+    }
+
+    .drawer-header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .drawer-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--cg-color-accent-text);
+    }
+
+    .drawer-title {
+      font-size: var(--cg-font-size-md);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-modal-header-text);
+      margin: 0;
+      line-height: var(--cg-line-height-snug);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Header icon buttons (close + back) share the same chrome — round,
+       muted at rest, outlined-text on hover, press-scale on active. */
+    .close-btn,
+    .back-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border: none;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      padding: 0;
+      flex-shrink: 0;
+      font-size: var(--cg-font-size-sm);
+      line-height: 1;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .close-btn:hover,
+    .back-btn:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+      color: var(--cg-color-surface-container-text);
+    }
+    .close-btn:active,
+    .back-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .close-btn:focus-visible,
+    .back-btn:focus-visible {
+      box-shadow:
+        0 0 0 2px var(--cg-color-focus-ring-offset),
+        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);
+      outline: none;
+    }
+
+    /* ── Body ── */
+    .drawer-body {
+      position: relative;
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-4) var(--cg-spacing-24) var(--cg-spacing-24);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+    }
+
+    /* ── Footer ── */
+    .drawer-footer {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      flex-shrink: 0;
+    }
+    .drawer-footer ::slotted(*) {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--cg-spacing-12);
+    }
+    .drawer-footer:empty,
+    .drawer-footer ::slotted(:empty) {
+      display: none;
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"][side="left"]) .panel { border-radius: 0; }
+    :host([rounded="none"][side="right"]) .panel { border-radius: 0; }
+    :host([rounded="sm"][side="left"]) .panel { border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0; }
+    :host([rounded="sm"][side="right"]) .panel { border-radius: var(--cg-border-radius-50) 0 0 var(--cg-border-radius-50); }
+    :host([rounded="md"][side="left"]) .panel { border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0; }
+    :host([rounded="md"][side="right"]) .panel { border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100); }
+    :host([rounded="lg"][side="left"]) .panel { border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0; }
+    :host([rounded="lg"][side="right"]) .panel { border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius); }
+    :host([rounded="full"][side="left"]) .panel { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }
+    :host([rounded="full"][side="right"]) .panel { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }
+
+    /* ── Loading overlay ── */
+    .drawer-loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-12);
+      background: var(--cg-color-modal-container-background);
+    }
+    .drawer-spinner {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      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;
+    }
+    .drawer-loading-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* ── Error banner ── */
+    .drawer-error-banner {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      margin: 0 var(--cg-spacing-24);
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      border-radius: var(--cg-border-radius-100);
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-snug);
+    }
+    .drawer-error-icon {
+      flex-shrink: 0;
+    }
+  `];
+e([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+e([
+  a({ type: String, reflect: !0 })
+], r.prototype, "side", 2);
+e([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+e([
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
+e([
+  a({ type: String })
+], r.prototype, "title", 2);
+e([
+  a({ type: String })
+], r.prototype, "icon", 2);
+e([
+  a({ type: Boolean })
+], r.prototype, "back", 2);
+e([
+  a({ type: Boolean })
+], r.prototype, "closable", 2);
+e([
+  a({ type: Boolean })
+], r.prototype, "persistent", 2);
+e([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+e([
+  a({ type: String })
+], r.prototype, "error", 2);
+e([
+  p()
+], r.prototype, "_hasFooter", 2);
+e([
+  p()
+], r.prototype, "_closing", 2);
+r = e([
+  v("cg-drawer")
+], r);
+export {
+  r as CgDrawer
+};
+//# sourceMappingURL=cg-drawer.js.map