@cognivo/components 0.8.0

package/dist/components/cg-date-picker/cg-date-picker.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-date-picker
+ * Date picker trigger that opens a single-mode cg-calendar in a floating popover.
+ *
+ * @example
+ * ```html
+ * <cg-date-picker label="Start date" placeholder="Pick a date"></cg-date-picker>
+ * <cg-date-picker label="Birthday" value="2000-01-15" min="1900-01-01" max="2025-12-31"></cg-date-picker>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-change - When a date is selected
+ */
+export declare class CgDatePicker extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    value: string;
+    placeholder: string;
+    name: string;
+    helper: string;
+    min: string;
+    max: string;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    private _open;
+    private _toggle;
+    private _close;
+    private _onCalendarChange;
+    private _formatDisplay;
+    private _handleClickOutside;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-date-picker': CgDatePicker;
+    }
+}
+//# sourceMappingURL=cg-date-picker.d.ts.map

package/dist/components/cg-date-picker/cg-date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-date-picker/cg-date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA8GnB;IAES,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAiB;IAC5B,IAAI,SAAM;IACV,MAAM,SAAM;IACZ,GAAG,SAAM;IACT,GAAG,SAAM;IACQ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAEnD,OAAO,CAAC,KAAK,CAAS;IAE/B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,cAAc;IAOb,iBAAiB;IAIjB,oBAAoB;IAKpB,MAAM;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

package/dist/components/cg-date-picker/cg-date-picker.js

@@ -0,0 +1,240 @@
+import { css as p, LitElement as u, nothing as g, html as d } from "lit";
+import { property as o, state as h, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-calendar/cg-calendar.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (e, a, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? y(a, n) : a, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (i = (s ? l(a, n, i) : l(i)) || i);
+  return s && i && m(a, n, i), i;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.placeholder = "Select date", this.name = "", this.helper = "", this.min = "", this.max = "", this.size = "md", this.rounded = "lg", this.disabled = !1, this.error = !1, this.success = !1, this._open = !1, this._handleClickOutside = (e) => {
+      e.composedPath().includes(this) || this._close();
+    };
+  }
+  _toggle() {
+    this.disabled || (this._open = !this._open);
+  }
+  _close() {
+    this._open = !1;
+  }
+  _onCalendarChange(e) {
+    const a = e;
+    e.stopPropagation(), this.value = a.detail.value || "", this._close(), this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+  }
+  _formatDisplay() {
+    if (!this.value) return "";
+    const e = /* @__PURE__ */ new Date(this.value + "T00:00:00");
+    return isNaN(e.getTime()) ? "" : e.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  }
+  _handleKeydown(e) {
+    if (e.key === "Escape") {
+      this._close();
+      return;
+    }
+    (e.key === "Enter" || e.key === " ") && (this._open || (e.preventDefault(), this._toggle()));
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
+  }
+  render() {
+    const e = this._formatDisplay();
+    return d`
+      ${this.label ? d`<div class="label">${this.label}</div>` : g}
+      <div
+        class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="combobox"
+        aria-expanded=${this._open}
+        aria-haspopup="dialog"
+        aria-label=${this.label || "Date picker"}
+        @click=${this._toggle}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="trigger-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+            <line x1="16" y1="2" x2="16" y2="6"></line>
+            <line x1="8" y1="2" x2="8" y2="6"></line>
+            <line x1="3" y1="10" x2="21" y2="10"></line>
+          </svg>
+        </span>
+        <span class="trigger-text ${e ? "" : "placeholder"}">
+          ${e || this.placeholder}
+        </span>
+      </div>
+
+      <div class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Calendar">
+        <cg-calendar
+          mode="single"
+          .value=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          @cg-calendar-change=${this._onCalendarChange}
+        ></cg-calendar>
+      </div>
+      ${this.helper ? d`<div class="helper">${this.helper}</div>` : g}
+    `;
+  }
+};
+r.styles = [f, b, p`
+    :host { position: relative; }
+
+    /* ── Trigger ── */
+    .trigger {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      padding: 0 var(--cg-spacing-4);
+      height: var(--cg-component-input-height-md);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      cursor: pointer;
+      outline: none;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }
+    .trigger:focus-visible,
+    .trigger.open {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }
+
+    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }
+    :host([error]) .trigger:focus-visible,
+    :host([error]) .trigger.open { border-color: var(--cg-color-status-error-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }
+    :host([success]) .trigger { border-color: var(--cg-color-input-icon-success); }
+    :host([success]) .trigger:focus-visible,
+    :host([success]) .trigger.open { border-color: var(--cg-color-status-success-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }
+
+    /* Size */
+    :host([size="lg"]) .trigger { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-base); }
+
+    /* Rounded */
+    :host([rounded="none"]) .trigger { border-radius: 0; }
+    :host([rounded="sm"]) .trigger { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .trigger { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .trigger { border-radius: var(--cg-component-input-radius); }
+
+    .trigger-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-input-icon-default);
+      flex-shrink: 0;
+      width: var(--cg-spacing-40);
+      align-self: stretch;
+      background: var(--cg-overlay-dark-subtle);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);
+      margin-left: calc(-1 * var(--cg-spacing-4));
+    }
+    .trigger-icon svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+    }
+    .trigger-text {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 var(--cg-spacing-12);
+    }
+    .placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+      margin-bottom: var(--cg-spacing-4);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    /* ── Popover (positioning + animation only — cg-calendar owns the visual chrome) ── */
+    .popover {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--cg-z-index-200);
+      margin-top: var(--cg-spacing-4);
+      border-radius: var(--cg-component-calendar-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);
+      pointer-events: none;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .popover.open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    /* ── Helper ── */
+    .helper {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      padding: var(--cg-spacing-4) 0 0;
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
+  `];
+t([
+  o()
+], r.prototype, "label", 2);
+t([
+  o()
+], r.prototype, "value", 2);
+t([
+  o()
+], r.prototype, "placeholder", 2);
+t([
+  o()
+], r.prototype, "name", 2);
+t([
+  o()
+], r.prototype, "helper", 2);
+t([
+  o()
+], r.prototype, "min", 2);
+t([
+  o()
+], r.prototype, "max", 2);
+t([
+  o({ reflect: !0 })
+], r.prototype, "size", 2);
+t([
+  o({ reflect: !0 })
+], r.prototype, "rounded", 2);
+t([
+  o({ type: Boolean })
+], r.prototype, "disabled", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+t([
+  h()
+], r.prototype, "_open", 2);
+r = t([
+  v("cg-date-picker")
+], r);
+export {
+  r as CgDatePicker
+};
+//# sourceMappingURL=cg-date-picker.js.map

package/dist/components/cg-date-picker/cg-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-date-picker.js","sources":["../../../src/components/cg-date-picker/cg-date-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-picker\n * Date picker trigger that opens a single-mode cg-calendar in a floating popover.\n *\n * @example\n * ```html\n * <cg-date-picker label=\"Start date\" placeholder=\"Pick a date\"></cg-date-picker>\n * <cg-date-picker label=\"Birthday\" value=\"2000-01-15\" min=\"1900-01-01\" max=\"2025-12-31\"></cg-date-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When a date is selected\n */\n@customElement('cg-date-picker')\nexport class CgDatePicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; }\n\n    /* ── Trigger ── */\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      padding: 0 var(--cg-spacing-4);\n      height: var(--cg-component-input-height-md);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }\n    .trigger:focus-visible,\n    .trigger.open {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .trigger:focus-visible,\n    :host([error]) .trigger.open { border-color: var(--cg-color-status-error-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }\n    :host([success]) .trigger { border-color: var(--cg-color-input-icon-success); }\n    :host([success]) .trigger:focus-visible,\n    :host([success]) .trigger.open { border-color: var(--cg-color-status-success-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }\n\n    /* Size */\n    :host([size=\"lg\"]) .trigger { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-base); }\n\n    /* Rounded */\n    :host([rounded=\"none\"]) .trigger { border-radius: 0; }\n    :host([rounded=\"sm\"]) .trigger { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .trigger { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .trigger { border-radius: var(--cg-component-input-radius); }\n\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n    .trigger-text {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Popover (positioning + animation only — cg-calendar owns the visual chrome) ── */\n    .popover {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .popover.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    /* ── Helper ── */\n    .helper {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      padding: var(--cg-spacing-4) 0 0;\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n  `];\n\n  @property() label = '';\n  @property() value = '';\n  @property() placeholder = 'Select date';\n  @property() name = '';\n  @property() helper = '';\n  @property() min = '';\n  @property() max = '';\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n\n  @state() private _open = false;\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n  }\n\n  private _close() { this._open = false; }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string }>;\n    e.stopPropagation();\n    this.value = ev.detail.value || '';\n    this._close();\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _formatDisplay(): string {\n    if (!this.value) return '';\n    const d = new Date(this.value + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this._open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  override render() {\n    const display = this._formatDisplay();\n\n    return html`\n      ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n      <div\n        class=\"trigger ${this._open ? 'open' : ''} ${this.disabled ? 'disabled' : ''}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"combobox\"\n        aria-expanded=${this._open}\n        aria-haspopup=\"dialog\"\n        aria-label=${this.label || 'Date picker'}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">\n          ${display || this.placeholder}\n        </span>\n      </div>\n\n      <div class=\"popover ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Calendar\">\n        <cg-calendar\n          mode=\"single\"\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-date-picker': CgDatePicker; }\n}\n"],"names":["CgDatePicker","LitElement","ev","d","display","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-date-range-picker/cg-date-range-picker.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-date-range-picker
+ * Dual-input date range picker that opens a range-mode cg-calendar.
+ *
+ * @example
+ * ```html
+ * <cg-date-range-picker label="Dates" from="2026-04-01" to="2026-04-10"></cg-date-range-picker>
+ * ```
+ *
+ * @fires {CustomEvent<{from: string, to: string}>} cg-date-range-change
+ */
+export declare class CgDateRangePicker extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    label: string;
+    from: string;
+    to: string;
+    min: string;
+    max: string;
+    placeholder: string;
+    format: string;
+    disabled: boolean;
+    open: boolean;
+    error: string;
+    updated(changed: Map<string, unknown>): void;
+    private _syncFormValue;
+    private _toggle;
+    private _close;
+    private _formatDisplay;
+    private _onCalendarChange;
+    private _handleClickOutside;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-date-range-picker': CgDateRangePicker;
+    }
+}
+//# sourceMappingURL=cg-date-range-picker.d.ts.map

package/dist/components/cg-date-range-picker/cg-date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-date-range-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-date-range-picker/cg-date-range-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAwHnB;IAES,KAAK,SAAM;IACX,IAAI,SAAM;IACV,EAAE,SAAM;IACR,GAAG,SAAM;IACT,GAAG,SAAM;IACT,WAAW,SAAuB;IAClC,MAAM,SAAkB;IACP,QAAQ,UAAS;IACF,IAAI,UAAS;IAC7C,KAAK,SAAM;IAEd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,mBAAmB,CAEzB;IAEO,iBAAiB;IAIjB,oBAAoB;IAK7B,OAAO,CAAC,cAAc;IAOb,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/components/cg-date-range-picker/cg-date-range-picker.js

@@ -0,0 +1,266 @@
+import { css as p, LitElement as h, nothing as l, html as g } from "lit";
+import { property as a, customElement as u } from "lit/decorators.js";
+import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-calendar/cg-calendar.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? b(t, s) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (i = (n ? d(t, s, i) : d(i)) || i);
+  return n && i && m(t, s, i), i;
+};
+let r = class extends h {
+  constructor() {
+    super(), this.label = "", this.from = "", this.to = "", this.min = "", this.max = "", this.placeholder = "Select date range", this.format = "MMM dd, yyyy", this.disabled = !1, this.open = !1, this.error = "", this._handleClickOutside = (e) => {
+      e.composedPath().includes(this) || this._close();
+    }, "attachInternals" in this && (this._internals = this.attachInternals());
+  }
+  updated(e) {
+    (e.has("from") || e.has("to")) && this._syncFormValue();
+  }
+  _syncFormValue() {
+    if (!this._internals) return;
+    const e = new FormData();
+    this.from && e.append("from", this.from), this.to && e.append("to", this.to), this._internals.setFormValue(e);
+  }
+  _toggle() {
+    this.disabled || (this.open = !this.open);
+  }
+  _close() {
+    this.open = !1;
+  }
+  _formatDisplay(e) {
+    if (!e) return "";
+    const t = /* @__PURE__ */ new Date(e + "T00:00:00");
+    return isNaN(t.getTime()) ? "" : t.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  }
+  _onCalendarChange(e) {
+    const t = e;
+    e.stopPropagation();
+    const { value: s, rangeEnd: n } = t.detail;
+    this.from = s || "", this.to = n || "", this.from && this.to && (this.dispatchEvent(new CustomEvent("cg-date-range-change", {
+      detail: { from: this.from, to: this.to },
+      bubbles: !0,
+      composed: !0
+    })), setTimeout(() => {
+      this.open = !1;
+    }, 120));
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
+  }
+  _handleKeydown(e) {
+    if (e.key === "Escape") {
+      this._close();
+      return;
+    }
+    (e.key === "Enter" || e.key === " ") && (this.open || (e.preventDefault(), this._toggle()));
+  }
+  render() {
+    const e = this._formatDisplay(this.from), t = this._formatDisplay(this.to);
+    return g`
+      ${this.label ? g`<label class="label">${this.label}</label>` : l}
+      <div
+        class="trigger ${this.open ? "open" : ""} ${this.disabled ? "disabled" : ""} ${this.error ? "invalid" : ""}"
+        role="combobox"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="dialog"
+        aria-controls="cg-drp-dropdown"
+        aria-label=${this.label || "Date range picker"}
+        aria-invalid=${this.error ? "true" : l}
+        aria-describedby=${this.error ? "cg-drp-error" : l}
+        @click=${this._toggle}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="trigger-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+            <line x1="16" y1="2" x2="16" y2="6"></line>
+            <line x1="8" y1="2" x2="8" y2="6"></line>
+            <line x1="3" y1="10" x2="21" y2="10"></line>
+          </svg>
+        </span>
+        <span class="segment ${e ? "" : "empty"}">${e || this.placeholder}</span>
+        <span class="arrow" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 6l6 6-6 6"/>
+          </svg>
+        </span>
+        <span class="segment ${t ? "" : "empty"}">${t || "End date"}</span>
+      </div>
+
+      <div id="cg-drp-dropdown" class="dropdown ${this.open ? "open" : ""}" role="dialog" aria-label="Date range calendar">
+        <cg-calendar
+          mode="range"
+          .value=${this.from}
+          .rangeEnd=${this.to}
+          .min=${this.min}
+          .max=${this.max}
+          @cg-calendar-change=${this._onCalendarChange}
+        ></cg-calendar>
+      </div>
+      ${this.error ? g`<span id="cg-drp-error" class="error-message" role="alert">${this.error}</span>` : l}
+    `;
+  }
+};
+r.formAssociated = !0;
+r.styles = [f, v, p`
+    :host { position: relative; font-family: var(--cg-font-family-primary); }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+      margin-bottom: var(--cg-spacing-4);
+      font-weight: var(--cg-font-weight-medium);
+      display: block;
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      height: var(--cg-component-input-height-md);
+      padding: 0 var(--cg-spacing-4);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font-size: var(--cg-font-size-sm);
+      cursor: pointer;
+      outline: none;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-input-icon-default);
+      flex-shrink: 0;
+      width: var(--cg-spacing-40);
+      align-self: stretch;
+      background: var(--cg-overlay-dark-subtle);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);
+      margin-left: calc(-1 * var(--cg-spacing-4));
+    }
+    .trigger-icon svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+    }
+
+    .trigger:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+
+    .trigger.open,
+    .trigger:focus-visible {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .trigger.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: var(--cg-color-input-background-disabled);
+    }
+
+    .trigger.invalid {
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    .trigger.invalid:focus-visible,
+    .trigger.invalid.open {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    .error-message {
+      display: block;
+      margin-top: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    .segment {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 var(--cg-spacing-12);
+    }
+    .segment.empty { color: var(--cg-color-input-text-placeholder); }
+
+    .arrow {
+      flex-shrink: 0;
+      color: var(--cg-color-input-text-placeholder);
+      display: flex;
+      align-items: center;
+      padding: 0 var(--cg-spacing-2);
+    }
+    .arrow svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+    }
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--cg-z-index-200);
+      margin-top: var(--cg-spacing-4);
+      border-radius: var(--cg-component-calendar-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);
+      pointer-events: none;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dropdown.open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+  `];
+o([
+  a()
+], r.prototype, "label", 2);
+o([
+  a()
+], r.prototype, "from", 2);
+o([
+  a()
+], r.prototype, "to", 2);
+o([
+  a()
+], r.prototype, "min", 2);
+o([
+  a()
+], r.prototype, "max", 2);
+o([
+  a()
+], r.prototype, "placeholder", 2);
+o([
+  a()
+], r.prototype, "format", 2);
+o([
+  a({ type: Boolean })
+], r.prototype, "disabled", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+o([
+  a()
+], r.prototype, "error", 2);
+r = o([
+  u("cg-date-range-picker")
+], r);
+export {
+  r as CgDateRangePicker
+};
+//# sourceMappingURL=cg-date-range-picker.js.map

package/dist/components/cg-date-range-picker/cg-date-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-date-range-picker.js","sources":["../../../src/components/cg-date-range-picker/cg-date-range-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-range-picker\n * Dual-input date range picker that opens a range-mode cg-calendar.\n *\n * @example\n * ```html\n * <cg-date-range-picker label=\"Dates\" from=\"2026-04-01\" to=\"2026-04-10\"></cg-date-range-picker>\n * ```\n *\n * @fires {CustomEvent<{from: string, to: string}>} cg-date-range-change\n */\n@customElement('cg-date-range-picker')\nexport class CgDateRangePicker extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if ('attachInternals' in this) {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; font-family: var(--cg-font-family-primary); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n      display: block;\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .trigger:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    .trigger.open,\n    .trigger:focus-visible {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .trigger.disabled {\n      opacity: 0.5;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n    }\n\n    .trigger.invalid {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    .trigger.invalid:focus-visible,\n    .trigger.invalid.open {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    .error-message {\n      display: block;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .segment {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .segment.empty { color: var(--cg-color-input-text-placeholder); }\n\n    .arrow {\n      flex-shrink: 0;\n      color: var(--cg-color-input-text-placeholder);\n      display: flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-2);\n    }\n    .arrow svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dropdown.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n  `];\n\n  @property() label = '';\n  @property() from = '';\n  @property() to = '';\n  @property() min = '';\n  @property() max = '';\n  @property() placeholder = 'Select date range';\n  @property() format = 'MMM dd, yyyy';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() error = '';\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('from') || changed.has('to')) {\n      this._syncFormValue();\n    }\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return;\n    const fd = new FormData();\n    if (this.from) fd.append('from', this.from);\n    if (this.to) fd.append('to', this.to);\n    this._internals.setFormValue(fd);\n  }\n\n  private _toggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n  }\n\n  private _close() {\n    this.open = false;\n  }\n\n  private _formatDisplay(iso: string): string {\n    if (!iso) return '';\n    const d = new Date(iso + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string; rangeEnd?: string }>;\n    e.stopPropagation();\n    const { value, rangeEnd } = ev.detail;\n    this.from = value || '';\n    this.to = rangeEnd || '';\n\n    if (this.from && this.to) {\n      this.dispatchEvent(new CustomEvent('cg-date-range-change', {\n        detail: { from: this.from, to: this.to },\n        bubbles: true,\n        composed: true,\n      }));\n      // Close after both picked\n      setTimeout(() => { this.open = false; }, 120);\n    }\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this.open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override render() {\n    const fromText = this._formatDisplay(this.from);\n    const toText = this._formatDisplay(this.to);\n    return html`\n      ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n      <div\n        class=\"trigger ${this.open ? 'open' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'invalid' : ''}\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-haspopup=\"dialog\"\n        aria-controls=\"cg-drp-dropdown\"\n        aria-label=${this.label || 'Date range picker'}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-describedby=${this.error ? 'cg-drp-error' : nothing}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"segment ${fromText ? '' : 'empty'}\">${fromText || this.placeholder}</span>\n        <span class=\"arrow\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M9 6l6 6-6 6\"/>\n          </svg>\n        </span>\n        <span class=\"segment ${toText ? '' : 'empty'}\">${toText || 'End date'}</span>\n      </div>\n\n      <div id=\"cg-drp-dropdown\" class=\"dropdown ${this.open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Date range calendar\">\n        <cg-calendar\n          mode=\"range\"\n          .value=${this.from}\n          .rangeEnd=${this.to}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.error ? html`<span id=\"cg-drp-error\" class=\"error-message\" role=\"alert\">${this.error}</span>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-date-range-picker': CgDateRangePicker;\n  }\n}\n"],"names":["CgDateRangePicker","LitElement","changed","fd","iso","d","ev","value","rangeEnd","fromText","toText","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}