@cognivo/components 0.8.0

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

@@ -0,0 +1,346 @@
+import { css as h, LitElement as u, html as d } from "lit";
+import { property as c, state as g, customElement as p } from "lit/decorators.js";
+import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? m(e, s) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
+  return r && a && y(e, s, a), a;
+};
+let n = class extends u {
+  constructor() {
+    super(), this.value = "", this.rangeEnd = "", this.mode = "single", this.min = "", this.max = "", this.weekStartsOn = 0, this.name = "", this._displayYear = (/* @__PURE__ */ new Date()).getFullYear(), this._displayMonth = (/* @__PURE__ */ new Date()).getMonth(), typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.value) {
+      const t = this._parseDate(this.value);
+      t && (this._displayYear = t.getFullYear(), this._displayMonth = t.getMonth());
+    }
+  }
+  updated(t) {
+    if (t.has("value") && (this._internals?.setFormValue(this.value), this.value)) {
+      const e = this._parseDate(this.value);
+      e && (this._displayYear = e.getFullYear(), this._displayMonth = e.getMonth());
+    }
+  }
+  _parseDate(t) {
+    if (!t) return null;
+    const e = t.split("-");
+    if (e.length !== 3) return null;
+    const s = parseInt(e[0], 10), r = parseInt(e[1], 10) - 1, a = parseInt(e[2], 10);
+    return isNaN(s) || isNaN(r) || isNaN(a) ? null : new Date(s, r, a);
+  }
+  _formatISO(t) {
+    const e = t.getFullYear(), s = String(t.getMonth() + 1).padStart(2, "0"), r = String(t.getDate()).padStart(2, "0");
+    return `${e}-${s}-${r}`;
+  }
+  _getDaysInMonth(t, e) {
+    return new Date(t, e + 1, 0).getDate();
+  }
+  _getFirstDayOfWeek(t, e) {
+    return (new Date(t, e, 1).getDay() - this.weekStartsOn + 7) % 7;
+  }
+  _isToday(t) {
+    const e = /* @__PURE__ */ new Date();
+    return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+  }
+  _isSameDay(t, e) {
+    return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+  }
+  _isDisabled(t) {
+    if (this.min) {
+      const e = this._parseDate(this.min);
+      if (e && t < e) return !0;
+    }
+    if (this.max) {
+      const e = this._parseDate(this.max);
+      if (e && t > e) return !0;
+    }
+    return !1;
+  }
+  _prevMonth() {
+    this._displayMonth === 0 ? (this._displayMonth = 11, this._displayYear--) : this._displayMonth--;
+  }
+  _nextMonth() {
+    this._displayMonth === 11 ? (this._displayMonth = 0, this._displayYear++) : this._displayMonth++;
+  }
+  _onGridKeydown(t) {
+    const e = t.target;
+    if (!e || !e.classList.contains("day")) return;
+    const s = Array.from(
+      this.shadowRoot?.querySelectorAll(".day:not(:disabled)") ?? []
+    ), r = s.indexOf(e);
+    if (r < 0) return;
+    let a = r;
+    switch (t.key) {
+      case "ArrowLeft":
+        a = Math.max(0, r - 1);
+        break;
+      case "ArrowRight":
+        a = Math.min(s.length - 1, r + 1);
+        break;
+      case "ArrowUp":
+        a = Math.max(0, r - 7);
+        break;
+      case "ArrowDown":
+        a = Math.min(s.length - 1, r + 7);
+        break;
+      case "Home":
+        a = 0;
+        break;
+      case "End":
+        a = s.length - 1;
+        break;
+      case "PageUp":
+        t.preventDefault(), this._prevMonth();
+        return;
+      case "PageDown":
+        t.preventDefault(), this._nextMonth();
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), s[a]?.focus();
+  }
+  _selectDate(t) {
+    if (this._isDisabled(t)) return;
+    const e = this._formatISO(t);
+    if (this.mode === "range")
+      if (!this.value || this.value && this.rangeEnd)
+        this.value = e, this.rangeEnd = "";
+      else {
+        const s = this._parseDate(this.value);
+        s && t < s ? (this.rangeEnd = this.value, this.value = e) : this.rangeEnd = e;
+      }
+    else
+      this.value = e;
+    this.dispatchEvent(new CustomEvent("cg-calendar-change", {
+      detail: { value: this.value, rangeEnd: this.rangeEnd },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _getWeekdayNames() {
+    const t = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    return this.weekStartsOn === 1 ? [...t.slice(1), t[0]] : t;
+  }
+  _getMonthName() {
+    return new Date(this._displayYear, this._displayMonth, 1).toLocaleString("default", { month: "long" });
+  }
+  _getDayClasses(t, e) {
+    const s = ["day"];
+    e && s.push("outside"), this._isToday(t) && s.push("today");
+    const r = this._parseDate(this.value), a = this._parseDate(this.rangeEnd);
+    return this.mode === "range" ? r && this._isSameDay(t, r) ? s.push(a ? "range-start" : "selected") : a && this._isSameDay(t, a) ? s.push("range-end") : r && a && t > r && t < a && s.push("in-range") : r && this._isSameDay(t, r) && s.push("selected"), s.join(" ");
+  }
+  render() {
+    const t = this._getDaysInMonth(this._displayYear, this._displayMonth), e = this._getFirstDayOfWeek(this._displayYear, this._displayMonth), s = this._getDaysInMonth(this._displayYear, this._displayMonth - 1), r = [];
+    for (let a = e - 1; a >= 0; a--) {
+      const o = new Date(this._displayYear, this._displayMonth - 1, s - a);
+      r.push({ date: o, outside: !0 });
+    }
+    for (let a = 1; a <= t; a++) {
+      const o = new Date(this._displayYear, this._displayMonth, a);
+      r.push({ date: o, outside: !1 });
+    }
+    for (; r.length < 42; ) {
+      const a = r[r.length - 1].date, o = new Date(a.getFullYear(), a.getMonth(), a.getDate() + 1);
+      r.push({ date: o, outside: !0 });
+    }
+    return d`
+      <div class="calendar" role="grid" aria-label=${`${this._getMonthName()} ${this._displayYear}`}>
+        <div class="header">
+          <button class="nav-btn" type="button" aria-label="Previous month" @click=${this._prevMonth}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 3L5 7l4 4"/>
+            </svg>
+          </button>
+          <div class="month-year">${this._getMonthName()} ${this._displayYear}</div>
+          <button class="nav-btn" type="button" aria-label="Next month" @click=${this._nextMonth}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M5 3l4 4-4 4"/>
+            </svg>
+          </button>
+        </div>
+        <div class="weekdays">
+          ${this._getWeekdayNames().map((a) => d`<div class="weekday">${a}</div>`)}
+        </div>
+        <div class="days" @keydown=${this._onGridKeydown}>
+          ${r.map((a) => d`
+            <button
+              class=${this._getDayClasses(a.date, a.outside)}
+              role="gridcell"
+              aria-selected=${this._parseDate(this.value) && this._isSameDay(a.date, this._parseDate(this.value)) ? "true" : "false"}
+              ?disabled=${this._isDisabled(a.date)}
+              @click=${() => this._selectDate(a.date)}
+            >${a.date.getDate()}</button>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = [f, v, h`
+    :host { display: inline-block; }
+
+    .calendar {
+      padding: var(--cg-spacing-16);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-calendar-radius);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .nav-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-100);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .nav-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .nav-btn:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    .month-year {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));
+      gap: var(--cg-spacing-2);
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .weekday {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--cg-spacing-32);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .days {
+      display: grid;
+      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));
+      gap: var(--cg-spacing-2);
+    }
+    .day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-component-calendar-cell-size);
+      height: var(--cg-component-calendar-cell-size);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-full);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .day:hover:not(:disabled) {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .day:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .nav-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .day:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+    .day.outside {
+      color: var(--cg-color-surface-container-outlined);
+      opacity: 0.5;
+    }
+    .day.today:not(.selected):not(.range-start):not(.range-end) {
+      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .day.selected {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .day.in-range {
+      background: var(--cg-overlay-accent-light);
+      border-radius: 0;
+    }
+    .day.range-start {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100);
+    }
+    .day.range-end {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0;
+    }
+    .day:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  `];
+n.formAssociated = !0;
+i([
+  c()
+], n.prototype, "value", 2);
+i([
+  c({ attribute: "range-end" })
+], n.prototype, "rangeEnd", 2);
+i([
+  c()
+], n.prototype, "mode", 2);
+i([
+  c()
+], n.prototype, "min", 2);
+i([
+  c()
+], n.prototype, "max", 2);
+i([
+  c({ type: Number, attribute: "week-starts-on" })
+], n.prototype, "weekStartsOn", 2);
+i([
+  c()
+], n.prototype, "name", 2);
+i([
+  g()
+], n.prototype, "_displayYear", 2);
+i([
+  g()
+], n.prototype, "_displayMonth", 2);
+n = i([
+  p("cg-calendar")
+], n);
+export {
+  n as CgCalendar
+};
+//# sourceMappingURL=cg-calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-calendar.js","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-calendar\n * Full month calendar view with single/range/multiple selection modes,\n * keyboard navigation, and min/max bounds.\n *\n * @example\n * ```html\n * <cg-calendar value=\"2026-04-15\"></cg-calendar>\n * <cg-calendar mode=\"range\" value=\"2026-04-10\" range-end=\"2026-04-20\"></cg-calendar>\n * ```\n *\n * @fires {CustomEvent<{value: string, rangeEnd?: string}>} cg-calendar-change\n */\n@customElement('cg-calendar')\nexport class CgCalendar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    .calendar {\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-calendar-radius);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .nav-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .nav-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .nav-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .month-year {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .weekdays {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .weekday {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .days {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n    }\n    .day {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-component-calendar-cell-size);\n      height: var(--cg-component-calendar-cell-size);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-full);\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        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .day:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .day:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .nav-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .day:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .day.outside {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .day.today:not(.selected):not(.range-start):not(.range-end) {\n      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.selected {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.in-range {\n      background: var(--cg-overlay-accent-light);\n      border-radius: 0;\n    }\n    .day.range-start {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100);\n    }\n    .day.range-end {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0;\n    }\n    .day:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property({ attribute: 'range-end' }) rangeEnd = '';\n  @property() mode: 'single' | 'range' | 'multiple' = 'single';\n  @property() min = '';\n  @property() max = '';\n  @property({ type: Number, attribute: 'week-starts-on' }) weekStartsOn: 0 | 1 = 0;\n  @property() name = '';\n\n  @state() private _displayYear = new Date().getFullYear();\n  @state() private _displayMonth = new Date().getMonth();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.value) {\n      const d = this._parseDate(this.value);\n      if (d) {\n        this._displayYear = d.getFullYear();\n        this._displayMonth = d.getMonth();\n      }\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n      // Jump to the month containing the new value\n      if (this.value) {\n        const d = this._parseDate(this.value);\n        if (d) {\n          this._displayYear = d.getFullYear();\n          this._displayMonth = d.getMonth();\n        }\n      }\n    }\n  }\n\n  private _parseDate(iso: string): Date | null {\n    if (!iso) return null;\n    const parts = iso.split('-');\n    if (parts.length !== 3) return null;\n    const year = parseInt(parts[0]!, 10);\n    const month = parseInt(parts[1]!, 10) - 1;\n    const day = parseInt(parts[2]!, 10);\n    if (isNaN(year) || isNaN(month) || isNaN(day)) return null;\n    return new Date(year, month, day);\n  }\n\n  private _formatISO(date: Date): string {\n    const y = date.getFullYear();\n    const m = String(date.getMonth() + 1).padStart(2, '0');\n    const d = String(date.getDate()).padStart(2, '0');\n    return `${y}-${m}-${d}`;\n  }\n\n  private _getDaysInMonth(year: number, month: number): number {\n    return new Date(year, month + 1, 0).getDate();\n  }\n\n  private _getFirstDayOfWeek(year: number, month: number): number {\n    const day = new Date(year, month, 1).getDay();\n    return (day - this.weekStartsOn + 7) % 7;\n  }\n\n  private _isToday(date: Date): boolean {\n    const today = new Date();\n    return date.getFullYear() === today.getFullYear() &&\n           date.getMonth() === today.getMonth() &&\n           date.getDate() === today.getDate();\n  }\n\n  private _isSameDay(a: Date, b: Date): boolean {\n    return a.getFullYear() === b.getFullYear() &&\n           a.getMonth() === b.getMonth() &&\n           a.getDate() === b.getDate();\n  }\n\n  private _isDisabled(date: Date): boolean {\n    if (this.min) {\n      const min = this._parseDate(this.min);\n      if (min && date < min) return true;\n    }\n    if (this.max) {\n      const max = this._parseDate(this.max);\n      if (max && date > max) return true;\n    }\n    return false;\n  }\n\n  private _prevMonth(): void {\n    if (this._displayMonth === 0) {\n      this._displayMonth = 11;\n      this._displayYear--;\n    } else {\n      this._displayMonth--;\n    }\n  }\n\n  private _nextMonth(): void {\n    if (this._displayMonth === 11) {\n      this._displayMonth = 0;\n      this._displayYear++;\n    } else {\n      this._displayMonth++;\n    }\n  }\n\n  private _onGridKeydown(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    if (!target || !target.classList.contains('day')) return;\n    const buttons = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.day:not(:disabled)') ?? [],\n    );\n    const idx = buttons.indexOf(target as HTMLButtonElement);\n    if (idx < 0) return;\n    let next = idx;\n    switch (e.key) {\n      case 'ArrowLeft': next = Math.max(0, idx - 1); break;\n      case 'ArrowRight': next = Math.min(buttons.length - 1, idx + 1); break;\n      case 'ArrowUp': next = Math.max(0, idx - 7); break;\n      case 'ArrowDown': next = Math.min(buttons.length - 1, idx + 7); break;\n      case 'Home': next = 0; break;\n      case 'End': next = buttons.length - 1; break;\n      case 'PageUp': e.preventDefault(); this._prevMonth(); return;\n      case 'PageDown': e.preventDefault(); this._nextMonth(); return;\n      default: return;\n    }\n    e.preventDefault();\n    buttons[next]?.focus();\n  }\n\n  private _selectDate(date: Date): void {\n    if (this._isDisabled(date)) return;\n    const iso = this._formatISO(date);\n\n    if (this.mode === 'range') {\n      if (!this.value || (this.value && this.rangeEnd)) {\n        // Start new range\n        this.value = iso;\n        this.rangeEnd = '';\n      } else {\n        // Complete range\n        const start = this._parseDate(this.value);\n        if (start && date < start) {\n          this.rangeEnd = this.value;\n          this.value = iso;\n        } else {\n          this.rangeEnd = iso;\n        }\n      }\n    } else {\n      this.value = iso;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-calendar-change', {\n      detail: { value: this.value, rangeEnd: this.rangeEnd },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _getWeekdayNames(): string[] {\n    const names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n    if (this.weekStartsOn === 1) {\n      return [...names.slice(1), names[0]!];\n    }\n    return names;\n  }\n\n  private _getMonthName(): string {\n    return new Date(this._displayYear, this._displayMonth, 1).toLocaleString('default', { month: 'long' });\n  }\n\n  private _getDayClasses(date: Date, isOutside: boolean): string {\n    const classes = ['day'];\n    if (isOutside) classes.push('outside');\n    if (this._isToday(date)) classes.push('today');\n\n    const selected = this._parseDate(this.value);\n    const rangeEnd = this._parseDate(this.rangeEnd);\n\n    if (this.mode === 'range') {\n      if (selected && this._isSameDay(date, selected)) {\n        classes.push(rangeEnd ? 'range-start' : 'selected');\n      } else if (rangeEnd && this._isSameDay(date, rangeEnd)) {\n        classes.push('range-end');\n      } else if (selected && rangeEnd && date > selected && date < rangeEnd) {\n        classes.push('in-range');\n      }\n    } else {\n      if (selected && this._isSameDay(date, selected)) classes.push('selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  override render() {\n    const daysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth);\n    const firstDayOffset = this._getFirstDayOfWeek(this._displayYear, this._displayMonth);\n    const prevDaysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth - 1);\n\n    const cells: Array<{ date: Date; outside: boolean }> = [];\n\n    // Previous month outside days\n    for (let i = firstDayOffset - 1; i >= 0; i--) {\n      const date = new Date(this._displayYear, this._displayMonth - 1, prevDaysInMonth - i);\n      cells.push({ date, outside: true });\n    }\n\n    // Current month days\n    for (let i = 1; i <= daysInMonth; i++) {\n      const date = new Date(this._displayYear, this._displayMonth, i);\n      cells.push({ date, outside: false });\n    }\n\n    // Next month outside days (fill to 42 cells = 6 rows)\n    while (cells.length < 42) {\n      const lastDate = cells[cells.length - 1]!.date;\n      const date = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + 1);\n      cells.push({ date, outside: true });\n    }\n\n    return html`\n      <div class=\"calendar\" role=\"grid\" aria-label=${`${this._getMonthName()} ${this._displayYear}`}>\n        <div class=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous month\" @click=${this._prevMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M9 3L5 7l4 4\"/>\n            </svg>\n          </button>\n          <div class=\"month-year\">${this._getMonthName()} ${this._displayYear}</div>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next month\" @click=${this._nextMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 3l4 4-4 4\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"weekdays\">\n          ${this._getWeekdayNames().map(name => html`<div class=\"weekday\">${name}</div>`)}\n        </div>\n        <div class=\"days\" @keydown=${this._onGridKeydown}>\n          ${cells.map(cell => html`\n            <button\n              class=${this._getDayClasses(cell.date, cell.outside)}\n              role=\"gridcell\"\n              aria-selected=${this._parseDate(this.value) && this._isSameDay(cell.date, this._parseDate(this.value)!) ? 'true' : 'false'}\n              ?disabled=${this._isDisabled(cell.date)}\n              @click=${() => this._selectDate(cell.date)}\n            >${cell.date.getDate()}</button>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-calendar': CgCalendar;\n  }\n}\n"],"names":["CgCalendar","LitElement","d","changed","iso","parts","year","month","day","date","y","m","today","a","b","min","max","e","target","buttons","idx","next","start","names","isOutside","classes","selected","rangeEnd","daysInMonth","firstDayOffset","prevDaysInMonth","cells","i","lastDate","html","name","cell","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * <cg-callout> — Alert/notice with semantic variants.
+ *
+ * Better than OpenUI's Callout:
+ * - Dismissible
+ * - Icon auto-selected by variant (or custom via slot)
+ * - Action slot (button)
+ * - 5 semantic variants
+ */
+export declare class CgCallout extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    title: string;
+    description: string;
+    dismissible: boolean;
+    private _dismissed;
+    private _dismissing;
+    private _dismissTimer;
+    private _iconPaths;
+    disconnectedCallback(): void;
+    private _handleKeydown;
+    private _dismiss;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-callout': CgCallout;
+    }
+}
+//# sourceMappingURL=cg-callout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-callout.d.ts","sourceRoot":"","sources":["../../../src/components/cg-callout/cg-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA8GnB;IAE0B,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAU;IACxE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAC7D,KAAK,SAAM;IACpB,WAAW,SAAM;IACA,WAAW,UAAS;IAExC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,UAAU,CAMhB;IAEO,oBAAoB;IAK7B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,QAAQ;IAUP,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,197 @@
+import { css as v, LitElement as h, nothing as n, html as c } from "lit";
+import { property as o, state as u, customElement as m } from "lit/decorators.js";
+import { h as p, r as f, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (r, a, l, e) => {
+  for (var s = e > 1 ? void 0 : e ? w(a, l) : a, d = r.length - 1, g; d >= 0; d--)
+    (g = r[d]) && (s = (e ? g(a, l, s) : g(s)) || s);
+  return e && s && y(a, l, s), s;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "info", this.rounded = "lg", this.title = "", this.description = "", this.dismissible = !1, this._dismissed = !1, this._dismissing = !1, this._dismissTimer = 0, this._iconPaths = {
+      info: "M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z",
+      success: "M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4",
+      warning: "M12 2L2 22h20L12 2zm0 7v4m0 4h.01",
+      danger: "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z",
+      neutral: "M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z"
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this._dismissTimer);
+  }
+  _handleKeydown(r) {
+    this.dismissible && r.key === "Escape" && (r.preventDefault(), this._dismiss());
+  }
+  _dismiss() {
+    this._dismissing = !0, this.dispatchEvent(new CustomEvent("cg-callout-dismiss", { bubbles: !0, composed: !0 })), this._dismissTimer = window.setTimeout(() => {
+      this._dismissed = !0, this._dismissing = !1, this.setAttribute("hidden", "");
+    }, 250);
+  }
+  render() {
+    if (this._dismissed && !this._dismissing) return n;
+    const r = this._iconPaths[this.variant] ?? this._iconPaths.info;
+    return c`
+      <div class="callout ${this._dismissing ? "dismissing" : ""}" role=${this.variant === "danger" || this.variant === "warning" ? "alert" : "note"} aria-live="polite" @keydown=${this._handleKeydown}>
+        <div class="icon">
+          <slot name="icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="${r}"></path>
+            </svg>
+          </slot>
+        </div>
+        <div class="content">
+          ${this.title ? c`<div class="title">${this.title}</div>` : n}
+          ${this.description ? c`<div class="description">${this.description}</div>` : n}
+          <slot></slot>
+          <slot name="action"></slot>
+        </div>
+        ${this.dismissible ? c`
+          <button class="dismiss" @click=${this._dismiss} aria-label="Dismiss">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <path d="M18 6L6 18M6 6l12 12"></path>
+            </svg>
+          </button>
+        ` : n}
+      </div>
+    `;
+  }
+};
+i.styles = [p, f, b, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([hidden]) { display: none; }
+
+    .callout {
+      transition:
+        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      line-height: var(--cg-line-height-normal);
+    }
+
+    /* Variants — colored border, icon + title colored (softened), description normal */
+    :host([variant="info"]) .callout { border-color: var(--cg-color-message-border-info); }
+    :host([variant="info"]) .icon { color: var(--cg-color-message-icon-info); }
+    :host([variant="info"]) .title { color: var(--cg-color-message-text-info); opacity: 0.85; }
+
+    :host([variant="success"]) .callout { border-color: var(--cg-color-message-border-success); }
+    :host([variant="success"]) .icon { color: var(--cg-color-message-icon-success); }
+    :host([variant="success"]) .title { color: var(--cg-color-message-text-success); opacity: 0.85; }
+
+    :host([variant="warning"]) .callout { border-color: var(--cg-color-message-border-warning); }
+    :host([variant="warning"]) .icon { color: var(--cg-color-message-icon-warning); }
+    :host([variant="warning"]) .title { color: var(--cg-color-message-text-warning); opacity: 0.85; }
+
+    :host([variant="danger"]) .callout { border-color: var(--cg-color-message-border-error); }
+    :host([variant="danger"]) .icon { color: var(--cg-color-message-icon-error); }
+    :host([variant="danger"]) .title { color: var(--cg-color-message-text-error); opacity: 0.85; }
+
+    :host([variant="neutral"]) .icon,
+    :host([variant="neutral"]) .title { color: var(--cg-color-surface-container-text); }
+
+    .icon {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon svg {
+      width: var(--cg-icon-size-150);
+      height: var(--cg-icon-size-150);
+    }
+
+    .content { flex: 1; min-width: 0; }
+
+    .title {
+      font-weight: var(--cg-font-weight-medium);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-tight);
+      letter-spacing: var(--cg-letter-spacing-tight);
+    }
+
+    .title + .description {
+      margin-top: var(--cg-spacing-2);
+    }
+
+    .description {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    ::slotted([slot="action"]) {
+      margin-top: var(--cg-spacing-8);
+    }
+
+    .dismiss {
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      color: currentColor;
+      opacity: 0.5;
+      cursor: pointer;
+      padding: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      display: flex;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dismiss:hover { opacity: 0.8; }
+    .dismiss:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--cg-color-surface-base-background), 0 0 0 4px var(--cg-color-focus-ring);
+    }
+    .dismiss svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
+
+    @keyframes calloutExit {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(-8px); }
+    }
+    .callout.dismissing {
+      animation: calloutExit var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in) forwards;
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .callout { border-radius: 0; }
+    :host([rounded="sm"]) .callout { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .callout { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .callout { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .callout { border-radius: var(--cg-border-radius-full); }
+  `];
+t([
+  o({ reflect: !0 })
+], i.prototype, "variant", 2);
+t([
+  o({ reflect: !0 })
+], i.prototype, "rounded", 2);
+t([
+  o()
+], i.prototype, "title", 2);
+t([
+  o()
+], i.prototype, "description", 2);
+t([
+  o({ type: Boolean })
+], i.prototype, "dismissible", 2);
+t([
+  u()
+], i.prototype, "_dismissed", 2);
+t([
+  u()
+], i.prototype, "_dismissing", 2);
+i = t([
+  m("cg-callout")
+], i);
+export {
+  i as CgCallout
+};
+//# sourceMappingURL=cg-callout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-callout.js","sources":["../../../src/components/cg-callout/cg-callout.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-callout> — Alert/notice with semantic variants.\n *\n * Better than OpenUI's Callout:\n * - Dismissible\n * - Icon auto-selected by variant (or custom via slot)\n * - Action slot (button)\n * - 5 semantic variants\n */\n@customElement('cg-callout')\nexport class CgCallout extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([hidden]) { display: none; }\n\n    .callout {\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    /* Variants — colored border, icon + title colored (softened), description normal */\n    :host([variant=\"info\"]) .callout { border-color: var(--cg-color-message-border-info); }\n    :host([variant=\"info\"]) .icon { color: var(--cg-color-message-icon-info); }\n    :host([variant=\"info\"]) .title { color: var(--cg-color-message-text-info); opacity: 0.85; }\n\n    :host([variant=\"success\"]) .callout { border-color: var(--cg-color-message-border-success); }\n    :host([variant=\"success\"]) .icon { color: var(--cg-color-message-icon-success); }\n    :host([variant=\"success\"]) .title { color: var(--cg-color-message-text-success); opacity: 0.85; }\n\n    :host([variant=\"warning\"]) .callout { border-color: var(--cg-color-message-border-warning); }\n    :host([variant=\"warning\"]) .icon { color: var(--cg-color-message-icon-warning); }\n    :host([variant=\"warning\"]) .title { color: var(--cg-color-message-text-warning); opacity: 0.85; }\n\n    :host([variant=\"danger\"]) .callout { border-color: var(--cg-color-message-border-error); }\n    :host([variant=\"danger\"]) .icon { color: var(--cg-color-message-icon-error); }\n    :host([variant=\"danger\"]) .title { color: var(--cg-color-message-text-error); opacity: 0.85; }\n\n    :host([variant=\"neutral\"]) .icon,\n    :host([variant=\"neutral\"]) .title { color: var(--cg-color-surface-container-text); }\n\n    .icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .icon svg {\n      width: var(--cg-icon-size-150);\n      height: var(--cg-icon-size-150);\n    }\n\n    .content { flex: 1; min-width: 0; }\n\n    .title {\n      font-weight: var(--cg-font-weight-medium);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n\n    .title + .description {\n      margin-top: var(--cg-spacing-2);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    ::slotted([slot=\"action\"]) {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .dismiss {\n      flex-shrink: 0;\n      background: none;\n      border: none;\n      color: currentColor;\n      opacity: 0.5;\n      cursor: pointer;\n      padding: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      display: flex;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss:hover { opacity: 0.8; }\n    .dismiss:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--cg-color-surface-base-background), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .dismiss svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    @keyframes calloutExit {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(-8px); }\n    }\n    .callout.dismissing {\n      animation: calloutExit var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .callout { border-radius: 0; }\n    :host([rounded=\"sm\"]) .callout { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .callout { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .callout { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .callout { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) variant: 'info' | 'success' | 'warning' | 'danger' | 'neutral' = 'info';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() override title = '';\n  @property() description = '';\n  @property({ type: Boolean }) dismissible = false;\n\n  @state() private _dismissed = false;\n  @state() private _dismissing = false;\n\n  private _dismissTimer = 0;\n\n  private _iconPaths: Record<string, string> = {\n    info: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n    success: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4',\n    warning: 'M12 2L2 22h20L12 2zm0 7v4m0 4h.01',\n    danger: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z',\n    neutral: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n  };\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    clearTimeout(this._dismissTimer);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (this.dismissible && e.key === 'Escape') {\n      e.preventDefault();\n      this._dismiss();\n    }\n  }\n\n  private _dismiss() {\n    this._dismissing = true;\n    this.dispatchEvent(new CustomEvent('cg-callout-dismiss', { bubbles: true, composed: true }));\n    this._dismissTimer = window.setTimeout(() => {\n      this._dismissed = true;\n      this._dismissing = false;\n      this.setAttribute('hidden', '');\n    }, 250);\n  }\n\n  override render() {\n    if (this._dismissed && !this._dismissing) return nothing;\n\n    const iconPath = this._iconPaths[this.variant] ?? this._iconPaths.info;\n\n    return html`\n      <div class=\"callout ${this._dismissing ? 'dismissing' : ''}\" role=${this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'note'} aria-live=\"polite\" @keydown=${this._handleKeydown}>\n        <div class=\"icon\">\n          <slot name=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"${iconPath}\"></path>\n            </svg>\n          </slot>\n        </div>\n        <div class=\"content\">\n          ${this.title ? html`<div class=\"title\">${this.title}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n          <slot></slot>\n          <slot name=\"action\"></slot>\n        </div>\n        ${this.dismissible ? html`\n          <button class=\"dismiss\" @click=${this._dismiss} aria-label=\"Dismiss\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <path d=\"M18 6L6 18M6 6l12 12\"></path>\n            </svg>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-callout': CgCallout;\n  }\n}\n"],"names":["CgCallout","LitElement","e","nothing","iconPath","html","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}