@wrrdev/fenix-ui 1.1.3 → 1.1.5

package/dist/components/datepicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../../src/components/datepicker/datepicker.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-datepicker> — Campo de data com calendário suspenso.\n *\n * Um input com ícone de calendário no final; ao clicar, abre o\n * <fx-calendar> em um popover. As datas selecionadas aparecem no input.\n *\n * Atributos:\n * - mode=\"single\" | \"range\" | \"multiple\"  (padrão: single)\n * - value=\"YYYY-MM-DD\"                    → single\n * - start/end                             → range\n * - values=\"a,b,c\"                        → múltiplas datas (CSV)\n * - min/max, placeholder, disabled, clearable, size (sm|md|lg)\n * - format=\"dd/mm/yyyy\"  → máscara de exibição (tokens: dd mm yyyy, HH MM SS)\n * - show-time            → inclui seleção de hora:minuto:segundo no popover;\n *                          o valor passa a ser \"YYYY-MM-DDTHH:mm:ss\"\n *\n * Evento: `change` (composed):\n * - single:   { value }\n * - range:    { value, start, end }\n * - multiple: { values: string[] }\n */\nexport class FxDatepicker extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      position: relative;\n    }\n    .field {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      width: 100%;\n      box-sizing: border-box;\n      /* Base = tamanho padrão (md): 40px */\n      min-height: var(--fx-size-md, 40px);\n      min-width: 150px;\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([size='sm']) .field { min-height: 32px; min-width: 180px; }\n    :host([size='md']) .field { min-height: 40px; }\n    :host([size='lg']) .field { min-height: 48px; min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }\n    /* Range e multiple exibem mais de uma data: campo mais largo */\n    :host([mode='range']) .field { min-width: 250px; }\n    :host([mode='multiple']) .field { min-width: 220px; }\n    :host([mode='range'][size='lg']) .field { min-width: 360px; }\n    :host([mode='multiple'][size='lg']) .field { min-width: 320px; }\n    :host([show-time]) .field { min-width: 250px; }\n    /* Validação */\n    :host([error]) .field,\n    :host([invalid]) .field {\n      border-color: var(--fx-color-danger, #dc2626);\n    }\n    :host([error]) .field:focus-within,\n    :host([invalid]) .field:focus-within,\n    :host([error][open]) .field,\n    :host([invalid][open]) .field {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\n    }\n    :host([success]) .field,\n    :host([valid]) .field {\n      border-color: var(--fx-color-success, #16a34a);\n    }\n    :host([success]) .field:focus-within,\n    :host([valid]) .field:focus-within,\n    :host([success][open]) .field,\n    :host([valid][open]) .field {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\n    }\n    .field:hover { border-color: var(--fx-border-hover); }\n    .field:focus-within {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .display {\n      flex: 1;\n      border: none;\n      background: none;\n      font: inherit;\n      color: var(--fx-text-default);\n      outline: none;\n      cursor: pointer;\n      text-align: left;\n      padding: 0;\n      min-width: 0;\n    }\n    .display::placeholder { color: var(--fx-text-muted); }\n    .cal-icon { color: var(--fx-text-muted); display: inline-flex; pointer-events: none; }\n    .clear {\n      border: none;\n      background: none;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 4px);\n      line-height: 1;\n      padding: 0 2px;\n      border-radius: var(--fx-radius-full);\n    }\n    .clear:hover { color: var(--fx-color-danger); }\n    .clear[hidden] { display: none; }\n    .pop {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: var(--fx-z-dropdown, 1000);\n      display: none;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      overflow: hidden;\n    }\n    :host([up]) .pop {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n    :host([open]) .pop { display: block; }\n    .time-row {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      border-top: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      border-radius: 0 0 var(--fx-radius-md) var(--fx-radius-md);\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n    }\n    .time-row label { color: var(--fx-text-muted); }\n    .time-row input {\n      width: 38px;\n      font: inherit;\n      color: var(--fx-text-default);\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      padding: 2px 2px;\n      outline: none;\n      text-align: center;\n      -moz-appearance: textfield;\n      appearance: textfield;\n    }\n    .time-row input::-webkit-outer-spin-button,\n    .time-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n    .time-row .sep { color: var(--fx-text-muted); font-weight: bold; padding: 0 1px; }\n    .time-row input:focus {\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    :host([disabled]) .field { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n    :host([disabled]) .display { cursor: not-allowed; }\n    :host([free-text]) .display { cursor: text; }\n    :host([free-text]) .display.invalid { border-bottom: 2px solid var(--fx-color-danger); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['value', 'start', 'end', 'values', 'mode', 'min', 'max', 'placeholder', 'disabled', 'format', 'show-time', 'free-text'];\n  }\n\n  private docListener?: (e: Event) => void;\n  /** Hora/minuto/segundo do modo show-time. */\n  private time = { h: 0, m: 0, s: 0 };\n\n  get mode(): string {\n    const m = this.getAttr('mode', 'single');\n    return ['single', 'range', 'multiple'].includes(m) ? m : 'single';\n  }\n  set mode(value: string) {\n    this.setAttribute('mode', value);\n  }\n\n  get value(): string {\n    return this.getAttr('value');\n  }\n  set value(v: string) {\n    this.setAttribute('value', v);\n  }\n\n  /** Datas do modo múltiplo (CSV no atributo). */\n  get values(): string[] {\n    const csv = this.getAttr('values');\n    return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n  }\n  set values(list: string[]) {\n    this.setAttribute('values', list.join(','));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    // Fecha o popover ao clicar fora.\n    this.docListener = (e: Event) => {\n      if (!this.hasAttr('open')) return;\n      if (e.composedPath().includes(this)) return;\n      this.removeAttribute('open');\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n  }\n\n  /** Formata uma data ISO (\"YYYY-MM-DD\" ou com \"THH:mm:ss\") segundo o atributo format. */\n  private formatDate(iso: string): string {\n    if (!iso) return '';\n    const fmt = this.getAttr('format');\n    // Sem máscara: exibe apenas a parte da data (a hora entra via timeText\n    // quando show-time está ativo — nunca duplicada).\n    if (!fmt) return iso.split('T')[0]!;\n    const [datePart, timePart] = iso.split('T');\n    const [y = '', m = '', d = ''] = datePart.split('-');\n    const [H = '00', M = '00', S = '00'] = (timePart ?? '').split(':');\n    // Placeholders para evitar colisão entre mm (mês) e MM (minuto).\n    return fmt\n      .replace(/yyyy/gi, '\\u0001')\n      .replace(/MM/g, '\\u0005')\n      .replace(/mm/g, '\\u0002')\n      .replace(/dd/gi, '\\u0003')\n      .replace(/HH/g, '\\u0004')\n      .replace(/SS/gi, '\\u0006')\n      .replace(/\\u0001/g, y)\n      .replace(/\\u0002/g, m)\n      .replace(/\\u0003/g, d)\n      .replace(/\\u0004/g, H)\n      .replace(/\\u0005/g, M)\n      .replace(/\\u0006/g, S);\n  }\n\n  /** Texto exibido no input conforme o modo. */\n  private displayText(): string {\n    if (this.mode === 'range') {\n      const s = this.getAttr('start');\n      const e = this.getAttr('end');\n      const arrow = this.hasAttr('show-time') ? ' ' : ' → ';\n      if (!s && !e) return '';\n      if (this.hasAttr('show-time')) {\n        const f = (iso?: string): string => (iso ? `${this.formatDate(iso)} ${this.timeText()}` : iso ? `${this.formatDate(iso)} …` : '');\n        return s && e ? `${f(s)} → ${f(e)}` : f(s);\n      }\n      void arrow;\n      return s && e ? `${this.formatDate(s)} → ${this.formatDate(e)}` : s ? `${this.formatDate(s)} → …` : '';\n    }\n    if (this.mode === 'multiple') {\n      return this.values.map((v) => this.formatDate(v)).join(', ');\n    }\n    const base = this.formatDate(this.value);\n    return base && this.hasAttr('show-time') ? `${base} ${this.timeText()}` : base;\n  }\n\n  /** \"HH:MM:SS\" do estado interno de show-time. */\n  private timeText(): string {\n    const p = (n: number): string => String(n).padStart(2, '0');\n    return `${p(this.time.h)}:${p(this.time.m)}:${p(this.time.s)}`;\n  }\n\n  /** Extrai hora de um valor ISO inicial, se houver. */\n  private loadTimeFromValue(): void {\n    const src = this.value || this.getAttr('start') || '';\n    const t = src.split('T')[1];\n    if (!t) return;\n    const [h, m, s] = t.split(':').map((n) => parseInt(n, 10));\n    this.time = { h: h || 0, m: m || 0, s: s || 0 };\n  }\n\n  /** Anexa o horário interno ao ISO puro vindo do calendário. */\n  private withTime(iso: string): string {\n    if (!iso) return iso;\n    return this.hasAttr('show-time')\n      ? `${iso}T${this.timeText()}`\n      : iso;\n  }\n\n  protected override render(): void {\n    const disabled = this.disabled;\n    const clearable = this.hasAttr('clearable');\n    const text = this.displayText();\n    const hasValue = text.length > 0;\n    const showTime = this.hasAttr('show-time');\n    this.loadTimeFromValue();\n\n    // Atributos repassados ao calendário interno, conforme o modo.\n    let calAttrs = `min=\"${esc(this.getAttr('min'))}\" max=\"${esc(this.getAttr('max'))}\"`;\n    if (this.mode === 'range') {\n      calAttrs += ` range start=\"${esc(this.getAttr('start'))}\" end=\"${esc(this.getAttr('end'))}\"`;\n    } else if (this.mode === 'multiple') {\n      // Repassa apenas as partes de data (sem hora) para o calendário pintar.\n      const dates = this.values.map((v) => v.split('T')[0]).join(',');\n      calAttrs += ` mode=\"multiple\" values=\"${esc(dates)}\"`;\n    } else {\n      const v = this.value.split('T')[0] ?? '';\n      calAttrs += ` value=\"${esc(v)}\"`;\n    }\n\n    this.setTemplate(`\n      <div class=\"field\" part=\"field\">\n        <input class=\"display\" part=\"display\" type=\"text\" ${this.hasAttr('free-text') && !disabled ? '' : 'readonly'}\n          placeholder=\"${esc(this.getAttr('placeholder', 'dd/mm/aaaa'))}\"\n          value=\"${esc(text)}\" ${disabled ? 'disabled' : ''}>\n        <button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\"\n          ${clearable && hasValue ? '' : 'hidden'}>\n          ×\n        </button>\n        <span class=\"cal-icon\" part=\"icon\" aria-hidden=\"true\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/>\n            <path d=\"M16 2v4M8 2v4M3 10h18\"/>\n          </svg>\n        </span>\n      </div>\n      <div class=\"pop\" part=\"popover\">\n        <fx-calendar ${calAttrs}></fx-calendar>\n        ${\n          showTime\n            ? `<div class=\"time-row\" part=\"time\">\n                <input class=\"t-h\" type=\"number\" min=\"0\" max=\"23\" value=\"${this.time.h}\" aria-label=\"Hora\"><span class=\"sep\">:</span>\n                <input class=\"t-m\" type=\"number\" min=\"0\" max=\"59\" value=\"${this.time.m}\" aria-label=\"Minuto\"><span class=\"sep\">:</span>\n                <input class=\"t-s\" type=\"number\" min=\"0\" max=\"59\" value=\"${this.time.s}\" aria-label=\"Segundo\">\n              </div>`\n            : ''\n        }\n      </div>\n    `);\n\n    const field = this.root.querySelector('.field');\n    if (!field) return;\n    if (disabled) return;\n\n    field.addEventListener('click', (e) => {\n      if ((e.target as HTMLElement).closest('.clear')) return;\n      // Com free-text, clicar no próprio input serve para digitar — não abre.\n      if (this.hasAttr('free-text') && (e.target as HTMLElement).classList.contains('display')) return;\n      this.toggleAttribute('open');\n      // Flip vertical: se não cabe abaixo, abre para cima.\n      if (this.hasAttr('open')) {\n        const r = this.getBoundingClientRect();\n        this.toggleAttribute('up', r.bottom + 340 > window.innerHeight && r.top > 340);\n      } else {\n        this.removeAttribute('up');\n      }\n    });\n\n    // Limpar: zera tudo conforme o modo.\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.removeAttribute('value');\n      this.removeAttribute('start');\n      this.removeAttribute('end');\n      this.removeAttribute('values');\n      this.removeAttribute('open');\n      this.render();\n      this.emitChange({});\n    });\n\n    // Sincroniza seleção do calendário de volta para os atributos.\n    const cal = this.root.querySelector<HTMLElement>('.pop fx-calendar');\n    cal?.addEventListener('change', (e) => {\n      const d = (e as CustomEvent).detail ?? {};\n      if (d.start !== undefined || d.end !== undefined) {\n        if (d.start) this.setAttribute('start', this.withTime(d.start));\n        else this.removeAttribute('start');\n        if (d.end) this.setAttribute('end', this.withTime(d.end));\n        else this.removeAttribute('end');\n      }\n      if (d.values !== undefined) {\n        this.values = d.values.map((v: string) => this.withTime(v));\n      }\n      if (d.value !== undefined) {\n        if (d.value) this.setAttribute('value', this.withTime(d.value));\n        else this.removeAttribute('value');\n        // No modo single, fecha ao escolher.\n        if (this.mode === 'single') this.removeAttribute('open');\n      }\n      this.render();\n      this.emitChange(d);\n    });\n\n    // free-text: valida ao sair do campo ou pressionar Enter.\n    const display = this.root.querySelector<HTMLInputElement>('.display');\n    if (display && this.hasAttr('free-text') && !disabled) {\n      display.addEventListener('keydown', (e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          this.commitTyped(display);\n        }\n      });\n      display.addEventListener('blur', () => this.commitTyped(display));\n    }\n\n    // show-time: captura alterações de hora/minuto/segundo.\n    if (showTime) {\n      const applyTime = (): void => {\n        const h = this.root.querySelector<HTMLInputElement>('.t-h');\n        const m = this.root.querySelector<HTMLInputElement>('.t-m');\n        const s = this.root.querySelector<HTMLInputElement>('.t-s');\n        const clamp = (v: string | undefined, max: number): number =>\n          Math.min(max, Math.max(0, parseInt(v ?? '0', 10) || 0));\n        this.time = {\n          h: clamp(h?.value, 23),\n          m: clamp(m?.value, 59),\n          s: clamp(s?.value, 59),\n        };\n        // Reanexa o horário aos valores já selecionados.\n        const reattach = (iso: string): string => iso.split('T')[0] ? `${iso.split('T')[0]}T${this.timeText()}` : iso;\n        if (this.value) this.setAttribute('value', reattach(this.value));\n        if (this.getAttr('start')) this.setAttribute('start', reattach(this.getAttr('start')));\n        if (this.getAttr('end')) this.setAttribute('end', reattach(this.getAttr('end')));\n        if (this.values.length) {\n          this.values = this.values.map((v) => reattach(v));\n        }\n        // Atualiza apenas o texto do input, sem re-render completo.\n        const display = this.root.querySelector<HTMLInputElement>('.display');\n        if (display) display.value = this.displayText();\n        this.emitChange({ value: this.value });\n      };\n      ['.t-h', '.t-m', '.t-s'].forEach((sel) => {\n        this.root.querySelector(sel)?.addEventListener('input', applyTime);\n      });\n    }\n  }\n\n  private emitChange(detail: Record<string, unknown>): void {\n    this.dispatchEvent(\n      new CustomEvent('change', { bubbles: true, composed: true, detail }),\n    );\n  }\n\n  /**\n   * Interpreta o texto digitado livremente e devolve ISO \"YYYY-MM-DD\"\n   * (ou null se inválido). Aceita a máscara do atributo `format`\n   * (tokens dd/mm/yyyy) ou ISO direto.\n   */\n  private parseTyped(raw: string): string | null {\n    const text = raw.trim();\n    if (!text) return null;\n    const fmt = this.getAttr('format', 'dd/mm/yyyy').toLowerCase();\n\n    // Ordem dos tokens conforme a máscara informada.\n    const order = ['dd', 'mm', 'yyyy'].filter((t) => fmt.includes(t));\n    if (order.length < 3) return null;\n\n    const parts = text.split(new RegExp(`[^0-9]+`)).filter(Boolean);\n    if (parts.length !== 3) return null;\n\n    const map: Record<string, string> = {};\n    order.forEach((t, i) => (map[t] = parts[i]!));\n    const iso = `${map['yyyy']}-${(map['mm'] ?? '').padStart(2, '0')}-${(map['dd'] ?? '').padStart(2, '0')}`;\n\n    // Validação de data real.\n    const d = new Date(`${iso}T12:00:00`);\n    if (Number.isNaN(d.getTime())) return null;\n    const [y, m, day] = iso.split('-').map((n) => parseInt(n, 10));\n    if (d.getFullYear() !== y || d.getMonth() + 1 !== m || d.getDate() !== day) return null;\n\n    // Limites min/max (apenas a parte da data).\n    const cmp = (a: string, b: string): number => a.split('T')[0]!.localeCompare(b.split('T')[0]!);\n    const min = this.getAttr('min');\n    const max = this.getAttr('max');\n    if (min && cmp(iso, min) < 0) return null;\n    if (max && cmp(iso, max) > 0) return null;\n\n    return iso;\n  }\n\n  /** Aplica o texto digitado no modo free-text (blur/Enter). */\n  private commitTyped(input: HTMLInputElement): void {\n    const parsed = this.parseTyped(input.value);\n    if (!parsed) {\n      // Inválido: sinaliza, reverte o texto e emite evento.\n      input.classList.add('invalid');\n      this.dispatchEvent(\n        new CustomEvent('invalid', { bubbles: true, composed: true, detail: { text: input.value } }),\n      );\n      input.value = this.displayText();\n      setTimeout(() => input.classList.remove('invalid'), 1500);\n      return;\n    }\n    if (this.mode === 'single') {\n      this.setAttribute('value', this.withTime(parsed));\n      this.emitChange({ value: this.value });\n    } else if (this.mode === 'range') {\n      // Primeira digitação vira start; com start preenchido, vira end.\n      if (!this.getAttr('start') || (this.getAttr('start') && this.getAttr('end'))) {\n        this.setAttribute('start', this.withTime(parsed));\n        this.removeAttribute('end');\n      } else {\n        const [a, b] = [this.getAttr('start')!.split('T')[0]!, parsed].sort();\n        this.setAttribute('start', this.withTime(a));\n        this.setAttribute('end', this.withTime(b));\n      }\n      this.emitChange({ start: this.getAttr('start'), end: this.getAttr('end') });\n    } else {\n      const list = this.values.filter((v) => v.split('T')[0] !== parsed);\n      list.push(this.withTime(parsed));\n      this.values = list;\n      this.emitChange({ values: this.values });\n    }\n    this.render();\n  }\n}\n\nexport function defineFxDatepicker(): typeof FxDatepicker {\n  return defineElement('fx-datepicker', FxDatepicker);\n}\n\n"],"names":["display"],"mappings":";;;;AA0BO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAwJL,SAAQ,OAAO,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,EAAA;AAAA,EAAE;AAAA,EANlC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,SAAS,SAAS,OAAO,UAAU,QAAQ,OAAO,OAAO,eAAe,YAAY,UAAU,aAAa,WAAW;AAAA,EAChI;AAAA,EAMA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,QAAQ;AACvC,WAAO,CAAC,UAAU,SAAS,UAAU,EAAE,SAAS,CAAC,IAAI,IAAI;AAAA,EAC3D;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,IAAI,QAAgB;AAClB,WAAO,KAAK,QAAQ,OAAO;AAAA,EAC7B;AAAA,EACA,IAAI,MAAM,GAAW;AACnB,SAAK,aAAa,SAAS,CAAC;AAAA,EAC9B;AAAA;AAAA,EAGA,IAAI,SAAmB;AACrB,UAAM,MAAM,KAAK,QAAQ,QAAQ;AACjC,WAAO,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,OAAO,IAAI,CAAA;AAAA,EACrE;AAAA,EACA,IAAI,OAAO,MAAgB;AACzB,SAAK,aAAa,UAAU,KAAK,KAAK,GAAG,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEmB,oBAA0B;AAC3C,UAAM,kBAAA;AAEN,SAAK,cAAc,CAAC,MAAa;AAC/B,UAAI,CAAC,KAAK,QAAQ,MAAM,EAAG;AAC3B,UAAI,EAAE,aAAA,EAAe,SAAS,IAAI,EAAG;AACrC,WAAK,gBAAgB,MAAM;AAAA,IAC7B;AACA,aAAS,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACrD;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,QAAI,KAAK,YAAa,UAAS,oBAAoB,SAAS,KAAK,WAAW;AAAA,EAC9E;AAAA;AAAA,EAGQ,WAAW,KAAqB;AACtC,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,MAAM,KAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,IAAK,QAAO,IAAI,MAAM,GAAG,EAAE,CAAC;AACjC,UAAM,CAAC,UAAU,QAAQ,IAAI,IAAI,MAAM,GAAG;AAC1C,UAAM,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE,IAAI,SAAS,MAAM,GAAG;AACnD,UAAM,CAAC,IAAI,MAAM,IAAI,MAAM,IAAI,IAAI,KAAK,YAAY,IAAI,MAAM,GAAG;AAEjE,WAAO,IACJ,QAAQ,UAAU,GAAQ,EAC1B,QAAQ,OAAO,GAAQ,EACvB,QAAQ,OAAO,GAAQ,EACvB,QAAQ,QAAQ,GAAQ,EACxB,QAAQ,OAAO,GAAQ,EACvB,QAAQ,QAAQ,GAAQ,EACxB,QAAQ,WAAW,CAAC,EACpB,QAAQ,WAAW,CAAC,EACpB,QAAQ,WAAW,CAAC,EACpB,QAAQ,WAAW,CAAC,EACpB,QAAQ,WAAW,CAAC,EACpB,QAAQ,WAAW,CAAC;AAAA,EACzB;AAAA;AAAA,EAGQ,cAAsB;AAC5B,QAAI,KAAK,SAAS,SAAS;AACzB,YAAM,IAAI,KAAK,QAAQ,OAAO;AAC9B,YAAM,IAAI,KAAK,QAAQ,KAAK;AACd,WAAK,QAAQ,WAAW,IAAI,MAAM;AAChD,UAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,UAAI,KAAK,QAAQ,WAAW,GAAG;AAC7B,cAAM,IAAI,CAAC,QAA0B,MAAM,GAAG,KAAK,WAAW,GAAG,CAAC,IAAI,KAAK,UAAU,KAAK,MAAM,GAAG,KAAK,WAAW,GAAG,CAAC,OAAO;AAC9H,eAAO,KAAK,IAAI,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;AAAA,MAC3C;AAEA,aAAO,KAAK,IAAI,GAAG,KAAK,WAAW,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,WAAW,CAAC,CAAC,SAAS;AAAA,IACtG;AACA,QAAI,KAAK,SAAS,YAAY;AAC5B,aAAO,KAAK,OAAO,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,EAAE,KAAK,IAAI;AAAA,IAC7D;AACA,UAAM,OAAO,KAAK,WAAW,KAAK,KAAK;AACvC,WAAO,QAAQ,KAAK,QAAQ,WAAW,IAAI,GAAG,IAAI,IAAI,KAAK,SAAA,CAAU,KAAK;AAAA,EAC5E;AAAA;AAAA,EAGQ,WAAmB;AACzB,UAAM,IAAI,CAAC,MAAsB,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AAC1D,WAAO,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,EAC9D;AAAA;AAAA,EAGQ,oBAA0B;AAChC,UAAM,MAAM,KAAK,SAAS,KAAK,QAAQ,OAAO,KAAK;AACnD,UAAM,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC;AAC1B,QAAI,CAAC,EAAG;AACR,UAAM,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AACzD,SAAK,OAAO,EAAE,GAAG,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,EAAA;AAAA,EAC9C;AAAA;AAAA,EAGQ,SAAS,KAAqB;AACpC,QAAI,CAAC,IAAK,QAAO;AACjB,WAAO,KAAK,QAAQ,WAAW,IAC3B,GAAG,GAAG,IAAI,KAAK,SAAA,CAAU,KACzB;AAAA,EACN;AAAA,EAEmB,SAAe;AAChC,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY,KAAK,QAAQ,WAAW;AAC1C,UAAM,OAAO,KAAK,YAAA;AAClB,UAAM,WAAW,KAAK,SAAS;AAC/B,UAAM,WAAW,KAAK,QAAQ,WAAW;AACzC,SAAK,kBAAA;AAGL,QAAI,WAAW,QAAQ,IAAI,KAAK,QAAQ,KAAK,CAAC,CAAC,UAAU,IAAI,KAAK,QAAQ,KAAK,CAAC,CAAC;AACjF,QAAI,KAAK,SAAS,SAAS;AACzB,kBAAY,iBAAiB,IAAI,KAAK,QAAQ,OAAO,CAAC,CAAC,UAAU,IAAI,KAAK,QAAQ,KAAK,CAAC,CAAC;AAAA,IAC3F,WAAW,KAAK,SAAS,YAAY;AAEnC,YAAM,QAAQ,KAAK,OAAO,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9D,kBAAY,4BAA4B,IAAI,KAAK,CAAC;AAAA,IACpD,OAAO;AACL,YAAM,IAAI,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,KAAK;AACtC,kBAAY,WAAW,IAAI,CAAC,CAAC;AAAA,IAC/B;AAEA,SAAK,YAAY;AAAA;AAAA,4DAEuC,KAAK,QAAQ,WAAW,KAAK,CAAC,WAAW,KAAK,UAAU;AAAA,yBAC3F,IAAI,KAAK,QAAQ,eAAe,YAAY,CAAC,CAAC;AAAA,mBACpD,IAAI,IAAI,CAAC,KAAK,WAAW,aAAa,EAAE;AAAA;AAAA,YAE/C,aAAa,WAAW,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAY1B,QAAQ;AAAA,UAErB,WACI;AAAA,2EAC6D,KAAK,KAAK,CAAC;AAAA,2EACX,KAAK,KAAK,CAAC;AAAA,2EACX,KAAK,KAAK,CAAC;AAAA,wBAExE,EACN;AAAA;AAAA,KAEH;AAED,UAAM,QAAQ,KAAK,KAAK,cAAc,QAAQ;AAC9C,QAAI,CAAC,MAAO;AACZ,QAAI,SAAU;AAEd,UAAM,iBAAiB,SAAS,CAAC,MAAM;AACrC,UAAK,EAAE,OAAuB,QAAQ,QAAQ,EAAG;AAEjD,UAAI,KAAK,QAAQ,WAAW,KAAM,EAAE,OAAuB,UAAU,SAAS,SAAS,EAAG;AAC1F,WAAK,gBAAgB,MAAM;AAE3B,UAAI,KAAK,QAAQ,MAAM,GAAG;AACxB,cAAM,IAAI,KAAK,sBAAA;AACf,aAAK,gBAAgB,MAAM,EAAE,SAAS,MAAM,OAAO,eAAe,EAAE,MAAM,GAAG;AAAA,MAC/E,OAAO;AACL,aAAK,gBAAgB,IAAI;AAAA,MAC3B;AAAA,IACF,CAAC;AAGD,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,CAAC,MAAM;AAClE,QAAE,gBAAA;AACF,WAAK,gBAAgB,OAAO;AAC5B,WAAK,gBAAgB,OAAO;AAC5B,WAAK,gBAAgB,KAAK;AAC1B,WAAK,gBAAgB,QAAQ;AAC7B,WAAK,gBAAgB,MAAM;AAC3B,WAAK,OAAA;AACL,WAAK,WAAW,EAAE;AAAA,IACpB,CAAC;AAGD,UAAM,MAAM,KAAK,KAAK,cAA2B,kBAAkB;AACnE,SAAK,iBAAiB,UAAU,CAAC,MAAM;AACrC,YAAM,IAAK,EAAkB,UAAU,CAAA;AACvC,UAAI,EAAE,UAAU,UAAa,EAAE,QAAQ,QAAW;AAChD,YAAI,EAAE,MAAO,MAAK,aAAa,SAAS,KAAK,SAAS,EAAE,KAAK,CAAC;AAAA,YACzD,MAAK,gBAAgB,OAAO;AACjC,YAAI,EAAE,IAAK,MAAK,aAAa,OAAO,KAAK,SAAS,EAAE,GAAG,CAAC;AAAA,YACnD,MAAK,gBAAgB,KAAK;AAAA,MACjC;AACA,UAAI,EAAE,WAAW,QAAW;AAC1B,aAAK,SAAS,EAAE,OAAO,IAAI,CAAC,MAAc,KAAK,SAAS,CAAC,CAAC;AAAA,MAC5D;AACA,UAAI,EAAE,UAAU,QAAW;AACzB,YAAI,EAAE,MAAO,MAAK,aAAa,SAAS,KAAK,SAAS,EAAE,KAAK,CAAC;AAAA,YACzD,MAAK,gBAAgB,OAAO;AAEjC,YAAI,KAAK,SAAS,SAAU,MAAK,gBAAgB,MAAM;AAAA,MACzD;AACA,WAAK,OAAA;AACL,WAAK,WAAW,CAAC;AAAA,IACnB,CAAC;AAGD,UAAM,UAAU,KAAK,KAAK,cAAgC,UAAU;AACpE,QAAI,WAAW,KAAK,QAAQ,WAAW,KAAK,CAAC,UAAU;AACrD,cAAQ,iBAAiB,WAAW,CAAC,MAAM;AACzC,YAAI,EAAE,QAAQ,SAAS;AACrB,YAAE,eAAA;AACF,eAAK,YAAY,OAAO;AAAA,QAC1B;AAAA,MACF,CAAC;AACD,cAAQ,iBAAiB,QAAQ,MAAM,KAAK,YAAY,OAAO,CAAC;AAAA,IAClE;AAGA,QAAI,UAAU;AACZ,YAAM,YAAY,MAAY;AAC5B,cAAM,IAAI,KAAK,KAAK,cAAgC,MAAM;AAC1D,cAAM,IAAI,KAAK,KAAK,cAAgC,MAAM;AAC1D,cAAM,IAAI,KAAK,KAAK,cAAgC,MAAM;AAC1D,cAAM,QAAQ,CAAC,GAAuB,QACpC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,SAAS,KAAK,KAAK,EAAE,KAAK,CAAC,CAAC;AACxD,aAAK,OAAO;AAAA,UACV,GAAG,MAAM,GAAG,OAAO,EAAE;AAAA,UACrB,GAAG,MAAM,GAAG,OAAO,EAAE;AAAA,UACrB,GAAG,MAAM,GAAG,OAAO,EAAE;AAAA,QAAA;AAGvB,cAAM,WAAW,CAAC,QAAwB,IAAI,MAAM,GAAG,EAAE,CAAC,IAAI,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,IAAI,KAAK,UAAU,KAAK;AAC1G,YAAI,KAAK,MAAO,MAAK,aAAa,SAAS,SAAS,KAAK,KAAK,CAAC;AAC/D,YAAI,KAAK,QAAQ,OAAO,EAAG,MAAK,aAAa,SAAS,SAAS,KAAK,QAAQ,OAAO,CAAC,CAAC;AACrF,YAAI,KAAK,QAAQ,KAAK,EAAG,MAAK,aAAa,OAAO,SAAS,KAAK,QAAQ,KAAK,CAAC,CAAC;AAC/E,YAAI,KAAK,OAAO,QAAQ;AACtB,eAAK,SAAS,KAAK,OAAO,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAAA,QAClD;AAEA,cAAMA,WAAU,KAAK,KAAK,cAAgC,UAAU;AACpE,YAAIA,SAASA,UAAQ,QAAQ,KAAK,YAAA;AAClC,aAAK,WAAW,EAAE,OAAO,KAAK,OAAO;AAAA,MACvC;AACA,OAAC,QAAQ,QAAQ,MAAM,EAAE,QAAQ,CAAC,QAAQ;AACxC,aAAK,KAAK,cAAc,GAAG,GAAG,iBAAiB,SAAS,SAAS;AAAA,MACnE,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,WAAW,QAAuC;AACxD,SAAK;AAAA,MACH,IAAI,YAAY,UAAU,EAAE,SAAS,MAAM,UAAU,MAAM,OAAA,CAAQ;AAAA,IAAA;AAAA,EAEvE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,WAAW,KAA4B;AAC7C,UAAM,OAAO,IAAI,KAAA;AACjB,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,MAAM,KAAK,QAAQ,UAAU,YAAY,EAAE,YAAA;AAGjD,UAAM,QAAQ,CAAC,MAAM,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC;AAChE,QAAI,MAAM,SAAS,EAAG,QAAO;AAE7B,UAAM,QAAQ,KAAK,MAAM,IAAI,OAAO,SAAS,CAAC,EAAE,OAAO,OAAO;AAC9D,QAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,UAAM,MAA8B,CAAA;AACpC,UAAM,QAAQ,CAAC,GAAG,MAAO,IAAI,CAAC,IAAI,MAAM,CAAC,CAAG;AAC5C,UAAM,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,CAAC;AAGtG,UAAM,IAAI,oBAAI,KAAK,GAAG,GAAG,WAAW;AACpC,QAAI,OAAO,MAAM,EAAE,QAAA,CAAS,EAAG,QAAO;AACtC,UAAM,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AAC7D,QAAI,EAAE,YAAA,MAAkB,KAAK,EAAE,SAAA,IAAa,MAAM,KAAK,EAAE,QAAA,MAAc,IAAK,QAAO;AAGnF,UAAM,MAAM,CAAC,GAAW,MAAsB,EAAE,MAAM,GAAG,EAAE,CAAC,EAAG,cAAc,EAAE,MAAM,GAAG,EAAE,CAAC,CAAE;AAC7F,UAAM,MAAM,KAAK,QAAQ,KAAK;AAC9B,UAAM,MAAM,KAAK,QAAQ,KAAK;AAC9B,QAAI,OAAO,IAAI,KAAK,GAAG,IAAI,EAAG,QAAO;AACrC,QAAI,OAAO,IAAI,KAAK,GAAG,IAAI,EAAG,QAAO;AAErC,WAAO;AAAA,EACT;AAAA;AAAA,EAGQ,YAAY,OAA+B;AACjD,UAAM,SAAS,KAAK,WAAW,MAAM,KAAK;AAC1C,QAAI,CAAC,QAAQ;AAEX,YAAM,UAAU,IAAI,SAAS;AAC7B,WAAK;AAAA,QACH,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,UAAU,MAAM,QAAQ,EAAE,MAAM,MAAM,MAAA,GAAS;AAAA,MAAA;AAE7F,YAAM,QAAQ,KAAK,YAAA;AACnB,iBAAW,MAAM,MAAM,UAAU,OAAO,SAAS,GAAG,IAAI;AACxD;AAAA,IACF;AACA,QAAI,KAAK,SAAS,UAAU;AAC1B,WAAK,aAAa,SAAS,KAAK,SAAS,MAAM,CAAC;AAChD,WAAK,WAAW,EAAE,OAAO,KAAK,OAAO;AAAA,IACvC,WAAW,KAAK,SAAS,SAAS;AAEhC,UAAI,CAAC,KAAK,QAAQ,OAAO,KAAM,KAAK,QAAQ,OAAO,KAAK,KAAK,QAAQ,KAAK,GAAI;AAC5E,aAAK,aAAa,SAAS,KAAK,SAAS,MAAM,CAAC;AAChD,aAAK,gBAAgB,KAAK;AAAA,MAC5B,OAAO;AACL,cAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,QAAQ,OAAO,EAAG,MAAM,GAAG,EAAE,CAAC,GAAI,MAAM,EAAE,KAAA;AAC/D,aAAK,aAAa,SAAS,KAAK,SAAS,CAAC,CAAC;AAC3C,aAAK,aAAa,OAAO,KAAK,SAAS,CAAC,CAAC;AAAA,MAC3C;AACA,WAAK,WAAW,EAAE,OAAO,KAAK,QAAQ,OAAO,GAAG,KAAK,KAAK,QAAQ,KAAK,EAAA,CAAG;AAAA,IAC5E,OAAO;AACL,YAAM,OAAO,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,MAAM;AACjE,WAAK,KAAK,KAAK,SAAS,MAAM,CAAC;AAC/B,WAAK,SAAS;AACd,WAAK,WAAW,EAAE,QAAQ,KAAK,QAAQ;AAAA,IACzC;AACA,SAAK,OAAA;AAAA,EACP;AACF;AAjfE,cAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,eAAN;AAofA,SAAS,qBAA0C;AACxD,SAAO,cAAc,iBAAiB,YAAY;AACpD;"}
+{"version":3,"file":"datepicker.js","sources":["../../../src/components/datepicker/datepicker.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-datepicker> — Campo de data com calendário suspenso.\n *\n * Um input com ícone de calendário no final; ao clicar, abre o\n * <fx-calendar> em um popover. As datas selecionadas aparecem no input.\n *\n * Atributos:\n * - mode=\"single\" | \"range\" | \"multiple\"  (padrão: single)\n * - value=\"YYYY-MM-DD\"                    → single\n * - start/end                             → range\n * - values=\"a,b,c\"                        → múltiplas datas (CSV)\n * - min/max, placeholder, disabled, clearable, size (sm|md|lg)\n * - format=\"dd/mm/yyyy\"  → máscara de exibição (tokens: dd mm yyyy, HH MM SS)\n * - show-time            → inclui seleção de hora:minuto:segundo no popover;\n *                          o valor passa a ser \"YYYY-MM-DDTHH:mm:ss\"\n *\n * Evento: `change` (composed):\n * - single:   { value }\n * - range:    { value, start, end }\n * - multiple: { values: string[] }\n */\nexport class FxDatepicker extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      position: relative;\n    }\n    .field {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      width: 100%;\n      box-sizing: border-box;\n      /* Base = tamanho padrão (md): 40px */\n      min-height: var(--fx-size-md, 40px);\n      min-width: 150px;\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([size='sm']) .field { min-height: 32px; min-width: 180px; }\n    :host([size='md']) .field { min-height: 40px; }\n    :host([size='lg']) .field { min-height: 48px; min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }\n    /* Range e multiple exibem mais de uma data: campo mais largo */\n    :host([mode='range']) .field { min-width: 250px; }\n    :host([mode='multiple']) .field { min-width: 220px; }\n    :host([mode='range'][size='lg']) .field { min-width: 360px; }\n    :host([mode='multiple'][size='lg']) .field { min-width: 320px; }\n    :host([show-time]) .field { min-width: 250px; }\n    /* Full width: o host estica até o pai (os min-width dos modos são\n       descartados para permitir layouts estreitos sob controle do pai). */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { min-width: 0; }\n    /* Validação */\n    :host([error]) .field,\n    :host([invalid]) .field {\n      border-color: var(--fx-color-danger, #dc2626);\n    }\n    :host([error]) .field:focus-within,\n    :host([invalid]) .field:focus-within,\n    :host([error][open]) .field,\n    :host([invalid][open]) .field {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\n    }\n    :host([success]) .field,\n    :host([valid]) .field {\n      border-color: var(--fx-color-success, #16a34a);\n    }\n    :host([success]) .field:focus-within,\n    :host([valid]) .field:focus-within,\n    :host([success][open]) .field,\n    :host([valid][open]) .field {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\n    }\n    .field:hover { border-color: var(--fx-border-hover); }\n    .field:focus-within {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .display {\n      flex: 1;\n      border: none;\n      background: none;\n      font: inherit;\n      color: var(--fx-text-default);\n      outline: none;\n      cursor: pointer;\n      text-align: left;\n      padding: 0;\n      min-width: 0;\n    }\n    .display::placeholder { color: var(--fx-text-muted); }\n    .cal-icon { color: var(--fx-text-muted); display: inline-flex; pointer-events: none; }\n    .clear {\n      border: none;\n      background: none;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 4px);\n      line-height: 1;\n      padding: 0 2px;\n      border-radius: var(--fx-radius-full);\n    }\n    .clear:hover { color: var(--fx-color-danger); }\n    .clear[hidden] { display: none; }\n    .pop {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: var(--fx-z-dropdown, 1000);\n      display: none;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      overflow: hidden;\n    }\n    :host([up]) .pop {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n    :host([open]) .pop { display: block; }\n    .time-row {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      border-top: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      border-radius: 0 0 var(--fx-radius-md) var(--fx-radius-md);\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n    }\n    .time-row label { color: var(--fx-text-muted); }\n    .time-row input {\n      width: 38px;\n      font: inherit;\n      color: var(--fx-text-default);\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      padding: 2px 2px;\n      outline: none;\n      text-align: center;\n      -moz-appearance: textfield;\n      appearance: textfield;\n    }\n    .time-row input::-webkit-outer-spin-button,\n    .time-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n    .time-row .sep { color: var(--fx-text-muted); font-weight: bold; padding: 0 1px; }\n    .time-row input:focus {\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    :host([disabled]) .field { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n    :host([disabled]) .display { cursor: not-allowed; }\n    :host([free-text]) .display { cursor: text; }\n    :host([free-text]) .display.invalid { border-bottom: 2px solid var(--fx-color-danger); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['value', 'start', 'end', 'values', 'mode', 'min', 'max', 'placeholder', 'disabled', 'format', 'show-time', 'free-text', 'error', 'invalid', 'success', 'valid'];\n  }\n\n  private docListener?: (e: Event) => void;\n  /** Hora/minuto/segundo do modo show-time. */\n  private time = { h: 0, m: 0, s: 0 };\n\n  get mode(): string {\n    const m = this.getAttr('mode', 'single');\n    return ['single', 'range', 'multiple'].includes(m) ? m : 'single';\n  }\n  set mode(value: string) {\n    this.setAttribute('mode', value);\n  }\n\n  get value(): string {\n    return this.getAttr('value');\n  }\n  set value(v: string) {\n    this.setAttribute('value', v);\n  }\n\n  /** Datas do modo múltiplo (CSV no atributo). */\n  get values(): string[] {\n    const csv = this.getAttr('values');\n    return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n  }\n  set values(list: string[]) {\n    this.setAttribute('values', list.join(','));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    // Fecha o popover ao clicar fora.\n    this.docListener = (e: Event) => {\n      if (!this.hasAttr('open')) return;\n      if (e.composedPath().includes(this)) return;\n      this.removeAttribute('open');\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n  }\n\n  /** Formata uma data ISO (\"YYYY-MM-DD\" ou com \"THH:mm:ss\") segundo o atributo format. */\n  private formatDate(iso: string): string {\n    if (!iso) return '';\n    const fmt = this.getAttr('format');\n    // Sem máscara: exibe apenas a parte da data (a hora entra via timeText\n    // quando show-time está ativo — nunca duplicada).\n    if (!fmt) return iso.split('T')[0]!;\n    const [datePart, timePart] = iso.split('T');\n    const [y = '', m = '', d = ''] = datePart.split('-');\n    const [H = '00', M = '00', S = '00'] = (timePart ?? '').split(':');\n    // Placeholders para evitar colisão entre mm (mês) e MM (minuto).\n    return fmt\n      .replace(/yyyy/gi, '\\u0001')\n      .replace(/MM/g, '\\u0005')\n      .replace(/mm/g, '\\u0002')\n      .replace(/dd/gi, '\\u0003')\n      .replace(/HH/g, '\\u0004')\n      .replace(/SS/gi, '\\u0006')\n      .replace(/\\u0001/g, y)\n      .replace(/\\u0002/g, m)\n      .replace(/\\u0003/g, d)\n      .replace(/\\u0004/g, H)\n      .replace(/\\u0005/g, M)\n      .replace(/\\u0006/g, S);\n  }\n\n  /** Texto exibido no input conforme o modo. */\n  private displayText(): string {\n    if (this.mode === 'range') {\n      const s = this.getAttr('start');\n      const e = this.getAttr('end');\n      const arrow = this.hasAttr('show-time') ? ' ' : ' → ';\n      if (!s && !e) return '';\n      if (this.hasAttr('show-time')) {\n        const f = (iso?: string): string => (iso ? `${this.formatDate(iso)} ${this.timeText()}` : iso ? `${this.formatDate(iso)} …` : '');\n        return s && e ? `${f(s)} → ${f(e)}` : f(s);\n      }\n      void arrow;\n      return s && e ? `${this.formatDate(s)} → ${this.formatDate(e)}` : s ? `${this.formatDate(s)} → …` : '';\n    }\n    if (this.mode === 'multiple') {\n      return this.values.map((v) => this.formatDate(v)).join(', ');\n    }\n    const base = this.formatDate(this.value);\n    return base && this.hasAttr('show-time') ? `${base} ${this.timeText()}` : base;\n  }\n\n  /** \"HH:MM:SS\" do estado interno de show-time. */\n  private timeText(): string {\n    const p = (n: number): string => String(n).padStart(2, '0');\n    return `${p(this.time.h)}:${p(this.time.m)}:${p(this.time.s)}`;\n  }\n\n  /** Extrai hora de um valor ISO inicial, se houver. */\n  private loadTimeFromValue(): void {\n    const src = this.value || this.getAttr('start') || '';\n    const t = src.split('T')[1];\n    if (!t) return;\n    const [h, m, s] = t.split(':').map((n) => parseInt(n, 10));\n    this.time = { h: h || 0, m: m || 0, s: s || 0 };\n  }\n\n  /** Anexa o horário interno ao ISO puro vindo do calendário. */\n  private withTime(iso: string): string {\n    if (!iso) return iso;\n    return this.hasAttr('show-time')\n      ? `${iso}T${this.timeText()}`\n      : iso;\n  }\n\n  protected override render(): void {\n    const disabled = this.disabled;\n    const clearable = this.hasAttr('clearable');\n    const text = this.displayText();\n    const hasValue = text.length > 0;\n    const showTime = this.hasAttr('show-time');\n    this.loadTimeFromValue();\n\n    // Atributos repassados ao calendário interno, conforme o modo.\n    let calAttrs = `min=\"${esc(this.getAttr('min'))}\" max=\"${esc(this.getAttr('max'))}\"`;\n    if (this.mode === 'range') {\n      calAttrs += ` range start=\"${esc(this.getAttr('start'))}\" end=\"${esc(this.getAttr('end'))}\"`;\n    } else if (this.mode === 'multiple') {\n      // Repassa apenas as partes de data (sem hora) para o calendário pintar.\n      const dates = this.values.map((v) => v.split('T')[0]).join(',');\n      calAttrs += ` mode=\"multiple\" values=\"${esc(dates)}\"`;\n    } else {\n      const v = this.value.split('T')[0] ?? '';\n      calAttrs += ` value=\"${esc(v)}\"`;\n    }\n\n    this.setTemplate(`\n      <div class=\"field\" part=\"field\">\n        <input class=\"display\" part=\"display\" type=\"text\" ${this.hasAttr('free-text') && !disabled ? '' : 'readonly'}\n          placeholder=\"${esc(this.getAttr('placeholder', 'dd/mm/aaaa'))}\"\n          value=\"${esc(text)}\" ${disabled ? 'disabled' : ''}>\n        <button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\"\n          ${clearable && hasValue ? '' : 'hidden'}>\n          ×\n        </button>\n        <span class=\"cal-icon\" part=\"icon\" aria-hidden=\"true\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/>\n            <path d=\"M16 2v4M8 2v4M3 10h18\"/>\n          </svg>\n        </span>\n      </div>\n      <div class=\"pop\" part=\"popover\">\n        <fx-calendar ${calAttrs}></fx-calendar>\n        ${\n          showTime\n            ? `<div class=\"time-row\" part=\"time\">\n                <input class=\"t-h\" type=\"number\" min=\"0\" max=\"23\" value=\"${this.time.h}\" aria-label=\"Hora\"><span class=\"sep\">:</span>\n                <input class=\"t-m\" type=\"number\" min=\"0\" max=\"59\" value=\"${this.time.m}\" aria-label=\"Minuto\"><span class=\"sep\">:</span>\n                <input class=\"t-s\" type=\"number\" min=\"0\" max=\"59\" value=\"${this.time.s}\" aria-label=\"Segundo\">\n              </div>`\n            : ''\n        }\n      </div>\n    `);\n\n    const field = this.root.querySelector('.field');\n    if (!field) return;\n    if (disabled) return;\n\n    field.addEventListener('click', (e) => {\n      if ((e.target as HTMLElement).closest('.clear')) return;\n      // Com free-text, clicar no próprio input serve para digitar — não abre.\n      if (this.hasAttr('free-text') && (e.target as HTMLElement).classList.contains('display')) return;\n      this.toggleAttribute('open');\n      // Flip vertical: se não cabe abaixo, abre para cima.\n      if (this.hasAttr('open')) {\n        const r = this.getBoundingClientRect();\n        this.toggleAttribute('up', r.bottom + 340 > window.innerHeight && r.top > 340);\n      } else {\n        this.removeAttribute('up');\n      }\n    });\n\n    // Limpar: zera tudo conforme o modo.\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.removeAttribute('value');\n      this.removeAttribute('start');\n      this.removeAttribute('end');\n      this.removeAttribute('values');\n      this.removeAttribute('open');\n      this.render();\n      this.emitChange({});\n    });\n\n    // Sincroniza seleção do calendário de volta para os atributos.\n    const cal = this.root.querySelector<HTMLElement>('.pop fx-calendar');\n    cal?.addEventListener('change', (e) => {\n      const d = (e as CustomEvent).detail ?? {};\n      if (d.start !== undefined || d.end !== undefined) {\n        if (d.start) this.setAttribute('start', this.withTime(d.start));\n        else this.removeAttribute('start');\n        if (d.end) this.setAttribute('end', this.withTime(d.end));\n        else this.removeAttribute('end');\n      }\n      if (d.values !== undefined) {\n        this.values = d.values.map((v: string) => this.withTime(v));\n      }\n      if (d.value !== undefined) {\n        if (d.value) this.setAttribute('value', this.withTime(d.value));\n        else this.removeAttribute('value');\n        // No modo single, fecha ao escolher.\n        if (this.mode === 'single') this.removeAttribute('open');\n      }\n      this.render();\n      this.emitChange(d);\n    });\n\n    // free-text: valida ao sair do campo ou pressionar Enter.\n    const display = this.root.querySelector<HTMLInputElement>('.display');\n    if (display && this.hasAttr('free-text') && !disabled) {\n      display.addEventListener('keydown', (e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          this.commitTyped(display);\n        }\n      });\n      display.addEventListener('blur', () => this.commitTyped(display));\n    }\n\n    // show-time: captura alterações de hora/minuto/segundo.\n    if (showTime) {\n      const applyTime = (): void => {\n        const h = this.root.querySelector<HTMLInputElement>('.t-h');\n        const m = this.root.querySelector<HTMLInputElement>('.t-m');\n        const s = this.root.querySelector<HTMLInputElement>('.t-s');\n        const clamp = (v: string | undefined, max: number): number =>\n          Math.min(max, Math.max(0, parseInt(v ?? '0', 10) || 0));\n        this.time = {\n          h: clamp(h?.value, 23),\n          m: clamp(m?.value, 59),\n          s: clamp(s?.value, 59),\n        };\n        // Reanexa o horário aos valores já selecionados.\n        const reattach = (iso: string): string => iso.split('T')[0] ? `${iso.split('T')[0]}T${this.timeText()}` : iso;\n        if (this.value) this.setAttribute('value', reattach(this.value));\n        if (this.getAttr('start')) this.setAttribute('start', reattach(this.getAttr('start')));\n        if (this.getAttr('end')) this.setAttribute('end', reattach(this.getAttr('end')));\n        if (this.values.length) {\n          this.values = this.values.map((v) => reattach(v));\n        }\n        // Atualiza apenas o texto do input, sem re-render completo.\n        const display = this.root.querySelector<HTMLInputElement>('.display');\n        if (display) display.value = this.displayText();\n        this.emitChange({ value: this.value });\n      };\n      ['.t-h', '.t-m', '.t-s'].forEach((sel) => {\n        this.root.querySelector(sel)?.addEventListener('input', applyTime);\n      });\n    }\n  }\n\n  private emitChange(detail: Record<string, unknown>): void {\n    this.dispatchEvent(\n      new CustomEvent('change', { bubbles: true, composed: true, detail }),\n    );\n  }\n\n  /**\n   * Interpreta o texto digitado livremente e devolve ISO \"YYYY-MM-DD\"\n   * (ou null se inválido). Aceita a máscara do atributo `format`\n   * (tokens dd/mm/yyyy) ou ISO direto.\n   */\n  private parseTyped(raw: string): string | null {\n    const text = raw.trim();\n    if (!text) return null;\n    const fmt = this.getAttr('format', 'dd/mm/yyyy').toLowerCase();\n\n    // Ordem dos tokens conforme a máscara informada.\n    const order = ['dd', 'mm', 'yyyy'].filter((t) => fmt.includes(t));\n    if (order.length < 3) return null;\n\n    const parts = text.split(new RegExp(`[^0-9]+`)).filter(Boolean);\n    if (parts.length !== 3) return null;\n\n    const map: Record<string, string> = {};\n    order.forEach((t, i) => (map[t] = parts[i]!));\n    const iso = `${map['yyyy']}-${(map['mm'] ?? '').padStart(2, '0')}-${(map['dd'] ?? '').padStart(2, '0')}`;\n\n    // Validação de data real.\n    const d = new Date(`${iso}T12:00:00`);\n    if (Number.isNaN(d.getTime())) return null;\n    const [y, m, day] = iso.split('-').map((n) => parseInt(n, 10));\n    if (d.getFullYear() !== y || d.getMonth() + 1 !== m || d.getDate() !== day) return null;\n\n    // Limites min/max (apenas a parte da data).\n    const cmp = (a: string, b: string): number => a.split('T')[0]!.localeCompare(b.split('T')[0]!);\n    const min = this.getAttr('min');\n    const max = this.getAttr('max');\n    if (min && cmp(iso, min) < 0) return null;\n    if (max && cmp(iso, max) > 0) return null;\n\n    return iso;\n  }\n\n  /** Aplica o texto digitado no modo free-text (blur/Enter). */\n  private commitTyped(input: HTMLInputElement): void {\n    const parsed = this.parseTyped(input.value);\n    if (!parsed) {\n      // Inválido: sinaliza, reverte o texto e emite evento.\n      input.classList.add('invalid');\n      this.dispatchEvent(\n        new CustomEvent('invalid', { bubbles: true, composed: true, detail: { text: input.value } }),\n      );\n      input.value = this.displayText();\n      setTimeout(() => input.classList.remove('invalid'), 1500);\n      return;\n    }\n    if (this.mode === 'single') {\n      this.setAttribute('value', this.withTime(parsed));\n      this.emitChange({ value: this.value });\n    } else if (this.mode === 'range') {\n      // Primeira digitação vira start; com start preenchido, vira end.\n      if (!this.getAttr('start') || (this.getAttr('start') && this.getAttr('end'))) {\n        this.setAttribute('start', this.withTime(parsed));\n        this.removeAttribute('end');\n      } else {\n        const [a, b] = [this.getAttr('start')!.split('T')[0]!, parsed].sort();\n        this.setAttribute('start', this.withTime(a));\n        this.setAttribute('end', this.withTime(b));\n      }\n      this.emitChange({ start: this.getAttr('start'), end: this.getAttr('end') });\n    } else {\n      const list = this.values.filter((v) => v.split('T')[0] !== parsed);\n      list.push(this.withTime(parsed));\n      this.values = list;\n      this.emitChange({ values: this.values });\n    }\n    this.render();\n  }\n}\n\nexport function defineFxDatepicker(): typeof FxDatepicker {\n  return defineElement('fx-datepicker', FxDatepicker);\n}\n\n"],"names":["display"],"mappings":"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"}

package/dist/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA6EpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IA8CjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,0DAA0D;IAC1D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;IAKZ,oBAAoB,IAAI,IAAI;CAMtC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA6EpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAoDjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,0DAA0D;IAC1D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;IAKZ,oBAAoB,IAAI,IAAI;CAMtC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/dialog/dialog.js

@@ -32,6 +32,8 @@ const _FxDialog = class _FxDialog extends FxElement {
       </div>
     `);
     if (!isOpen) return;
+    this._cleanup?.();
+    this._cleanup = void 0;
     const overlay = this.root.querySelector(".overlay");
     const closeBtn = this.root.querySelector(".close");
     const close = () => {

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n      backdrop-filter: blur(3px);\n      -webkit-backdrop-filter: blur(3px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--fx-z-modal, 1100);\n      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .overlay[hidden] { display: none; }\n    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n    .dialog {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-xl);\n      /* Largura customizável por instância: defina --fx-dialog-width no elemento. */\n      width: min(var(--fx-dialog-width, 560px), calc(100vw - 32px));\n      max-height: calc(100vh - 64px);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fx-font-family);\n      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    :host([size='sm']) .dialog { width: min(var(--fx-dialog-width, 400px), calc(100vw - 32px)); }\n    :host([size='lg']) .dialog { width: min(var(--fx-dialog-width, 800px), calc(100vw - 32px)); }\n    /* Mobile: dialog ocupa praticamente toda a largura da tela. */\n    @media (max-width: 640px) {\n      .dialog, :host([size='sm']) .dialog, :host([size='lg']) .dialog {\n        width: calc(100vw - 16px);\n        max-width: calc(100vw - 16px);\n      }\n    }\n    header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n    }\n    h2 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .close {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 6px);\n      cursor: pointer;\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--fx-color-danger); }\n    .body {\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      overflow-y: auto;\n      color: var(--fx-text-default);\n      font-size: var(--fx-font-size);\n    }\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'size', 'heading'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const isOpen = this.open;\n    const heading = this.getAttr('heading');\n\n    this.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n        <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(heading)}\" tabindex=\"-1\">\n          <header>\n            <h2>${esc(heading)}</h2>\n            <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n          </header>\n          <div class=\"body\"><slot></slot></div>\n          <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n        </div>\n      </div>\n    `);\n\n    if (!isOpen) return;\n\n    const overlay = this.root.querySelector<HTMLElement>('.overlay');\n    const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n    const close = (): void => {\n      this.open = false;\n      this._cleanup?.();\n      this._cleanup = undefined;\n      this._restoreFocus();\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    };\n    overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n    closeBtn?.addEventListener('click', close);\n\n    // ESC fecha + foco preso no diálogo\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close(); return; }\n      if (e.key === 'Tab') this._trapFocus(e);\n    };\n    document.addEventListener('keydown', onKey);\n    this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n    requestAnimationFrame(() => {\n      this._previouslyFocused = document.activeElement as HTMLElement | null;\n      this.root.querySelector<HTMLElement>('.dialog')?.focus();\n    });\n    this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  private _cleanup?: () => void;\n  private _previouslyFocused: HTMLElement | null = null;\n\n  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */\n  private _trapFocus(e: KeyboardEvent): void {\n    const dialog = this.root.querySelector<HTMLElement>('.dialog');\n    if (!dialog) return;\n    const focusables = dialog.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    if (!focusables.length) return;\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = this.root.activeElement;\n    if (e.shiftKey && (active === first || active === dialog)) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n\n  private _restoreFocus(): void {\n    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n    this._previouslyFocused = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = undefined;\n    this._restoreFocus();\n  }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n  return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n      backdrop-filter: blur(3px);\n      -webkit-backdrop-filter: blur(3px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--fx-z-modal, 1100);\n      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .overlay[hidden] { display: none; }\n    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n    .dialog {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-xl);\n      /* Largura customizável por instância: defina --fx-dialog-width no elemento. */\n      width: min(var(--fx-dialog-width, 560px), calc(100vw - 32px));\n      max-height: calc(100vh - 64px);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fx-font-family);\n      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    :host([size='sm']) .dialog { width: min(var(--fx-dialog-width, 400px), calc(100vw - 32px)); }\n    :host([size='lg']) .dialog { width: min(var(--fx-dialog-width, 800px), calc(100vw - 32px)); }\n    /* Mobile: dialog ocupa praticamente toda a largura da tela. */\n    @media (max-width: 640px) {\n      .dialog, :host([size='sm']) .dialog, :host([size='lg']) .dialog {\n        width: calc(100vw - 16px);\n        max-width: calc(100vw - 16px);\n      }\n    }\n    header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n    }\n    h2 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .close {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 6px);\n      cursor: pointer;\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--fx-color-danger); }\n    .body {\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      overflow-y: auto;\n      color: var(--fx-text-default);\n      font-size: var(--fx-font-size);\n    }\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'size', 'heading'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const isOpen = this.open;\n    const heading = this.getAttr('heading');\n\n    this.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n        <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(heading)}\" tabindex=\"-1\">\n          <header>\n            <h2>${esc(heading)}</h2>\n            <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n          </header>\n          <div class=\"body\"><slot></slot></div>\n          <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n        </div>\n      </div>\n    `);\n\n    if (!isOpen) return;\n\n    // Evita listeners duplicados em re-renders enquanto aberto\n    // (ex.: mudança de heading/size com o dialog aberto sobrescreveria\n    // o _cleanup anterior, deixando listeners de document órfãos).\n    this._cleanup?.();\n    this._cleanup = undefined;\n\n    const overlay = this.root.querySelector<HTMLElement>('.overlay');\n    const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n    const close = (): void => {\n      this.open = false;\n      this._cleanup?.();\n      this._cleanup = undefined;\n      this._restoreFocus();\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    };\n    overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n    closeBtn?.addEventListener('click', close);\n\n    // ESC fecha + foco preso no diálogo\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close(); return; }\n      if (e.key === 'Tab') this._trapFocus(e);\n    };\n    document.addEventListener('keydown', onKey);\n    this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n    requestAnimationFrame(() => {\n      this._previouslyFocused = document.activeElement as HTMLElement | null;\n      this.root.querySelector<HTMLElement>('.dialog')?.focus();\n    });\n    this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  private _cleanup?: () => void;\n  private _previouslyFocused: HTMLElement | null = null;\n\n  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */\n  private _trapFocus(e: KeyboardEvent): void {\n    const dialog = this.root.querySelector<HTMLElement>('.dialog');\n    if (!dialog) return;\n    const focusables = dialog.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    if (!focusables.length) return;\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = this.root.activeElement;\n    if (e.shiftKey && (active === first || active === dialog)) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n\n  private _restoreFocus(): void {\n    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n    this._previouslyFocused = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = undefined;\n    this._restoreFocus();\n  }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n  return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAsCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAelC;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAwCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAelC;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/empty-state/empty-state.js

@@ -2,6 +2,7 @@ import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
+import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
 const _FxEmptyState = class _FxEmptyState extends FxElement {
   static get observedAttributes() {
     return ["icon", "heading", "description"];
@@ -12,7 +13,7 @@ const _FxEmptyState = class _FxEmptyState extends FxElement {
     const description = this.getAttr("description");
     this.setTemplate(`
       <div class="wrap" part="wrap">
-        <span class="icon" part="icon" aria-hidden="true">${esc(icon)}</span>
+        <span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>
         <h4 part="heading" ${heading ? "" : "hidden"}>${esc(heading)}</h4>
         <p part="description" ${description ? "" : "hidden"}>${esc(description)}</p>
         <slot name="icon"></slot>
@@ -59,6 +60,8 @@ _FxEmptyState.styles = css`
     p[hidden] { display: none; }
     .action { margin-top: var(--fx-space-sm); }
     .action:empty { display: none; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
   `;
 let FxEmptyState = _FxEmptyState;
 function defineFxEmptyState() {

package/dist/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../../src/components/empty-state/empty-state.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-empty-state> — Estado vazio/ilustrativo para listas e telas sem dados.\n *\n * Atributos: icon (glifo/emoji), heading (título), description (texto de apoio).\n * Slots: `icon` (customiza o ícone), `action` (botão/chamada para ação).\n */\nexport class FxEmptyState extends FxElement {\n  static override styles = css`\n    :host {\n      display: flex;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .wrap {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-2xl, 48px) var(--fx-space-xl);\n      text-align: center;\n      max-width: 420px;\n    }\n    .icon {\n      font-size: calc(var(--fx-font-size) + 28px);\n      line-height: 1;\n      color: var(--fx-text-muted);\n    }\n    .icon[hidden] { display: none; }\n    h4 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 3px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    h4[hidden] { display: none; }\n    p {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) - 1px);\n      color: var(--fx-text-muted);\n      line-height: 1.5;\n    }\n    p[hidden] { display: none; }\n    .action { margin-top: var(--fx-space-sm); }\n    .action:empty { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['icon', 'heading', 'description'];\n  }\n\n  protected override render(): void {\n    const icon = this.getAttr('icon', '📭');\n    const heading = this.getAttr('heading');\n    const description = this.getAttr('description');\n\n    this.setTemplate(`\n      <div class=\"wrap\" part=\"wrap\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>\n        <h4 part=\"heading\" ${heading ? '' : 'hidden'}>${esc(heading)}</h4>\n        <p part=\"description\" ${description ? '' : 'hidden'}>${esc(description)}</p>\n        <slot name=\"icon\"></slot>\n        <span class=\"action\"><slot name=\"action\"></slot></span>\n      </div>\n    `);\n  }\n}\n\nexport function defineFxEmptyState(): typeof FxEmptyState {\n  return defineElement('fx-empty-state', FxEmptyState);\n}"],"names":[],"mappings":";;;;AAWO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EAyC1C,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,WAAW,aAAa;AAAA,EAC1C;AAAA,EAEmB,SAAe;AAChC,UAAM,OAAO,KAAK,QAAQ,QAAQ,IAAI;AACtC,UAAM,UAAU,KAAK,QAAQ,SAAS;AACtC,UAAM,cAAc,KAAK,QAAQ,aAAa;AAE9C,SAAK,YAAY;AAAA;AAAA,4DAEuC,IAAI,IAAI,CAAC;AAAA,6BACxC,UAAU,KAAK,QAAQ,IAAI,IAAI,OAAO,CAAC;AAAA,gCACpC,cAAc,KAAK,QAAQ,IAAI,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,KAI1E;AAAA,EACH;AACF;AA3DE,cAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,eAAN;AA8DA,SAAS,qBAA0C;AACxD,SAAO,cAAc,kBAAkB,YAAY;AACrD;"}
+{"version":3,"file":"empty-state.js","sources":["../../../src/components/empty-state/empty-state.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-empty-state> — Estado vazio/ilustrativo para listas e telas sem dados.\n *\n * Atributos: icon (glifo/emoji), heading (título), description (texto de apoio).\n * Slots: `icon` (customiza o ícone), `action` (botão/chamada para ação).\n */\nexport class FxEmptyState extends FxElement {\n  static override styles = css`\n    :host {\n      display: flex;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .wrap {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-2xl, 48px) var(--fx-space-xl);\n      text-align: center;\n      max-width: 420px;\n    }\n    .icon {\n      font-size: calc(var(--fx-font-size) + 28px);\n      line-height: 1;\n      color: var(--fx-text-muted);\n    }\n    .icon[hidden] { display: none; }\n    h4 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 3px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    h4[hidden] { display: none; }\n    p {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) - 1px);\n      color: var(--fx-text-muted);\n      line-height: 1.5;\n    }\n    p[hidden] { display: none; }\n    .action { margin-top: var(--fx-space-sm); }\n    .action:empty { display: none; }\n    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['icon', 'heading', 'description'];\n  }\n\n  protected override render(): void {\n    const icon = this.getAttr('icon', '📭');\n    const heading = this.getAttr('heading');\n    const description = this.getAttr('description');\n\n    this.setTemplate(`\n      <div class=\"wrap\" part=\"wrap\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">${fenixIconHtml(icon)}</span>\n        <h4 part=\"heading\" ${heading ? '' : 'hidden'}>${esc(heading)}</h4>\n        <p part=\"description\" ${description ? '' : 'hidden'}>${esc(description)}</p>\n        <slot name=\"icon\"></slot>\n        <span class=\"action\"><slot name=\"action\"></slot></span>\n      </div>\n    `);\n  }\n}\n\nexport function defineFxEmptyState(): typeof FxEmptyState {\n  return defineElement('fx-empty-state', FxEmptyState);\n}"],"names":[],"mappings":";;;;;AAYO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EA2C1C,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,WAAW,aAAa;AAAA,EAC1C;AAAA,EAEmB,SAAe;AAChC,UAAM,OAAO,KAAK,QAAQ,QAAQ,IAAI;AACtC,UAAM,UAAU,KAAK,QAAQ,SAAS;AACtC,UAAM,cAAc,KAAK,QAAQ,aAAa;AAE9C,SAAK,YAAY;AAAA;AAAA,4DAEuC,cAAc,IAAI,CAAC;AAAA,6BAClD,UAAU,KAAK,QAAQ,IAAI,IAAI,OAAO,CAAC;AAAA,gCACpC,cAAc,KAAK,QAAQ,IAAI,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,KAI1E;AAAA,EACH;AACF;AA7DE,cAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAuCrB,mBAAmB;AAAA;AAxClB,IAAM,eAAN;AAgEA,SAAS,qBAA0C;AACxD,SAAO,cAAc,kBAAkB,YAAY;AACrD;"}

package/dist/components/fileupload/fileupload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SA+HpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAuC;IAE7D,4DAA4D;IAC5D,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,IAAI,QAAQ,IAAI,MAAM,CAAmF;IACzG,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAA+C;IAErE,4DAA4D;IAC5D,IAAI,KAAK,IAAI,IAAI,EAAE,CAAwB;IAC3C,IAAI,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,EAItB;cAEkB,MAAM,IAAI,IAAI;IA6CjC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,QAAQ;IAMhB,kFAAkF;IAClF,OAAO,CAAC,cAAc;CAyBvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAqIpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAuC;IAE7D,4DAA4D;IAC5D,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,IAAI,QAAQ,IAAI,MAAM,CAAmF;IACzG,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAA+C;IAErE,4DAA4D;IAC5D,IAAI,KAAK,IAAI,IAAI,EAAE,CAAwB;IAC3C,IAAI,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,EAItB;cAEkB,MAAM,IAAI,IAAI;IA6CjC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,QAAQ;IAMhB,kFAAkF;IAClF,OAAO,CAAC,cAAc;CAyBvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/fileupload/fileupload.js

@@ -2,6 +2,7 @@ import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
+import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
 const _FxFileUpload = class _FxFileUpload extends FxElement {
   constructor() {
     super(...arguments);
@@ -9,7 +10,7 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     this._done = false;
   }
   static get observedAttributes() {
-    return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value"];
+    return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value", "full"];
   }
   get size() {
     const s = this.getAttr("size", "md");
@@ -53,11 +54,11 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     const fileInput = `<input type="file" class="picker" ${accept ? `accept="${esc(accept)}"` : ""} ${multiple ? "multiple" : ""} ${disabled ? "disabled" : ""} />`;
     this.setTemplate(`
       ${advanced ? `<div class="drop" part="dropzone" role="button" tabindex="0" aria-label="${esc(label)}">
-             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             ${icon ? `<span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>` : ""}
              <span>${esc(label)}</span>
              <span class="hint">ou arraste e solte aqui</span>
            </div>` : `<button type="button" class="btn" part="button">
-             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             ${icon ? `<span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>` : ""}
              <span>${esc(label)}</span>
            </button>`}
       ${fileInput}
@@ -272,6 +273,12 @@ _FxFileUpload.styles = css`
       min-width: 34px;
       text-align: right;
     }
+    /* Full width: o host estica até o pai e o botão/dropzone acompanha. */
+    :host([full]) { display: block; width: 100%; }
+    :host([full]) .btn { width: 100%; }
+    :host([full]) .drop { width: 100%; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
   `;
 let FxFileUpload = _FxFileUpload;
 function defineFxFileUpload() {

package/dist/components/fileupload/fileupload.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.js","sources":["../../../src/components/fileupload/fileupload.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-fileupload> — Seletor de arquivos com upload e progresso (estilo FileUpload do PrimeVue).\n *\n * Atributos:\n *  - mode (basic|advanced — `basic`: botão; `advanced`: dropzone com drag & drop);\n *  - size (sm|md|lg, padrão md);\n *  - severity (primary|secondary|success|warning|danger|info — cor do botão no modo basic);\n *  - label (texto do botão/área, padrão 'Escolher arquivo');\n *  - icon (glifo/emoji exibido antes do texto — sem o atributo, sem ícone);\n *  - accept, multiple, disabled (como no <input type=\"file\">);\n *  - show-progress (exibe barra + % de upload);\n *  - progress (0-100 — o consumidor atualiza durante o upload real);\n *  - value (nome(s) do(s) arquivo(s) carregado(s), somente leitura/espelho).\n *\n * Eventos (composed): `select` (detail: { files: File[] }), `remove`, `complete`.\n */\nexport class FxFileUpload extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    :host([disabled]) { opacity: 0.55; pointer-events: none; }\n    input[type='file'] { display: none; }\n\n    /* ---- botão (basic) ---- */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:hover { border-color: var(--fx-border-hover); background: var(--fx-surface-surface-hover, rgba(0,0,0,0.03)); }\n    .btn:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    /* Severities (como no <fx-button>) — aplicam-se ao botão do modo basic */\n    :host([severity='primary']) .btn { background: var(--fx-color-primary); border-color: transparent; color: #fff; }\n    :host([severity='secondary']) .btn { background: var(--fx-color-secondary); border-color: transparent; color: #fff; }\n    :host([severity='success']) .btn { background: var(--fx-color-success); border-color: transparent; color: #fff; }\n    :host([severity='warning']) .btn { background: var(--fx-color-warning); border-color: transparent; color: #fff; }\n    :host([severity='danger']) .btn { background: var(--fx-color-danger); border-color: transparent; color: #fff; }\n    :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }\n    :host([severity]) .btn:hover { filter: brightness(0.88); }\n    :host([severity]) .btn:focus-visible { border-color: transparent; }\n    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }\n    :host([size='sm']) .drop { min-height: 72px; }\n    :host([size='lg']) .drop { min-height: 132px; }\n\n    /* ---- dropzone (advanced) ---- */\n    .drop {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: 100px;\n      padding: var(--fx-space-lg);\n      border: 2px dashed var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      text-align: center;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing), background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .drop:hover, .drop.over {\n      border-color: var(--fx-color-primary);\n      background: color-mix(in srgb, var(--fx-color-primary) 6%, transparent);\n    }\n    .drop .icon { font-size: calc(var(--fx-font-size) + 12px); line-height: 1; }\n    .drop .hint { font-size: calc(var(--fx-font-size) - 2px); }\n\n    /* ---- ícone comum ---- */\n    .icon { line-height: 1; }\n\n    /* ---- arquivo(s) selecionado(s) ---- */\n    .files { display: flex; flex-direction: column; gap: var(--fx-space-xs); margin-top: var(--fx-space-sm); }\n    .file {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-sm);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n    }\n    .file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file .size { color: var(--fx-text-muted); white-space: nowrap; }\n    .file .remove {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .file .remove:hover { color: var(--fx-color-danger); }\n\n    /* ---- progresso ---- */\n    .progress-row { display: flex; align-items: center; gap: var(--fx-space-sm); margin-top: var(--fx-space-sm); }\n    .track {\n      flex: 1;\n      height: 6px;\n      background: var(--fx-surface-surface-hover);\n      border-radius: var(--fx-radius-full);\n      overflow: hidden;\n    }\n    .bar {\n      height: 100%;\n      width: 0%;\n      background: var(--fx-color-primary);\n      border-radius: var(--fx-radius-full);\n      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([progress='100']) .bar { background: var(--fx-color-success); }\n    .pct {\n      font-size: calc(var(--fx-font-size) - 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n      min-width: 34px;\n      text-align: right;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['mode', 'size', 'severity', 'label', 'icon', 'accept', 'multiple', 'disabled', 'show-progress', 'progress', 'value'];\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) { this.setAttribute('size', value); }\n\n  /** Nomes dos arquivos selecionados (espelho em `value`). */\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  get progress(): number { return Math.min(100, Math.max(0, Number(this.getAttr('progress', '0')) || 0)); }\n  set progress(v: number) { this.setAttribute('progress', String(v)); }\n\n  /** Arquivos selecionados (não serializável em atributo). */\n  get files(): File[] { return this._files; }\n  set files(files: File[]) {\n    this._files = Array.from(files);\n    this.value = this._files.map((f) => f.name).join(', ');\n    this._syncFilesArea();\n  }\n\n  protected override render(): void {\n    const mode = this.getAttr('mode', 'basic');\n    const advanced = mode === 'advanced';\n    const label = this.getAttr('label', 'Escolher arquivo');\n    const icon = this.getAttr('icon');\n    const accept = this.getAttr('accept');\n    const multiple = this.hasAttr('multiple');\n    const disabled = this.hasAttr('disabled');\n    const showProgress = this.hasAttr('show-progress');\n    const pct = this.progress;\n\n    const fileInput = `<input type=\"file\" class=\"picker\" ${accept ? `accept=\"${esc(accept)}\"` : ''} ${multiple ? 'multiple' : ''} ${disabled ? 'disabled' : ''} />`;\n\n    this.setTemplate(`\n      ${advanced\n        ? `<div class=\"drop\" part=\"dropzone\" role=\"button\" tabindex=\"0\" aria-label=\"${esc(label)}\">\n             ${icon ? `<span class=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n             <span class=\"hint\">ou arraste e solte aqui</span>\n           </div>`\n        : `<button type=\"button\" class=\"btn\" part=\"button\">\n             ${icon ? `<span class=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n           </button>`}\n      ${fileInput}\n      <div class=\"files\" part=\"files\"></div>\n      ${showProgress ? `\n      <div class=\"progress-row\" part=\"progress\">\n        <div class=\"track\" role=\"progressbar\" aria-valuenow=\"${pct}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"bar\" style=\"width: ${pct}%\"></div>\n        </div>\n        <span class=\"pct\">${pct}%</span>\n      </div>` : ''}\n    `);\n\n    this._bindPicker();\n    this._syncFilesArea();\n\n    if (!this._done && showProgress && pct >= 100 && this._files.length) {\n      this._done = true;\n      this.dispatchEvent(new CustomEvent('complete', { bubbles: true, composed: true }));\n    }\n    if (pct < 100) this._done = false;\n  }\n\n  private _files: File[] = [];\n  private _done = false;\n\n  private _picker(): HTMLInputElement | null {\n    return this.root.querySelector<HTMLInputElement>('.picker');\n  }\n\n  private _bindPicker(): void {\n    const picker = this._picker();\n    if (!picker) return;\n    const trigger = this.root.querySelector('.btn') ?? this.root.querySelector('.drop');\n    trigger?.addEventListener('click', () => picker.click());\n    trigger?.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === 'Enter' || (e as KeyboardEvent).key === ' ') {\n        e.preventDefault();\n        picker.click();\n      }\n    });\n    picker.addEventListener('change', () => this._acceptFiles(picker.files ?? []));\n\n    // drag & drop (advanced)\n    const drop = this.root.querySelector<HTMLElement>('.drop');\n    if (!drop) return;\n    drop.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('over'); });\n    drop.addEventListener('dragleave', () => drop.classList.remove('over'));\n    drop.addEventListener('drop', (e) => {\n      e.preventDefault();\n      drop.classList.remove('over');\n      if (e.dataTransfer?.files.length) this._acceptFiles(e.dataTransfer.files);\n    });\n  }\n\n  private _acceptFiles(list: FileList | File[]): void {\n    const picked = this.hasAttr('multiple') ? Array.from(list) : [list[0]].filter(Boolean);\n    this.files = picked;\n    const picker = this._picker();\n    if (picker) picker.value = '';\n    this.dispatchEvent(\n      new CustomEvent('select', { bubbles: true, composed: true, detail: { files: picked } }),\n    );\n  }\n\n  private _fmtSize(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(1)} MB`;\n  }\n\n  /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */\n  private _syncFilesArea(): void {\n    const area = this.root?.querySelector?.('.files') as HTMLElement | null;\n    if (!area) return;\n    area.innerHTML = this._files\n      .map(\n        (f, i) => `\n        <div class=\"file\" part=\"file\">\n          <span class=\"name\">${esc(f.name)}</span>\n          <span class=\"size\">${this._fmtSize(f.size)}</span>\n          <button type=\"button\" class=\"remove\" data-i=\"${i}\" part=\"remove\" aria-label=\"Remover ${esc(f.name)}\">×</button>\n        </div>`,\n      )\n      .join('');\n    area.querySelectorAll<HTMLButtonElement>('.remove').forEach((btn) =>\n      btn.addEventListener('click', () => {\n        const removed = this._files.splice(Number(btn.dataset.i), 1)[0];\n        this.value = this._files.map((f) => f.name).join(', ');\n        this.progress = 0;\n        this._syncFilesArea();\n        this.dispatchEvent(\n          new CustomEvent('remove', { bubbles: true, composed: true, detail: { file: removed } }),\n        );\n      }),\n    );\n  }\n}\n\nexport function defineFxFileUpload(): typeof FxFileUpload {\n  return defineElement('fx-fileupload', FxFileUpload);\n}\n\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fileupload.js","sources":["../../../src/components/fileupload/fileupload.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-fileupload> — Seletor de arquivos com upload e progresso (estilo FileUpload do PrimeVue).\n *\n * Atributos:\n *  - mode (basic|advanced — `basic`: botão; `advanced`: dropzone com drag & drop);\n *  - size (sm|md|lg, padrão md);\n *  - severity (primary|secondary|success|warning|danger|info — cor do botão no modo basic);\n *  - label (texto do botão/área, padrão 'Escolher arquivo');\n *  - icon (glifo/emoji exibido antes do texto — sem o atributo, sem ícone);\n *  - accept, multiple, disabled (como no <input type=\"file\">);\n *  - show-progress (exibe barra + % de upload);\n *  - progress (0-100 — o consumidor atualiza durante o upload real);\n *  - value (nome(s) do(s) arquivo(s) carregado(s), somente leitura/espelho).\n *\n * Eventos (composed): `select` (detail: { files: File[] }), `remove`, `complete`.\n */\nexport class FxFileUpload extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    :host([disabled]) { opacity: 0.55; pointer-events: none; }\n    input[type='file'] { display: none; }\n\n    /* ---- botão (basic) ---- */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:hover { border-color: var(--fx-border-hover); background: var(--fx-surface-surface-hover, rgba(0,0,0,0.03)); }\n    .btn:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    /* Severities (como no <fx-button>) — aplicam-se ao botão do modo basic */\n    :host([severity='primary']) .btn { background: var(--fx-color-primary); border-color: transparent; color: #fff; }\n    :host([severity='secondary']) .btn { background: var(--fx-color-secondary); border-color: transparent; color: #fff; }\n    :host([severity='success']) .btn { background: var(--fx-color-success); border-color: transparent; color: #fff; }\n    :host([severity='warning']) .btn { background: var(--fx-color-warning); border-color: transparent; color: #fff; }\n    :host([severity='danger']) .btn { background: var(--fx-color-danger); border-color: transparent; color: #fff; }\n    :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }\n    :host([severity]) .btn:hover { filter: brightness(0.88); }\n    :host([severity]) .btn:focus-visible { border-color: transparent; }\n    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }\n    :host([size='sm']) .drop { min-height: 72px; }\n    :host([size='lg']) .drop { min-height: 132px; }\n\n    /* ---- dropzone (advanced) ---- */\n    .drop {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: 100px;\n      padding: var(--fx-space-lg);\n      border: 2px dashed var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      text-align: center;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing), background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .drop:hover, .drop.over {\n      border-color: var(--fx-color-primary);\n      background: color-mix(in srgb, var(--fx-color-primary) 6%, transparent);\n    }\n    .drop .icon { font-size: calc(var(--fx-font-size) + 12px); line-height: 1; }\n    .drop .hint { font-size: calc(var(--fx-font-size) - 2px); }\n\n    /* ---- ícone comum ---- */\n    .icon { line-height: 1; }\n\n    /* ---- arquivo(s) selecionado(s) ---- */\n    .files { display: flex; flex-direction: column; gap: var(--fx-space-xs); margin-top: var(--fx-space-sm); }\n    .file {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-sm);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n    }\n    .file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file .size { color: var(--fx-text-muted); white-space: nowrap; }\n    .file .remove {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .file .remove:hover { color: var(--fx-color-danger); }\n\n    /* ---- progresso ---- */\n    .progress-row { display: flex; align-items: center; gap: var(--fx-space-sm); margin-top: var(--fx-space-sm); }\n    .track {\n      flex: 1;\n      height: 6px;\n      background: var(--fx-surface-surface-hover);\n      border-radius: var(--fx-radius-full);\n      overflow: hidden;\n    }\n    .bar {\n      height: 100%;\n      width: 0%;\n      background: var(--fx-color-primary);\n      border-radius: var(--fx-radius-full);\n      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([progress='100']) .bar { background: var(--fx-color-success); }\n    .pct {\n      font-size: calc(var(--fx-font-size) - 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n      min-width: 34px;\n      text-align: right;\n    }\n    /* Full width: o host estica até o pai e o botão/dropzone acompanha. */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .btn { width: 100%; }\n    :host([full]) .drop { width: 100%; }\n    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['mode', 'size', 'severity', 'label', 'icon', 'accept', 'multiple', 'disabled', 'show-progress', 'progress', 'value', 'full'];\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) { this.setAttribute('size', value); }\n\n  /** Nomes dos arquivos selecionados (espelho em `value`). */\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  get progress(): number { return Math.min(100, Math.max(0, Number(this.getAttr('progress', '0')) || 0)); }\n  set progress(v: number) { this.setAttribute('progress', String(v)); }\n\n  /** Arquivos selecionados (não serializável em atributo). */\n  get files(): File[] { return this._files; }\n  set files(files: File[]) {\n    this._files = Array.from(files);\n    this.value = this._files.map((f) => f.name).join(', ');\n    this._syncFilesArea();\n  }\n\n  protected override render(): void {\n    const mode = this.getAttr('mode', 'basic');\n    const advanced = mode === 'advanced';\n    const label = this.getAttr('label', 'Escolher arquivo');\n    const icon = this.getAttr('icon');\n    const accept = this.getAttr('accept');\n    const multiple = this.hasAttr('multiple');\n    const disabled = this.hasAttr('disabled');\n    const showProgress = this.hasAttr('show-progress');\n    const pct = this.progress;\n\n    const fileInput = `<input type=\"file\" class=\"picker\" ${accept ? `accept=\"${esc(accept)}\"` : ''} ${multiple ? 'multiple' : ''} ${disabled ? 'disabled' : ''} />`;\n\n    this.setTemplate(`\n      ${advanced\n        ? `<div class=\"drop\" part=\"dropzone\" role=\"button\" tabindex=\"0\" aria-label=\"${esc(label)}\">\n             ${icon ? `<span class=\"icon\" part=\"icon\" aria-hidden=\"true\">${fenixIconHtml(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n             <span class=\"hint\">ou arraste e solte aqui</span>\n           </div>`\n        : `<button type=\"button\" class=\"btn\" part=\"button\">\n             ${icon ? `<span class=\"icon\" part=\"icon\" aria-hidden=\"true\">${fenixIconHtml(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n           </button>`}\n      ${fileInput}\n      <div class=\"files\" part=\"files\"></div>\n      ${showProgress ? `\n      <div class=\"progress-row\" part=\"progress\">\n        <div class=\"track\" role=\"progressbar\" aria-valuenow=\"${pct}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"bar\" style=\"width: ${pct}%\"></div>\n        </div>\n        <span class=\"pct\">${pct}%</span>\n      </div>` : ''}\n    `);\n\n    this._bindPicker();\n    this._syncFilesArea();\n\n    if (!this._done && showProgress && pct >= 100 && this._files.length) {\n      this._done = true;\n      this.dispatchEvent(new CustomEvent('complete', { bubbles: true, composed: true }));\n    }\n    if (pct < 100) this._done = false;\n  }\n\n  private _files: File[] = [];\n  private _done = false;\n\n  private _picker(): HTMLInputElement | null {\n    return this.root.querySelector<HTMLInputElement>('.picker');\n  }\n\n  private _bindPicker(): void {\n    const picker = this._picker();\n    if (!picker) return;\n    const trigger = this.root.querySelector('.btn') ?? this.root.querySelector('.drop');\n    trigger?.addEventListener('click', () => picker.click());\n    trigger?.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === 'Enter' || (e as KeyboardEvent).key === ' ') {\n        e.preventDefault();\n        picker.click();\n      }\n    });\n    picker.addEventListener('change', () => this._acceptFiles(picker.files ?? []));\n\n    // drag & drop (advanced)\n    const drop = this.root.querySelector<HTMLElement>('.drop');\n    if (!drop) return;\n    drop.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('over'); });\n    drop.addEventListener('dragleave', () => drop.classList.remove('over'));\n    drop.addEventListener('drop', (e) => {\n      e.preventDefault();\n      drop.classList.remove('over');\n      if (e.dataTransfer?.files.length) this._acceptFiles(e.dataTransfer.files);\n    });\n  }\n\n  private _acceptFiles(list: FileList | File[]): void {\n    const picked = this.hasAttr('multiple') ? Array.from(list) : [list[0]].filter(Boolean);\n    this.files = picked;\n    const picker = this._picker();\n    if (picker) picker.value = '';\n    this.dispatchEvent(\n      new CustomEvent('select', { bubbles: true, composed: true, detail: { files: picked } }),\n    );\n  }\n\n  private _fmtSize(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(1)} MB`;\n  }\n\n  /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */\n  private _syncFilesArea(): void {\n    const area = this.root?.querySelector?.('.files') as HTMLElement | null;\n    if (!area) return;\n    area.innerHTML = this._files\n      .map(\n        (f, i) => `\n        <div class=\"file\" part=\"file\">\n          <span class=\"name\">${esc(f.name)}</span>\n          <span class=\"size\">${this._fmtSize(f.size)}</span>\n          <button type=\"button\" class=\"remove\" data-i=\"${i}\" part=\"remove\" aria-label=\"Remover ${esc(f.name)}\">×</button>\n        </div>`,\n      )\n      .join('');\n    area.querySelectorAll<HTMLButtonElement>('.remove').forEach((btn) =>\n      btn.addEventListener('click', () => {\n        const removed = this._files.splice(Number(btn.dataset.i), 1)[0];\n        this.value = this._files.map((f) => f.name).join(', ');\n        this.progress = 0;\n        this._syncFilesArea();\n        this.dispatchEvent(\n          new CustomEvent('remove', { bubbles: true, composed: true, detail: { file: removed } }),\n        );\n      }),\n    );\n  }\n}\n\nexport function defineFxFileUpload(): typeof FxFileUpload {\n  return defineElement('fx-fileupload', FxFileUpload);\n}\n\n\n"],"names":[],"mappings":"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"}

package/dist/components/floatlabel/floatlabel.d.ts

@@ -34,6 +34,14 @@ export declare class FxFloatlabel extends FxElement {
     /** Observa mudanças de atributos do controle (value, open, values...). */
     private syncControlReference;
     private syncState;
+    /**
+     * variant="in" + ícone à esquerda dentro do campo (fx-input icon):
+     * enquanto a label é placeholder ela precisa começar depois do glifo.
+     * Detecta via atributos icon/icon-pos (ou slot icon) do controle.
+     */
+    private syncIconIndent;
+    private applyFull;
+    private applyIcon;
     private applyError;
     private isWithin;
     private isFocusedInside;

package/dist/components/floatlabel/floatlabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floatlabel.d.ts","sourceRoot":"","sources":["../../../src/components/floatlabel/floatlabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IAC1C,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAID,OAAgB,MAAM,SAgHpB;IACF,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,cAAc,CAAS;IAE/B,SAAS,CAAC,MAAM,IAAI,IAAI;cAgCL,oBAAoB,IAAI,IAAI;IAK/C,oEAAoE;IACpE,OAAO,CAAC,WAAW;IAQnB,oCAAoC;IACpC,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAuBpB,0EAA0E;IAC1E,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,SAAS;IAwCjB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,eAAe;CAIvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"floatlabel.d.ts","sourceRoot":"","sources":["../../../src/components/floatlabel/floatlabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IAC1C,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAID,OAAgB,MAAM,SAqIpB;IACF,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,cAAc,CAAS;IAE/B,SAAS,CAAC,MAAM,IAAI,IAAI;cAmCL,oBAAoB,IAAI,IAAI;IAK/C,oEAAoE;IACpE,OAAO,CAAC,WAAW;IAQnB,oCAAoC;IACpC,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAwBpB,0EAA0E;IAC1E,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,SAAS;IAwCjB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,eAAe;CAIvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/floatlabel/floatlabel.js

@@ -9,7 +9,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this.listenersReady = false;
   }
   static get observedAttributes() {
-    return ["variant", "error", "invalid", "success", "valid"];
+    return ["variant", "error", "invalid", "success", "valid", "full", "icon", "icon-pos"];
   }
   render() {
     const control = this.findControl();
@@ -33,6 +33,9 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this.syncControlReference(control);
     this.syncState();
     this.applyError();
+    this.applyFull();
+    this.applyIcon();
+    this.syncIconIndent();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -58,6 +61,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
         this.syncControlReference(control);
         this.syncState();
         this.applyError();
+        this.applyFull();
       });
     }
     if (this.listenersReady) return;
@@ -77,10 +81,13 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
       this.observer = null;
       this.targetControl = control;
       if (control) {
-        this.observer = new MutationObserver(() => this.syncState());
+        this.observer = new MutationObserver(() => {
+          this.syncState();
+          this.syncIconIndent();
+        });
         this.observer.observe(control, {
           attributes: true,
-          attributeFilter: ["value", "values", "start", "end", "open"]
+          attributeFilter: ["value", "values", "start", "end", "open", "icon", "icon-pos"]
         });
       }
     }
@@ -112,6 +119,41 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
       this.removeAttribute("focus");
     }
   }
+  /**
+   * variant="in" + ícone à esquerda dentro do campo (fx-input icon):
+   * enquanto a label é placeholder ela precisa começar depois do glifo.
+   * Detecta via atributos icon/icon-pos (ou slot icon) do controle.
+   */
+  syncIconIndent() {
+    const label = this.root.querySelector(".flabel");
+    if (!label) return;
+    const c = this.targetControl;
+    const hasLeftIcon = Boolean(
+      c && (c.hasAttribute("icon") || c.querySelector(':scope > [slot="icon"]')) && c.getAttribute("icon-pos") !== "right"
+    );
+    label.classList.toggle("icon-indent", hasLeftIcon);
+  }
+  applyFull() {
+    if (this.targetControl && typeof this.targetControl.setAttribute === "function") {
+      if (this.hasAttr("full")) {
+        this.targetControl.setAttribute("full", "");
+      } else {
+        this.targetControl.removeAttribute("full");
+      }
+    }
+  }
+  applyIcon() {
+    if (this.targetControl && typeof this.targetControl.setAttribute === "function") {
+      if (this.hasAttr("icon")) {
+        const icon = this.getAttr("icon");
+        const iconPos = this.getAttr("icon-pos");
+        if (icon !== "") this.targetControl.setAttribute("icon", icon);
+        else this.targetControl.setAttribute("icon", "");
+        if (iconPos && iconPos !== "left") this.targetControl.setAttribute("icon-pos", iconPos);
+        else this.targetControl.removeAttribute("icon-pos");
+      }
+    }
+  }
   applyError() {
     const hasError = this.hasAttr("error") || this.hasAttr("invalid");
     const errMsg = this.root.querySelector(
@@ -154,6 +196,12 @@ _FxFloatlabel.styles = css`
 			font-size: var(--fx-font-size);
 			vertical-align: middle;
 		}
+		/* Full width: o host estica até o pai; o controle interno com
+		   atributo full (ou largura herdada) acompanha. */
+		:host([full]) {
+			display: block;
+			width: 100%;
+		}
 		.wrapper {
 			position: relative;
 			display: inline-block;
@@ -219,6 +267,21 @@ _FxFloatlabel.styles = css`
 			color: var(--fx-color-primary, #4f46e5);
 		}
 
+		/* ---- variant="in" com ícone dentro do campo (fx-input icon):
+		   enquanto a label funciona como placeholder (sem foco/valor), ela
+		   começa DEPOIS do glifo (mesma métrica de padding do fx-input).
+		   Ao subir (active), volta ao offset padrão da borda. ---- */
+		:host([variant="in"]) .flabel.icon-indent {
+			left: calc(
+				var(--fx-space-md, 12px) +
+				var(--fx-input-icon-size, calc(var(--fx-font-size, 14px) + 6px)) +
+				var(--fx-space-sm, 8px)
+			);
+		}
+		:host([variant="in"][active]) .flabel.icon-indent {
+			left: var(--fx-space-md, 12px);
+		}
+
 		/* ---- variant="over": label estática ACIMA do campo (fora, em fluxo) ---- */
 		:host([variant="over"]) {
 			display: block;