@dnax/ui 0.0.53 → 0.0.54

package/components/QConfigProvider.vue

@@ -13,7 +13,7 @@ import QBottomSheetProvider from "./QBottomSheetProvider.vue"
 import QImagePreviewProvider from "./QImagePreviewProvider.vue"
 import { qConfigKey, qProvidersKey } from "../lib/config"
 import type { QAppLang, QConfigContext, QTheme, ThemeMode } from "../lib/config"
-import { isRadiusScale, RADIUS_VALUES } from "../lib/useComponentProps"
+import { themeVars } from "../lib/themeVars"
 
 interface Props {
   /**
@@ -119,40 +119,51 @@ watch(
 
 provide<QConfigContext>(qConfigKey, { theme: mergedTheme, isDark, lang })
 
+// — Dev : `componentProps` n'est PAS un spread de props — une clé non lue est ignorée
+// silencieusement (cf. `.memory/knowledges.md`). On le signale, une fois par clé.
+/** Clés de `componentProps.<Nom>` réellement lues, en plus du `radius` générique. */
+const EXTRA_COMPONENT_PROP_KEYS: Record<string, readonly string[]> = { QMap: ["apiKey"] }
+
+const IS_DEV = !!((import.meta as any).env?.DEV ?? (import.meta as any).dev)
+if (IS_DEV) {
+  const warned = new Set<string>()
+  watch(
+    mergedTheme,
+    (theme) => {
+      if (typeof document === "undefined") return // pas de bruit au SSR/build
+      for (const [name, entry] of Object.entries(theme.componentProps ?? {})) {
+        if (!entry || typeof entry !== "object") continue
+        const allowed = new Set<string>(["radius", ...(EXTRA_COMPONENT_PROP_KEYS[name] ?? [])])
+        const ignored = Object.keys(entry).filter((key) => !allowed.has(key))
+        if (!ignored.length) continue
+        const signature = `${name}:${ignored.join(",")}`
+        if (warned.has(signature)) continue
+        warned.add(signature)
+        console.warn(
+          `[dnax/ui] componentProps.${name} : clé(s) ignorée(s) → ${ignored.map((k) => `"${k}"`).join(", ")}.\n` +
+            `  Ces clés sont lues pour ${name} : ${[...allowed].map((k) => `"${k}"`).join(", ")}.\n` +
+            `  Pour une couleur/un fond, passez par theme.vars (ex. { "--q-field-bg": "#eef7ee" }) ou du CSS.`,
+        )
+      }
+    },
+    { immediate: true, deep: true },
+  )
+}
+
 // Providers intégrés ($q.dialog + $q.notify) : rendus UNE fois par le
 // QConfigProvider le plus externe (les imbriqués ne re-rendent pas → pas de doublons)
 const hasProviders = inject(qProvidersKey, false)
 provide(qProvidersKey, true)
 const isProvidersRoot = computed(() => !hasProviders)
 
-/** Calcule un foreground lisible (blanc ou sombre) pour un fond donné. */
-const textColorFor = (bg: string): string => {
-  let hex = bg.trim().replace(/^#/, "")
-  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("")
-  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff"
-  const r = parseInt(hex.slice(0, 2), 16)
-  const g = parseInt(hex.slice(2, 4), 16)
-  const b = parseInt(hex.slice(4, 6), 16)
-  const luminance = 0.299 * r + 0.587 * g + 0.114 * b
-  return luminance > 150 ? "#1d1d1d" : "#ffffff"
-}
-
-const themeStyle = computed<Record<string, string>>(() => {
-  const style: Record<string, string> = {
-    "color-scheme": isDark.value ? "dark" : "light",
-  }
-  for (const [token, value] of Object.entries(mergedTheme.value.colors ?? {})) {
-    if (!value) continue
-    style[`--${token}`] = value
-    style[`--${token}-foreground`] = textColorFor(value)
-  }
-  // Arrondi global : composantProps.default.radius → --q-radius hérité par TOUS
-  // les composants dont le CSS utilise var(--q-radius). Une prop/override
-  // spécifique (useRadius) pose son propre --q-radius inline et prime.
-  const global = mergedTheme.value.componentProps?.default?.radius
-  if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
-  return style
-})
+/**
+ * Variables CSS du thème : `color-scheme` + couleurs, `--q-radius` et `vars` libres
+ * (logique partagée avec les providers d'overlays téléportés, cf. `themeVars`).
+ */
+const themeStyle = computed<Record<string, string>>(() => ({
+  "color-scheme": isDark.value ? "dark" : "light",
+  ...themeVars(mergedTheme.value),
+}))
 
 // Thème GLOBAL (provider racine) : pose aussi les variables sur <html> — les
 // overlays téléportés au body (dialogs $q.dialog, …) perdent l'héritage du div

package/components/QSelect.vue

@@ -60,6 +60,7 @@ import { radiusStyle, radiusValue, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { createSearcher } from "../lib/search"
+import { optionsOf, selectionOf } from "../lib/select"
 
 interface Props {
   /** Valeur sélectionnée : option, valeur (emit-value), ou tableau (multiple) */
@@ -337,7 +338,9 @@ watch([popupPlacement, popupOffset], onPopupViewportChange)
 const isObjectOption = (o: any): boolean => o !== null && typeof o === "object"
 
 const normalizedOptions = computed<any[]>(() =>
-  props.options.map((o) => {
+  // `options` peut arriver `false` (v-if/&&, config non chargée) : sans garde,
+  // `props.options.map` jetait et l'option par défaut ne s'affichait plus.
+  optionsOf(props.options).map((o) => {
     if (isObjectOption(o)) return o
     // Objet normalisé : garde la valeur d'origine (non-énumérable → invisible
     // pour l'affichage, la recherche fuse et les clés de rendu)
@@ -361,8 +364,9 @@ const getOptionLabel = (opt: any): string => {
 
 // — Sélection (dérivée du modèle) —
 const selectedOptions = computed<any[]>(() => {
-  if (props.modelValue === undefined || props.modelValue === null) return []
-  const list = props.multiple ? (props.modelValue as any[]) : [props.modelValue]
+  // En `multiple`, un modèle scalaire (ex. `false`) ne doit PAS faire jeter `list.map`
+  // (tout le popup cessait de se rendre) : `selectionOf` le traite comme vide.
+  const list = selectionOf(props.modelValue, props.multiple)
   return list
     .map((v) => {
       if (props.emitValue) return normalizedOptions.value.find((o) => getOptionValue(o) === v)
@@ -417,7 +421,9 @@ const clear = () => {
 }
 
 const hasValue = computed(() =>
-  props.multiple ? (props.modelValue as any[])?.length > 0 : props.modelValue !== undefined && props.modelValue !== null,
+  props.multiple
+    ? Array.isArray(props.modelValue) && props.modelValue.length > 0
+    : props.modelValue !== undefined && props.modelValue !== null,
 )
 
 // — Recherche floue (fuse.js) —

package/lib/config.ts

@@ -24,6 +24,14 @@ export interface QTheme {
   lang?: QAppLang
   /** Props par défaut par composant (clé = nom du composant, ex. "QBtn") */
   componentProps?: Record<string, Record<string, unknown>>
+  /**
+   * Variables CSS libres posées avec le thème, puis héritées par tout le sous-arbre
+   * (overlays téléportés compris : dialogs, bottom sheets). Clé avec ou sans `--`
+   * (ex. `{ "q-field-bg": "#eef7ee" }`). Appliquées **en dernier**, elles peuvent donc
+   * surcharger les tokens de `colors`. Utile pour ce qu'aucun token ne couvre
+   * (ex. le fond des champs, cf. `--q-field-bg`).
+   */
+  vars?: Record<string, string>
 }
 
 export interface QConfigContext {

package/lib/qrcode.ts

@@ -1,11 +1,13 @@
-// qrcode — encodage QR et tracé SVG. Le moteur d'encodage est la dépendance `qrcode`
-// (déjà présente, sans types — cf. `shims.d.ts`) : elle fournit la matrice de modules, ce
-// module la traduit en **chemin SVG** (une suite de rectangles horizontaux, bien plus
-// compact qu'un carré par module) — d'où un rendu net à toutes les tailles, thémable et
-// rendable en SSR.
+// qrcode — encodage QR et tracé SVG. Le moteur d'encodage est `uqr` (ESM pur, sans
+// dépendance) : il fournit la matrice de modules, ce module la traduit en **chemin SVG**
+// (une suite de rectangles horizontaux, bien plus compact qu'un carré par module) — d'où
+// un rendu net à toutes les tailles, thémable et rendable en SSR.
+//
+// `uqr` est **ESM** (contrairement à l'ancien `qrcode`, CJS sans `default`, qui cassait le
+// bundle client — cf. `.memory/warnings.md`) : aucun interop esbuild, aucun `optimizeDeps`.
 //
 // Pur (aucun DOM) → testable hors navigateur, comme `lib/pagePadding.ts`.
-import QRCode from "qrcode"
+import { encode } from "uqr"
 
 /** Niveau de correction d'erreur : L (~7 %) → H (~30 %) */
 export type QrEcc = "L" | "M" | "Q" | "H"
@@ -39,10 +41,25 @@ export function encodeQr(value: string, options: QrEncodeOptions = {}): QrMatrix
   if (typeof value !== "string" || value === "") return undefined
 
   try {
-    const settings: Record<string, unknown> = { errorCorrectionLevel: options.ecc ?? "M" }
-    if (typeof options.version === "number") settings.version = options.version
+    const { size, data } = encode(value, {
+      ecc: options.ecc ?? "M",
+      // La zone de silence est gérée par dnax.ui (`margin`) : on demande la matrice nue.
+      border: 0,
+      // `uqr` raisonne en bornes de version, pas en version forcée.
+      ...(typeof options.version === "number"
+        ? { minVersion: options.version, maxVersion: options.version }
+        : {}),
+    })
+
+    // `uqr` renvoie un `boolean[][]` ; on l'aplatit au contrat `data[y * size + x]`
+    // (1 = module sombre) attendu par `isDark` et le tracé.
+    const flat = new Uint8Array(size * size)
+    let i = 0
+    for (const row of data) {
+      for (let x = 0; x < size; x++) flat[i++] = row[x] ? 1 : 0
+    }
 
-    return QRCode.create(value, settings).modules
+    return { size, data: flat }
   } catch {
     return undefined
   }

package/lib/select.test.ts

@@ -0,0 +1,42 @@
+// Tests unitaires des coercitions défensives de QSelect (`optionsOf` / `selectionOf`).
+// Régression : `multiple` + modèle scalaire (`false`) faisait jeter `list.map` et
+// empêchait le popup entier de se rendre.
+import { describe, expect, it } from "bun:test"
+import { optionsOf, selectionOf } from "./select"
+
+describe("optionsOf", () => {
+  it("laisse passer un tableau (même vide)", () => {
+    expect(optionsOf(["a", "b"])).toEqual(["a", "b"])
+    expect(optionsOf([])).toEqual([])
+  })
+
+  it("traite toute valeur non-tableau comme vide (au lieu de planter)", () => {
+    expect(optionsOf(false)).toEqual([])
+    expect(optionsOf(undefined)).toEqual([])
+    expect(optionsOf(null)).toEqual([])
+    expect(optionsOf("oops")).toEqual([])
+    expect(optionsOf({ value: 1 })).toEqual([])
+  })
+})
+
+describe("selectionOf", () => {
+  it("multiple : accepte un tableau", () => {
+    expect(selectionOf(["a", "b"], true)).toEqual(["a", "b"])
+    expect(selectionOf([], true)).toEqual([])
+  })
+
+  it("multiple + scalaire → rien de sélectionné (le bug d'origine : `false`)", () => {
+    expect(selectionOf(false, true)).toEqual([])
+    expect(selectionOf(true, true)).toEqual([])
+    expect(selectionOf("a", true)).toEqual([])
+    expect(selectionOf(0, true)).toEqual([])
+  })
+
+  it("simple : emballe la valeur, sauf null/undefined", () => {
+    expect(selectionOf("a", false)).toEqual(["a"])
+    expect(selectionOf(0, false)).toEqual([0])
+    expect(selectionOf(false, false)).toEqual([false])
+    expect(selectionOf(null, false)).toEqual([])
+    expect(selectionOf(undefined, false)).toEqual([])
+  })
+})

package/lib/select.ts

@@ -0,0 +1,29 @@
+// Coercitions défensives de QSelect (`lib/select.ts`).
+//
+// Un `v-model` ou des `options` mal formés ne doivent **jamais** casser le rendu : un
+// `list.map is not a function` dans un `computed` du template tue tout le popup, sans
+// message utile. Cas réel : `<q-select multiple v-model="x">` avec `x` initialisé à
+// `false` (défaut d'un `ref` booléen, retour d'un `&&`, config non chargée) — le garde
+// `=== null`/`=== undefined` ne l'attrape pas, puis `false.map(...)` jette.
+//
+// Pur (aucun DOM) → testable hors navigateur, comme `lib/pagePadding.ts`.
+
+/**
+ * Tableau des options. `options` doit être un tableau : toute autre valeur (ex. `false`,
+ * `0`, un objet isolé) est traitée comme **vide** plutôt que de faire planter
+ * `normalizedOptions`.
+ */
+export const optionsOf = (value: unknown): any[] => (Array.isArray(value) ? value : [])
+
+/**
+ * Tableau de sélection dérivé du `v-model` :
+ * - `null` / `undefined` → rien ;
+ * - `multiple` → le modèle **doit** être un tableau ; une valeur scalaire (ex. `false`)
+ *   vaut « rien de sélectionné » (et non une sélection de cette valeur) ;
+ * - mode simple → on emballe la valeur.
+ */
+export const selectionOf = (value: unknown, multiple: boolean): any[] => {
+  if (value === undefined || value === null) return []
+  if (multiple) return Array.isArray(value) ? value : []
+  return [value]
+}

package/lib/themeVars.test.ts

@@ -0,0 +1,42 @@
+// Tests unitaires des variables CSS du thème (`themeVars`) — partagées par
+// QConfigProvider et les providers d'overlays téléportés.
+import { describe, expect, it } from "bun:test"
+import { themeVars } from "./themeVars"
+
+describe("themeVars", () => {
+  it("expose les couleurs en `--token` + `--token-foreground`", () => {
+    const style = themeVars({ colors: { primary: "#1976d2" } })
+    expect(style["--primary"]).toBe("#1976d2")
+    // foreground lisible calculé (clair sur fond sombre)
+    expect(style["--primary-foreground"]).toBe("#ffffff")
+  })
+
+  it("traduit `componentProps.default.radius` en `--q-radius`", () => {
+    expect(themeVars({ componentProps: { default: { radius: "md" } } })["--q-radius"]).toBe("8px")
+  })
+
+  it("ignore un `default.radius` non-échelle (`true` = forme native)", () => {
+    expect(themeVars({ componentProps: { default: { radius: true } } })["--q-radius"]).toBeUndefined()
+  })
+
+  it("pose les `vars` libres, avec ou sans préfixe `--`", () => {
+    const style = themeVars({ vars: { "--q-field-bg": "#eef7ee", "q-field-bg-filled": "red" } })
+    expect(style["--q-field-bg"]).toBe("#eef7ee")
+    expect(style["--q-field-bg-filled"]).toBe("red")
+  })
+
+  it("donne le dernier mot aux `vars` sur les tokens de `colors`", () => {
+    const style = themeVars({ colors: { primary: "#111" }, vars: { "--primary": "#222" } })
+    expect(style["--primary"]).toBe("#222")
+  })
+
+  it("ignore les valeurs vides", () => {
+    const style = themeVars({ colors: { primary: "" }, vars: { "--x": "" } })
+    expect(style["--primary"]).toBeUndefined()
+    expect(style["--x"]).toBeUndefined()
+  })
+
+  it("renvoie un objet vide pour un thème vide", () => {
+    expect(themeVars({})).toEqual({})
+  })
+})

package/lib/themeVars.ts

@@ -1,22 +1,40 @@
-// themeVarsStyle — variables CSS du thème (couleurs + radius) pour les contenus
-// téléportés (dialogs, bottom sheets) qui sortent du div .q-config-provider.
+// themeVars — variables CSS du thème (couleurs, radius global, `vars` libres) pour les
+// contenus téléportés (dialogs, bottom sheets) qui sortent du div .q-config-provider.
 import { computed } from "vue"
 import type { ComputedRef } from "vue"
 import { contrastText } from "./colors"
 import { isRadiusScale, RADIUS_VALUES } from "./useComponentProps"
 import type { QTheme } from "./config"
 
-/** Computed des variables --token / --token-foreground / --q-radius du thème. */
+/**
+ * Variables CSS d'un thème : `--<token>` (+ `--<token>-foreground` calculé) pour
+ * `colors`, `--q-radius` pour `componentProps.default.radius`, puis les `vars` libres
+ * **en dernier** (elles ont le dernier mot). Pur → testable hors navigateur.
+ */
+export function themeVars(theme: QTheme): Record<string, string> {
+  const style: Record<string, string> = {}
+
+  for (const [token, value] of Object.entries(theme.colors ?? {})) {
+    if (!value) continue
+    style[`--${token}`] = value
+    style[`--${token}-foreground`] = contrastText(value)
+  }
+
+  // Arrondi global : hérité par TOUS les composants dont le CSS lit var(--q-radius).
+  // Une prop/override spécifique (`useRadius`) pose son propre --q-radius inline et prime.
+  const global = theme.componentProps?.default?.radius
+  if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
+
+  // Échappatoire : toute variable CSS, avec ou sans préfixe `--`.
+  for (const [name, value] of Object.entries(theme.vars ?? {})) {
+    if (!value) continue
+    style[name.startsWith("--") ? name : `--${name}`] = value
+  }
+
+  return style
+}
+
+/** Computed des variables du thème (cf. `themeVars`). */
 export function themeVarsStyle(theme: ComputedRef<QTheme>): ComputedRef<Record<string, string>> {
-  return computed(() => {
-    const style: Record<string, string> = {}
-    for (const [token, value] of Object.entries(theme.value.colors ?? {})) {
-      if (!value) continue
-      style[`--${token}`] = value
-      style[`--${token}-foreground`] = contrastText(value)
-    }
-    const global = theme.value.componentProps?.default?.radius
-    if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
-    return style
-  })
+  return computed(() => themeVars(theme.value))
 }

package/module.ts

@@ -50,6 +50,17 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
       })
     }
 
+    // Dépendances CJS sans export ESM `default` explicite : esbuild doit les pré-bundler
+    // (interop) sinon, servies brutes, le navigateur échoue sur « does not provide an
+    // export named 'default' ». `leaflet` (lib/mapLeaflet.ts) est dans ce cas ; le code
+    // tolère déjà les deux formes (`default ?? module`), ceci est une ceinture-bretelles
+    // côté hôte. Ne pas pointer une sous-entrée sur `index.ts` (cf. warnings en mémoire).
+    nuxt.hook("vite:extendConfig", (config) => {
+      const optimizeDeps = ((config as any).optimizeDeps ||= {})
+      const include: string[] = (optimizeDeps.include ||= [])
+      if (!include.includes("leaflet")) include.push("leaflet")
+    })
+
     // « Retour » navigateur → ferme l'overlay ouvert (dialog, sheet, sidebar…)
     // addPluginTemplate : le template est compilé dans l'app (où #imports existe),
     // évitant une dépendance `nuxt` dans ce package pour les types du plugin.

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
   "exports": {
     ".": "./index.ts",
-    "./runtime": "./index.ts",
+    "./registry": "./index.ts",
+    "./runtime": "./runtime.ts",
     "./module": "./module.ts",
     "./styles/main.css": "./styles/main.css"
   },
@@ -36,11 +37,11 @@
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.24.0",
     "moment": "^2.30.1",
-    "qrcode": "^1.5.4",
     "shiki": "^3.0.0",
     "swiper": "^14.2.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
+    "uqr": "^0.1.3",
     "uuid": "^14.0.2",
     "vue-router": "^5.3.0",
     "vue-sonner": "^2.0.9"

package/runtime.ts

@@ -0,0 +1,48 @@
+// runtime.ts — **surface runtime** consommée par les plugins (module Nuxt + plugins de
+// l'app hôte). Elle contient, et rien de plus :
+//   - l'API directive / overlay (`installOverlayBackHandler`, `v-close`, `v-ripple`,
+//     `v-touch-*`, `v-intersection`) ;
+//   - l'API impérative `$q` (composables `usePlugin` / `useDialogPluginComponent`…) ;
+//   - les **providers** de `$q` (dialog, bottom sheet, notify, loading, image preview),
+//     montés au boot par l'app hôte.
+//
+// ⚠️ Ne JAMAIS réexporter `index.ts` ici. Le barrel importe **tous** les composants et,
+// avec eux, leurs dépendances lourdes (echarts, @maptiler/sdk, swiper, shiki, uqr…) : une
+// sous-entrée qui pointe sur `index.ts` les évalue au boot, même si l'app n'utilise aucun
+// de ces composants. C'est tout l'intérêt de ce fichier — voir `.memory/warnings.md`.
+//
+// Pour *résoudre un composant par son nom* (tableaux d'API, docs), importer le barrel
+// `@dnax/ui` — pas cette entrée.
+export {
+  installOverlayBackHandler,
+  registerOverlay,
+  unregisterOverlay,
+  hasOpenOverlays,
+  closeTopmostOverlay,
+  useOverlayBack,
+} from "./lib/overlayBack"
+export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { vRipple } from "./lib/ripple"
+export { vTouchPan } from "./lib/touchPan"
+export { vTouchHold } from "./lib/touchHold"
+export { vTouchSwipe } from "./lib/touchSwipe"
+export { vTouchRepeat } from "./lib/touchRepeat"
+export { vIntersection } from "./lib/intersection"
+
+// — API impérative `$q` (composables) —
+export {
+  $q,
+  usePlugin,
+  useQ,
+  QPlugin,
+  useDialogPluginComponent,
+  useBottomSheetPluginComponent,
+} from "./lib/q"
+
+// — Providers de `$q` (montés au boot par l'app hôte) —
+export { default as QDialogProvider } from "./components/QDialogProvider.vue"
+export { default as QBottomSheetProvider } from "./components/QBottomSheetProvider.vue"
+export { default as QNotifyProvider } from "./components/QNotifyProvider.vue"
+export { default as QLoadingProvider } from "./components/QLoadingProvider.vue"
+export { default as QImagePreviewProvider } from "./components/QImagePreviewProvider.vue"

package/shims.d.ts

@@ -7,19 +7,13 @@ declare module "*.css?raw" {
 
 // Leaflet ne publie pas de types (ils vivent dans `@types/leaflet`, un paquet séparé) :
 // le moteur `lib/mapLeaflet.ts` le manipule donc en `any`, comme le SDK MapTiler.
+//
+// ⚠️ Ce `default` est une commodité de **typage** : au runtime `leaflet` est un UMD, sans
+// export ESM `default` garanti (selon la pré-bundlisation Vite). C'est pourquoi
+// `lib/mapLeaflet.ts` importe en **dynamique** puis prend `leaflet.default ?? leaflet` —
+// jamais un `import L from "leaflet"` statique (même piège que l'ancien `qrcode`, cf.
+// `.memory/warnings.md`).
 declare module "leaflet" {
   const leaflet: any
   export default leaflet
 }
-
-// Même situation pour `qrcode` (=`@types/qrcode` séparé) : seul `create()` est utilisé
-// (matrice de modules) — le rendu est fait par dnax.ui (`lib/qrcode.ts`).
-declare module "qrcode" {
-  const qrcode: {
-    create: (
-      text: string,
-      options?: { errorCorrectionLevel?: "L" | "M" | "Q" | "H"; version?: number },
-    ) => { modules: { size: number; data: ArrayLike<number> } }
-  }
-  export default qrcode
-}

package/styles/main.css

@@ -400,7 +400,7 @@ html.dark body {
 }
 
 .dark .q-field__control {
-  background-color: var(--muted);
+  background-color: var(--q-field-bg, var(--muted));
   border-color: var(--border);
   color: var(--foreground);
 }
@@ -2021,7 +2021,11 @@ html.dark body {
   gap: 6px;
   min-height: 40px;
   padding: 0 12px;
-  background-color: #fff;
+  /* Fond du champ, partagé par TOUS les champs (QInput, QSelect, QAutocomplete,
+     QDatePicker, QCountryPicker, QInputTag, QInputOtp…). Surchargeable globalement via
+     `--q-field-bg` (héritée par le sous-arbre) — `theme.vars: { "--q-field-bg": "…" }` —
+     ou localement par CSS. La variante `filled` lit `--q-field-bg-filled`. */
+  background-color: var(--q-field-bg, #fff);
   border: 1px solid rgb(0 0 0 / 0.22);
   border-radius: var(--q-radius);
   transition:
@@ -2031,18 +2035,18 @@ html.dark body {
 }
 
 .q-field--outlined .q-field__control {
-  background-color: transparent;
+  background-color: var(--q-field-bg, transparent);
 }
 
 .q-field--filled .q-field__control {
-  background-color: rgb(0 0 0 / 0.05);
+  background-color: var(--q-field-bg-filled, rgb(0 0 0 / 0.05));
   border-color: transparent;
   border-bottom: 1px solid rgb(0 0 0 / 0.3);
   border-radius: var(--q-radius) var(--q-radius) 0 0;
 }
 
 .q-field--borderless .q-field__control {
-  background-color: transparent;
+  background-color: var(--q-field-bg, transparent);
   border-color: transparent;
 }