@cognivo/components 0.8.0

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

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

package/dist/components/cg-definition-list/cg-definition-list.d.ts

@@ -0,0 +1,99 @@
+import { LitElement } from 'lit';
+interface DefinitionItem {
+    /** Term (label) shown on the left / above. */
+    term: string;
+    /** Definition value. Strings render as text; consumers wanting markup should use the slot API instead. */
+    definition?: unknown;
+    /** Show a copy-to-clipboard button next to the value. Visible on row hover. */
+    copyable?: boolean;
+    /** Optional tooltip on the term (helpful for shorthand specs like SLA, MAU). */
+    tooltip?: string;
+}
+/**
+ * @element cg-definition-list
+ * Semantic key/value list rendered as a real `<dl>` so screen readers
+ * expose proper term/definition pairing. Supports two render paths:
+ *
+ *   1. Slot in `<dt>` and `<dd>` directly (rich values, full control):
+ *      ```html
+ *      <cg-definition-list bordered>
+ *        <dt>Plan</dt>
+ *        <dd><cg-badge variant="accent">Pro</cg-badge></dd>
+ *        <dt>Status</dt>
+ *        <dd><cg-badge variant="success">Active</cg-badge></dd>
+ *      </cg-definition-list>
+ *      ```
+ *
+ *   2. Pass `.items=[...]` for quick data-driven render with built-in
+ *      copy buttons + label tooltips:
+ *      ```html
+ *      <cg-definition-list bordered .items=${[
+ *        { term: 'Plan',   definition: 'Pro' },
+ *        { term: 'Email',  definition: 'alice@example.com', copyable: true },
+ *        { term: 'API key', definition: 'sk_live_abc', copyable: true, tooltip: 'Read-write key' },
+ *      ]}></cg-definition-list>
+ *      ```
+ *
+ * Two layouts (`direction`):
+ *   - `horizontal` (default) — term : value side-by-side (spec sheet)
+ *   - `vertical`              — term above value (form / detail view)
+ *
+ * For tag-chip / metadata-line use cases (e.g. "CPU: 8 cores · RAM: 32 GB"),
+ * compose <cg-chip> or <cg-text> directly — they give finer control than
+ * a description list pretending to be a chip strip.
+ *
+ * Two alignments (`align`, horizontal mode only):
+ *   - `start` (default) — term and value sit adjacent on the left
+ *   - `between`         — term hard-left, value hard-right (price-list)
+ *
+ * Variants: `bordered` (outer card + 24px padding + row dividers),
+ * `striped` (alternating row backgrounds for long lists), `size`
+ * (sm/md/lg density).
+ *
+ * @slot - `<dt>` and `<dd>` pairs.
+ *
+ * @csspart list - The inner `<dl>` element
+ * @csspart term - Each `<dt>` rendered from items[] (slotted dt/dd cannot be parted from outside the shadow boundary; use ::slotted() or wrap them)
+ * @csspart value - Each `<dd>` rendered from items[]
+ * @csspart copy-button - The copy-to-clipboard button on copyable items
+ *
+ * @fires {CustomEvent<{term, value}>} cg-definition-copy - Fired when a copyable item is copied.
+ *
+ * @cssprop --cg-component-definition-list-padding - Wrapper padding when bordered (default 24px)
+ * @cssprop --cg-component-definition-list-term-width - Term column width in horizontal mode (default auto)
+ */
+export declare class CgDefinitionList extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Layout direction. */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Term/value alignment in horizontal mode:
+     *   start (default) — term and value sit adjacent on the left (spec sheet)
+     *   between         — term on the far left, value pushed to the far right (price-list)
+     * No-op outside horizontal direction.
+     */
+    align: 'start' | 'between';
+    /** Density. */
+    size: 'sm' | 'md' | 'lg';
+    /** Show outer card border + 24px wrapper padding + row dividers. */
+    bordered: boolean;
+    /** Alternating row backgrounds for long lists. */
+    striped: boolean;
+    /** Legacy: tighter gaps. Prefer `size="sm"`. */
+    compact: boolean;
+    /** Accessible label announced on the <dl>. */
+    label: string;
+    /** Optional data-driven items. Slotted dt/dd still render after these. */
+    items: DefinitionItem[];
+    private _copiedIndex;
+    private _copy;
+    private _renderItem;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-definition-list': CgDefinitionList;
+    }
+}
+export {};
+//# sourceMappingURL=cg-definition-list.d.ts.map

package/dist/components/cg-definition-list/cg-definition-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-definition-list.d.ts","sourceRoot":"","sources":["../../../src/components/cg-definition-list/cg-definition-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AAErC,UAAU,cAAc;IACtB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA6OnB;IAEH,wBAAwB;IACK,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEjF;;;;;OAKG;IAC0B,KAAK,EAAE,OAAO,GAAG,SAAS,CAAW;IAElE,eAAe;IACc,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,oEAAoE;IACxB,QAAQ,UAAS;IAE7D,kDAAkD;IACN,OAAO,UAAS;IAE5D,gDAAgD;IACJ,OAAO,UAAS;IAE5D,8CAA8C;IAClC,KAAK,SAAM;IAEvB,0EAA0E;IAC/C,KAAK,EAAE,cAAc,EAAE,CAAM;IAE/C,OAAO,CAAC,YAAY,CAAM;YAErB,KAAK;IAenB,OAAO,CAAC,WAAW;IAiCV,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/cg-definition-list/cg-definition-list.js

@@ -0,0 +1,332 @@
+import { css as h, LitElement as g, html as a, nothing as p } from "lit";
+import { property as d, state as f, customElement as u } from "lit/decorators.js";
+import { h as m, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-icon/cg-icon.js";
+import "../cg-tooltip/cg-tooltip.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? y(e, i) : e, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (s = (n ? l(e, i, s) : l(s)) || s);
+  return n && s && b(e, i, s), s;
+};
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.direction = "horizontal", this.align = "start", this.size = "md", this.bordered = !1, this.striped = !1, this.compact = !1, this.label = "", this.items = [], this._copiedIndex = -1;
+  }
+  async _copy(t, e) {
+    if (e)
+      try {
+        await navigator.clipboard.writeText(e), this._copiedIndex = t, this.dispatchEvent(new CustomEvent("cg-definition-copy", {
+          bubbles: !0,
+          composed: !0,
+          detail: { term: this.items[t]?.term, value: e }
+        })), setTimeout(() => {
+          this._copiedIndex = -1;
+        }, 1500);
+      } catch {
+      }
+  }
+  _renderItem(t, e) {
+    const i = t.definition == null ? "" : String(t.definition), n = t.tooltip ? a`<cg-tooltip content=${t.tooltip} position="top"><span>${t.term}</span></cg-tooltip>` : t.term;
+    return a`
+      <div class="row">
+        <dt part="term">${n}</dt>
+        <dd part="value">
+          <span class="dd-content">
+            <span class="dd-value ${i ? "" : "dd-empty"}">${i || "—"}</span>
+            ${t.copyable && i ? a`
+              <button
+                type="button"
+                class="copy-btn ${this._copiedIndex === e ? "copied" : ""}"
+                part="copy-button"
+                aria-label="Copy ${t.term}"
+                @click=${() => this._copy(e, i)}
+              >
+                <cg-icon name=${this._copiedIndex === e ? "check" : "copy"} size="xs"></cg-icon>
+              </button>
+            ` : p}
+          </span>
+        </dd>
+      </div>
+    `;
+  }
+  render() {
+    return a`
+      <dl part="list" aria-label=${this.label || p}>
+        ${this.items.map((t, e) => this._renderItem(t, e))}
+        <slot></slot>
+      </dl>
+    `;
+  }
+};
+o.styles = [m, v, h`
+    :host { display: block; }
+
+    dl {
+      display: grid;
+      /* Term column: minimum 128px so short labels (MRR, Plan) get the
+         same breathing room as long labels (Account ID, Member since).
+         Caps at max-content so a really long label can still expand the
+         column. Gives a consistent visual rail between term and value. */
+      grid-template-columns: minmax(var(--cg-component-definition-list-term-width, var(--cg-spacing-128)), max-content) 1fr;
+      column-gap: var(--cg-spacing-24);
+      row-gap: var(--cg-spacing-8);
+      margin: 0;
+      padding: 0;
+    }
+
+    :host([direction="vertical"]) dl {
+      grid-template-columns: 1fr;
+      row-gap: var(--cg-spacing-4);
+    }
+
+    /* Density via size — controls row gap + column-gap + font-size.
+       compact is a legacy alias for size="sm" gaps but keeps font-size. */
+    :host([size="sm"]) dl { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }
+    :host([size="lg"]) dl { row-gap: var(--cg-spacing-12); column-gap: var(--cg-spacing-32); }
+    :host([compact]) dl   { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }
+
+    /* Bordered variant — wraps the dl in a card-like container with
+       24px padding and row dividers. */
+    :host([bordered]) dl {
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      background: var(--cg-color-surface-cards-background);
+      padding: var(--cg-component-definition-list-padding, var(--cg-spacing-24));
+      row-gap: 0;
+      /* CRITICAL: column-gap must be 0 so the row dividers (border-top
+         on each dt and each dd) touch in the middle and form ONE
+         continuous line across the row. The horizontal space between
+         term and value comes from per-cell padding instead. */
+      column-gap: 0;
+    }
+
+    /* Per-cell padding takes over from grid gap. dt gets right padding
+       (the visual gap between term and value, matching the non-bordered
+       column-gap of 24px); both get vertical padding for breathing room
+       around the divider line.
+       Note: items[] path now wraps each pair in <div class="row">, so
+       :first-of-type / :nth-of-type selectors on dt/dd no longer
+       distinguish rows (every dt is the only-of-type inside its row).
+       For the items[] path we target .row:first-child / :last-child /
+       :not(:first-child) instead. Slotted path has no wrapper, so the
+       original :first-of-type rules still work for it. */
+    :host([bordered]) dt,
+    :host([bordered]) ::slotted(dt) {
+      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-12) 0;
+    }
+    :host([bordered]) dd,
+    :host([bordered]) ::slotted(dd) {
+      padding: var(--cg-spacing-12) 0;
+    }
+    /* First row sits flush with the card's top padding. Use
+       :first-of-type/:last-of-type on .row (matches first/last <div>
+       sibling regardless of the trailing <slot>). */
+    :host([bordered]) .row:first-of-type > dt,
+    :host([bordered]) .row:first-of-type > dd,
+    :host([bordered]) ::slotted(dt:first-of-type),
+    :host([bordered]) ::slotted(dd:first-of-type) {
+      padding-top: 0;
+    }
+    /* Last row sits flush with the card's bottom padding. */
+    :host([bordered]) .row:last-of-type > dt,
+    :host([bordered]) .row:last-of-type > dd,
+    :host([bordered]) ::slotted(dt:last-of-type),
+    :host([bordered]) ::slotted(dd:last-of-type) {
+      padding-bottom: 0;
+    }
+    /* The divider — drawn on every dt + dd EXCEPT the first row.
+       With column-gap:0 the two cell borders meet exactly, reading as
+       one continuous hairline spanning the full row. */
+    :host([bordered]) .row:not(:first-of-type) > dt,
+    :host([bordered]) .row:not(:first-of-type) > dd,
+    :host([bordered]) ::slotted(dt:not(:first-of-type)),
+    :host([bordered]) ::slotted(dd:not(:first-of-type)) {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    /* align="between" — term hard-left, value hard-right (price-list).
+       MUST use max-content for both columns: plain "auto" tracks grow
+       to fill available space (auto = minmax(min-content, max-content)
+       with stretching), defeating justify-content:space-between.
+       max-content locks each column to its content's natural width, so
+       leftover container space distributes between them.
+       The visual right-alignment of the value comes from text-align:
+       right on dd (works regardless of how the column resolves). */
+    :host([align="between"][direction="horizontal"]) dl {
+      grid-template-columns: max-content max-content;
+      justify-content: space-between;
+    }
+    :host([align="between"][direction="horizontal"]) dd,
+    :host([align="between"][direction="horizontal"]) ::slotted(dd) {
+      text-align: right;
+    }
+    :host([align="between"][direction="horizontal"]) .dd-content {
+      justify-content: flex-end;
+    }
+
+    /* Striped — alternating row backgrounds. Both render paths target
+       even-indexed rows (rows 2, 4, 6 in 1-indexed = rows 1, 3, 5 in
+       0-indexed) so they stay consistent.
+       Items[] path: .row:nth-child(even) > dt/dd (the .row wrapper is
+       a direct child of dl, so :nth-child(even) IS row 2/4/6).
+       Slotted path: ::slotted(dt:nth-of-type(even)) — among slotted dt
+       siblings, the even-position ones (2nd/4th/6th dt) = rows 2/4/6. */
+    :host([striped]:not([bordered])) .row:nth-of-type(even) > dt,
+    :host([striped]:not([bordered])) .row:nth-of-type(even) > dd,
+    :host([striped]:not([bordered])) ::slotted(dt:nth-of-type(even)),
+    :host([striped]:not([bordered])) ::slotted(dd:nth-of-type(even)) {
+      background: var(--cg-color-surface-cards-emphasis);
+    }
+    :host([striped]:not([bordered])) ::slotted(dt),
+    :host([striped]:not([bordered])) ::slotted(dd),
+    :host([striped]:not([bordered])) dt,
+    :host([striped]:not([bordered])) dd {
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+    }
+    /* When both bordered + striped, keep bordered's padding (already
+       set above) and only paint the alternating background. The dividers
+       still work because we're not overriding the border-top rules. */
+    :host([bordered][striped]) .row:nth-of-type(even) > dt,
+    :host([bordered][striped]) .row:nth-of-type(even) > dd,
+    :host([bordered][striped]) ::slotted(dt:nth-of-type(even)),
+    :host([bordered][striped]) ::slotted(dd:nth-of-type(even)) {
+      background: var(--cg-color-surface-cards-emphasis);
+    }
+
+    /* Term + value typography — applies to both slotted dt/dd AND
+       internally rendered dt/dd from the items[] prop. */
+    ::slotted(dt),
+    dt {
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: var(--cg-line-height-snug);
+      margin: 0;
+      width: var(--cg-component-definition-list-term-width, auto);
+    }
+
+    ::slotted(dd),
+    dd {
+      color: var(--cg-color-surface-cards-text);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-snug);
+      margin: 0;
+      min-width: 0;
+      word-break: break-word;
+    }
+
+    :host([size="sm"]) ::slotted(dt),
+    :host([size="sm"]) dt,
+    :host([size="sm"]) ::slotted(dd),
+    :host([size="sm"]) dd { font-size: var(--cg-font-size-xs); }
+
+    :host([size="lg"]) ::slotted(dt),
+    :host([size="lg"]) dt,
+    :host([size="lg"]) ::slotted(dd),
+    :host([size="lg"]) dd { font-size: var(--cg-font-size-md); }
+
+    /* Vertical layout: extra spacing between pairs. Uses gap from grid
+       row-gap PLUS a margin-top on every dt that isn't the first one,
+       so each pair is visually grouped (dt right above its dd) with a
+       larger gap before the next dt. Applies to both render paths. */
+    :host([direction="vertical"]) dt:not(:first-of-type),
+    :host([direction="vertical"]) ::slotted(dt:not(:first-child)) {
+      margin-top: var(--cg-spacing-8);
+    }
+
+    /* Row wrapper — used by the items[] render path to group each
+       term+value pair into one logical row. display:contents keeps it
+       invisible to grid layout (dt and dd act as direct grid children),
+       while still giving us a sibling element to target for first/last
+       row treatment via .row:first-of-type / :last-of-type / :nth-of-
+       type(even). HTML5 allows <div> wrapping <dt><dd> pairs inside
+       <dl> since 2020. */
+    .row {
+      display: contents;
+    }
+
+    /* dd in items[] path may contain a copy button + the value */
+    .dd-content {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      max-width: 100%;
+    }
+    .dd-value {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .dd-empty {
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* Copy button — visible on the SAME row's hover or focus (clean by
+       default). Per-row reveal via .dd-content:hover scoping; previously
+       used dl:hover which lit up every button when any part of the dl
+       was hovered. */
+    .copy-btn {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: var(--cg-color-input-text-placeholder);
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      opacity: 0;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    dd:hover .copy-btn,
+    .copy-btn:focus-visible { opacity: 1; }
+    .copy-btn:hover {
+      color: var(--cg-color-surface-cards-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .copy-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
+    }
+    .copy-btn.copied { color: var(--cg-color-status-success-text-default); opacity: 1; }
+  `];
+r([
+  d({ reflect: !0 })
+], o.prototype, "direction", 2);
+r([
+  d({ reflect: !0 })
+], o.prototype, "align", 2);
+r([
+  d({ reflect: !0 })
+], o.prototype, "size", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "bordered", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "striped", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "compact", 2);
+r([
+  d()
+], o.prototype, "label", 2);
+r([
+  d({ type: Array })
+], o.prototype, "items", 2);
+r([
+  f()
+], o.prototype, "_copiedIndex", 2);
+o = r([
+  u("cg-definition-list")
+], o);
+export {
+  o as CgDefinitionList
+};
+//# sourceMappingURL=cg-definition-list.js.map

package/dist/components/cg-definition-list/cg-definition-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-definition-list.js","sources":["../../../src/components/cg-definition-list/cg-definition-list.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-icon/cg-icon.js';\nimport '../cg-tooltip/cg-tooltip.js';\n\ninterface DefinitionItem {\n  /** Term (label) shown on the left / above. */\n  term: string;\n  /** Definition value. Strings render as text; consumers wanting markup should use the slot API instead. */\n  definition?: unknown;\n  /** Show a copy-to-clipboard button next to the value. Visible on row hover. */\n  copyable?: boolean;\n  /** Optional tooltip on the term (helpful for shorthand specs like SLA, MAU). */\n  tooltip?: string;\n}\n\n/**\n * @element cg-definition-list\n * Semantic key/value list rendered as a real `<dl>` so screen readers\n * expose proper term/definition pairing. Supports two render paths:\n *\n *   1. Slot in `<dt>` and `<dd>` directly (rich values, full control):\n *      ```html\n *      <cg-definition-list bordered>\n *        <dt>Plan</dt>\n *        <dd><cg-badge variant=\"accent\">Pro</cg-badge></dd>\n *        <dt>Status</dt>\n *        <dd><cg-badge variant=\"success\">Active</cg-badge></dd>\n *      </cg-definition-list>\n *      ```\n *\n *   2. Pass `.items=[...]` for quick data-driven render with built-in\n *      copy buttons + label tooltips:\n *      ```html\n *      <cg-definition-list bordered .items=${[\n *        { term: 'Plan',   definition: 'Pro' },\n *        { term: 'Email',  definition: 'alice@example.com', copyable: true },\n *        { term: 'API key', definition: 'sk_live_abc', copyable: true, tooltip: 'Read-write key' },\n *      ]}></cg-definition-list>\n *      ```\n *\n * Two layouts (`direction`):\n *   - `horizontal` (default) — term : value side-by-side (spec sheet)\n *   - `vertical`              — term above value (form / detail view)\n *\n * For tag-chip / metadata-line use cases (e.g. \"CPU: 8 cores · RAM: 32 GB\"),\n * compose <cg-chip> or <cg-text> directly — they give finer control than\n * a description list pretending to be a chip strip.\n *\n * Two alignments (`align`, horizontal mode only):\n *   - `start` (default) — term and value sit adjacent on the left\n *   - `between`         — term hard-left, value hard-right (price-list)\n *\n * Variants: `bordered` (outer card + 24px padding + row dividers),\n * `striped` (alternating row backgrounds for long lists), `size`\n * (sm/md/lg density).\n *\n * @slot - `<dt>` and `<dd>` pairs.\n *\n * @csspart list - The inner `<dl>` element\n * @csspart term - Each `<dt>` rendered from items[] (slotted dt/dd cannot be parted from outside the shadow boundary; use ::slotted() or wrap them)\n * @csspart value - Each `<dd>` rendered from items[]\n * @csspart copy-button - The copy-to-clipboard button on copyable items\n *\n * @fires {CustomEvent<{term, value}>} cg-definition-copy - Fired when a copyable item is copied.\n *\n * @cssprop --cg-component-definition-list-padding - Wrapper padding when bordered (default 24px)\n * @cssprop --cg-component-definition-list-term-width - Term column width in horizontal mode (default auto)\n */\n@customElement('cg-definition-list')\nexport class CgDefinitionList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    dl {\n      display: grid;\n      /* Term column: minimum 128px so short labels (MRR, Plan) get the\n         same breathing room as long labels (Account ID, Member since).\n         Caps at max-content so a really long label can still expand the\n         column. Gives a consistent visual rail between term and value. */\n      grid-template-columns: minmax(var(--cg-component-definition-list-term-width, var(--cg-spacing-128)), max-content) 1fr;\n      column-gap: var(--cg-spacing-24);\n      row-gap: var(--cg-spacing-8);\n      margin: 0;\n      padding: 0;\n    }\n\n    :host([direction=\"vertical\"]) dl {\n      grid-template-columns: 1fr;\n      row-gap: var(--cg-spacing-4);\n    }\n\n    /* Density via size — controls row gap + column-gap + font-size.\n       compact is a legacy alias for size=\"sm\" gaps but keeps font-size. */\n    :host([size=\"sm\"]) dl { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }\n    :host([size=\"lg\"]) dl { row-gap: var(--cg-spacing-12); column-gap: var(--cg-spacing-32); }\n    :host([compact]) dl   { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }\n\n    /* Bordered variant — wraps the dl in a card-like container with\n       24px padding and row dividers. */\n    :host([bordered]) dl {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      padding: var(--cg-component-definition-list-padding, var(--cg-spacing-24));\n      row-gap: 0;\n      /* CRITICAL: column-gap must be 0 so the row dividers (border-top\n         on each dt and each dd) touch in the middle and form ONE\n         continuous line across the row. The horizontal space between\n         term and value comes from per-cell padding instead. */\n      column-gap: 0;\n    }\n\n    /* Per-cell padding takes over from grid gap. dt gets right padding\n       (the visual gap between term and value, matching the non-bordered\n       column-gap of 24px); both get vertical padding for breathing room\n       around the divider line.\n       Note: items[] path now wraps each pair in <div class=\"row\">, so\n       :first-of-type / :nth-of-type selectors on dt/dd no longer\n       distinguish rows (every dt is the only-of-type inside its row).\n       For the items[] path we target .row:first-child / :last-child /\n       :not(:first-child) instead. Slotted path has no wrapper, so the\n       original :first-of-type rules still work for it. */\n    :host([bordered]) dt,\n    :host([bordered]) ::slotted(dt) {\n      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-12) 0;\n    }\n    :host([bordered]) dd,\n    :host([bordered]) ::slotted(dd) {\n      padding: var(--cg-spacing-12) 0;\n    }\n    /* First row sits flush with the card's top padding. Use\n       :first-of-type/:last-of-type on .row (matches first/last <div>\n       sibling regardless of the trailing <slot>). */\n    :host([bordered]) .row:first-of-type > dt,\n    :host([bordered]) .row:first-of-type > dd,\n    :host([bordered]) ::slotted(dt:first-of-type),\n    :host([bordered]) ::slotted(dd:first-of-type) {\n      padding-top: 0;\n    }\n    /* Last row sits flush with the card's bottom padding. */\n    :host([bordered]) .row:last-of-type > dt,\n    :host([bordered]) .row:last-of-type > dd,\n    :host([bordered]) ::slotted(dt:last-of-type),\n    :host([bordered]) ::slotted(dd:last-of-type) {\n      padding-bottom: 0;\n    }\n    /* The divider — drawn on every dt + dd EXCEPT the first row.\n       With column-gap:0 the two cell borders meet exactly, reading as\n       one continuous hairline spanning the full row. */\n    :host([bordered]) .row:not(:first-of-type) > dt,\n    :host([bordered]) .row:not(:first-of-type) > dd,\n    :host([bordered]) ::slotted(dt:not(:first-of-type)),\n    :host([bordered]) ::slotted(dd:not(:first-of-type)) {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    /* align=\"between\" — term hard-left, value hard-right (price-list).\n       MUST use max-content for both columns: plain \"auto\" tracks grow\n       to fill available space (auto = minmax(min-content, max-content)\n       with stretching), defeating justify-content:space-between.\n       max-content locks each column to its content's natural width, so\n       leftover container space distributes between them.\n       The visual right-alignment of the value comes from text-align:\n       right on dd (works regardless of how the column resolves). */\n    :host([align=\"between\"][direction=\"horizontal\"]) dl {\n      grid-template-columns: max-content max-content;\n      justify-content: space-between;\n    }\n    :host([align=\"between\"][direction=\"horizontal\"]) dd,\n    :host([align=\"between\"][direction=\"horizontal\"]) ::slotted(dd) {\n      text-align: right;\n    }\n    :host([align=\"between\"][direction=\"horizontal\"]) .dd-content {\n      justify-content: flex-end;\n    }\n\n    /* Striped — alternating row backgrounds. Both render paths target\n       even-indexed rows (rows 2, 4, 6 in 1-indexed = rows 1, 3, 5 in\n       0-indexed) so they stay consistent.\n       Items[] path: .row:nth-child(even) > dt/dd (the .row wrapper is\n       a direct child of dl, so :nth-child(even) IS row 2/4/6).\n       Slotted path: ::slotted(dt:nth-of-type(even)) — among slotted dt\n       siblings, the even-position ones (2nd/4th/6th dt) = rows 2/4/6. */\n    :host([striped]:not([bordered])) .row:nth-of-type(even) > dt,\n    :host([striped]:not([bordered])) .row:nth-of-type(even) > dd,\n    :host([striped]:not([bordered])) ::slotted(dt:nth-of-type(even)),\n    :host([striped]:not([bordered])) ::slotted(dd:nth-of-type(even)) {\n      background: var(--cg-color-surface-cards-emphasis);\n    }\n    :host([striped]:not([bordered])) ::slotted(dt),\n    :host([striped]:not([bordered])) ::slotted(dd),\n    :host([striped]:not([bordered])) dt,\n    :host([striped]:not([bordered])) dd {\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n    }\n    /* When both bordered + striped, keep bordered's padding (already\n       set above) and only paint the alternating background. The dividers\n       still work because we're not overriding the border-top rules. */\n    :host([bordered][striped]) .row:nth-of-type(even) > dt,\n    :host([bordered][striped]) .row:nth-of-type(even) > dd,\n    :host([bordered][striped]) ::slotted(dt:nth-of-type(even)),\n    :host([bordered][striped]) ::slotted(dd:nth-of-type(even)) {\n      background: var(--cg-color-surface-cards-emphasis);\n    }\n\n    /* Term + value typography — applies to both slotted dt/dd AND\n       internally rendered dt/dd from the items[] prop. */\n    ::slotted(dt),\n    dt {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n      margin: 0;\n      width: var(--cg-component-definition-list-term-width, auto);\n    }\n\n    ::slotted(dd),\n    dd {\n      color: var(--cg-color-surface-cards-text);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      margin: 0;\n      min-width: 0;\n      word-break: break-word;\n    }\n\n    :host([size=\"sm\"]) ::slotted(dt),\n    :host([size=\"sm\"]) dt,\n    :host([size=\"sm\"]) ::slotted(dd),\n    :host([size=\"sm\"]) dd { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"lg\"]) ::slotted(dt),\n    :host([size=\"lg\"]) dt,\n    :host([size=\"lg\"]) ::slotted(dd),\n    :host([size=\"lg\"]) dd { font-size: var(--cg-font-size-md); }\n\n    /* Vertical layout: extra spacing between pairs. Uses gap from grid\n       row-gap PLUS a margin-top on every dt that isn't the first one,\n       so each pair is visually grouped (dt right above its dd) with a\n       larger gap before the next dt. Applies to both render paths. */\n    :host([direction=\"vertical\"]) dt:not(:first-of-type),\n    :host([direction=\"vertical\"]) ::slotted(dt:not(:first-child)) {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* Row wrapper — used by the items[] render path to group each\n       term+value pair into one logical row. display:contents keeps it\n       invisible to grid layout (dt and dd act as direct grid children),\n       while still giving us a sibling element to target for first/last\n       row treatment via .row:first-of-type / :last-of-type / :nth-of-\n       type(even). HTML5 allows <div> wrapping <dt><dd> pairs inside\n       <dl> since 2020. */\n    .row {\n      display: contents;\n    }\n\n    /* dd in items[] path may contain a copy button + the value */\n    .dd-content {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      max-width: 100%;\n    }\n    .dd-value {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n    .dd-empty {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* Copy button — visible on the SAME row's hover or focus (clean by\n       default). Per-row reveal via .dd-content:hover scoping; previously\n       used dl:hover which lit up every button when any part of the dl\n       was hovered. */\n    .copy-btn {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      padding: 0;\n      border: none;\n      background: transparent;\n      color: var(--cg-color-input-text-placeholder);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      opacity: 0;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    dd:hover .copy-btn,\n    .copy-btn:focus-visible { opacity: 1; }\n    .copy-btn:hover {\n      color: var(--cg-color-surface-cards-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .copy-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n    .copy-btn.copied { color: var(--cg-color-status-success-text-default); opacity: 1; }\n  `];\n\n  /** Layout direction. */\n  @property({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Term/value alignment in horizontal mode:\n   *   start (default) — term and value sit adjacent on the left (spec sheet)\n   *   between         — term on the far left, value pushed to the far right (price-list)\n   * No-op outside horizontal direction.\n   */\n  @property({ reflect: true }) align: 'start' | 'between' = 'start';\n\n  /** Density. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Show outer card border + 24px wrapper padding + row dividers. */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Alternating row backgrounds for long lists. */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /** Legacy: tighter gaps. Prefer `size=\"sm\"`. */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  /** Accessible label announced on the <dl>. */\n  @property() label = '';\n\n  /** Optional data-driven items. Slotted dt/dd still render after these. */\n  @property({ type: Array }) items: DefinitionItem[] = [];\n\n  @state() private _copiedIndex = -1;\n\n  private async _copy(index: number, value: string) {\n    if (!value) return;\n    try {\n      await navigator.clipboard.writeText(value);\n      this._copiedIndex = index;\n      this.dispatchEvent(new CustomEvent('cg-definition-copy', {\n        bubbles: true, composed: true,\n        detail: { term: this.items[index]?.term, value },\n      }));\n      setTimeout(() => { this._copiedIndex = -1; }, 1500);\n    } catch {\n      // Clipboard blocked — silent fail.\n    }\n  }\n\n  private _renderItem(it: DefinitionItem, i: number) {\n    const valueText = it.definition == null ? '' : String(it.definition);\n    const term = it.tooltip\n      ? html`<cg-tooltip content=${it.tooltip} position=\"top\"><span>${it.term}</span></cg-tooltip>`\n      : it.term;\n    /* Wrapper div is display:contents in grid modes (transparent to the\n       grid; dt/dd act as direct grid children), and inline-flex chip in\n       inline mode. HTML5 allows <div> wrapping dt/dd pairs inside <dl>.\n       Striped + bordered styling targets .row:nth-child() since each\n       .row is a direct child of dl. */\n    return html`\n      <div class=\"row\">\n        <dt part=\"term\">${term}</dt>\n        <dd part=\"value\">\n          <span class=\"dd-content\">\n            <span class=\"dd-value ${valueText ? '' : 'dd-empty'}\">${valueText || '—'}</span>\n            ${it.copyable && valueText ? html`\n              <button\n                type=\"button\"\n                class=\"copy-btn ${this._copiedIndex === i ? 'copied' : ''}\"\n                part=\"copy-button\"\n                aria-label=\"Copy ${it.term}\"\n                @click=${() => this._copy(i, valueText)}\n              >\n                <cg-icon name=${this._copiedIndex === i ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n              </button>\n            ` : nothing}\n          </span>\n        </dd>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <dl part=\"list\" aria-label=${this.label || nothing}>\n        ${this.items.map((it, i) => this._renderItem(it, i))}\n        <slot></slot>\n      </dl>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-definition-list': CgDefinitionList;\n  }\n}\n"],"names":["CgDefinitionList","LitElement","index","value","it","i","valueText","term","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;AAuEO,IAAMA,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAiPwB,KAAA,YAAuC,cAQvC,KAAA,QAA6B,SAG7B,KAAA,OAA2B,MAGZ,KAAA,WAAW,IAGX,KAAA,UAAU,IAGV,KAAA,UAAU,IAG1C,KAAA,QAAQ,IAGO,KAAA,QAA0B,CAAA,GAE5C,KAAQ,eAAe;AAAA,EAAA;AAAA,EAEhC,MAAc,MAAMC,GAAeC,GAAe;AAChD,QAAKA;AACL,UAAI;AACF,cAAM,UAAU,UAAU,UAAUA,CAAK,GACzC,KAAK,eAAeD,GACpB,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,UACvD,SAAS;AAAA,UAAM,UAAU;AAAA,UACzB,QAAQ,EAAE,MAAM,KAAK,MAAMA,CAAK,GAAG,MAAM,OAAAC,EAAA;AAAA,QAAM,CAChD,CAAC,GACF,WAAW,MAAM;AAAE,eAAK,eAAe;AAAA,QAAI,GAAG,IAAI;AAAA,MACpD,QAAQ;AAAA,MAER;AAAA,EACF;AAAA,EAEQ,YAAYC,GAAoBC,GAAW;AACjD,UAAMC,IAAYF,EAAG,cAAc,OAAO,KAAK,OAAOA,EAAG,UAAU,GAC7DG,IAAOH,EAAG,UACZI,wBAA2BJ,EAAG,OAAO,yBAAyBA,EAAG,IAAI,yBACrEA,EAAG;AAMP,WAAOI;AAAA;AAAA,0BAEeD,CAAI;AAAA;AAAA;AAAA,oCAGMD,IAAY,KAAK,UAAU,KAAKA,KAAa,GAAG;AAAA,cACtEF,EAAG,YAAYE,IAAYE;AAAA;AAAA;AAAA,kCAGP,KAAK,iBAAiBH,IAAI,WAAW,EAAE;AAAA;AAAA,mCAEtCD,EAAG,IAAI;AAAA,yBACjB,MAAM,KAAK,MAAMC,GAAGC,CAAS,CAAC;AAAA;AAAA,gCAEvB,KAAK,iBAAiBD,IAAI,UAAU,MAAM;AAAA;AAAA,gBAE1DI,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAAA,EAES,SAAS;AAChB,WAAOD;AAAA,mCACwB,KAAK,SAASC,CAAO;AAAA,UAC9C,KAAK,MAAM,IAAI,CAACL,GAAIC,MAAM,KAAK,YAAYD,GAAIC,CAAC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAI1D;AACF;AAvUaL,EACK,SAAS,CAACU,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6OnD;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjPhBd,EAiPkB,WAAA,aAAA,CAAA;AAQAa,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzPhBd,EAyPkB,WAAA,SAAA,CAAA;AAGAa,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5PhBd,EA4PkB,WAAA,QAAA,CAAA;AAGea,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/P/Bd,EA+PiC,WAAA,YAAA,CAAA;AAGAa,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlQ/Bd,EAkQiC,WAAA,WAAA,CAAA;AAGAa,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArQ/Bd,EAqQiC,WAAA,WAAA,CAAA;AAGhCa,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxQCd,EAwQC,WAAA,SAAA,CAAA;AAGea,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3Qdd,EA2QgB,WAAA,SAAA,CAAA;AAEVa,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7QIf,EA6QM,WAAA,gBAAA,CAAA;AA7QNA,IAANa,EAAA;AAAA,EADNG,EAAc,oBAAoB;AAAA,GACtBhB,CAAA;"}

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

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-draggable
+ * Wraps content that can be picked up with a pointer and dropped on a
+ * matching `<cg-droppable>`. Pointer-event-based — works on mouse, touch,
+ * and stylus.
+ *
+ * Carries an opaque `payload` (object reference is preserved across the
+ * drag) and a `type` tag that the droppable filters on. The dragged
+ * element is visually translated under the pointer; a `dragging` attribute
+ * on the host lets consumers style the source state.
+ *
+ * @example
+ * ```html
+ * <cg-draggable type="card" .payload=${cardData}>
+ *   <cg-card>…</cg-card>
+ * </cg-draggable>
+ * ```
+ *
+ * @slot - The draggable content.
+ *
+ * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drag-start - Drag begins
+ * @fires {CustomEvent<{type: string, payload: unknown, dropped: boolean}>} cg-drag-end - Drag ends (with or without a successful drop)
+ */
+export declare class CgDraggable extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Identifier matched against cg-droppable.accepts. */
+    type: string;
+    /** Application payload passed to the droppable on drop. */
+    payload: unknown;
+    /** Disable picking up. */
+    disabled: boolean;
+    /** Reflects while a drag from this element is active. */
+    dragging: boolean;
+    private _origin;
+    private _pointerId;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _onKeyDown;
+    private _finishDrag;
+    private _cleanupAfterDrag;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-draggable': CgDraggable;
+    }
+}
+//# sourceMappingURL=cg-draggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-draggable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-draggable/cg-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAenB;IAEH,uDAAuD;IAC3C,IAAI,SAAM;IAEtB,2DAA2D;IAC3B,OAAO,EAAE,OAAO,CAAQ;IAExD,0BAA0B;IACkB,QAAQ,UAAS;IAE7D,yDAAyD;IACb,QAAQ,UAAS;IAEpD,OAAO,CAAC,OAAO,CAAyC;IAEjE,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,cAAc,CAepB;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAehB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAS5B,MAAM;CAGhB;AAmBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}