@cognivo/components 0.8.0

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

@@ -0,0 +1,219 @@
+import { css as l, LitElement as p, html as g } from "lit";
+import { property as s, state as v, customElement as u } from "lit/decorators.js";
+import { h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (r, e, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? m(e, o) : e, c = r.length - 1, d; c >= 0; c--)
+    (d = r[c]) && (t = (i ? d(e, o, t) : d(t)) || t);
+  return i && t && b(e, o, t), t;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.size = "md", this.items = [], this.multiple = !1, this.variant = "default", this.defaultOpen = [], this._openItems = /* @__PURE__ */ new Set();
+  }
+  firstUpdated() {
+    this.defaultOpen.length > 0 && (this._openItems = new Set(this.multiple ? this.defaultOpen : [this.defaultOpen[0]]));
+  }
+  _handleTriggerKeydown(r) {
+    const e = this.shadowRoot.querySelectorAll(".trigger:not(:disabled)"), o = Array.from(e), i = o.indexOf(r.currentTarget);
+    let t = i;
+    switch (r.key) {
+      case "ArrowDown":
+        t = (i + 1) % o.length;
+        break;
+      case "ArrowUp":
+        t = (i - 1 + o.length) % o.length;
+        break;
+      case "Home":
+        t = 0;
+        break;
+      case "End":
+        t = o.length - 1;
+        break;
+      default:
+        return;
+    }
+    r.preventDefault(), o[t]?.focus();
+  }
+  _toggle(r) {
+    const e = new Set(this._openItems);
+    e.has(r) ? e.delete(r) : (this.multiple || e.clear(), e.add(r)), this._openItems = e, this.dispatchEvent(new CustomEvent("cg-accordion-change", {
+      detail: { open: [...e], toggled: r },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return g`${this.items.map((r) => {
+      const e = this._openItems.has(r.value);
+      return g`
+        <div class="item ${e ? "open" : ""}">
+          <button
+            class="trigger"
+            id="trigger-${r.value}"
+            aria-expanded=${e}
+            aria-controls="panel-${r.value}"
+            ?disabled=${r.disabled}
+            @click=${() => this._toggle(r.value)}
+            @keydown=${this._handleTriggerKeydown}
+          >
+            <span class="trigger-text">${r.trigger}</span>
+            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 9l6 6 6-6"></path>
+            </svg>
+          </button>
+          <div class="content-wrapper">
+            <div class="content" id="panel-${r.value}" role="region" aria-labelledby="trigger-${r.value}">
+              <div class="content-inner">${r.content}</div>
+            </div>
+          </div>
+        </div>
+      `;
+    })}`;
+  }
+};
+a.styles = [h, f, l`
+
+    /* ── Default variant — minimal dividers, transparent ── */
+    .item {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-base-divider);
+    }
+    .item:last-child { border-bottom: none; }
+
+    /* ── Card variant — separated elevated cards ── */
+    :host([variant="card"]) .item {
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      margin-bottom: var(--cg-spacing-8);
+      background: var(--cg-color-surface-cards-background);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      overflow: hidden;
+    }
+    :host([variant="card"]) .item:last-child { margin-bottom: 0; }
+
+    /* ── Bordered variant — single grouped container ── */
+    :host([variant="bordered"]) {
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      background: var(--cg-color-surface-cards-background);
+      overflow: hidden;
+    }
+    :host([variant="bordered"]) .item {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    :host([variant="bordered"]) .item:last-child {
+      border-bottom: none;
+    }
+
+    /* ── Trigger ── */
+    .trigger {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16);
+      background: transparent;
+      border: none;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+      text-align: left;
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--cg-overlay-dark-subtle);
+    }
+
+    .trigger:active:not(:disabled) .chevron {
+      transform: scale(0.85);
+    }
+
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    .trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .trigger-text {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* ── Chevron — only active signal ── */
+    .chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      flex-shrink: 0;
+      color: var(--cg-color-surface-container-outlined);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .item.open .chevron {
+      transform: rotate(180deg);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Content — CSS grid smooth height ── */
+    .content-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .item.open .content-wrapper {
+      grid-template-rows: 1fr;
+    }
+
+    .content {
+      overflow: hidden;
+    }
+
+    .content-inner {
+      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-relaxed);
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      transition-delay: 50ms;
+    }
+    .item.open .content-inner {
+      opacity: 1;
+    }
+
+    /* ── Size variants ── */
+    :host([size="sm"]) .trigger { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-12); }
+    :host([size="sm"]) .content-inner { font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-12) var(--cg-spacing-12); }
+
+    :host([size="lg"]) .trigger { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-20); }
+    :host([size="lg"]) .content-inner { font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }
+  `];
+n([
+  s({ reflect: !0 })
+], a.prototype, "size", 2);
+n([
+  s({ type: Array })
+], a.prototype, "items", 2);
+n([
+  s({ type: Boolean })
+], a.prototype, "multiple", 2);
+n([
+  s({ reflect: !0 })
+], a.prototype, "variant", 2);
+n([
+  s({ type: Array })
+], a.prototype, "defaultOpen", 2);
+n([
+  v()
+], a.prototype, "_openItems", 2);
+a = n([
+  u("cg-accordion")
+], a);
+export {
+  a as CgAccordion
+};
+//# sourceMappingURL=cg-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-accordion.js","sources":["../../../src/components/cg-accordion/cg-accordion.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-accordion. */\nexport interface AccordionItem {\n  value: string;\n  trigger: string;\n  content: string;\n  icon?: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-accordion\n * Expandable content sections with smooth CSS grid height animation.\n *\n * @fires {CustomEvent<{open: string[], toggled: string}>} cg-accordion-change - When an item is toggled\n */\n@customElement('cg-accordion')\nexport class CgAccordion extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Default variant — minimal dividers, transparent ── */\n    .item {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-base-divider);\n    }\n    .item:last-child { border-bottom: none; }\n\n    /* ── Card variant — separated elevated cards ── */\n    :host([variant=\"card\"]) .item {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      margin-bottom: var(--cg-spacing-8);\n      background: var(--cg-color-surface-cards-background);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      overflow: hidden;\n    }\n    :host([variant=\"card\"]) .item:last-child { margin-bottom: 0; }\n\n    /* ── Bordered variant — single grouped container ── */\n    :host([variant=\"bordered\"]) {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      overflow: hidden;\n    }\n    :host([variant=\"bordered\"]) .item {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    :host([variant=\"bordered\"]) .item:last-child {\n      border-bottom: none;\n    }\n\n    /* ── Trigger ── */\n    .trigger {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16);\n      background: transparent;\n      border: none;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      text-align: left;\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .trigger:hover:not(:disabled) {\n      background: var(--cg-overlay-dark-subtle);\n    }\n\n    .trigger:active:not(:disabled) .chevron {\n      transform: scale(0.85);\n    }\n\n    .trigger:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    .trigger:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .trigger-text {\n      flex: 1;\n      min-width: 0;\n    }\n\n    /* ── Chevron — only active signal ── */\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .item.open .chevron {\n      transform: rotate(180deg);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Content — CSS grid smooth height ── */\n    .content-wrapper {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .item.open .content-wrapper {\n      grid-template-rows: 1fr;\n    }\n\n    .content {\n      overflow: hidden;\n    }\n\n    .content-inner {\n      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      transition-delay: 50ms;\n    }\n    .item.open .content-inner {\n      opacity: 1;\n    }\n\n    /* ── Size variants ── */\n    :host([size=\"sm\"]) .trigger { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-12); }\n    :host([size=\"sm\"]) .content-inner { font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-12) var(--cg-spacing-12); }\n\n    :host([size=\"lg\"]) .trigger { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-20); }\n    :host([size=\"lg\"]) .content-inner { font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) items: AccordionItem[] = [];\n  @property({ type: Boolean }) multiple = false;\n  @property({ reflect: true }) variant: 'default' | 'card' | 'bordered' = 'default';\n  @property({ type: Array }) defaultOpen: string[] = [];\n\n  @state() private _openItems = new Set<string>();\n\n  override firstUpdated() {\n    if (this.defaultOpen.length > 0) {\n      this._openItems = new Set(this.multiple ? this.defaultOpen : [this.defaultOpen[0]!]);\n    }\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent) {\n    const triggers = this.shadowRoot!.querySelectorAll('.trigger:not(:disabled)') as NodeListOf<HTMLElement>;\n    const triggerArr = Array.from(triggers);\n    const currentIdx = triggerArr.indexOf(e.currentTarget as HTMLElement);\n    let nextIdx = currentIdx;\n\n    switch (e.key) {\n      case 'ArrowDown': nextIdx = (currentIdx + 1) % triggerArr.length; break;\n      case 'ArrowUp': nextIdx = (currentIdx - 1 + triggerArr.length) % triggerArr.length; break;\n      case 'Home': nextIdx = 0; break;\n      case 'End': nextIdx = triggerArr.length - 1; break;\n      default: return;\n    }\n\n    e.preventDefault();\n    triggerArr[nextIdx]?.focus();\n  }\n\n  private _toggle(value: string) {\n    const next = new Set(this._openItems);\n    if (next.has(value)) {\n      next.delete(value);\n    } else {\n      if (!this.multiple) next.clear();\n      next.add(value);\n    }\n    this._openItems = next;\n    this.dispatchEvent(new CustomEvent('cg-accordion-change', {\n      detail: { open: [...next], toggled: value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`${this.items.map(item => {\n      const isOpen = this._openItems.has(item.value);\n      return html`\n        <div class=\"item ${isOpen ? 'open' : ''}\">\n          <button\n            class=\"trigger\"\n            id=\"trigger-${item.value}\"\n            aria-expanded=${isOpen}\n            aria-controls=\"panel-${item.value}\"\n            ?disabled=${item.disabled}\n            @click=${() => this._toggle(item.value)}\n            @keydown=${this._handleTriggerKeydown}\n          >\n            <span class=\"trigger-text\">${item.trigger}</span>\n            <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M6 9l6 6 6-6\"></path>\n            </svg>\n          </button>\n          <div class=\"content-wrapper\">\n            <div class=\"content\" id=\"panel-${item.value}\" role=\"region\" aria-labelledby=\"trigger-${item.value}\">\n              <div class=\"content-inner\">${item.content}</div>\n            </div>\n          </div>\n        </div>\n      `;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-accordion': CgAccordion; }\n}\n"],"names":["CgAccordion","LitElement","e","triggers","triggerArr","currentIdx","nextIdx","value","next","html","item","isOpen","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-alert-dialog/cg-alert-dialog.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-alert-dialog
+ * Destructive confirmation dialog with alertdialog ARIA role. Uses danger styling
+ * for destructive actions and focuses cancel button by default for safety.
+ *
+ * @example
+ * ```html
+ * <cg-alert-dialog
+ *   open
+ *   title="Delete project?"
+ *   description="This action cannot be undone."
+ *   destructive
+ *   confirm-label="Delete"
+ * ></cg-alert-dialog>
+ * ```
+ *
+ * @slot - Optional body content (overrides description)
+ * @slot icon - Optional icon
+ * @slot actions - Override default action buttons
+ *
+ * @fires {CustomEvent} cg-alert-confirm
+ * @fires {CustomEvent} cg-alert-cancel
+ * @fires {CustomEvent} cg-alert-open
+ * @fires {CustomEvent} cg-alert-close
+ */
+export declare class CgAlertDialog extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    destructive: boolean;
+    loading: boolean;
+    closable: boolean;
+    private _dialogEl;
+    private _focusTrap;
+    private _previousOverflow;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private _confirm;
+    private _cancel;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-alert-dialog': CgAlertDialog;
+    }
+}
+//# sourceMappingURL=cg-alert-dialog.d.ts.map

package/dist/components/cg-alert-dialog/cg-alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/cg-alert-dialog/cg-alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA8FnB;IAEyC,IAAI,UAAS;IACpC,KAAK,SAAM;IACpB,WAAW,SAAM;IACa,YAAY,SAAa;IAC1B,WAAW,SAAY;IACpB,WAAW,UAAS;IACpB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IAE5B,OAAO,CAAC,SAAS,CAAe;IAElD,OAAO,CAAC,UAAU,CAAmB;IACrC,OAAO,CAAC,iBAAiB,CAAM;IAEtB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,OAAO;IAKN,MAAM;CAkDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-alert-dialog/cg-alert-dialog.js

@@ -0,0 +1,220 @@
+import { css as g, LitElement as v, nothing as p, html as c } from "lit";
+import { property as o, query as u, customElement as h } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { F as m } from "../../chunks/focus-trap-BdRNhSPD.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (i, r, n, s) => {
+  for (var a = s > 1 ? void 0 : s ? w(r, n) : r, l = i.length - 1, d; l >= 0; l--)
+    (d = i[l]) && (a = (s ? d(r, n, a) : d(a)) || a);
+  return s && a && y(r, n, a), a;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.open = !1, this.title = "", this.description = "", this.confirmLabel = "Confirm", this.cancelLabel = "Cancel", this.destructive = !1, this.loading = !1, this.closable = !1, this._focusTrap = new m(), this._previousOverflow = "";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._focusTrap.deactivate(), document.body.style.overflow = this._previousOverflow;
+  }
+  updated(i) {
+    i.has("open") && (this.open ? this._onOpen() : this._onClose());
+  }
+  _onOpen() {
+    this._previousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.dispatchEvent(new CustomEvent("cg-alert-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+      if (this._dialogEl) {
+        const i = this._dialogEl.querySelector("[data-cancel]");
+        this._focusTrap.activate(this._dialogEl, {
+          initialFocus: i ?? null,
+          handleEscape: this.closable,
+          onEscape: this.closable ? () => this._cancel() : void 0
+        });
+      }
+    });
+  }
+  _onClose() {
+    document.body.style.overflow = this._previousOverflow, this._focusTrap.deactivate(), this.dispatchEvent(new CustomEvent("cg-alert-close", { bubbles: !0, composed: !0 }));
+  }
+  _confirm() {
+    this.dispatchEvent(new CustomEvent("cg-alert-confirm", { bubbles: !0, composed: !0 })), this.loading || (this.open = !1);
+  }
+  _cancel() {
+    this.dispatchEvent(new CustomEvent("cg-alert-cancel", { bubbles: !0, composed: !0 })), this.open = !1;
+  }
+  render() {
+    return c`
+      <div class="backdrop" @click=${() => this.closable && this._cancel()}></div>
+      <div
+        class="dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="alert-title"
+        aria-describedby="alert-description"
+        ?inert=${!this.open}
+      >
+        <div class="header">
+          <slot name="icon">
+            ${this.destructive ? c`
+              <div class="icon-wrap">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 9v4M12 17h.01"/>
+                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                </svg>
+              </div>
+            ` : p}
+          </slot>
+          <div class="header-text">
+            ${this.title ? c`<h2 id="alert-title" class="title">${this.title}</h2>` : p}
+            ${this.description ? c`<p id="alert-description" class="description">${this.description}</p>` : p}
+          </div>
+        </div>
+        <div class="body"><slot></slot></div>
+        <div class="actions">
+          <slot name="actions">
+            <cg-button
+              variant="tertiary"
+              size="md"
+              data-cancel
+              @click=${this._cancel}
+              ?disabled=${this.loading}
+            >${this.cancelLabel}</cg-button>
+            <cg-button
+              variant="primary"
+              type="${this.destructive ? "danger" : "normal"}"
+              size="md"
+              data-confirm
+              @click=${this._confirm}
+              ?loading=${this.loading}
+            >${this.confirmLabel}</cg-button>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [f, b, g`
+    :host {
+      display: contents;
+    }
+
+    .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));
+      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;
+    }
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      z-index: var(--cg-z-index-top);
+      width: calc(100% - var(--cg-spacing-32));
+      max-width: var(--cg-component-alert-dialog-width);
+      padding: var(--cg-spacing-24);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-component-alert-dialog-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+      pointer-events: none;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([open]) .dialog {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+      pointer-events: auto;
+    }
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-16);
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .icon-wrap {
+      flex-shrink: 0;
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+    }
+    :host([destructive]) .icon-wrap {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      margin: 0 0 var(--cg-spacing-4);
+      line-height: var(--cg-line-height-snug);
+    }
+    .description {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+      margin: 0;
+      line-height: var(--cg-line-height-relaxed);
+    }
+    .header-text { flex: 1; }
+
+    .body {
+      margin: var(--cg-spacing-16) 0;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-24);
+    }
+  `];
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+e([
+  o()
+], t.prototype, "title", 2);
+e([
+  o()
+], t.prototype, "description", 2);
+e([
+  o({ attribute: "confirm-label" })
+], t.prototype, "confirmLabel", 2);
+e([
+  o({ attribute: "cancel-label" })
+], t.prototype, "cancelLabel", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "destructive", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "closable", 2);
+e([
+  u(".dialog")
+], t.prototype, "_dialogEl", 2);
+t = e([
+  h("cg-alert-dialog")
+], t);
+export {
+  t as CgAlertDialog
+};
+//# sourceMappingURL=cg-alert-dialog.js.map

package/dist/components/cg-alert-dialog/cg-alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-alert-dialog.js","sources":["../../../src/components/cg-alert-dialog/cg-alert-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-alert-dialog\n * Destructive confirmation dialog with alertdialog ARIA role. Uses danger styling\n * for destructive actions and focuses cancel button by default for safety.\n *\n * @example\n * ```html\n * <cg-alert-dialog\n *   open\n *   title=\"Delete project?\"\n *   description=\"This action cannot be undone.\"\n *   destructive\n *   confirm-label=\"Delete\"\n * ></cg-alert-dialog>\n * ```\n *\n * @slot - Optional body content (overrides description)\n * @slot icon - Optional icon\n * @slot actions - Override default action buttons\n *\n * @fires {CustomEvent} cg-alert-confirm\n * @fires {CustomEvent} cg-alert-cancel\n * @fires {CustomEvent} cg-alert-open\n * @fires {CustomEvent} cg-alert-close\n */\n@customElement('cg-alert-dialog')\nexport class CgAlertDialog extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\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));\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    .dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-alert-dialog-width);\n      padding: var(--cg-spacing-24);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-component-alert-dialog-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translate(-50%, -48%) scale(0.96);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .dialog {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n      pointer-events: auto;\n    }\n\n    .header {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .icon-wrap {\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([destructive]) .icon-wrap {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      margin: 0 0 var(--cg-spacing-4);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      margin: 0;\n      line-height: var(--cg-line-height-relaxed);\n    }\n    .header-text { flex: 1; }\n\n    .body {\n      margin: var(--cg-spacing-16) 0;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-24);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() override title = '';\n  @property() description = '';\n  @property({ attribute: 'confirm-label' }) confirmLabel = 'Confirm';\n  @property({ attribute: 'cancel-label' }) cancelLabel = 'Cancel';\n  @property({ type: Boolean, reflect: true }) destructive = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) closable = false;\n\n  @query('.dialog') private _dialogEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n  private _previousOverflow = '';\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    document.body.style.overflow = this._previousOverflow;\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._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-alert-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (this._dialogEl) {\n        // Focus cancel button by default for safety\n        const cancelBtn = this._dialogEl.querySelector<HTMLButtonElement>('[data-cancel]');\n        this._focusTrap.activate(this._dialogEl, {\n          initialFocus: cancelBtn ?? null,\n          handleEscape: this.closable,\n          onEscape: this.closable ? () => this._cancel() : undefined,\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-alert-close', { bubbles: true, composed: true }));\n  }\n\n  private _confirm(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-confirm', { bubbles: true, composed: true }));\n    if (!this.loading) this.open = false;\n  }\n\n  private _cancel(): void {\n    this.dispatchEvent(new CustomEvent('cg-alert-cancel', { bubbles: true, composed: true }));\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div class=\"backdrop\" @click=${() => this.closable && this._cancel()}></div>\n      <div\n        class=\"dialog\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"alert-title\"\n        aria-describedby=\"alert-description\"\n        ?inert=${!this.open}\n      >\n        <div class=\"header\">\n          <slot name=\"icon\">\n            ${this.destructive ? html`\n              <div class=\"icon-wrap\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M12 9v4M12 17h.01\"/>\n                  <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n                </svg>\n              </div>\n            ` : nothing}\n          </slot>\n          <div class=\"header-text\">\n            ${this.title ? html`<h2 id=\"alert-title\" class=\"title\">${this.title}</h2>` : nothing}\n            ${this.description ? html`<p id=\"alert-description\" class=\"description\">${this.description}</p>` : nothing}\n          </div>\n        </div>\n        <div class=\"body\"><slot></slot></div>\n        <div class=\"actions\">\n          <slot name=\"actions\">\n            <cg-button\n              variant=\"tertiary\"\n              size=\"md\"\n              data-cancel\n              @click=${this._cancel}\n              ?disabled=${this.loading}\n            >${this.cancelLabel}</cg-button>\n            <cg-button\n              variant=\"primary\"\n              type=\"${this.destructive ? 'danger' : 'normal'}\"\n              size=\"md\"\n              data-confirm\n              @click=${this._confirm}\n              ?loading=${this.loading}\n            >${this.confirmLabel}</cg-button>\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-alert-dialog': CgAlertDialog;\n  }\n}\n"],"names":["CgAlertDialog","LitElement","FocusTrap","changed","cancelBtn","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/components/cg-app-shell/cg-app-shell.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-app-shell
+ * Composed application shell — a sticky top navbar, an optional sidebar, and
+ * an independently scrolling main region. Handles the layout most apps
+ * hand-roll on top of `cg-navbar` + `cg-sidebar`.
+ *
+ * The shell takes the full viewport height by default. The main region is the
+ * only scrollable surface; the navbar and sidebar are pinned. Below
+ * `--cg-component-app-shell-breakpoint` (768px), the sidebar collapses out
+ * of the layout — consumers should provide a drawer trigger inside the
+ * navbar slot for narrow viewports.
+ *
+ * @example
+ * ```html
+ * <cg-app-shell>
+ *   <cg-navbar slot="navbar">…</cg-navbar>
+ *   <cg-sidebar slot="sidebar">…</cg-sidebar>
+ *   <article>…page content…</article>
+ * </cg-app-shell>
+ * ```
+ *
+ * @example Right sidebar, no navbar
+ * ```html
+ * <cg-app-shell sidebar-position="right" no-navbar>
+ *   <cg-sidebar slot="sidebar">…</cg-sidebar>
+ *   <article>…</article>
+ * </cg-app-shell>
+ * ```
+ *
+ * @slot navbar - Top navigation bar (sticky)
+ * @slot sidebar - Side navigation (sticky, hidden on narrow viewports)
+ * @slot - Main content (scrollable)
+ *
+ * @cssprop --cg-component-app-shell-navbar-height - Navbar fixed height (default 64px)
+ * @cssprop --cg-component-app-shell-sidebar-width - Sidebar fixed width (default 240px)
+ * @cssprop --cg-component-app-shell-breakpoint - Width below which sidebar collapses (default 768px)
+ */
+export declare class CgAppShell extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Position of the sidebar slot, or "overlay" to keep it visible on narrow viewports. */
+    sidebarPosition: 'left' | 'right' | 'overlay';
+    /** Hide the navbar slot entirely. */
+    noNavbar: boolean;
+    /** Hide the sidebar slot entirely. */
+    noSidebar: boolean;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-app-shell': CgAppShell;
+    }
+}
+//# sourceMappingURL=cg-app-shell.d.ts.map

package/dist/components/cg-app-shell/cg-app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/cg-app-shell/cg-app-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAkGnB;IAEH,yFAAyF;IAEzF,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAU;IAEvD,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,sCAAsC;IAEtC,SAAS,UAAS;IAET,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}