@cognivo/components 0.8.0

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

@@ -0,0 +1,417 @@
+import { css as u, LitElement as h, nothing as p, html as n } from "lit";
+import { property as a, state as l, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, i, c, t) => {
+  for (var s = t > 1 ? void 0 : t ? _(i, c) : i, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (s = (t ? g(i, c, s) : g(s)) || s);
+  return t && s && m(i, c, s), s;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.placeholder = "Select time", this.name = "", this.helper = "", this.size = "md", this.rounded = "lg", this.disabled = !1, this.error = !1, this.success = !1, this.use12h = !1, this.step = 5, this._open = !1, this._selectedHour = -1, this._selectedMinute = -1, this._period = "AM", this._handleClickOutside = (e) => {
+      e.composedPath().includes(this) || this._close();
+    };
+  }
+  _toggle() {
+    this.disabled || (this._open = !this._open, this._open && this.value && this._parseValue());
+  }
+  _close() {
+    this._open = !1;
+  }
+  _parseValue() {
+    if (!this.value) return;
+    const [e, i] = this.value.split(":").map(Number);
+    this.use12h ? (this._period = e >= 12 ? "PM" : "AM", this._selectedHour = e === 0 ? 12 : e > 12 ? e - 12 : e) : this._selectedHour = e, this._selectedMinute = i;
+  }
+  _selectHour(e) {
+    this._selectedHour = e, this._emitValue();
+  }
+  _selectMinute(e) {
+    this._selectedMinute = e, this._emitValue();
+  }
+  _setPeriod(e) {
+    this._period = e, this._selectedHour >= 0 && this._emitValue();
+  }
+  _emitValue() {
+    if (this._selectedHour < 0 || this._selectedMinute < 0) return;
+    let e = this._selectedHour;
+    this.use12h && (this._period === "AM" && e === 12 ? e = 0 : this._period === "PM" && e !== 12 && (e += 12)), this.value = `${String(e).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`, this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+  }
+  _formatDisplay() {
+    if (!this.value) return "";
+    const [e, i] = this.value.split(":").map(Number);
+    if (this.use12h) {
+      const c = e >= 12 ? "PM" : "AM";
+      return `${e === 0 ? 12 : e > 12 ? e - 12 : e}:${String(i).padStart(2, "0")} ${c}`;
+    }
+    return `${String(e).padStart(2, "0")}:${String(i).padStart(2, "0")}`;
+  }
+  _getHours() {
+    return this.use12h ? Array.from({ length: 12 }, (e, i) => i + 1) : Array.from({ length: 24 }, (e, i) => i);
+  }
+  _getMinutes() {
+    const e = Math.max(1, Math.min(30, this.step));
+    return Array.from({ length: Math.ceil(60 / e) }, (i, c) => c * e);
+  }
+  _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(), i = this._getHours(), c = this._getMinutes();
+    return n`
+      ${this.label ? n`<div class="label">${this.label}</div>` : p}
+      <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 || "Time 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">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+        </span>
+        <span class="trigger-text ${e ? "" : "placeholder"}">
+          ${e || this.placeholder}
+        </span>
+      </div>
+
+      <div class="dropdown ${this._open ? "open" : ""}" role="dialog" aria-label="Time selector">
+        <div class="time-columns">
+          <div class="time-column">
+            <span class="time-column-label">Hour</span>
+            <div class="time-scroll">
+              ${i.map((t) => n`
+                <button
+                  class="time-option ${this._selectedHour === t ? "selected" : ""}"
+                  @click=${(s) => {
+      s.stopPropagation(), this._selectHour(t);
+    }}
+                  aria-label="${t} hours"
+                  aria-selected=${this._selectedHour === t ? "true" : "false"}
+                >${this.use12h ? t : String(t).padStart(2, "0")}</button>
+              `)}
+            </div>
+          </div>
+
+          <div class="time-divider"></div>
+
+          <div class="time-column">
+            <span class="time-column-label">Min</span>
+            <div class="time-scroll">
+              ${c.map((t) => n`
+                <button
+                  class="time-option ${this._selectedMinute === t ? "selected" : ""}"
+                  @click=${(s) => {
+      s.stopPropagation(), this._selectMinute(t);
+    }}
+                  aria-label="${t} minutes"
+                  aria-selected=${this._selectedMinute === t ? "true" : "false"}
+                >${String(t).padStart(2, "0")}</button>
+              `)}
+            </div>
+          </div>
+
+          ${this.use12h ? n`
+            <div class="period-toggle">
+              <button class="period-btn ${this._period === "AM" ? "active" : ""}" @click=${(t) => {
+      t.stopPropagation(), this._setPeriod("AM");
+    }}>AM</button>
+              <button class="period-btn ${this._period === "PM" ? "active" : ""}" @click=${(t) => {
+      t.stopPropagation(), this._setPeriod("PM");
+    }}>PM</button>
+            </div>
+          ` : p}
+        </div>
+      </div>
+      ${this.helper ? n`<div class="helper">${this.helper}</div>` : p}
+    `;
+  }
+};
+r.styles = [f, b, u`
+    :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 { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .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); }
+
+    /* ── Icon panel ── */
+    .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);
+    }
+
+    /* ── Dropdown ── */
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--cg-z-index-200);
+      min-width: 240px;
+      margin-top: var(--cg-spacing-4);
+      padding: var(--cg-spacing-16);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      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;
+    }
+
+    /* ── Time columns ── */
+    .time-columns {
+      display: flex;
+      gap: var(--cg-spacing-8);
+    }
+
+    .time-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .time-column-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-8);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .time-scroll {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+      max-height: 200px;
+      overflow-y: auto;
+      width: 100%;
+      scrollbar-width: thin;
+      scrollbar-color: var(--cg-color-input-border-default) transparent;
+    }
+
+    .time-option {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--cg-spacing-32);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      font-variant-numeric: tabular-nums;
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .time-option:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .time-option:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .time-option.selected {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .time-option.selected:hover {
+      background: var(--cg-color-action-primary-background-default);
+    }
+    .time-option:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Period toggle (AM/PM) ── */
+    .period-toggle {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+      align-items: center;
+      padding-top: var(--cg-spacing-24);
+    }
+    .period-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-48);
+      height: var(--cg-spacing-32);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      background: transparent;
+      color: var(--cg-color-surface-container-text);
+      font-size: var(--cg-font-size-xs);
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .period-btn:hover { border-color: var(--cg-color-input-border-hover); }
+    .period-btn.active {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-background-default);
+    }
+
+    /* ── Divider ── */
+    .time-divider {
+      width: var(--cg-border-width-50);
+      align-self: stretch;
+      background: var(--cg-color-input-border-default);
+      margin: var(--cg-spacing-24) 0 0;
+    }
+
+    /* ── 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); }
+  `];
+o([
+  a()
+], r.prototype, "label", 2);
+o([
+  a()
+], r.prototype, "value", 2);
+o([
+  a()
+], r.prototype, "placeholder", 2);
+o([
+  a()
+], r.prototype, "name", 2);
+o([
+  a()
+], r.prototype, "helper", 2);
+o([
+  a({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  a({ type: Boolean })
+], r.prototype, "disabled", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+o([
+  a({ type: Boolean })
+], r.prototype, "use12h", 2);
+o([
+  a({ type: Number })
+], r.prototype, "step", 2);
+o([
+  l()
+], r.prototype, "_open", 2);
+o([
+  l()
+], r.prototype, "_selectedHour", 2);
+o([
+  l()
+], r.prototype, "_selectedMinute", 2);
+o([
+  l()
+], r.prototype, "_period", 2);
+r = o([
+  v("cg-time-picker")
+], r);
+export {
+  r as CgTimePicker
+};
+//# sourceMappingURL=cg-time-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-time-picker.js","sources":["../../../src/components/cg-time-picker/cg-time-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';\n\n/**\n * @element cg-time-picker\n * Time picker with hour/minute grid dropdown, following cg-input/cg-select/cg-date-picker styling.\n *\n * @example\n * ```html\n * <cg-time-picker label=\"Start time\" placeholder=\"Pick a time\"></cg-time-picker>\n * <cg-time-picker label=\"Meeting\" value=\"14:30\" step=\"15\"></cg-time-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When a time is selected\n */\n@customElement('cg-time-picker')\nexport class CgTimePicker 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 { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .trigger.open { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\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    /* ── Icon panel ── */\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    /* ── Dropdown ── */\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      min-width: 240px;\n      margin-top: var(--cg-spacing-4);\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\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    /* ── Time columns ── */\n    .time-columns {\n      display: flex;\n      gap: var(--cg-spacing-8);\n    }\n\n    .time-column {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n    .time-column-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-8);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .time-scroll {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      max-height: 200px;\n      overflow-y: auto;\n      width: 100%;\n      scrollbar-width: thin;\n      scrollbar-color: var(--cg-color-input-border-default) transparent;\n    }\n\n    .time-option {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-32);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      font-variant-numeric: tabular-nums;\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .time-option:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .time-option:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .time-option.selected {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .time-option.selected:hover {\n      background: var(--cg-color-action-primary-background-default);\n    }\n    .time-option:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Period toggle (AM/PM) ── */\n    .period-toggle {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n      align-items: center;\n      padding-top: var(--cg-spacing-24);\n    }\n    .period-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-48);\n      height: var(--cg-spacing-32);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      background: transparent;\n      color: var(--cg-color-surface-container-text);\n      font-size: var(--cg-font-size-xs);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .period-btn:hover { border-color: var(--cg-color-input-border-hover); }\n    .period-btn.active {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Divider ── */\n    .time-divider {\n      width: var(--cg-border-width-50);\n      align-self: stretch;\n      background: var(--cg-color-input-border-default);\n      margin: var(--cg-spacing-24) 0 0;\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 time';\n  @property() name = '';\n  @property() helper = '';\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  /** Use 12-hour format with AM/PM toggle */\n  @property({ type: Boolean }) use12h = false;\n  /** Minute step interval (1, 5, 10, 15, 30) */\n  @property({ type: Number }) step = 5;\n\n  @state() private _open = false;\n  @state() private _selectedHour = -1;\n  @state() private _selectedMinute = -1;\n  @state() private _period: 'AM' | 'PM' = 'AM';\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open && this.value) {\n      this._parseValue();\n    }\n  }\n\n  private _close() { this._open = false; }\n\n  private _parseValue() {\n    if (!this.value) return;\n    const [h, m] = this.value.split(':').map(Number);\n    if (this.use12h) {\n      this._period = h! >= 12 ? 'PM' : 'AM';\n      this._selectedHour = h! === 0 ? 12 : h! > 12 ? h! - 12 : h!;\n    } else {\n      this._selectedHour = h!;\n    }\n    this._selectedMinute = m!;\n  }\n\n  private _selectHour(h: number) {\n    this._selectedHour = h;\n    this._emitValue();\n  }\n\n  private _selectMinute(m: number) {\n    this._selectedMinute = m;\n    this._emitValue();\n  }\n\n  private _setPeriod(p: 'AM' | 'PM') {\n    this._period = p;\n    if (this._selectedHour >= 0) this._emitValue();\n  }\n\n  private _emitValue() {\n    if (this._selectedHour < 0 || this._selectedMinute < 0) return;\n\n    let h = this._selectedHour;\n    if (this.use12h) {\n      if (this._period === 'AM' && h === 12) h = 0;\n      else if (this._period === 'PM' && h !== 12) h += 12;\n    }\n\n    this.value = `${String(h).padStart(2, '0')}:${String(this._selectedMinute).padStart(2, '0')}`;\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 [h, m] = this.value.split(':').map(Number);\n    if (this.use12h) {\n      const period = h! >= 12 ? 'PM' : 'AM';\n      const h12 = h! === 0 ? 12 : h! > 12 ? h! - 12 : h!;\n      return `${h12}:${String(m).padStart(2, '0')} ${period}`;\n    }\n    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n  }\n\n  private _getHours(): number[] {\n    if (this.use12h) return Array.from({ length: 12 }, (_, i) => i + 1);\n    return Array.from({ length: 24 }, (_, i) => i);\n  }\n\n  private _getMinutes(): number[] {\n    const s = Math.max(1, Math.min(30, this.step));\n    return Array.from({ length: Math.ceil(60 / s) }, (_, i) => i * s);\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() { super.connectedCallback(); document.addEventListener('click', this._handleClickOutside); }\n  override disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleClickOutside); }\n\n  override render() {\n    const display = this._formatDisplay();\n    const hours = this._getHours();\n    const minutes = this._getMinutes();\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 || 'Time 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            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <polyline points=\"12 6 12 12 16 14\"></polyline>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">\n          ${display || this.placeholder}\n        </span>\n      </div>\n\n      <div class=\"dropdown ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Time selector\">\n        <div class=\"time-columns\">\n          <div class=\"time-column\">\n            <span class=\"time-column-label\">Hour</span>\n            <div class=\"time-scroll\">\n              ${hours.map(h => html`\n                <button\n                  class=\"time-option ${this._selectedHour === h ? 'selected' : ''}\"\n                  @click=${(e: Event) => { e.stopPropagation(); this._selectHour(h); }}\n                  aria-label=\"${h} hours\"\n                  aria-selected=${this._selectedHour === h ? 'true' : 'false'}\n                >${this.use12h ? h : String(h).padStart(2, '0')}</button>\n              `)}\n            </div>\n          </div>\n\n          <div class=\"time-divider\"></div>\n\n          <div class=\"time-column\">\n            <span class=\"time-column-label\">Min</span>\n            <div class=\"time-scroll\">\n              ${minutes.map(m => html`\n                <button\n                  class=\"time-option ${this._selectedMinute === m ? 'selected' : ''}\"\n                  @click=${(e: Event) => { e.stopPropagation(); this._selectMinute(m); }}\n                  aria-label=\"${m} minutes\"\n                  aria-selected=${this._selectedMinute === m ? 'true' : 'false'}\n                >${String(m).padStart(2, '0')}</button>\n              `)}\n            </div>\n          </div>\n\n          ${this.use12h ? html`\n            <div class=\"period-toggle\">\n              <button class=\"period-btn ${this._period === 'AM' ? 'active' : ''}\" @click=${(e: Event) => { e.stopPropagation(); this._setPeriod('AM'); }}>AM</button>\n              <button class=\"period-btn ${this._period === 'PM' ? 'active' : ''}\" @click=${(e: Event) => { e.stopPropagation(); this._setPeriod('PM'); }}>PM</button>\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-time-picker': CgTimePicker; }\n}\n"],"names":["CgTimePicker","LitElement","h","m","p","period","_","s","i","display","hours","minutes","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+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

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

@@ -0,0 +1,131 @@
+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