@cognivo/components 0.8.0

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

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-sortable
+ * Reorderable list. Slot in any elements as direct children — drag them with
+ * a pointer (mouse/touch/pen) or move them with the keyboard to reorder.
+ * Fires `cg-sort` with the new order when a reorder commits.
+ *
+ * Pointer drag uses pointer capture, so it works on mouse, touch, and stylus
+ * without separate code paths. Keyboard reorder: focus an item, then
+ * ArrowUp/ArrowDown (or ArrowLeft/ArrowRight in horizontal mode) to move
+ * it. Home/End jump to first/last position.
+ *
+ * @example
+ * ```html
+ * <cg-sortable @cg-sort=${onSort}>
+ *   <div data-id="a">Item A</div>
+ *   <div data-id="b">Item B</div>
+ *   <div data-id="c">Item C</div>
+ * </cg-sortable>
+ * ```
+ *
+ * @example With drag handles only
+ * ```html
+ * <cg-sortable handle-selector=".handle">
+ *   <div data-id="a"><span class="handle">⋮</span> Item A</div>
+ *   <div data-id="b"><span class="handle">⋮</span> Item B</div>
+ * </cg-sortable>
+ * ```
+ *
+ * @slot - Direct children become the sortable items.
+ *
+ * @fires {CustomEvent<{from: number, to: number, items: HTMLElement[]}>} cg-sort - Reorder committed
+ * @fires {CustomEvent<{index: number, item: HTMLElement}>} cg-sort-start - Drag/move started
+ * @fires {CustomEvent<{index: number, item: HTMLElement}>} cg-sort-end - Drag/move ended (no commit if cancelled)
+ *
+ * @cssprop --cg-component-sortable-dragging-opacity - Opacity of the dragged item (default 0.6)
+ */
+export declare class CgSortable extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** CSS selector inside each item that initiates drag. Empty = whole item is the handle. */
+    handleSelector: string;
+    /** Disable both pointer and keyboard reordering. */
+    disabled: boolean;
+    /** Layout axis. `vertical` listens to ArrowUp/Down; `horizontal` listens to ArrowLeft/Right. */
+    direction: 'vertical' | 'horizontal';
+    /** Threshold (0..1) of an item's height/width that the pointer must cross to swap. Default 0.5. */
+    swapThreshold: number;
+    private _announcement;
+    private _draggingEl;
+    private _startIndex;
+    private _pointerId;
+    private _startPointer;
+    private _startRect;
+    private _items;
+    private _findItemFromTarget;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _finishDrag;
+    private _onKeyDown;
+    private _announce;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-sortable': CgSortable;
+    }
+}
+//# sourceMappingURL=cg-sortable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sortable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-sortable/cg-sortable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAgCnB;IAEH,2FAA2F;IAC/C,cAAc,SAAM;IAEhE,oDAAoD;IACR,QAAQ,UAAS;IAE7D,gGAAgG;IACnE,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/E,mGAAmG;IAC1C,aAAa,SAAO;IAEpE,OAAO,CAAC,aAAa,CAAM;IAEpC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,UAAU,CAAwB;IAE1C,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc,CAmBpB;IAEF,OAAO,CAAC,cAAc,CAqDpB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,WAAW;IAiCnB,OAAO,CAAC,UAAU,CAyChB;IAEF,OAAO,CAAC,SAAS;IAKR,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAS5B,MAAM;CAMhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -0,0 +1,177 @@
+import { css as _, LitElement as m, html as v } from "lit";
+import { property as p, state as b, customElement as w } from "lit/decorators.js";
+import { h as y, r as E } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? I(e, i) : e, a = t.length - 1, r; a >= 0; a--)
+    (r = t[a]) && (s = (n ? r(e, i, s) : r(s)) || s);
+  return n && s && x(e, i, s), s;
+};
+let h = class extends m {
+  constructor() {
+    super(...arguments), this.handleSelector = "", this.disabled = !1, this.direction = "vertical", this.swapThreshold = 0.5, this._announcement = "", this._draggingEl = null, this._startIndex = -1, this._pointerId = null, this._startPointer = { x: 0, y: 0 }, this._startRect = null, this._onPointerDown = (t) => {
+      if (this.disabled || t.button !== void 0 && t.button !== 0) return;
+      const e = this._findItemFromTarget(t.target);
+      e && (this._draggingEl = e, this._startIndex = this._items().indexOf(e), this._pointerId = t.pointerId, this._startPointer = { x: t.clientX, y: t.clientY }, this._startRect = e.getBoundingClientRect(), e.setPointerCapture(t.pointerId), e.classList.add("cg-sortable-dragging"), this.dispatchEvent(new CustomEvent("cg-sort-start", {
+        detail: { index: this._startIndex, item: e },
+        bubbles: !0,
+        composed: !0
+      })));
+    }, this._onPointerMove = (t) => {
+      if (!this._draggingEl || t.pointerId !== this._pointerId || !this._startRect) return;
+      const e = t.clientX - this._startPointer.x, i = t.clientY - this._startPointer.y;
+      this.direction === "vertical" ? this._draggingEl.style.transform = `translateY(${i}px)` : this._draggingEl.style.transform = `translateX(${e}px)`;
+      const n = this._items(), s = n.indexOf(this._draggingEl);
+      if (s === -1) return;
+      const a = this._startRect.left + this._startRect.width / 2 + e, r = this._startRect.top + this._startRect.height / 2 + i;
+      for (let o = 0; o < n.length; o++) {
+        if (o === s) continue;
+        const u = n[o];
+        if (!u) continue;
+        const l = u.getBoundingClientRect();
+        let g = !1;
+        if (this.direction === "vertical") {
+          const d = l.top + l.height * this.swapThreshold, f = l.top + l.height * (1 - this.swapThreshold);
+          (o < s && r < d || o > s && r > f) && (g = !0);
+        } else {
+          const d = l.left + l.width * this.swapThreshold, f = l.left + l.width * (1 - this.swapThreshold);
+          (o < s && a < d || o > s && a > f) && (g = !0);
+        }
+        if (g) {
+          o < s ? this.insertBefore(this._draggingEl, u) : this.insertBefore(this._draggingEl, u.nextSibling);
+          const d = this._draggingEl.getBoundingClientRect();
+          this._startPointer = {
+            x: this._startPointer.x + (d.left - this._startRect.left),
+            y: this._startPointer.y + (d.top - this._startRect.top)
+          }, this._startRect = d, this._draggingEl.style.transform = "";
+          return;
+        }
+      }
+    }, this._onPointerUp = (t) => {
+      !this._draggingEl || t.pointerId !== this._pointerId || this._finishDrag();
+    }, this._onPointerCancel = (t) => {
+      !this._draggingEl || t.pointerId !== this._pointerId || this._finishDrag();
+    }, this._onKeyDown = (t) => {
+      if (this.disabled) return;
+      const e = this._findItemFromTarget(t.target);
+      if (!e) return;
+      const i = this._items(), n = i.indexOf(e);
+      if (n === -1) return;
+      const s = this.direction === "vertical" ? "ArrowUp" : "ArrowLeft", a = this.direction === "vertical" ? "ArrowDown" : "ArrowRight";
+      let r = -1;
+      if (t.key === s && n > 0) r = n - 1;
+      else if (t.key === a && n < i.length - 1) r = n + 1;
+      else if (t.key === "Home" && n > 0) r = 0;
+      else if (t.key === "End" && n < i.length - 1) r = i.length - 1;
+      else return;
+      t.preventDefault();
+      const o = i[r];
+      o && (r < n ? this.insertBefore(e, o) : this.insertBefore(e, o.nextSibling), e.classList.add("cg-sortable-keyboard-active"), setTimeout(() => e.classList.remove("cg-sortable-keyboard-active"), 600), e.tabIndex < 0 && (e.tabIndex = 0), e.focus(), this.dispatchEvent(new CustomEvent("cg-sort", {
+        detail: { from: n, to: r, items: this._items() },
+        bubbles: !0,
+        composed: !0
+      })), this._announce(`Moved to position ${r + 1} of ${i.length}`));
+    };
+  }
+  _items() {
+    return Array.from(this.children).filter((t) => t instanceof HTMLElement);
+  }
+  _findItemFromTarget(t) {
+    if (!(t instanceof Element) || this.handleSelector && !t.closest(this.handleSelector))
+      return null;
+    const e = this._items();
+    for (const i of e)
+      if (i.contains(t)) return i;
+    return null;
+  }
+  _finishDrag() {
+    const t = this._draggingEl;
+    if (!t) return;
+    if (t.classList.remove("cg-sortable-dragging"), t.style.transform = "", this._pointerId !== null)
+      try {
+        t.releasePointerCapture(this._pointerId);
+      } catch {
+      }
+    const e = this._items(), i = e.indexOf(t);
+    this.dispatchEvent(new CustomEvent("cg-sort-end", {
+      detail: { index: i, item: t },
+      bubbles: !0,
+      composed: !0
+    })), i !== this._startIndex && this._startIndex !== -1 && (this.dispatchEvent(new CustomEvent("cg-sort", {
+      detail: { from: this._startIndex, to: i, items: e },
+      bubbles: !0,
+      composed: !0
+    })), this._announce(`Moved to position ${i + 1} of ${e.length}`)), this._draggingEl = null, this._pointerId = null, this._startIndex = -1, this._startRect = null;
+  }
+  _announce(t) {
+    this._announcement = "", requestAnimationFrame(() => {
+      this._announcement = t;
+    });
+  }
+  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 v`
+      <slot></slot>
+      <div class="live" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</div>
+    `;
+  }
+};
+h.styles = [y, E, _`
+    :host { display: block; }
+
+    ::slotted(*) {
+      touch-action: none;
+      cursor: grab;
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([disabled]) ::slotted(*) {
+      cursor: default;
+      touch-action: auto;
+    }
+
+    ::slotted(.cg-sortable-dragging) {
+      opacity: var(--cg-component-sortable-dragging-opacity, 0.6);
+      cursor: grabbing;
+      z-index: 1;
+      transition: none;
+    }
+
+    ::slotted(.cg-sortable-keyboard-active) {
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-spacing-2);
+    }
+
+    .live {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `];
+c([
+  p({ attribute: "handle-selector" })
+], h.prototype, "handleSelector", 2);
+c([
+  p({ type: Boolean, reflect: !0 })
+], h.prototype, "disabled", 2);
+c([
+  p({ reflect: !0 })
+], h.prototype, "direction", 2);
+c([
+  p({ type: Number, attribute: "swap-threshold" })
+], h.prototype, "swapThreshold", 2);
+c([
+  b()
+], h.prototype, "_announcement", 2);
+h = c([
+  w("cg-sortable")
+], h);
+export {
+  h as CgSortable
+};
+//# sourceMappingURL=cg-sortable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sortable.js","sources":["../../../src/components/cg-sortable/cg-sortable.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-sortable\n * Reorderable list. Slot in any elements as direct children — drag them with\n * a pointer (mouse/touch/pen) or move them with the keyboard to reorder.\n * Fires `cg-sort` with the new order when a reorder commits.\n *\n * Pointer drag uses pointer capture, so it works on mouse, touch, and stylus\n * without separate code paths. Keyboard reorder: focus an item, then\n * ArrowUp/ArrowDown (or ArrowLeft/ArrowRight in horizontal mode) to move\n * it. Home/End jump to first/last position.\n *\n * @example\n * ```html\n * <cg-sortable @cg-sort=${onSort}>\n *   <div data-id=\"a\">Item A</div>\n *   <div data-id=\"b\">Item B</div>\n *   <div data-id=\"c\">Item C</div>\n * </cg-sortable>\n * ```\n *\n * @example With drag handles only\n * ```html\n * <cg-sortable handle-selector=\".handle\">\n *   <div data-id=\"a\"><span class=\"handle\">⋮</span> Item A</div>\n *   <div data-id=\"b\"><span class=\"handle\">⋮</span> Item B</div>\n * </cg-sortable>\n * ```\n *\n * @slot - Direct children become the sortable items.\n *\n * @fires {CustomEvent<{from: number, to: number, items: HTMLElement[]}>} cg-sort - Reorder committed\n * @fires {CustomEvent<{index: number, item: HTMLElement}>} cg-sort-start - Drag/move started\n * @fires {CustomEvent<{index: number, item: HTMLElement}>} cg-sort-end - Drag/move ended (no commit if cancelled)\n *\n * @cssprop --cg-component-sortable-dragging-opacity - Opacity of the dragged item (default 0.6)\n */\n@customElement('cg-sortable')\nexport class CgSortable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    ::slotted(*) {\n      touch-action: none;\n      cursor: grab;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([disabled]) ::slotted(*) {\n      cursor: default;\n      touch-action: auto;\n    }\n\n    ::slotted(.cg-sortable-dragging) {\n      opacity: var(--cg-component-sortable-dragging-opacity, 0.6);\n      cursor: grabbing;\n      z-index: 1;\n      transition: none;\n    }\n\n    ::slotted(.cg-sortable-keyboard-active) {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-spacing-2);\n    }\n\n    .live {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px; overflow: hidden;\n      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n    }\n  `];\n\n  /** CSS selector inside each item that initiates drag. Empty = whole item is the handle. */\n  @property({ attribute: 'handle-selector' }) handleSelector = '';\n\n  /** Disable both pointer and keyboard reordering. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Layout axis. `vertical` listens to ArrowUp/Down; `horizontal` listens to ArrowLeft/Right. */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Threshold (0..1) of an item's height/width that the pointer must cross to swap. Default 0.5. */\n  @property({ type: Number, attribute: 'swap-threshold' }) swapThreshold = 0.5;\n\n  @state() private _announcement = '';\n\n  private _draggingEl: HTMLElement | null = null;\n  private _startIndex = -1;\n  private _pointerId: number | null = null;\n  private _startPointer: { x: number; y: number } = { x: 0, y: 0 };\n  private _startRect: DOMRect | null = null;\n\n  private _items(): HTMLElement[] {\n    return Array.from(this.children).filter(c => c instanceof HTMLElement) as HTMLElement[];\n  }\n\n  private _findItemFromTarget(target: EventTarget | null): HTMLElement | null {\n    if (!(target instanceof Element)) return null;\n    if (this.handleSelector) {\n      const handle = target.closest(this.handleSelector);\n      if (!handle) return null;\n    }\n    const items = this._items();\n    for (const el of items) {\n      if (el.contains(target as Node)) return el;\n    }\n    return null;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled) return;\n    if (e.button !== undefined && e.button !== 0) return;\n    const item = this._findItemFromTarget(e.target);\n    if (!item) return;\n\n    this._draggingEl = item;\n    this._startIndex = this._items().indexOf(item);\n    this._pointerId = e.pointerId;\n    this._startPointer = { x: e.clientX, y: e.clientY };\n    this._startRect = item.getBoundingClientRect();\n\n    item.setPointerCapture(e.pointerId);\n    item.classList.add('cg-sortable-dragging');\n\n    this.dispatchEvent(new CustomEvent('cg-sort-start', {\n      detail: { index: this._startIndex, item },\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._draggingEl || e.pointerId !== this._pointerId || !this._startRect) return;\n\n    const deltaX = e.clientX - this._startPointer.x;\n    const deltaY = e.clientY - this._startPointer.y;\n    if (this.direction === 'vertical') {\n      this._draggingEl.style.transform = `translateY(${deltaY}px)`;\n    } else {\n      this._draggingEl.style.transform = `translateX(${deltaX}px)`;\n    }\n\n    const items = this._items();\n    const dragIdx = items.indexOf(this._draggingEl);\n    if (dragIdx === -1) return;\n\n    const dragCenterX = this._startRect.left + this._startRect.width / 2 + deltaX;\n    const dragCenterY = this._startRect.top + this._startRect.height / 2 + deltaY;\n\n    for (let i = 0; i < items.length; i++) {\n      if (i === dragIdx) continue;\n      const other = items[i];\n      if (!other) continue;\n      const r = other.getBoundingClientRect();\n\n      let crossed = false;\n      if (this.direction === 'vertical') {\n        const threshold = r.top + r.height * this.swapThreshold;\n        const oppositeThreshold = r.top + r.height * (1 - this.swapThreshold);\n        if (i < dragIdx && dragCenterY < threshold) crossed = true;\n        else if (i > dragIdx && dragCenterY > oppositeThreshold) crossed = true;\n      } else {\n        const threshold = r.left + r.width * this.swapThreshold;\n        const oppositeThreshold = r.left + r.width * (1 - this.swapThreshold);\n        if (i < dragIdx && dragCenterX < threshold) crossed = true;\n        else if (i > dragIdx && dragCenterX > oppositeThreshold) crossed = true;\n      }\n\n      if (crossed) {\n        if (i < dragIdx) {\n          this.insertBefore(this._draggingEl, other);\n        } else {\n          this.insertBefore(this._draggingEl, other.nextSibling);\n        }\n        const newRect = this._draggingEl.getBoundingClientRect();\n        this._startPointer = {\n          x: this._startPointer.x + (newRect.left - this._startRect.left),\n          y: this._startPointer.y + (newRect.top - this._startRect.top),\n        };\n        this._startRect = newRect;\n        this._draggingEl.style.transform = '';\n        return;\n      }\n    }\n  };\n\n  private _onPointerUp = (e: PointerEvent): void => {\n    if (!this._draggingEl || e.pointerId !== this._pointerId) return;\n    this._finishDrag();\n  };\n\n  private _onPointerCancel = (e: PointerEvent): void => {\n    if (!this._draggingEl || e.pointerId !== this._pointerId) return;\n    this._finishDrag();\n  };\n\n  private _finishDrag(): void {\n    const item = this._draggingEl;\n    if (!item) return;\n\n    item.classList.remove('cg-sortable-dragging');\n    item.style.transform = '';\n\n    if (this._pointerId !== null) {\n      try { item.releasePointerCapture(this._pointerId); } catch { /* ignore */ }\n    }\n\n    const items = this._items();\n    const finalIndex = items.indexOf(item);\n\n    this.dispatchEvent(new CustomEvent('cg-sort-end', {\n      detail: { index: finalIndex, item },\n      bubbles: true, composed: true,\n    }));\n\n    if (finalIndex !== this._startIndex && this._startIndex !== -1) {\n      this.dispatchEvent(new CustomEvent('cg-sort', {\n        detail: { from: this._startIndex, to: finalIndex, items },\n        bubbles: true, composed: true,\n      }));\n      this._announce(`Moved to position ${finalIndex + 1} of ${items.length}`);\n    }\n\n    this._draggingEl = null;\n    this._pointerId = null;\n    this._startIndex = -1;\n    this._startRect = null;\n  }\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) return;\n    const item = this._findItemFromTarget(e.target);\n    if (!item) return;\n\n    const items = this._items();\n    const idx = items.indexOf(item);\n    if (idx === -1) return;\n\n    const prevKey = this.direction === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n    const nextKey = this.direction === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n\n    let target = -1;\n    if (e.key === prevKey && idx > 0) target = idx - 1;\n    else if (e.key === nextKey && idx < items.length - 1) target = idx + 1;\n    else if (e.key === 'Home' && idx > 0) target = 0;\n    else if (e.key === 'End' && idx < items.length - 1) target = items.length - 1;\n    else return;\n\n    e.preventDefault();\n\n    const ref = items[target];\n    if (!ref) return;\n    if (target < idx) {\n      this.insertBefore(item, ref);\n    } else {\n      this.insertBefore(item, ref.nextSibling);\n    }\n\n    item.classList.add('cg-sortable-keyboard-active');\n    setTimeout(() => item.classList.remove('cg-sortable-keyboard-active'), 600);\n\n    if (item.tabIndex < 0) item.tabIndex = 0;\n    item.focus();\n\n    this.dispatchEvent(new CustomEvent('cg-sort', {\n      detail: { from: idx, to: target, items: this._items() },\n      bubbles: true, composed: true,\n    }));\n\n    this._announce(`Moved to position ${target + 1} of ${items.length}`);\n  };\n\n  private _announce(message: string): void {\n    this._announcement = '';\n    requestAnimationFrame(() => { this._announcement = message; });\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`\n      <slot></slot>\n      <div class=\"live\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${this._announcement}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-sortable': CgSortable;\n  }\n}\n"],"names":["CgSortable","LitElement","e","item","deltaX","deltaY","items","dragIdx","dragCenterX","dragCenterY","i","other","r","crossed","threshold","oppositeThreshold","newRect","idx","prevKey","nextKey","target","ref","c","el","finalIndex","message","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-spinner> — Spinning loading indicator.
+ *
+ * @example
+ * ```html
+ * <cg-spinner size="md"></cg-spinner>
+ * <cg-spinner size="lg" color="accent"></cg-spinner>
+ * <cg-spinner size="sm" color="white"></cg-spinner>
+ * ```
+ *
+ * @cssprop --cg-component-spinner-size-md - Spinner diameter (20px)
+ * @cssprop --cg-color-loading-spinner-primary - Active arc color
+ * @cssprop --cg-color-loading-spinner-secondary - Track color
+ */
+export declare class CgSpinner extends LitElement {
+    static styles: import('lit').CSSResult[];
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color: 'default' | 'accent' | 'white';
+    label: string;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-spinner': CgSpinner;
+    }
+}
+//# sourceMappingURL=cg-spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA8EnB;IAEwC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAa;IACjE,KAAK,SAAa;IAErC,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,119 @@
+import { css as l, LitElement as d, html as h } from "lit";
+import { property as a, customElement as g } from "lit/decorators.js";
+import { a as m, r as v, c as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (c, o, t, i) => {
+  for (var e = i > 1 ? void 0 : i ? w(o, t) : o, s = c.length - 1, p; s >= 0; s--)
+    (p = c[s]) && (e = (i ? p(o, t, e) : p(e)) || e);
+  return i && e && u(o, t, e), e;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.size = "md", this.color = "default", this.label = "Loading";
+  }
+  render() {
+    return h`
+      <div
+        class="spinner"
+        role="status"
+        aria-label="${this.label}"
+      >
+        <span class="sr-only">${this.label}</span>
+      </div>
+    `;
+  }
+};
+r.styles = [m, v, b, l`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    :host([hidden]) { display: none; }
+
+    .spinner {
+      border-radius: 50%;
+      border-style: solid;
+      border-color: var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      animation: spin var(--cg-transition-duration-slow) linear infinite;
+    }
+
+    /* ── Sizes (Tier 3) ── */
+    :host([size="xs"]) .spinner {
+      width: var(--cg-component-spinner-size-xs);
+      height: var(--cg-component-spinner-size-xs);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([size="sm"]) .spinner {
+      width: var(--cg-component-spinner-size-sm);
+      height: var(--cg-component-spinner-size-sm);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([size="md"]) .spinner {
+      width: var(--cg-component-spinner-size-md);
+      height: var(--cg-component-spinner-size-md);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([size="lg"]) .spinner {
+      width: var(--cg-component-spinner-size-lg);
+      height: var(--cg-component-spinner-size-lg);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([size="xl"]) .spinner {
+      width: var(--cg-component-spinner-size-xl);
+      height: var(--cg-component-spinner-size-xl);
+      border-width: var(--cg-border-width-300);
+    }
+
+    /* ── Color variants ── */
+    :host([color="default"]) .spinner {
+      border-top-color: var(--cg-color-loading-spinner-primary);
+    }
+    :host([color="accent"]) .spinner {
+      border-top-color: var(--cg-color-action-primary-background-default);
+    }
+    :host([color="white"]) .spinner {
+      border-color: var(--cg-overlay-white-intense);
+      border-top-color: var(--cg-overlay-white-solid);
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Reduced motion: replace spin with gentle opacity pulse */
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation: spinnerPulse 2s ease-in-out infinite !important;
+      }
+
+      @keyframes spinnerPulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+    }
+  `];
+n([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+n([
+  a({ type: String, reflect: !0 })
+], r.prototype, "color", 2);
+n([
+  a({ type: String })
+], r.prototype, "label", 2);
+r = n([
+  g("cg-spinner")
+], r);
+export {
+  r as CgSpinner
+};
+//# sourceMappingURL=cg-spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-spinner.js","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, spinKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-spinner> — Spinning loading indicator.\n *\n * @example\n * ```html\n * <cg-spinner size=\"md\"></cg-spinner>\n * <cg-spinner size=\"lg\" color=\"accent\"></cg-spinner>\n * <cg-spinner size=\"sm\" color=\"white\"></cg-spinner>\n * ```\n *\n * @cssprop --cg-component-spinner-size-md - Spinner diameter (20px)\n * @cssprop --cg-color-loading-spinner-primary - Active arc color\n * @cssprop --cg-color-loading-spinner-secondary - Track color\n */\n@customElement('cg-spinner')\nexport class CgSpinner extends LitElement {\n  static override styles = [hostBase, reducedMotion, spinKeyframes, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n    :host([hidden]) { display: none; }\n\n    .spinner {\n      border-radius: 50%;\n      border-style: solid;\n      border-color: var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n\n    /* ── Sizes (Tier 3) ── */\n    :host([size=\"xs\"]) .spinner {\n      width: var(--cg-component-spinner-size-xs);\n      height: var(--cg-component-spinner-size-xs);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"sm\"]) .spinner {\n      width: var(--cg-component-spinner-size-sm);\n      height: var(--cg-component-spinner-size-sm);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"md\"]) .spinner {\n      width: var(--cg-component-spinner-size-md);\n      height: var(--cg-component-spinner-size-md);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"lg\"]) .spinner {\n      width: var(--cg-component-spinner-size-lg);\n      height: var(--cg-component-spinner-size-lg);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"xl\"]) .spinner {\n      width: var(--cg-component-spinner-size-xl);\n      height: var(--cg-component-spinner-size-xl);\n      border-width: var(--cg-border-width-300);\n    }\n\n    /* ── Color variants ── */\n    :host([color=\"default\"]) .spinner {\n      border-top-color: var(--cg-color-loading-spinner-primary);\n    }\n    :host([color=\"accent\"]) .spinner {\n      border-top-color: var(--cg-color-action-primary-background-default);\n    }\n    :host([color=\"white\"]) .spinner {\n      border-color: var(--cg-overlay-white-intense);\n      border-top-color: var(--cg-overlay-white-solid);\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* Reduced motion: replace spin with gentle opacity pulse */\n    @media (prefers-reduced-motion: reduce) {\n      .spinner {\n        animation: spinnerPulse 2s ease-in-out infinite !important;\n      }\n\n      @keyframes spinnerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n    }\n  `];\n\n  @property({ type: String, reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ type: String, reflect: true }) color: 'default' | 'accent' | 'white' = 'default';\n  @property({ type: String }) label = 'Loading';\n\n  override render() {\n    return html`\n      <div\n        class=\"spinner\"\n        role=\"status\"\n        aria-label=\"${this.label}\"\n      >\n        <span class=\"sr-only\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-spinner': CgSpinner;\n  }\n}\n"],"names":["CgSpinner","LitElement","html","hostBase","reducedMotion","spinKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiFsC,KAAA,OAAyC,MACzC,KAAA,QAAwC,WACvD,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,sBAIW,KAAK,KAAK;AAAA;AAAA,gCAEA,KAAK,KAAK;AAAA;AAAA;AAAA,EAGxC;AACF;AAhGaF,EACK,SAAS,CAACG,GAAUC,GAAeC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8EjE;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BR,EAiFgC,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlF9BR,EAkFgC,WAAA,SAAA,CAAA;AACfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnFfR,EAmFiB,WAAA,SAAA,CAAA;AAnFjBA,IAANO,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdT,CAAA;"}

package/dist/components/cg-split-button/cg-split-button.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+export interface SplitButtonItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+}
+/**
+ * @element cg-split-button
+ * Primary action button with an attached dropdown for related actions
+ * (`Save ▼` → Save / Save As / Save a copy). Shares variant/size with cg-button.
+ *
+ * @example
+ * ```html
+ * <cg-split-button
+ *   label="Save"
+ *   variant="primary"
+ *   .items=${[
+ *     { id: 'save-as', label: 'Save as…', shortcut: '⌘⇧S' },
+ *     { id: 'copy', label: 'Save a copy' },
+ *     { separator: true, id: 's1', label: '' },
+ *     { id: 'delete', label: 'Delete', danger: true },
+ *   ]}
+ * ></cg-split-button>
+ * ```
+ *
+ * @fires {CustomEvent} cg-split-button-click  - Primary action triggered
+ * @fires {CustomEvent<{id:string, item:SplitButtonItem}>} cg-split-button-select - Menu item selected
+ * @fires {CustomEvent} cg-split-button-open   - Menu opened
+ * @fires {CustomEvent} cg-split-button-close  - Menu closed
+ */
+export declare class CgSplitButton extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    variant: 'primary' | 'secondary' | 'tertiary';
+    size: 'sm' | 'md' | 'lg';
+    type: 'normal' | 'danger';
+    disabled: boolean;
+    loading: boolean;
+    items: SplitButtonItem[];
+    open: boolean;
+    menuPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    private _activeIndex;
+    private _menuEl;
+    private _chevronEl;
+    private _disposeOutsideClick;
+    disconnectedCallback(): void;
+    private _onPrimaryClick;
+    private _toggle;
+    private _openMenu;
+    private _close;
+    private _select;
+    private _handleKeydown;
+    private _onPrimaryKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-split-button': CgSplitButton;
+    }
+}
+//# sourceMappingURL=cg-split-button.d.ts.map

package/dist/components/cg-split-button/cg-split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-split-button.d.ts","sourceRoot":"","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAyKnB;IAES,KAAK,SAAM;IACM,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjC,KAAK,EAAE,eAAe,EAAE,CAAM;IACb,IAAI,UAAS;IACC,aAAa,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAgB;IACnH,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,OAAO,CAAC,YAAY,CAAM;IACnB,OAAO,CAAC,OAAO,CAAe;IAC3B,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,iBAAiB;IAOhB,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}