@wrrdev/fenix-ui 1.1.12 → 1.1.14

package/dist/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["/**\n * <fx-toast> — notificações imperativas com posição e duração configuráveis.\n *\n * Atributos: kind (success|error|info|warning), title, message,\n * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),\n * duration (ms; 0 = fixo até fechar), mode ('light'|'dark' — força o esquema de\n * cores do card independentemente do tema global), progress (booleano ou\n * 'always'|'hover'|'paused' — barra de contagem regressiva na cor do kind),\n * progress-origin (left|right — lado pelo qual a barra esvazia; padrão left).\n */\nconst POSITIONS = [\n  'top-left', 'top-center', 'top-right',\n  'bottom-left', 'bottom-center', 'bottom-right',\n] as const;\nexport type ToastPosition = (typeof POSITIONS)[number];\ntype ToastKind = 'success' | 'error' | 'info' | 'warning';\n\n/**\n * Evento interno disparado quando o <fx-toast> sai do DOM.\n * A API `FenixToast` o escuta para remover a entrada do mapa interno —\n * é o que impede o acúmulo de toasts já dispensados.\n */\nconst REMOVED_EVENT = 'fx-toast:removed';\n\nconst KIND_COLOR: Record<ToastKind, string> = {\n  success: 'var(--fx-color-success, #10b981)',\n  error: 'var(--fx-color-danger, #f43f5e)',\n  info: 'var(--fx-color-info, #0ea5e9)',\n  warning: 'var(--fx-color-warning, #f59e0b)',\n};\n\n/** Ícone exibido no lugar da bolinha, conforme a variante. */\nconst KIND_ICON: Record<ToastKind, string> = {\n  success: '✓',\n  error: '✕',\n  warning: '!',\n  info: 'i',\n};\n\nconst CARD_CSS = `\n:host { display: contents; pointer-events: auto; }\n/* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */\n:host([mode='dark']) {\n  --fx-surface-background: #1e293b;\n  --fx-text-default: #f1f5f9;\n  --fx-text-muted: #94a3b8;\n  --fx-border-default: #334155;\n  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);\n  --fx-surface-surface-hover: rgba(255, 255, 255, .08);\n}\n:host([mode='light']) {\n  --fx-surface-background: #ffffff;\n  --fx-text-default: #1e293b;\n  --fx-text-muted: #64748b;\n  --fx-border-default: #e2e8f0;\n  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .14);\n  --fx-surface-surface-hover: rgba(0, 0, 0, .05);\n}\n.fx-icon {\n  font-family: var(--fx-icon-font, 'Fenix Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  display: inline-block;\n  white-space: nowrap;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  user-select: none;\n}\n.card {\n  display: flex; align-items: flex-start; gap: 10px;\n  min-width: 260px; max-width: 360px;\n  background: var(--fx-surface-background, #fff);\n  color: var(--fx-text-default, #1e293b);\n  border: 1px solid var(--fx-border-default, #e2e8f0);\n  border-left: 4px solid var(--kind);\n  border-radius: var(--fx-radius-md, 8px);\n  box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));\n  padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);\n  font-family: inherit;\n  animation: fx-toast-in .25s ease;\n}\n@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }\n.card.leaving { opacity: 0; transition: opacity .2s ease; }\n.icon {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: var(--kind);\n  color: #fff;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 12px; font-weight: 700;\n  flex: none; margin-top: 2px;\n  user-select: none;\n}\n.body { flex: 1; min-width: 0; }\n.title { font-weight: 600; font-size: 14px; }\n.msg { font-size: calc(var(--fx-font-size, 14px) - 2px); color: var(--fx-text-muted, #64748b); margin-top: 2px; word-break: break-word; white-space: pre-line; }\n.close {\n  all: unset; cursor: pointer; flex: none; line-height: 1;\n  color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;\n}\n.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n\n/* --- Barra de contagem regressiva (atributo progress) ---\n   Fica na base do card e esvazia durante a duração, na cor do kind (--kind) —\n   ou seja, acompanha success/error/warning/info sem configuração extra.\n\n   O lado é configurável pelo atributo progress-origin (padrão: left):\n     left  → a barra drena da direita para a esquerda (ancorada à esquerda)\n     right → a barra drena da esquerda para a direita (ancorada à direita)\n   A origem entra como custom property, então os keyframes são compartilhados.\n\n   Usa escalaX em vez de width: a animação escreve só na compositor, sem\n   reflow por frame. */\n.card { position: relative; overflow: hidden; }\n.progress {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 3px;\n  background: var(--kind);\n  transform-origin: var(--toast-progress-origin, left center);\n  transform: scaleX(1);\n  border-radius: 0 0 var(--fx-radius-md, 8px) var(--fx-radius-md, 8px);\n  pointer-events: none;\n  will-change: transform;\n}\n.progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }\n/* No modo hover a animação fica parada até o cursor/foco entrar no card. */\n.card:hover .progress.run,\n.card:focus-within .progress.run { animation-play-state: running; }\n@keyframes fx-toast-drain {\n  from { transform: scaleX(1); }\n  to   { transform: scaleX(0); }\n}\n/* A barra só começa a correr no 2º frame: no 1º ela já apareceria zerada\n   (o elemento acabou de ser inserido e a animação aplica o estado final). */\n.card.entering .progress { animation: none; }\n/* Ao dispensar, congela a barra: ela some junto com o card em .2s. */\n.card.leaving .progress { animation-play-state: paused; }\n@media (prefers-reduced-motion: reduce) {\n  .progress.run { animation-duration: 0.01ms; }\n}\n`;\n\nexport class FxToast extends HTMLElement {\n  static get observedAttributes() {\n    return ['kind', 'title', 'message', 'duration', 'icon', 'mode', 'progress', 'progress-origin'];\n  }\n\n  /**\n   * Exibe a barra de contagem regressiva na base do card.\n   *\n   * A barra esvazia da esquerda para a direita durante exatamente `duration`\n   * e usa a cor do `kind`. Com `duration=\"0\"` (toast fixo) a barra é\n   * omitida — não há tempo restante a representar.\n   *\n   * - `'always'` (ou atributo vazio): barra sempre correndo.\n   * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;\n   *   ao sair, a animação pausa, então dá tempo de ler a mensagem.\n   * - `'paused'`: barra visível, porém parada.\n   */\n  get progress(): 'always' | 'hover' | 'paused' | undefined {\n    if (!this.hasAttribute('progress')) return undefined;\n    const v = this.getAttribute('progress');\n    return v === 'hover' || v === 'paused' ? v : 'always';\n  }\n  set progress(value: 'always' | 'hover' | 'paused' | undefined) {\n    if (value) this.setAttribute('progress', value);\n    else this.removeAttribute('progress');\n  }\n\n  /**\n   * Lado a partir do qual a barra esvazia.\n   *\n   * - `'left'` (padrão): a barra fica ancorada à esquerda e drena da direita\n   *   para a esquerda.\n   * - `'right'`: a barra fica ancorada à direita e drena da esquerda para a\n   *   direita (espelhado).\n   *\n   * Só tem efeito junto com `progress`; qualquer valor fora da lista cai em\n   * `'left'`.\n   */\n  get progressOrigin(): 'left' | 'right' {\n    return this.getAttribute('progress-origin') === 'right' ? 'right' : 'left';\n  }\n  set progressOrigin(value: 'left' | 'right') {\n    this.setAttribute('progress-origin', value);\n  }\n\n  /** Duração efetiva em ms (0 = fixo). Mesma regra usada no timer. */\n  private get safeDuration(): number {\n    const dur = Number(this.getAttribute('duration') ?? '4000');\n    if (dur === 0) return 0;\n    return Math.max(Number.isNaN(dur) ? 4000 : dur, 1000);\n  }\n\n  /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */\n  get mode(): 'light' | 'dark' | undefined {\n    const m = this.getAttribute('mode');\n    return m === 'light' || m === 'dark' ? m : undefined;\n  }\n  set mode(value: 'light' | 'dark' | undefined) {\n    if (value) this.setAttribute('mode', value);\n    else this.removeAttribute('mode');\n  }\n\n  private timer: ReturnType<typeof setTimeout> | null = null;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot!.firstChild) this.#render();\n    // Durações mínimas: valores muito baixos (ex.: digitação parcial no\n    // playground) são elevados para 1s; 0 permanece fixo até fechar.\n    const safe = this.safeDuration;\n    if (safe > 0 && !this.timer) {\n      this.timer = setTimeout(() => this.dismiss(), safe);\n    }\n    this.#syncProgress();\n  }\n\n  /**\n   * Limpa recursos ao sair do DOM e avisa a API imperativa (`FenixToast`).\n   *\n   * O aviso é essencial: `dismiss()` (timer ou botão de fechar) tira o\n   * elemento do DOM mas, sem isto, `ToastApi.map` continuaria segurando uma\n   * referência forte para cada toast já dispensado — crescimento de memória\n   * sem limite em uso prolongado.\n   */\n  disconnectedCallback() {\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n    this.dispatchEvent(new CustomEvent(REMOVED_EVENT, { bubbles: false, composed: false }));\n  }\n\n  attributeChangedCallback(name: string) {\n    // A duração é lida em dois lugares (timer + barra): se mudar com o toast\n    // na tela, ambos precisam se realinhar.\n    if (name === 'duration' || name === 'progress' || name === 'progress-origin' || name === 'kind') {\n      this.#syncProgress();\n    }\n  }\n\n  /**\n   * Aplica (ou remove) a barra de contagem regressiva.\n   *\n   * A barra só existe com `progress` e `duration > 0`. O tempo da animação\n   * vem de `--toast-duration`, sempre igual ao do `setTimeout` que fecha o\n   * toast — assim a barra e o desaparecimento nunca desalinham.\n   */\n  #syncProgress(): void {\n    const card = this.shadowRoot?.querySelector<HTMLElement>('.card');\n    if (!card) return;\n    const bar = this.shadowRoot!.querySelector<HTMLElement>('.progress');\n    const mode = this.progress;\n    const dur = this.safeDuration;\n    const shouldShow = !!mode && dur > 0;\n\n    if (!shouldShow) {\n      bar?.remove();\n      card.classList.remove('entering');\n      return;\n    }\n    if (!bar) {\n      this.shadowRoot!.querySelector('.card')!.insertAdjacentHTML('beforeend', '<span class=\"progress\" part=\"progress\" aria-hidden=\"true\"></span>');\n    }\n    const el = this.shadowRoot!.querySelector<HTMLElement>('.progress')!;\n    el.style.setProperty('--toast-duration', `${dur}ms`);\n    // `left` (padrão) => origem à esquerda; `right` espelha a drenagem.\n    el.style.setProperty('--toast-progress-origin', `${this.progressOrigin} center`);\n    el.classList.remove('run');\n    // `paused` mantém a barra cheia e imóvel; `always` e `hover` deixam a\n    // animação correr (no `hover`, o CSS só a dispara sob :hover do host).\n    if (mode !== 'paused') el.classList.add('run');\n    // 1 frame sem animação para o browser registrar o estado inicial cheio\n    // antes de a barra começar a esvaziar.\n    card.classList.add('entering');\n    requestAnimationFrame(() => requestAnimationFrame(() => card.classList.remove('entering')));\n  }\n\n  dismiss() {\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n    const card = this.shadowRoot!.querySelector('.card');\n    if (card) {\n      card.classList.add('leaving');\n      setTimeout(() => this.remove(), 200);\n    } else {\n      this.remove();\n    }\n  }\n\n  #render() {\n    const kind = (this.getAttribute('kind') || 'info') as ToastKind;\n    const title = this.getAttribute('title') ?? '';\n    const msg = this.getAttribute('message') ?? '';\n    const color = KIND_COLOR[kind] ?? KIND_COLOR.info;\n    const iconName = this.getAttribute('icon');\n    const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);\n    if (isFxIcon) void import('../../icons');\n    const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;\n    this.shadowRoot!.innerHTML = `\n      <style>${CARD_CSS}</style>\n      <div class=\"card\" style=\"--kind:${color}\" role=\"status\" part=\"card\">\n        <span class=\"icon${isFxIcon ? ' fx-icon' : ''}\">${iconContent}</span>\n        <div class=\"body\">\n          ${title ? '<div class=\"title\"></div>' : ''}\n          ${msg ? '<div class=\"msg\"></div>' : ''}\n        </div>\n        <button class=\"close\" aria-label=\"Fechar\">✕</button>\n      </div>`;\n    const t = this.shadowRoot!.querySelector<HTMLElement>('.title');\n    const m = this.shadowRoot!.querySelector<HTMLElement>('.msg');\n    if (t) t.textContent = title;\n    if (m) m.textContent = msg;\n    this.shadowRoot!.querySelector('.close')!.addEventListener('click', () => this.dismiss());\n  }\n}\n\n/* ---------- Regiões por posição na tela ---------- */\nfunction regionFor(position: ToastPosition): HTMLElement {\n  let region = document.querySelector<HTMLElement>(`[data-fx-toast-region=\"${position}\"]`);\n  if (!region) {\n    region = document.createElement('div');\n    region.setAttribute('data-fx-toast-region', position);\n    const [vertical, horizontal] = position.split('-') as [string, string];\n    const style = region.style as CSSStyleDeclaration & Record<string, string>;\n    style.position = 'fixed';\n    style[vertical] = '16px';\n    if (horizontal === 'center') {\n      style.left = '50%';\n      style.transform = 'translateX(-50%)';\n    } else {\n      style[horizontal] = '16px';\n    }\n    style.display = 'flex';\n    style.flexDirection = 'column';\n    style.gap = '8px';\n    style.zIndex = '1100';\n    style.pointerEvents = 'none';\n    // Os cards reabilitam pointer-events via `:host { pointer-events: auto }` (herança),\n    // sem necessidade de MutationObserver.\n    document.body.appendChild(region);\n  }\n  return region;\n}\n\nexport interface ToastOptions {\n  /** Texto secundário (também aceito como 2º argumento dos métodos). */\n  message?: string;\n  position?: ToastPosition;\n  /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */\n  duration?: number;\n  /**\n   * Barra de contagem regressiva na base do card, na cor do `kind`.\n   * `'always'` (padrão) corre sempre; `'hover'` só enquanto o cursor estiver\n   * sobre o toast; `'paused'` exibe a barra cheia, porém imóvel.\n   * Sem efeito com `duration: 0` (não há tempo restante a representar).\n   */\n  progress?: 'always' | 'hover' | 'paused';\n  /**\n   * Lado a partir do qual a barra esvazia. `'left'` (padrão) deixa a barra\n   * ancorada à esquerda; `'right'` a ancora à direita (espelhado).\n   * Só tem efeito junto com `progress`.\n   */\n  progressOrigin?: 'left' | 'right';\n  /** Força o esquema de cores do card, independentemente do tema global. */\n  mode?: 'light' | 'dark';\n}\n\nclass ToastApi {\n  private seq = 0;\n  private map = new Map<number, FxToast>();\n\n  push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number {\n    const id = ++this.seq;\n    // Assinaturas suportadas:\n    //   push(kind, title, options)\n    //   push(kind, title, message, options)   <- usada pela doc e mais intuitiva\n    const message = typeof messageOrOpts === 'string' ? messageOrOpts : messageOrOpts?.message;\n    const o: ToastOptions = { ...(typeof messageOrOpts === 'object' && messageOrOpts ? messageOrOpts : undefined), ...opts };\n    const el = document.createElement('fx-toast') as FxToast;\n    el.setAttribute('kind', kind);\n    el.setAttribute('title', title);\n    if (message) el.setAttribute('message', message);\n    el.setAttribute('position', o.position ?? 'top-right');\n    el.setAttribute('duration', String(o.duration ?? 4000));\n    if (o.mode) el.setAttribute('mode', o.mode);\n    if (o.progress) el.setAttribute('progress', o.progress);\n    if (o.progressOrigin) el.setAttribute('progress-origin', o.progressOrigin);\n    regionFor(o.position ?? 'top-right').appendChild(el);\n    // O toast avisa quando sai do DOM (timer esgotado, botão de fechar ou\n    // remoção externa). Sem este sync o mapa retém cada toast da sessão.\n    el.addEventListener(REMOVED_EVENT, () => {\n      if (this.map.get(id) === el) this.map.delete(id);\n    });\n    this.map.set(id, el);\n    return id;\n  }\n\n  close(id: number) {\n    this.map.get(id)?.dismiss();\n    this.map.delete(id);\n  }\n\n  success = (t: string, m?: string, o?: ToastOptions) => this.push('success', t, m, o);\n  error = (t: string, m?: string, o?: ToastOptions) => this.push('error', t, m, o);\n  info = (t: string, m?: string, o?: ToastOptions) => this.push('info', t, m, o);\n  warning = (t: string, m?: string, o?: ToastOptions) => this.push('warning', t, m, o);\n}\n\nexport const FenixToast = new ToastApi();\n// Exposto globalmente para uso em HTML puro (onclick=\"FenixToast.success(...)\")\n(globalThis as unknown as Record<string, unknown>).FenixToast = FenixToast;\n\nexport function defineFxToast() {\n  if (!customElements.get('fx-toast')) customElements.define('fx-toast', FxToast);\n}\n\n"],"file":"components/toast/toast.js"}
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["/**\n * <fx-toast> — notificações imperativas com posição e duração configuráveis.\n *\n * Atributos: kind (success|error|info|warning), title, message,\n * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),\n * duration (ms; 0 = fixo até fechar), mode ('light'|'dark' — força o esquema de\n * cores do card independentemente do tema global), progress (booleano ou\n * 'always'|'hover'|'paused' — barra de contagem regressiva na cor do kind),\n * progress-origin (left|right — lado pelo qual a barra esvazia; padrão left).\n */\nconst POSITIONS = [\n  'top-left', 'top-center', 'top-right',\n  'bottom-left', 'bottom-center', 'bottom-right',\n] as const;\nexport type ToastPosition = (typeof POSITIONS)[number];\ntype ToastKind = 'success' | 'error' | 'info' | 'warning';\n\n/**\n * Evento interno disparado quando o <fx-toast> sai do DOM.\n * A API `FenixToast` o escuta para remover a entrada do mapa interno —\n * é o que impede o acúmulo de toasts já dispensados.\n */\nconst REMOVED_EVENT = 'fx-toast:removed';\n\nconst KIND_COLOR: Record<ToastKind, string> = {\n  success: 'var(--fx-color-success, #10b981)',\n  error: 'var(--fx-color-danger, #f43f5e)',\n  info: 'var(--fx-color-info, #0ea5e9)',\n  warning: 'var(--fx-color-warning, #f59e0b)',\n};\n\n/** Ícone exibido no lugar da bolinha, conforme a variante. */\nconst KIND_ICON: Record<ToastKind, string> = {\n  success: '✓',\n  error: '✕',\n  warning: '!',\n  info: 'i',\n};\n\n/** Ícone de copiar (SVG inline: não depende da fonte de ícones). */\nconst COPY_SVG =\n  '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>';\n\nconst CARD_CSS = `\n:host { display: contents; pointer-events: auto; }\n/* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */\n:host([mode='dark']) {\n  --fx-surface-background: #1e293b;\n  --fx-text-default: #f1f5f9;\n  --fx-text-muted: #94a3b8;\n  --fx-border-default: #334155;\n  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);\n  --fx-surface-surface-hover: rgba(255, 255, 255, .08);\n}\n:host([mode='light']) {\n  --fx-surface-background: #ffffff;\n  --fx-text-default: #1e293b;\n  --fx-text-muted: #64748b;\n  --fx-border-default: #e2e8f0;\n  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .14);\n  --fx-surface-surface-hover: rgba(0, 0, 0, .05);\n}\n.fx-icon {\n  font-family: var(--fx-icon-font, 'Fenix Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  display: inline-block;\n  white-space: nowrap;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  user-select: none;\n}\n.card {\n  display: flex; align-items: center; gap: 10px;\n  min-width: 260px; max-width: 360px;\n  /* Altura mínima idêntica à de um toast COM título: sem título o card não\n     fica \"achatado\" e o conjunto mantém o mesmo ritmo visual. */\n  min-height: 56px;\n  background: var(--fx-surface-background, #fff);\n  color: var(--fx-text-default, #1e293b);\n  border: 1px solid var(--fx-border-default, #e2e8f0);\n  border-left: 4px solid var(--kind);\n  border-radius: var(--fx-radius-md, 8px);\n  box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));\n  padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);\n  font-family: inherit;\n  animation: fx-toast-in .25s ease;\n}\n@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }\n.card.leaving { opacity: 0; transition: opacity .2s ease; }\n.icon {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: var(--kind);\n  color: #fff;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 12px; font-weight: 700;\n  flex: none; align-self: center;\n  user-select: none;\n}\n.body { flex: 1; min-width: 0; align-self: center; }\n.title { font-weight: 600; font-size: 14px; }\n.msg {\n  font-size: calc(var(--fx-font-size, 14px) - 2px);\n  color: var(--fx-text-muted, #64748b);\n  margin-top: 2px;\n  word-break: break-word; white-space: pre-line;\n  /* Mensagens longas mantêm o card no tamanho padrão e terminam em \"…\";\n     \"Ver mais\" expande o toast (sem perder o restante do texto). */\n  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;\n  line-clamp: 2; overflow: hidden;\n}\n.card.expanded .msg {\n  display: block; overflow: visible;\n  -webkit-line-clamp: unset; line-clamp: unset;\n}\n.more {\n  all: unset; cursor: pointer; display: inline-block;\n  margin-top: 4px; padding: 2px 0;\n  font-size: 11px; font-weight: 600; color: var(--kind);\n}\n.more[hidden] { display: none; }\n.more:hover { text-decoration: underline; }\n.actions {\n  display: flex; align-items: center; gap: 2px;\n  flex: none; align-self: flex-start;\n}\n.copy, .close {\n  all: unset; cursor: pointer; flex: none; line-height: 1;\n  color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;\n}\n.copy[hidden] { display: none; }\n.copy { font-size: 14px; display: inline-flex; align-items: center; }\n.copy svg { display: block; }\n.copy.done { color: var(--fx-color-success, #10b981); }\n.copy:hover { color: var(--fx-color-primary, #6366f1); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n\n/* --- Barra de contagem regressiva (atributo progress) ---\n   Fica na base do card e esvazia durante a duração, na cor do kind (--kind) —\n   ou seja, acompanha success/error/warning/info sem configuração extra.\n\n   O lado é configurável pelo atributo progress-origin (padrão: left):\n     left  → a barra drena da direita para a esquerda (ancorada à esquerda)\n     right → a barra drena da esquerda para a direita (ancorada à direita)\n   A origem entra como custom property, então os keyframes são compartilhados.\n\n   Usa escalaX em vez de width: a animação escreve só na compositor, sem\n   reflow por frame. */\n.card { position: relative; overflow: hidden; }\n.progress {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 3px;\n  background: var(--kind);\n  transform-origin: var(--toast-progress-origin, left center);\n  transform: scaleX(1);\n  border-radius: 0 0 var(--fx-radius-md, 8px) var(--fx-radius-md, 8px);\n  pointer-events: none;\n  will-change: transform;\n}\n.progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }\n/* Passar o mouse (ou focar) no toast pausa a contagem: a barra e o timer\n   congelam juntos até o cursor sair — tempo de ler a mensagem inteira.\n   progress=\"hover\" é mantido por compatibilidade e se comporta como\n   \"always\" (o hover já pausa a contagem). */\n.card:hover .progress.run,\n.card:focus-within .progress.run { animation-play-state: paused; }\n@keyframes fx-toast-drain {\n  from { transform: scaleX(1); }\n  to   { transform: scaleX(0); }\n}\n/* A barra só começa a correr no 2º frame: no 1º ela já apareceria zerada\n   (o elemento acabou de ser inserido e a animação aplica o estado final). */\n.card.entering .progress { animation: none; }\n/* Ao dispensar, congela a barra: ela some junto com o card em .2s. */\n.card.leaving .progress { animation-play-state: paused; }\n@media (prefers-reduced-motion: reduce) {\n  .progress.run { animation-duration: 0.01ms; }\n}\n`;\n\nexport class FxToast extends HTMLElement {\n  static get observedAttributes() {\n    return ['kind', 'title', 'message', 'duration', 'icon', 'mode', 'progress', 'progress-origin'];\n  }\n\n  /**\n   * Exibe a barra de contagem regressiva na base do card.\n   *\n   * A barra esvazia durante exatamente `duration` e usa a cor do `kind`.\n   * Com `duration=\"0\"` (toast fixo) a barra é omitida — não há tempo restante.\n   *\n   * - `'always'` (ou atributo vazio): barra sempre correndo.\n   * - `'paused'`: barra visível, porém parada.\n   * - `'hover'`: **compatibilidade** — equivale a `'always'`. O hover agora\n   *   pausa a contagem (timer + barra) em qualquer modo, então a barra \"só\n   *   correr sob o cursor\" deixou de fazer sentido.\n   */\n  get progress(): 'always' | 'hover' | 'paused' | undefined {\n    if (!this.hasAttribute('progress')) return undefined;\n    const v = this.getAttribute('progress');\n    return v === 'paused' ? 'paused' : 'always';\n  }\n  set progress(value: 'always' | 'hover' | 'paused' | undefined) {\n    if (value) this.setAttribute('progress', value);\n    else this.removeAttribute('progress');\n  }\n\n  /**\n   * Lado a partir do qual a barra esvazia.\n   *\n   * - `'left'` (padrão): a barra fica ancorada à esquerda e drena da direita\n   *   para a esquerda.\n   * - `'right'`: a barra fica ancorada à direita e drena da esquerda para a\n   *   direita (espelhado).\n   *\n   * Só tem efeito junto com `progress`; qualquer valor fora da lista cai em\n   * `'left'`.\n   */\n  get progressOrigin(): 'left' | 'right' {\n    return this.getAttribute('progress-origin') === 'right' ? 'right' : 'left';\n  }\n  set progressOrigin(value: 'left' | 'right') {\n    this.setAttribute('progress-origin', value);\n  }\n\n  /** Duração efetiva em ms (0 = fixo). Mesma regra usada no timer. */\n  private get safeDuration(): number {\n    const dur = Number(this.getAttribute('duration') ?? '4000');\n    if (dur === 0) return 0;\n    return Math.max(Number.isNaN(dur) ? 4000 : dur, 1000);\n  }\n\n  /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */\n  get mode(): 'light' | 'dark' | undefined {\n    const m = this.getAttribute('mode');\n    return m === 'light' || m === 'dark' ? m : undefined;\n  }\n  set mode(value: 'light' | 'dark' | undefined) {\n    if (value) this.setAttribute('mode', value);\n    else this.removeAttribute('mode');\n  }\n\n  private timer: ReturnType<typeof setTimeout> | null = null;\n  /** Tempo restante (ms) quando a contagem está pausada no hover/foco. */\n  private remaining = 0;\n  /** Instante em que o timer atual começou (para descontar o tempo decorrido). */\n  private startedAt = 0;\n  /** Cursor sobre o toast: não retoma a contagem no focusout. */\n  private hovering = false;\n  /** Já saiu do DOM — impede retomar a contagem. */\n  private disposed = false;\n  /** Existe contagem regressiva (duration > 0) — toasts fixos nunca retomam. */\n  private counting = false;\n  /** Listeners de pausa/retomada registrados uma única vez. */\n  private wired = false;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot!.firstChild) this.#render();\n    this.disposed = false;\n    this.#wirePause();\n    // Durações mínimas: valores muito baixos (ex.: digitação parcial no\n    // playground) são elevados para 1s; 0 permanece fixo até fechar.\n    const safe = this.safeDuration;\n    this.counting = safe > 0;\n    if (safe > 0 && !this.timer) this.#startTimer(safe);\n    this.#syncProgress();\n    // jsdom não calcula layout: o \"Ver mais\" fica oculto (scrollHeight 0).\n    this.#syncMore();\n  }\n\n  /**\n   * Pausa a contagem enquanto o cursor (ou o foco) estiver no toast e retoma\n   * de onde parou ao sair — assim uma mensagem longa pode ser lida inteira.\n   * A barra de progresso pausa junto (regra CSS de :hover/:focus-within).\n   */\n  #wirePause(): void {\n    if (this.wired) return;\n    this.wired = true;\n    this.addEventListener('mouseenter', () => {\n      this.hovering = true;\n      this.#pauseTimer();\n    });\n    this.addEventListener('mouseleave', () => {\n      this.hovering = false;\n      this.#resumeTimer();\n    });\n    // Teclado (botões copiar/fechar/ver mais) também mantém o toast na tela.\n    this.addEventListener('focusin', () => this.#pauseTimer());\n    this.addEventListener('focusout', () => {\n      if (!this.hovering) this.#resumeTimer();\n    });\n  }\n\n  #startTimer(ms: number): void {\n    this.remaining = ms;\n    this.startedAt = Date.now();\n    this.timer = setTimeout(() => {\n      this.timer = null;\n      this.dismiss();\n    }, ms);\n  }\n\n  #pauseTimer(): void {\n    if (!this.timer) return;\n    clearTimeout(this.timer);\n    this.timer = null;\n    this.remaining = Math.max(0, this.remaining - (Date.now() - this.startedAt));\n  }\n\n  #resumeTimer(): void {\n    if (!this.counting || this.timer || this.disposed) return;\n    if (this.remaining <= 0) {\n      this.dismiss();\n      return;\n    }\n    this.#startTimer(this.remaining);\n  }\n\n  /**\n   * Limpa recursos ao sair do DOM e avisa a API imperativa (`FenixToast`).\n   *\n   * O aviso é essencial: `dismiss()` (timer ou botão de fechar) tira o\n   * elemento do DOM mas, sem isto, `ToastApi.map` continuaria segurando uma\n   * referência forte para cada toast já dispensado — crescimento de memória\n   * sem limite em uso prolongado.\n   */\n  disconnectedCallback() {\n    this.disposed = true;\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n    this.dispatchEvent(new CustomEvent(REMOVED_EVENT, { bubbles: false, composed: false }));\n  }\n\n  attributeChangedCallback(name: string) {\n    // A duração é lida em dois lugares (timer + barra): se mudar com o toast\n    // na tela, ambos precisam se realinhar.\n    if (name === 'duration') {\n      if (this.timer) {\n        clearTimeout(this.timer);\n        this.timer = null;\n      }\n      const safe = this.safeDuration;\n      this.counting = safe > 0;\n      if (safe > 0 && this.isConnected && !this.disposed) this.#startTimer(safe);\n    }\n    if (name === 'duration' || name === 'progress' || name === 'progress-origin' || name === 'kind') {\n      this.#syncProgress();\n    }\n  }\n\n  /**\n   * Aplica (ou remove) a barra de contagem regressiva.\n   *\n   * A barra só existe com `progress` e `duration > 0`. O tempo da animação\n   * vem de `--toast-duration`, sempre igual ao do `setTimeout` que fecha o\n   * toast — assim a barra e o desaparecimento nunca desalinham.\n   */\n  #syncProgress(): void {\n    const card = this.shadowRoot?.querySelector<HTMLElement>('.card');\n    if (!card) return;\n    const bar = this.shadowRoot!.querySelector<HTMLElement>('.progress');\n    const mode = this.progress;\n    const dur = this.safeDuration;\n    const shouldShow = !!mode && dur > 0;\n\n    if (!shouldShow) {\n      bar?.remove();\n      card.classList.remove('entering');\n      return;\n    }\n    if (!bar) {\n      this.shadowRoot!.querySelector('.card')!.insertAdjacentHTML('beforeend', '<span class=\"progress\" part=\"progress\" aria-hidden=\"true\"></span>');\n    }\n    const el = this.shadowRoot!.querySelector<HTMLElement>('.progress')!;\n    el.style.setProperty('--toast-duration', `${dur}ms`);\n    // `left` (padrão) => origem à esquerda; `right` espelha a drenagem.\n    el.style.setProperty('--toast-progress-origin', `${this.progressOrigin} center`);\n    el.classList.remove('run');\n    // `paused` mantém a barra cheia e imóvel; os demais modos animam\n    // (o hover pausa a animação junto com o timer, via CSS).\n    if (mode !== 'paused') el.classList.add('run');\n    // 1 frame sem animação para o browser registrar o estado inicial cheio\n    // antes de a barra começar a esvaziar.\n    card.classList.add('entering');\n    requestAnimationFrame(() => requestAnimationFrame(() => card.classList.remove('entering')));\n  }\n\n  dismiss() {\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n    const card = this.shadowRoot!.querySelector('.card');\n    if (card) {\n      card.classList.add('leaving');\n      setTimeout(() => this.remove(), 200);\n    } else {\n      this.remove();\n    }\n  }\n\n  #render() {\n    const kind = (this.getAttribute('kind') || 'info') as ToastKind;\n    const title = this.getAttribute('title') ?? '';\n    const msg = this.getAttribute('message') ?? '';\n    const color = KIND_COLOR[kind] ?? KIND_COLOR.info;\n    const iconName = this.getAttribute('icon');\n    const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);\n    if (isFxIcon) void import('../../icons');\n    const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;\n    this.shadowRoot!.innerHTML = `\n      <style>${CARD_CSS}</style>\n      <div class=\"card\" style=\"--kind:${color}\" role=\"status\" part=\"card\">\n        <span class=\"icon${isFxIcon ? ' fx-icon' : ''}\">${iconContent}</span>\n        <div class=\"body\">\n          ${title ? '<div class=\"title\" part=\"title\"></div>' : ''}\n          ${msg ? '<div class=\"msg\" part=\"message\"></div>' : ''}\n          ${msg ? '<button class=\"more\" part=\"more\" hidden>Ver mais</button>' : ''}\n        </div>\n        <div class=\"actions\">\n          ${msg ? `<button class=\"copy\" part=\"copy\" hidden aria-label=\"Copiar mensagem\" title=\"Copiar mensagem\">${COPY_SVG}</button>` : ''}\n          <button class=\"close\" aria-label=\"Fechar\" title=\"Fechar\">✕</button>\n        </div>\n      </div>`;\n    const t = this.shadowRoot!.querySelector<HTMLElement>('.title');\n    const m = this.shadowRoot!.querySelector<HTMLElement>('.msg');\n    if (t) t.textContent = title;\n    if (m) {\n      m.textContent = msg;\n      // Dica nativa com o texto completo: passar o mouse na mensagem mostra\n      // tudo, mesmo quando o card está truncado em 2 linhas.\n      m.title = msg;\n    }\n    const card = this.shadowRoot!.querySelector<HTMLElement>('.card')!;\n    const more = this.shadowRoot!.querySelector<HTMLButtonElement>('.more');\n    const copy = this.shadowRoot!.querySelector<HTMLButtonElement>('.copy');\n    more?.addEventListener('click', () => {\n      const expanded = card.classList.toggle('expanded');\n      more.textContent = expanded ? 'Ver menos' : 'Ver mais';\n      // O botão de copiar só aparece com o texto aberto (não polui o card no\n      // tamanho padrão). Enquanto o texto está expandido o toast não fecha.\n      if (copy) copy.hidden = !expanded;\n      if (expanded) this.#pauseTimer();\n    });\n    copy?.addEventListener('click', (e) => {\n      const btn = e.currentTarget as HTMLButtonElement;\n      const text = [title, msg].filter(Boolean).join('\\n');\n      navigator.clipboard?.writeText(text).catch(() => { /* clipboard indisponível */ });\n      // Feedback: check verde + dica \"Copiado!\" por 1,2s.\n      btn.classList.add('done');\n      btn.title = 'Copiado!';\n      setTimeout(() => {\n        btn.classList.remove('done');\n        btn.title = 'Copiar mensagem';\n      }, 1200);\n    });\n    this.shadowRoot!.querySelector('.close')!.addEventListener('click', () => this.dismiss());\n  }\n\n  /**\n   * Mostra \"Ver mais\" somente quando a mensagem passou de 2 linhas.\n   * Sem layout (jsdom) scrollHeight/clientHeight são 0 → fica oculto.\n   */\n  #syncMore(): void {\n    const card = this.shadowRoot?.querySelector<HTMLElement>('.card');\n    const more = this.shadowRoot?.querySelector<HTMLButtonElement>('.more');\n    const msg = this.shadowRoot?.querySelector<HTMLElement>('.msg');\n    if (!card || !more || !msg) return;\n    if (card.classList.contains('expanded')) {\n      more.hidden = false;\n      return;\n    }\n    more.hidden = !(msg.scrollHeight - msg.clientHeight > 1);\n  }\n}\n\n/* ---------- Regiões por posição na tela ---------- */\nfunction regionFor(position: ToastPosition): HTMLElement {\n  let region = document.querySelector<HTMLElement>(`[data-fx-toast-region=\"${position}\"]`);\n  if (!region) {\n    region = document.createElement('div');\n    region.setAttribute('data-fx-toast-region', position);\n    const [vertical, horizontal] = position.split('-') as [string, string];\n    const style = region.style as CSSStyleDeclaration & Record<string, string>;\n    style.position = 'fixed';\n    style[vertical] = '16px';\n    if (horizontal === 'center') {\n      style.left = '50%';\n      style.transform = 'translateX(-50%)';\n    } else {\n      style[horizontal] = '16px';\n    }\n    style.display = 'flex';\n    style.flexDirection = 'column';\n    style.gap = '8px';\n    style.zIndex = '1100';\n    style.pointerEvents = 'none';\n    // Os cards reabilitam pointer-events via `:host { pointer-events: auto }` (herança),\n    // sem necessidade de MutationObserver.\n    document.body.appendChild(region);\n  }\n  return region;\n}\n\nexport interface ToastOptions {\n  /** Texto secundário (também aceito como 2º argumento dos métodos). */\n  message?: string;\n  position?: ToastPosition;\n  /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */\n  duration?: number;\n  /**\n   * Barra de contagem regressiva na base do card, na cor do `kind`.\n   * `'always'` (padrão) corre sempre; `'hover'` só enquanto o cursor estiver\n   * sobre o toast; `'paused'` exibe a barra cheia, porém imóvel.\n   * Sem efeito com `duration: 0` (não há tempo restante a representar).\n   */\n  progress?: 'always' | 'hover' | 'paused';\n  /**\n   * Lado a partir do qual a barra esvazia. `'left'` (padrão) deixa a barra\n   * ancorada à esquerda; `'right'` a ancora à direita (espelhado).\n   * Só tem efeito junto com `progress`.\n   */\n  progressOrigin?: 'left' | 'right';\n  /** Força o esquema de cores do card, independentemente do tema global. */\n  mode?: 'light' | 'dark';\n}\n\nclass ToastApi {\n  private seq = 0;\n  private map = new Map<number, FxToast>();\n\n  push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number {\n    const id = ++this.seq;\n    // Assinaturas suportadas:\n    //   push(kind, title, options)\n    //   push(kind, title, message, options)   <- usada pela doc e mais intuitiva\n    const message = typeof messageOrOpts === 'string' ? messageOrOpts : messageOrOpts?.message;\n    const o: ToastOptions = { ...(typeof messageOrOpts === 'object' && messageOrOpts ? messageOrOpts : undefined), ...opts };\n    const el = document.createElement('fx-toast') as FxToast;\n    el.setAttribute('kind', kind);\n    el.setAttribute('title', title);\n    if (message) el.setAttribute('message', message);\n    el.setAttribute('position', o.position ?? 'top-right');\n    el.setAttribute('duration', String(o.duration ?? 4000));\n    if (o.mode) el.setAttribute('mode', o.mode);\n    if (o.progress) el.setAttribute('progress', o.progress);\n    if (o.progressOrigin) el.setAttribute('progress-origin', o.progressOrigin);\n    regionFor(o.position ?? 'top-right').appendChild(el);\n    // O toast avisa quando sai do DOM (timer esgotado, botão de fechar ou\n    // remoção externa). Sem este sync o mapa retém cada toast da sessão.\n    el.addEventListener(REMOVED_EVENT, () => {\n      if (this.map.get(id) === el) this.map.delete(id);\n    });\n    this.map.set(id, el);\n    return id;\n  }\n\n  close(id: number) {\n    this.map.get(id)?.dismiss();\n    this.map.delete(id);\n  }\n\n  success = (t: string, m?: string, o?: ToastOptions) => this.push('success', t, m, o);\n  error = (t: string, m?: string, o?: ToastOptions) => this.push('error', t, m, o);\n  info = (t: string, m?: string, o?: ToastOptions) => this.push('info', t, m, o);\n  warning = (t: string, m?: string, o?: ToastOptions) => this.push('warning', t, m, o);\n}\n\nexport const FenixToast = new ToastApi();\n// Exposto globalmente para uso em HTML puro (onclick=\"FenixToast.success(...)\")\n(globalThis as unknown as Record<string, unknown>).FenixToast = FenixToast;\n\nexport function defineFxToast() {\n  if (!customElements.get('fx-toast')) customElements.define('fx-toast', FxToast);\n}\n\n"],"file":"components/toast/toast.js"}

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -1,19 +1,27 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-toggle-button-group> — Grupo de botones de selección múltiple o única.
  *
- * Atributos: multiple (permite varios seleccionados), value (lista), size.
- * Slots `option`: cada botón con [slot="option" value="..."].
- * Evento (composed): `change` (detail: { value: string[] }).
+ * Form-Associated Custom Element: dentro de un <form> entra en el FormData
+ * con UNA entrada por valor seleccionado (via atributo `name`).
+ *
+ * Atributos: multiple (permite varios seleccionados), value (lista), name,
+ * size. Slots `option`: cada botón con [slot="option" value="..."].
+ * Eventos (composed): `change` (detail: { value: string[] }) e `valuesChange`
+ * (detail: { values: string[] }, two-way binding do Angular [(value)]).
  */
-export declare class FxToggleButtonGroup extends FxElement {
+export declare class FxToggleButtonGroup extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     get value(): string[];
     set value(v: string[]);
     get multiple(): boolean;
+    /** No FormData do form: uma entrada `name` por valor selecionado. */
+    protected getFormValue(): string | FormData | null;
     get options(): HTMLElement[];
     protected render(): void;
+    /** form.reset(): restaura a seleção inicial e re-renderiza os botões. */
+    formResetCallback(): void;
     private _bindOptions;
     private _toggle;
 }

package/dist/components/toggle-button-group/toggle-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,OAAgB,MAAM,SA6BpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,EAAE,CAGpB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,EAA8C;IAEnE,IAAI,QAAQ,IAAI,OAAO,CAAqC;IAE5D,IAAI,OAAO,IAAI,WAAW,EAAE,CAE3B;cAEkB,MAAM,IAAI,IAAI;IAqBjC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,OAAO;CAmBhB;AAED,wBAAgB,yBAAyB,IAAI,OAAO,mBAAmB,CAEtE"}
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;GAUG;AACH,qBAAa,mBAAoB,SAAQ,aAAa;IACpD,OAAgB,MAAM,SA6BpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,EAAE,CAGpB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,EAIpB;IAED,IAAI,QAAQ,IAAI,OAAO,CAAqC;IAE5D,qEAAqE;cAClD,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAQ3D,IAAI,OAAO,IAAI,WAAW,EAAE,CAE3B;cAEkB,MAAM,IAAI,IAAI;IAwBjC,yEAAyE;IAChE,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,OAAO;CAqBhB;AAED,wBAAgB,yBAAyB,IAAI,OAAO,mBAAmB,CAEtE"}

package/dist/components/toggle-button-group/toggle-button-group.js

@@ -1,8 +1,8 @@
-import { FxElement } from "../../core/base.js";
+import { FxFormElement } from "../../core/form-element.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
-const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
+const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxFormElement {
   static get observedAttributes() {
     return ["multiple", "size"];
   }
@@ -12,10 +12,19 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
   }
   set value(v) {
     this.setAttribute("value", v.join(","));
+    this.updateFormValue();
   }
   get multiple() {
     return this.hasAttr("multiple");
   }
+  /** No FormData do form: uma entrada `name` por valor selecionado. */
+  getFormValue() {
+    const values = this.value;
+    if (!this.name || values.length === 0) return null;
+    const fd = new FormData();
+    values.forEach((v) => fd.append(this.name, v));
+    return fd;
+  }
   get options() {
     return Array.from(this.children).filter((el) => el.matches('[slot="option"]')).map((el) => el);
   }
@@ -33,6 +42,13 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
       </div>
     `);
     this._bindOptions();
+    this.updateFormValue();
+  }
+  /** form.reset(): restaura a seleção inicial e re-renderiza os botões. */
+  formResetCallback() {
+    this.setAttribute("value", this._initialValue);
+    this.render();
+    this.updateFormValue();
   }
   _bindOptions() {
     Array.from(this.root.querySelectorAll(".option") || []).forEach((opt) => {
@@ -62,6 +78,7 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
       o.setAttribute("aria-pressed", String(on));
     });
     this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value: current } }));
+    this.dispatchEvent(new CustomEvent("valuesChange", { bubbles: true, composed: true, detail: { values: [...current] } }));
   }
 };
 _FxToggleButtonGroup.styles = css`

package/dist/components/toggle-button-group/toggle-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.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-toggle-button-group> — Grupo de botones de selección múltiple o única.\n *\n * Atributos: multiple (permite varios seleccionados), value (lista), size.\n * Slots `option`: cada botón con [slot=\"option\" value=\"...\"].\n * Evento (composed): `change` (detail: { value: string[] }).\n */\nexport class FxToggleButtonGroup extends FxElement {\n  static override styles = css`\n    :host { display: inline-flex; font-family: var(--fx-font-family); font-size: var(--fx-font-size); gap: var(--fx-space-xs); }\n    .option {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-xs);\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-sm) var(--fx-space-lg);\n      font-weight: var(--fx-font-weight);\n      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */\n      line-height: var(--fx-font-line-height);\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-md);\n      cursor: pointer;\n      user-select: none;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), border-color var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    :host([size='sm']) .option { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .option { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 2px); }\n    .option:hover { border-color: var(--fx-color-primary); }\n    .option.active {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .option.active:hover { filter: brightness(0.92); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['multiple', 'size'];\n  }\n\n  get value(): string[] {\n    const raw = this.getAttr('value');\n    return raw ? raw.split(',').map((s) => s.trim()).filter(Boolean) : [];\n  }\n  set value(v: string[]) { this.setAttribute('value', v.join(',')); }\n\n  get multiple(): boolean { return this.hasAttr('multiple'); }\n\n  get options(): HTMLElement[] {\n    return Array.from(this.children).filter((el) => el.matches('[slot=\"option\"]')).map((el) => el as HTMLElement);\n  }\n\n  protected override render(): void {\n    const opts = this.options;\n    const selected = this.value;\n\n    const html = opts\n      .map((o, i) => {\n        const val = o.getAttribute('value') ?? '';\n        const active = selected.includes(val);\n        return `<button type=\"button\" class=\"option ${active ? 'active' : ''}\" part=\"option\" data-v=\"${esc(val)}\" aria-pressed=\"${active}\">${esc(o.textContent?.trim() || `Opción ${i + 1}`)}</button>`;\n      })\n      .join('');\n\n    this.setTemplate(`\n      <div class=\"options\" part=\"options\" role=\"group\" aria-label=\"Toggle buttons\">\n        ${html}\n      </div>\n    `);\n\n    this._bindOptions();\n  }\n\n  private _bindOptions(): void {\n    Array.from(this.root.querySelectorAll<HTMLElement>('.option') || []).forEach((opt) => {\n      opt.addEventListener('click', () => this._toggle(opt));\n      opt.addEventListener('keydown', (e) => {\n        const ev = e as KeyboardEvent;\n        if (ev.key === 'Enter' || ev.key === ' ') {\n          ev.preventDefault();\n          this._toggle(opt);\n        }\n      });\n    });\n  }\n\n  private _toggle(opt: HTMLElement): void {\n    const val = opt.dataset.v ?? '';\n    let current = this.value;\n\n    if (this.multiple) {\n      if (current.includes(val)) current = current.filter((v) => v !== val);\n      else current.push(val);\n    } else {\n      current = current.includes(val) ? [] : [val];\n    }\n\n    this.value = current;\n    this.root.querySelectorAll<HTMLElement>('.option').forEach((o) => {\n      const on = current.includes(o.dataset.v ?? '');\n      o.classList.toggle('active', on);\n      o.setAttribute('aria-pressed', String(on));\n    });\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { value: current } }));\n  }\n}\n\nexport function defineFxToggleButtonGroup(): typeof FxToggleButtonGroup {\n  return defineElement('fx-toggle-button-group', FxToggleButtonGroup);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-toggle-button-group> — Grupo de botones de selección múltiple o única.\n *\n * Form-Associated Custom Element: dentro de un <form> entra en el FormData\n * con UNA entrada por valor seleccionado (via atributo `name`).\n *\n * Atributos: multiple (permite varios seleccionados), value (lista), name,\n * size. Slots `option`: cada botón con [slot=\"option\" value=\"...\"].\n * Eventos (composed): `change` (detail: { value: string[] }) e `valuesChange`\n * (detail: { values: string[] }, two-way binding do Angular [(value)]).\n */\nexport class FxToggleButtonGroup extends FxFormElement {\n  static override styles = css`\n    :host { display: inline-flex; font-family: var(--fx-font-family); font-size: var(--fx-font-size); gap: var(--fx-space-xs); }\n    .option {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-xs);\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-sm) var(--fx-space-lg);\n      font-weight: var(--fx-font-weight);\n      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */\n      line-height: var(--fx-font-line-height);\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-md);\n      cursor: pointer;\n      user-select: none;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), border-color var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    :host([size='sm']) .option { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .option { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 2px); }\n    .option:hover { border-color: var(--fx-color-primary); }\n    .option.active {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .option.active:hover { filter: brightness(0.92); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['multiple', 'size'];\n  }\n\n  get value(): string[] {\n    const raw = this.getAttr('value');\n    return raw ? raw.split(',').map((s) => s.trim()).filter(Boolean) : [];\n  }\n  set value(v: string[]) {\n    this.setAttribute('value', v.join(','));\n    // `value` não é observado: publica no form aqui.\n    this.updateFormValue();\n  }\n\n  get multiple(): boolean { return this.hasAttr('multiple'); }\n\n  /** No FormData do form: uma entrada `name` por valor selecionado. */\n  protected override getFormValue(): string | FormData | null {\n    const values = this.value;\n    if (!this.name || values.length === 0) return null;\n    const fd = new FormData();\n    values.forEach((v) => fd.append(this.name, v));\n    return fd;\n  }\n\n  get options(): HTMLElement[] {\n    return Array.from(this.children).filter((el) => el.matches('[slot=\"option\"]')).map((el) => el as HTMLElement);\n  }\n\n  protected override render(): void {\n    const opts = this.options;\n    const selected = this.value;\n\n    const html = opts\n      .map((o, i) => {\n        const val = o.getAttribute('value') ?? '';\n        const active = selected.includes(val);\n        return `<button type=\"button\" class=\"option ${active ? 'active' : ''}\" part=\"option\" data-v=\"${esc(val)}\" aria-pressed=\"${active}\">${esc(o.textContent?.trim() || `Opción ${i + 1}`)}</button>`;\n      })\n      .join('');\n\n    this.setTemplate(`\n      <div class=\"options\" part=\"options\" role=\"group\" aria-label=\"Toggle buttons\">\n        ${html}\n      </div>\n    `);\n\n    this._bindOptions();\n\n    // Publica name/value no form (ElementInternals) a cada render.\n    this.updateFormValue();\n  }\n\n  /** form.reset(): restaura a seleção inicial e re-renderiza os botões. */\n  override formResetCallback(): void {\n    this.setAttribute('value', this._initialValue);\n    this.render();\n    this.updateFormValue();\n  }\n\n  private _bindOptions(): void {\n    Array.from(this.root.querySelectorAll<HTMLElement>('.option') || []).forEach((opt) => {\n      opt.addEventListener('click', () => this._toggle(opt));\n      opt.addEventListener('keydown', (e) => {\n        const ev = e as KeyboardEvent;\n        if (ev.key === 'Enter' || ev.key === ' ') {\n          ev.preventDefault();\n          this._toggle(opt);\n        }\n      });\n    });\n  }\n\n  private _toggle(opt: HTMLElement): void {\n    const val = opt.dataset.v ?? '';\n    let current = this.value;\n\n    if (this.multiple) {\n      if (current.includes(val)) current = current.filter((v) => v !== val);\n      else current.push(val);\n    } else {\n      current = current.includes(val) ? [] : [val];\n    }\n\n    this.value = current;\n    this.root.querySelectorAll<HTMLElement>('.option').forEach((o) => {\n      const on = current.includes(o.dataset.v ?? '');\n      o.classList.toggle('active', on);\n      o.setAttribute('aria-pressed', String(on));\n    });\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { value: current } }));\n    // Two-way binding do Angular: [(value)] em seleção múltipla → valuesChange.\n    this.dispatchEvent(new CustomEvent('valuesChange', { bubbles: true, composed: true, detail: { values: [...current] } }));\n  }\n}\n\nexport function defineFxToggleButtonGroup(): typeof FxToggleButtonGroup {\n  return defineElement('fx-toggle-button-group', FxToggleButtonGroup);\n}"],"names":[],"mappings":"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"}

package/dist/core/base.d.ts

@@ -10,6 +10,13 @@ export declare abstract class FxElement extends HTMLElement {
     /** CSS isolado no Shadow DOM. Deve usar apenas `var(--fx-*)`. */
     static styles: string;
     static get observedAttributes(): string[];
+    /**
+     * Opções do `attachShadow` — sobrescreva por componente quando precisar.
+     * `delegatesFocus` (usado pelos componentes de formulário, via FxFormElement)
+     * faz `focus()`, `autofocus` e o clique em `<label for>` atingirem o
+     * controle interno do Shadow DOM, e não só o host.
+     */
+    static shadowOptions: ShadowRootInit;
     protected readonly root: ShadowRoot;
     constructor();
     /** Chamado quando um atributo observado muda. */

package/dist/core/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/core/base.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8BAAsB,SAAU,SAAQ,WAAW;IACjD,iEAAiE;IACjE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM;IAE3B,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;;IAOpC,iDAAiD;IACjD,SAAS,CAAC,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI3G,kDAAkD;IAClD,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAInC,yEAAyE;IACzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAItC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM;IAItD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI;IAKrD,iDAAiD;IACjD,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKzC,wCAAwC;IACxC,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;CAClC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/core/base.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8BAAsB,SAAU,SAAQ,WAAW;IACjD,iEAAiE;IACjE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM;IAE3B,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;;;;;OAKG;IACH,MAAM,CAAC,aAAa,EAAE,cAAc,CAAoB;IAExD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;;IASpC,iDAAiD;IACjD,SAAS,CAAC,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI3G,kDAAkD;IAClD,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAInC,yEAAyE;IACzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAItC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM;IAItD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI;IAKrD,iDAAiD;IACjD,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKzC,wCAAwC;IACxC,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;CAClC"}

package/dist/core/base.js

@@ -4,7 +4,9 @@ const _FxElement = class _FxElement extends HTMLElement {
   }
   constructor() {
     super();
-    this.root = this.attachShadow({ mode: "open" });
+    this.root = this.attachShadow(
+      this.constructor.shadowOptions
+    );
   }
   /** Chamado quando um atributo observado muda. */
   attributeChangedCallback(_name, _oldValue, _newValue) {
@@ -34,6 +36,7 @@ const _FxElement = class _FxElement extends HTMLElement {
   }
 };
 _FxElement.styles = "";
+_FxElement.shadowOptions = { mode: "open" };
 let FxElement = _FxElement;
 export {
   FxElement

package/dist/core/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../src/core/base.ts"],"sourcesContent":["/**\n * Infraestrutura base de Web Component do FenixUI.\n *\n * Todo componente estende `FxElement`, que:\n *  - cria o Shadow Root (isolamento de estrutura e CSS);\n *  - injeta o CSS (tokens via `var(--fx-*)`) + template em cada render;\n *  - re-renderiza quando atributos observados mudam.\n */\n\nexport abstract class FxElement extends HTMLElement {\n  /** CSS isolado no Shadow DOM. Deve usar apenas `var(--fx-*)`. */\n  static styles: string = '';\n\n  static get observedAttributes(): string[] {\n    return [];\n  }\n\n  protected readonly root: ShadowRoot;\n\n  constructor() {\n    super();\n    this.root = this.attachShadow({ mode: 'open' });\n  }\n\n  /** Chamado quando um atributo observado muda. */\n  protected attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (this.isConnected) this.render();\n  }\n\n  /** Chamado quando o elemento é anexado ao DOM. */\n  protected connectedCallback(): void {\n    this.render();\n  }\n\n  /** Chamado quando o elemento é removido do DOM (limpeza de recursos). */\n  protected disconnectedCallback(): void {\n    /* noop — sobrescreva para limpar observers/listeners. */\n  }\n\n  protected hasAttr(name: string): boolean {\n    return this.hasAttribute(name);\n  }\n\n  protected getAttr(name: string, fallback = ''): string {\n    return this.getAttribute(name) ?? fallback;\n  }\n\n  protected toggleAttr(name: string, on: boolean): void {\n    if (on) this.setAttribute(name, '');\n    else this.removeAttribute(name);\n  }\n\n  /** Injeta `<style>` + template no Shadow DOM. */\n  protected setTemplate(html: string): void {\n    const styles = (this.constructor as typeof FxElement).styles;\n    this.root.innerHTML = `<style>${styles}</style>${html}`;\n  }\n\n  /** Implementado por cada componente. */\n  protected abstract render(): void;\n}"],"names":[],"mappings":"AASO,MAAe,aAAf,MAAe,mBAAkB,YAAY;AAAA,EAIlD,WAAW,qBAA+B;AACxC,WAAO,CAAA;AAAA,EACT;AAAA,EAIA,cAAc;AACZ,UAAA;AACA,SAAK,OAAO,KAAK,aAAa,EAAE,MAAM,QAAQ;AAAA,EAChD;AAAA;AAAA,EAGU,yBAAyB,OAAe,WAA0B,WAAgC;AAC1G,QAAI,KAAK,YAAa,MAAK,OAAA;AAAA,EAC7B;AAAA;AAAA,EAGU,oBAA0B;AAClC,SAAK,OAAA;AAAA,EACP;AAAA;AAAA,EAGU,uBAA6B;AAAA,EAEvC;AAAA,EAEU,QAAQ,MAAuB;AACvC,WAAO,KAAK,aAAa,IAAI;AAAA,EAC/B;AAAA,EAEU,QAAQ,MAAc,WAAW,IAAY;AACrD,WAAO,KAAK,aAAa,IAAI,KAAK;AAAA,EACpC;AAAA,EAEU,WAAW,MAAc,IAAmB;AACpD,QAAI,GAAI,MAAK,aAAa,MAAM,EAAE;AAAA,QAC7B,MAAK,gBAAgB,IAAI;AAAA,EAChC;AAAA;AAAA,EAGU,YAAY,MAAoB;AACxC,UAAM,SAAU,KAAK,YAAiC;AACtD,SAAK,KAAK,YAAY,UAAU,MAAM,WAAW,IAAI;AAAA,EACvD;AAIF;AAjDE,WAAO,SAAiB;AAFnB,IAAe,YAAf;"}
+{"version":3,"file":"base.js","sources":["../../src/core/base.ts"],"sourcesContent":["/**\n * Infraestrutura base de Web Component do FenixUI.\n *\n * Todo componente estende `FxElement`, que:\n *  - cria o Shadow Root (isolamento de estrutura e CSS);\n *  - injeta o CSS (tokens via `var(--fx-*)`) + template em cada render;\n *  - re-renderiza quando atributos observados mudam.\n */\n\nexport abstract class FxElement extends HTMLElement {\n  /** CSS isolado no Shadow DOM. Deve usar apenas `var(--fx-*)`. */\n  static styles: string = '';\n\n  static get observedAttributes(): string[] {\n    return [];\n  }\n\n  /**\n   * Opções do `attachShadow` — sobrescreva por componente quando precisar.\n   * `delegatesFocus` (usado pelos componentes de formulário, via FxFormElement)\n   * faz `focus()`, `autofocus` e o clique em `<label for>` atingirem o\n   * controle interno do Shadow DOM, e não só o host.\n   */\n  static shadowOptions: ShadowRootInit = { mode: 'open' };\n\n  protected readonly root: ShadowRoot;\n\n  constructor() {\n    super();\n    this.root = this.attachShadow(\n      (this.constructor as typeof FxElement).shadowOptions,\n    );\n  }\n\n  /** Chamado quando um atributo observado muda. */\n  protected attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (this.isConnected) this.render();\n  }\n\n  /** Chamado quando o elemento é anexado ao DOM. */\n  protected connectedCallback(): void {\n    this.render();\n  }\n\n  /** Chamado quando o elemento é removido do DOM (limpeza de recursos). */\n  protected disconnectedCallback(): void {\n    /* noop — sobrescreva para limpar observers/listeners. */\n  }\n\n  protected hasAttr(name: string): boolean {\n    return this.hasAttribute(name);\n  }\n\n  protected getAttr(name: string, fallback = ''): string {\n    return this.getAttribute(name) ?? fallback;\n  }\n\n  protected toggleAttr(name: string, on: boolean): void {\n    if (on) this.setAttribute(name, '');\n    else this.removeAttribute(name);\n  }\n\n  /** Injeta `<style>` + template no Shadow DOM. */\n  protected setTemplate(html: string): void {\n    const styles = (this.constructor as typeof FxElement).styles;\n    this.root.innerHTML = `<style>${styles}</style>${html}`;\n  }\n\n  /** Implementado por cada componente. */\n  protected abstract render(): void;\n}"],"names":[],"mappings":"AASO,MAAe,aAAf,MAAe,mBAAkB,YAAY;AAAA,EAIlD,WAAW,qBAA+B;AACxC,WAAO,CAAA;AAAA,EACT;AAAA,EAYA,cAAc;AACZ,UAAA;AACA,SAAK,OAAO,KAAK;AAAA,MACd,KAAK,YAAiC;AAAA,IAAA;AAAA,EAE3C;AAAA;AAAA,EAGU,yBAAyB,OAAe,WAA0B,WAAgC;AAC1G,QAAI,KAAK,YAAa,MAAK,OAAA;AAAA,EAC7B;AAAA;AAAA,EAGU,oBAA0B;AAClC,SAAK,OAAA;AAAA,EACP;AAAA;AAAA,EAGU,uBAA6B;AAAA,EAEvC;AAAA,EAEU,QAAQ,MAAuB;AACvC,WAAO,KAAK,aAAa,IAAI;AAAA,EAC/B;AAAA,EAEU,QAAQ,MAAc,WAAW,IAAY;AACrD,WAAO,KAAK,aAAa,IAAI,KAAK;AAAA,EACpC;AAAA,EAEU,WAAW,MAAc,IAAmB;AACpD,QAAI,GAAI,MAAK,aAAa,MAAM,EAAE;AAAA,QAC7B,MAAK,gBAAgB,IAAI;AAAA,EAChC;AAAA;AAAA,EAGU,YAAY,MAAoB;AACxC,UAAM,SAAU,KAAK,YAAiC;AACtD,SAAK,KAAK,YAAY,UAAU,MAAM,WAAW,IAAI;AAAA,EACvD;AAIF;AA3DE,WAAO,SAAiB;AAYxB,WAAO,gBAAgC,EAAE,MAAM,OAAA;AAd1C,IAAe,YAAf;"}

package/dist/core/form-element.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Base dos componentes de formulário — Form-Associated Custom Element.
+ *
+ * Por que ela existe: um `<input>` interno do Shadow DOM **não se associa** ao
+ * `<form>` do light DOM (a associação por árvore não cruza a fronteira do
+ * shadow). Sem `formAssociated: true` + `ElementInternals`, o componente fica
+ * invisível para o form: `new FormData(form)` não o inclui, Enter não submete,
+ * `form.elements`/validação/`reset` não o enxergam e `<label for>` não o foca.
+ *
+ * O que esta base entrega:
+ *  - `static formAssociated = true` → o HOST vira campo do form (entra em
+ *    `form.elements`, `FormData`, `checkValidity`, `reset`, e é labelable);
+ *  - `delegatesFocus: true` → `focus()`, `autofocus` e clique em
+ *    `<label for="idDoHost">` focam o controle interno;
+ *  - `updateFormValue()` → publica `name`/`value` no form via `internals`;
+ *  - `formDisabledCallback` → `<fieldset disabled>` desabilita o controle;
+ *  - `formResetCallback` → `form.reset()` restaura o valor inicial;
+ *  - getters nativos: `name`, `form`, `type`, `validity`, `labels`,
+ *    `checkValidity()`, `reportValidity()`.
+ */
+import { FxElement } from './base';
+export declare abstract class FxFormElement extends FxElement {
+    /** Participa de <form> como campo nativo (FormData, reset, validação, label). */
+    static formAssociated: boolean;
+    /** focus()/autofocus/<label for> atingem o controle interno do Shadow DOM. */
+    static shadowOptions: ShadowRootInit;
+    protected readonly internals: ElementInternals | null;
+    /** Valor do atributo `value` quando o componente entrou no form (reset). */
+    protected _initialValue: string;
+    private _initialCaptured;
+    private _autofocused;
+    constructor();
+    /** Nome do campo no FormData (atributo `name`, como no nativo). */
+    get name(): string;
+    /** Form ao qual o componente está associado (null se fora de um form). */
+    get form(): HTMLFormElement | null;
+    get type(): string;
+    get willValidate(): boolean;
+    get validity(): ValidityState | null;
+    get validationMessage(): string;
+    get labels(): NodeList;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    protected connectedCallback(): void;
+    /**
+     * Foca o controle interno: primeiro o HOST (com `delegatesFocus` o browser
+     * repassa ao controle interno) e, se nada for focado (ex.: ambientes sem
+     * delegatesFocus, como jsdom nos testes), o primeiro focável do shadow.
+     */
+    private focusInnerControl;
+    /**
+     * Valor publicado no FormData. Sobrescreva quando o valor NÃO é o atributo
+     * `value` (checkbox/switch enviariam `value || 'on'` quando marcados,
+     * seleção múltipla enviaria várias entradas, fileupload enviaria arquivos).
+     */
+    protected getFormValue(): string | FormData | null;
+    /**
+     * Sincroniza o campo interno, publica name/value no form (ElementInternals)
+     * e emite `input` (v-model do Vue) + `valueChange` ([(value)] do Angular).
+     *
+     * Chame quando o valor mudar — junto do evento semântico (`change`,
+     * `select`, ...) que o componente já dispara. `detail` opcional complementa
+     * o payload (ex.: { start, end } do fx-datepicker).
+     */
+    protected emitValueEvents(detail?: Record<string, unknown>): void;
+    /** Sincroniza name/value com o form (ElementInternals). */
+    protected updateFormValue(): void;
+    /**
+     * <form disabled>/<fieldset disabled>: espelha no atributo `disabled`
+     * observado — o re-render desabilita o controle interno.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /** form.reset(): restaura o valor inicial e sincroniza o campo interno. */
+    formResetCallback(): void;
+    /**
+     * Hook: empurra o valor atual do atributo `value` para o controle interno
+     * SEM re-renderizar (componentes com campo nativo interno sobrescrevem).
+     */
+    protected syncInternalControl(): void;
+}
+//# sourceMappingURL=form-element.d.ts.map

package/dist/core/form-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.d.ts","sourceRoot":"","sources":["../../src/core/form-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,8BAAsB,aAAc,SAAQ,SAAS;IACnD,iFAAiF;IACjF,MAAM,CAAC,cAAc,UAAQ;IAC7B,8EAA8E;IAC9E,OAAgB,aAAa,EAAE,cAAc,CAG3C;IAEF,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtD,4EAA4E;IAC5E,SAAS,CAAC,aAAa,SAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,YAAY,CAAS;;IAU7B,mEAAmE;IACnE,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,0EAA0E;IAC1E,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAIjC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,QAAQ,IAAI,aAAa,GAAG,IAAI,CAEnC;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,MAAM,IAAI,QAAQ,CAErB;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;cAIN,iBAAiB,IAAI,IAAI;IAkB5C;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;OAIG;IACH,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAIlD;;;;;;;OAOG;IACH,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAgBjE,2DAA2D;IAC3D,SAAS,CAAC,eAAe,IAAI,IAAI;IAKjC;;;OAGG;IACH,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAK7C,2EAA2E;IAC3E,iBAAiB,IAAI,IAAI;IAMzB;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;CAGtC"}

package/dist/core/form-element.js

@@ -0,0 +1,129 @@
+import { FxElement } from "./base.js";
+const _FxFormElement = class _FxFormElement extends FxElement {
+  constructor() {
+    super();
+    this._initialValue = "";
+    this._initialCaptured = false;
+    this._autofocused = false;
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+  }
+  /** Nome do campo no FormData (atributo `name`, como no nativo). */
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  /** Form ao qual o componente está associado (null se fora de um form). */
+  get form() {
+    return this.internals?.form ?? this.closest("form");
+  }
+  get type() {
+    return this.localName;
+  }
+  get willValidate() {
+    return this.internals?.willValidate ?? false;
+  }
+  get validity() {
+    return this.internals?.validity ?? null;
+  }
+  get validationMessage() {
+    return this.internals?.validationMessage ?? "";
+  }
+  get labels() {
+    return this.internals?.labels ?? this.childNodes;
+  }
+  checkValidity() {
+    return this.internals?.checkValidity?.() ?? true;
+  }
+  reportValidity() {
+    return this.internals?.reportValidity?.() ?? true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._initialCaptured) {
+      this._initialCaptured = true;
+      this._initialValue = this.getAttr("value");
+    }
+    this.updateFormValue();
+    if (!this._autofocused && this.hasAttr("autofocus")) {
+      this._autofocused = true;
+      queueMicrotask(() => {
+        if (this.isConnected && this.hasAttr("autofocus")) this.focusInnerControl();
+      });
+    }
+  }
+  /**
+   * Foca o controle interno: primeiro o HOST (com `delegatesFocus` o browser
+   * repassa ao controle interno) e, se nada for focado (ex.: ambientes sem
+   * delegatesFocus, como jsdom nos testes), o primeiro focável do shadow.
+   */
+  focusInnerControl() {
+    this.focus();
+    if (!this.root.activeElement) {
+      const first = this.root.querySelector(
+        'input, textarea, button, select, [tabindex]:not([tabindex="-1"])'
+      );
+      first?.focus();
+    }
+  }
+  /**
+   * Valor publicado no FormData. Sobrescreva quando o valor NÃO é o atributo
+   * `value` (checkbox/switch enviariam `value || 'on'` quando marcados,
+   * seleção múltipla enviaria várias entradas, fileupload enviaria arquivos).
+   */
+  getFormValue() {
+    return this.getAttr("value") || null;
+  }
+  /**
+   * Sincroniza o campo interno, publica name/value no form (ElementInternals)
+   * e emite `input` (v-model do Vue) + `valueChange` ([(value)] do Angular).
+   *
+   * Chame quando o valor mudar — junto do evento semântico (`change`,
+   * `select`, ...) que o componente já dispara. `detail` opcional complementa
+   * o payload (ex.: { start, end } do fx-datepicker).
+   */
+  emitValueEvents(detail) {
+    const value = this.getAttr("value");
+    this.syncInternalControl();
+    this.updateFormValue();
+    const payload = { value, ...detail };
+    for (const type of ["input", "valueChange"]) {
+      this.dispatchEvent(
+        new CustomEvent(type, { bubbles: true, composed: true, detail: payload })
+      );
+    }
+  }
+  /** Sincroniza name/value com o form (ElementInternals). */
+  updateFormValue() {
+    if (!this.internals || typeof this.internals.setFormValue !== "function") return;
+    this.internals.setFormValue(this.getFormValue());
+  }
+  /**
+   * <form disabled>/<fieldset disabled>: espelha no atributo `disabled`
+   * observado — o re-render desabilita o controle interno.
+   */
+  formDisabledCallback(disabled) {
+    if (disabled) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  /** form.reset(): restaura o valor inicial e sincroniza o campo interno. */
+  formResetCallback() {
+    this.setAttribute("value", this._initialValue);
+    this.syncInternalControl();
+    this.updateFormValue();
+  }
+  /**
+   * Hook: empurra o valor atual do atributo `value` para o controle interno
+   * SEM re-renderizar (componentes com campo nativo interno sobrescrevem).
+   */
+  syncInternalControl() {
+  }
+};
+_FxFormElement.formAssociated = true;
+_FxFormElement.shadowOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+let FxFormElement = _FxFormElement;
+export {
+  FxFormElement
+};
+//# sourceMappingURL=form-element.js.map

package/dist/core/form-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.js","sources":["../../src/core/form-element.ts"],"sourcesContent":["/**\n * Base dos componentes de formulário — Form-Associated Custom Element.\n *\n * Por que ela existe: um `<input>` interno do Shadow DOM **não se associa** ao\n * `<form>` do light DOM (a associação por árvore não cruza a fronteira do\n * shadow). Sem `formAssociated: true` + `ElementInternals`, o componente fica\n * invisível para o form: `new FormData(form)` não o inclui, Enter não submete,\n * `form.elements`/validação/`reset` não o enxergam e `<label for>` não o foca.\n *\n * O que esta base entrega:\n *  - `static formAssociated = true` → o HOST vira campo do form (entra em\n *    `form.elements`, `FormData`, `checkValidity`, `reset`, e é labelable);\n *  - `delegatesFocus: true` → `focus()`, `autofocus` e clique em\n *    `<label for=\"idDoHost\">` focam o controle interno;\n *  - `updateFormValue()` → publica `name`/`value` no form via `internals`;\n *  - `formDisabledCallback` → `<fieldset disabled>` desabilita o controle;\n *  - `formResetCallback` → `form.reset()` restaura o valor inicial;\n *  - getters nativos: `name`, `form`, `type`, `validity`, `labels`,\n *    `checkValidity()`, `reportValidity()`.\n */\n\nimport { FxElement } from './base';\n\nexport abstract class FxFormElement extends FxElement {\n  /** Participa de <form> como campo nativo (FormData, reset, validação, label). */\n  static formAssociated = true;\n  /** focus()/autofocus/<label for> atingem o controle interno do Shadow DOM. */\n  static override shadowOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  protected readonly internals: ElementInternals | null;\n  /** Valor do atributo `value` quando o componente entrou no form (reset). */\n  protected _initialValue = '';\n  private _initialCaptured = false;\n  private _autofocused = false;\n\n  constructor() {\n    super();\n    // Ambientes sem ElementInternals (ex.: jsdom nos testes) funcionam sem a\n    // integração nativa de form — tudo aqui é defensivo.\n    this.internals =\n      typeof this.attachInternals === 'function' ? this.attachInternals() : null;\n  }\n\n  /** Nome do campo no FormData (atributo `name`, como no nativo). */\n  get name(): string {\n    return this.getAttribute('name') ?? '';\n  }\n\n  /** Form ao qual o componente está associado (null se fora de um form). */\n  get form(): HTMLFormElement | null {\n    return (\n      this.internals?.form ?? (this.closest('form') as HTMLFormElement | null)\n    );\n  }\n\n  get type(): string {\n    return this.localName;\n  }\n\n  get willValidate(): boolean {\n    return this.internals?.willValidate ?? false;\n  }\n\n  get validity(): ValidityState | null {\n    return this.internals?.validity ?? null;\n  }\n\n  get validationMessage(): string {\n    return this.internals?.validationMessage ?? '';\n  }\n\n  get labels(): NodeList {\n    return this.internals?.labels ?? this.childNodes;\n  }\n\n  checkValidity(): boolean {\n    return this.internals?.checkValidity?.() ?? true;\n  }\n\n  reportValidity(): boolean {\n    return this.internals?.reportValidity?.() ?? true;\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback(); // render inicial\n    if (!this._initialCaptured) {\n      this._initialCaptured = true;\n      this._initialValue = this.getAttr('value');\n    }\n    this.updateFormValue();\n    // autofocus: nem todo browser foca form-associated custom elements (em\n    // especial dentro de shadow DOM do app consumidor) — garante aqui. O\n    // delegatesFocus leva o foco ao controle interno.\n    if (!this._autofocused && this.hasAttr('autofocus')) {\n      this._autofocused = true;\n      queueMicrotask(() => {\n        if (this.isConnected && this.hasAttr('autofocus')) this.focusInnerControl();\n      });\n    }\n  }\n\n  /**\n   * Foca o controle interno: primeiro o HOST (com `delegatesFocus` o browser\n   * repassa ao controle interno) e, se nada for focado (ex.: ambientes sem\n   * delegatesFocus, como jsdom nos testes), o primeiro focável do shadow.\n   */\n  private focusInnerControl(): void {\n    this.focus();\n    if (!this.root.activeElement) {\n      const first = this.root.querySelector<HTMLElement>(\n        'input, textarea, button, select, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      first?.focus();\n    }\n  }\n\n  /**\n   * Valor publicado no FormData. Sobrescreva quando o valor NÃO é o atributo\n   * `value` (checkbox/switch enviariam `value || 'on'` quando marcados,\n   * seleção múltipla enviaria várias entradas, fileupload enviaria arquivos).\n   */\n  protected getFormValue(): string | FormData | null {\n    return this.getAttr('value') || null;\n  }\n\n  /**\n   * Sincroniza o campo interno, publica name/value no form (ElementInternals)\n   * e emite `input` (v-model do Vue) + `valueChange` ([(value)] do Angular).\n   *\n   * Chame quando o valor mudar — junto do evento semântico (`change`,\n   * `select`, ...) que o componente já dispara. `detail` opcional complementa\n   * o payload (ex.: { start, end } do fx-datepicker).\n   */\n  protected emitValueEvents(detail?: Record<string, unknown>): void {\n    const value = this.getAttr('value');\n\n    // Empurra o valor para o controle interno SEM re-renderizar (hook —\n    // componentes com máscara/campo customizado sobrescrevem).\n    this.syncInternalControl();\n    this.updateFormValue();\n\n    const payload = { value, ...detail };\n    for (const type of ['input', 'valueChange'] as const) {\n      this.dispatchEvent(\n        new CustomEvent(type, { bubbles: true, composed: true, detail: payload }),\n      );\n    }\n  }\n\n  /** Sincroniza name/value com o form (ElementInternals). */\n  protected updateFormValue(): void {\n    if (!this.internals || typeof this.internals.setFormValue !== 'function') return;\n    this.internals.setFormValue(this.getFormValue());\n  }\n\n  /**\n   * <form disabled>/<fieldset disabled>: espelha no atributo `disabled`\n   * observado — o re-render desabilita o controle interno.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    if (disabled) this.setAttribute('disabled', '');\n    else this.removeAttribute('disabled');\n  }\n\n  /** form.reset(): restaura o valor inicial e sincroniza o campo interno. */\n  formResetCallback(): void {\n    this.setAttribute('value', this._initialValue);\n    this.syncInternalControl();\n    this.updateFormValue();\n  }\n\n  /**\n   * Hook: empurra o valor atual do atributo `value` para o controle interno\n   * SEM re-renderizar (componentes com campo nativo interno sobrescrevem).\n   */\n  protected syncInternalControl(): void {\n    /* opcional */\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/core/presets.d.ts

@@ -2,9 +2,15 @@
  * Presets de tema prontos para uso.
  *
  * Cada preset é um override parcial profundo sobre os tokens base.
- * Combina com o modo claro/escuro: `applyPreset('seiya', 'dark')`.
+ * Combina com o modo claro/escuro: `applyPreset('ikki', 'dark')`.
+ *
+ * `ikki` é o preset **padrão**: usa a identidade base (paleta indigo do tema
+ * claro/escuro) e apenas desliga o anel de foco. Os demais presets trazem
+ * paletas/raios próprios.
  */
 import { type DeepPartial, type FenixTokens } from './tokens';
+/** Nome do preset padrão (fallback de `applyPreset` e boot da documentação). */
+export declare const DEFAULT_PRESET = "ikki";
 export interface FenixPreset {
     /** Identificador usado em `applyPreset(name)`. */
     name: string;
@@ -14,12 +20,11 @@ export interface FenixPreset {
     tokens: DeepPartial<FenixTokens>;
 }
 export declare const themePresets: {
-    readonly fenix: FenixPreset;
+    readonly ikki: FenixPreset;
     readonly seiya: FenixPreset;
     readonly shiryu: FenixPreset;
     readonly hyoga: FenixPreset;
     readonly shun: FenixPreset;
-    readonly ikki: FenixPreset;
     readonly aiolia: FenixPreset;
 };
 /** Lista todos os presets registrados (inclui os customizados). */

package/dist/core/presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/core/presets.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,WAAW,WAAW;IAC1B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAClC;AAaD,eAAO,MAAM,YAAY;;;;;;;;CA8Ff,CAAC;AAEX,mEAAmE;AACnE,wBAAgB,WAAW,IAAI,WAAW,EAAE,CAE3C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,GAC/B,WAAW,CAEb;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,MAAM,EAClB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B;IAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAI7C"}
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/core/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,gFAAgF;AAChF,eAAO,MAAM,cAAc,SAAS,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAClC;AAaD,eAAO,MAAM,YAAY;;;;;;;CAiFf,CAAC;AAEX,mEAAmE;AACnE,wBAAgB,WAAW,IAAI,WAAW,EAAE,CAE3C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,GAC/B,WAAW,CAEb;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,MAAM,EAClB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B;IAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAK7C"}