@cognivo/components 0.8.0

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

@@ -0,0 +1,211 @@
+import { css as l, LitElement as h, nothing as g, html as p } from "lit";
+import { property as i, state as f, customElement as u } from "lit/decorators.js";
+import { r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import { F as b } from "../../chunks/focus-trap-BdRNhSPD.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? _(e, r) : e, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (o = (n ? c(e, r, o) : c(o)) || o);
+  return n && o && m(e, r, o), o;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "Sheet", this.side = "bottom", this.snapPoints = [], this.activeSnap = 0, this.dismissible = !0, this._dragOffset = 0, this._focusTrap = new b(), this._dragStart = 0, this._dragging = !1;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._focusTrap.deactivate();
+  }
+  updated(t) {
+    t.has("open") && (this.open ? this._onOpen() : this._onClose());
+  }
+  _onOpen() {
+    this.dispatchEvent(new CustomEvent("cg-sheet-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+      const t = this.shadowRoot?.querySelector(".panel");
+      if (t) {
+        const e = {};
+        this.dismissible && (e.onEscape = () => {
+          this.open = !1;
+        }), this._focusTrap.activate(t, e);
+      }
+    });
+  }
+  _onClose() {
+    this.dispatchEvent(new CustomEvent("cg-sheet-close", { bubbles: !0, composed: !0 })), this._focusTrap.deactivate(), this._dragOffset = 0;
+  }
+  _handleBackdrop() {
+    this.dismissible && (this.open = !1);
+  }
+  _onDragStart(t) {
+    this.dismissible && (this._dragging = !0, this._dragStart = this.side === "bottom" || this.side === "top" ? t.clientY : t.clientX, t.currentTarget.setPointerCapture?.(t.pointerId));
+  }
+  _onDragMove(t) {
+    if (!this._dragging) return;
+    let r = (this.side === "bottom" || this.side === "top" ? t.clientY : t.clientX) - this._dragStart;
+    (this.side === "top" || this.side === "left") && (r = -r), this._dragOffset = Math.max(0, r);
+  }
+  _onDragEnd() {
+    this._dragging && (this._dragging = !1, this._dragOffset > 80 && this.dismissible ? this.open = !1 : this.snapPoints.length && this.dispatchEvent(new CustomEvent("cg-sheet-snap", {
+      bubbles: !0,
+      composed: !0,
+      detail: { index: this.activeSnap, value: this.snapPoints[this.activeSnap] ?? 1 }
+    })), this._dragOffset = 0);
+  }
+  render() {
+    const t = this.side === "bottom" ? `translateY(${this._dragOffset}px)` : this.side === "top" ? `translateY(${-this._dragOffset}px)` : this.side === "right" ? `translateX(${this._dragOffset}px)` : `translateX(${-this._dragOffset}px)`;
+    let e = "";
+    if ((this.side === "bottom" || this.side === "top") && this.snapPoints.length) {
+      const r = this.snapPoints[this.activeSnap] ?? 0.95;
+      e = `height: ${Math.round(r * 100)}vh;`;
+    }
+    return (this._dragging || this._dragOffset) && (e += `transform: ${t};`), p`
+      <div class="backdrop" aria-hidden="true" @click=${this._handleBackdrop}></div>
+      <div
+        class="panel"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.label}
+        aria-hidden=${this.open ? "false" : "true"}
+        ?inert=${!this.open}
+        style=${e}
+      >
+        ${this.side === "bottom" || this.side === "top" ? p`
+          <div
+            class="handle"
+            @pointerdown=${this._onDragStart}
+            @pointermove=${this._onDragMove}
+            @pointerup=${this._onDragEnd}
+            @pointercancel=${this._onDragEnd}
+          >
+            <span class="handle-bar"></span>
+          </div>
+        ` : g}
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [v, l`
+    :host {
+      display: contents;
+      font-family: var(--cg-font-family-primary);
+    }
+    .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(140%);
+      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(140%);
+      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 {
+      position: fixed;
+      z-index: var(--cg-z-index-top);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    :host([side="bottom"]) .panel {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-top-left-radius: var(--cg-component-sheet-radius);
+      border-top-right-radius: var(--cg-component-sheet-radius);
+      transform: translateY(100%);
+      max-height: 95vh;
+    }
+    :host([side="bottom"][open]) .panel { transform: translateY(0); }
+
+    :host([side="top"]) .panel {
+      left: 0; right: 0; top: 0;
+      border-bottom-left-radius: var(--cg-component-sheet-radius);
+      border-bottom-right-radius: var(--cg-component-sheet-radius);
+      transform: translateY(-100%);
+      max-height: 95vh;
+    }
+    :host([side="top"][open]) .panel { transform: translateY(0); }
+
+    :host([side="right"]) .panel {
+      top: 0; bottom: 0; right: 0;
+      width: min(var(--cg-component-sheet-side-width), 90vw);
+      border-top-left-radius: var(--cg-component-sheet-radius);
+      border-bottom-left-radius: var(--cg-component-sheet-radius);
+      transform: translateX(100%);
+    }
+    :host([side="right"][open]) .panel { transform: translateX(0); }
+
+    :host([side="left"]) .panel {
+      top: 0; bottom: 0; left: 0;
+      width: min(var(--cg-component-sheet-side-width), 90vw);
+      border-top-right-radius: var(--cg-component-sheet-radius);
+      border-bottom-right-radius: var(--cg-component-sheet-radius);
+      transform: translateX(-100%);
+    }
+    :host([side="left"][open]) .panel { transform: translateX(0); }
+
+    .handle {
+      display: flex;
+      justify-content: center;
+      padding: var(--cg-spacing-16) 0 var(--cg-spacing-6);
+      cursor: grab;
+      touch-action: none;
+    }
+    .handle:active { cursor: grabbing; }
+    .handle-bar {
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-border);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .handle:hover .handle-bar { background: var(--cg-color-surface-cards-border-strong); }
+
+    .body {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-spacing-24);
+      color: var(--cg-color-surface-container-text);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+a([
+  i({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+a([
+  i()
+], s.prototype, "label", 2);
+a([
+  i({ reflect: !0 })
+], s.prototype, "side", 2);
+a([
+  i({ type: Array })
+], s.prototype, "snapPoints", 2);
+a([
+  i({ type: Number })
+], s.prototype, "activeSnap", 2);
+a([
+  i({ type: Boolean })
+], s.prototype, "dismissible", 2);
+a([
+  f()
+], s.prototype, "_dragOffset", 2);
+s = a([
+  u("cg-sheet")
+], s);
+export {
+  s as CgSheet
+};
+//# sourceMappingURL=cg-sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sheet.js","sources":["../../../src/components/cg-sheet/cg-sheet.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-sheet\n * Mobile-first drawer variant with optional snap points and drag-to-dismiss.\n *\n * @slot - Default slot for sheet body content.\n *\n * @fires {CustomEvent} cg-sheet-open\n * @fires {CustomEvent} cg-sheet-close\n * @fires {CustomEvent<{index:number,value:number}>} cg-sheet-snap\n */\n@customElement('cg-sheet')\nexport class CgSheet extends LitElement {\n  static override styles = [reducedMotion, css`\n    :host {\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\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(140%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(140%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .panel {\n      position: fixed;\n      z-index: var(--cg-z-index-top);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    :host([side=\"bottom\"]) .panel {\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-top-left-radius: var(--cg-component-sheet-radius);\n      border-top-right-radius: var(--cg-component-sheet-radius);\n      transform: translateY(100%);\n      max-height: 95vh;\n    }\n    :host([side=\"bottom\"][open]) .panel { transform: translateY(0); }\n\n    :host([side=\"top\"]) .panel {\n      left: 0; right: 0; top: 0;\n      border-bottom-left-radius: var(--cg-component-sheet-radius);\n      border-bottom-right-radius: var(--cg-component-sheet-radius);\n      transform: translateY(-100%);\n      max-height: 95vh;\n    }\n    :host([side=\"top\"][open]) .panel { transform: translateY(0); }\n\n    :host([side=\"right\"]) .panel {\n      top: 0; bottom: 0; right: 0;\n      width: min(var(--cg-component-sheet-side-width), 90vw);\n      border-top-left-radius: var(--cg-component-sheet-radius);\n      border-bottom-left-radius: var(--cg-component-sheet-radius);\n      transform: translateX(100%);\n    }\n    :host([side=\"right\"][open]) .panel { transform: translateX(0); }\n\n    :host([side=\"left\"]) .panel {\n      top: 0; bottom: 0; left: 0;\n      width: min(var(--cg-component-sheet-side-width), 90vw);\n      border-top-right-radius: var(--cg-component-sheet-radius);\n      border-bottom-right-radius: var(--cg-component-sheet-radius);\n      transform: translateX(-100%);\n    }\n    :host([side=\"left\"][open]) .panel { transform: translateX(0); }\n\n    .handle {\n      display: flex;\n      justify-content: center;\n      padding: var(--cg-spacing-16) 0 var(--cg-spacing-6);\n      cursor: grab;\n      touch-action: none;\n    }\n    .handle:active { cursor: grabbing; }\n    .handle-bar {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-border);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .handle:hover .handle-bar { background: var(--cg-color-surface-cards-border-strong); }\n\n    .body {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-text);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() label = 'Sheet';\n  @property({ reflect: true }) side: 'bottom' | 'right' | 'left' | 'top' = 'bottom';\n  @property({ type: Array }) snapPoints: number[] = [];\n  @property({ type: Number }) activeSnap = 0;\n  @property({ type: Boolean }) dismissible = true;\n\n  @state() private _dragOffset = 0;\n\n  private _focusTrap = new FocusTrap();\n  private _dragStart = 0;\n  private _dragging = false;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this.dispatchEvent(new CustomEvent('cg-sheet-open', { bubbles: true, composed: true }));\n    requestAnimationFrame(() => {\n      const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n      if (panel) {\n        const opts: { onEscape?: () => void } = {};\n        if (this.dismissible) opts.onEscape = () => { this.open = false; };\n        this._focusTrap.activate(panel, opts);\n      }\n    });\n  }\n\n  private _onClose(): void {\n    this.dispatchEvent(new CustomEvent('cg-sheet-close', { bubbles: true, composed: true }));\n    this._focusTrap.deactivate();\n    this._dragOffset = 0;\n  }\n\n  private _handleBackdrop(): void {\n    if (this.dismissible) this.open = false;\n  }\n\n  private _onDragStart(e: PointerEvent): void {\n    if (!this.dismissible) return;\n    this._dragging = true;\n    this._dragStart = this.side === 'bottom' || this.side === 'top' ? e.clientY : e.clientX;\n    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);\n  }\n\n  private _onDragMove(e: PointerEvent): void {\n    if (!this._dragging) return;\n    const pos = this.side === 'bottom' || this.side === 'top' ? e.clientY : e.clientX;\n    let delta = pos - this._dragStart;\n    if (this.side === 'top' || this.side === 'left') delta = -delta;\n    this._dragOffset = Math.max(0, delta);\n  }\n\n  private _onDragEnd(): void {\n    if (!this._dragging) return;\n    this._dragging = false;\n    if (this._dragOffset > 80 && this.dismissible) {\n      this.open = false;\n    } else if (this.snapPoints.length) {\n      this.dispatchEvent(new CustomEvent('cg-sheet-snap', {\n        bubbles: true, composed: true,\n        detail: { index: this.activeSnap, value: this.snapPoints[this.activeSnap] ?? 1 },\n      }));\n    }\n    this._dragOffset = 0;\n  }\n\n  override render() {\n    const translateAxis = this.side === 'bottom' ? `translateY(${this._dragOffset}px)`\n      : this.side === 'top' ? `translateY(${-this._dragOffset}px)`\n      : this.side === 'right' ? `translateX(${this._dragOffset}px)`\n      : `translateX(${-this._dragOffset}px)`;\n\n    // Apply snap-point height when bottom sheet\n    let panelStyle = '';\n    if ((this.side === 'bottom' || this.side === 'top') && this.snapPoints.length) {\n      const snap = this.snapPoints[this.activeSnap] ?? 0.95;\n      panelStyle = `height: ${Math.round(snap * 100)}vh;`;\n    }\n    if (this._dragging || this._dragOffset) panelStyle += `transform: ${translateAxis};`;\n\n    return html`\n      <div class=\"backdrop\" aria-hidden=\"true\" @click=${this._handleBackdrop}></div>\n      <div\n        class=\"panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=${this.label}\n        aria-hidden=${this.open ? 'false' : 'true'}\n        ?inert=${!this.open}\n        style=${panelStyle}\n      >\n        ${this.side === 'bottom' || this.side === 'top' ? html`\n          <div\n            class=\"handle\"\n            @pointerdown=${this._onDragStart}\n            @pointermove=${this._onDragMove}\n            @pointerup=${this._onDragEnd}\n            @pointercancel=${this._onDragEnd}\n          >\n            <span class=\"handle-bar\"></span>\n          </div>\n        ` : nothing}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-sheet': CgSheet;\n  }\n}\n"],"names":["CgSheet","LitElement","FocusTrap","changed","panel","opts","e","delta","translateAxis","panelStyle","snap","html","nothing","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;AAgBO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkGuC,KAAA,OAAO,IACvC,KAAA,QAAQ,SACS,KAAA,OAA4C,UAC9C,KAAA,aAAuB,CAAA,GACtB,KAAA,aAAa,GACZ,KAAA,cAAc,IAElC,KAAQ,cAAc,GAE/B,KAAQ,aAAa,IAAIC,EAAA,GACzB,KAAQ,aAAa,GACrB,KAAQ,YAAY;AAAA,EAAA;AAAA,EAEX,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,WAAW,WAAA;AAAA,EAClB;AAAA,EAES,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OAAM,KAAK,QAAA,SACV,SAAA;AAAA,EAEd;AAAA,EAEQ,UAAgB;AACtB,SAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACtF,sBAAsB,MAAM;AAC1B,YAAMC,IAAQ,KAAK,YAAY,cAA2B,QAAQ;AAClE,UAAIA,GAAO;AACT,cAAMC,IAAkC,CAAA;AACxC,QAAI,KAAK,gBAAaA,EAAK,WAAW,MAAM;AAAE,eAAK,OAAO;AAAA,QAAO,IACjE,KAAK,WAAW,SAASD,GAAOC,CAAI;AAAA,MACtC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,WAAiB;AACvB,SAAK,cAAc,IAAI,YAAY,kBAAkB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACvF,KAAK,WAAW,WAAA,GAChB,KAAK,cAAc;AAAA,EACrB;AAAA,EAEQ,kBAAwB;AAC9B,IAAI,KAAK,gBAAa,KAAK,OAAO;AAAA,EACpC;AAAA,EAEQ,aAAaC,GAAuB;AAC1C,IAAK,KAAK,gBACV,KAAK,YAAY,IACjB,KAAK,aAAa,KAAK,SAAS,YAAY,KAAK,SAAS,QAAQA,EAAE,UAAUA,EAAE,SAC/EA,EAAE,cAA8B,oBAAoBA,EAAE,SAAS;AAAA,EAClE;AAAA,EAEQ,YAAYA,GAAuB;AACzC,QAAI,CAAC,KAAK,UAAW;AAErB,QAAIC,KADQ,KAAK,SAAS,YAAY,KAAK,SAAS,QAAQD,EAAE,UAAUA,EAAE,WACxD,KAAK;AACvB,KAAI,KAAK,SAAS,SAAS,KAAK,SAAS,gBAAgB,CAACC,IAC1D,KAAK,cAAc,KAAK,IAAI,GAAGA,CAAK;AAAA,EACtC;AAAA,EAEQ,aAAmB;AACzB,IAAK,KAAK,cACV,KAAK,YAAY,IACb,KAAK,cAAc,MAAM,KAAK,cAChC,KAAK,OAAO,KACH,KAAK,WAAW,UACzB,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,OAAO,KAAK,YAAY,OAAO,KAAK,WAAW,KAAK,UAAU,KAAK,EAAA;AAAA,IAAE,CAChF,CAAC,GAEJ,KAAK,cAAc;AAAA,EACrB;AAAA,EAES,SAAS;AAChB,UAAMC,IAAgB,KAAK,SAAS,WAAW,cAAc,KAAK,WAAW,QACzE,KAAK,SAAS,QAAQ,cAAc,CAAC,KAAK,WAAW,QACrD,KAAK,SAAS,UAAU,cAAc,KAAK,WAAW,QACtD,cAAc,CAAC,KAAK,WAAW;AAGnC,QAAIC,IAAa;AACjB,SAAK,KAAK,SAAS,YAAY,KAAK,SAAS,UAAU,KAAK,WAAW,QAAQ;AAC7E,YAAMC,IAAO,KAAK,WAAW,KAAK,UAAU,KAAK;AACjD,MAAAD,IAAa,WAAW,KAAK,MAAMC,IAAO,GAAG,CAAC;AAAA,IAChD;AACA,YAAI,KAAK,aAAa,KAAK,iBAAaD,KAAc,cAAcD,CAAa,MAE1EG;AAAA,wDAC6C,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKvD,KAAK,KAAK;AAAA,sBACT,KAAK,OAAO,UAAU,MAAM;AAAA,iBACjC,CAAC,KAAK,IAAI;AAAA,gBACXF,CAAU;AAAA;AAAA,UAEhB,KAAK,SAAS,YAAY,KAAK,SAAS,QAAQE;AAAA;AAAA;AAAA,2BAG/B,KAAK,YAAY;AAAA,2BACjB,KAAK,WAAW;AAAA,yBAClB,KAAK,UAAU;AAAA,6BACX,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,YAIhCC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB;AACF;AAxNaZ,EACK,SAAS,CAACa,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+FxC;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlG/BhB,EAkGiC,WAAA,QAAA,CAAA;AAChCe,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnGChB,EAmGC,WAAA,SAAA,CAAA;AACiBe,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApGhBhB,EAoGkB,WAAA,QAAA,CAAA;AACFe,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GArGdhB,EAqGgB,WAAA,cAAA,CAAA;AACCe,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtGfhB,EAsGiB,WAAA,cAAA,CAAA;AACCe,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAvGhBhB,EAuGkB,WAAA,eAAA,CAAA;AAEZe,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzGIjB,EAyGM,WAAA,eAAA,CAAA;AAzGNA,IAANe,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZlB,CAAA;"}

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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-sidebar
+ * Modern collapsible side navigation panel. Two states (expanded ↔ icon-only),
+ * smooth 200ms width transition, full-row hit targets on slotted `<a>` / `<button>`
+ * items, `aria-current` active state, and section headers via `.section-title`.
+ *
+ * Modeled after the 2024–2025 consensus from shadcn/ui, Linear, Notion, and Cursor:
+ * 8px grid, full-row click targets, no hover-peek, native `title` for collapsed
+ * tooltips.
+ *
+ * @example
+ * ```html
+ * <cg-sidebar collapsible>
+ *   <div slot="header">Logo</div>
+ *
+ *   <div class="section-title">Workspace</div>
+ *   <a href="/dashboard" aria-current="page" title="Dashboard">
+ *     <span aria-hidden="true">◐</span><span data-label>Dashboard</span>
+ *   </a>
+ *   <a href="/settings" title="Settings">
+ *     <span aria-hidden="true">⚙</span><span data-label>Settings</span>
+ *   </a>
+ *
+ *   <div slot="footer">User</div>
+ * </cg-sidebar>
+ * ```
+ *
+ * @slot header - Branding/header area (auto-hides when empty)
+ * @slot - Navigation content (`<a>` / `<button>` get modern default styling)
+ * @slot footer - Footer area (auto-hides when empty)
+ *
+ * @fires {CustomEvent<{collapsed: boolean}>} cg-sidebar-toggle
+ */
+export declare class CgSidebar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    collapsed: boolean;
+    collapsible: boolean;
+    side: 'left' | 'right';
+    sticky: boolean;
+    width: string;
+    private _headerEmpty;
+    private _footerEmpty;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _toggle;
+    private _onHeaderSlotChange;
+    private _onFooterSlotChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-sidebar': CgSidebar;
+    }
+}
+//# sourceMappingURL=cg-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-sidebar/cg-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAgLnB;IAEyC,SAAS,UAAS;IACjC,WAAW,UAAS;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IACjB,MAAM,UAAS;IAC/C,KAAK,SAAM;IAGd,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAE7B,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAY9C,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,266 @@
+import { css as p, LitElement as h, nothing as v, html as d } from "lit";
+import { property as i, state as g, customElement as f } from "lit/decorators.js";
+import { r as u } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (t, o, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(o, n) : o, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (r = (s ? l(o, n, r) : l(r)) || r);
+  return s && r && b(o, n, r), r;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.collapsed = !1, this.collapsible = !1, this.side = "left", this.sticky = !1, this.width = "", this._headerEmpty = !1, this._footerEmpty = !1, this._onHeaderSlotChange = (t) => {
+      const o = t.target;
+      this._headerEmpty = o.assignedNodes({ flatten: !0 }).length === 0 && !this.collapsible;
+    }, this._onFooterSlotChange = (t) => {
+      const o = t.target;
+      this._footerEmpty = o.assignedNodes({ flatten: !0 }).length === 0;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.width && this.style.setProperty("--cg-component-sidebar-width", this.width);
+  }
+  updated(t) {
+    t.has("width") && this.width && this.style.setProperty("--cg-component-sidebar-width", this.width), t.has("_headerEmpty") && this.toggleAttribute("data-header-empty", this._headerEmpty), t.has("_footerEmpty") && this.toggleAttribute("data-footer-empty", this._footerEmpty);
+  }
+  _toggle() {
+    this.collapsed = !this.collapsed, this.dispatchEvent(new CustomEvent("cg-sidebar-toggle", {
+      detail: { collapsed: this.collapsed },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return d`
+      <nav class="nav" role="navigation" aria-label="Primary navigation">
+        <div class="header">
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+          ${this.collapsible ? d`
+            <button
+              class="toggle"
+              type="button"
+              aria-label=${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded=${this.collapsed ? "false" : "true"}
+              aria-controls="sidebar-body"
+              @click=${this._toggle}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 18l-6-6 6-6"></path>
+              </svg>
+            </button>
+          ` : v}
+        </div>
+        <div class="body" id="sidebar-body">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+        </div>
+      </nav>
+    `;
+  }
+};
+e.styles = [u, p`
+    :host {
+      display: block;
+      width: var(--cg-component-sidebar-width);
+      height: 100%;
+      font-family: var(--cg-font-family-primary);
+      flex-shrink: 0;
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([collapsed]) {
+      width: var(--cg-component-sidebar-collapsed-width);
+    }
+    :host([sticky]) {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+    }
+
+    /* ── Panel ── */
+    .nav {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-container-text);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+    :host([side="right"]) .nav {
+      border-right: none;
+      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+
+    /* ── Header ── */
+    .header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+      min-height: var(--cg-spacing-56);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+    :host([collapsed]) .header {
+      padding: var(--cg-spacing-12) var(--cg-spacing-8);
+      justify-content: center;
+    }
+    :host([data-header-empty]) .header { display: none; }
+
+    /* ── Body ── */
+    .body {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: var(--cg-spacing-8);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+    :host([collapsed]) .body {
+      padding: var(--cg-spacing-8) var(--cg-spacing-6);
+    }
+
+    /* ── Footer ── */
+    .footer {
+      flex-shrink: 0;
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+    :host([collapsed]) .footer {
+      padding: var(--cg-spacing-12) var(--cg-spacing-8);
+    }
+    :host([data-footer-empty]) .footer { display: none; }
+
+    /* ── Toggle button ── */
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      padding: 0;
+      border: none;
+      border-radius: var(--cg-border-radius-100);
+      background: transparent;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .toggle:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+    }
+    .toggle:focus-visible {
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-border-width-50);
+    }
+    .toggle svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([collapsed]) .toggle svg {
+      transform: rotate(180deg);
+    }
+
+    /* ── Modern nav-item defaults — applies to slotted <a> and <button> ── */
+    ::slotted(a),
+    ::slotted(button) {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border: none;
+      border-radius: var(--cg-border-radius-100);
+      background: transparent;
+      color: var(--cg-color-surface-container-outlined);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: var(--cg-line-height-snug);
+      text-decoration: none;
+      text-align: left;
+      cursor: pointer;
+      box-sizing: border-box;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    ::slotted(a:hover),
+    ::slotted(button:hover) {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+    }
+    ::slotted(a[aria-current]),
+    ::slotted(button[aria-current]),
+    ::slotted(a.active),
+    ::slotted(button.active) {
+      background: var(--cg-color-surface-cards-active-background);
+      color: var(--cg-color-surface-base-text);
+    }
+    ::slotted(a:focus-visible),
+    ::slotted(button:focus-visible) {
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: calc(-1 * var(--cg-border-width-100));
+    }
+
+    /* ── Section labels ── */
+    ::slotted(.section-title),
+    ::slotted([data-section-title]) {
+      display: block;
+      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    /* ── Collapsed: hide labels & section titles, center icons ── */
+    :host([collapsed]) ::slotted([data-label]),
+    :host([collapsed]) ::slotted(.label),
+    :host([collapsed]) ::slotted(.section-title),
+    :host([collapsed]) ::slotted([data-section-title]) {
+      display: none;
+    }
+    :host([collapsed]) ::slotted(a),
+    :host([collapsed]) ::slotted(button) {
+      justify-content: center;
+      padding: var(--cg-spacing-8);
+      gap: 0;
+    }
+  `];
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "collapsed", 2);
+a([
+  i({ type: Boolean })
+], e.prototype, "collapsible", 2);
+a([
+  i({ reflect: !0 })
+], e.prototype, "side", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "sticky", 2);
+a([
+  i()
+], e.prototype, "width", 2);
+a([
+  g()
+], e.prototype, "_headerEmpty", 2);
+a([
+  g()
+], e.prototype, "_footerEmpty", 2);
+e = a([
+  f("cg-sidebar")
+], e);
+export {
+  e as CgSidebar
+};
+//# sourceMappingURL=cg-sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sidebar.js","sources":["../../../src/components/cg-sidebar/cg-sidebar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-sidebar\n * Modern collapsible side navigation panel. Two states (expanded ↔ icon-only),\n * smooth 200ms width transition, full-row hit targets on slotted `<a>` / `<button>`\n * items, `aria-current` active state, and section headers via `.section-title`.\n *\n * Modeled after the 2024–2025 consensus from shadcn/ui, Linear, Notion, and Cursor:\n * 8px grid, full-row click targets, no hover-peek, native `title` for collapsed\n * tooltips.\n *\n * @example\n * ```html\n * <cg-sidebar collapsible>\n *   <div slot=\"header\">Logo</div>\n *\n *   <div class=\"section-title\">Workspace</div>\n *   <a href=\"/dashboard\" aria-current=\"page\" title=\"Dashboard\">\n *     <span aria-hidden=\"true\">◐</span><span data-label>Dashboard</span>\n *   </a>\n *   <a href=\"/settings\" title=\"Settings\">\n *     <span aria-hidden=\"true\">⚙</span><span data-label>Settings</span>\n *   </a>\n *\n *   <div slot=\"footer\">User</div>\n * </cg-sidebar>\n * ```\n *\n * @slot header - Branding/header area (auto-hides when empty)\n * @slot - Navigation content (`<a>` / `<button>` get modern default styling)\n * @slot footer - Footer area (auto-hides when empty)\n *\n * @fires {CustomEvent<{collapsed: boolean}>} cg-sidebar-toggle\n */\n@customElement('cg-sidebar')\nexport class CgSidebar extends LitElement {\n  static override styles = [reducedMotion, css`\n    :host {\n      display: block;\n      width: var(--cg-component-sidebar-width);\n      height: 100%;\n      font-family: var(--cg-font-family-primary);\n      flex-shrink: 0;\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([collapsed]) {\n      width: var(--cg-component-sidebar-collapsed-width);\n    }\n    :host([sticky]) {\n      position: sticky;\n      top: 0;\n      max-height: 100vh;\n    }\n\n    /* ── Panel ── */\n    .nav {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-container-text);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n    :host([side=\"right\"]) .nav {\n      border-right: none;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n\n    /* ── Header ── */\n    .header {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      min-height: var(--cg-spacing-56);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n    :host([collapsed]) .header {\n      padding: var(--cg-spacing-12) var(--cg-spacing-8);\n      justify-content: center;\n    }\n    :host([data-header-empty]) .header { display: none; }\n\n    /* ── Body ── */\n    .body {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: var(--cg-spacing-8);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n    :host([collapsed]) .body {\n      padding: var(--cg-spacing-8) var(--cg-spacing-6);\n    }\n\n    /* ── Footer ── */\n    .footer {\n      flex-shrink: 0;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n    :host([collapsed]) .footer {\n      padding: var(--cg-spacing-12) var(--cg-spacing-8);\n    }\n    :host([data-footer-empty]) .footer { display: none; }\n\n    /* ── Toggle button ── */\n    .toggle {\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      padding: 0;\n      border: none;\n      border-radius: var(--cg-border-radius-100);\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      flex-shrink: 0;\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    }\n    .toggle:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    .toggle:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-border-width-50);\n    }\n    .toggle svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([collapsed]) .toggle svg {\n      transform: rotate(180deg);\n    }\n\n    /* ── Modern nav-item defaults — applies to slotted <a> and <button> ── */\n    ::slotted(a),\n    ::slotted(button) {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: none;\n      border-radius: var(--cg-border-radius-100);\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n      text-decoration: none;\n      text-align: left;\n      cursor: pointer;\n      box-sizing: border-box;\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    }\n    ::slotted(a:hover),\n    ::slotted(button:hover) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    ::slotted(a[aria-current]),\n    ::slotted(button[aria-current]),\n    ::slotted(a.active),\n    ::slotted(button.active) {\n      background: var(--cg-color-surface-cards-active-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    ::slotted(a:focus-visible),\n    ::slotted(button:focus-visible) {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n\n    /* ── Section labels ── */\n    ::slotted(.section-title),\n    ::slotted([data-section-title]) {\n      display: block;\n      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    /* ── Collapsed: hide labels & section titles, center icons ── */\n    :host([collapsed]) ::slotted([data-label]),\n    :host([collapsed]) ::slotted(.label),\n    :host([collapsed]) ::slotted(.section-title),\n    :host([collapsed]) ::slotted([data-section-title]) {\n      display: none;\n    }\n    :host([collapsed]) ::slotted(a),\n    :host([collapsed]) ::slotted(button) {\n      justify-content: center;\n      padding: var(--cg-spacing-8);\n      gap: 0;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: Boolean }) collapsible = false;\n  @property({ reflect: true }) side: 'left' | 'right' = 'left';\n  @property({ type: Boolean, reflect: true }) sticky = false;\n  @property() width = '';\n\n  // Default to *visible* — slotchange flips to hidden if empty (avoids first-paint flicker).\n  @state() private _headerEmpty = false;\n  @state() private _footerEmpty = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.width) {\n      this.style.setProperty('--cg-component-sidebar-width', this.width);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('width') && this.width) {\n      this.style.setProperty('--cg-component-sidebar-width', this.width);\n    }\n    if (changed.has('_headerEmpty')) {\n      this.toggleAttribute('data-header-empty', this._headerEmpty);\n    }\n    if (changed.has('_footerEmpty')) {\n      this.toggleAttribute('data-footer-empty', this._footerEmpty);\n    }\n  }\n\n  private _toggle() {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent('cg-sidebar-toggle', {\n      detail: { collapsed: this.collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onHeaderSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    // Header is \"empty\" only when slot has no content AND there's no toggle button.\n    this._headerEmpty = slot.assignedNodes({ flatten: true }).length === 0 && !this.collapsible;\n  };\n\n  private _onFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this._footerEmpty = slot.assignedNodes({ flatten: true }).length === 0;\n  };\n\n  override render() {\n    return html`\n      <nav class=\"nav\" role=\"navigation\" aria-label=\"Primary navigation\">\n        <div class=\"header\">\n          <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot>\n          ${this.collapsible ? html`\n            <button\n              class=\"toggle\"\n              type=\"button\"\n              aria-label=${this.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n              aria-expanded=${this.collapsed ? 'false' : 'true'}\n              aria-controls=\"sidebar-body\"\n              @click=${this._toggle}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n          ` : nothing}\n        </div>\n        <div class=\"body\" id=\"sidebar-body\">\n          <slot></slot>\n        </div>\n        <div class=\"footer\">\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-sidebar': CgSidebar;\n  }\n}\n"],"names":["CgSidebar","LitElement","e","slot","changed","html","nothing","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-skeleton> — Loading placeholder with pulse animation.
+ *
+ * @example
+ * ```html
+ * <cg-skeleton variant="rectangular" width="100%" height="80px"></cg-skeleton>
+ * <cg-skeleton variant="circular" width="40px" height="40px"></cg-skeleton>
+ * <cg-skeleton variant="text" lines="3"></cg-skeleton>
+ * ```
+ *
+ * @cssprop --cg-color-loading-spinner-secondary - Skeleton background color
+ * @cssprop --cg-border-radius-100 - Default border radius (12px)
+ */
+export declare class CgSkeleton extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'text' | 'circular' | 'rectangular';
+    width: string;
+    height: string;
+    lines: number;
+    animated: boolean;
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    private _getDefaultHeight;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-skeleton': CgSkeleton;
+    }
+}
+//# sourceMappingURL=cg-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/cg-skeleton/cg-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA2DnB;IAEwC,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAiB;IAC5E,KAAK,SAAU;IACf,MAAM,SAAM;IACZ,KAAK,SAAK;IACM,QAAQ,UAAQ;IAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAElF,OAAO,CAAC,iBAAiB;IAUhB,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}