@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,24 +1,27 @@
-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;
+import { css as c, LitElement as g, nothing as n, html as p } from "lit";
+import { property as h, state as f, customElement as u } from "lit/decorators.js";
+import { r as v } from "../../chunks/premium.css-DHekUEUt.js";
+import { F as b } from "../../chunks/focus-trap-vlQwKK-3.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? _(e, s) : e, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (r = (o ? l(e, s, r) : l(r)) || r);
+  return o && r && m(e, s, r), r;
 };
-let s = class extends h {
+let i = class extends g {
   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;
+    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, this._previousOverflow = "";
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._focusTrap.deactivate();
+    super.disconnectedCallback(), this.open && (document.body.style.overflow = this._previousOverflow), this._focusTrap.deactivate();
   }
   updated(t) {
-    t.has("open") && (this.open ? this._onOpen() : this._onClose());
+    if (t.has("open")) {
+      if (t.get("open") === void 0 && !this.open) return;
+      this.open ? this._onOpen() : this._onClose();
+    }
   }
   _onOpen() {
-    this.dispatchEvent(new CustomEvent("cg-sheet-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+    this._previousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.dispatchEvent(new CustomEvent("cg-sheet-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
       const t = this.shadowRoot?.querySelector(".panel");
       if (t) {
         const e = {};
@@ -29,34 +32,55 @@ let s = class extends h {
     });
   }
   _onClose() {
-    this.dispatchEvent(new CustomEvent("cg-sheet-close", { bubbles: !0, composed: !0 })), this._focusTrap.deactivate(), this._dragOffset = 0;
+    document.body.style.overflow = this._previousOverflow, 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));
+    !this.dismissible && !this.snapPoints.length || (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);
+    let s = (this.side === "bottom" || this.side === "top" ? t.clientY : t.clientX) - this._dragStart;
+    (this.side === "top" || this.side === "left") && (s = -s), this._dragOffset = this.snapPoints.length ? s : Math.max(0, s);
   }
   _onDragEnd() {
-    this._dragging && (this._dragging = !1, this._dragOffset > 80 && this.dismissible ? this.open = !1 : this.snapPoints.length && this.dispatchEvent(new CustomEvent("cg-sheet-snap", {
+    if (this._dragging) {
+      if (this._dragging = !1, this.snapPoints.length) {
+        const t = this.side === "bottom" || this.side === "top" ? window.innerHeight : window.innerWidth, e = (this.snapPoints[this.activeSnap] ?? 0.95) - this._dragOffset / Math.max(1, t);
+        let s = 0;
+        for (let o = 1; o < this.snapPoints.length; o++)
+          Math.abs(this.snapPoints[o] - e) < Math.abs(this.snapPoints[s] - e) && (s = o);
+        this.dismissible && e < Math.min(...this.snapPoints) - 0.1 ? this.open = !1 : s !== this.activeSnap && (this.activeSnap = s, this._emitSnap());
+      } else this._dragOffset > 80 && this.dismissible && (this.open = !1);
+      this._dragOffset = 0;
+    }
+  }
+  _emitSnap() {
+    this.dispatchEvent(new CustomEvent("cg-sheet-snap", {
       bubbles: !0,
       composed: !0,
       detail: { index: this.activeSnap, value: this.snapPoints[this.activeSnap] ?? 1 }
-    })), this._dragOffset = 0);
+    }));
+  }
+  /** SHEET-5: keyboard path for snap resizing (slider pattern on the handle). */
+  _onHandleKeydown(t) {
+    if (!this.snapPoints.length) return;
+    let e = this.activeSnap;
+    if (t.key === "ArrowUp" || t.key === "ArrowRight") e = Math.min(this.snapPoints.length - 1, e + 1);
+    else if (t.key === "ArrowDown" || t.key === "ArrowLeft") e = Math.max(0, e - 1);
+    else return;
+    t.preventDefault(), e !== this.activeSnap && (this.activeSnap = e, this._emitSnap());
   }
   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;`;
+      const s = this.snapPoints[this.activeSnap] ?? 0.95;
+      e = `height: ${Math.round(s * 100)}vh;`;
     }
-    return (this._dragging || this._dragOffset) && (e += `transform: ${t};`), p`
+    return (this._dragging || this._dragOffset) && (e += `transform: ${t};`), this._dragging && (e += "transition: none;"), p`
       <div class="backdrop" aria-hidden="true" @click=${this._handleBackdrop}></div>
       <div
         class="panel"
@@ -70,6 +94,13 @@ let s = class extends h {
         ${this.side === "bottom" || this.side === "top" ? p`
           <div
             class="handle"
+            role=${this.snapPoints.length ? "slider" : n}
+            tabindex=${this.snapPoints.length ? "0" : n}
+            aria-label=${this.snapPoints.length ? "Resize sheet" : n}
+            aria-valuemin=${this.snapPoints.length ? "0" : n}
+            aria-valuemax=${this.snapPoints.length ? String(this.snapPoints.length - 1) : n}
+            aria-valuenow=${this.snapPoints.length ? String(this.activeSnap) : n}
+            @keydown=${this._onHandleKeydown}
             @pointerdown=${this._onDragStart}
             @pointermove=${this._onDragMove}
             @pointerup=${this._onDragEnd}
@@ -77,7 +108,7 @@ let s = class extends h {
           >
             <span class="handle-bar"></span>
           </div>
-        ` : g}
+        ` : n}
         <div class="body">
           <slot></slot>
         </div>
@@ -85,7 +116,7 @@ let s = class extends h {
     `;
   }
 };
-s.styles = [v, l`
+i.styles = [v, c`
     :host {
       display: contents;
       font-family: var(--cg-font-family-primary);
@@ -95,8 +126,8 @@ s.styles = [v, l`
       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%);
+      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);
@@ -168,10 +199,16 @@ s.styles = [v, l`
       width: var(--cg-spacing-40);
       height: var(--cg-spacing-4);
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-surface-container-border);
+      background: var(--cg-color-surface-container-divider);
       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); }
+    .handle:focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
 
     .body {
       flex: 1;
@@ -182,30 +219,30 @@ s.styles = [v, l`
     }
   `];
 a([
-  i({ type: Boolean, reflect: !0 })
-], s.prototype, "open", 2);
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
 a([
-  i()
-], s.prototype, "label", 2);
+  h()
+], i.prototype, "label", 2);
 a([
-  i({ reflect: !0 })
-], s.prototype, "side", 2);
+  h({ reflect: !0 })
+], i.prototype, "side", 2);
 a([
-  i({ type: Array })
-], s.prototype, "snapPoints", 2);
+  h({ type: Array })
+], i.prototype, "snapPoints", 2);
 a([
-  i({ type: Number })
-], s.prototype, "activeSnap", 2);
+  h({ type: Number })
+], i.prototype, "activeSnap", 2);
 a([
-  i({ type: Boolean })
-], s.prototype, "dismissible", 2);
+  h({ type: Boolean })
+], i.prototype, "dismissible", 2);
 a([
   f()
-], s.prototype, "_dragOffset", 2);
-s = a([
+], i.prototype, "_dragOffset", 2);
+i = a([
   u("cg-sheet")
-], s);
+], i);
 export {
-  s as CgSheet
+  i as CgSheet
 };
 //# sourceMappingURL=cg-sheet.js.map

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

@@ -1 +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":"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"}
+{"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(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :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-divider);\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    .handle:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\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    // An unmount while open must not leave the page scroll-locked.\n    if (this.open) document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      // First render with open=false is not a close — no spurious event,\n      // no clobbering document.body.style.overflow on mount.\n      if (changed.get('open') === undefined && !this.open) return;\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _previousOverflow = '';\n\n  private _onOpen(): void {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\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    document.body.style.overflow = this._previousOverflow;\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 && !this.snapPoints.length) 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    // With snap points the user can drag toward LARGER snaps too — keep the\n    // signed delta; dismiss-only sheets still clamp to the dismiss direction.\n    this._dragOffset = this.snapPoints.length ? delta : Math.max(0, delta);\n  }\n\n  private _onDragEnd(): void {\n    if (!this._dragging) return;\n    this._dragging = false;\n    if (this.snapPoints.length) {\n      // Land on the snap nearest to the released position.\n      const viewport = this.side === 'bottom' || this.side === 'top'\n        ? window.innerHeight : window.innerWidth;\n      const current = (this.snapPoints[this.activeSnap] ?? 0.95) - this._dragOffset / Math.max(1, viewport);\n      let nearest = 0;\n      for (let i = 1; i < this.snapPoints.length; i++) {\n        if (Math.abs(this.snapPoints[i]! - current) < Math.abs(this.snapPoints[nearest]! - current)) nearest = i;\n      }\n      if (this.dismissible && current < Math.min(...this.snapPoints) - 0.1) {\n        this.open = false;\n      } else if (nearest !== this.activeSnap) {\n        this.activeSnap = nearest;\n        this._emitSnap();\n      }\n    } else if (this._dragOffset > 80 && this.dismissible) {\n      this.open = false;\n    }\n    this._dragOffset = 0;\n  }\n\n  private _emitSnap(): void {\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\n  /** SHEET-5: keyboard path for snap resizing (slider pattern on the handle). */\n  private _onHandleKeydown(e: KeyboardEvent): void {\n    if (!this.snapPoints.length) return;\n    let next = this.activeSnap;\n    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next = Math.min(this.snapPoints.length - 1, next + 1);\n    else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next = Math.max(0, next - 1);\n    else return;\n    e.preventDefault();\n    if (next !== this.activeSnap) {\n      this.activeSnap = next;\n      this._emitSnap();\n    }\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    if (this._dragging) panelStyle += 'transition: none;';\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            role=${this.snapPoints.length ? 'slider' : nothing}\n            tabindex=${this.snapPoints.length ? '0' : nothing}\n            aria-label=${this.snapPoints.length ? 'Resize sheet' : nothing}\n            aria-valuemin=${this.snapPoints.length ? '0' : nothing}\n            aria-valuemax=${this.snapPoints.length ? String(this.snapPoints.length - 1) : nothing}\n            aria-valuenow=${this.snapPoints.length ? String(this.activeSnap) : nothing}\n            @keydown=${this._onHandleKeydown}\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","viewport","current","nearest","i","next","translateAxis","panelStyle","snap","html","nothing","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1 +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"}
+{"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,4BA+OnB;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

@@ -1,12 +1,12 @@
-import { css as p, LitElement as h, nothing as v, html as d } from "lit";
+import { css as h, LitElement as p, nothing as u, 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);
+import { r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, o, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? m(o, n) : o, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (r = (s ? c(o, n, r) : c(r)) || r);
   return s && r && b(o, n, r), r;
 };
-let e = class extends h {
+let e = class extends p {
   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;
@@ -47,7 +47,7 @@ let e = class extends h {
                 <path d="M15 18l-6-6 6-6"></path>
               </svg>
             </button>
-          ` : v}
+          ` : u}
         </div>
         <div class="body" id="sidebar-body">
           <slot></slot>
@@ -59,7 +59,7 @@ let e = class extends h {
     `;
   }
 };
-e.styles = [u, p`
+e.styles = [v, h`
     :host {
       display: block;
       width: var(--cg-component-sidebar-width);
@@ -197,12 +197,47 @@ e.styles = [u, p`
       background: var(--cg-color-action-tertiary-background-hover);
       color: var(--cg-color-surface-base-text);
     }
+    /* Icon sizing contract: the leading icon (aria-hidden span or [data-icon])
+       gets a fixed square box so every row's label starts at the same x —
+       consumers no longer have to hand-fix alignment with inline widths. */
+    ::slotted(a) > [aria-hidden="true"],
+    ::slotted(button) > [aria-hidden="true"],
+    ::slotted(a) > [data-icon],
+    ::slotted(button) > [data-icon] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-icon-size-100);
+      flex-shrink: 0;
+      text-align: center;
+    }
     ::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);
+      /* Accent the active item with the brand: a crisp left bar + accent
+         text. The bar is a square-cornered left border (the rounding is
+         removed on the left edge so it reads as a clean vertical rule, the
+         Linear/Notion convention) — not an inset shadow, which would curve
+         along the corner radius. This is the "where am I?" signal the bare
+         fill was missing, and the one place the brand should surface in chrome. */
+      color: var(--cg-color-accent-text);
+      border-left: var(--cg-spacing-2) solid var(--cg-color-action-primary-border-default);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      /* Compensate the left border so the icon doesn't shift vs. inactive rows. */
+      padding-left: calc(var(--cg-spacing-12) - var(--cg-spacing-2));
+    }
+    /* Collapsed rail: a left bar would clip on a centered icon button, so
+       signal active with an accent ring instead. */
+    :host([collapsed]) ::slotted(a[aria-current]),
+    :host([collapsed]) ::slotted(button[aria-current]),
+    :host([collapsed]) ::slotted(a.active),
+    :host([collapsed]) ::slotted(button.active) {
+      border-left: none;
+      padding: 0;
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-action-primary-border-default);
     }
     ::slotted(a:focus-visible),
     ::slotted(button:focus-visible) {
@@ -210,31 +245,59 @@ e.styles = [u, p`
       outline-offset: calc(-1 * var(--cg-border-width-100));
     }
 
-    /* ── Section labels ── */
+    /* ── Section labels ──
+       Scaffolding, not content — kept quiet (medium weight, muted color) so
+       they group the nav without competing with the items for attention. */
     ::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);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
       text-transform: uppercase;
       letter-spacing: var(--cg-letter-spacing-wide);
     }
+    /* The first section title shouldn't add a big gap under the header. */
+    ::slotted(.section-title:first-child),
+    ::slotted([data-section-title]:first-child) {
+      padding-top: var(--cg-spacing-4);
+    }
 
-    /* ── Collapsed: hide labels & section titles, center icons ── */
+    /* ── Collapsed: collapse to an icon-only rail ──
+       Robust by default: we do NOT depend on the consumer wrapping every
+       label in <span data-label>. In collapsed mode the slotted item is
+       clipped to icon width and its text is zeroed out, so plain
+       <a href>Dashboard</a> markup collapses cleanly instead of bleeding
+       half-clipped text into the rail. The icon (first child, or an explicit
+       [data-icon] / aria-hidden span) is restored to a fixed size. */
+    :host([collapsed]) ::slotted(a),
+    :host([collapsed]) ::slotted(button) {
+      justify-content: center;
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      margin: 0 auto;
+      padding: 0;
+      gap: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: 0; /* zero out bare text nodes / unwrapped labels */
+    }
+    /* Restore the icon glyph at a real size, centered in the rail. */
+    :host([collapsed]) ::slotted(a) > [aria-hidden="true"],
+    :host([collapsed]) ::slotted(button) > [aria-hidden="true"],
+    :host([collapsed]) ::slotted(a) > [data-icon],
+    :host([collapsed]) ::slotted(button) > [data-icon] {
+      font-size: var(--cg-font-size-md);
+      width: auto;
+    }
+    /* Explicit labels and section titles are still hidden outright. */
     :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 })

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

@@ -1 +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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"}
+{"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    /* Icon sizing contract: the leading icon (aria-hidden span or [data-icon])\n       gets a fixed square box so every row's label starts at the same x —\n       consumers no longer have to hand-fix alignment with inline widths. */\n    ::slotted(a) > [aria-hidden=\"true\"],\n    ::slotted(button) > [aria-hidden=\"true\"],\n    ::slotted(a) > [data-icon],\n    ::slotted(button) > [data-icon] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-icon-size-100);\n      flex-shrink: 0;\n      text-align: center;\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      /* Accent the active item with the brand: a crisp left bar + accent\n         text. The bar is a square-cornered left border (the rounding is\n         removed on the left edge so it reads as a clean vertical rule, the\n         Linear/Notion convention) — not an inset shadow, which would curve\n         along the corner radius. This is the \"where am I?\" signal the bare\n         fill was missing, and the one place the brand should surface in chrome. */\n      color: var(--cg-color-accent-text);\n      border-left: var(--cg-spacing-2) solid var(--cg-color-action-primary-border-default);\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      /* Compensate the left border so the icon doesn't shift vs. inactive rows. */\n      padding-left: calc(var(--cg-spacing-12) - var(--cg-spacing-2));\n    }\n    /* Collapsed rail: a left bar would clip on a centered icon button, so\n       signal active with an accent ring instead. */\n    :host([collapsed]) ::slotted(a[aria-current]),\n    :host([collapsed]) ::slotted(button[aria-current]),\n    :host([collapsed]) ::slotted(a.active),\n    :host([collapsed]) ::slotted(button.active) {\n      border-left: none;\n      padding: 0;\n      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-action-primary-border-default);\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       Scaffolding, not content — kept quiet (medium weight, muted color) so\n       they group the nav without competing with the items for attention. */\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-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    /* The first section title shouldn't add a big gap under the header. */\n    ::slotted(.section-title:first-child),\n    ::slotted([data-section-title]:first-child) {\n      padding-top: var(--cg-spacing-4);\n    }\n\n    /* ── Collapsed: collapse to an icon-only rail ──\n       Robust by default: we do NOT depend on the consumer wrapping every\n       label in <span data-label>. In collapsed mode the slotted item is\n       clipped to icon width and its text is zeroed out, so plain\n       <a href>Dashboard</a> markup collapses cleanly instead of bleeding\n       half-clipped text into the rail. The icon (first child, or an explicit\n       [data-icon] / aria-hidden span) is restored to a fixed size. */\n    :host([collapsed]) ::slotted(a),\n    :host([collapsed]) ::slotted(button) {\n      justify-content: center;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      margin: 0 auto;\n      padding: 0;\n      gap: 0;\n      overflow: hidden;\n      white-space: nowrap;\n      font-size: 0; /* zero out bare text nodes / unwrapped labels */\n    }\n    /* Restore the icon glyph at a real size, centered in the rail. */\n    :host([collapsed]) ::slotted(a) > [aria-hidden=\"true\"],\n    :host([collapsed]) ::slotted(button) > [aria-hidden=\"true\"],\n    :host([collapsed]) ::slotted(a) > [data-icon],\n    :host([collapsed]) ::slotted(button) > [data-icon] {\n      font-size: var(--cg-font-size-md);\n      width: auto;\n    }\n    /* Explicit labels and section titles are still hidden outright. */\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  `];\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

@@ -7,6 +7,7 @@ import { LitElement } from 'lit';
  * <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>
+ * <cg-skeleton no-animation></cg-skeleton>
  * ```
  *
  * @cssprop --cg-color-loading-spinner-secondary - Skeleton background color
@@ -18,7 +19,12 @@ export declare class CgSkeleton extends LitElement {
     width: string;
     height: string;
     lines: number;
-    animated: boolean;
+    noAnimation: boolean;
+    /** @deprecated Use `noAnimation` / `no-animation`. Kept as a JS-property
+     *  alias so adapter wrappers and existing consumers don't break — the old
+     *  `animated="false"` attribute path never worked (Lit Boolean semantics). */
+    get animated(): boolean;
+    set animated(v: boolean);
     rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
     private _getDefaultHeight;
     render(): import('lit').TemplateResult<1>;

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA+CnB;IAEwC,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAiB;IAC5E,KAAK,SAAU;IACf,MAAM,SAAM;IACZ,KAAK,SAAK;IACiC,WAAW,UAAS;IAE3F;;kFAE8E;IAC9E,IAAI,QAAQ,IAAI,OAAO,CAA8B;IACrD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAA4B;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAElF,OAAO,CAAC,iBAAiB;IAShB,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}