@cognivo/components 0.8.0

package/dist/components/cg-file-input/cg-file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-file-input.js","sources":["../../../src/components/cg-file-input/cg-file-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Per-file upload status driven by the consumer via `setFileStatus()`. */\nexport type FileStatus = 'idle' | 'uploading' | 'done' | 'error';\nexport interface FileStatusInfo {\n  state: FileStatus;\n  /** 0–100 — only used when state === 'uploading' */\n  progress?: number;\n  /** Optional error message, surfaced when state === 'error' */\n  error?: string;\n}\n\n/**\n * @element cg-file-input\n * File picker with drag-and-drop, paste-from-clipboard, image thumbnail\n * previews, file-type-aware icons, three sizes (sm | md | lg) plus a compact\n * button-style variant. Live-region announcements + focus management included.\n *\n * Consumers drive per-file upload state via `setFileStatus(file, info)`; the\n * component renders a status pill + progress bar accordingly. The component\n * itself does not perform uploads — it's a UI primitive.\n *\n * @example\n * ```html\n * <cg-file-input label=\"Upload files\" accept=\".pdf,.png,.jpg\" multiple max-size=\"5242880\"></cg-file-input>\n * <cg-file-input variant=\"compact\" multiple></cg-file-input>\n * <cg-file-input size=\"lg\" accept=\"image/*\" multiple paste></cg-file-input>\n * <cg-file-input capture=\"environment\" accept=\"image/*\"></cg-file-input>\n * ```\n *\n * @fires {CustomEvent<{files: File[]}>} cg-file-change\n * @fires {CustomEvent<{files: File[], reason: string}>} cg-file-reject\n * @fires {CustomEvent<{file: File}>} cg-file-remove\n * @fires {CustomEvent<{}>} cg-file-clear - All files cleared via the bulk action\n */\n@customElement('cg-file-input')\nexport class CgFileInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    label {\n      display: block;\n      margin-bottom: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Dropzone variant (default) ── */\n    .dropzone {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-32) var(--cg-spacing-24);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-100) dashed var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-file-input-radius);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      text-align: center;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([size=\"sm\"]) .dropzone { min-height: var(--cg-component-file-input-min-height-sm); padding: var(--cg-spacing-20) var(--cg-spacing-16); gap: var(--cg-spacing-8); }\n    :host([size=\"md\"]) .dropzone { min-height: var(--cg-component-file-input-min-height-md); }\n    :host([size=\"lg\"]) .dropzone { min-height: var(--cg-component-file-input-min-height-lg); padding: var(--cg-spacing-40) var(--cg-spacing-32); gap: var(--cg-spacing-16); }\n\n    .dropzone:hover:not(.disabled) {\n      border-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .dropzone.dragging {\n      border-style: solid;\n      border-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-surface-base-text);\n      box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-overlay-accent-subtle);\n    }\n    .dropzone:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .dropzone.disabled { opacity: 0.5; cursor: not-allowed; }\n\n    :host([error]) .dropzone { border-color: var(--cg-color-status-error-border-default); }\n    :host([success]) .dropzone { border-color: var(--cg-color-status-success-border-default); }\n\n    .icon {\n      color: var(--cg-color-accent-text);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n    .dropzone:hover:not(.disabled) .icon {\n      transform: translateY(calc(var(--cg-spacing-4) * -1));\n    }\n    .dropzone.dragging .icon {\n      transform: scale(1.15) translateY(calc(var(--cg-spacing-2) * -1));\n    }\n    .icon svg { width: var(--cg-icon-size-300); height: var(--cg-icon-size-300); }\n    :host([size=\"sm\"]) .icon svg { width: var(--cg-icon-size-200); height: var(--cg-icon-size-200); }\n    :host([size=\"lg\"]) .icon svg { width: var(--cg-icon-size-400); height: var(--cg-icon-size-400); }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([size=\"lg\"]) .title { font-size: var(--cg-font-size-base); }\n    .subtitle {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .subtitles { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n\n    /* ── Compact variant — button-style with drag overlay ── */\n    .compact {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: 0 var(--cg-spacing-16);\n      height: var(--cg-component-input-height-md);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      font-family: inherit;\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background 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    .compact:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .compact:focus-visible {\n      outline: none;\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .compact.dragging {\n      border-style: dashed;\n      border-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-overlay-accent-light);\n    }\n    .compact.disabled { opacity: 0.5; cursor: not-allowed; }\n    .compact-icon { color: var(--cg-color-input-icon-default); display: flex; flex-shrink: 0; }\n    .compact-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .compact-count {\n      margin-left: auto;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    /* ── Hidden native input ── */\n    input[type=\"file\"] {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* ── File chip list ── */\n    .files {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-16);\n    }\n    @keyframes fileChipIn {\n      from { opacity: 0; transform: translateY(calc(var(--cg-spacing-4) * -1)); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .file {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      animation: fileChipIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .file:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .file-thumb {\n      flex-shrink: 0;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      background: var(--cg-color-surface-cards-background);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .file-thumb.preview { padding: 0; }\n    .file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\n    .file-thumb svg { width: var(--cg-icon-size-150); height: var(--cg-icon-size-150); color: var(--cg-color-surface-container-outlined); }\n    .file-thumb.image svg { color: var(--cg-color-accent-text); }\n    .file-thumb.pdf svg { color: var(--cg-color-status-error-text-default); }\n    .file-thumb.doc svg { color: var(--cg-color-status-info-text-default); }\n    .file-thumb.media svg { color: var(--cg-color-status-success-text-default); }\n    .file-thumb.archive svg { color: var(--cg-color-status-warning-text-default); }\n    .file-info { flex: 1; min-width: 0; }\n    .file-name {\n      display: block;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .file-size {\n      display: block;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .file-remove {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-full);\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .file-remove:hover {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .file-remove:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .helper {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Bulk actions toolbar ── */\n    .bulk-actions {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-top: var(--cg-spacing-12);\n      margin-bottom: calc(var(--cg-spacing-8) * -1);\n    }\n    .bulk-count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .bulk-clear {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      font-family: inherit;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .bulk-clear:hover { background: var(--cg-color-status-error-background-default); }\n    .bulk-clear:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* ── Per-file status pill + progress bar ── */\n    .status-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      flex-shrink: 0;\n    }\n    .status-pill.uploading {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-accent-text);\n    }\n    .status-pill.done {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .status-pill.error {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .progress-track {\n      height: var(--cg-spacing-2);\n      margin-top: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-background);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-accent-text);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Visually-hidden live region for screen readers ── */\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() label = '';\n  @property() placeholder = 'Drop files here or click to browse';\n  @property() helper = '';\n  @property() accept = '';\n  @property() name = '';\n  @property({ type: Boolean }) multiple = false;\n  @property({ type: Number, attribute: 'max-size' }) maxSize = 0;\n  @property({ type: Number, attribute: 'max-files' }) maxFiles = 0;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'dropzone' | 'compact' = 'dropzone';\n  /** Mobile camera capture: 'user' (front) or 'environment' (rear). Pass-through to <input>. */\n  @property() capture: '' | 'user' | 'environment' = '';\n  /** Accept files pasted from the clipboard (Ctrl/Cmd+V) when no editable element is focused. */\n  @property({ type: Boolean }) paste = false;\n\n  @state() private _files: File[] = [];\n  @state() private _dragging = false;\n  @state() private _announcement = '';\n\n  @query('input[type=\"file\"]') private _inputEl!: HTMLInputElement;\n\n  private _previews = new Map<File, string>();\n  private _statusMap = new Map<File, FileStatusInfo>();\n\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;\n  }\n\n  /** Categorize a file by MIME / extension into one of: image | pdf | doc | media | archive | default. */\n  private _fileKind(file: File): 'image' | 'pdf' | 'doc' | 'media' | 'archive' | 'default' {\n    const type = file.type;\n    const name = file.name.toLowerCase();\n    if (type.startsWith('image/')) return 'image';\n    if (type === 'application/pdf' || name.endsWith('.pdf')) return 'pdf';\n    if (type.startsWith('video/') || type.startsWith('audio/')) return 'media';\n    if (/\\.(zip|rar|7z|tar|gz|bz2)$/i.test(name)) return 'archive';\n    if (/\\.(doc|docx|xls|xlsx|ppt|pptx|txt|md|rtf|csv)$/i.test(name) ||\n        type.startsWith('text/') ||\n        type.includes('word') ||\n        type.includes('sheet') ||\n        type.includes('presentation')) return 'doc';\n    return 'default';\n  }\n\n  private _previewFor(file: File): string | null {\n    if (!file.type.startsWith('image/')) return null;\n    let url = this._previews.get(file);\n    if (!url) {\n      url = URL.createObjectURL(file);\n      this._previews.set(file, url);\n    }\n    return url;\n  }\n\n  private _revokePreview(file: File): void {\n    const url = this._previews.get(file);\n    if (url) {\n      URL.revokeObjectURL(url);\n      this._previews.delete(file);\n    }\n  }\n\n  private _validateFiles(files: File[]): { valid: File[]; rejected: File[]; reason: string } {\n    const valid: File[] = [];\n    const rejected: File[] = [];\n    let reason = '';\n    for (const file of files) {\n      if (this.maxSize > 0 && file.size > this.maxSize) {\n        rejected.push(file);\n        reason = `File exceeds ${this._formatSize(this.maxSize)}`;\n        continue;\n      }\n      valid.push(file);\n    }\n    if (this.maxFiles > 0 && this._files.length + valid.length > this.maxFiles) {\n      const allowed = this.maxFiles - this._files.length;\n      rejected.push(...valid.slice(allowed));\n      valid.splice(allowed);\n      reason = `Maximum ${this.maxFiles} files allowed`;\n    }\n    return { valid, rejected, reason };\n  }\n\n  private _addFiles(incomingFiles: FileList | null): void {\n    if (!incomingFiles) return;\n    const arr = Array.from(incomingFiles);\n    const { valid, rejected, reason } = this._validateFiles(arr);\n\n    if (rejected.length > 0) {\n      this._announce(`${rejected.length} file${rejected.length === 1 ? '' : 's'} rejected: ${reason}`);\n      this.dispatchEvent(new CustomEvent('cg-file-reject', {\n        detail: { files: rejected, reason },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n\n    if (valid.length > 0) {\n      if (this.multiple) {\n        this._files = [...this._files, ...valid];\n      } else {\n        this._files.forEach(f => { this._revokePreview(f); this._statusMap.delete(f); });\n        this._files = valid.slice(0, 1);\n      }\n      this._announce(`${valid.length} file${valid.length === 1 ? '' : 's'} added: ${valid.map(f => f.name).join(', ')}`);\n      this._updateFormValue();\n      this.dispatchEvent(new CustomEvent('cg-file-change', {\n        detail: { files: this._files },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  private _updateFormValue(): void {\n    if (!this._internals) return;\n    const formData = new FormData();\n    for (const file of this._files) {\n      formData.append(this.name || 'files', file);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  private _removeFile(idx: number): void {\n    const file = this._files[idx];\n    if (!file) return;\n    this._revokePreview(file);\n    this._statusMap.delete(file);\n    const wasLast = this._files.length === 1;\n    const nextIdx = idx >= this._files.length - 1 ? idx - 1 : idx;\n    this._files = this._files.filter((_, i) => i !== idx);\n    this._announce(`Removed ${file.name}`);\n    this._updateFormValue();\n    this.dispatchEvent(new CustomEvent('cg-file-remove', {\n      detail: { file },\n      bubbles: true,\n      composed: true,\n    }));\n    this.dispatchEvent(new CustomEvent('cg-file-change', {\n      detail: { files: this._files },\n      bubbles: true,\n      composed: true,\n    }));\n    // Focus management: move focus to the next remove button, or back to the trigger.\n    this.updateComplete.then(() => {\n      if (wasLast) {\n        const trigger = this.shadowRoot?.querySelector<HTMLElement>('.dropzone, .compact');\n        trigger?.focus();\n      } else {\n        const buttons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-remove');\n        buttons?.[Math.max(0, nextIdx)]?.focus();\n      }\n    });\n  }\n\n  /** Public: clear all selected files. Fires `cg-file-clear` and `cg-file-change`. */\n  clearAll(): void {\n    if (this._files.length === 0) return;\n    this._files.forEach(f => { this._revokePreview(f); this._statusMap.delete(f); });\n    const cleared = this._files.length;\n    this._files = [];\n    this._announce(`Cleared ${cleared} file${cleared === 1 ? '' : 's'}`);\n    this._updateFormValue();\n    this.dispatchEvent(new CustomEvent('cg-file-clear', { bubbles: true, composed: true, detail: {} }));\n    this.dispatchEvent(new CustomEvent('cg-file-change', {\n      detail: { files: this._files },\n      bubbles: true,\n      composed: true,\n    }));\n    this.updateComplete.then(() => {\n      const trigger = this.shadowRoot?.querySelector<HTMLElement>('.dropzone, .compact');\n      trigger?.focus();\n    });\n  }\n\n  /**\n   * Public: set the upload status for a given file. Renders a status pill +\n   * progress bar inside the corresponding chip. The component does not perform\n   * uploads — call this from your upload pipeline.\n   */\n  setFileStatus(file: File, info: FileStatusInfo): void {\n    if (!this._files.includes(file)) return;\n    this._statusMap.set(file, info);\n    this.requestUpdate();\n    if (info.state === 'done') this._announce(`${file.name} uploaded`);\n    else if (info.state === 'error') this._announce(`${file.name} failed: ${info.error ?? 'upload error'}`);\n  }\n\n  private _announce(message: string): void {\n    // Force change so AT re-reads even when same message repeats.\n    this._announcement = '';\n    requestAnimationFrame(() => { this._announcement = message; });\n  }\n\n  private _handlePaste = (e: ClipboardEvent) => {\n    if (!this.paste || this.disabled) return;\n    // Don't hijack paste when the user is typing in an editable element.\n    const active = document.activeElement as HTMLElement | null;\n    const inEditable =\n      !!active && (\n        active.tagName === 'INPUT' ||\n        active.tagName === 'TEXTAREA' ||\n        active.isContentEditable ||\n        // shadow DOM: check the deepest active element\n        active.shadowRoot?.activeElement instanceof HTMLElement\n      );\n    if (inEditable && active !== this) return;\n    const files = e.clipboardData?.files;\n    if (files && files.length > 0) {\n      e.preventDefault();\n      this._addFiles(files);\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('paste', this._handlePaste);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('paste', this._handlePaste);\n    this._previews.forEach(url => URL.revokeObjectURL(url));\n    this._previews.clear();\n    this._statusMap.clear();\n  }\n\n  private _handleChange(e: Event): void {\n    this._addFiles((e.target as HTMLInputElement).files);\n  }\n\n  private _dragCounter = 0;\n\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragging = false;\n    this._dragCounter = 0;\n    if (this.disabled) return;\n    this._addFiles(e.dataTransfer?.files ?? null);\n  }\n\n  private _handleDragEnter(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragCounter++;\n    this._dragging = true;\n  }\n\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n  }\n\n  private _handleDragLeave(): void {\n    this._dragCounter = Math.max(0, this._dragCounter - 1);\n    if (this._dragCounter === 0) this._dragging = false;\n  }\n\n  private _handleClick(): void {\n    if (this.disabled) return;\n    this._inputEl?.click();\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._inputEl?.click();\n    }\n  }\n\n  /** Render a category-aware SVG icon for a chip thumbnail. */\n  private _renderKindIcon(kind: 'image' | 'pdf' | 'doc' | 'media' | 'archive' | 'default') {\n    return svg`\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        ${kind === 'image' ? svg`\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>\n          <path d=\"M21 15l-5-5L5 21\"/>\n        ` : kind === 'pdf' ? svg`\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n          <polyline points=\"14 2 14 8 20 8\"/>\n          <text x=\"8\" y=\"17\" font-size=\"6\" font-family=\"sans-serif\" font-weight=\"700\" fill=\"currentColor\" stroke=\"none\">PDF</text>\n        ` : kind === 'doc' ? svg`\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n          <polyline points=\"14 2 14 8 20 8\"/>\n          <line x1=\"8\" y1=\"13\" x2=\"16\" y2=\"13\"/>\n          <line x1=\"8\" y1=\"17\" x2=\"14\" y2=\"17\"/>\n        ` : kind === 'media' ? svg`\n          <polygon points=\"5 3 19 12 5 21 5 3\" fill=\"currentColor\"/>\n        ` : kind === 'archive' ? svg`\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n          <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"21\" stroke-dasharray=\"2 2\"/>\n        ` : svg`\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n          <polyline points=\"14 2 14 8 20 8\"/>\n        `}\n      </svg>\n    `;\n  }\n\n  private _renderTrigger() {\n    if (this.variant === 'compact') {\n      const count = this._files.length;\n      return html`\n        <button\n          type=\"button\"\n          class=\"compact ${this._dragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}\"\n          ?disabled=${this.disabled}\n          @click=${this._handleClick}\n          @drop=${this._handleDrop}\n          @dragenter=${this._handleDragEnter}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n        >\n          <span class=\"compact-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48\"/>\n            </svg>\n          </span>\n          <span>${this._dragging ? 'Drop to attach' : (count > 0 ? 'Add more files' : 'Attach files')}</span>\n          ${count > 0 ? html`<span class=\"compact-count\">${count}</span>` : nothing}\n        </button>\n      `;\n    }\n    return html`\n      <div\n        class=\"dropzone ${this._dragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}\"\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=${this.label || 'File upload'}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @drop=${this._handleDrop}\n        @dragenter=${this._handleDragEnter}\n        @dragover=${this._handleDragOver}\n        @dragleave=${this._handleDragLeave}\n      >\n        <div class=\"icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n        </div>\n        <div class=\"title\">${this.placeholder}</div>\n        <div class=\"subtitles\">\n          ${this.accept ? html`<div class=\"subtitle\">Accepted: ${this.accept}</div>` : nothing}\n          ${this.maxSize > 0 ? html`<div class=\"subtitle\">Max size: ${this._formatSize(this.maxSize)}</div>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    const fileCount = this._files.length;\n    return html`\n      ${this.label ? html`<label>${this.label}</label>` : nothing}\n      ${this._renderTrigger()}\n      <input\n        type=\"file\"\n        accept=${this.accept}\n        capture=${this.capture || nothing}\n        ?multiple=${this.multiple}\n        ?disabled=${this.disabled}\n        @change=${this._handleChange}\n      />\n      ${fileCount >= 2 ? html`\n        <div class=\"bulk-actions\">\n          <span class=\"bulk-count\">${fileCount} files</span>\n          <button\n            type=\"button\"\n            class=\"bulk-clear\"\n            @click=${() => this.clearAll()}\n          >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <path d=\"M10.5 3.5l-7 7M3.5 3.5l7 7\"/>\n            </svg>\n            Clear all\n          </button>\n        </div>\n      ` : nothing}\n      ${fileCount > 0 ? html`\n        <div class=\"files\">\n          ${this._files.map((file, idx) => {\n            const kind = this._fileKind(file);\n            const previewUrl = this._previewFor(file);\n            const status = this._statusMap.get(file);\n            return html`\n              <div class=\"file\">\n                <div class=\"file-thumb ${kind} ${previewUrl ? 'preview' : ''}\">\n                  ${previewUrl\n                    ? html`<img src=${previewUrl} alt=\"\" />`\n                    : this._renderKindIcon(kind)}\n                </div>\n                <div class=\"file-info\">\n                  <span class=\"file-name\">${file.name}</span>\n                  <span class=\"file-size\">\n                    ${this._formatSize(file.size)}\n                    ${status?.state === 'error' && status.error ? html` · ${status.error}` : nothing}\n                  </span>\n                  ${status?.state === 'uploading' ? html`\n                    <div class=\"progress-track\" role=\"progressbar\"\n                      aria-valuenow=${status.progress ?? 0}\n                      aria-valuemin=\"0\"\n                      aria-valuemax=\"100\"\n                      aria-label=${`Uploading ${file.name}`}\n                    >\n                      <div class=\"progress-fill\" style=\"width: ${Math.max(0, Math.min(100, status.progress ?? 0))}%\"></div>\n                    </div>\n                  ` : nothing}\n                </div>\n                ${status && status.state !== 'idle' ? html`\n                  <span class=\"status-pill ${status.state}\">\n                    ${status.state === 'uploading'\n                      ? `${Math.round(status.progress ?? 0)}%`\n                      : status.state === 'done' ? 'Done' : 'Failed'}\n                  </span>\n                ` : nothing}\n                <button\n                  type=\"button\"\n                  class=\"file-remove\"\n                  aria-label=${`Remove ${file.name}`}\n                  @click=${() => this._removeFile(idx)}\n                >\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\">\n                    <path d=\"M10.5 3.5l-7 7M3.5 3.5l7 7\"/>\n                  </svg>\n                </button>\n              </div>\n            `;\n          })}\n        </div>\n      ` : nothing}\n      ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n      <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${this._announcement}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-file-input': CgFileInput;\n  }\n}\n"],"names":["CgFileInput","LitElement","active","files","bytes","file","type","name","url","valid","rejected","reason","allowed","incomingFiles","arr","f","formData","idx","wasLast","nextIdx","_","cleared","info","message","kind","svg","count","html","nothing","fileCount","previewUrl","status","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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EjG;AACF;AA/vBa5B,EACK,SAAS,CAACgC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuTnD;AAxTUlC,EA0TJ,iBAAiB;AAUZmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GApUCpC,EAoUC,WAAA,SAAA,CAAA;AACAmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GArUCpC,EAqUC,WAAA,eAAA,CAAA;AACAmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAtUCpC,EAsUC,WAAA,UAAA,CAAA;AACAmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvUCpC,EAuUC,WAAA,UAAA,CAAA;AACAmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxUCpC,EAwUC,WAAA,QAAA,CAAA;AACiBmC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzUhBpC,EAyUkB,WAAA,YAAA,CAAA;AACsBmC,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,WAAW,YAAY;AAAA,GA1UtCpC,EA0UwC,WAAA,WAAA,CAAA;AACCmC,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA3UvCpC,EA2UyC,WAAA,YAAA,CAAA;AACRmC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5U/BpC,EA4UiC,WAAA,YAAA,CAAA;AACAmC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7U/BpC,EA6UiC,WAAA,SAAA,CAAA;AACAmC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9U/BpC,EA8UiC,WAAA,WAAA,CAAA;AACfmC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA/UhBpC,EA+UkB,WAAA,QAAA,CAAA;AACAmC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhVhBpC,EAgVkB,WAAA,WAAA,CAAA;AAEjBmC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAlVCpC,EAkVC,WAAA,WAAA,CAAA;AAEiBmC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApVhBpC,EAoVkB,WAAA,SAAA,CAAA;AAEZmC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtVIrC,EAsVM,WAAA,UAAA,CAAA;AACAmC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvVIrC,EAuVM,WAAA,aAAA,CAAA;AACAmC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxVIrC,EAwVM,WAAA,iBAAA,CAAA;AAEoBmC,EAAA;AAAA,EAApCG,EAAM,oBAAoB;AAAA,GA1VhBtC,EA0V0B,WAAA,YAAA,CAAA;AA1V1BA,IAANmC,EAAA;AAAA,EADNI,EAAc,eAAe;AAAA,GACjBvC,CAAA;"}

package/dist/components/cg-filter-bar/cg-filter-bar.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-filter-bar
+ * Horizontal toolbar that groups a search input, applied filter chips, an
+ * "add filter" trigger, and a "clear all" affordance — the canonical
+ * composition for filtered list/table views. The bar wraps onto multiple
+ * rows when chips overflow.
+ *
+ * The component is layout-only: it does not own filter state. Consumers
+ * slot in `<cg-search-input>`, render their own `<cg-filter-chip>`
+ * elements (one per applied filter), and wire the trigger and clear
+ * actions to their own filter store.
+ *
+ * @example
+ * ```html
+ * <cg-filter-bar @cg-filter-clear-all=${onClearAll}>
+ *   <cg-search-input slot="search" placeholder="Search…" @cg-search=${onSearch}></cg-search-input>
+ *   <cg-filter-chip filter-key="status" label="Status" value="Active"></cg-filter-chip>
+ *   <cg-filter-chip filter-key="role" label="Role" value="Doctor"></cg-filter-chip>
+ *   <cg-button slot="trigger" variant="tertiary" @click=${onAddFilter}>+ Add filter</cg-button>
+ * </cg-filter-bar>
+ * ```
+ *
+ * @slot search - The search input (shown left)
+ * @slot - Default slot for cg-filter-chip elements (between search and trigger)
+ * @slot trigger - "Add filter" button or trigger
+ *
+ * @fires {CustomEvent} cg-filter-clear-all - "Clear all" button clicked. Consumer should remove all filters.
+ *
+ * @cssprop --cg-component-filter-bar-gap - Gap between bar regions (default 8px)
+ */
+export declare class CgFilterBar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** When the chip slot is empty, hide the "Clear all" button. */
+    hideEmptyClear: boolean;
+    /** Override the "Clear all" label. */
+    clearLabel: string;
+    /** Don't reserve a min-width for the search slot (useful inside narrow containers). */
+    noSearchGrow: boolean;
+    private _hasChips;
+    private _onChipSlotChange;
+    private _onClearAll;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-filter-bar': CgFilterBar;
+    }
+}
+//# sourceMappingURL=cg-filter-bar.d.ts.map

package/dist/components/cg-filter-bar/cg-filter-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-filter-bar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-filter-bar/cg-filter-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAuDnB;IAEH,gEAAgE;IACW,cAAc,UAAQ;IAEjG,sCAAsC;IACE,UAAU,SAAe;IAEjE,uFAAuF;IACd,YAAY,UAAS;IAErF,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,WAAW,CAMjB;IAEO,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/cg-filter-bar/cg-filter-bar.js

@@ -0,0 +1,115 @@
+import { css as g, LitElement as h, nothing as d, html as p } from "lit";
+import { property as c, state as u, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(e, s) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (r = (i ? n(e, s, r) : n(r)) || r);
+  return i && r && m(e, s, r), r;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.hideEmptyClear = !0, this.clearLabel = "Clear all", this.noSearchGrow = !1, this._hasChips = !1, this._onChipSlotChange = (t) => {
+      const s = t.target.assignedElements({ flatten: !0 });
+      this._hasChips = s.length > 0;
+    }, this._onClearAll = (t) => {
+      t.stopPropagation(), this.dispatchEvent(new CustomEvent("cg-filter-clear-all", {
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  render() {
+    const t = this._hasChips || !this.hideEmptyClear;
+    return p`
+      <div class="bar" role="toolbar" aria-label="Filters">
+        <div class="search">
+          <slot name="search"></slot>
+        </div>
+        <div class="chips">
+          <slot @slotchange=${this._onChipSlotChange}></slot>
+        </div>
+        <div class="actions">
+          <slot name="trigger"></slot>
+          ${t ? p`
+            <button type="button" class="clear-all" @click=${this._onClearAll}>${this.clearLabel}</button>
+          ` : d}
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = [f, b, g`
+    :host { display: block; }
+
+    .bar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--cg-component-filter-bar-gap, var(--cg-spacing-8));
+      padding: var(--cg-spacing-8) 0;
+    }
+
+    .search ::slotted(*) {
+      min-width: var(--cg-spacing-200, 200px);
+    }
+    :host([no-search-grow]) .search ::slotted(*) {
+      min-width: 0;
+    }
+
+    .chips {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .actions {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      margin-left: auto;
+    }
+
+    .clear-all {
+      background: transparent;
+      border: 0;
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-100);
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .clear-all:hover {
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .clear-all:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring);
+    }
+  `];
+o([
+  c({ type: Boolean, attribute: "hide-empty-clear", reflect: !0 })
+], a.prototype, "hideEmptyClear", 2);
+o([
+  c({ attribute: "clear-label" })
+], a.prototype, "clearLabel", 2);
+o([
+  c({ type: Boolean, attribute: "no-search-grow", reflect: !0 })
+], a.prototype, "noSearchGrow", 2);
+o([
+  u()
+], a.prototype, "_hasChips", 2);
+a = o([
+  v("cg-filter-bar")
+], a);
+export {
+  a as CgFilterBar
+};
+//# sourceMappingURL=cg-filter-bar.js.map

package/dist/components/cg-filter-bar/cg-filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-filter-bar.js","sources":["../../../src/components/cg-filter-bar/cg-filter-bar.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-filter-bar\n * Horizontal toolbar that groups a search input, applied filter chips, an\n * \"add filter\" trigger, and a \"clear all\" affordance — the canonical\n * composition for filtered list/table views. The bar wraps onto multiple\n * rows when chips overflow.\n *\n * The component is layout-only: it does not own filter state. Consumers\n * slot in `<cg-search-input>`, render their own `<cg-filter-chip>`\n * elements (one per applied filter), and wire the trigger and clear\n * actions to their own filter store.\n *\n * @example\n * ```html\n * <cg-filter-bar @cg-filter-clear-all=${onClearAll}>\n *   <cg-search-input slot=\"search\" placeholder=\"Search…\" @cg-search=${onSearch}></cg-search-input>\n *   <cg-filter-chip filter-key=\"status\" label=\"Status\" value=\"Active\"></cg-filter-chip>\n *   <cg-filter-chip filter-key=\"role\" label=\"Role\" value=\"Doctor\"></cg-filter-chip>\n *   <cg-button slot=\"trigger\" variant=\"tertiary\" @click=${onAddFilter}>+ Add filter</cg-button>\n * </cg-filter-bar>\n * ```\n *\n * @slot search - The search input (shown left)\n * @slot - Default slot for cg-filter-chip elements (between search and trigger)\n * @slot trigger - \"Add filter\" button or trigger\n *\n * @fires {CustomEvent} cg-filter-clear-all - \"Clear all\" button clicked. Consumer should remove all filters.\n *\n * @cssprop --cg-component-filter-bar-gap - Gap between bar regions (default 8px)\n */\n@customElement('cg-filter-bar')\nexport class CgFilterBar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .bar {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--cg-component-filter-bar-gap, var(--cg-spacing-8));\n      padding: var(--cg-spacing-8) 0;\n    }\n\n    .search ::slotted(*) {\n      min-width: var(--cg-spacing-200, 200px);\n    }\n    :host([no-search-grow]) .search ::slotted(*) {\n      min-width: 0;\n    }\n\n    .chips {\n      display: inline-flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    .actions {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      margin-left: auto;\n    }\n\n    .clear-all {\n      background: transparent;\n      border: 0;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition:\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    .clear-all:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .clear-all:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring);\n    }\n  `];\n\n  /** When the chip slot is empty, hide the \"Clear all\" button. */\n  @property({ type: Boolean, attribute: 'hide-empty-clear', reflect: true }) hideEmptyClear = true;\n\n  /** Override the \"Clear all\" label. */\n  @property({ attribute: 'clear-label' }) clearLabel = 'Clear all';\n\n  /** Don't reserve a min-width for the search slot (useful inside narrow containers). */\n  @property({ type: Boolean, attribute: 'no-search-grow', reflect: true }) noSearchGrow = false;\n\n  @state() private _hasChips = false;\n\n  private _onChipSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements({ flatten: true });\n    this._hasChips = assigned.length > 0;\n  };\n\n  private _onClearAll = (e: Event): void => {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('cg-filter-clear-all', {\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render() {\n    const showClear = this._hasChips || !this.hideEmptyClear;\n    return html`\n      <div class=\"bar\" role=\"toolbar\" aria-label=\"Filters\">\n        <div class=\"search\">\n          <slot name=\"search\"></slot>\n        </div>\n        <div class=\"chips\">\n          <slot @slotchange=${this._onChipSlotChange}></slot>\n        </div>\n        <div class=\"actions\">\n          <slot name=\"trigger\"></slot>\n          ${showClear ? html`\n            <button type=\"button\" class=\"clear-all\" @click=${this._onClearAll}>${this.clearLabel}</button>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-filter-bar': CgFilterBar;\n  }\n}\n"],"names":["CgFilterBar","LitElement","e","assigned","showClear","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAmCO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA2DsE,KAAA,iBAAiB,IAGpD,KAAA,aAAa,aAGoB,KAAA,eAAe,IAE/E,KAAQ,YAAY,IAE7B,KAAQ,oBAAoB,CAACC,MAAmB;AAE9C,YAAMC,IADOD,EAAE,OACO,iBAAiB,EAAE,SAAS,IAAM;AACxD,WAAK,YAAYC,EAAS,SAAS;AAAA,IACrC,GAEA,KAAQ,cAAc,CAACD,MAAmB;AACxC,MAAAA,EAAE,gBAAA,GACF,KAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,QACxD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA,IACJ;AAAA,EAAA;AAAA,EAES,SAAS;AAChB,UAAME,IAAY,KAAK,aAAa,CAAC,KAAK;AAC1C,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMmB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,YAIxCD,IAAYC;AAAA,6DACqC,KAAK,WAAW,IAAI,KAAK,UAAU;AAAA,cAClFC,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AAtGaN,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,GAuDnD;AAG0EC,EAAA;AAAA,EAA1EC,EAAS,EAAE,MAAM,SAAS,WAAW,oBAAoB,SAAS,IAAM;AAAA,GA3D9DX,EA2DgE,WAAA,kBAAA,CAAA;AAGnCU,EAAA;AAAA,EAAvCC,EAAS,EAAE,WAAW,cAAA,CAAe;AAAA,GA9D3BX,EA8D6B,WAAA,cAAA,CAAA;AAGiCU,EAAA;AAAA,EAAxEC,EAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,SAAS,IAAM;AAAA,GAjE5DX,EAiE8D,WAAA,gBAAA,CAAA;AAExDU,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnEIZ,EAmEM,WAAA,aAAA,CAAA;AAnENA,IAANU,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBb,CAAA;"}

package/dist/components/cg-filter-chip/cg-filter-chip.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-filter-chip
+ * Removable key/value pill for filter bars — renders as
+ * "{label}: {value}" with a click-to-edit body and an explicit close
+ * button. Use one chip per applied filter.
+ *
+ * Distinct from `cg-chip`: filter-chip is always two-part (label +
+ * value), always removable, and the body click fires an
+ * `cg-filter-edit` event so consumers can pop a value editor; clicking
+ * the close button fires a separate `cg-filter-remove` event.
+ *
+ * @example
+ * ```html
+ * <cg-filter-chip
+ *   filter-key="status"
+ *   label="Status"
+ *   value="Active"
+ *   @cg-filter-edit=${onEdit}
+ *   @cg-filter-remove=${onRemove}
+ * ></cg-filter-chip>
+ * ```
+ *
+ * @example With count badge
+ * ```html
+ * <cg-filter-chip label="Tags" value="UI, Design" count="2"></cg-filter-chip>
+ * ```
+ *
+ * @fires {CustomEvent<{filterKey: string, value: string}>} cg-filter-edit - Body clicked
+ * @fires {CustomEvent<{filterKey: string}>} cg-filter-remove - Close button clicked
+ */
+export declare class CgFilterChip extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Stable identifier for the filter dimension (e.g., "status"). Emitted in events. */
+    filterKey: string;
+    /** Display label for the filter dimension (e.g., "Status"). */
+    label: string;
+    /** Currently applied value display (e.g., "Active"). */
+    value: string;
+    /** Optional small badge — useful when the filter has multiple values. */
+    count: number;
+    /** Visually mark the chip as applied (slightly stronger background/border). */
+    applied: boolean;
+    size: 'sm' | 'md';
+    disabled: boolean;
+    private _onBodyClick;
+    private _onRemoveClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-filter-chip': CgFilterChip;
+    }
+}
+//# sourceMappingURL=cg-filter-chip.d.ts.map

package/dist/components/cg-filter-chip/cg-filter-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-filter-chip.d.ts","sourceRoot":"","sources":["../../../src/components/cg-filter-chip/cg-filter-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAkInB;IAEH,sFAAsF;IAC/C,SAAS,SAAM;IAEtD,+DAA+D;IACnD,KAAK,SAAM;IAEvB,wDAAwD;IAC5C,KAAK,SAAM;IAEvB,yEAAyE;IAC7C,KAAK,SAAK;IAEtC,+EAA+E;IACnC,OAAO,UAAQ;IAE9B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEV,QAAQ,UAAS;IAE7D,OAAO,CAAC,YAAY,CAQlB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/cg-filter-chip/cg-filter-chip.js

@@ -0,0 +1,213 @@
+import { css as p, LitElement as u, nothing as g, html as d } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
+import { a as v, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (r, i, c, s) => {
+  for (var a = s > 1 ? void 0 : s ? m(i, c) : i, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (a = (s ? l(i, c, a) : l(a)) || a);
+  return s && a && f(i, c, a), a;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.filterKey = "", this.label = "", this.value = "", this.count = 0, this.applied = !0, this.size = "md", this.disabled = !1, this._onBodyClick = (r) => {
+      r.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("cg-filter-edit", {
+        detail: { filterKey: this.filterKey, value: this.value },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onRemoveClick = (r) => {
+      r.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("cg-filter-remove", {
+        detail: { filterKey: this.filterKey },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  render() {
+    const r = `chip ${this.applied ? "applied" : ""}`;
+    return d`
+      <span class=${r}>
+        <button
+          type="button"
+          class="body"
+          ?disabled=${this.disabled}
+          @click=${this._onBodyClick}
+          aria-label=${`Edit ${this.label} filter`}
+        >
+          ${this.label ? d`<span class="label">${this.label}</span>` : g}
+          <span class="value">${this.value}</span>
+          ${this.count > 0 ? d`<span class="count">${this.count}</span>` : g}
+        </button>
+        <button
+          type="button"
+          class="remove"
+          ?disabled=${this.disabled}
+          @click=${this._onRemoveClick}
+          aria-label=${`Remove ${this.label} filter`}
+        >
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 4l8 8M12 4l-8 8"/>
+          </svg>
+        </button>
+      </span>
+    `;
+  }
+};
+e.styles = [v, b, p`
+    :host { display: inline-flex; }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+      white-space: nowrap;
+      user-select: none;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      padding: 0;
+      height: var(--cg-spacing-32);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    :host([size="sm"]) .chip {
+      height: var(--cg-spacing-24);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    /* Applied — accent-tinted bg signals "this filter is in effect"
+       (semantically distinct from hover's neutral gray). Both
+       --cg-color-surface-cards-hover-background and
+       --cg-color-action-tertiary-background-hover resolve to the same
+       gray tone, so we'd previously had .applied + hover collide.
+       overlay-accent-light is rgba accent (8/12% in light/dark), and
+       hover on applied chips deepens it to overlay-accent-medium —
+       ensures every state transition has visible feedback. */
+    .chip.applied {
+      background: var(--cg-overlay-accent-light);
+      border-color: var(--cg-color-surface-cards-border-strong);
+    }
+
+    .body {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: 0 var(--cg-spacing-12);
+      height: 100%;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      color: inherit;
+      font: inherit;
+    }
+    :host([size="sm"]) .body { padding: 0 var(--cg-spacing-8); }
+
+    .body:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    /* Hover on an already-applied chip deepens the accent rather than
+       collapsing back to neutral gray, keeping the "in effect" cue. */
+    .chip.applied .body:hover { background: var(--cg-overlay-accent-medium); }
+    .body:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .body:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    .label {
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .label::after {
+      content: ":";
+      margin-right: var(--cg-spacing-4);
+    }
+    .value {
+      color: var(--cg-color-surface-base-text);
+    }
+    .count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      padding: 0 var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      /* Neutral counter pill — surface-cards-emphasis is the project's
+         "subtle fill on a card" token. Skipped the badge-* tokens
+         because their default resolves to info-blue, which would tint
+         the count badge for a non-info filter. */
+      background: var(--cg-color-surface-cards-emphasis);
+      color: var(--cg-color-surface-cards-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+    }
+
+    .remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: 100%;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-input-text-placeholder);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0;
+    }
+    :host([size="sm"]) .remove { width: var(--cg-spacing-24); }
+
+    .remove:hover {
+      color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+    }
+    .remove:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .remove:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+    .remove svg {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    :host([disabled]) .chip {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `];
+t([
+  o({ attribute: "filter-key" })
+], e.prototype, "filterKey", 2);
+t([
+  o()
+], e.prototype, "label", 2);
+t([
+  o()
+], e.prototype, "value", 2);
+t([
+  o({ type: Number })
+], e.prototype, "count", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "applied", 2);
+t([
+  o({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = t([
+  h("cg-filter-chip")
+], e);
+export {
+  e as CgFilterChip
+};
+//# sourceMappingURL=cg-filter-chip.js.map

package/dist/components/cg-filter-chip/cg-filter-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-filter-chip.js","sources":["../../../src/components/cg-filter-chip/cg-filter-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-filter-chip\n * Removable key/value pill for filter bars — renders as\n * \"{label}: {value}\" with a click-to-edit body and an explicit close\n * button. Use one chip per applied filter.\n *\n * Distinct from `cg-chip`: filter-chip is always two-part (label +\n * value), always removable, and the body click fires an\n * `cg-filter-edit` event so consumers can pop a value editor; clicking\n * the close button fires a separate `cg-filter-remove` event.\n *\n * @example\n * ```html\n * <cg-filter-chip\n *   filter-key=\"status\"\n *   label=\"Status\"\n *   value=\"Active\"\n *   @cg-filter-edit=${onEdit}\n *   @cg-filter-remove=${onRemove}\n * ></cg-filter-chip>\n * ```\n *\n * @example With count badge\n * ```html\n * <cg-filter-chip label=\"Tags\" value=\"UI, Design\" count=\"2\"></cg-filter-chip>\n * ```\n *\n * @fires {CustomEvent<{filterKey: string, value: string}>} cg-filter-edit - Body clicked\n * @fires {CustomEvent<{filterKey: string}>} cg-filter-remove - Close button clicked\n */\n@customElement('cg-filter-chip')\nexport class CgFilterChip extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host { display: inline-flex; }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 0;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\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        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      padding: 0;\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    :host([size=\"sm\"]) .chip {\n      height: var(--cg-spacing-24);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* Applied — accent-tinted bg signals \"this filter is in effect\"\n       (semantically distinct from hover's neutral gray). Both\n       --cg-color-surface-cards-hover-background and\n       --cg-color-action-tertiary-background-hover resolve to the same\n       gray tone, so we'd previously had .applied + hover collide.\n       overlay-accent-light is rgba accent (8/12% in light/dark), and\n       hover on applied chips deepens it to overlay-accent-medium —\n       ensures every state transition has visible feedback. */\n    .chip.applied {\n      background: var(--cg-overlay-accent-light);\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    .body {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: 0 var(--cg-spacing-12);\n      height: 100%;\n      cursor: pointer;\n      background: transparent;\n      border: 0;\n      color: inherit;\n      font: inherit;\n    }\n    :host([size=\"sm\"]) .body { padding: 0 var(--cg-spacing-8); }\n\n    .body:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    /* Hover on an already-applied chip deepens the accent rather than\n       collapsing back to neutral gray, keeping the \"in effect\" cue. */\n    .chip.applied .body:hover { background: var(--cg-overlay-accent-medium); }\n    .body:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .body:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    .label {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .label::after {\n      content: \":\";\n      margin-right: var(--cg-spacing-4);\n    }\n    .value {\n      color: var(--cg-color-surface-base-text);\n    }\n    .count {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      padding: 0 var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      /* Neutral counter pill — surface-cards-emphasis is the project's\n         \"subtle fill on a card\" token. Skipped the badge-* tokens\n         because their default resolves to info-blue, which would tint\n         the count badge for a non-info filter. */\n      background: var(--cg-color-surface-cards-emphasis);\n      color: var(--cg-color-surface-cards-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n    }\n\n    .remove {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: 100%;\n      cursor: pointer;\n      background: transparent;\n      border: 0;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0;\n    }\n    :host([size=\"sm\"]) .remove { width: var(--cg-spacing-24); }\n\n    .remove:hover {\n      color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n    }\n    .remove:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .remove:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .remove svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    :host([disabled]) .chip {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n  `];\n\n  /** Stable identifier for the filter dimension (e.g., \"status\"). Emitted in events. */\n  @property({ attribute: 'filter-key' }) filterKey = '';\n\n  /** Display label for the filter dimension (e.g., \"Status\"). */\n  @property() label = '';\n\n  /** Currently applied value display (e.g., \"Active\"). */\n  @property() value = '';\n\n  /** Optional small badge — useful when the filter has multiple values. */\n  @property({ type: Number }) count = 0;\n\n  /** Visually mark the chip as applied (slightly stronger background/border). */\n  @property({ type: Boolean, reflect: true }) applied = true;\n\n  @property({ reflect: true }) size: 'sm' | 'md' = 'md';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private _onBodyClick = (e: Event): void => {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-filter-edit', {\n      detail: { filterKey: this.filterKey, value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onRemoveClick = (e: Event): void => {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-filter-remove', {\n      detail: { filterKey: this.filterKey },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render() {\n    const cls = `chip ${this.applied ? 'applied' : ''}`;\n    return html`\n      <span class=${cls}>\n        <button\n          type=\"button\"\n          class=\"body\"\n          ?disabled=${this.disabled}\n          @click=${this._onBodyClick}\n          aria-label=${`Edit ${this.label} filter`}\n        >\n          ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n          <span class=\"value\">${this.value}</span>\n          ${this.count > 0 ? html`<span class=\"count\">${this.count}</span>` : nothing}\n        </button>\n        <button\n          type=\"button\"\n          class=\"remove\"\n          ?disabled=${this.disabled}\n          @click=${this._onRemoveClick}\n          aria-label=${`Remove ${this.label} filter`}\n        >\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M4 4l8 8M12 4l-8 8\"/>\n          </svg>\n        </button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-filter-chip': CgFilterChip;\n  }\n}\n"],"names":["CgFilterChip","LitElement","e","cls","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-focus-scope/cg-focus-scope.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-focus-scope
+ * Headless behavior primitive that traps Tab-focus within itself when
+ * `active`. Renders no chrome (`display: contents`) — children render as
+ * if the wrapper weren't there.
+ *
+ * Escape is intentionally NOT handled here: parent containers (dialogs,
+ * sheets, drawers) own dismiss semantics. Wire your own keydown listener
+ * if you need Escape to deactivate.
+ *
+ * @example
+ * ```html
+ * <cg-focus-scope ?active=${this.dialogOpen}>
+ *   <button>First</button>
+ *   <input />
+ *   <button>Last</button>
+ * </cg-focus-scope>
+ * ```
+ *
+ * @slot - Children inside the focus trap.
+ */
+export declare class CgFocusScope extends LitElement {
+    static styles: import('lit').CSSResult;
+    active: boolean;
+    returnFocus: boolean;
+    private _trap;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-focus-scope': CgFocusScope;
+    }
+}
+//# sourceMappingURL=cg-focus-scope.d.ts.map

package/dist/components/cg-focus-scope/cg-focus-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-focus-scope.d.ts","sourceRoot":"","sources":["../../../src/components/cg-focus-scope/cg-focus-scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAEpB;IAE0C,MAAM,UAAS;IACH,WAAW,UAAQ;IAE3E,OAAO,CAAC,KAAK,CAAmB;IAEvB,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAa5C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}