@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-date-time-picker.js","sources":["../../../src/components/cg-date-time-picker/cg-date-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-date-time-picker\n * Single-trigger date+time picker. One dropdown with calendar and time columns side by side.\n *\n * @example\n * ```html\n * <cg-date-time-picker label=\"Event start\"></cg-date-time-picker>\n * <cg-date-time-picker label=\"Deadline\" value=\"2026-04-06T14:30\" use12h></cg-date-time-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string, date: string, time: string}>} cg-change - When date or time changes\n */\n@customElement('cg-date-time-picker')\nexport class CgDateTimePicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; }\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    /* ── 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    :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    :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 { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .trigger-text {\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Dropdown ── */\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      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 { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }\n\n    .dropdown-inner {\n      display: flex;\n      gap: var(--cg-spacing-16);\n    }\n\n    /* ── Calendar side ── */\n    .cal-side { min-width: 252px; }\n\n    .cal-header {\n      display: flex; align-items: center; justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .cal-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .cal-nav { display: flex; align-items: center; gap: var(--cg-spacing-4); }\n    .cal-btn {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32);\n      border: none; background: transparent; color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-50); cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .cal-btn:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .cal-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .cal-btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--cg-spacing-4); }\n    .cal-weekday {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder); text-align: center; padding: var(--cg-spacing-4) 0;\n    }\n\n    .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cg-spacing-2); }\n    .cal-day {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32); margin: 0 auto;\n      border: none; background: transparent; color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs); font-family: inherit;\n      border-radius: var(--cg-border-radius-50); 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    .cal-day:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .cal-day:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .cal-day.today { border: var(--cg-border-width-50) solid var(--cg-color-input-border-focus); font-weight: var(--cg-font-weight-semibold); }\n    .cal-day.selected { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }\n    .cal-day.selected:hover { background: var(--cg-color-action-primary-background-default); }\n    .cal-day.outside { color: var(--cg-color-input-text-placeholder); opacity: 0.5; }\n    .cal-day.disabled-day { opacity: 0.3; pointer-events: none; }\n    .cal-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n\n    /* ── Divider ── */\n    .panel-divider {\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-input-border-default);\n      align-self: stretch;\n    }\n\n    /* ── Time side ── */\n    .time-side { min-width: 100px; display: flex; flex-direction: column; }\n    .time-side-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text); margin-bottom: var(--cg-spacing-12);\n    }\n    .time-columns { display: flex; gap: var(--cg-spacing-8); flex: 1; }\n\n    .time-column { flex: 1; display: flex; flex-direction: column; align-items: center; }\n    .time-column-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder); margin-bottom: var(--cg-spacing-8);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .time-scroll {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-2);\n      max-height: 200px; overflow-y: auto; width: 100%;\n      scrollbar-width: thin; scrollbar-color: var(--cg-color-input-border-default) transparent;\n    }\n    .time-option {\n      display: flex; align-items: center; justify-content: center;\n      height: var(--cg-spacing-32); border: none; background: transparent;\n      color: var(--cg-color-surface-base-text); font-size: var(--cg-font-size-sm);\n      font-family: inherit; font-variant-numeric: tabular-nums;\n      border-radius: var(--cg-border-radius-50); 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 { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }\n    .time-option.selected:hover { background: var(--cg-color-action-primary-background-default); }\n    .time-option:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n\n    .time-col-divider {\n      width: var(--cg-border-width-50); background: var(--cg-color-input-border-default);\n      align-self: stretch; margin-top: var(--cg-spacing-24);\n    }\n\n    .period-toggle {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-4);\n      align-items: center; padding-top: var(--cg-spacing-24);\n    }\n    .period-btn {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-48); height: var(--cg-spacing-32);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      background: transparent; color: var(--cg-color-surface-container-text);\n      font-size: var(--cg-font-size-xs); font-family: inherit; font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-50); 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    /* ── Helper ── */\n    .helper {\n      font-size: var(--cg-font-size-xs); 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 & time';\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  @property({ type: Boolean }) use12h = false;\n  @property({ type: Number }) step = 5;\n\n  @state() private _open = false;\n  @state() private _viewYear = new Date().getFullYear();\n  @state() private _viewMonth = new Date().getMonth();\n  @state() private _selectedHour = -1;\n  @state() private _selectedMinute = -1;\n  @state() private _period: 'AM' | 'PM' = 'AM';\n\n  private _weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n  private _monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n  // ── Parsing ──\n  private get _date(): string {\n    if (!this.value) return '';\n    return this.value.split('T')[0] ?? '';\n  }\n  private get _time(): string {\n    if (!this.value || !this.value.includes('T')) return '';\n    return this.value.split('T')[1] ?? '';\n  }\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) {\n      if (this._date) {\n        const d = new Date(this._date + 'T00:00:00');\n        this._viewYear = d.getFullYear();\n        this._viewMonth = d.getMonth();\n      }\n      if (this._time) {\n        const [h, m] = this._time.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  }\n  private _close() { this._open = false; }\n\n  // ── Calendar ──\n  private _prevMonth() { if (this._viewMonth === 0) { this._viewMonth = 11; this._viewYear--; } else { this._viewMonth--; } }\n  private _nextMonth() { if (this._viewMonth === 11) { this._viewMonth = 0; this._viewYear++; } else { this._viewMonth++; } }\n\n  private _selectDay(year: number, month: number, day: number) {\n    const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n    const time = this._buildTimeString();\n    this.value = `${date}T${time}`;\n    this._emit();\n  }\n\n  private _isDisabledDate(y: number, m: number, d: number): boolean {\n    const s = `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n    if (this.min && s < this.min.split('T')[0]!) return true;\n    if (this.max && s > this.max.split('T')[0]!) return true;\n    return false;\n  }\n\n  private _getDays() {\n    const year = this._viewYear;\n    const month = this._viewMonth;\n    const firstDay = new Date(year, month, 1).getDay();\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const daysInPrev = new Date(year, month, 0).getDate();\n    const today = new Date();\n    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;\n\n    const days: { day: number; month: number; year: number; outside: boolean; today: boolean; selected: boolean; disabled: boolean }[] = [];\n\n    for (let i = firstDay - 1; i >= 0; i--) {\n      const d = daysInPrev - i; const pm = month === 0 ? 11 : month - 1; const py = month === 0 ? year - 1 : year;\n      const ds = `${py}-${String(pm + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month: pm, year: py, outside: true, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(py, pm, d) });\n    }\n    for (let d = 1; d <= daysInMonth; d++) {\n      const ds = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month, year, outside: false, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(year, month, d) });\n    }\n    const remaining = 42 - days.length;\n    for (let d = 1; d <= remaining; d++) {\n      const nm = month === 11 ? 0 : month + 1; const ny = month === 11 ? year + 1 : year;\n      const ds = `${ny}-${String(nm + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month: nm, year: ny, outside: true, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(ny, nm, d) });\n    }\n    return days;\n  }\n\n  // ── Time ──\n  private _getHours(): number[] {\n    return this.use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);\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 _selectHour(h: number) { this._selectedHour = h; this._updateTimeInValue(); }\n  private _selectMinute(m: number) { this._selectedMinute = m; this._updateTimeInValue(); }\n  private _setPeriod(p: 'AM' | 'PM') { this._period = p; if (this._selectedHour >= 0) this._updateTimeInValue(); }\n\n  private _buildTimeString(): string {\n    if (this._selectedHour < 0 || this._selectedMinute < 0) return '00:00';\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    return `${String(h).padStart(2, '0')}:${String(this._selectedMinute).padStart(2, '0')}`;\n  }\n\n  private _updateTimeInValue() {\n    if (this._selectedHour < 0 || this._selectedMinute < 0) return;\n    const date = this._date || new Date().toISOString().slice(0, 10);\n    const time = this._buildTimeString();\n    this.value = `${date}T${time}`;\n    this._emit();\n  }\n\n  private _emit() {\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value, date: this._date, time: this._time },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  // ── Display ──\n  private _formatDisplay(): string {\n    if (!this.value) return '';\n    const parts: string[] = [];\n    if (this._date) {\n      const d = new Date(this._date + 'T00:00:00');\n      parts.push(d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }));\n    }\n    if (this._time) {\n      const [h, m] = this._time.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        parts.push(`${h12}:${String(m).padStart(2, '0')} ${period}`);\n      } else {\n        parts.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);\n      }\n    }\n    return parts.join(', ');\n  }\n\n  private _handleClickOutside = (e: Event) => { if (!e.composedPath().includes(this)) this._close(); };\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if ((e.key === 'Enter' || e.key === ' ') && !this._open) { e.preventDefault(); this._toggle(); }\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 days = this._getDays();\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 || 'Date and 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            <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            <circle cx=\"16\" cy=\"16\" r=\"2.5\"></circle>\n            <polyline points=\"16 14.5 16 16 17 16.5\"></polyline>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">${display || this.placeholder}</span>\n      </div>\n\n      <div class=\"dropdown ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Date and time selector\">\n        <div class=\"dropdown-inner\">\n          <!-- Calendar -->\n          <div class=\"cal-side\">\n            <div class=\"cal-header\">\n              <button class=\"cal-btn\" @click=${this._prevMonth} aria-label=\"Previous month\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n              </button>\n              <span class=\"cal-title\">${this._monthNames[this._viewMonth]} ${this._viewYear}</span>\n              <button class=\"cal-btn\" @click=${this._nextMonth} aria-label=\"Next month\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n              </button>\n            </div>\n            <div class=\"cal-weekdays\">${this._weekdays.map(d => html`<span class=\"cal-weekday\">${d}</span>`)}</div>\n            <div class=\"cal-days\">\n              ${days.map(d => html`\n                <button class=\"cal-day ${d.today ? 'today' : ''} ${d.selected ? 'selected' : ''} ${d.outside ? 'outside' : ''} ${d.disabled ? 'disabled-day' : ''}\"\n                  @click=${(e: Event) => { e.stopPropagation(); this._selectDay(d.year, d.month, d.day); }}\n                  ?disabled=${d.disabled} aria-label=\"${d.day} ${this._monthNames[d.month]} ${d.year}\" aria-selected=${d.selected ? 'true' : 'false'}\n                >${d.day}</button>\n              `)}\n            </div>\n          </div>\n\n          <div class=\"panel-divider\"></div>\n\n          <!-- Time -->\n          <div class=\"time-side\">\n            <span class=\"time-side-label\">Time</span>\n            <div class=\"time-columns\">\n              <div class=\"time-column\">\n                <span class=\"time-column-label\">Hr</span>\n                <div class=\"time-scroll\">\n                  ${hours.map(h => html`\n                    <button class=\"time-option ${this._selectedHour === h ? 'selected' : ''}\"\n                      @click=${(e: Event) => { e.stopPropagation(); this._selectHour(h); }}\n                      aria-selected=${this._selectedHour === h ? 'true' : 'false'}\n                    >${this.use12h ? h : String(h).padStart(2, '0')}</button>\n                  `)}\n                </div>\n              </div>\n              <div class=\"time-col-divider\"></div>\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 class=\"time-option ${this._selectedMinute === m ? 'selected' : ''}\"\n                      @click=${(e: Event) => { e.stopPropagation(); this._selectMinute(m); }}\n                      aria-selected=${this._selectedMinute === m ? 'true' : 'false'}\n                    >${String(m).padStart(2, '0')}</button>\n                  `)}\n                </div>\n              </div>\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        </div>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-date-time-picker': CgDateTimePicker; }\n}\n"],"names":["CgDateTimePicker","LitElement","e","d","h","m","year","month","day","date","time","y","firstDay","daysInMonth","daysInPrev","today","todayStr","days","i","pm","py","ds","remaining","nm","ny","_","s","p","parts","period","h12","display","hours","minutes","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-date-time-picker.js","sources":["../../../src/components/cg-date-time-picker/cg-date-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-date-time-picker\n * Single-trigger date+time picker. One dropdown with calendar and time columns side by side.\n *\n * @example\n * ```html\n * <cg-date-time-picker label=\"Event start\"></cg-date-time-picker>\n * <cg-date-time-picker label=\"Deadline\" value=\"2026-04-06T14:30\" use12h></cg-date-time-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string, date: string, time: string}>} cg-change - When date or time changes\n */\n@customElement('cg-date-time-picker')\nexport class CgDateTimePicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; }\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    /* ── 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    :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    :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 { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .trigger-text {\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Dropdown ── */\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      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 { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }\n\n    .dropdown-inner {\n      display: flex;\n      gap: var(--cg-spacing-16);\n    }\n\n    /* ── Calendar side ── */\n    .cal-side { min-width: 252px; }\n\n    .cal-header {\n      display: flex; align-items: center; justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .cal-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .cal-nav { display: flex; align-items: center; gap: var(--cg-spacing-4); }\n    .cal-btn {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32);\n      border: none; background: transparent; color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-50); cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .cal-btn:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .cal-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .cal-btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--cg-spacing-4); }\n    .cal-weekday {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder); text-align: center; padding: var(--cg-spacing-4) 0;\n    }\n\n    .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cg-spacing-2); }\n    .cal-day {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32); margin: 0 auto;\n      border: none; background: transparent; color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs); font-family: inherit;\n      border-radius: var(--cg-border-radius-50); 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    .cal-day:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .cal-day:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .cal-day.today { border: var(--cg-border-width-50) solid var(--cg-color-input-border-focus); font-weight: var(--cg-font-weight-semibold); }\n    .cal-day.selected { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }\n    .cal-day.selected:hover { background: var(--cg-color-action-primary-background-default); }\n    .cal-day.outside { color: var(--cg-color-input-text-placeholder); opacity: 0.5; }\n    .cal-day.disabled-day { opacity: 0.3; pointer-events: none; }\n    .cal-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n\n    /* ── Divider ── */\n    .panel-divider {\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-input-border-default);\n      align-self: stretch;\n    }\n\n    /* ── Time side ── */\n    .time-side { min-width: 100px; display: flex; flex-direction: column; }\n    .time-side-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text); margin-bottom: var(--cg-spacing-12);\n    }\n    .time-columns { display: flex; gap: var(--cg-spacing-8); flex: 1; }\n\n    .time-column { flex: 1; display: flex; flex-direction: column; align-items: center; }\n    .time-column-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder); margin-bottom: var(--cg-spacing-8);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .time-scroll {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-2);\n      max-height: 200px; overflow-y: auto; width: 100%;\n      scrollbar-width: thin; scrollbar-color: var(--cg-color-input-border-default) transparent;\n    }\n    .time-option {\n      display: flex; align-items: center; justify-content: center;\n      height: var(--cg-spacing-32); border: none; background: transparent;\n      color: var(--cg-color-surface-base-text); font-size: var(--cg-font-size-sm);\n      font-family: inherit; font-variant-numeric: tabular-nums;\n      border-radius: var(--cg-border-radius-50); 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 { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }\n    .time-option.selected:hover { background: var(--cg-color-action-primary-background-default); }\n    .time-option:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n\n    .time-col-divider {\n      width: var(--cg-border-width-50); background: var(--cg-color-input-border-default);\n      align-self: stretch; margin-top: var(--cg-spacing-24);\n    }\n\n    .period-toggle {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-4);\n      align-items: center; padding-top: var(--cg-spacing-24);\n    }\n    .period-btn {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-48); height: var(--cg-spacing-32);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      background: transparent; color: var(--cg-color-surface-container-text);\n      font-size: var(--cg-font-size-xs); font-family: inherit; font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-50); 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    /* ── Helper ── */\n    .helper {\n      font-size: var(--cg-font-size-xs); 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 & time';\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  @property({ type: Boolean }) use12h = false;\n  @property({ type: Number }) step = 5;\n\n  @state() private _open = false;\n  @state() private _viewYear = new Date().getFullYear();\n  @state() private _viewMonth = new Date().getMonth();\n  @state() private _selectedHour = -1;\n  @state() private _selectedMinute = -1;\n  @state() private _period: 'AM' | 'PM' = 'AM';\n\n  private _weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n  private _monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n  // ── Parsing ──\n  private get _date(): string {\n    if (!this.value) return '';\n    return this.value.split('T')[0] ?? '';\n  }\n  private get _time(): string {\n    if (!this.value || !this.value.includes('T')) return '';\n    return this.value.split('T')[1] ?? '';\n  }\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) {\n      if (this._date) {\n        const d = new Date(this._date + 'T00:00:00');\n        this._viewYear = d.getFullYear();\n        this._viewMonth = d.getMonth();\n      }\n      if (this._time) {\n        const [h, m] = this._time.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  }\n  private _close() { this._open = false; }\n\n  // ── Calendar ──\n  private _prevMonth() { if (this._viewMonth === 0) { this._viewMonth = 11; this._viewYear--; } else { this._viewMonth--; } }\n  private _nextMonth() { if (this._viewMonth === 11) { this._viewMonth = 0; this._viewYear++; } else { this._viewMonth++; } }\n\n  private _selectDay(year: number, month: number, day: number) {\n    const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n    const time = this._buildTimeString();\n    this.value = `${date}T${time}`;\n    this._emit();\n  }\n\n  private _isDisabledDate(y: number, m: number, d: number): boolean {\n    const s = `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n    if (this.min && s < this.min.split('T')[0]!) return true;\n    if (this.max && s > this.max.split('T')[0]!) return true;\n    return false;\n  }\n\n  private _getDays() {\n    const year = this._viewYear;\n    const month = this._viewMonth;\n    const firstDay = new Date(year, month, 1).getDay();\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const daysInPrev = new Date(year, month, 0).getDate();\n    const today = new Date();\n    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;\n\n    const days: { day: number; month: number; year: number; outside: boolean; today: boolean; selected: boolean; disabled: boolean }[] = [];\n\n    for (let i = firstDay - 1; i >= 0; i--) {\n      const d = daysInPrev - i; const pm = month === 0 ? 11 : month - 1; const py = month === 0 ? year - 1 : year;\n      const ds = `${py}-${String(pm + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month: pm, year: py, outside: true, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(py, pm, d) });\n    }\n    for (let d = 1; d <= daysInMonth; d++) {\n      const ds = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month, year, outside: false, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(year, month, d) });\n    }\n    const remaining = 42 - days.length;\n    for (let d = 1; d <= remaining; d++) {\n      const nm = month === 11 ? 0 : month + 1; const ny = month === 11 ? year + 1 : year;\n      const ds = `${ny}-${String(nm + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n      days.push({ day: d, month: nm, year: ny, outside: true, today: ds === todayStr, selected: this._date === ds, disabled: this._isDisabledDate(ny, nm, d) });\n    }\n    return days;\n  }\n\n  // ── Time ──\n  private _getHours(): number[] {\n    return this.use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);\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 _selectHour(h: number) { this._selectedHour = h; this._updateTimeInValue(); }\n  private _selectMinute(m: number) { this._selectedMinute = m; this._updateTimeInValue(); }\n  private _setPeriod(p: 'AM' | 'PM') { this._period = p; if (this._selectedHour >= 0) this._updateTimeInValue(); }\n\n  private _buildTimeString(): string {\n    if (this._selectedHour < 0 || this._selectedMinute < 0) return '00:00';\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    return `${String(h).padStart(2, '0')}:${String(this._selectedMinute).padStart(2, '0')}`;\n  }\n\n  private _updateTimeInValue() {\n    if (this._selectedHour < 0 || this._selectedMinute < 0) return;\n    const date = this._date || new Date().toISOString().slice(0, 10);\n    const time = this._buildTimeString();\n    this.value = `${date}T${time}`;\n    this._emit();\n  }\n\n  private _emit() {\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value, date: this._date, time: this._time },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  // ── Display ──\n  private _formatDisplay(): string {\n    if (!this.value) return '';\n    const parts: string[] = [];\n    if (this._date) {\n      const d = new Date(this._date + 'T00:00:00');\n      parts.push(d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }));\n    }\n    if (this._time) {\n      const [h, m] = this._time.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        parts.push(`${h12}:${String(m).padStart(2, '0')} ${period}`);\n      } else {\n        parts.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);\n      }\n    }\n    return parts.join(', ');\n  }\n\n  private _handleClickOutside = (e: Event) => { if (!e.composedPath().includes(this)) this._close(); };\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if ((e.key === 'Enter' || e.key === ' ') && !this._open) { e.preventDefault(); this._toggle(); }\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 days = this._getDays();\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-disabled=${this.disabled ? 'true' : nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-haspopup=\"dialog\"\n        aria-label=${this.label || 'Date and 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            <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            <circle cx=\"16\" cy=\"16\" r=\"2.5\"></circle>\n            <polyline points=\"16 14.5 16 16 17 16.5\"></polyline>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">${display || this.placeholder}</span>\n      </div>\n\n      <div class=\"dropdown ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Date and time selector\">\n        <div class=\"dropdown-inner\">\n          <!-- Calendar -->\n          <div class=\"cal-side\">\n            <div class=\"cal-header\">\n              <button class=\"cal-btn\" @click=${this._prevMonth} aria-label=\"Previous month\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n              </button>\n              <span class=\"cal-title\">${this._monthNames[this._viewMonth]} ${this._viewYear}</span>\n              <button class=\"cal-btn\" @click=${this._nextMonth} aria-label=\"Next month\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n              </button>\n            </div>\n            <div class=\"cal-weekdays\">${this._weekdays.map(d => html`<span class=\"cal-weekday\">${d}</span>`)}</div>\n            <div class=\"cal-days\">\n              ${days.map(d => html`\n                <button class=\"cal-day ${d.today ? 'today' : ''} ${d.selected ? 'selected' : ''} ${d.outside ? 'outside' : ''} ${d.disabled ? 'disabled-day' : ''}\"\n                  @click=${(e: Event) => { e.stopPropagation(); this._selectDay(d.year, d.month, d.day); }}\n                  ?disabled=${d.disabled} aria-label=\"${d.day} ${this._monthNames[d.month]} ${d.year}\" aria-selected=${d.selected ? 'true' : 'false'}\n                >${d.day}</button>\n              `)}\n            </div>\n          </div>\n\n          <div class=\"panel-divider\"></div>\n\n          <!-- Time -->\n          <div class=\"time-side\">\n            <span class=\"time-side-label\">Time</span>\n            <div class=\"time-columns\">\n              <div class=\"time-column\">\n                <span class=\"time-column-label\">Hr</span>\n                <div class=\"time-scroll\">\n                  ${hours.map(h => html`\n                    <button class=\"time-option ${this._selectedHour === h ? 'selected' : ''}\"\n                      @click=${(e: Event) => { e.stopPropagation(); this._selectHour(h); }}\n                      aria-selected=${this._selectedHour === h ? 'true' : 'false'}\n                    >${this.use12h ? h : String(h).padStart(2, '0')}</button>\n                  `)}\n                </div>\n              </div>\n              <div class=\"time-col-divider\"></div>\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 class=\"time-option ${this._selectedMinute === m ? 'selected' : ''}\"\n                      @click=${(e: Event) => { e.stopPropagation(); this._selectMinute(m); }}\n                      aria-selected=${this._selectedMinute === m ? 'true' : 'false'}\n                    >${String(m).padStart(2, '0')}</button>\n                  `)}\n                </div>\n              </div>\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        </div>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-date-time-picker': CgDateTimePicker; }\n}\n"],"names":["CgDateTimePicker","LitElement","e","d","h","m","year","month","day","date","time","y","firstDay","daysInMonth","daysInPrev","today","todayStr","days","i","pm","py","ds","remaining","nm","ny","_","s","p","parts","period","h12","display","hours","minutes","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { css as u, LitElement as h, nothing as o, html as s } from "lit";
 import { property as a, state as p, customElement as v } from "lit/decorators.js";
-import { c as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-import { F as m } from "../../chunks/focus-trap-BdRNhSPD.js";
+import { c as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+import { F as m } from "../../chunks/focus-trap-vlQwKK-3.js";
 var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, n, c, d) => {
   for (var i = d > 1 ? void 0 : d ? y(n, c) : n, l = t.length - 1, g; l >= 0; l--)
     (g = t[l]) && (i = (d ? g(n, c, i) : g(i)) || i);
@@ -261,7 +261,7 @@ r.styles = [f, b, u`
       height: var(--cg-spacing-32);
       border: none;
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-action-tertiary-background-hover);
+      background: var(--cg-color-action-tertiary-background-default);
       color: var(--cg-color-surface-container-outlined);
       cursor: pointer;
       padding: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-drawer.js","sources":["../../../src/components/cg-drawer/cg-drawer.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { spinKeyframes, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-drawer\n * Slide-in side panel with backdrop, focus trap, and scroll lock.\n *\n * @example\n * ```html\n * <cg-drawer title=\"Settings\" side=\"right\" size=\"md\" open>\n *   <p>Drawer content here.</p>\n * </cg-drawer>\n * ```\n *\n * @slot - Default slot for drawer body content\n * @slot footer - Action buttons area below the body\n *\n * @fires {CustomEvent} cg-drawer-open - When the drawer opens\n * @fires {CustomEvent} cg-drawer-close - When the drawer closes\n * @fires {CustomEvent} cg-drawer-back - When the back button is clicked\n *\n * @cssprop --cg-color-modal-container-background - Panel background\n * @cssprop --cg-border-radius-200 - Panel border radius (28px)\n * @cssprop --cg-transition-easing-ease-out - Slide spring easing\n * @cssprop --cg-color-focus-ring - Close button focus ring\n */\n@customElement('cg-drawer')\nexport class CgDrawer extends LitElement {\n  static override styles = [spinKeyframes, reducedMotion, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    /* ── Backdrop ── */\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    /* ── Panel ──\n       The shadow is intentionally directional (set per side below) so it\n       only casts inward toward the page content, not into the viewport edge\n       it's flush against. Casting onto the off-edge side produces visible\n       compositing artifacts at certain zoom levels and burns paint cycles. */\n    .panel {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      z-index: var(--cg-z-index-top);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      overflow: hidden;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop { transition: opacity var(--cg-transition-duration-fast) ease; }\n      .panel { transition: transform var(--cg-transition-duration-fast) ease; }\n    }\n\n    /* ── Side: Left ── */\n    :host([side=\"left\"]) .panel {\n      left: 0;\n      border-left: none;\n      border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0;\n      transform: translateX(-100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"left\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Side: Right ── */\n    :host([side=\"right\"]) .panel {\n      right: 0;\n      border-right: none;\n      border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius);\n      transform: translateX(100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"right\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes drawer-exit-left {\n      from { transform: translateX(0); }\n      to { transform: translateX(-100%); }\n    }\n    @keyframes drawer-exit-right {\n      from { transform: translateX(0); }\n      to { transform: translateX(100%); }\n    }\n    @keyframes backdrop-exit {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n    :host([side=\"left\"]) .panel.closing {\n      animation: drawer-exit-left var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    :host([side=\"right\"]) .panel.closing {\n      animation: drawer-exit-right var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    .backdrop.closing {\n      pointer-events: auto;\n      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .panel { width: var(--cg-component-drawer-width-sm); max-width: 85vw; }\n    :host([size=\"md\"]) .panel { width: var(--cg-component-drawer-width-md); max-width: 85vw; }\n    :host([size=\"lg\"]) .panel { width: var(--cg-component-drawer-width-lg); max-width: 90vw; }\n    :host([size=\"full\"]) .panel {\n      width: 100vw;\n      max-width: 100vw;\n      border-radius: 0;\n    }\n\n    /* ── Header ── */\n    .drawer-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      flex-shrink: 0;\n    }\n\n    .drawer-header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .drawer-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: var(--cg-color-accent-text);\n    }\n\n    .drawer-title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-modal-header-text);\n      margin: 0;\n      line-height: var(--cg-line-height-snug);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Header icon buttons (close + back) share the same chrome — round,\n       muted at rest, outlined-text on hover, press-scale on active. */\n    .close-btn,\n    .back-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover,\n    .back-btn:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n    .close-btn:active,\n    .back-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .close-btn:focus-visible,\n    .back-btn:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* ── Body ── */\n    .drawer-body {\n      position: relative;\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-4) var(--cg-spacing-24) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Footer ── */\n    .drawer-footer {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n    .drawer-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-12);\n    }\n    .drawer-footer:empty,\n    .drawer-footer ::slotted(:empty) {\n      display: none;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"][side=\"left\"]) .panel { border-radius: 0; }\n    :host([rounded=\"none\"][side=\"right\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0; }\n    :host([rounded=\"sm\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-50) 0 0 var(--cg-border-radius-50); }\n    :host([rounded=\"md\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0; }\n    :host([rounded=\"md\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0; }\n    :host([rounded=\"lg\"][side=\"right\"]) .panel { border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius); }\n    :host([rounded=\"full\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    :host([rounded=\"full\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n\n    /* ── Loading overlay ── */\n    .drawer-loading-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      background: var(--cg-color-modal-container-background);\n    }\n    .drawer-spinner {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    .drawer-loading-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Error banner ── */\n    .drawer-error-banner {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: 0 var(--cg-spacing-24);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n    }\n    .drawer-error-icon {\n      flex-shrink: 0;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) side: 'left' | 'right' = 'right';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) override title = '';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) back = false;\n  @property({ type: Boolean }) closable = true;\n  @property({ type: Boolean }) persistent = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String }) error = '';\n\n  @state() private _hasFooter = false;\n  @state() private _closing = false;\n\n  private _previousOverflow = '';\n  private _focusTrap = new FocusTrap();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this._onOpen();\n      } else {\n        if (changed.get('open') === true) {\n          this._closing = true;\n          setTimeout(() => { this._closing = false; }, 200);\n        }\n        this._onClose();\n      }\n    }\n  }\n\n  private _onOpen() {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-drawer-open', { bubbles: true, composed: true }));\n\n    // Activate the shared focus trap synchronously — by the time `updated()`\n    // fires, the panel is already in the shadow DOM. (Wrapping in\n    // `updateComplete.then` would defer past the caller's `await` and miss\n    // events fired immediately after the open flip.)\n    const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n    if (panel) {\n      this._focusTrap.activate(panel, {\n        returnFocus: true,\n        handleEscape: this.closable,\n        onEscape: () => this._requestClose(),\n      });\n    }\n  }\n\n  private _onClose() {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-drawer-close', { bubbles: true, composed: true }));\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    // Only restore body overflow if we actually locked it\n    if (this.open) {\n      document.body.style.overflow = this._previousOverflow || '';\n    }\n  }\n\n  private _handleBack() {\n    this.dispatchEvent(new CustomEvent('cg-drawer-back', { bubbles: true, composed: true }));\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleBackdropClick() {\n    if (!this.persistent && this.closable) {\n      this._requestClose();\n    }\n  }\n\n  private _requestClose() {\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"backdrop ${this._closing ? 'closing' : ''}\"\n        @click=\"${this._handleBackdropClick}\"\n        aria-hidden=\"true\"\n      ></div>\n      <div\n        class=\"panel ${this._closing ? 'closing' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${this.title ? nothing : 'Side panel'}\"\n        aria-labelledby=\"${this.title ? 'drawer-title' : nothing}\"\n        tabindex=\"-1\"\n      >\n        ${this.title || this.closable || this.back ? html`\n          <div class=\"drawer-header\">\n            <div class=\"drawer-header-left\">\n              ${this.back ? html`\n                <button class=\"back-btn\" aria-label=\"Go back\" @click=\"${this._handleBack}\">\n                  <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n                </button>\n              ` : nothing}\n              ${this.icon ? html`\n                <span class=\"drawer-icon\"><cg-icon name=\"${this.icon}\" size=\"md\"></cg-icon></span>\n              ` : nothing}\n              <h2 class=\"drawer-title\" id=\"drawer-title\">${this.title}</h2>\n            </div>\n            ${this.closable ? html`\n              <button\n                class=\"close-btn\"\n                aria-label=\"Close panel\"\n                @click=\"${this._requestClose}\"\n              >\n                <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n              </button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        ${this.error ? html`\n          <div class=\"drawer-error-banner\" role=\"alert\">\n            <cg-icon class=\"drawer-error-icon\" name=\"warning\" size=\"sm\" color=\"danger\"></cg-icon>\n            <span>${this.error}</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"drawer-body\">\n          <slot></slot>\n          ${this.loading ? html`\n            <div class=\"drawer-loading-overlay\" aria-busy=\"true\" aria-label=\"Loading\">\n              <span class=\"drawer-spinner\"></span>\n              <span class=\"drawer-loading-text\">Loading...</span>\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"drawer-footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=\"${this._handleFooterSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-drawer': CgDrawer;\n  }\n}\n"],"names":["CgDrawer","LitElement","FocusTrap","changed","panel","e","slot","html","nothing","spinKeyframes","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;AA6BO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GA2QuC,KAAA,OAAO,IACR,KAAA,OAAyB,SACzB,KAAA,OAAoC,MAClD,KAAA,UAAgD,MACjD,KAAS,QAAQ,IACjB,KAAA,OAAO,IACN,KAAA,OAAO,IACP,KAAA,WAAW,IACX,KAAA,aAAa,IACE,KAAA,UAAU,IAC1B,KAAA,QAAQ,IAE3B,KAAQ,aAAa,IACrB,KAAQ,WAAW,IAE5B,KAAQ,oBAAoB,IAC5B,KAAQ,aAAa,IAAIC,EAAA;AAAA,EAAU;AAAA,EAE1B,QAAQC,GAA+B;AAC9C,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OACP,KAAK,QAAA,KAEDA,EAAQ,IAAI,MAAM,MAAM,OAC1B,KAAK,WAAW,IAChB,WAAW,MAAM;AAAE,WAAK,WAAW;AAAA,IAAO,GAAG,GAAG,IAElD,KAAK,SAAA;AAAA,EAGX;AAAA,EAEQ,UAAU;AAChB,SAAK,oBAAoB,SAAS,KAAK,MAAM,UAC7C,SAAS,KAAK,MAAM,WAAW,UAC/B,KAAK,cAAc,IAAI,YAAY,kBAAkB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAMvF,UAAMC,IAAQ,KAAK,YAAY,cAA2B,QAAQ;AAClE,IAAIA,KACF,KAAK,WAAW,SAASA,GAAO;AAAA,MAC9B,aAAa;AAAA,MACb,cAAc,KAAK;AAAA,MACnB,UAAU,MAAM,KAAK,cAAA;AAAA,IAAc,CACpC;AAAA,EAEL;AAAA,EAEQ,WAAW;AACjB,aAAS,KAAK,MAAM,WAAW,KAAK,mBACpC,KAAK,WAAW,WAAA,GAChB,KAAK,cAAc,IAAI,YAAY,mBAAmB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC1F;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA,GACN,KAAK,WAAW,WAAA,GAEZ,KAAK,SACP,SAAS,KAAK,MAAM,WAAW,KAAK,qBAAqB;AAAA,EAE7D;AAAA,EAEQ,cAAc;AACpB,SAAK,cAAc,IAAI,YAAY,kBAAkB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA,EAEQ,wBAAwBC,GAAU;AACxC,UAAMC,IAAOD,EAAE;AACf,SAAK,aAAaC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACnE;AAAA,EAEQ,uBAAuB;AAC7B,IAAI,CAAC,KAAK,cAAc,KAAK,YAC3B,KAAK,cAAA;AAAA,EAET;AAAA,EAEQ,gBAAgB;AACtB,SAAK,OAAO;AAAA,EACd;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,0BAEe,KAAK,WAAW,YAAY,EAAE;AAAA,kBACtC,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAIpB,KAAK,WAAW,YAAY,EAAE;AAAA;AAAA;AAAA,sBAG/B,KAAK,QAAQC,IAAU,YAAY;AAAA,2BAC9B,KAAK,QAAQ,iBAAiBA,CAAO;AAAA;AAAA;AAAA,UAGtD,KAAK,SAAS,KAAK,YAAY,KAAK,OAAOD;AAAA;AAAA;AAAA,gBAGrC,KAAK,OAAOA;AAAA,wEAC4C,KAAK,WAAW;AAAA;AAAA;AAAA,kBAGtEC,CAAO;AAAA,gBACT,KAAK,OAAOD;AAAA,2DAC+B,KAAK,IAAI;AAAA,kBAClDC,CAAO;AAAA,2DACkC,KAAK,KAAK;AAAA;AAAA,cAEvD,KAAK,WAAWD;AAAA;AAAA;AAAA;AAAA,0BAIJ,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,gBAI5BC,CAAO;AAAA;AAAA,YAEXA,CAAO;AAAA;AAAA,UAET,KAAK,QAAQD;AAAA;AAAA;AAAA,oBAGH,KAAK,KAAK;AAAA;AAAA,YAElBC,CAAO;AAAA;AAAA;AAAA;AAAA,YAIP,KAAK,UAAUD;AAAA;AAAA;AAAA;AAAA;AAAA,cAKbC,CAAO;AAAA;AAAA;AAAA,6CAGwB,CAAC,KAAK,UAAU;AAAA,6CAChB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIvE;AACF;AA/ZaR,EACK,SAAS,CAACS,GAAeC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwQvD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3Q/Bb,EA2QiC,WAAA,QAAA,CAAA;AACDY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5Q9Bb,EA4QgC,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7Q9Bb,EA6QgC,WAAA,QAAA,CAAA;AACdY,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9QhBb,EA8QkB,WAAA,WAAA,CAAA;AACQY,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Qfb,EA+Q0B,WAAA,SAAA,CAAA;AACTY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhRfb,EAgRiB,WAAA,QAAA,CAAA;AACCY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjRhBb,EAiRkB,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlRhBb,EAkRkB,WAAA,YAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnRhBb,EAmRkB,WAAA,cAAA,CAAA;AACeY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApR/Bb,EAoRiC,WAAA,WAAA,CAAA;AAChBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArRfb,EAqRiB,WAAA,SAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvRId,EAuRM,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxRId,EAwRM,WAAA,YAAA,CAAA;AAxRNA,IAANY,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbf,CAAA;"}
+{"version":3,"file":"cg-drawer.js","sources":["../../../src/components/cg-drawer/cg-drawer.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { spinKeyframes, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-drawer\n * Slide-in side panel with backdrop, focus trap, and scroll lock.\n *\n * @example\n * ```html\n * <cg-drawer title=\"Settings\" side=\"right\" size=\"md\" open>\n *   <p>Drawer content here.</p>\n * </cg-drawer>\n * ```\n *\n * @slot - Default slot for drawer body content\n * @slot footer - Action buttons area below the body\n *\n * @fires {CustomEvent} cg-drawer-open - When the drawer opens\n * @fires {CustomEvent} cg-drawer-close - When the drawer closes\n * @fires {CustomEvent} cg-drawer-back - When the back button is clicked\n *\n * @cssprop --cg-color-modal-container-background - Panel background\n * @cssprop --cg-border-radius-200 - Panel border radius (28px)\n * @cssprop --cg-transition-easing-ease-out - Slide spring easing\n * @cssprop --cg-color-focus-ring - Close button focus ring\n */\n@customElement('cg-drawer')\nexport class CgDrawer extends LitElement {\n  static override styles = [spinKeyframes, reducedMotion, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    /* ── Backdrop ── */\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    /* ── Panel ──\n       The shadow is intentionally directional (set per side below) so it\n       only casts inward toward the page content, not into the viewport edge\n       it's flush against. Casting onto the off-edge side produces visible\n       compositing artifacts at certain zoom levels and burns paint cycles. */\n    .panel {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      z-index: var(--cg-z-index-top);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      overflow: hidden;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop { transition: opacity var(--cg-transition-duration-fast) ease; }\n      .panel { transition: transform var(--cg-transition-duration-fast) ease; }\n    }\n\n    /* ── Side: Left ── */\n    :host([side=\"left\"]) .panel {\n      left: 0;\n      border-left: none;\n      border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0;\n      transform: translateX(-100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"left\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Side: Right ── */\n    :host([side=\"right\"]) .panel {\n      right: 0;\n      border-right: none;\n      border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius);\n      transform: translateX(100%);\n      box-shadow: var(--cg-shadow-elevation-xl);\n    }\n    :host([side=\"right\"][open]) .panel {\n      transform: translateX(0);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes drawer-exit-left {\n      from { transform: translateX(0); }\n      to { transform: translateX(-100%); }\n    }\n    @keyframes drawer-exit-right {\n      from { transform: translateX(0); }\n      to { transform: translateX(100%); }\n    }\n    @keyframes backdrop-exit {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n    :host([side=\"left\"]) .panel.closing {\n      animation: drawer-exit-left var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    :host([side=\"right\"]) .panel.closing {\n      animation: drawer-exit-right var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    .backdrop.closing {\n      pointer-events: auto;\n      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .panel { width: var(--cg-component-drawer-width-sm); max-width: 85vw; }\n    :host([size=\"md\"]) .panel { width: var(--cg-component-drawer-width-md); max-width: 85vw; }\n    :host([size=\"lg\"]) .panel { width: var(--cg-component-drawer-width-lg); max-width: 90vw; }\n    :host([size=\"full\"]) .panel {\n      width: 100vw;\n      max-width: 100vw;\n      border-radius: 0;\n    }\n\n    /* ── Header ── */\n    .drawer-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      flex-shrink: 0;\n    }\n\n    .drawer-header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .drawer-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: var(--cg-color-accent-text);\n    }\n\n    .drawer-title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-modal-header-text);\n      margin: 0;\n      line-height: var(--cg-line-height-snug);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Header icon buttons (close + back) share the same chrome — round,\n       muted at rest, outlined-text on hover, press-scale on active. */\n    .close-btn,\n    .back-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-default);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover,\n    .back-btn:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n    .close-btn:active,\n    .back-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .close-btn:focus-visible,\n    .back-btn:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* ── Body ── */\n    .drawer-body {\n      position: relative;\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-4) var(--cg-spacing-24) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Footer ── */\n    .drawer-footer {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n    .drawer-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-12);\n    }\n    .drawer-footer:empty,\n    .drawer-footer ::slotted(:empty) {\n      display: none;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"][side=\"left\"]) .panel { border-radius: 0; }\n    :host([rounded=\"none\"][side=\"right\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0; }\n    :host([rounded=\"sm\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-50) 0 0 var(--cg-border-radius-50); }\n    :host([rounded=\"md\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0; }\n    :host([rounded=\"md\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-component-drawer-radius) var(--cg-component-drawer-radius) 0; }\n    :host([rounded=\"lg\"][side=\"right\"]) .panel { border-radius: var(--cg-component-drawer-radius) 0 0 var(--cg-component-drawer-radius); }\n    :host([rounded=\"full\"][side=\"left\"]) .panel { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    :host([rounded=\"full\"][side=\"right\"]) .panel { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n\n    /* ── Loading overlay ── */\n    .drawer-loading-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      background: var(--cg-color-modal-container-background);\n    }\n    .drawer-spinner {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    .drawer-loading-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Error banner ── */\n    .drawer-error-banner {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: 0 var(--cg-spacing-24);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n    }\n    .drawer-error-icon {\n      flex-shrink: 0;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) side: 'left' | 'right' = 'right';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) override title = '';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) back = false;\n  @property({ type: Boolean }) closable = true;\n  @property({ type: Boolean }) persistent = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String }) error = '';\n\n  @state() private _hasFooter = false;\n  @state() private _closing = false;\n\n  private _previousOverflow = '';\n  private _focusTrap = new FocusTrap();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this._onOpen();\n      } else {\n        if (changed.get('open') === true) {\n          this._closing = true;\n          setTimeout(() => { this._closing = false; }, 200);\n        }\n        this._onClose();\n      }\n    }\n  }\n\n  private _onOpen() {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    this.dispatchEvent(new CustomEvent('cg-drawer-open', { bubbles: true, composed: true }));\n\n    // Activate the shared focus trap synchronously — by the time `updated()`\n    // fires, the panel is already in the shadow DOM. (Wrapping in\n    // `updateComplete.then` would defer past the caller's `await` and miss\n    // events fired immediately after the open flip.)\n    const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n    if (panel) {\n      this._focusTrap.activate(panel, {\n        returnFocus: true,\n        handleEscape: this.closable,\n        onEscape: () => this._requestClose(),\n      });\n    }\n  }\n\n  private _onClose() {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-drawer-close', { bubbles: true, composed: true }));\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n    // Only restore body overflow if we actually locked it\n    if (this.open) {\n      document.body.style.overflow = this._previousOverflow || '';\n    }\n  }\n\n  private _handleBack() {\n    this.dispatchEvent(new CustomEvent('cg-drawer-back', { bubbles: true, composed: true }));\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleBackdropClick() {\n    if (!this.persistent && this.closable) {\n      this._requestClose();\n    }\n  }\n\n  private _requestClose() {\n    this.open = false;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"backdrop ${this._closing ? 'closing' : ''}\"\n        @click=\"${this._handleBackdropClick}\"\n        aria-hidden=\"true\"\n      ></div>\n      <div\n        class=\"panel ${this._closing ? 'closing' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${this.title ? nothing : 'Side panel'}\"\n        aria-labelledby=\"${this.title ? 'drawer-title' : nothing}\"\n        tabindex=\"-1\"\n      >\n        ${this.title || this.closable || this.back ? html`\n          <div class=\"drawer-header\">\n            <div class=\"drawer-header-left\">\n              ${this.back ? html`\n                <button class=\"back-btn\" aria-label=\"Go back\" @click=\"${this._handleBack}\">\n                  <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n                </button>\n              ` : nothing}\n              ${this.icon ? html`\n                <span class=\"drawer-icon\"><cg-icon name=\"${this.icon}\" size=\"md\"></cg-icon></span>\n              ` : nothing}\n              <h2 class=\"drawer-title\" id=\"drawer-title\">${this.title}</h2>\n            </div>\n            ${this.closable ? html`\n              <button\n                class=\"close-btn\"\n                aria-label=\"Close panel\"\n                @click=\"${this._requestClose}\"\n              >\n                <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n              </button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        ${this.error ? html`\n          <div class=\"drawer-error-banner\" role=\"alert\">\n            <cg-icon class=\"drawer-error-icon\" name=\"warning\" size=\"sm\" color=\"danger\"></cg-icon>\n            <span>${this.error}</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"drawer-body\">\n          <slot></slot>\n          ${this.loading ? html`\n            <div class=\"drawer-loading-overlay\" aria-busy=\"true\" aria-label=\"Loading\">\n              <span class=\"drawer-spinner\"></span>\n              <span class=\"drawer-loading-text\">Loading...</span>\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"drawer-footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=\"${this._handleFooterSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-drawer': CgDrawer;\n  }\n}\n"],"names":["CgDrawer","LitElement","FocusTrap","changed","panel","e","slot","html","nothing","spinKeyframes","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwQvD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3Q/Bb,EA2QiC,WAAA,QAAA,CAAA;AACDY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5Q9Bb,EA4QgC,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7Q9Bb,EA6QgC,WAAA,QAAA,CAAA;AACdY,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9QhBb,EA8QkB,WAAA,WAAA,CAAA;AACQY,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Qfb,EA+Q0B,WAAA,SAAA,CAAA;AACTY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhRfb,EAgRiB,WAAA,QAAA,CAAA;AACCY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjRhBb,EAiRkB,WAAA,QAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlRhBb,EAkRkB,WAAA,YAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnRhBb,EAmRkB,WAAA,cAAA,CAAA;AACeY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApR/Bb,EAoRiC,WAAA,WAAA,CAAA;AAChBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArRfb,EAqRiB,WAAA,SAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvRId,EAuRM,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxRId,EAwRM,WAAA,YAAA,CAAA;AAxRNA,IAANY,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbf,CAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,qHAAqH;AACrH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA2EnB;IAEyC,IAAI,UAAS;IACd,QAAQ,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAkB;IACjG,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,YAAY,EAAE,CAAM;IACV,OAAO,UAAS;IAEnD,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAClB,OAAO,CAAC,KAAK,CAAe;IAE5C,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAcrC,oBAAoB;IAM7B,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,WAAW;IAUnB,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,cAAc;IAyCtB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,aAAa;IAcZ,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"cg-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,qHAAqH;AACrH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA0EnB;IAEyC,IAAI,UAAS;IACd,QAAQ,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAkB;IACjG,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,YAAY,EAAE,CAAM;IACV,OAAO,UAAS;IAEnD,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAClB,OAAO,CAAC,KAAK,CAAe;IAE5C,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAcrC,oBAAoB;IAM7B,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,WAAW;IAUnB,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,cAAc;IAyCtB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,aAAa;IAcZ,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -1,6 +1,6 @@
 import { css as g, LitElement as h, nothing as c, html as a } from "lit";
 import { property as l, state as u, query as m, customElement as f } from "lit/decorators.js";
-import { e as v, m as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { e as v, m as b } from "../../chunks/premium.css-DHekUEUt.js";
 import { b as _ } from "../../chunks/outside-click-CP1P1fK3.js";
 import { h as y } from "../../chunks/roving-index-BuO0tTba.js";
 var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, s, o, t) => {
@@ -125,7 +125,6 @@ let i = class extends h {
 };
 i.styles = [v, b, g`
     :host {
-      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       display: inline-block;
       position: relative;
       font-family: var(--cg-font-family-primary);

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

@@ -1 +1 @@
-{"version":3,"file":"cg-dropdown.js","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { entranceStagger, menuListStyles } from '../../styles/index.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\n/** Menu item for cg-dropdown, with id, label, optional icon, keyboard shortcut, disabled state, and divider flag. */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\n/**\n * @element cg-dropdown\n * Floating dropdown menu with scale+fade animation and full keyboard navigation.\n *\n * @example\n * ```html\n * <cg-dropdown\n *   position=\"bottom-start\"\n *   .items=${[{id:'edit',label:'Edit'},{id:'delete',label:'Delete'}]}\n * >\n *   <cg-button slot=\"trigger\">Actions <cg-icon slot=\"suffix\" name=\"chevron-down\" size=\"sm\"></cg-icon></cg-button>\n * </cg-dropdown>\n * ```\n *\n * @slot trigger - The element that toggles the dropdown on click\n *\n * @fires {CustomEvent} cg-dropdown-open - When the menu opens\n * @fires {CustomEvent} cg-dropdown-close - When the menu closes\n * @fires {CustomEvent<{id: string, label: string}>} cg-dropdown-select - When an item is selected\n *\n * @cssprop --cg-color-modal-container-background - Menu background\n * @cssprop --cg-border-radius-100 - Menu border radius (12px)\n * @cssprop --cg-color-focus-ring - Focus ring color\n */\n@customElement('cg-dropdown')\nexport class CgDropdown extends LitElement {\n  static override styles = [entranceStagger, menuListStyles, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: inline-block;\n      position: relative;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .trigger {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    /* Positioning — unique to cg-dropdown (absolute to host, not fixed) */\n    .menu {\n      position: absolute;\n      z-index: var(--cg-z-index-400);\n    }\n    :host([position=\"bottom-start\"]) .menu {\n      top: 100%;\n      left: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top left;\n    }\n    :host([position=\"bottom-end\"]) .menu {\n      top: 100%;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top right;\n    }\n    :host([position=\"top-start\"]) .menu {\n      bottom: 100%;\n      left: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom left;\n    }\n    :host([position=\"top-end\"]) .menu {\n      bottom: 100%;\n      right: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom right;\n    }\n\n    /* ── Loading state ── */\n    .menu-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .menu-loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* ── Empty state ── */\n    .menu-empty {\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* Rounded variants — inherited from menuListStyles */\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) position: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-start';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) items: DropdownItem[] = [];\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  @state() private _activeIndex = -1;\n  @state() private _closing = false;\n  @query('.menu') private _menu!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open') && !this.open && changed.get('open') === true) {\n      this._closing = true;\n      setTimeout(() => { this._closing = false; }, 100);\n    }\n    if (changed.has('open')) {\n      this._disposeOutsideClick?.();\n      this._disposeOutsideClick = null;\n      if (this.open) {\n        this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n  }\n\n  private _toggle() {\n    if (this.open) {\n      this._close();\n    } else {\n      this._open();\n    }\n  }\n\n  private _open() {\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-open', { bubbles: true, composed: true }));\n  }\n\n  private _close() {\n    this.open = false;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-close', { bubbles: true, composed: true }));\n  }\n\n  private _selectItem(item: DropdownItem) {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-select', {\n      bubbles: true,\n      composed: true,\n      detail: { id: item.id, label: item.label },\n    }));\n    this._close();\n  }\n\n  private get _enabledItems(): DropdownItem[] {\n    return this.items.filter(i => !i.divider && !i.disabled);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (!this.open) {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        this._open();\n        // Focus first item after open\n        this.updateComplete.then(() => {\n          this._activeIndex = 0;\n          this._focusActiveItem();\n        });\n      }\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      this._close();\n      return;\n    }\n\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.divider || i.disabled),\n      onSelect: item => {\n        this._selectItem(item);\n        this._focusTrigger();\n      },\n      onEscape: () => {\n        this._close();\n        this._focusTrigger();\n      },\n    });\n    if (handled) {\n      e.preventDefault();\n      if (this._activeIndex !== index) {\n        this._activeIndex = index;\n        this._focusActiveItem();\n      }\n    }\n  }\n\n  private _focusActiveItem() {\n    this.updateComplete.then(() => {\n      const items = this.shadowRoot?.querySelectorAll('.menu-item:not(.disabled)');\n      if (items && items[this._activeIndex]) {\n        (items[this._activeIndex] as HTMLElement).focus();\n      }\n    });\n  }\n\n  private _focusTrigger() {\n    this.updateComplete.then(() => {\n      const slot = this.shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n      const assigned = slot?.assignedElements?.() ?? [];\n      const focusable = assigned.find(el => (el as HTMLElement).focus) as HTMLElement | undefined;\n      if (focusable) {\n        focusable.focus();\n      } else {\n        const trigger = this.shadowRoot?.querySelector('.trigger') as HTMLElement;\n        trigger?.focus();\n      }\n    });\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${this.open}\"\n        @click=\"${this._toggle}\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        class=\"menu ${this._closing ? 'closing' : ''}\"\n        role=\"menu\"\n        aria-label=\"Dropdown menu\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        ${this.loading ? html`\n          <div class=\"menu-loading\" aria-busy=\"true\">\n            <span class=\"menu-loading-spinner\"></span>\n            <span>Loading...</span>\n          </div>\n        ` : this.items.length === 0 ? html`\n          <div class=\"menu-empty\">No items</div>\n        ` : nothing}\n        ${!this.loading ? this.items.map((item, index) => {\n          if (item.divider) {\n            return html`<div class=\"divider\" role=\"separator\"></div>`;\n          }\n          const enabledIndex = this._enabledItems.indexOf(item);\n          return html`\n            <button\n              class=\"menu-item ${item.disabled ? 'disabled' : ''} ${enabledIndex === this._activeIndex ? 'active' : ''}\"\n              role=\"menuitem\"\n              tabindex=\"${this.open && !item.disabled ? '0' : '-1'}\"\n              aria-disabled=\"${item.disabled ? 'true' : 'false'}\"\n              style=\"--stagger-index: ${index}\"\n              @click=\"${() => this._selectItem(item)}\"\n            >\n              ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=\"${item.icon}\" size=\"sm\"></cg-icon>` : nothing}\n              ${item.label}\n              ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n            </button>\n          `;\n        }) : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-dropdown': CgDropdown;\n  }\n}\n"],"names":["CgDropdown","LitElement","changed","bindOutsideClick","item","i","index","handled","handleRovingKey","items","focusable","el","html","nothing","enabledIndex","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-dropdown.js","sources":["../../../src/components/cg-dropdown/cg-dropdown.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { entranceStagger, menuListStyles } from '../../styles/index.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\n/** Menu item for cg-dropdown, with id, label, optional icon, keyboard shortcut, disabled state, and divider flag. */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\n/**\n * @element cg-dropdown\n * Floating dropdown menu with scale+fade animation and full keyboard navigation.\n *\n * @example\n * ```html\n * <cg-dropdown\n *   position=\"bottom-start\"\n *   .items=${[{id:'edit',label:'Edit'},{id:'delete',label:'Delete'}]}\n * >\n *   <cg-button slot=\"trigger\">Actions <cg-icon slot=\"suffix\" name=\"chevron-down\" size=\"sm\"></cg-icon></cg-button>\n * </cg-dropdown>\n * ```\n *\n * @slot trigger - The element that toggles the dropdown on click\n *\n * @fires {CustomEvent} cg-dropdown-open - When the menu opens\n * @fires {CustomEvent} cg-dropdown-close - When the menu closes\n * @fires {CustomEvent<{id: string, label: string}>} cg-dropdown-select - When an item is selected\n *\n * @cssprop --cg-color-modal-container-background - Menu background\n * @cssprop --cg-border-radius-100 - Menu border radius (12px)\n * @cssprop --cg-color-focus-ring - Focus ring color\n */\n@customElement('cg-dropdown')\nexport class CgDropdown extends LitElement {\n  static override styles = [entranceStagger, menuListStyles, css`\n    :host {\n      display: inline-block;\n      position: relative;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .trigger {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    /* Positioning — unique to cg-dropdown (absolute to host, not fixed) */\n    .menu {\n      position: absolute;\n      z-index: var(--cg-z-index-400);\n    }\n    :host([position=\"bottom-start\"]) .menu {\n      top: 100%;\n      left: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top left;\n    }\n    :host([position=\"bottom-end\"]) .menu {\n      top: 100%;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\n      transform-origin: top right;\n    }\n    :host([position=\"top-start\"]) .menu {\n      bottom: 100%;\n      left: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom left;\n    }\n    :host([position=\"top-end\"]) .menu {\n      bottom: 100%;\n      right: 0;\n      margin-bottom: var(--cg-spacing-4);\n      transform-origin: bottom right;\n    }\n\n    /* ── Loading state ── */\n    .menu-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .menu-loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* ── Empty state ── */\n    .menu-empty {\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* Rounded variants — inherited from menuListStyles */\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String, reflect: true }) position: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-start';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) items: DropdownItem[] = [];\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  @state() private _activeIndex = -1;\n  @state() private _closing = false;\n  @query('.menu') private _menu!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open') && !this.open && changed.get('open') === true) {\n      this._closing = true;\n      setTimeout(() => { this._closing = false; }, 100);\n    }\n    if (changed.has('open')) {\n      this._disposeOutsideClick?.();\n      this._disposeOutsideClick = null;\n      if (this.open) {\n        this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n  }\n\n  private _toggle() {\n    if (this.open) {\n      this._close();\n    } else {\n      this._open();\n    }\n  }\n\n  private _open() {\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-open', { bubbles: true, composed: true }));\n  }\n\n  private _close() {\n    this.open = false;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-close', { bubbles: true, composed: true }));\n  }\n\n  private _selectItem(item: DropdownItem) {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-dropdown-select', {\n      bubbles: true,\n      composed: true,\n      detail: { id: item.id, label: item.label },\n    }));\n    this._close();\n  }\n\n  private get _enabledItems(): DropdownItem[] {\n    return this.items.filter(i => !i.divider && !i.disabled);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (!this.open) {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        this._open();\n        // Focus first item after open\n        this.updateComplete.then(() => {\n          this._activeIndex = 0;\n          this._focusActiveItem();\n        });\n      }\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      this._close();\n      return;\n    }\n\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.divider || i.disabled),\n      onSelect: item => {\n        this._selectItem(item);\n        this._focusTrigger();\n      },\n      onEscape: () => {\n        this._close();\n        this._focusTrigger();\n      },\n    });\n    if (handled) {\n      e.preventDefault();\n      if (this._activeIndex !== index) {\n        this._activeIndex = index;\n        this._focusActiveItem();\n      }\n    }\n  }\n\n  private _focusActiveItem() {\n    this.updateComplete.then(() => {\n      const items = this.shadowRoot?.querySelectorAll('.menu-item:not(.disabled)');\n      if (items && items[this._activeIndex]) {\n        (items[this._activeIndex] as HTMLElement).focus();\n      }\n    });\n  }\n\n  private _focusTrigger() {\n    this.updateComplete.then(() => {\n      const slot = this.shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n      const assigned = slot?.assignedElements?.() ?? [];\n      const focusable = assigned.find(el => (el as HTMLElement).focus) as HTMLElement | undefined;\n      if (focusable) {\n        focusable.focus();\n      } else {\n        const trigger = this.shadowRoot?.querySelector('.trigger') as HTMLElement;\n        trigger?.focus();\n      }\n    });\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${this.open}\"\n        @click=\"${this._toggle}\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        class=\"menu ${this._closing ? 'closing' : ''}\"\n        role=\"menu\"\n        aria-label=\"Dropdown menu\"\n        @keydown=\"${this._handleKeydown}\"\n      >\n        ${this.loading ? html`\n          <div class=\"menu-loading\" aria-busy=\"true\">\n            <span class=\"menu-loading-spinner\"></span>\n            <span>Loading...</span>\n          </div>\n        ` : this.items.length === 0 ? html`\n          <div class=\"menu-empty\">No items</div>\n        ` : nothing}\n        ${!this.loading ? this.items.map((item, index) => {\n          if (item.divider) {\n            return html`<div class=\"divider\" role=\"separator\"></div>`;\n          }\n          const enabledIndex = this._enabledItems.indexOf(item);\n          return html`\n            <button\n              class=\"menu-item ${item.disabled ? 'disabled' : ''} ${enabledIndex === this._activeIndex ? 'active' : ''}\"\n              role=\"menuitem\"\n              tabindex=\"${this.open && !item.disabled ? '0' : '-1'}\"\n              aria-disabled=\"${item.disabled ? 'true' : 'false'}\"\n              style=\"--stagger-index: ${index}\"\n              @click=\"${() => this._selectItem(item)}\"\n            >\n              ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=\"${item.icon}\" size=\"sm\"></cg-icon>` : nothing}\n              ${item.label}\n              ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n            </button>\n          `;\n        }) : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-dropdown': CgDropdown;\n  }\n}\n"],"names":["CgDropdown","LitElement","changed","bindOutsideClick","item","i","index","handled","handleRovingKey","items","focusable","el","html","nothing","enabledIndex","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/components/cg-empty-state/cg-empty-state.d.ts

@@ -1,29 +1,13 @@
 import { LitElement } from 'lit';
 /**
  * @element cg-empty-state
- * Empty / no-results / error state with icon, title, description, and
- * actions slot. Use `container` to wrap the content in a card or dashed
- * placeholder zone — useful when the empty state sits inside a panel
- * where bare centered text would feel floaty.
+ * Empty / no-results / error state with icon, title, description, and actions slot.
  *
  * @example
  * ```html
- * <!-- bare (default) — centered content, no container -->
  * <cg-empty-state variant="search" title="No results" description="Try a different query">
  *   <cg-button slot="actions">Clear filters</cg-button>
  * </cg-empty-state>
- *
- * <!-- card-wrapped — solid bg + border, like cg-card variant="elevated" -->
- * <cg-empty-state container="card" title="No customers yet"
- *   description="When you add your first customer, they will appear here.">
- *   <cg-button slot="actions" variant="primary">Add customer</cg-button>
- * </cg-empty-state>
- *
- * <!-- dashed placeholder — drop-zone / "click to add" feel -->
- * <cg-empty-state container="dashed" variant="ai" title="Drop a file or paste text"
- *   description="The AI will summarize it for you.">
- *   <cg-button slot="actions" variant="tertiary">Browse files</cg-button>
- * </cg-empty-state>
  * ```
  *
  * @slot icon - Override the default icon
@@ -33,16 +17,11 @@ import { LitElement } from 'lit';
 export declare class CgEmptyState extends LitElement {
     static styles: import('lit').CSSResult[];
     variant: 'default' | 'search' | 'error' | 'success' | 'info' | 'ai';
-    /**
-     * Wrap the empty state in a container shell:
-     *   none   (default) — centered content with padding only (current behaviour)
-     *   card             — solid bg + 1px border + radius (like cg-card)
-     *   dashed           — dashed border + transparent bg (drop-zone / "click to add")
-     */
-    container: 'none' | 'card' | 'dashed';
     title: string;
     description: string;
     icon: string;
+    private _hasActions;
+    private _onActionsSlotChange;
     private _defaultIcon;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/components/cg-empty-state/cg-empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/cg-empty-state/cg-empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgGnB;IAE0B,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAa;IAC7G;;;;;OAKG;IAC0B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAU;IACvD,KAAK,SAAM;IACpB,WAAW,SAAM;IACjB,IAAI,SAAM;IAEtB,OAAO,CAAC,YAAY;IAiDX,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"cg-empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/cg-empty-state/cg-empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAsEnB;IAE0B,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAa;IACxF,KAAK,SAAM;IACpB,WAAW,SAAM;IACjB,IAAI,SAAM;IAKb,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,YAAY;IAiDX,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}