@wrrdev/fenix-ui 1.1.6 → 1.1.7

package/dist/fenix-ui4.esm.js

@@ -53,7 +53,15 @@ const lightTokens = {
     /** '0' desativa o efeito ripple do botão. */
     ripple: "1",
     /** Anel de foco dos campos de formulário. Use 'none' para campos sem sobra. */
-    "focus-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)"
+    "focus-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)",
+    /**
+     * Brilho dos estados `error`/`invalid`. Acompanha `focus-ring`: quando o
+     * anel de foco está desligado, `applyTokens` força 'none' — o erro segue
+     * visível pela borda (border-color) e pela mensagem, mas sem o anel.
+     */
+    "error-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent)",
+    /** Brilho dos estados `success`/`valid` — acompanha `focus-ring` igualmente. */
+    "success-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent)"
   },
   z: { base: "auto", dropdown: "1000", modal: "1100", toast: "1200" }
 };
@@ -113,6 +121,7 @@ function tokenCssVars(tokens) {
 function applyTokens(themeName, overrides, target = document.documentElement) {
   const base = themeName === "dark" ? darkTokens : defaultTokens;
   const finalTokens = deepMerge(base, overrides);
+  syncValidationRings(finalTokens, overrides);
   const vars = tokenCssVars(finalTokens);
   for (const [name, value] of Object.entries(vars)) {
     target.style.setProperty(name, value);
@@ -121,6 +130,17 @@ function applyTokens(themeName, overrides, target = document.documentElement) {
     window.dispatchEvent(new CustomEvent("fenix:theme", { detail: { theme: themeName, tokens: finalTokens } }));
   }
 }
+const RING_OFF_VALUES = /* @__PURE__ */ new Set(["", "none", "0", "unset", "initial"]);
+function syncValidationRings(tokens, overrides) {
+  const focusRing = String(tokens.effect["focus-ring"] ?? "").trim();
+  if (!RING_OFF_VALUES.has(focusRing)) return;
+  const explicit = (key2) => Boolean(overrides?.effect && Object.prototype.hasOwnProperty.call(overrides.effect, key2));
+  tokens.effect = {
+    ...tokens.effect,
+    "error-ring": explicit("error-ring") ? tokens.effect["error-ring"] : "none",
+    "success-ring": explicit("success-ring") ? tokens.effect["success-ring"] : "none"
+  };
+}
 function configure(options = {}, target = document.documentElement) {
   if (options.theme) activeTheme = options.theme;
   if (options.tokens) activeOverrides = options.tokens;
@@ -419,7 +439,9 @@ _FxButton.styles = css`
       font-size: var(--fx-font-size);
       font-weight: var(--fx-font-weight);
       line-height: var(--fx-font-line-height);
-      padding: var(--fx-space-md) var(--fx-space-xl);
+      /* Padding vertical limitado ao orçamento do token --fx-size-*: a altura
+         fica EXATAMENTE em sm 32 / md 40 / lg 48 (mesma medida dos campos). */
+      padding: var(--fx-space-sm) var(--fx-space-xl);
       border-radius: var(--fx-radius-md);
       border: 1px solid transparent;
       color: #fff;
@@ -442,8 +464,8 @@ _FxButton.styles = css`
 
     /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */
     .btn { min-height: var(--fx-size-md); }
-    :host([size='sm']) .btn { padding: var(--fx-space-sm) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
-    :host([size='lg']) .btn { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
+    :host([size='sm']) .btn { padding: var(--fx-space-xs) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
+    :host([size='lg']) .btn { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
 
     /* Full width */
     :host([full]) .btn { width: 100%; }
@@ -781,6 +803,9 @@ _FxSelect.styles = css`
       /* Acompanha a largura definida no :host. */
       width: 100%;
       font: inherit;
+      /* Altura/linha determinísticas: a caixa fica no token --fx-size-*
+         (o line-height fixo impede que a herança da página estoure o min-height). */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       text-align: left;
@@ -808,28 +833,31 @@ _FxSelect.styles = css`
     :host([full]) { min-width: 0; }
     :host([full]) .trigger { width: 100%; min-width: 0; }
     :host([full]) .panel { width: 100%; }
-        /* Validação */
+        /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o
+           brilho segue --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .trigger:focus-visible,
     :host([invalid]) .trigger:focus-visible,
     :host([error][open]) .trigger,
     :host([invalid][open]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .trigger,
     :host([valid]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .trigger:focus-visible,
     :host([valid]) .trigger:focus-visible,
     :host([success][open]) .trigger,
     :host([valid][open]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([disabled]) .trigger,
     .trigger[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; background-color: var(--fx-surface-surface-hover); }
@@ -1036,13 +1064,17 @@ _FxInput.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: com line-height fixo, o padding vertical cabe no
+         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão
+         (sm 32 / md 40 / lg 48), igual para todos os campos. */
+      line-height: var(--fx-font-line-height);
       min-height: var(--fx-size-md);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       /* Acompanha a largura definida no :host. */
       width: 100%;
       box-sizing: border-box;
@@ -1063,25 +1095,27 @@ _FxInput.styles = css`
       cursor: not-allowed;
       background-color: var(--fx-surface-surface-hover);
     }
-    /* Validação: sobrescrevem a borda/foco via token do preset. */
+    /* Validação: borda sempre; o brilho (anel) segue o token do preset
+       --fx-effect-error-ring, que acompanha effect.focus-ring — anel
+       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */
     :host([error]) .field,
     :host([invalid]) .field,
     :host([error]) .field:focus-visible,
     :host([invalid]) .field:focus-visible {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field,
     :host([success]) .field:focus-visible,
     :host([valid]) .field:focus-visible {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }
-    :host([size='sm']) .field { padding: var(--fx-space-sm) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
+    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
     :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }
-    :host([size='lg']) .field { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
+    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
     /* Full width: o host estica até o pai e o campo interno acompanha
        (usar com um container de largura controlada, ex. w-full no Vue). */
     :host([full]) { display: block; width: 100%; }
@@ -1475,6 +1509,8 @@ _FxMultiselect.styles = css`
       min-height: var(--fx-size-md);
       padding: var(--fx-space-xs) var(--fx-space-md);
       font: inherit;
+      /* Altura determinística: a caixa fica no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -1500,28 +1536,31 @@ _FxMultiselect.styles = css`
     /* Full width: o host estica até o pai e o trigger acompanha. */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .trigger { width: 100%; }
-    /* Validação */
+    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho
+       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .trigger:focus-visible,
     :host([invalid]) .trigger:focus-visible,
     :host([error][open]) .trigger,
     :host([invalid][open]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .trigger,
     :host([valid]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .trigger:focus-visible,
     :host([valid]) .trigger:focus-visible,
     :host([success][open]) .trigger,
     :host([valid][open]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .trigger:hover { border-color: var(--fx-border-hover); }
     .trigger:focus-visible {
@@ -2423,6 +2462,8 @@ _FxDatepicker.styles = css`
       min-height: var(--fx-size-md, 40px);
       min-width: 150px;
       padding: var(--fx-space-xs) var(--fx-space-md);
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
@@ -2431,9 +2472,9 @@ _FxDatepicker.styles = css`
         border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
         box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
     }
-    :host([size='sm']) .field { min-height: 32px; min-width: 180px; }
-    :host([size='md']) .field { min-height: 40px; }
-    :host([size='lg']) .field { min-height: 48px; min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); min-width: 180px; }
+    :host([size='md']) .field { min-height: var(--fx-size-md); }
+    :host([size='lg']) .field { min-height: var(--fx-size-lg); min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }
     /* Range e multiple exibem mais de uma data: campo mais largo */
     :host([mode='range']) .field { min-width: 250px; }
     :host([mode='multiple']) .field { min-width: 220px; }
@@ -2444,28 +2485,31 @@ _FxDatepicker.styles = css`
        descartados para permitir layouts estreitos sob controle do pai). */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .field { min-width: 0; }
-    /* Validação */
+    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho
+       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .field,
     :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .field:focus-within,
     :host([invalid]) .field:focus-within,
     :host([error][open]) .field,
     :host([invalid][open]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .field:focus-within,
     :host([valid]) .field:focus-within,
     :host([success][open]) .field,
     :host([valid][open]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .field:hover { border-color: var(--fx-border-hover); }
     .field:focus-within {
@@ -4140,6 +4184,8 @@ _FxTextarea.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
@@ -4168,16 +4214,18 @@ _FxTextarea.styles = css`
       cursor: not-allowed;
       background-color: var(--fx-surface-surface-hover);
     }
+    /* Validação: borda sempre; brilho (anel) via token que acompanha
+       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */
     :host([error]) .field, :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field, :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([size='sm']) { width: var(--fx-textarea-width-sm, 220px); }
-    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }
     :host([size='lg']) { width: var(--fx-textarea-width-lg, 300px); }
     :host([size='lg']) .field { min-height: calc(var(--fx-size-lg) + 80px); }
     /* Full width: o host estica até o pai e o campo interno acompanha. */
@@ -4824,10 +4872,12 @@ _FxFileUpload.styles = css`
          o botão sem precisar do full (host é shrink-to-fit por padrão). */
       width: 100%;
       min-height: var(--fx-size-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      /* Padding vertical no orçamento do token --fx-size-* ⇒ altura padrão. */
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       font-family: inherit;
       font-size: inherit;
       font-weight: var(--fx-font-weight);
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -4854,8 +4904,8 @@ _FxFileUpload.styles = css`
     :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }
     :host([severity]) .btn:hover { filter: brightness(0.88); }
     :host([severity]) .btn:focus-visible { border-color: transparent; }
-    :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); }
-    :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); }
+    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }
     :host([size='sm']) .drop { min-height: 72px; }
     :host([size='lg']) .drop { min-height: 132px; }
 
@@ -6303,6 +6353,8 @@ _FxToggleButtonGroup.styles = css`
       min-height: var(--fx-size-md);
       padding: var(--fx-space-sm) var(--fx-space-lg);
       font-weight: var(--fx-font-weight);
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -6312,7 +6364,7 @@ _FxToggleButtonGroup.styles = css`
       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);
     }
     :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); }
-    :host([size='lg']) .option { min-height: var(--fx-size-lg); padding: var(--fx-space-md) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 2px); }
+    :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); }
     .option:hover { border-color: var(--fx-color-primary); }
     .option.active {
       background: var(--fx-color-primary);
@@ -8515,12 +8567,14 @@ _FxAutocomplete.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       /* Acompanha a largura definida no :host. */
       width: 100%;
       min-height: var(--fx-size-md);
@@ -8537,22 +8591,23 @@ _FxAutocomplete.styles = css`
       box-shadow: var(--fx-effect-focus-ring, none);
     }
     :host([size='sm']) { width: var(--fx-autocomplete-width-sm, 220px); }
-    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }
     :host([size='lg']) { width: var(--fx-autocomplete-width-lg, 300px); }
-    :host([size='lg']) .field { min-height: var(--fx-size-lg); }
+    :host([size='lg']) .field { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-lg); }
     /* Full width: o host estica até o pai e o campo interno acompanha. */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .field { width: 100%; }
-    /* Validação: sobrescrevem a borda/foco via token do preset. */
+    /* Validação: borda sempre; brilho (anel) via token que acompanha
+       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */
     :host([error]) .field,
     :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .list {
       position: absolute;
@@ -8909,7 +8964,9 @@ _FxKnob.styles = css`
       outline: none;
     }
     .knob:focus-visible svg {
-      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));
+      /* Mesmo fallback none dos demais componentes: sem motor de tema (ou com
+         effect.focus-ring desligado) não há anel de foco. */
+      filter: drop-shadow(var(--fx-effect-focus-ring, none));
     }
   `;
 let FxKnob = _FxKnob;
@@ -9515,7 +9572,7 @@ _FxOrderList.styles = css`
     .select-all-bar input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }
     .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }
     .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 14px center; transition: var(--orderlist-transition); }
-    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }
+    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }
     .filter-input::placeholder { color: var(--orderlist-text-muted); }
     .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }
     .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }
@@ -9558,7 +9615,7 @@ _FxOrderList.styles = css`
     button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }
     button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }
     button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }
-    button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }
+    button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }
     button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
     .control-btn-icon { font-size: 18px; line-height: 1; }
     /* Tooltip nos botoes */
@@ -10169,7 +10226,7 @@ _FxPickList.styles = css`
     .filter-input:focus {
       outline: none;
       border-color: var(--picklist-primary);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 20%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     .filter-input::placeholder {
       color: var(--picklist-text-muted);
@@ -10266,7 +10323,7 @@ _FxPickList.styles = css`
     }
     button.control-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 30%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     button.control-btn:disabled {
       opacity: 0.3;