@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-timeline.js","sources":["../../../src/components/cg-timeline/cg-timeline.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-timeline-event/cg-timeline-event.js';\n\ntype GroupBy = 'none' | 'day' | 'week' | 'month' | 'year';\n\n/**\n * @element cg-timeline\n * Vertical (default) or horizontal sequence of `<cg-timeline-event>`\n * children. The container handles three things automatically as events\n * are added/removed:\n *\n *   1. Marks the final event with `last` so the trailing connector hides.\n *   2. Propagates `direction` so children flip layout for horizontal mode.\n *   3. Groups events by day / week / month / year — when `group-by` is set,\n *      the container reads each child's `date` prop, computes a bucket key,\n *      and stamps the first event of each bucket with a `group-header=`\n *      attribute (e.g. \"Today\", \"Yesterday\", \"Mar 5\", \"March\", \"2024\").\n *      The child then renders that label as a sticky-feel section header\n *      above its dot/body. Headers use Intl, so they respect `locale`.\n *\n * Vertical layout only supports group headers — horizontal timelines are\n * a different UX problem (cluster headers above runs of same-day events\n * would compete with the time-axis); set `group-by=\"none\"` (default) for\n * horizontal.\n *\n * @example\n * ```html\n * <cg-timeline group-by=\"day\" label=\"Patient activity\">\n *   <cg-timeline-event date=\"2026-05-04T09:14\" timestamp=\"09:14\">Checked in</cg-timeline-event>\n *   <cg-timeline-event date=\"2026-05-04T09:30\" timestamp=\"09:30\" variant=\"success\">Consultation</cg-timeline-event>\n *   <cg-timeline-event date=\"2026-05-03T16:20\" timestamp=\"16:20\">Lab results uploaded</cg-timeline-event>\n *   <cg-timeline-event date=\"2026-04-28T11:00\" timestamp=\"Apr 28\">Initial visit</cg-timeline-event>\n * </cg-timeline>\n * <!-- renders headers: Today / Yesterday / Apr 28 -->\n * ```\n *\n * @slot - cg-timeline-event children.\n *\n * @cssprop --cg-component-timeline-event-gap - Gap between events (default 0)\n */\n@customElement('cg-timeline')\nexport class CgTimeline extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n    }\n    .list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-component-timeline-event-gap, 0);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n    :host([direction=\"horizontal\"]) .list {\n      flex-direction: row;\n      align-items: flex-start;\n      overflow-x: auto;\n    }\n  `];\n\n  /** Layout direction. */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Accessible label for the timeline as a whole. */\n  @property() label = 'Timeline';\n\n  /**\n   * Auto-grouping mode. When set, events with a `date` prop are bucketed\n   * and the first event in each bucket gets a `group-header` attribute\n   * with a localized label (Today / Yesterday / weekday / \"Mar 5\" / etc).\n   * Vertical layout only.\n   */\n  @property({ attribute: 'group-by', reflect: true }) groupBy: GroupBy = 'none';\n\n  /** BCP 47 locale for group header formatting. Defaults to the document language. */\n  @property() locale: string | undefined;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('direction') || changed.has('groupBy') || changed.has('locale')) {\n      this._syncChildren();\n    }\n  }\n\n  private _syncChildren(slot?: HTMLSlotElement) {\n    const root = slot ?? this.shadowRoot?.querySelector('slot');\n    if (!root) return;\n    const events = (root as HTMLSlotElement).assignedElements({ flatten: true })\n      .filter(el => el.tagName.toLowerCase() === 'cg-timeline-event');\n\n    const grouping = this.direction === 'vertical' ? this.groupBy : 'none';\n    let prevKey = '';\n\n    events.forEach((el, i) => {\n      // Last + direction always run.\n      if (i === events.length - 1) el.setAttribute('last', '');\n      else el.removeAttribute('last');\n      el.setAttribute('direction', this.direction);\n\n      // Grouping (vertical only).\n      if (grouping === 'none') {\n        el.removeAttribute('group-header');\n        return;\n      }\n      const dateAttr = (el as any).date || el.getAttribute('date') || '';\n      if (!dateAttr) {\n        el.removeAttribute('group-header');\n        return;\n      }\n      const date = new Date(dateAttr);\n      if (Number.isNaN(date.valueOf())) {\n        el.removeAttribute('group-header');\n        return;\n      }\n      const key = this._groupKey(date, grouping);\n      if (key !== prevKey) {\n        el.setAttribute('group-header', this._formatLabel(date, grouping));\n        prevKey = key;\n      } else {\n        el.removeAttribute('group-header');\n      }\n    });\n  }\n\n  /** Stable bucket key for a date under a given grouping unit. */\n  private _groupKey(date: Date, by: Exclude<GroupBy, 'none'>): string {\n    if (by === 'year') return `Y:${date.getFullYear()}`;\n    if (by === 'month') return `M:${date.getFullYear()}-${date.getMonth()}`;\n    if (by === 'week') {\n      // ISO week: Monday-start. Anchor to the Monday of the date's week.\n      const d = new Date(date);\n      d.setHours(0, 0, 0, 0);\n      const day = d.getDay() || 7;\n      d.setDate(d.getDate() - day + 1);\n      return `W:${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;\n    }\n    // day\n    return `D:${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n  }\n\n  /** Localized header label using Intl. */\n  private _formatLabel(date: Date, by: Exclude<GroupBy, 'none'>): string {\n    const locale = this.locale ?? (typeof document !== 'undefined' ? document.documentElement.lang || undefined : undefined);\n    const now = new Date();\n    const sameYear = date.getFullYear() === now.getFullYear();\n\n    if (by === 'day') {\n      const today = this._stripTime(now);\n      const target = this._stripTime(date);\n      const diffDays = Math.round((today.getTime() - target.getTime()) / 86_400_000);\n      if (diffDays === 0) return 'Today';\n      if (diffDays === 1) return 'Yesterday';\n      if (diffDays === -1) return 'Tomorrow';\n      if (diffDays > 1 && diffDays < 7) return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);\n      return new Intl.DateTimeFormat(locale, sameYear\n        ? { month: 'short', day: 'numeric' }\n        : { month: 'short', day: 'numeric', year: 'numeric' }\n      ).format(date);\n    }\n\n    if (by === 'week') {\n      const monday = this._mondayOf(date);\n      const thisMonday = this._mondayOf(now);\n      const diffWeeks = Math.round((thisMonday.getTime() - monday.getTime()) / (7 * 86_400_000));\n      if (diffWeeks === 0) return 'This week';\n      if (diffWeeks === 1) return 'Last week';\n      if (diffWeeks === -1) return 'Next week';\n      const wkLabel = new Intl.DateTimeFormat(locale, sameYear\n        ? { month: 'short', day: 'numeric' }\n        : { month: 'short', day: 'numeric', year: 'numeric' }\n      ).format(monday);\n      return `Week of ${wkLabel}`;\n    }\n\n    if (by === 'month') {\n      const sameMonth = sameYear && date.getMonth() === now.getMonth();\n      if (sameMonth) return 'This month';\n      const prev = new Date(now.getFullYear(), now.getMonth() - 1, 1);\n      if (date.getFullYear() === prev.getFullYear() && date.getMonth() === prev.getMonth()) return 'Last month';\n      return new Intl.DateTimeFormat(locale, sameYear ? { month: 'long' } : { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    // year\n    if (sameYear) return 'This year';\n    if (date.getFullYear() === now.getFullYear() - 1) return 'Last year';\n    return new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(date);\n  }\n\n  private _stripTime(d: Date): Date {\n    const x = new Date(d);\n    x.setHours(0, 0, 0, 0);\n    return x;\n  }\n\n  private _mondayOf(d: Date): Date {\n    const x = this._stripTime(d);\n    const day = x.getDay() || 7;\n    x.setDate(x.getDate() - day + 1);\n    return x;\n  }\n\n  private _onSlotChange = (e: Event): void => {\n    this._syncChildren(e.target as HTMLSlotElement);\n  };\n\n  override render() {\n    return html`\n      <ol class=\"list\" role=\"list\" aria-label=${this.label}>\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </ol>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-timeline': CgTimeline;\n  }\n}\n"],"names":["CgTimeline","LitElement","e","changed","slot","root","events","el","grouping","prevKey","i","dateAttr","date","key","by","d","day","locale","now","sameYear","today","target","diffDays","monday","thisMonday","diffWeeks","prev","x","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-timeline-event/cg-timeline-event.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-timeline-event
+ * One entry in a `<cg-timeline>` — renders the dot, the connecting line,
+ * an optional timestamp, and the event content. Stack multiple inside a
+ * `<cg-timeline>` parent.
+ *
+ * Variants tint the dot for status (success/warning/error/info/accent).
+ * The `default` variant renders a hollow ring (modern, more subtle than
+ * a solid grey blob). The parent `<cg-timeline>` sets the `last` attr
+ * on the final event to suppress its trailing connector, and propagates
+ * its `direction` so horizontal mode just works.
+ *
+ * @example
+ * ```html
+ * <cg-timeline-event timestamp="09:14" variant="success">
+ *   <strong>Consultation completed</strong>
+ *   <p>Notes synced to record.</p>
+ * </cg-timeline-event>
+ * ```
+ *
+ * @slot - The event body content.
+ * @slot icon - Custom dot icon. Falls back to a token-colored circle.
+ * @slot timestamp - Custom timestamp markup. Falls back to the `timestamp` prop.
+ *
+ * @cssprop --cg-component-timeline-dot-size - Dot diameter (default 12px)
+ * @cssprop --cg-component-timeline-line-width - Connector thickness (default 2px)
+ */
+export declare class CgTimelineEvent extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Display string for the timestamp slot's fallback. */
+    timestamp: string;
+    /** Status tint for the dot. */
+    variant: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+    /** When true, suppresses the trailing connector line and the body's bottom padding. Set automatically by <cg-timeline>. */
+    last: boolean;
+    /** Layout direction. Set automatically by <cg-timeline> from its own direction prop. */
+    direction: 'vertical' | 'horizontal';
+    /**
+     * Parseable date for grouping, separate from the display `timestamp`.
+     * Accepts an ISO string, RFC 2822 string, or anything `new Date()` parses.
+     * The parent <cg-timeline group-by=...> reads this and computes the
+     * bucket; if absent, the event is not grouped.
+     */
+    date: string;
+    /**
+     * Group section label set by the parent <cg-timeline> when this event
+     * is the first in its bucket (Today / Yesterday / "Mar 5" / "March" / etc).
+     * Consumers don't set this manually — let the parent's group-by drive it.
+     */
+    groupHeader: string;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-timeline-event': CgTimelineEvent;
+    }
+}
+//# sourceMappingURL=cg-timeline-event.d.ts.map

package/dist/components/cg-timeline-event/cg-timeline-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-timeline-event.d.ts","sourceRoot":"","sources":["../../../src/components/cg-timeline-event/cg-timeline-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAwInB;IAEH,wDAAwD;IAC5C,SAAS,SAAM;IAE3B,+BAA+B;IACF,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAa;IAElH,2HAA2H;IAC/E,IAAI,UAAS;IAEzD,wFAAwF;IAC3D,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/E;;;;;OAKG;IACS,IAAI,SAAM;IAEtB;;;;OAIG;IACqD,WAAW,SAAM;IAEhE,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/cg-timeline-event/cg-timeline-event.js

@@ -0,0 +1,190 @@
+import { css as p, LitElement as h, nothing as g, html as c } from "lit";
+import { property as r, customElement as u } from "lit/decorators.js";
+import { h as m, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, a, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? b(a, n) : a, s = d.length - 1, l; s >= 0; s--)
+    (l = d[s]) && (e = (i ? l(a, n, e) : l(e)) || e);
+  return i && e && f(a, n, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.timestamp = "", this.variant = "default", this.last = !1, this.direction = "vertical", this.date = "", this.groupHeader = "";
+  }
+  render() {
+    return c`
+      ${this.groupHeader ? c`<div class="group-header" role="heading" aria-level="3">${this.groupHeader}</div>` : g}
+      <div class="marker" aria-hidden="true">
+        <span class="dot"><slot name="icon"></slot></span>
+        <span class="line"></span>
+      </div>
+      <div class="body">
+        ${this.timestamp || this.querySelector('[slot="timestamp"]') ? c`
+          <span class="timestamp"><slot name="timestamp">${this.timestamp}</slot></span>
+        ` : g}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+t.styles = [m, v, p`
+    :host {
+      --_dot-size: var(--cg-component-timeline-dot-size, var(--cg-spacing-12));
+      --_line-width: var(--cg-component-timeline-line-width, var(--cg-border-width-100));
+      --_dot-color: var(--cg-color-surface-cards-border);
+      --_line-color: var(--cg-color-surface-cards-border);
+      display: grid;
+      grid-template-columns: var(--_dot-size) 1fr;
+      column-gap: var(--cg-spacing-12);
+      position: relative;
+    }
+
+    /* Group header — rendered when the parent cg-timeline (with group-by)
+       stamps a group-header attribute. Spans both columns above the
+       dot/body row. */
+    .group-header {
+      grid-column: 1 / -1;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      padding-top: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-8);
+    }
+    /* First event in the timeline shouldn't have a top gap above its
+       header (the timeline already has its own top edge). */
+    :host(:first-of-type) .group-header { padding-top: 0; }
+
+    /* ── Vertical (default) ──
+       Dot in left column; body in right column; connector line under
+       the dot extending down to the next event. */
+    .marker {
+      grid-column: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: var(--cg-spacing-4);
+    }
+
+    .dot {
+      box-sizing: border-box;
+      width: var(--_dot-size);
+      height: var(--_dot-size);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--_dot-color);
+      /* 4px halo of surface-bg masks the connector line where it crosses
+         the dot, so the line looks continuous between events. */
+      box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-color-surface-base-background);
+      position: relative;
+      z-index: 1;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    /* Default variant = hollow ring. Inset shadow draws the ring without
+       growing the box; outer shadow keeps the line-masking halo. */
+    :host(:not([variant])) .dot,
+    :host([variant="default"]) .dot {
+      background: transparent;
+      box-shadow:
+        inset 0 0 0 var(--cg-border-width-100) var(--_dot-color),
+        0 0 0 var(--cg-spacing-4) var(--cg-color-surface-base-background);
+    }
+
+    .line {
+      flex: 1 1 auto;
+      width: var(--_line-width);
+      background: var(--_line-color);
+      margin-top: var(--cg-spacing-4);
+    }
+    :host([last]) .line { display: none; }
+
+    .body {
+      grid-column: 2;
+      padding-bottom: var(--cg-spacing-16);
+      min-width: 0;
+    }
+    :host([last]) .body { padding-bottom: 0; }
+
+    .timestamp {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: var(--cg-line-height-snug);
+      margin-bottom: var(--cg-spacing-4);
+      display: block;
+    }
+
+    /* ── Horizontal — set by parent <cg-timeline direction="horizontal"> ──
+       Marker on top (dot + horizontal line), body below the marker. */
+    :host([direction="horizontal"]) {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: var(--_dot-size) 1fr;
+      column-gap: 0;
+      row-gap: var(--cg-spacing-8);
+      flex: 1 1 auto;
+      min-width: var(--cg-spacing-128);
+      padding-right: var(--cg-spacing-16);
+    }
+    :host([direction="horizontal"]) .marker {
+      grid-row: 1;
+      grid-column: 1;
+      flex-direction: row;
+      align-items: center;
+      padding-top: 0;
+    }
+    :host([direction="horizontal"]) .line {
+      width: auto;
+      height: var(--_line-width);
+      flex: 1 1 auto;
+      margin-top: 0;
+      margin-left: var(--cg-spacing-4);
+    }
+    :host([direction="horizontal"]) .body {
+      grid-row: 2;
+      grid-column: 1;
+      padding-bottom: 0;
+    }
+    :host([direction="horizontal"][last]) {
+      flex: 0 0 auto;
+      padding-right: 0;
+      min-width: 0;
+    }
+    :host([direction="horizontal"][last]) .line { display: none; }
+
+    /* ── Variant tints ──
+       Use status text-default tokens — they resolve to solid colors in
+       both themes (green-700/green-400 etc.) and are the established
+       pattern for dot/icon tinting in this system. */
+    :host([variant="success"]) { --_dot-color: var(--cg-color-status-success-text-default); }
+    :host([variant="warning"]) { --_dot-color: var(--cg-color-status-warning-text-default); }
+    :host([variant="error"])   { --_dot-color: var(--cg-color-status-error-text-default); }
+    :host([variant="info"])    { --_dot-color: var(--cg-color-status-info-text-default); }
+    :host([variant="accent"])  { --_dot-color: var(--cg-color-action-primary-background-default); }
+  `];
+o([
+  r()
+], t.prototype, "timestamp", 2);
+o([
+  r({ reflect: !0 })
+], t.prototype, "variant", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "last", 2);
+o([
+  r({ reflect: !0 })
+], t.prototype, "direction", 2);
+o([
+  r()
+], t.prototype, "date", 2);
+o([
+  r({ attribute: "group-header", reflect: !0 })
+], t.prototype, "groupHeader", 2);
+t = o([
+  u("cg-timeline-event")
+], t);
+export {
+  t as CgTimelineEvent
+};
+//# sourceMappingURL=cg-timeline-event.js.map

package/dist/components/cg-timeline-event/cg-timeline-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-timeline-event.js","sources":["../../../src/components/cg-timeline-event/cg-timeline-event.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-timeline-event\n * One entry in a `<cg-timeline>` — renders the dot, the connecting line,\n * an optional timestamp, and the event content. Stack multiple inside a\n * `<cg-timeline>` parent.\n *\n * Variants tint the dot for status (success/warning/error/info/accent).\n * The `default` variant renders a hollow ring (modern, more subtle than\n * a solid grey blob). The parent `<cg-timeline>` sets the `last` attr\n * on the final event to suppress its trailing connector, and propagates\n * its `direction` so horizontal mode just works.\n *\n * @example\n * ```html\n * <cg-timeline-event timestamp=\"09:14\" variant=\"success\">\n *   <strong>Consultation completed</strong>\n *   <p>Notes synced to record.</p>\n * </cg-timeline-event>\n * ```\n *\n * @slot - The event body content.\n * @slot icon - Custom dot icon. Falls back to a token-colored circle.\n * @slot timestamp - Custom timestamp markup. Falls back to the `timestamp` prop.\n *\n * @cssprop --cg-component-timeline-dot-size - Dot diameter (default 12px)\n * @cssprop --cg-component-timeline-line-width - Connector thickness (default 2px)\n */\n@customElement('cg-timeline-event')\nexport class CgTimelineEvent extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      --_dot-size: var(--cg-component-timeline-dot-size, var(--cg-spacing-12));\n      --_line-width: var(--cg-component-timeline-line-width, var(--cg-border-width-100));\n      --_dot-color: var(--cg-color-surface-cards-border);\n      --_line-color: var(--cg-color-surface-cards-border);\n      display: grid;\n      grid-template-columns: var(--_dot-size) 1fr;\n      column-gap: var(--cg-spacing-12);\n      position: relative;\n    }\n\n    /* Group header — rendered when the parent cg-timeline (with group-by)\n       stamps a group-header attribute. Spans both columns above the\n       dot/body row. */\n    .group-header {\n      grid-column: 1 / -1;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      padding-top: var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-8);\n    }\n    /* First event in the timeline shouldn't have a top gap above its\n       header (the timeline already has its own top edge). */\n    :host(:first-of-type) .group-header { padding-top: 0; }\n\n    /* ── Vertical (default) ──\n       Dot in left column; body in right column; connector line under\n       the dot extending down to the next event. */\n    .marker {\n      grid-column: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding-top: var(--cg-spacing-4);\n    }\n\n    .dot {\n      box-sizing: border-box;\n      width: var(--_dot-size);\n      height: var(--_dot-size);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--_dot-color);\n      /* 4px halo of surface-bg masks the connector line where it crosses\n         the dot, so the line looks continuous between events. */\n      box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-color-surface-base-background);\n      position: relative;\n      z-index: 1;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    /* Default variant = hollow ring. Inset shadow draws the ring without\n       growing the box; outer shadow keeps the line-masking halo. */\n    :host(:not([variant])) .dot,\n    :host([variant=\"default\"]) .dot {\n      background: transparent;\n      box-shadow:\n        inset 0 0 0 var(--cg-border-width-100) var(--_dot-color),\n        0 0 0 var(--cg-spacing-4) var(--cg-color-surface-base-background);\n    }\n\n    .line {\n      flex: 1 1 auto;\n      width: var(--_line-width);\n      background: var(--_line-color);\n      margin-top: var(--cg-spacing-4);\n    }\n    :host([last]) .line { display: none; }\n\n    .body {\n      grid-column: 2;\n      padding-bottom: var(--cg-spacing-16);\n      min-width: 0;\n    }\n    :host([last]) .body { padding-bottom: 0; }\n\n    .timestamp {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-snug);\n      margin-bottom: var(--cg-spacing-4);\n      display: block;\n    }\n\n    /* ── Horizontal — set by parent <cg-timeline direction=\"horizontal\"> ──\n       Marker on top (dot + horizontal line), body below the marker. */\n    :host([direction=\"horizontal\"]) {\n      display: grid;\n      grid-template-columns: 1fr;\n      grid-template-rows: var(--_dot-size) 1fr;\n      column-gap: 0;\n      row-gap: var(--cg-spacing-8);\n      flex: 1 1 auto;\n      min-width: var(--cg-spacing-128);\n      padding-right: var(--cg-spacing-16);\n    }\n    :host([direction=\"horizontal\"]) .marker {\n      grid-row: 1;\n      grid-column: 1;\n      flex-direction: row;\n      align-items: center;\n      padding-top: 0;\n    }\n    :host([direction=\"horizontal\"]) .line {\n      width: auto;\n      height: var(--_line-width);\n      flex: 1 1 auto;\n      margin-top: 0;\n      margin-left: var(--cg-spacing-4);\n    }\n    :host([direction=\"horizontal\"]) .body {\n      grid-row: 2;\n      grid-column: 1;\n      padding-bottom: 0;\n    }\n    :host([direction=\"horizontal\"][last]) {\n      flex: 0 0 auto;\n      padding-right: 0;\n      min-width: 0;\n    }\n    :host([direction=\"horizontal\"][last]) .line { display: none; }\n\n    /* ── Variant tints ──\n       Use status text-default tokens — they resolve to solid colors in\n       both themes (green-700/green-400 etc.) and are the established\n       pattern for dot/icon tinting in this system. */\n    :host([variant=\"success\"]) { --_dot-color: var(--cg-color-status-success-text-default); }\n    :host([variant=\"warning\"]) { --_dot-color: var(--cg-color-status-warning-text-default); }\n    :host([variant=\"error\"])   { --_dot-color: var(--cg-color-status-error-text-default); }\n    :host([variant=\"info\"])    { --_dot-color: var(--cg-color-status-info-text-default); }\n    :host([variant=\"accent\"])  { --_dot-color: var(--cg-color-action-primary-background-default); }\n  `];\n\n  /** Display string for the timestamp slot's fallback. */\n  @property() timestamp = '';\n\n  /** Status tint for the dot. */\n  @property({ reflect: true }) variant: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent' = 'default';\n\n  /** When true, suppresses the trailing connector line and the body's bottom padding. Set automatically by <cg-timeline>. */\n  @property({ type: Boolean, reflect: true }) last = false;\n\n  /** Layout direction. Set automatically by <cg-timeline> from its own direction prop. */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Parseable date for grouping, separate from the display `timestamp`.\n   * Accepts an ISO string, RFC 2822 string, or anything `new Date()` parses.\n   * The parent <cg-timeline group-by=...> reads this and computes the\n   * bucket; if absent, the event is not grouped.\n   */\n  @property() date = '';\n\n  /**\n   * Group section label set by the parent <cg-timeline> when this event\n   * is the first in its bucket (Today / Yesterday / \"Mar 5\" / \"March\" / etc).\n   * Consumers don't set this manually — let the parent's group-by drive it.\n   */\n  @property({ attribute: 'group-header', reflect: true }) groupHeader = '';\n\n  override render() {\n    return html`\n      ${this.groupHeader ? html`<div class=\"group-header\" role=\"heading\" aria-level=\"3\">${this.groupHeader}</div>` : nothing}\n      <div class=\"marker\" aria-hidden=\"true\">\n        <span class=\"dot\"><slot name=\"icon\"></slot></span>\n        <span class=\"line\"></span>\n      </div>\n      <div class=\"body\">\n        ${this.timestamp || this.querySelector('[slot=\"timestamp\"]') ? html`\n          <span class=\"timestamp\"><slot name=\"timestamp\">${this.timestamp}</slot></span>\n        ` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-timeline-event': CgTimelineEvent;\n  }\n}\n"],"names":["CgTimelineEvent","LitElement","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAgCO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GA4IO,KAAA,YAAY,IAGK,KAAA,UAA2E,WAG5D,KAAA,OAAO,IAGtB,KAAA,YAAuC,YAQxD,KAAA,OAAO,IAOqC,KAAA,cAAc;AAAA,EAAA;AAAA,EAE7D,SAAS;AAChB,WAAOC;AAAA,QACH,KAAK,cAAcA,4DAA+D,KAAK,WAAW,WAAWC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMlH,KAAK,aAAa,KAAK,cAAc,oBAAoB,IAAID;AAAA,2DACZ,KAAK,SAAS;AAAA,YAC7DC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AArLaH,EACK,SAAS,CAACI,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwInD;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA5ICR,EA4IC,WAAA,aAAA,CAAA;AAGiBO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA/IhBR,EA+IkB,WAAA,WAAA,CAAA;AAGeO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlJ/BR,EAkJiC,WAAA,QAAA,CAAA;AAGfO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GArJhBR,EAqJkB,WAAA,aAAA,CAAA;AAQjBO,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7JCR,EA6JC,WAAA,QAAA,CAAA;AAO4CO,EAAA;AAAA,EAAvDC,EAAS,EAAE,WAAW,gBAAgB,SAAS,IAAM;AAAA,GApK3CR,EAoK6C,WAAA,eAAA,CAAA;AApK7CA,IAANO,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBT,CAAA;"}

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+export type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'ai';
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        id?: string;
+    };
+}
+/**
+ * @element cg-toaster
+ * Manages a stack of auto-dismissing toast notifications.
+ *
+ * @fires {CustomEvent<{id:string}>} cg-toaster-dismiss
+ * @fires {CustomEvent<{id:string,actionId?:string}>} cg-toaster-action
+ */
+export declare class CgToaster extends LitElement {
+    static styles: import('lit').CSSResult[];
+    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    max: number;
+    private _toasts;
+    show(opts: ToastOptions): string;
+    dismiss(id: string): void;
+    clear(): void;
+    disconnectedCallback(): void;
+    private _handleAction;
+    /**
+     * Per-variant icon paths. `default` gets no icon (renders without one).
+     * `ai` keeps its sparkle (uses `fill` instead of `stroke`).
+     * info/success/warning/error use the same paths as cg-callout for visual
+     * consistency across the design system.
+     */
+    private _iconFor;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-toaster': CgToaster;
+    }
+}
+//# sourceMappingURL=cg-toaster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toaster.d.ts","sourceRoot":"","sources":["../../../src/components/cg-toaster/cg-toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;AAEvF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAOD;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA4GnB;IAE0B,QAAQ,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,eAAe,CAAkB;IACvH,GAAG,SAAK;IAE3B,OAAO,CAAC,OAAO,CAAoB;IAErC,IAAI,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM;IAkBhC,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IASzB,KAAK,IAAI,IAAI;IAKX,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,aAAa;IAQrB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAiBP,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,226 @@
+import { css as m, LitElement as f, svg as c, nothing as g, html as l } from "lit";
+import { property as u, state as p, customElement as v } from "lit/decorators.js";
+import { r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (t, r, a, s) => {
+  for (var o = s > 1 ? void 0 : s ? w(r, a) : r, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (o = (s ? i(r, a, o) : i(o)) || o);
+  return s && o && b(r, a, o), o;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.position = "bottom-right", this.max = 5, this._toasts = [];
+  }
+  show(t) {
+    const r = `t_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`, a = t.duration ?? 5e3, s = { ...t, id: r, timer: null };
+    let o = [...this._toasts, s];
+    if (o.length > this.max) {
+      const n = o.slice(0, o.length - this.max);
+      for (const i of n) i.timer && clearTimeout(i.timer);
+      o = o.slice(o.length - this.max);
+    }
+    return this._toasts = o, a > 0 && (s.timer = window.setTimeout(() => this.dismiss(r), a)), r;
+  }
+  dismiss(t) {
+    const r = this._toasts.find((a) => a.id === t);
+    r?.timer && clearTimeout(r.timer), this._toasts = this._toasts.filter((a) => a.id !== t), this.dispatchEvent(new CustomEvent("cg-toaster-dismiss", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: t }
+    }));
+  }
+  clear() {
+    for (const t of this._toasts) t.timer && clearTimeout(t.timer);
+    this._toasts = [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const t of this._toasts) t.timer && clearTimeout(t.timer);
+  }
+  _handleAction(t) {
+    this.dispatchEvent(new CustomEvent("cg-toaster-action", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: t.id, actionId: t.action?.id }
+    })), this.dismiss(t.id);
+  }
+  /**
+   * Per-variant icon paths. `default` gets no icon (renders without one).
+   * `ai` keeps its sparkle (uses `fill` instead of `stroke`).
+   * info/success/warning/error use the same paths as cg-callout for visual
+   * consistency across the design system.
+   */
+  _iconFor(t) {
+    switch (t) {
+      case "success":
+        return c`<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4" />`;
+      case "warning":
+        return c`<path d="M12 2L2 22h20L12 2zm0 7v4m0 4h.01" />`;
+      case "error":
+        return c`<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z" />`;
+      case "info":
+        return c`<path d="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" />`;
+      case "ai":
+        return c`<path d="M12 2l2.09 6.26L20 10l-5.91 1.74L12 18l-2.09-6.26L4 10l5.91-1.74L12 2z" />`;
+      default:
+        return null;
+    }
+  }
+  render() {
+    return l`
+      <div role="region" aria-live="polite" aria-label="Notifications" style="display: contents;">
+        ${this._toasts.map((t) => {
+      const r = this._iconFor(t.variant), a = t.variant === "ai";
+      return l`
+          <div class="toast ${t.variant ?? "default"}" role="status">
+            ${r ? l`
+              <svg
+                class="toast-icon"
+                viewBox="0 0 24 24"
+                fill=${a ? "currentColor" : "none"}
+                stroke=${a ? "none" : "currentColor"}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >${r}</svg>
+            ` : g}
+            <div class="toast-body">
+              <div class="toast-title">${t.title}</div>
+              ${t.description ? l`<div class="toast-desc">${t.description}</div>` : g}
+            </div>
+            ${t.action ? l`
+              <button class="toast-action" @click=${() => this._handleAction(t)}>${t.action.label}</button>
+            ` : g}
+            <button class="toast-close" aria-label="Dismiss" @click=${() => this.dismiss(t.id)}>×</button>
+          </div>
+        `;
+    })}
+      </div>
+    `;
+  }
+};
+e.styles = [h, m`
+    :host {
+      position: fixed;
+      z-index: var(--cg-z-index-top);
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-component-toaster-gap);
+      padding: var(--cg-component-toaster-region-padding);
+      font-family: var(--cg-font-family-primary);
+      max-width: min(var(--cg-component-toaster-max-width), calc(100vw - var(--cg-spacing-32)));
+    }
+    :host([position="top-right"]) { top: 0; right: 0; }
+    :host([position="top-left"]) { top: 0; left: 0; }
+    :host([position="bottom-right"]) { bottom: 0; right: 0; }
+    :host([position="bottom-left"]) { bottom: 0; left: 0; }
+    :host([position="top-center"]) { top: 0; left: 50%; transform: translateX(-50%); }
+    :host([position="bottom-center"]) { bottom: 0; left: 50%; transform: translateX(-50%); }
+
+    .toast {
+      pointer-events: auto;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      min-width: var(--cg-component-toaster-min-width);
+      padding: var(--cg-spacing-16) var(--cg-spacing-16);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-border-radius-150);
+      color: var(--cg-color-surface-container-text);
+      box-shadow: var(--cg-shadow-elevation-lg);
+      animation: toast-in var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+      transform-origin: center;
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    /* Stack effect: non-last toasts scale down subtly */
+    .toast:not(:last-child) {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+    :host([position^="top"]) .toast {
+      animation-name: toast-in-top;
+    }
+    @keyframes toast-in {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-16)) scale(0.96); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes toast-in-top {
+      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-16))) scale(0.96); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .toast.success { border-color: var(--cg-color-status-success-border-default); }
+    .toast.warning { border-color: var(--cg-color-status-warning-border-default); }
+    .toast.error { border-color: var(--cg-color-status-error-border-default); }
+    .toast.info { border-color: var(--cg-color-status-info-border-default); }
+    .toast.ai {
+      border-left: var(--cg-border-width-200) solid var(--cg-color-action-primary-background-default);
+    }
+
+    /* Status icon — colored per variant to match the border + give the toast
+       a glanceable status indicator (success, warning, error, info, ai). */
+    .toast-icon {
+      flex-shrink: 0;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      margin-top: var(--cg-spacing-2);
+    }
+    .toast.success .toast-icon { color: var(--cg-color-status-success-text-default); }
+    .toast.warning .toast-icon { color: var(--cg-color-status-warning-text-default); }
+    .toast.error .toast-icon { color: var(--cg-color-status-error-text-default); }
+    .toast.info .toast-icon { color: var(--cg-color-status-info-text-default); }
+    .toast.ai .toast-icon { color: var(--cg-color-action-primary-background-default); }
+
+    .toast-body {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+    }
+    .toast-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .toast-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .toast-action, .toast-close {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      padding: var(--cg-spacing-6) var(--cg-spacing-10);
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .toast-action:hover, .toast-close:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .toast-close {
+      color: var(--cg-color-surface-container-outlined);
+    }
+  `];
+d([
+  u({ reflect: !0 })
+], e.prototype, "position", 2);
+d([
+  u({ type: Number })
+], e.prototype, "max", 2);
+d([
+  p()
+], e.prototype, "_toasts", 2);
+e = d([
+  v("cg-toaster")
+], e);
+export {
+  e as CgToaster
+};
+//# sourceMappingURL=cg-toaster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toaster.js","sources":["../../../src/components/cg-toaster/cg-toaster.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { reducedMotion } from '../../styles/index.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'ai';\n\nexport interface ToastOptions {\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  duration?: number;\n  action?: { label: string; id?: string };\n}\n\ninterface ToastEntry extends ToastOptions {\n  id: string;\n  timer: number | null;\n}\n\n/**\n * @element cg-toaster\n * Manages a stack of auto-dismissing toast notifications.\n *\n * @fires {CustomEvent<{id:string}>} cg-toaster-dismiss\n * @fires {CustomEvent<{id:string,actionId?:string}>} cg-toaster-action\n */\n@customElement('cg-toaster')\nexport class CgToaster extends LitElement {\n  static override styles = [reducedMotion, css`\n    :host {\n      position: fixed;\n      z-index: var(--cg-z-index-top);\n      pointer-events: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-component-toaster-gap);\n      padding: var(--cg-component-toaster-region-padding);\n      font-family: var(--cg-font-family-primary);\n      max-width: min(var(--cg-component-toaster-max-width), calc(100vw - var(--cg-spacing-32)));\n    }\n    :host([position=\"top-right\"]) { top: 0; right: 0; }\n    :host([position=\"top-left\"]) { top: 0; left: 0; }\n    :host([position=\"bottom-right\"]) { bottom: 0; right: 0; }\n    :host([position=\"bottom-left\"]) { bottom: 0; left: 0; }\n    :host([position=\"top-center\"]) { top: 0; left: 50%; transform: translateX(-50%); }\n    :host([position=\"bottom-center\"]) { bottom: 0; left: 50%; transform: translateX(-50%); }\n\n    .toast {\n      pointer-events: auto;\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      min-width: var(--cg-component-toaster-min-width);\n      padding: var(--cg-spacing-16) var(--cg-spacing-16);\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-border-radius-150);\n      color: var(--cg-color-surface-container-text);\n      box-shadow: var(--cg-shadow-elevation-lg);\n      animation: toast-in var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n      transform-origin: center;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    /* Stack effect: non-last toasts scale down subtly */\n    .toast:not(:last-child) {\n      transform: scale(0.98);\n      opacity: 0.9;\n    }\n    :host([position^=\"top\"]) .toast {\n      animation-name: toast-in-top;\n    }\n    @keyframes toast-in {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-16)) scale(0.96); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    @keyframes toast-in-top {\n      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-16))) scale(0.96); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .toast.success { border-color: var(--cg-color-status-success-border-default); }\n    .toast.warning { border-color: var(--cg-color-status-warning-border-default); }\n    .toast.error { border-color: var(--cg-color-status-error-border-default); }\n    .toast.info { border-color: var(--cg-color-status-info-border-default); }\n    .toast.ai {\n      border-left: var(--cg-border-width-200) solid var(--cg-color-action-primary-background-default);\n    }\n\n    /* Status icon — colored per variant to match the border + give the toast\n       a glanceable status indicator (success, warning, error, info, ai). */\n    .toast-icon {\n      flex-shrink: 0;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      margin-top: var(--cg-spacing-2);\n    }\n    .toast.success .toast-icon { color: var(--cg-color-status-success-text-default); }\n    .toast.warning .toast-icon { color: var(--cg-color-status-warning-text-default); }\n    .toast.error .toast-icon { color: var(--cg-color-status-error-text-default); }\n    .toast.info .toast-icon { color: var(--cg-color-status-info-text-default); }\n    .toast.ai .toast-icon { color: var(--cg-color-action-primary-background-default); }\n\n    .toast-body {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n    .toast-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .toast-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .toast-action, .toast-close {\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      padding: var(--cg-spacing-6) var(--cg-spacing-10);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toast-action:hover, .toast-close:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .toast-close {\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  @property({ reflect: true }) position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' = 'bottom-right';\n  @property({ type: Number }) max = 5;\n\n  @state() private _toasts: ToastEntry[] = [];\n\n  public show(opts: ToastOptions): string {\n    const id = `t_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;\n    const duration = opts.duration ?? 5000;\n    const entry: ToastEntry = { ...opts, id, timer: null };\n    let next = [...this._toasts, entry];\n    if (next.length > this.max) {\n      // Clear timers for dropped toasts so they don't leak.\n      const dropped = next.slice(0, next.length - this.max);\n      for (const t of dropped) if (t.timer) clearTimeout(t.timer);\n      next = next.slice(next.length - this.max);\n    }\n    this._toasts = next;\n    if (duration > 0) {\n      entry.timer = window.setTimeout(() => this.dismiss(id), duration);\n    }\n    return id;\n  }\n\n  public dismiss(id: string): void {\n    const toast = this._toasts.find(t => t.id === id);\n    if (toast?.timer) clearTimeout(toast.timer);\n    this._toasts = this._toasts.filter(t => t.id !== id);\n    this.dispatchEvent(new CustomEvent('cg-toaster-dismiss', {\n      bubbles: true, composed: true, detail: { id },\n    }));\n  }\n\n  public clear(): void {\n    for (const t of this._toasts) if (t.timer) clearTimeout(t.timer);\n    this._toasts = [];\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    for (const t of this._toasts) if (t.timer) clearTimeout(t.timer);\n  }\n\n  private _handleAction(toast: ToastEntry): void {\n    this.dispatchEvent(new CustomEvent('cg-toaster-action', {\n      bubbles: true, composed: true,\n      detail: { id: toast.id, actionId: toast.action?.id },\n    }));\n    this.dismiss(toast.id);\n  }\n\n  /**\n   * Per-variant icon paths. `default` gets no icon (renders without one).\n   * `ai` keeps its sparkle (uses `fill` instead of `stroke`).\n   * info/success/warning/error use the same paths as cg-callout for visual\n   * consistency across the design system.\n   */\n  private _iconFor(variant: ToastVariant | undefined) {\n    switch (variant) {\n      case 'success':\n        return svg`<path d=\"M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4\" />`;\n      case 'warning':\n        return svg`<path d=\"M12 2L2 22h20L12 2zm0 7v4m0 4h.01\" />`;\n      case 'error':\n        return svg`<path d=\"M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z\" />`;\n      case 'info':\n        return svg`<path d=\"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      case 'ai':\n        return svg`<path d=\"M12 2l2.09 6.26L20 10l-5.91 1.74L12 18l-2.09-6.26L4 10l5.91-1.74L12 2z\" />`;\n      default:\n        return null;\n    }\n  }\n\n  override render() {\n    return html`\n      <div role=\"region\" aria-live=\"polite\" aria-label=\"Notifications\" style=\"display: contents;\">\n        ${this._toasts.map(toast => {\n          const iconPath = this._iconFor(toast.variant);\n          // `ai` is the only variant using fill; the rest use stroke.\n          const useFill = toast.variant === 'ai';\n          return html`\n          <div class=\"toast ${toast.variant ?? 'default'}\" role=\"status\">\n            ${iconPath ? html`\n              <svg\n                class=\"toast-icon\"\n                viewBox=\"0 0 24 24\"\n                fill=${useFill ? 'currentColor' : 'none'}\n                stroke=${useFill ? 'none' : 'currentColor'}\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >${iconPath}</svg>\n            ` : nothing}\n            <div class=\"toast-body\">\n              <div class=\"toast-title\">${toast.title}</div>\n              ${toast.description ? html`<div class=\"toast-desc\">${toast.description}</div>` : nothing}\n            </div>\n            ${toast.action ? html`\n              <button class=\"toast-action\" @click=${() => this._handleAction(toast)}>${toast.action.label}</button>\n            ` : nothing}\n            <button class=\"toast-close\" aria-label=\"Dismiss\" @click=${() => this.dismiss(toast.id)}>×</button>\n          </div>\n        `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-toaster': CgToaster;\n  }\n}\n"],"names":["CgToaster","LitElement","opts","id","duration","entry","next","dropped","t","toast","variant","svg","html","iconPath","useFill","nothing","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-toggle
+ * Single press-state button. Uses aria-pressed for toggle semantics.
+ * Different from cg-switch (on/off) and cg-button (action).
+ *
+ * @example
+ * ```html
+ * <cg-toggle pressed>Bold</cg-toggle>
+ * <cg-toggle variant="outline">Italic</cg-toggle>
+ * ```
+ *
+ * @slot - Toggle content (text, icon)
+ *
+ * @fires {CustomEvent<{pressed: boolean, value: string}>} cg-toggle-change
+ */
+export declare class CgToggle extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    pressed: boolean;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'ghost' | 'outline' | 'solid';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    value: string;
+    name: string;
+    updated(changed: Map<string, unknown>): void;
+    private _toggle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-toggle': CgToggle;
+    }
+}
+//# sourceMappingURL=cg-toggle.d.ts.map