@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-command.js","sources":["../../../src/components/cg-command/cg-command.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  group?: string;\n  icon?: string;\n  shortcut?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\n/**\n * @element cg-command\n * Searchable command palette foundation. Combobox pattern with grouped items,\n * keyboard navigation, and type-ahead filtering.\n *\n * @example\n * ```html\n * <cg-command\n *   open\n *   placeholder=\"Type a command...\"\n *   .commands=${[\n *     { id: 'new', label: 'New file', group: 'File', shortcut: '⌘N' },\n *     { id: 'open', label: 'Open file', group: 'File', shortcut: '⌘O' },\n *   ]}\n * ></cg-command>\n * ```\n *\n * @slot header - Content above the input\n * @slot footer - Content below the list\n * @slot empty - Custom empty state\n *\n * @fires {CustomEvent<{id: string, command: CommandItem}>} cg-command-select\n * @fires {CustomEvent<{value: string}>} cg-command-input\n * @fires {CustomEvent} cg-command-open\n * @fires {CustomEvent} cg-command-close\n */\n@customElement('cg-command')\nexport class CgCommand extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\n\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));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .palette {\n      position: fixed;\n      top: 20%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-command-width);\n      max-height: var(--cg-component-command-max-height);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-command-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8))) scale(0.96);\n      pointer-events: none;\n      overflow: hidden;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .palette {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .search-icon {\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n    }\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n    }\n    input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    .list {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n\n    /* Group label — uppercase mono. Extra top margin separates groups\n       visually so the eye groups items by section. First group hugs the top. */\n    .group-label {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      margin-top: var(--cg-spacing-12);\n      font: 600 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    .group-label:first-child { margin-top: 0; }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      /* min-height + real padding instead of fixed height — gives labels room\n         to breathe and lets items grow if content wraps. */\n      min-height: var(--cg-component-command-item-height);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      text-align: left;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\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    /* Hover (mouse) AND data-active (keyboard) get the same treatment so both\n       input methods feel instant — no waiting for a state-driven re-render. */\n    .item:hover:not([disabled]),\n    .item[data-active]:not([disabled]) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item:active:not([disabled]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .item[disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    .item-icon {\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.85;\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    }\n    .item[data-active] .item-icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 1;\n    }\n    .item-label { flex: 1; }\n\n    /* Loading state — small spinner + label, replaces empty/list when loading. */\n    .loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .shortcut {\n      font: 500 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-container-background);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-40);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placeholder = 'Type a command or search...';\n  @property({ type: Array }) commands: CommandItem[] = [];\n  @property() value = '';\n  @property({ attribute: 'empty-text' }) emptyText = 'No results found.';\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _activeIndex = 0;\n\n  @query('input') private _inputEl!: HTMLInputElement;\n  @query('.palette') private _paletteEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-open', { bubbles: true, composed: true }));\n    requestAnimationFrame(() => {\n      if (this._paletteEl) {\n        this._focusTrap.activate(this._paletteEl, {\n          initialFocus: this._inputEl,\n          onEscape: () => { this.open = false; },\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-command-close', { bubbles: true, composed: true }));\n  }\n\n  private get _filteredCommands(): CommandItem[] {\n    const query = this.value.toLowerCase().trim();\n    if (!query) return this.commands;\n    return this.commands.filter(c => {\n      if (c.disabled) return false;\n      const label = c.label.toLowerCase();\n      const keywords = (c.keywords || []).join(' ').toLowerCase();\n      return label.includes(query) || keywords.includes(query);\n    });\n  }\n\n  private get _groupedCommands(): Array<{ group: string; items: CommandItem[] }> {\n    const filtered = this._filteredCommands;\n    const groups = new Map<string, CommandItem[]>();\n    for (const cmd of filtered) {\n      const group = cmd.group || '';\n      if (!groups.has(group)) groups.set(group, []);\n      groups.get(group)!.push(cmd);\n    }\n    return Array.from(groups.entries()).map(([group, items]) => ({ group, items }));\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-input', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    // Enter-only select — Space is reserved for typing the query.\n    if (e.key === ' ') return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this._filteredCommands,\n      activeIndex: this._activeIndex,\n      onSelect: item => this._select(item),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  }\n\n  private _select(item: CommandItem): void {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-command-select', {\n      detail: { id: item.id, command: item },\n      bubbles: true,\n      composed: true,\n    }));\n    this.open = false;\n    this.value = '';\n  }\n\n  override render() {\n    const groups = this._groupedCommands;\n    const filtered = this._filteredCommands;\n    let flatIndex = -1;\n\n    return html`\n      <div class=\"backdrop\" @click=${() => this.open = false}></div>\n      <div\n        class=\"palette\"\n        role=\"dialog\"\n        aria-label=\"Command palette\"\n        aria-modal=\"true\"\n        ?hidden=${!this.open}\n      >\n        <slot name=\"header\"></slot>\n        <div class=\"input-wrap\">\n          <cg-icon class=\"search-icon\" name=\"minimalistic-magnifer-linear\" size=\"sm\" aria-hidden=\"true\"></cg-icon>\n          <input\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"command-list\"\n            aria-autocomplete=\"list\"\n            placeholder=${this.placeholder}\n            .value=${this.value}\n            @input=${this._handleInput}\n            @keydown=${this._handleKeydown}\n          />\n        </div>\n        <div class=\"list\" id=\"command-list\" role=\"listbox\">\n          ${this.loading ? html`\n            <div class=\"loading\" aria-busy=\"true\">\n              <cg-spinner size=\"sm\"></cg-spinner>\n              <span>Loading…</span>\n            </div>\n          ` : filtered.length === 0 ? html`\n            <slot name=\"empty\">\n              <div class=\"empty\">${this.emptyText}</div>\n            </slot>\n          ` : groups.map(({ group, items }) => html`\n            ${group ? html`<div class=\"group-label\">${group}</div>` : nothing}\n            ${items.map(item => {\n              flatIndex++;\n              const isActive = flatIndex === this._activeIndex;\n              return html`\n                <button\n                  class=\"item\"\n                  role=\"option\"\n                  ?disabled=${item.disabled}\n                  aria-selected=${isActive ? 'true' : 'false'}\n                  data-active=${isActive ? 'true' : nothing}\n                  @click=${() => this._select(item)}\n                  @mouseenter=${() => { this._activeIndex = flatIndex; }}\n                >\n                  ${item.icon ? html`<cg-icon class=\"item-icon\" name=${item.icon} size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n                  <span class=\"item-label\">${item.label}</span>\n                  ${item.shortcut ? html`<span class=\"shortcut\">${item.shortcut}</span>` : nothing}\n                </button>\n              `;\n            })}\n          `)}\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-command': CgCommand;\n  }\n}\n"],"names":["CgCommand","LitElement","FocusTrap","changed","query","c","label","keywords","filtered","groups","cmd","group","items","index","handled","handleRovingKey","item","flatIndex","html","nothing","isActive","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-command.js","sources":["../../../src/components/cg-command/cg-command.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  group?: string;\n  icon?: string;\n  shortcut?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\n/**\n * @element cg-command\n * Searchable command palette foundation. Combobox pattern with grouped items,\n * keyboard navigation, and type-ahead filtering.\n *\n * @example\n * ```html\n * <cg-command\n *   open\n *   placeholder=\"Type a command...\"\n *   .commands=${[\n *     { id: 'new', label: 'New file', group: 'File', shortcut: '⌘N' },\n *     { id: 'open', label: 'Open file', group: 'File', shortcut: '⌘O' },\n *   ]}\n * ></cg-command>\n * ```\n *\n * @slot header - Content above the input\n * @slot footer - Content below the list\n * @slot empty - Custom empty state\n *\n * @fires {CustomEvent<{id: string, command: CommandItem}>} cg-command-select\n * @fires {CustomEvent<{value: string}>} cg-command-input\n * @fires {CustomEvent} cg-command-open\n * @fires {CustomEvent} cg-command-close\n */\n@customElement('cg-command')\nexport class CgCommand extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: contents;\n    }\n\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));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .palette {\n      position: fixed;\n      top: 20%;\n      left: 50%;\n      z-index: var(--cg-z-index-top);\n      width: calc(100% - var(--cg-spacing-32));\n      max-width: var(--cg-component-command-width);\n      max-height: var(--cg-component-command-max-height);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-command-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8))) scale(0.96);\n      pointer-events: none;\n      overflow: hidden;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .palette {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .search-icon {\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n    }\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n    }\n    input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    .list {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n\n    /* Group label — uppercase mono. Extra top margin separates groups\n       visually so the eye groups items by section. First group hugs the top. */\n    .group-label {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      margin-top: var(--cg-spacing-12);\n      font: 600 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    .group-label:first-child { margin-top: 0; }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      /* min-height + real padding instead of fixed height — gives labels room\n         to breathe and lets items grow if content wraps. */\n      min-height: var(--cg-component-command-item-height);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: none;\n      background: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      text-align: left;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\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    /* Hover (mouse) AND data-active (keyboard) share the background so both\n       input methods feel instant. The keyboard-active row additionally gets\n       an accent left bar so the item Enter will trigger is unmistakable in a\n       palette (a faint gray fill alone was too easy to lose track of). */\n    .item:hover:not([disabled]),\n    .item[data-active]:not([disabled]) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item[data-active]:not([disabled]) {\n      box-shadow: inset var(--cg-spacing-2) 0 0 0 var(--cg-color-action-primary-background-default);\n    }\n    .item:active:not([disabled]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .item[disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    .item-icon {\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.85;\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    }\n    .item[data-active] .item-icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 1;\n    }\n    .item-label { flex: 1; }\n\n    /* Loading state — small spinner + label, replaces empty/list when loading. */\n    .loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n    .shortcut {\n      font: 500 var(--cg-font-size-xs) var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-container-background);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-40);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placeholder = 'Type a command or search...';\n  @property({ type: Array }) commands: CommandItem[] = [];\n  @property() value = '';\n  @property({ attribute: 'empty-text' }) emptyText = 'No results found.';\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _activeIndex = 0;\n\n  @query('input') private _inputEl!: HTMLInputElement;\n  @query('.palette') private _paletteEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-open', { bubbles: true, composed: true }));\n    requestAnimationFrame(() => {\n      if (this._paletteEl) {\n        this._focusTrap.activate(this._paletteEl, {\n          initialFocus: this._inputEl,\n          onEscape: () => { this.open = false; },\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-command-close', { bubbles: true, composed: true }));\n  }\n\n  private get _filteredCommands(): CommandItem[] {\n    const query = this.value.toLowerCase().trim();\n    if (!query) return this.commands;\n    return this.commands.filter(c => {\n      if (c.disabled) return false;\n      const label = c.label.toLowerCase();\n      const keywords = (c.keywords || []).join(' ').toLowerCase();\n      return label.includes(query) || keywords.includes(query);\n    });\n  }\n\n  private get _groupedCommands(): Array<{ group: string; items: CommandItem[] }> {\n    const filtered = this._filteredCommands;\n    const groups = new Map<string, CommandItem[]>();\n    for (const cmd of filtered) {\n      const group = cmd.group || '';\n      if (!groups.has(group)) groups.set(group, []);\n      groups.get(group)!.push(cmd);\n    }\n    return Array.from(groups.entries()).map(([group, items]) => ({ group, items }));\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this._activeIndex = 0;\n    this.dispatchEvent(new CustomEvent('cg-command-input', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    // Enter-only select — Space is reserved for typing the query.\n    if (e.key === ' ') return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this._filteredCommands,\n      activeIndex: this._activeIndex,\n      onSelect: item => this._select(item),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  }\n\n  private _select(item: CommandItem): void {\n    if (item.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-command-select', {\n      detail: { id: item.id, command: item },\n      bubbles: true,\n      composed: true,\n    }));\n    this.open = false;\n    this.value = '';\n  }\n\n  override render() {\n    const groups = this._groupedCommands;\n    const filtered = this._filteredCommands;\n    let flatIndex = -1;\n\n    return html`\n      <div class=\"backdrop\" @click=${() => this.open = false}></div>\n      <div\n        class=\"palette\"\n        role=\"dialog\"\n        aria-label=\"Command palette\"\n        aria-modal=\"true\"\n        ?hidden=${!this.open}\n      >\n        <slot name=\"header\"></slot>\n        <div class=\"input-wrap\">\n          <cg-icon class=\"search-icon\" name=\"minimalistic-magnifer-linear\" size=\"sm\" aria-hidden=\"true\"></cg-icon>\n          <input\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"command-list\"\n            aria-activedescendant=${this.open && filtered.length ? `command-opt-${this._activeIndex}` : nothing}\n            aria-autocomplete=\"list\"\n            placeholder=${this.placeholder}\n            .value=${this.value}\n            @input=${this._handleInput}\n            @keydown=${this._handleKeydown}\n          />\n        </div>\n        <div class=\"list\" id=\"command-list\" role=\"listbox\" aria-label=\"Commands\">\n          ${this.loading ? html`\n            <div class=\"loading\" aria-busy=\"true\">\n              <cg-spinner size=\"sm\"></cg-spinner>\n              <span>Loading…</span>\n            </div>\n          ` : filtered.length === 0 ? html`\n            <slot name=\"empty\">\n              <div class=\"empty\">${this.emptyText}</div>\n            </slot>\n          ` : groups.map(({ group, items }) => html`\n            ${group ? html`<div class=\"group-label\">${group}</div>` : nothing}\n            ${items.map(item => {\n              flatIndex++;\n              const isActive = flatIndex === this._activeIndex;\n              return html`\n                <button\n                  class=\"item\"\n                  id=${`command-opt-${flatIndex}`}\n                  role=\"option\"\n                  ?disabled=${item.disabled}\n                  aria-selected=${isActive ? 'true' : 'false'}\n                  data-active=${isActive ? 'true' : nothing}\n                  @click=${() => this._select(item)}\n                  @mouseenter=${() => { this._activeIndex = flatIndex; }}\n                >\n                  ${item.icon ? html`<cg-icon class=\"item-icon\" name=${item.icon} size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n                  <span class=\"item-label\">${item.label}</span>\n                  ${item.shortcut ? html`<span class=\"shortcut\">${item.shortcut}</span>` : nothing}\n                </button>\n              `;\n            })}\n          `)}\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-command': CgCommand;\n  }\n}\n"],"names":["CgCommand","LitElement","FocusTrap","changed","query","c","label","keywords","filtered","groups","cmd","group","items","index","handled","handleRovingKey","item","flatIndex","html","nothing","isActive","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-context-menu/cg-context-menu.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as l, nothing as d } from "lit";
 import { property as h, state as _, query as m, customElement as v } from "lit/decorators.js";
-import { h as f, r as b, m as E } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b, m as E } from "../../chunks/premium.css-DHekUEUt.js";
 import { a as g } from "../../chunks/floating-DfsaYJnh.js";
 import { b as L } from "../../chunks/outside-click-CP1P1fK3.js";
 import { h as x } from "../../chunks/roving-index-BuO0tTba.js";

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

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

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

@@ -1,8 +1,8 @@
-import { css as p, LitElement as u, nothing as g, html as d } from "lit";
-import { property as o, state as h, customElement as v } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as p, LitElement as u, nothing as d, html as g } from "lit";
+import { property as t, state as h, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-calendar/cg-calendar.js";
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (e, a, n, s) => {
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, a, n, s) => {
   for (var i = s > 1 ? void 0 : s ? y(a, n) : a, c = e.length - 1, l; c >= 0; c--)
     (l = e[c]) && (i = (s ? l(a, n, i) : l(i)) || i);
   return s && i && m(a, n, i), i;
@@ -43,14 +43,16 @@ let r = class extends u {
   }
   render() {
     const e = this._formatDisplay();
-    return d`
-      ${this.label ? d`<div class="label">${this.label}</div>` : g}
+    return g`
+      ${this.label ? g`<div class="label">${this.label}</div>` : d}
       <div
         class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
         tabindex=${this.disabled ? "-1" : "0"}
         role="combobox"
         aria-expanded=${this._open}
         aria-haspopup="dialog"
+        aria-controls="cg-dp-popover"
+        aria-invalid=${this.error ? "true" : d}
         aria-label=${this.label || "Date picker"}
         @click=${this._toggle}
         @keydown=${this._handleKeydown}
@@ -68,7 +70,7 @@ let r = class extends u {
         </span>
       </div>
 
-      <div class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Calendar">
+      <div id="cg-dp-popover" class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Calendar">
         <cg-calendar
           mode="single"
           .value=${this.value}
@@ -77,7 +79,7 @@ let r = class extends u {
           @cg-calendar-change=${this._onCalendarChange}
         ></cg-calendar>
       </div>
-      ${this.helper ? d`<div class="helper">${this.helper}</div>` : g}
+      ${this.helper ? g`<div class="helper">${this.helper}</div>` : d}
     `;
   }
 };
@@ -192,46 +194,46 @@ r.styles = [f, b, p`
     :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
     :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
   `];
-t([
-  o()
+o([
+  t()
 ], r.prototype, "label", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "value", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "placeholder", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "name", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "helper", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "min", 2);
-t([
-  o()
+o([
+  t()
 ], r.prototype, "max", 2);
-t([
-  o({ reflect: !0 })
+o([
+  t({ reflect: !0 })
 ], r.prototype, "size", 2);
-t([
-  o({ reflect: !0 })
+o([
+  t({ reflect: !0 })
 ], r.prototype, "rounded", 2);
-t([
-  o({ type: Boolean })
+o([
+  t({ type: Boolean })
 ], r.prototype, "disabled", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
+o([
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "error", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
+o([
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "success", 2);
-t([
+o([
   h()
 ], r.prototype, "_open", 2);
-r = t([
+r = o([
   v("cg-date-picker")
 ], r);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-date-picker.js","sources":["../../../src/components/cg-date-picker/cg-date-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-picker\n * Date picker trigger that opens a single-mode cg-calendar in a floating popover.\n *\n * @example\n * ```html\n * <cg-date-picker label=\"Start date\" placeholder=\"Pick a date\"></cg-date-picker>\n * <cg-date-picker label=\"Birthday\" value=\"2000-01-15\" min=\"1900-01-01\" max=\"2025-12-31\"></cg-date-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When a date is selected\n */\n@customElement('cg-date-picker')\nexport class CgDatePicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; }\n\n    /* ── Trigger ── */\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      padding: 0 var(--cg-spacing-4);\n      height: var(--cg-component-input-height-md);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }\n    .trigger:focus-visible,\n    .trigger.open {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .trigger:focus-visible,\n    :host([error]) .trigger.open { border-color: var(--cg-color-status-error-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }\n    :host([success]) .trigger { border-color: var(--cg-color-input-icon-success); }\n    :host([success]) .trigger:focus-visible,\n    :host([success]) .trigger.open { border-color: var(--cg-color-status-success-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }\n\n    /* Size */\n    :host([size=\"lg\"]) .trigger { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-base); }\n\n    /* Rounded */\n    :host([rounded=\"none\"]) .trigger { border-radius: 0; }\n    :host([rounded=\"sm\"]) .trigger { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .trigger { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .trigger { border-radius: var(--cg-component-input-radius); }\n\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n    .trigger-text {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Popover (positioning + animation only — cg-calendar owns the visual chrome) ── */\n    .popover {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .popover.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    /* ── Helper ── */\n    .helper {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      padding: var(--cg-spacing-4) 0 0;\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n  `];\n\n  @property() label = '';\n  @property() value = '';\n  @property() placeholder = 'Select date';\n  @property() name = '';\n  @property() helper = '';\n  @property() min = '';\n  @property() max = '';\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n\n  @state() private _open = false;\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n  }\n\n  private _close() { this._open = false; }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string }>;\n    e.stopPropagation();\n    this.value = ev.detail.value || '';\n    this._close();\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _formatDisplay(): string {\n    if (!this.value) return '';\n    const d = new Date(this.value + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this._open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  override render() {\n    const display = this._formatDisplay();\n\n    return html`\n      ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n      <div\n        class=\"trigger ${this._open ? 'open' : ''} ${this.disabled ? 'disabled' : ''}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"combobox\"\n        aria-expanded=${this._open}\n        aria-haspopup=\"dialog\"\n        aria-label=${this.label || 'Date picker'}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">\n          ${display || this.placeholder}\n        </span>\n      </div>\n\n      <div class=\"popover ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Calendar\">\n        <cg-calendar\n          mode=\"single\"\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-date-picker': CgDatePicker; }\n}\n"],"names":["CgDatePicker","LitElement","ev","d","display","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;AAkBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiHO,KAAA,QAAQ,IACR,KAAA,QAAQ,IACR,KAAA,cAAc,eACd,KAAA,OAAO,IACP,KAAA,SAAS,IACT,KAAA,MAAM,IACN,KAAA,MAAM,IACW,KAAA,OAAoB,MACpB,KAAA,UAAuC,MACvC,KAAA,WAAW,IACI,KAAA,QAAQ,IACR,KAAA,UAAU,IAE7C,KAAQ,QAAQ,IAwBzB,KAAQ,sBAAsB,CAAC,MAAa;AAC1C,MAAK,EAAE,aAAA,EAAe,SAAS,IAAI,UAAQ,OAAA;AAAA,IAC7C;AAAA,EAAA;AAAA,EAxBQ,UAAU;AAChB,IAAI,KAAK,aACT,KAAK,QAAQ,CAAC,KAAK;AAAA,EACrB;AAAA,EAEQ,SAAS;AAAE,SAAK,QAAQ;AAAA,EAAO;AAAA,EAE/B,kBAAkB,GAAU;AAClC,UAAMC,IAAK;AACX,MAAE,gBAAA,GACF,KAAK,QAAQA,EAAG,OAAO,SAAS,IAChC,KAAK,OAAA,GACL,KAAK,cAAc,IAAI,YAAY,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAA,GAAS,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACnH;AAAA,EAEQ,iBAAyB;AAC/B,QAAI,CAAC,KAAK,MAAO,QAAO;AACxB,UAAMC,IAAI,oBAAI,KAAK,KAAK,QAAQ,WAAW;AAC3C,WAAI,MAAMA,EAAE,QAAA,CAAS,IAAU,KACxBA,EAAE,mBAAmB,QAAW,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK,WAAW;AAAA,EAC5F;AAAA,EAMQ,eAAe,GAAkB;AACvC,QAAI,EAAE,QAAQ,UAAU;AAAE,WAAK,OAAA;AAAU;AAAA,IAAQ;AACjD,KAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC5B,KAAK,UAAS,EAAE,eAAA,GAAkB,KAAK,QAAA;AAAA,EAEhD;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,mBAAmB;AAAA,EAC7D;AAAA,EACS,uBAAuB;AAC9B,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,mBAAmB;AAAA,EAChE;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU,KAAK,eAAA;AAErB,WAAOC;AAAA,QACH,KAAK,QAAQA,uBAA0B,KAAK,KAAK,WAAWC,CAAO;AAAA;AAAA,yBAElD,KAAK,QAAQ,SAAS,EAAE,IAAI,KAAK,WAAW,aAAa,EAAE;AAAA,mBACjE,KAAK,WAAW,OAAO,GAAG;AAAA;AAAA,wBAErB,KAAK,KAAK;AAAA;AAAA,qBAEb,KAAK,SAAS,aAAa;AAAA,iBAC/B,KAAK,OAAO;AAAA,mBACV,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAUDF,IAA0B,KAAhB,aAAkB;AAAA,YACrDA,KAAW,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,4BAIX,KAAK,QAAQ,SAAS,EAAE;AAAA;AAAA;AAAA,mBAGjC,KAAK,KAAK;AAAA,iBACZ,KAAK,GAAG;AAAA,iBACR,KAAK,GAAG;AAAA,gCACO,KAAK,iBAAiB;AAAA;AAAA;AAAA,QAG9C,KAAK,SAASC,wBAA2B,KAAK,MAAM,WAAWC,CAAO;AAAA;AAAA,EAE5E;AACF;AAlNaN,EACK,SAAS,CAACO,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,GA8GnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjHCX,EAiHC,WAAA,SAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GAlHCX,EAkHC,WAAA,SAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnHCX,EAmHC,WAAA,eAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GApHCX,EAoHC,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GArHCX,EAqHC,WAAA,UAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GAtHCX,EAsHC,WAAA,OAAA,CAAA;AACAU,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvHCX,EAuHC,WAAA,OAAA,CAAA;AACiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxHhBX,EAwHkB,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzHhBX,EAyHkB,WAAA,WAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA1HhBX,EA0HkB,WAAA,YAAA,CAAA;AACeU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3H/BX,EA2HiC,WAAA,SAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5H/BX,EA4HiC,WAAA,WAAA,CAAA;AAE3BU,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9HIZ,EA8HM,WAAA,SAAA,CAAA;AA9HNA,IAANU,EAAA;AAAA,EADNG,EAAc,gBAAgB;AAAA,GAClBb,CAAA;"}
+{"version":3,"file":"cg-date-picker.js","sources":["../../../src/components/cg-date-picker/cg-date-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-picker\n * Date picker trigger that opens a single-mode cg-calendar in a floating popover.\n *\n * @example\n * ```html\n * <cg-date-picker label=\"Start date\" placeholder=\"Pick a date\"></cg-date-picker>\n * <cg-date-picker label=\"Birthday\" value=\"2000-01-15\" min=\"1900-01-01\" max=\"2025-12-31\"></cg-date-picker>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When a date is selected\n */\n@customElement('cg-date-picker')\nexport class CgDatePicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; }\n\n    /* ── Trigger ── */\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      padding: 0 var(--cg-spacing-4);\n      height: var(--cg-component-input-height-md);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }\n    .trigger:focus-visible,\n    .trigger.open {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .trigger:focus-visible,\n    :host([error]) .trigger.open { border-color: var(--cg-color-status-error-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }\n    :host([success]) .trigger { border-color: var(--cg-color-input-icon-success); }\n    :host([success]) .trigger:focus-visible,\n    :host([success]) .trigger.open { border-color: var(--cg-color-status-success-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }\n\n    /* Size */\n    :host([size=\"lg\"]) .trigger { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-base); }\n\n    /* Rounded */\n    :host([rounded=\"none\"]) .trigger { border-radius: 0; }\n    :host([rounded=\"sm\"]) .trigger { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .trigger { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .trigger { border-radius: var(--cg-component-input-radius); }\n\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n    .trigger-text {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Popover (positioning + animation only — cg-calendar owns the visual chrome) ── */\n    .popover {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .popover.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n\n    /* ── Helper ── */\n    .helper {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      padding: var(--cg-spacing-4) 0 0;\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n  `];\n\n  @property() label = '';\n  @property() value = '';\n  @property() placeholder = 'Select date';\n  @property() name = '';\n  @property() helper = '';\n  @property() min = '';\n  @property() max = '';\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n\n  @state() private _open = false;\n\n  private _toggle() {\n    if (this.disabled) return;\n    this._open = !this._open;\n  }\n\n  private _close() { this._open = false; }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string }>;\n    e.stopPropagation();\n    this.value = ev.detail.value || '';\n    this._close();\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _formatDisplay(): string {\n    if (!this.value) return '';\n    const d = new Date(this.value + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this._open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  override render() {\n    const display = this._formatDisplay();\n\n    return html`\n      ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n      <div\n        class=\"trigger ${this._open ? 'open' : ''} ${this.disabled ? 'disabled' : ''}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"combobox\"\n        aria-expanded=${this._open}\n        aria-haspopup=\"dialog\"\n        aria-controls=\"cg-dp-popover\"\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-label=${this.label || 'Date picker'}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"trigger-text ${!display ? 'placeholder' : ''}\">\n          ${display || this.placeholder}\n        </span>\n      </div>\n\n      <div id=\"cg-dp-popover\" class=\"popover ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Calendar\">\n        <cg-calendar\n          mode=\"single\"\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-date-picker': CgDatePicker; }\n}\n"],"names":["CgDatePicker","LitElement","ev","d","display","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -21,6 +21,8 @@ export declare class CgDateRangePicker extends LitElement {
     min: string;
     max: string;
     placeholder: string;
+    /** Placeholder for the end-date segment (overridable / i18n-able). */
+    endPlaceholder: string;
     format: string;
     disabled: boolean;
     open: boolean;

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

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

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

@@ -1,6 +1,6 @@
-import { css as p, LitElement as h, nothing as l, html as g } from "lit";
+import { css as g, LitElement as h, nothing as l, html as p } from "lit";
 import { property as a, customElement as u } from "lit/decorators.js";
-import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as v } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-calendar/cg-calendar.js";
 var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, s, n) => {
   for (var i = n > 1 ? void 0 : n ? b(t, s) : t, c = e.length - 1, d; c >= 0; c--)
@@ -9,7 +9,7 @@ var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, s
 };
 let r = class extends h {
   constructor() {
-    super(), this.label = "", this.from = "", this.to = "", this.min = "", this.max = "", this.placeholder = "Select date range", this.format = "MMM dd, yyyy", this.disabled = !1, this.open = !1, this.error = "", this._handleClickOutside = (e) => {
+    super(), this.label = "", this.from = "", this.to = "", this.min = "", this.max = "", this.placeholder = "Select date range", this.endPlaceholder = "End date", this.format = "MMM dd, yyyy", this.disabled = !1, this.open = !1, this.error = "", this._handleClickOutside = (e) => {
       e.composedPath().includes(this) || this._close();
     }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
@@ -59,13 +59,14 @@ let r = class extends h {
   }
   render() {
     const e = this._formatDisplay(this.from), t = this._formatDisplay(this.to);
-    return g`
-      ${this.label ? g`<label class="label">${this.label}</label>` : l}
+    return p`
+      ${this.label ? p`<label class="label">${this.label}</label>` : l}
       <div
         class="trigger ${this.open ? "open" : ""} ${this.disabled ? "disabled" : ""} ${this.error ? "invalid" : ""}"
         role="combobox"
         tabindex=${this.disabled ? "-1" : "0"}
         aria-expanded=${this.open ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : l}
         aria-haspopup="dialog"
         aria-controls="cg-drp-dropdown"
         aria-label=${this.label || "Date range picker"}
@@ -88,7 +89,7 @@ let r = class extends h {
             <path d="M9 6l6 6-6 6"/>
           </svg>
         </span>
-        <span class="segment ${t ? "" : "empty"}">${t || "End date"}</span>
+        <span class="segment ${t ? "" : "empty"}">${t || this.endPlaceholder}</span>
       </div>
 
       <div id="cg-drp-dropdown" class="dropdown ${this.open ? "open" : ""}" role="dialog" aria-label="Date range calendar">
@@ -101,12 +102,12 @@ let r = class extends h {
           @cg-calendar-change=${this._onCalendarChange}
         ></cg-calendar>
       </div>
-      ${this.error ? g`<span id="cg-drp-error" class="error-message" role="alert">${this.error}</span>` : l}
+      ${this.error ? p`<span id="cg-drp-error" class="error-message" role="alert">${this.error}</span>` : l}
     `;
   }
 };
 r.formAssociated = !0;
-r.styles = [f, v, p`
+r.styles = [f, v, g`
     :host { position: relative; font-family: var(--cg-font-family-primary); }
 
     .label {
@@ -245,6 +246,9 @@ o([
 o([
   a()
 ], r.prototype, "placeholder", 2);
+o([
+  a({ attribute: "end-placeholder" })
+], r.prototype, "endPlaceholder", 2);
 o([
   a()
 ], r.prototype, "format", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"cg-date-range-picker.js","sources":["../../../src/components/cg-date-range-picker/cg-date-range-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-range-picker\n * Dual-input date range picker that opens a range-mode cg-calendar.\n *\n * @example\n * ```html\n * <cg-date-range-picker label=\"Dates\" from=\"2026-04-01\" to=\"2026-04-10\"></cg-date-range-picker>\n * ```\n *\n * @fires {CustomEvent<{from: string, to: string}>} cg-date-range-change\n */\n@customElement('cg-date-range-picker')\nexport class CgDateRangePicker extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if ('attachInternals' in this) {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; font-family: var(--cg-font-family-primary); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n      display: block;\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .trigger:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    .trigger.open,\n    .trigger:focus-visible {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .trigger.disabled {\n      opacity: 0.5;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n    }\n\n    .trigger.invalid {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    .trigger.invalid:focus-visible,\n    .trigger.invalid.open {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    .error-message {\n      display: block;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .segment {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .segment.empty { color: var(--cg-color-input-text-placeholder); }\n\n    .arrow {\n      flex-shrink: 0;\n      color: var(--cg-color-input-text-placeholder);\n      display: flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-2);\n    }\n    .arrow svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dropdown.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n  `];\n\n  @property() label = '';\n  @property() from = '';\n  @property() to = '';\n  @property() min = '';\n  @property() max = '';\n  @property() placeholder = 'Select date range';\n  @property() format = 'MMM dd, yyyy';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() error = '';\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('from') || changed.has('to')) {\n      this._syncFormValue();\n    }\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return;\n    const fd = new FormData();\n    if (this.from) fd.append('from', this.from);\n    if (this.to) fd.append('to', this.to);\n    this._internals.setFormValue(fd);\n  }\n\n  private _toggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n  }\n\n  private _close() {\n    this.open = false;\n  }\n\n  private _formatDisplay(iso: string): string {\n    if (!iso) return '';\n    const d = new Date(iso + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string; rangeEnd?: string }>;\n    e.stopPropagation();\n    const { value, rangeEnd } = ev.detail;\n    this.from = value || '';\n    this.to = rangeEnd || '';\n\n    if (this.from && this.to) {\n      this.dispatchEvent(new CustomEvent('cg-date-range-change', {\n        detail: { from: this.from, to: this.to },\n        bubbles: true,\n        composed: true,\n      }));\n      // Close after both picked\n      setTimeout(() => { this.open = false; }, 120);\n    }\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this.open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override render() {\n    const fromText = this._formatDisplay(this.from);\n    const toText = this._formatDisplay(this.to);\n    return html`\n      ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n      <div\n        class=\"trigger ${this.open ? 'open' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'invalid' : ''}\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-haspopup=\"dialog\"\n        aria-controls=\"cg-drp-dropdown\"\n        aria-label=${this.label || 'Date range picker'}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-describedby=${this.error ? 'cg-drp-error' : nothing}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"segment ${fromText ? '' : 'empty'}\">${fromText || this.placeholder}</span>\n        <span class=\"arrow\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M9 6l6 6-6 6\"/>\n          </svg>\n        </span>\n        <span class=\"segment ${toText ? '' : 'empty'}\">${toText || 'End date'}</span>\n      </div>\n\n      <div id=\"cg-drp-dropdown\" class=\"dropdown ${this.open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Date range calendar\">\n        <cg-calendar\n          mode=\"range\"\n          .value=${this.from}\n          .rangeEnd=${this.to}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.error ? html`<span id=\"cg-drp-error\" class=\"error-message\" role=\"alert\">${this.error}</span>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-date-range-picker': CgDateRangePicker;\n  }\n}\n"],"names":["CgDateRangePicker","LitElement","changed","fd","iso","d","ev","value","rangeEnd","fromText","toText","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAiBO,IAAMA,IAAN,cAAgCC,EAAW;AAAA,EAIhD,cAAc;AACZ,UAAA,GAgIU,KAAA,QAAQ,IACR,KAAA,OAAO,IACP,KAAA,KAAK,IACL,KAAA,MAAM,IACN,KAAA,MAAM,IACN,KAAA,cAAc,qBACd,KAAA,SAAS,gBACQ,KAAA,WAAW,IACI,KAAA,OAAO,IACvC,KAAA,QAAQ,IAkDpB,KAAQ,sBAAsB,CAAC,MAAa;AAC1C,MAAK,EAAE,aAAA,EAAe,SAAS,IAAI,UAAQ,OAAA;AAAA,IAC7C,GA5LM,qBAAqB,SACvB,KAAK,aAAa,KAAK,gBAAA;AAAA,EAE3B;AAAA,EAuIS,QAAQC,GAA+B;AAC9C,KAAIA,EAAQ,IAAI,MAAM,KAAKA,EAAQ,IAAI,IAAI,MACzC,KAAK,eAAA;AAAA,EAET;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,WAAY;AACtB,UAAMC,IAAK,IAAI,SAAA;AACf,IAAI,KAAK,QAAMA,EAAG,OAAO,QAAQ,KAAK,IAAI,GACtC,KAAK,MAAIA,EAAG,OAAO,MAAM,KAAK,EAAE,GACpC,KAAK,WAAW,aAAaA,CAAE;AAAA,EACjC;AAAA,EAEQ,UAAU;AAChB,IAAI,KAAK,aACT,KAAK,OAAO,CAAC,KAAK;AAAA,EACpB;AAAA,EAEQ,SAAS;AACf,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,eAAeC,GAAqB;AAC1C,QAAI,CAACA,EAAK,QAAO;AACjB,UAAMC,IAAI,oBAAI,KAAKD,IAAM,WAAW;AACpC,WAAI,MAAMC,EAAE,QAAA,CAAS,IAAU,KACxBA,EAAE,mBAAmB,QAAW,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK,WAAW;AAAA,EAC5F;AAAA,EAEQ,kBAAkB,GAAU;AAClC,UAAMC,IAAK;AACX,MAAE,gBAAA;AACF,UAAM,EAAE,OAAAC,GAAO,UAAAC,EAAA,IAAaF,EAAG;AAC/B,SAAK,OAAOC,KAAS,IACrB,KAAK,KAAKC,KAAY,IAElB,KAAK,QAAQ,KAAK,OACpB,KAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,QAAQ,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,GAAA;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC,GAEF,WAAW,MAAM;AAAE,WAAK,OAAO;AAAA,IAAO,GAAG,GAAG;AAAA,EAEhD;AAAA,EAMS,oBAAoB;AAC3B,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,mBAAmB;AAAA,EAC7D;AAAA,EACS,uBAAuB;AAC9B,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,mBAAmB;AAAA,EAChE;AAAA,EAEQ,eAAe,GAAkB;AACvC,QAAI,EAAE,QAAQ,UAAU;AAAE,WAAK,OAAA;AAAU;AAAA,IAAQ;AACjD,KAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC5B,KAAK,SAAQ,EAAE,eAAA,GAAkB,KAAK,QAAA;AAAA,EAE/C;AAAA,EAES,SAAS;AAChB,UAAMC,IAAW,KAAK,eAAe,KAAK,IAAI,GACxCC,IAAS,KAAK,eAAe,KAAK,EAAE;AAC1C,WAAOC;AAAA,QACH,KAAK,QAAQA,yBAA4B,KAAK,KAAK,aAAaC,CAAO;AAAA;AAAA,yBAEtD,KAAK,OAAO,SAAS,EAAE,IAAI,KAAK,WAAW,aAAa,EAAE,IAAI,KAAK,QAAQ,YAAY,EAAE;AAAA;AAAA,mBAE/F,KAAK,WAAW,OAAO,GAAG;AAAA,wBACrB,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA;AAAA,qBAG/B,KAAK,SAAS,mBAAmB;AAAA,uBAC/B,KAAK,QAAQ,SAASA,CAAO;AAAA,2BACzB,KAAK,QAAQ,iBAAiBA,CAAO;AAAA,iBAC/C,KAAK,OAAO;AAAA,mBACV,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAUPH,IAAW,KAAK,OAAO,KAAKA,KAAY,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMxDC,IAAS,KAAK,OAAO,KAAKA,KAAU,UAAU;AAAA;AAAA;AAAA,kDAG3B,KAAK,OAAO,SAAS,EAAE;AAAA;AAAA;AAAA,mBAGtD,KAAK,IAAI;AAAA,sBACN,KAAK,EAAE;AAAA,iBACZ,KAAK,GAAG;AAAA,iBACR,KAAK,GAAG;AAAA,gCACO,KAAK,iBAAiB;AAAA;AAAA;AAAA,QAG9C,KAAK,QAAQC,+DAAkE,KAAK,KAAK,YAAYC,CAAO;AAAA;AAAA,EAElH;AACF;AApQaZ,EACJ,iBAAiB;AADbA,EAWK,SAAS,CAACa,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,GAwHnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GArICjB,EAqIC,WAAA,SAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAtICjB,EAsIC,WAAA,QAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvICjB,EAuIC,WAAA,MAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxICjB,EAwIC,WAAA,OAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzICjB,EAyIC,WAAA,OAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA1ICjB,EA0IC,WAAA,eAAA,CAAA;AACAgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA3ICjB,EA2IC,WAAA,UAAA,CAAA;AACiBgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5IhBjB,EA4IkB,WAAA,YAAA,CAAA;AACegB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7I/BjB,EA6IiC,WAAA,QAAA,CAAA;AAChCgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9ICjB,EA8IC,WAAA,SAAA,CAAA;AA9IDA,IAANgB,EAAA;AAAA,EADNE,EAAc,sBAAsB;AAAA,GACxBlB,CAAA;"}
+{"version":3,"file":"cg-date-range-picker.js","sources":["../../../src/components/cg-date-range-picker/cg-date-range-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-calendar/cg-calendar.js';\n\n/**\n * @element cg-date-range-picker\n * Dual-input date range picker that opens a range-mode cg-calendar.\n *\n * @example\n * ```html\n * <cg-date-range-picker label=\"Dates\" from=\"2026-04-01\" to=\"2026-04-10\"></cg-date-range-picker>\n * ```\n *\n * @fires {CustomEvent<{from: string, to: string}>} cg-date-range-change\n */\n@customElement('cg-date-range-picker')\nexport class CgDateRangePicker extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if ('attachInternals' in this) {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; font-family: var(--cg-font-family-primary); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n      display: block;\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .trigger-icon svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .trigger:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    .trigger.open,\n    .trigger:focus-visible {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .trigger.disabled {\n      opacity: 0.5;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n    }\n\n    .trigger.invalid {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    .trigger.invalid:focus-visible,\n    .trigger.invalid.open {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    .error-message {\n      display: block;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .segment {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      padding: 0 var(--cg-spacing-12);\n    }\n    .segment.empty { color: var(--cg-color-input-text-placeholder); }\n\n    .arrow {\n      flex-shrink: 0;\n      color: var(--cg-color-input-text-placeholder);\n      display: flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-2);\n    }\n    .arrow svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4);\n      border-radius: var(--cg-component-calendar-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dropdown.open {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      pointer-events: auto;\n    }\n  `];\n\n  @property() label = '';\n  @property() from = '';\n  @property() to = '';\n  @property() min = '';\n  @property() max = '';\n  @property() placeholder = 'Select date range';\n  /** Placeholder for the end-date segment (overridable / i18n-able). */\n  @property({ attribute: 'end-placeholder' }) endPlaceholder = 'End date';\n  @property() format = 'MMM dd, yyyy';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() error = '';\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('from') || changed.has('to')) {\n      this._syncFormValue();\n    }\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return;\n    const fd = new FormData();\n    if (this.from) fd.append('from', this.from);\n    if (this.to) fd.append('to', this.to);\n    this._internals.setFormValue(fd);\n  }\n\n  private _toggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n  }\n\n  private _close() {\n    this.open = false;\n  }\n\n  private _formatDisplay(iso: string): string {\n    if (!iso) return '';\n    const d = new Date(iso + 'T00:00:00');\n    if (isNaN(d.getTime())) return '';\n    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n\n  private _onCalendarChange(e: Event) {\n    const ev = e as CustomEvent<{ value: string; rangeEnd?: string }>;\n    e.stopPropagation();\n    const { value, rangeEnd } = ev.detail;\n    this.from = value || '';\n    this.to = rangeEnd || '';\n\n    if (this.from && this.to) {\n      this.dispatchEvent(new CustomEvent('cg-date-range-change', {\n        detail: { from: this.from, to: this.to },\n        bubbles: true,\n        composed: true,\n      }));\n      // Close after both picked\n      setTimeout(() => { this.open = false; }, 120);\n    }\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleClickOutside);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this.open) { e.preventDefault(); this._toggle(); }\n    }\n  }\n\n  override render() {\n    const fromText = this._formatDisplay(this.from);\n    const toText = this._formatDisplay(this.to);\n    return html`\n      ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n      <div\n        class=\"trigger ${this.open ? 'open' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'invalid' : ''}\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-haspopup=\"dialog\"\n        aria-controls=\"cg-drp-dropdown\"\n        aria-label=${this.label || 'Date range picker'}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-describedby=${this.error ? 'cg-drp-error' : nothing}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n            <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n          </svg>\n        </span>\n        <span class=\"segment ${fromText ? '' : 'empty'}\">${fromText || this.placeholder}</span>\n        <span class=\"arrow\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M9 6l6 6-6 6\"/>\n          </svg>\n        </span>\n        <span class=\"segment ${toText ? '' : 'empty'}\">${toText || this.endPlaceholder}</span>\n      </div>\n\n      <div id=\"cg-drp-dropdown\" class=\"dropdown ${this.open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Date range calendar\">\n        <cg-calendar\n          mode=\"range\"\n          .value=${this.from}\n          .rangeEnd=${this.to}\n          .min=${this.min}\n          .max=${this.max}\n          @cg-calendar-change=${this._onCalendarChange}\n        ></cg-calendar>\n      </div>\n      ${this.error ? html`<span id=\"cg-drp-error\" class=\"error-message\" role=\"alert\">${this.error}</span>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-date-range-picker': CgDateRangePicker;\n  }\n}\n"],"names":["CgDateRangePicker","LitElement","changed","fd","iso","d","ev","value","rangeEnd","fromText","toText","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-date-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-date-time-picker/cg-date-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA2NnB;IAES,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAwB;IACnC,MAAM,SAAM;IACZ,GAAG,SAAM;IACT,GAAG,SAAM;IACQ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,MAAM,UAAS;IAChB,IAAI,SAAK;IAE5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,OAAO,CAAqB;IAE7C,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,WAAW,CAA8H;IAGjJ,OAAO,KAAK,KAAK,GAGhB;IACD,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,QAAQ;IA8BhB,OAAO,CAAC,SAAS;IAGjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAiGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,qBAAqB,EAAE,gBAAgB,CAAC;KAAE;CAC7E"}
+{"version":3,"file":"cg-date-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-date-time-picker/cg-date-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA2NnB;IAES,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAwB;IACnC,MAAM,SAAM;IACZ,GAAG,SAAM;IACT,GAAG,SAAM;IACQ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,MAAM,UAAS;IAChB,IAAI,SAAK;IAE5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,OAAO,CAAqB;IAE7C,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,WAAW,CAA8H;IAGjJ,OAAO,KAAK,KAAK,GAGhB;IACD,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,QAAQ;IA8BhB,OAAO,CAAC,SAAS;IAGjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAmGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,qBAAqB,EAAE,gBAAgB,CAAC;KAAE;CAC7E"}

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

@@ -1,6 +1,6 @@
 import { css as _, LitElement as w, nothing as b, html as g } from "lit";
 import { property as l, state as v, customElement as x } from "lit/decorators.js";
-import { h as $, r as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as $, r as k } from "../../chunks/premium.css-DHekUEUt.js";
 var M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (t, r, o, s) => {
   for (var e = s > 1 ? void 0 : s ? S(r, o) : r, c = t.length - 1, p; c >= 0; c--)
     (p = t[c]) && (e = (s ? p(r, o, e) : p(e)) || e);
@@ -140,6 +140,8 @@ let i = class extends w {
         tabindex=${this.disabled ? "-1" : "0"}
         role="combobox"
         aria-expanded=${this._open}
+        aria-disabled=${this.disabled ? "true" : b}
+        aria-invalid=${this.error ? "true" : b}
         aria-haspopup="dialog"
         aria-label=${this.label || "Date and time picker"}
         @click=${this._toggle}