@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-theme-editor/cg-theme-editor.js

@@ -1,341 +0,0 @@
-import { css as f, LitElement as m, nothing as h, html as c } from "lit";
-import { property as d, state as g, customElement as y } from "lit/decorators.js";
-import { h as _, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, r, a, t) => {
-  for (var o = t > 1 ? void 0 : t ? k(r, a) : r, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (o = (t ? l(r, a, o) : l(o)) || o);
-  return t && o && x(r, a, o), o;
-};
-let i = class extends m {
-  constructor() {
-    super(...arguments), this.anchor = "bottom-right", this.collapsed = !1, this.editableTokens = [
-      { name: "--cg-color-action-primary-background-default", label: "Primary", type: "color" },
-      { name: "--cg-color-action-primary-text-default", label: "Primary text", type: "color" },
-      { name: "--cg-color-action-secondary-background-default", label: "Secondary", type: "color" },
-      { name: "--cg-color-accent-text", label: "Accent", type: "color" },
-      { name: "--cg-color-surface-base-background", label: "Surface bg", type: "color" },
-      { name: "--cg-color-surface-base-text", label: "Surface text", type: "color" },
-      { name: "--cg-color-surface-cards-background", label: "Card bg", type: "color" },
-      { name: "--cg-color-surface-cards-border", label: "Border", type: "color" }
-    ], this.themeFromImage = null, this._values = {}, this._showCopied = !1, this._dragover = !1, this._onImagePicked = (e) => {
-      if (!this.themeFromImage) return;
-      const r = new Image(), a = URL.createObjectURL(e);
-      r.onload = () => {
-        const t = document.createElement("canvas");
-        t.width = r.naturalWidth, t.height = r.naturalHeight;
-        const o = t.getContext("2d");
-        if (!o) return;
-        o.drawImage(r, 0, 0);
-        const s = o.getImageData(0, 0, t.width, t.height), l = this.themeFromImage(s), p = { ...this._values };
-        for (const [v, b] of Object.entries(l)) {
-          const u = this._normalizeColor(b);
-          u && (p[v] = u);
-        }
-        this._values = p, this._applyToTheme(), URL.revokeObjectURL(a);
-      }, r.src = a;
-    }, this._onImageInputChange = (e) => {
-      const a = e.target.files?.[0];
-      a && this._onImagePicked(a);
-    }, this._onDragEnter = (e) => {
-      e.preventDefault(), this._dragover = !0;
-    }, this._onDragLeave = () => {
-      this._dragover = !1;
-    }, this._onDrop = (e) => {
-      e.preventDefault(), this._dragover = !1;
-      const r = e.dataTransfer?.files?.[0];
-      r && this._onImagePicked(r);
-    }, this._onReset = () => {
-      const e = this._findThemeTarget();
-      e && (e.tokens = null), this._readInitialValues(), this.dispatchEvent(new CustomEvent("cg-theme-change", {
-        detail: { tokens: {} },
-        bubbles: !0,
-        composed: !0
-      }));
-    }, this._onCopy = () => {
-      const e = JSON.stringify(this._values, null, 2);
-      navigator.clipboard?.writeText && navigator.clipboard.writeText(e), this._showCopied = !0, setTimeout(() => {
-        this._showCopied = !1;
-      }, 1200);
-    }, this._onToggle = () => {
-      this.collapsed = !this.collapsed;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._readInitialValues();
-  }
-  /**
-   * Read the current resolved value of each editable token from the page
-   * so the color inputs start populated. Falls back to "#000000" for
-   * unresolvable values; the input still works once the user picks.
-   */
-  _readInitialValues() {
-    const r = this._findThemeTarget() ?? this, a = window.getComputedStyle(r), t = {};
-    for (const o of this.editableTokens) {
-      const s = a.getPropertyValue(o.name).trim();
-      t[o.name] = this._normalizeColor(s) ?? "#000000";
-    }
-    this._values = t;
-  }
-  /**
-   * Convert any CSS color value into a 6-digit hex form that color inputs
-   * accept. Returns null if the value can't be parsed.
-   */
-  _normalizeColor(e) {
-    if (!e) return null;
-    const r = e.trim().toLowerCase();
-    if (/^#[0-9a-f]{6}$/.test(r)) return r;
-    if (/^#[0-9a-f]{3}$/.test(r)) {
-      const [t, o, s] = r.slice(1);
-      return `#${t}${t}${o}${o}${s}${s}`;
-    }
-    const a = r.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-    if (a) {
-      const t = (o) => parseInt(o, 10).toString(16).padStart(2, "0");
-      return `#${t(a[1])}${t(a[2])}${t(a[3])}`;
-    }
-    return null;
-  }
-  /** Walk up from the host to find a sibling/ancestor `<cg-theme>`. */
-  _findThemeTarget() {
-    let e = this.parentNode;
-    for (; e; ) {
-      if (e instanceof HTMLElement && e.tagName.toLowerCase() === "cg-theme")
-        return e;
-      e = e instanceof ShadowRoot ? e.host : e.parentNode;
-    }
-    return null;
-  }
-  _applyToTheme() {
-    const e = this._findThemeTarget();
-    e && (e.tokens = { ...this._values });
-  }
-  _onColorChange(e, r) {
-    this._values = { ...this._values, [e]: r }, this._applyToTheme(), this.dispatchEvent(new CustomEvent("cg-theme-change", {
-      detail: { tokens: this._values },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  render() {
-    return c`
-      <div class="panel">
-        <header class=${this.collapsed ? "collapsed" : ""} @click=${this._onToggle}>
-          <span class="title">Theme</span>
-          <button class="toggle" type="button" aria-label=${this.collapsed ? "Expand" : "Collapse"}>
-            ${this.collapsed ? "+" : "–"}
-          </button>
-        </header>
-        ${this.collapsed ? h : c`
-          <div class="panel-body">
-            ${this.editableTokens.map((e) => c`
-              <div class="row">
-                <label for=${`tok-${e.name}`}>${e.label}</label>
-                <input
-                  id=${`tok-${e.name}`}
-                  type="color"
-                  .value=${this._values[e.name] ?? "#000000"}
-                  @input=${(r) => this._onColorChange(e.name, r.target.value)}
-                />
-              </div>
-            `)}
-
-            <label
-              class="image-drop ${this._dragover ? "dragover" : ""} ${this.themeFromImage ? "" : "disabled"}"
-              @dragenter=${this._onDragEnter}
-              @dragover=${(e) => e.preventDefault()}
-              @dragleave=${this._onDragLeave}
-              @drop=${this._onDrop}
-            >
-              ${this.themeFromImage ? c`Drop a logo or <strong>browse</strong> to extract a palette.` : c`Image extraction not configured.`}
-              <input
-                type="file"
-                accept="image/*"
-                ?disabled=${!this.themeFromImage}
-                @change=${this._onImageInputChange}
-              />
-            </label>
-
-            <div class="footer">
-              <button type="button" @click=${this._onCopy}>Copy JSON</button>
-              <button type="button" @click=${this._onReset}>Reset</button>
-            </div>
-
-            ${this._showCopied ? c`<span class="copied">Copied</span>` : h}
-          </div>
-        `}
-      </div>
-    `;
-  }
-};
-i.styles = [_, w, f`
-    :host {
-      position: fixed;
-      bottom: var(--cg-spacing-16);
-      right: var(--cg-spacing-16);
-      z-index: var(--cg-z-index-top, 1000);
-      font-family: var(--cg-font-family-primary, system-ui, sans-serif);
-      color: var(--cg-color-surface-base-text);
-    }
-
-    :host([anchor="bottom-left"])  { right: auto; left: var(--cg-spacing-16); }
-    :host([anchor="top-right"])    { bottom: auto; top: var(--cg-spacing-16); }
-    :host([anchor="top-left"])     { right: auto; left: var(--cg-spacing-16); bottom: auto; top: var(--cg-spacing-16); }
-
-    .panel {
-      width: var(--cg-component-theme-editor-width, 280px);
-      background: var(--cg-color-surface-container-background);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-border-radius-150);
-      box-shadow: var(--cg-shadow-elevation-md, 0 8px 24px rgba(0, 0, 0, 0.18));
-      overflow: hidden;
-      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
-    }
-
-    :host([collapsed]) .panel-body { display: none; }
-
-    header {
-      display: flex;
-      align-items: center;
-      gap: var(--cg-spacing-8);
-      padding: var(--cg-spacing-8) var(--cg-spacing-12);
-      background: var(--cg-color-action-tertiary-background-hover);
-      cursor: grab;
-      user-select: none;
-      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-    }
-    header.collapsed { border-bottom: 0; }
-    .title {
-      flex: 1 1 auto;
-      font-size: var(--cg-font-size-xs);
-      font-weight: var(--cg-font-weight-medium);
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      color: var(--cg-color-surface-container-outlined);
-    }
-    .toggle {
-      background: transparent;
-      border: 0;
-      color: var(--cg-color-surface-container-outlined);
-      cursor: pointer;
-      padding: var(--cg-spacing-2) var(--cg-spacing-4);
-      font-size: var(--cg-font-size-xs);
-      border-radius: var(--cg-border-radius-50);
-    }
-    .toggle:hover { color: var(--cg-color-surface-base-text); background: var(--cg-color-action-tertiary-background-hover); }
-
-    .panel-body {
-      padding: var(--cg-spacing-12);
-      display: flex;
-      flex-direction: column;
-      gap: var(--cg-spacing-12);
-      max-height: 60vh;
-      overflow-y: auto;
-    }
-
-    .row {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      align-items: center;
-      gap: var(--cg-spacing-8);
-    }
-    .row label {
-      font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-container-outlined);
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .row input[type="color"] {
-      width: var(--cg-spacing-32);
-      height: var(--cg-spacing-24);
-      padding: 0;
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-border-radius-50);
-      background: transparent;
-      cursor: pointer;
-    }
-
-    .image-drop {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: var(--cg-spacing-16);
-      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-border-radius-100);
-      font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-container-outlined);
-      cursor: pointer;
-      text-align: center;
-      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
-    }
-    .image-drop:hover, .image-drop.dragover {
-      border-color: var(--cg-color-action-primary-border-default);
-      background: var(--cg-color-action-tertiary-background-hover);
-    }
-    .image-drop input { display: none; }
-    .image-drop.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .footer {
-      display: flex;
-      gap: var(--cg-spacing-8);
-      padding-top: var(--cg-spacing-8);
-      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-    }
-    .footer button {
-      flex: 1 1 0;
-      padding: var(--cg-spacing-6) var(--cg-spacing-8);
-      background: transparent;
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-border-radius-50);
-      font: inherit;
-      font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-base-text);
-      cursor: pointer;
-    }
-    .footer button:hover { background: var(--cg-color-action-tertiary-background-hover); }
-
-    .copied {
-      position: absolute;
-      bottom: calc(100% + var(--cg-spacing-4));
-      right: 0;
-      padding: var(--cg-spacing-4) var(--cg-spacing-8);
-      background: var(--cg-color-action-primary-background-default);
-      color: var(--cg-color-action-primary-text-default);
-      border-radius: var(--cg-border-radius-50);
-      font-size: var(--cg-font-size-xs);
-      pointer-events: none;
-    }
-  `];
-n([
-  d({ reflect: !0 })
-], i.prototype, "anchor", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "collapsed", 2);
-n([
-  d({ attribute: !1 })
-], i.prototype, "editableTokens", 2);
-n([
-  d({ attribute: !1 })
-], i.prototype, "themeFromImage", 2);
-n([
-  g()
-], i.prototype, "_values", 2);
-n([
-  g()
-], i.prototype, "_showCopied", 2);
-n([
-  g()
-], i.prototype, "_dragover", 2);
-i = n([
-  y("cg-theme-editor")
-], i);
-export {
-  i as CgThemeEditor
-};
-//# sourceMappingURL=cg-theme-editor.js.map

package/dist/components/cg-theme-editor/cg-theme-editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cg-theme-editor.js","sources":["../../../src/components/cg-theme-editor/cg-theme-editor.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-theme-editor\n * Live, in-app token editor that drives the closest ancestor\n * `<cg-theme>` element. Drop into your dev/staging build to retune tier-2\n * tokens without rebuilding — color pickers, sliders, and an image-drop\n * zone that runs `themeFromImage()` to extract a palette from a logo.\n *\n * The editor walks up from the host to find a `<cg-theme>` ancestor and\n * mutates its `tokens` prop on every change. There is no global side\n * effect — clearing the editor (or removing it) leaves the theme as it\n * was on the cg-theme element.\n *\n * Pair with the `themeFromImage()` API exported from\n * `@cognivo/theme-generator` for image-driven palette extraction. The\n * editor accepts a `themeFromImage` callback prop; consumers wire it\n * once at mount time so this package stays free of a workspace-wide\n * dependency on theme-generator.\n *\n * @example\n * ```html\n * <cg-theme>\n *   <App />\n *   <cg-theme-editor></cg-theme-editor>\n * </cg-theme>\n * ```\n *\n * @example With image extraction wired up\n * ```ts\n * import { themeFromImage, paletteToCssVars } from '@cognivo/theme-generator';\n * editor.themeFromImage = (data) => paletteToCssVars(themeFromImage(data));\n * ```\n *\n * @fires {CustomEvent<{tokens: Record<string,string>}>} cg-theme-change - On every token change.\n *\n * @cssprop --cg-component-theme-editor-width - Panel width (default 280px)\n */\n@customElement('cg-theme-editor')\nexport class CgThemeEditor extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: fixed;\n      bottom: var(--cg-spacing-16);\n      right: var(--cg-spacing-16);\n      z-index: var(--cg-z-index-top, 1000);\n      font-family: var(--cg-font-family-primary, system-ui, sans-serif);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    :host([anchor=\"bottom-left\"])  { right: auto; left: var(--cg-spacing-16); }\n    :host([anchor=\"top-right\"])    { bottom: auto; top: var(--cg-spacing-16); }\n    :host([anchor=\"top-left\"])     { right: auto; left: var(--cg-spacing-16); bottom: auto; top: var(--cg-spacing-16); }\n\n    .panel {\n      width: var(--cg-component-theme-editor-width, 280px);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-shadow-elevation-md, 0 8px 24px rgba(0, 0, 0, 0.18));\n      overflow: hidden;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    :host([collapsed]) .panel-body { display: none; }\n\n    header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-action-tertiary-background-hover);\n      cursor: grab;\n      user-select: none;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    header.collapsed { border-bottom: 0; }\n    .title {\n      flex: 1 1 auto;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .toggle {\n      background: transparent;\n      border: 0;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-2) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .toggle:hover { color: var(--cg-color-surface-base-text); background: var(--cg-color-action-tertiary-background-hover); }\n\n    .panel-body {\n      padding: var(--cg-spacing-12);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .row label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .row input[type=\"color\"] {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-24);\n      padding: 0;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      cursor: pointer;\n    }\n\n    .image-drop {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-16);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      text-align: center;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .image-drop:hover, .image-drop.dragover {\n      border-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .image-drop input { display: none; }\n    .image-drop.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .footer {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      padding-top: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .footer button {\n      flex: 1 1 0;\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n    }\n    .footer button:hover { background: var(--cg-color-action-tertiary-background-hover); }\n\n    .copied {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-4));\n      right: 0;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\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-50);\n      font-size: var(--cg-font-size-xs);\n      pointer-events: none;\n    }\n  `];\n\n  /** Where the panel docks. */\n  @property({ reflect: true }) anchor: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' = 'bottom-right';\n\n  /** Start collapsed. */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The set of tokens the editor exposes. Each entry: { name, label, type }.\n   * Type \"color\" renders an `<input type=\"color\">`. Default is the small\n   * brand-defining set that maps cleanly to most designs.\n   */\n  @property({ attribute: false }) editableTokens: Array<{ name: string; label: string; type: 'color' }> = [\n    { name: '--cg-color-action-primary-background-default', label: 'Primary', type: 'color' },\n    { name: '--cg-color-action-primary-text-default', label: 'Primary text', type: 'color' },\n    { name: '--cg-color-action-secondary-background-default', label: 'Secondary', type: 'color' },\n    { name: '--cg-color-accent-text', label: 'Accent', type: 'color' },\n    { name: '--cg-color-surface-base-background', label: 'Surface bg', type: 'color' },\n    { name: '--cg-color-surface-base-text', label: 'Surface text', type: 'color' },\n    { name: '--cg-color-surface-cards-background', label: 'Card bg', type: 'color' },\n    { name: '--cg-color-surface-cards-border', label: 'Border', type: 'color' },\n  ];\n\n  /**\n   * Optional callback that converts an RGBAImageData into a token override.\n   * Wire `themeFromImage` + `paletteToCssVars` here. When unset, the\n   * image-drop zone is disabled.\n   */\n  @property({ attribute: false })\n  themeFromImage:\n    | ((image: { data: Uint8ClampedArray | Uint8Array | number[]; width: number; height: number }) => Record<string, string>)\n    | null = null;\n\n  @state() private _values: Record<string, string> = {};\n  @state() private _showCopied = false;\n  @state() private _dragover = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._readInitialValues();\n  }\n\n  /**\n   * Read the current resolved value of each editable token from the page\n   * so the color inputs start populated. Falls back to \"#000000\" for\n   * unresolvable values; the input still works once the user picks.\n   */\n  private _readInitialValues(): void {\n    const target = this._findThemeTarget();\n    const probe = target ?? this;\n    const cs = window.getComputedStyle(probe);\n    const next: Record<string, string> = {};\n    for (const t of this.editableTokens) {\n      const v = cs.getPropertyValue(t.name).trim();\n      next[t.name] = this._normalizeColor(v) ?? '#000000';\n    }\n    this._values = next;\n  }\n\n  /**\n   * Convert any CSS color value into a 6-digit hex form that color inputs\n   * accept. Returns null if the value can't be parsed.\n   */\n  private _normalizeColor(value: string): string | null {\n    if (!value) return null;\n    const v = value.trim().toLowerCase();\n    if (/^#[0-9a-f]{6}$/.test(v)) return v;\n    if (/^#[0-9a-f]{3}$/.test(v)) {\n      const [r, g, b] = v.slice(1);\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    const rgb = v.match(/^rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/);\n    if (rgb) {\n      const to2 = (n: string) => parseInt(n, 10).toString(16).padStart(2, '0');\n      return `#${to2(rgb[1]!)}${to2(rgb[2]!)}${to2(rgb[3]!)}`;\n    }\n    return null;\n  }\n\n  /** Walk up from the host to find a sibling/ancestor `<cg-theme>`. */\n  private _findThemeTarget(): HTMLElement | null {\n    let cursor: Node | null = this.parentNode;\n    while (cursor) {\n      if (cursor instanceof HTMLElement && cursor.tagName.toLowerCase() === 'cg-theme') {\n        return cursor;\n      }\n      cursor = cursor instanceof ShadowRoot ? cursor.host : (cursor as Node).parentNode;\n    }\n    return null;\n  }\n\n  private _applyToTheme(): void {\n    const target = this._findThemeTarget();\n    if (!target) return;\n    // Assign a NEW object reference so cg-theme's @property re-renders.\n    (target as unknown as { tokens: Record<string, string> | null }).tokens = { ...this._values };\n  }\n\n  private _onColorChange(name: string, value: string): void {\n    this._values = { ...this._values, [name]: value };\n    this._applyToTheme();\n    this.dispatchEvent(new CustomEvent('cg-theme-change', {\n      detail: { tokens: this._values },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onImagePicked = (file: File): void => {\n    if (!this.themeFromImage) return;\n    const img = new Image();\n    const url = URL.createObjectURL(file);\n    img.onload = () => {\n      const canvas = document.createElement('canvas');\n      canvas.width = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n      ctx.drawImage(img, 0, 0);\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n      const tokens = this.themeFromImage!(imageData);\n      // Merge the extracted tokens into the editor's known values where\n      // there's overlap; for non-overlapping tokens, push them through\n      // directly so the cg-theme picks them up too.\n      const merged = { ...this._values };\n      for (const [k, v] of Object.entries(tokens)) {\n        const norm = this._normalizeColor(v);\n        if (norm) merged[k] = norm;\n      }\n      this._values = merged;\n      this._applyToTheme();\n      URL.revokeObjectURL(url);\n    };\n    img.src = url;\n  };\n\n  private _onImageInputChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) this._onImagePicked(file);\n  };\n\n  private _onDragEnter = (e: DragEvent): void => {\n    e.preventDefault();\n    this._dragover = true;\n  };\n\n  private _onDragLeave = (): void => {\n    this._dragover = false;\n  };\n\n  private _onDrop = (e: DragEvent): void => {\n    e.preventDefault();\n    this._dragover = false;\n    const file = e.dataTransfer?.files?.[0];\n    if (file) this._onImagePicked(file);\n  };\n\n  private _onReset = (): void => {\n    const target = this._findThemeTarget();\n    if (target) (target as unknown as { tokens: Record<string, string> | null }).tokens = null;\n    this._readInitialValues();\n    this.dispatchEvent(new CustomEvent('cg-theme-change', {\n      detail: { tokens: {} },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onCopy = (): void => {\n    const json = JSON.stringify(this._values, null, 2);\n    if (navigator.clipboard?.writeText) {\n      void navigator.clipboard.writeText(json);\n    }\n    this._showCopied = true;\n    setTimeout(() => { this._showCopied = false; }, 1200);\n  };\n\n  private _onToggle = (): void => {\n    this.collapsed = !this.collapsed;\n  };\n\n  override render() {\n    return html`\n      <div class=\"panel\">\n        <header class=${this.collapsed ? 'collapsed' : ''} @click=${this._onToggle}>\n          <span class=\"title\">Theme</span>\n          <button class=\"toggle\" type=\"button\" aria-label=${this.collapsed ? 'Expand' : 'Collapse'}>\n            ${this.collapsed ? '+' : '–'}\n          </button>\n        </header>\n        ${this.collapsed ? nothing : html`\n          <div class=\"panel-body\">\n            ${this.editableTokens.map(t => html`\n              <div class=\"row\">\n                <label for=${`tok-${t.name}`}>${t.label}</label>\n                <input\n                  id=${`tok-${t.name}`}\n                  type=\"color\"\n                  .value=${this._values[t.name] ?? '#000000'}\n                  @input=${(e: Event) => this._onColorChange(t.name, (e.target as HTMLInputElement).value)}\n                />\n              </div>\n            `)}\n\n            <label\n              class=\"image-drop ${this._dragover ? 'dragover' : ''} ${this.themeFromImage ? '' : 'disabled'}\"\n              @dragenter=${this._onDragEnter}\n              @dragover=${(e: Event) => e.preventDefault()}\n              @dragleave=${this._onDragLeave}\n              @drop=${this._onDrop}\n            >\n              ${this.themeFromImage\n                ? html`Drop a logo or <strong>browse</strong> to extract a palette.`\n                : html`Image extraction not configured.`}\n              <input\n                type=\"file\"\n                accept=\"image/*\"\n                ?disabled=${!this.themeFromImage}\n                @change=${this._onImageInputChange}\n              />\n            </label>\n\n            <div class=\"footer\">\n              <button type=\"button\" @click=${this._onCopy}>Copy JSON</button>\n              <button type=\"button\" @click=${this._onReset}>Reset</button>\n            </div>\n\n            ${this._showCopied ? html`<span class=\"copied\">Copied</span>` : nothing}\n          </div>\n        `}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-theme-editor': CgThemeEditor;\n  }\n}\n"],"names":["CgThemeEditor","LitElement","file","img","url","canvas","ctx","imageData","tokens","merged","k","v","norm","target","json","probe","cs","next","t","value","r","g","b","rgb","to2","n","cursor","name","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,70 +0,0 @@
-import { LitElement } from 'lit';
-type GroupBy = 'none' | 'day' | 'week' | 'month' | 'year';
-/**
- * @element cg-timeline
- * Vertical (default) or horizontal sequence of `<cg-timeline-event>`
- * children. The container handles three things automatically as events
- * are added/removed:
- *
- *   1. Marks the final event with `last` so the trailing connector hides.
- *   2. Propagates `direction` so children flip layout for horizontal mode.
- *   3. Groups events by day / week / month / year — when `group-by` is set,
- *      the container reads each child's `date` prop, computes a bucket key,
- *      and stamps the first event of each bucket with a `group-header=`
- *      attribute (e.g. "Today", "Yesterday", "Mar 5", "March", "2024").
- *      The child then renders that label as a sticky-feel section header
- *      above its dot/body. Headers use Intl, so they respect `locale`.
- *
- * Vertical layout only supports group headers — horizontal timelines are
- * a different UX problem (cluster headers above runs of same-day events
- * would compete with the time-axis); set `group-by="none"` (default) for
- * horizontal.
- *
- * @example
- * ```html
- * <cg-timeline group-by="day" label="Patient activity">
- *   <cg-timeline-event date="2026-05-04T09:14" timestamp="09:14">Checked in</cg-timeline-event>
- *   <cg-timeline-event date="2026-05-04T09:30" timestamp="09:30" variant="success">Consultation</cg-timeline-event>
- *   <cg-timeline-event date="2026-05-03T16:20" timestamp="16:20">Lab results uploaded</cg-timeline-event>
- *   <cg-timeline-event date="2026-04-28T11:00" timestamp="Apr 28">Initial visit</cg-timeline-event>
- * </cg-timeline>
- * <!-- renders headers: Today / Yesterday / Apr 28 -->
- * ```
- *
- * @slot - cg-timeline-event children.
- *
- * @cssprop --cg-component-timeline-event-gap - Gap between events (default 0)
- */
-export declare class CgTimeline extends LitElement {
-    static styles: import('lit').CSSResult[];
-    /** Layout direction. */
-    direction: 'vertical' | 'horizontal';
-    /** Accessible label for the timeline as a whole. */
-    label: string;
-    /**
-     * Auto-grouping mode. When set, events with a `date` prop are bucketed
-     * and the first event in each bucket gets a `group-header` attribute
-     * with a localized label (Today / Yesterday / weekday / "Mar 5" / etc).
-     * Vertical layout only.
-     */
-    groupBy: GroupBy;
-    /** BCP 47 locale for group header formatting. Defaults to the document language. */
-    locale: string | undefined;
-    updated(changed: Map<string, unknown>): void;
-    private _syncChildren;
-    /** Stable bucket key for a date under a given grouping unit. */
-    private _groupKey;
-    /** Localized header label using Intl. */
-    private _formatLabel;
-    private _stripTime;
-    private _mondayOf;
-    private _onSlotChange;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'cg-timeline': CgTimeline;
-    }
-}
-export {};
-//# sourceMappingURL=cg-timeline.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cg-timeline.d.ts","sourceRoot":"","sources":["../../../src/components/cg-timeline/cg-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,2CAA2C,CAAC;AAEnD,KAAK,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiBnB;IAEH,wBAAwB;IACK,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/E,oDAAoD;IACxC,KAAK,SAAc;IAE/B;;;;;OAKG;IACiD,OAAO,EAAE,OAAO,CAAU;IAE9E,oFAAoF;IACxE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,aAAa;IAwCrB,gEAAgE;IAChE,OAAO,CAAC,SAAS;IAejB,yCAAyC;IACzC,OAAO,CAAC,YAAY;IA+CpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,aAAa,CAEnB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -1,131 +0,0 @@
-import { css as g, LitElement as f, html as p } from "lit";
-import { property as h, customElement as y } from "lit/decorators.js";
-import { h as d, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-timeline-event/cg-timeline-event.js";
-var v = Object.defineProperty, D = Object.getOwnPropertyDescriptor, u = (t, e, r, n) => {
-  for (var i = n > 1 ? void 0 : n ? D(e, r) : e, o = t.length - 1, s; o >= 0; o--)
-    (s = t[o]) && (i = (n ? s(e, r, i) : s(i)) || i);
-  return n && i && v(e, r, i), i;
-};
-let l = class extends f {
-  constructor() {
-    super(...arguments), this.direction = "vertical", this.label = "Timeline", this.groupBy = "none", this._onSlotChange = (t) => {
-      this._syncChildren(t.target);
-    };
-  }
-  updated(t) {
-    (t.has("direction") || t.has("groupBy") || t.has("locale")) && this._syncChildren();
-  }
-  _syncChildren(t) {
-    const e = t ?? this.shadowRoot?.querySelector("slot");
-    if (!e) return;
-    const r = e.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "cg-timeline-event"), n = this.direction === "vertical" ? this.groupBy : "none";
-    let i = "";
-    r.forEach((o, s) => {
-      if (s === r.length - 1 ? o.setAttribute("last", "") : o.removeAttribute("last"), o.setAttribute("direction", this.direction), n === "none") {
-        o.removeAttribute("group-header");
-        return;
-      }
-      const a = o.date || o.getAttribute("date") || "";
-      if (!a) {
-        o.removeAttribute("group-header");
-        return;
-      }
-      const m = new Date(a);
-      if (Number.isNaN(m.valueOf())) {
-        o.removeAttribute("group-header");
-        return;
-      }
-      const c = this._groupKey(m, n);
-      c !== i ? (o.setAttribute("group-header", this._formatLabel(m, n)), i = c) : o.removeAttribute("group-header");
-    });
-  }
-  /** Stable bucket key for a date under a given grouping unit. */
-  _groupKey(t, e) {
-    if (e === "year") return `Y:${t.getFullYear()}`;
-    if (e === "month") return `M:${t.getFullYear()}-${t.getMonth()}`;
-    if (e === "week") {
-      const r = new Date(t);
-      r.setHours(0, 0, 0, 0);
-      const n = r.getDay() || 7;
-      return r.setDate(r.getDate() - n + 1), `W:${r.getFullYear()}-${r.getMonth()}-${r.getDate()}`;
-    }
-    return `D:${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`;
-  }
-  /** Localized header label using Intl. */
-  _formatLabel(t, e) {
-    const r = this.locale ?? (typeof document < "u" && document.documentElement.lang || void 0), n = /* @__PURE__ */ new Date(), i = t.getFullYear() === n.getFullYear();
-    if (e === "day") {
-      const o = this._stripTime(n), s = this._stripTime(t), a = Math.round((o.getTime() - s.getTime()) / 864e5);
-      return a === 0 ? "Today" : a === 1 ? "Yesterday" : a === -1 ? "Tomorrow" : a > 1 && a < 7 ? new Intl.DateTimeFormat(r, { weekday: "long" }).format(t) : new Intl.DateTimeFormat(
-        r,
-        i ? { month: "short", day: "numeric" } : { month: "short", day: "numeric", year: "numeric" }
-      ).format(t);
-    }
-    if (e === "week") {
-      const o = this._mondayOf(t), s = this._mondayOf(n), a = Math.round((s.getTime() - o.getTime()) / (7 * 864e5));
-      return a === 0 ? "This week" : a === 1 ? "Last week" : a === -1 ? "Next week" : `Week of ${new Intl.DateTimeFormat(
-        r,
-        i ? { month: "short", day: "numeric" } : { month: "short", day: "numeric", year: "numeric" }
-      ).format(o)}`;
-    }
-    if (e === "month") {
-      if (i && t.getMonth() === n.getMonth()) return "This month";
-      const s = new Date(n.getFullYear(), n.getMonth() - 1, 1);
-      return t.getFullYear() === s.getFullYear() && t.getMonth() === s.getMonth() ? "Last month" : new Intl.DateTimeFormat(r, i ? { month: "long" } : { month: "long", year: "numeric" }).format(t);
-    }
-    return i ? "This year" : t.getFullYear() === n.getFullYear() - 1 ? "Last year" : new Intl.DateTimeFormat(r, { year: "numeric" }).format(t);
-  }
-  _stripTime(t) {
-    const e = new Date(t);
-    return e.setHours(0, 0, 0, 0), e;
-  }
-  _mondayOf(t) {
-    const e = this._stripTime(t), r = e.getDay() || 7;
-    return e.setDate(e.getDate() - r + 1), e;
-  }
-  render() {
-    return p`
-      <ol class="list" role="list" aria-label=${this.label}>
-        <slot @slotchange=${this._onSlotChange}></slot>
-      </ol>
-    `;
-  }
-};
-l.styles = [d, w, g`
-    :host {
-      display: block;
-    }
-    .list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--cg-component-timeline-event-gap, 0);
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-    :host([direction="horizontal"]) .list {
-      flex-direction: row;
-      align-items: flex-start;
-      overflow-x: auto;
-    }
-  `];
-u([
-  h({ reflect: !0 })
-], l.prototype, "direction", 2);
-u([
-  h()
-], l.prototype, "label", 2);
-u([
-  h({ attribute: "group-by", reflect: !0 })
-], l.prototype, "groupBy", 2);
-u([
-  h()
-], l.prototype, "locale", 2);
-l = u([
-  y("cg-timeline")
-], l);
-export {
-  l as CgTimeline
-};
-//# sourceMappingURL=cg-timeline.js.map

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

@@ -1 +0,0 @@
-{"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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"}