@dnax/ui 0.0.61 → 0.0.63

package/components/QBottomSheetHeader.vue

@@ -56,6 +56,14 @@ const hasCustomContent = computed(() => {
   return slotHasContent(slots.default?.() ?? [])
 })
 const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
+
+// Une **description** (prop ou slot) rend le bloc titre+description plus haut : la toolbar
+// (min-height 50px, `align-items: center`) collait le titre au bord haut. Le titre reçoit
+// alors un peu de `padding-top` (cf. `.q-bottom-sheet__header-text--with-description`).
+const hasDescription = computed(() => {
+  void refresh.value
+  return !!props.description || slotHasContent(slots.description?.() ?? [])
+})
 </script>
 
 <template>
@@ -67,7 +75,10 @@ const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
     <slot v-if="useCustom" />
 
     <q-toolbar v-else>
-      <div class="q-bottom-sheet__header-text">
+      <div
+        class="q-bottom-sheet__header-text"
+        :class="{ 'q-bottom-sheet__header-text--with-description': hasDescription }"
+      >
         <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
         <slot name="title" />
         <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>

package/components/QCollapse.vue

@@ -23,6 +23,11 @@ interface Props {
   iconRight?: string
   /** Icône Iconify du chevron (défaut : lucide:chevron-down) */
   expandIcon?: string
+  /**
+   * **Guide vertical** à gauche du contenu (« tirets longs »), aligné sous l'icône du header —
+   * pour une arborescence (groupe + enfants). Suit le thème (`--border`).
+   */
+  guide?: boolean
   headerClass?: string
   /** Hauteur réduite */
   dense?: boolean
@@ -32,6 +37,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   defaultOpened: false,
+  guide: false,
   dense: false,
   disable: false,
   headerClass: "",
@@ -98,7 +104,7 @@ onMounted(measure)
 </script>
 
 <template>
-  <div class="q-collapse">
+  <div class="q-collapse" :class="{ 'q-collapse--guide': guide }">
     <button
       type="button"
       class="q-collapse__header"

package/components/QDialogHeader.vue

@@ -64,6 +64,14 @@ const hasCustomContent = computed(() => {
   return slotHasContent(slots.default?.() ?? [])
 })
 const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
+
+// Une **description** (prop ou slot) rend le bloc titre+description plus haut : la toolbar
+// (min-height 50px, `align-items: center`) collait le titre au bord haut. Le titre reçoit
+// alors un peu de `padding-top` (cf. `.q-dialog__header-text--with-description`).
+const hasDescription = computed(() => {
+  void refresh.value
+  return !!props.description || slotHasContent(slots.description?.() ?? [])
+})
 </script>
 
 <template>
@@ -77,7 +85,10 @@ const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
 
     <!-- Mode standard : toolbar embarqué (title / description / close) -->
     <q-toolbar v-else>
-      <div class="q-dialog__header-text">
+      <div
+        class="q-dialog__header-text"
+        :class="{ 'q-dialog__header-text--with-description': hasDescription }"
+      >
         <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
         <slot name="title" />
         <p v-if="description" class="q-dialog__description">{{ description }}</p>

package/components/QFooter.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 // QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
-import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue"
+import { computed, inject, onBeforeUnmount, onMounted, ref, watchEffect } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
-import { qLayoutKey } from "../lib/layout"
+import { barPin, qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Fixe la barre en bas de l'écran (sort du flux) */
   fixed?: boolean
-  /** Colle la barre en bas pendant le scroll (automatique dans un QLayout avec une lettre majuscule) */
+  /**
+   * Colle la barre **en fin de page** (rangée basse du grid). Dans le modèle scroll-document,
+   * la footer étant la **dernière rangée**, `F`/`f` sont **équivalents** et ce `sticky` n'a
+   * **pas d'effet visible**. Pour **épingler** la barre à l'écran, utiliser `fixed`.
+   */
   sticky?: boolean
   /** Ombre portée vers le haut */
   elevated?: boolean
@@ -38,11 +42,28 @@ const rootEl = ref<HTMLElement | null>(null)
 // par la casse de la lettre (F).
 const layout = inject(qLayoutKey, null)
 const zone = computed(() => layout?.zones.value.footer)
-const isSticky = computed(() => props.sticky || !!zone.value?.fixed)
+// Épinglage vs collage : contrat centralisé dans `barPin` (la lettre `F` ne fait que « coller »,
+// sans effet visible sur la dernière rangée).
+const pin = computed(() => barPin(props, !!zone.value?.fixed))
+const isSticky = computed(() => pin.value.sticky)
 const layoutStyle = computed<Record<string, string | undefined>>(() => ({
   gridArea: zone.value?.area,
 }))
 
+// Un `view` qui contient `F` (majuscule) laisse croire à un épinglage : la classe sticky est
+// posée mais reste **sans effet visible**. On le dit une fois plutôt que de le faire taire.
+let warnedNoopSticky = false
+watchEffect(() => {
+  if (warnedNoopSticky) return
+  if (zone.value?.fixed && !props.fixed) {
+    warnedNoopSticky = true
+    console.warn(
+      '[q-footer] `view` "…F…" rend la footer *sticky*, sans effet visible ' +
+        '(dernière rangée du grid + scroll document). Pour épingler : <q-footer fixed>.',
+    )
+  }
+})
+
 // Empilement : bottom = hauteur cumulée des footers fixed suivants (si fixed)
 useFixedBarOffset(rootEl, "bar-bottom", () => props.fixed)
 
@@ -80,7 +101,7 @@ onBeforeUnmount(() => {
     ref="rootEl"
     class="q-footer"
     :class="{
-      'q-footer--fixed': fixed,
+      'q-footer--fixed': pin.fixed,
       'q-footer--sticky': isSticky,
       'q-footer--elevated': props.elevated,
       'q-footer--bordered': props.bordered,

package/components/QHeader.vue

@@ -5,7 +5,7 @@
 // barre se décale sous la précédente automatiquement.
 import { computed, inject, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
-import { qLayoutKey } from "../lib/layout"
+import { barPin, qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Fixe la barre en haut de l'écran (sort du flux) */
@@ -29,7 +29,9 @@ const rootEl = ref<HTMLElement | null>(null)
 // par la casse de la lettre (H) — la barre reste alors close dans sa cellule.
 const layout = inject(qLayoutKey, null)
 const zone = computed(() => layout?.zones.value.header)
-const isSticky = computed(() => props.sticky || !!zone.value?.fixed)
+// Même contrat que la footer : seule la prop `fixed` épingle ; la casse `H`/`F` « colle ».
+const pin = computed(() => barPin(props, !!zone.value?.fixed))
+const isSticky = computed(() => pin.value.sticky)
 const layoutStyle = computed<Record<string, string | undefined>>(() => ({
   gridArea: zone.value?.area,
 }))
@@ -49,7 +51,7 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
     ref="rootEl"
     class="q-header"
     :class="{
-      'q-header--fixed': fixed,
+      'q-header--fixed': pin.fixed,
       'q-header--sticky': isSticky,
       'q-header--translucent': translucent === true || typeof translucent === 'number',
       'q-header--glass': glass,

package/components/QSelect.vue

@@ -60,7 +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"
+import { optionsOf, selectionOf, shouldClearSearchOnClose } from "../lib/select"
 
 interface Props {
   /** Valeur sélectionnée : option, valeur (emit-value), ou tableau (multiple) */
@@ -112,6 +112,12 @@ interface Props {
   useSearch?: boolean | UseSearchOptions
   /** Placeholder du champ de recherche (useSearch) */
   searchPlaceholder?: string
+  /**
+   * Efface la recherche saisie à la **fermeture sans sélection** (clic extérieur, backdrop,
+   * Échap, ×). **Désactivé par défaut** : la recherche est conservée et réaffichée à la
+   * réouverture. Même activé, elle n'est effacée qu'en l'absence de valeur sélectionnée.
+   */
+  clearSearchOnClose?: boolean
   /** Mode d'ouverture : inline (dropdown) | modal (centré) | sheet (bottom sheet) | dialog (plein écran) */
   mode?: "inline" | "modal" | "sheet" | "dialog"
   /** Largeur du panneau (modal/sheet) : "300px", "80%"… (par défaut : modal 480px / 90% si écran < 768px, sheet 640px) */
@@ -164,6 +170,8 @@ const props = withDefaults(defineProps<Props>(), {
   mode: "inline",
   offset: 8,
   position: "auto",
+  // Comportement de "reset" de la recherche à la fermeture : **désactivé par défaut**
+  clearSearchOnClose: false,
 })
 
 const emit = defineEmits<{
@@ -532,9 +540,10 @@ const openPopup = () => {
 
 const closePopup = () => {
   open.value = false
-  // Fermeture sans sélection (clic extérieur, backdrop, Échap, ×) : on abandonne la
-  // recherche saisie pour ne pas laisser un filtre fantôme au prochain affichage.
-  if (query.value !== "" && !hasValue.value) {
+  // Fermeture sans sélection (clic extérieur, backdrop, Échap, ×) : la recherche est
+  // **conservée par défaut** (opt-in via `clearSearchOnClose`) — le filtre ne "disparaît"
+  // donc plus tout seul à la réouverture (cf. `shouldClearSearchOnClose`).
+  if (shouldClearSearchOnClose(props.clearSearchOnClose, query.value, hasValue.value)) {
     query.value = ""
     emit("update:inputValue", "")
   }

package/lib/layout.test.ts

@@ -1,6 +1,6 @@
 // Tests unitaires de l'analyse du prop `view` de QLayout (matrice 3×3).
 import { describe, expect, it } from "bun:test"
-import { DEFAULT_LAYOUT_VIEW, parseView } from "./layout"
+import { barPin, DEFAULT_LAYOUT_VIEW, parseView } from "./layout"
 
 describe("parseView", () => {
   it("applique la vue par défaut sans argument", () => {
@@ -123,3 +123,28 @@ describe("parseView", () => {
     expect(v.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
   })
 })
+
+describe("barPin — contrat header / footer", () => {
+  it("seule la prop `fixed` épingle (position: fixed)", () => {
+    expect(barPin({}, false)).toEqual({ fixed: false, sticky: false })
+    expect(barPin({ fixed: true }, false)).toEqual({ fixed: true, sticky: false })
+    expect(barPin({ fixed: false }, true)).toEqual({ fixed: false, sticky: true })
+  })
+
+  it("la prop `sticky` colle (position: sticky)", () => {
+    expect(barPin({ sticky: true }, false)).toEqual({ fixed: false, sticky: true })
+  })
+
+  it("la casse F/H de la zone colle, mais n'épingle JAMAIS", () => {
+    // `view="hHh LpR fFf"` : la zone footer est « fixed » au sens du parsing…
+    const zoneFixed = parseView("hHh LpR fFf").zones.footer.fixed
+    expect(zoneFixed).toBe(true)
+    // …et pourtant la barre ne doit PAS devenir `position: fixed` : seulement `sticky`
+    // (sans effet visible sur la dernière rangée du grid).
+    expect(barPin({}, zoneFixed)).toEqual({ fixed: false, sticky: true })
+  })
+
+  it("`fixed` l'emporte : épinglé et collé sont indépendants", () => {
+    expect(barPin({ fixed: true, sticky: true }, true)).toEqual({ fixed: true, sticky: true })
+  })
+})

package/lib/layout.ts

@@ -179,3 +179,24 @@ export function parseView(view?: string): LayoutView {
   }
   return parsed
 }
+
+/**
+ * Position d'une **barre** (`q-header` / `q-footer`) dans le modèle scroll-document :
+ * - **`fixed`** — *épinglée* (`position: fixed`), hors flux : **décidée par la seule prop
+ *   `fixed`** ;
+ * - **`sticky`** — *collée* (`position: sticky`) : la prop `sticky` **ou** la casse `F`/`H`
+ *   de la zone.
+ *
+ * ⚠️ **Contrat (ne pas inverser)** : pour la **footer**, la lettre `F` produit bien
+ * `sticky`, mais `position: sticky; bottom: 0` sur la **dernière rangée** du grid est
+ * **sans effet visible** (la barre tombe déjà en fin de page) — contrairement à `H` sur le
+ * header, qui reste collé en haut. Un `F` **minuscule ou majuscule** est donc équivalent.
+ * `zoneFixed` ne doit **jamais** être traduit en `fixed` : ce serait un changement de
+ * sémantique *breaking* (le contenu passerait sous la barre). Seul `fixed` épingle.
+ */
+export function barPin(
+  props: { fixed?: boolean; sticky?: boolean },
+  zoneFixed: boolean,
+): { fixed: boolean; sticky: boolean } {
+  return { fixed: props.fixed === true, sticky: props.sticky === true || zoneFixed }
+}

package/lib/select.test.ts

@@ -2,7 +2,7 @@
 // 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"
+import { optionsOf, selectionOf, shouldClearSearchOnClose } from "./select"
 
 describe("optionsOf", () => {
   it("laisse passer un tableau (même vide)", () => {
@@ -40,3 +40,17 @@ describe("selectionOf", () => {
     expect(selectionOf(undefined, false)).toEqual([])
   })
 })
+
+describe("shouldClearSearchOnClose", () => {
+  it("désactivé (défaut) → la recherche est CONSERVÉE", () => {
+    expect(shouldClearSearchOnClose(false, "ada", false)).toBe(false)
+    expect(shouldClearSearchOnClose(false, "ada", true)).toBe(false)
+    expect(shouldClearSearchOnClose(false, "", false)).toBe(false)
+  })
+
+  it("activé → efface seulement si une recherche est saisie et aucune valeur choisie", () => {
+    expect(shouldClearSearchOnClose(true, "ada", false)).toBe(true)
+    expect(shouldClearSearchOnClose(true, "", false)).toBe(false) // rien à effacer
+    expect(shouldClearSearchOnClose(true, "ada", true)).toBe(false) // valeur choisie → label
+  })
+})

package/lib/select.ts

@@ -28,3 +28,18 @@ export const selectionOf = (value: unknown, multiple: boolean): any[] => {
   if (multiple) return Array.isArray(value) ? value : []
   return [value]
 }
+
+/**
+ * La recherche saisie doit-elle être **effacée** à la fermeture du panneau (clic extérieur,
+ * backdrop, Échap, ×) ?
+ *
+ * **Opt-in** (prop `clearSearchOnClose`, désactivée par défaut) : par défaut la recherche est
+ * **conservée** — un `inputValue` vidé à la fermeture n'est pas toujours souhaité (formulaire
+ * qui reprend la saisie, filtre persistant…). Même sous opt-in, on n'efface que s'il n'y a **pas**
+ * de valeur : sinon le champ d'affichage reprendrait le label et la recherche n'aurait plus cours.
+ */
+export const shouldClearSearchOnClose = (
+  enabled: boolean,
+  query: string,
+  hasValue: boolean,
+): boolean => enabled && query !== "" && !hasValue

package/lib/styleTokens.test.ts

@@ -0,0 +1,165 @@
+// Contrat des **styles** (`styles/main.css` et les composants) :
+//  1. tokens de thème (couche `@layer dnax-tokens`) — voir plus bas ;
+//  2. classes de style **partagées** entre un composant et la feuille : une divergence des deux
+//     côtés (classe renommée d'un seul côté) est un échec **silencieux** — aucune erreur, juste
+//     un style qui ne s'applique plus.
+//
+// Test de contenu de fichier : la seule vérification possible sans navigateur (règle projet).
+import { describe, expect, it } from "bun:test"
+
+const css = await Bun.file(new URL("../styles/main.css", import.meta.url)).text()
+
+/** Contenu d'un bloc `selector { … }` (accolades équilibrées), à partir de `from`. */
+function blockAfter(source: string, selector: string, from = 0): string | undefined {
+  const at = source.indexOf(selector, from)
+  if (at === -1) return undefined
+  const open = source.indexOf("{", at)
+  if (open === -1) return undefined
+  let depth = 0
+  for (let i = open; i < source.length; i++) {
+    if (source[i] === "{") depth++
+    else if (source[i] === "}") {
+      depth--
+      if (depth === 0) return source.slice(open + 1, i)
+    }
+  }
+  return undefined
+}
+
+/** Propriétés personnalisées (`--x:`) déclarées dans un bloc. */
+function tokensOf(block: string): Set<string> {
+  const out = new Set<string>()
+  for (const m of block.matchAll(/(--[\w-]+)\s*:/g)) out.add(m[1]!)
+  return out
+}
+
+const tokensLayerAt = css.indexOf("@layer dnax-tokens")
+const lightBlock = blockAfter(css, ":root", tokensLayerAt)
+const darkBlock = blockAfter(css, ".dark", tokensLayerAt)
+
+/** Tokens sémantiques (surfaces + texte) — doivent exister dans les deux thèmes. */
+const SEMANTIC = ["--background", "--foreground", "--card", "--muted", "--muted-foreground", "--border"]
+
+describe("tokens de thème (clair / sombre)", () => {
+  it("la couche @layer dnax-tokens contient les deux thèmes", () => {
+    expect(tokensLayerAt).toBeGreaterThan(-1)
+    expect(lightBlock).toBeDefined()
+    expect(darkBlock).toBeDefined()
+  })
+
+  it("clair et sombre définissent les mêmes tokens sémantiques", () => {
+    const light = tokensOf(lightBlock!)
+    const dark = tokensOf(darkBlock!)
+    for (const token of SEMANTIC) {
+      expect({ token, inLight: light.has(token) }).toEqual({ token, inLight: true })
+      expect({ token, inDark: dark.has(token) }).toEqual({ token, inDark: true })
+    }
+  })
+
+  it("tout `var(--muted-foreground…)` a un token défini (pas seulement un fallback)", () => {
+    // Le token est référencé ailleurs dans la feuille : il doit exister en clair ET en sombre.
+    expect(css.includes("var(--muted-foreground")).toBe(true)
+    expect(tokensOf(lightBlock!)).toContain("--muted-foreground")
+    expect(tokensOf(darkBlock!)).toContain("--muted-foreground")
+  })
+
+  it("les descriptions de dialog et de bottom sheet lisent le token (plus de noir en dur)", () => {
+    for (const selector of [".q-dialog__description", ".q-bottom-sheet__description"]) {
+      const block = blockAfter(css, selector)
+      expect({ selector, defined: block !== undefined }).toEqual({ selector, defined: true })
+      expect({ selector, usesToken: block!.includes("var(--muted-foreground") }).toEqual({
+        selector,
+        usesToken: true,
+      })
+      expect({ selector, hardcodedBlack: block!.includes("color: rgb(0 0 0 / 0.6)") }).toEqual({
+        selector,
+        hardcodedBlack: false,
+      })
+    }
+  })
+
+  it("plus aucune couleur de texte secondaire en noir codé en dur", () => {
+    // Le token clair vaut exactement `rgb(0 0 0 / 0.6)` → la migration est transparente en clair
+    // et corrige le sombre. On interdit donc la forme littérale (le fallback du token reste permis :
+    // il s'écrit `var(--muted-foreground, rgb(0 0 0 / 0.6))`).
+    // ⚠️ Lookbehind : `background-color: …` **contient** la sous-chaîne `color: …`.
+    expect(/(?<!-)color: rgb\(0 0 0 \/ 0\.6\)/.test(css)).toBe(false)
+  })
+})
+
+describe("classes de style (composant ↔ CSS)", () => {
+  /** `[fichier du composant, classe, sélecteur CSS attendu]` */
+  const CONTRACTS: [string, string, string][] = [
+    [
+      "components/QDialogHeader.vue",
+      "q-dialog__header-text--with-description",
+      ".q-dialog__header-text--with-description .q-dialog__title",
+    ],
+    [
+      "components/QBottomSheetHeader.vue",
+      "q-bottom-sheet__header-text--with-description",
+      ".q-bottom-sheet__header-text--with-description .q-bottom-sheet__title",
+    ],
+    ["components/QCollapse.vue", "q-collapse--guide", ".q-collapse--guide .q-collapse__inner"],
+  ]
+
+  for (const [file, className, selector] of CONTRACTS) {
+    it(`« ${className} » est posée par le composant ET stylée par le CSS`, async () => {
+      const vue = await Bun.file(new URL(`../${file}`, import.meta.url)).text()
+      expect({ file, inComponent: vue.includes(className) }).toEqual({ file, inComponent: true })
+      expect({ selector, inCss: css.includes(selector) }).toEqual({ selector, inCss: true })
+    })
+  }
+
+  it("une description ajoute aussi de l'air AVANT le séparateur (padding-bottom)", () => {
+    // Le séparateur est le `border-bottom` de l'en-tête : sans ce padding, le trait colle
+    // au texte de la description.
+    for (const selector of [
+      ".q-dialog__header-text--with-description",
+      ".q-bottom-sheet__header-text--with-description",
+    ]) {
+      const block = blockAfter(css, selector)
+      expect({ selector, defined: block !== undefined }).toEqual({ selector, defined: true })
+      expect({ selector, padded: block!.includes("padding-bottom") }).toEqual({
+        selector,
+        padded: true,
+      })
+    }
+  })
+})
+
+describe("mode sombre des contrôles", () => {
+  it("la bordure noire du checkbox / radio décoché est corrigée en sombre", () => {
+    // Base claire : bordure codée en dur (le variant `--dark` du composant la corrige, mais
+    // il faut aussi le **mode sombre du thème**) — sinon le contrôle est invisible en dark.
+    expect(css.includes("border: 2px solid rgb(0 0 0 / 0.45)")).toBe(true)
+    for (const selector of [".dark .q-checkbox__box", ".dark .q-radio__circle"]) {
+      expect({ selector, present: css.includes(selector) }).toEqual({ selector, present: true })
+    }
+  })
+})
+
+describe("en-têtes de panneau : safe-area", () => {
+  // La safe-area doit **s'ajouter** au padding de base, jamais le remplacer : sinon, sans
+  // encoche (`env()` = 0), le titre et le × collent au bord haut.
+  const PANEL_HEADERS = [
+    ".q-select__sheet--dialog .q-select__sheet-header",
+    ".q-date-picker__sheet--dialog .q-date-picker__sheet-header",
+    ".q-country-picker__sheet--dialog .q-country-picker__sheet-header",
+  ]
+
+  for (const selector of PANEL_HEADERS) {
+    it(`« ${selector} » ajoute la safe-area à un padding de base`, () => {
+      const block = blockAfter(css, selector)
+      expect({ selector, defined: block !== undefined }).toEqual({ selector, defined: true })
+      expect({ selector, adds: block!.includes("calc(env(safe-area-inset-top) + 16px)") }).toEqual({
+        selector,
+        adds: true,
+      })
+      expect({ selector, bare: block!.includes("padding-top: env(safe-area-inset-top);") }).toEqual({
+        selector,
+        bare: false,
+      })
+    })
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -155,14 +155,18 @@ body {
 
 /* Fallback sans mesure JS (SSR, barres pas encore observées) : 50px + safe-area.
    Écrit dans la **variable** d'offset — et non en padding — pour que la hauteur
-   mesurée (style inline, lib/fixedLayout.ts) la remplace dès l'hydratation. */
-.q-app:has(.q-header--fixed) :is(.q-page, .q-page-container) {
+   mesurée (style inline, lib/fixedLayout.ts) la remplace dès l'hydratation.
+   `:is(.q-app, .q-config-provider, .q-layout)` couvre les trois racines possibles :
+   l'installation **recommandée** (QConfigProvider, avec ou sans QLayout) n'utilise pas
+   forcément `.q-app`. Le chemin **mesuré** (`fixedLayout.ts`) retombe déjà sur
+   `.q-app` sinon le parent direct — seul ce fallback CSS était trop restrictif. */
+:is(.q-app, .q-config-provider, .q-layout):has(.q-header--fixed) :is(.q-page, .q-page-container) {
   --q-page-offset: 50px;
   --q-page-offset: calc(constant(safe-area-inset-top) + 50px);
   --q-page-offset: calc(env(safe-area-inset-top) + 50px);
 }
 
-.q-app:has(.q-footer--fixed) :is(.q-page, .q-page-container) {
+:is(.q-app, .q-config-provider, .q-layout):has(.q-footer--fixed) :is(.q-page, .q-page-container) {
   --q-page-offset-bottom: 50px;
   --q-page-offset-bottom: calc(constant(safe-area-inset-bottom) + 50px);
   --q-page-offset-bottom: calc(env(safe-area-inset-bottom) + 50px);
@@ -342,6 +346,9 @@ body {
     --foreground: #1d1d1d;
     --card: #ffffff;
     --muted: #f4f6f9;
+    /* Texte secondaire (descriptions, préfixes, curseurs…) — **défini ici ET en .dark** :
+       tout `var(--muted-foreground, …)` sans définition tombait sur son fallback sombre. */
+    --muted-foreground: rgb(0 0 0 / 0.6);
     --border: rgb(0 0 0 / 0.12);
 
     /* Palette des séries de <q-chart> (convention `--chart-N`, reprise de shadcn) :
@@ -362,6 +369,7 @@ body {
     --foreground: #e6edf3;
     --card: #161b22;
     --muted: #1c2128;
+    --muted-foreground: rgb(255 255 255 / 0.62);
     --border: rgb(255 255 255 / 0.12);
     --q-table-border: rgb(255 255 255 / 0.12);
     --q-table-hover-bg: rgb(255 255 255 / 0.06);
@@ -507,6 +515,11 @@ html.dark body {
   border-color: var(--border);
 }
 
+/* Séparateur de fil d'Ariane : le noir translucide est invisible en sombre */
+.dark .q-breadcrumbs {
+  --q-breadcrumbs-sep-color: rgb(255 255 255 / 0.42);
+}
+
 /* ===== QBtn ===== */
 .q-btn {
   --q-btn-bg: var(--primary);
@@ -2136,12 +2149,12 @@ html.dark body {
   display: block;
   margin-bottom: 2px;
   font-size: 12px;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
 }
 
 .q-field__prefix,
 .q-field__suffix {
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   white-space: nowrap;
 }
 
@@ -2335,7 +2348,7 @@ html.dark body {
   font-size: 12px;
   line-height: 1.2;
   text-align: center;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
 }
 
 .q-image-picker__input {
@@ -2471,7 +2484,7 @@ html.dark body {
 
 .q-file-picker__add-label {
   font-size: 13px;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
 }
 
 .q-file-picker__input {
@@ -3453,7 +3466,7 @@ html.dark body {
   display: flex;
   align-items: center;
   gap: 6px;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
 }
 
 .q-table--dark .q-table__rows-select {
@@ -3596,6 +3609,15 @@ html.dark body {
   padding: 0 16px;
 }
 
+/* Guide vertical (« tirets longs ») à gauche du contenu : trait aligné sous l'**icône** du
+   header (padding 16px + icône 18px / 2) et contenu décalé d'autant. Suit le thème via
+   `--border` (invisible nulle part : clair comme sombre). */
+.q-collapse--guide .q-collapse__inner {
+  margin-left: 25px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
+
 /* ===== QCheckbox / QRadio ===== */
 .q-checkbox,
 .q-radio {
@@ -3675,8 +3697,14 @@ html.dark body {
   line-height: 1.4;
 }
 
+/* Bordure du contrôle (état décoché) : noir 45 % en clair → **illisible en sombre**.
+   Couvert par la variante `--dark` du composant (surface sombre explicite) ET par le
+   **mode sombre du thème** (`.dark`), avec la même valeur.
+   L'état coché/indéterminé est stylé en inline (couleur de la prop) — non concerné. */
 .q-checkbox--dark .q-checkbox__box,
-.q-radio--dark .q-radio__circle {
+.q-radio--dark .q-radio__circle,
+.dark .q-checkbox__box,
+.dark .q-radio__circle {
   border-color: rgb(255 255 255 / 0.6);
 }
 
@@ -3701,7 +3729,7 @@ html.dark body {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   transition: transform 0.2s ease;
 }
 
@@ -3836,7 +3864,7 @@ html.dark body {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -4164,7 +4192,7 @@ html.dark body {
 /* ===== QBreadcrumbs ===== */
 .q-breadcrumbs {
   --q-breadcrumbs-gutter: 8px;
-  --q-breadcrumbs-color: rgb(0 0 0 / 0.6);
+  --q-breadcrumbs-color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   --q-breadcrumbs-sep-color: rgb(0 0 0 / 0.42);
   --q-breadcrumbs-active-color: var(--primary);
 
@@ -4888,7 +4916,7 @@ a.q-breadcrumbs__el:hover {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   transition: transform 0.2s ease;
 }
 
@@ -5088,7 +5116,9 @@ a.q-breadcrumbs__el:hover {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  /* Un peu plus d'air en haut (titre + bouton de fermeture) : le panneau a un coin
+     arrondi, 14px des deux côtés collait le titre au bord. Bas inchangé. */
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -5324,6 +5354,17 @@ a.q-breadcrumbs__el:hover {
   min-width: 0;
 }
 
+/* Description présente → le bloc titre+description est plus haut que la toolbar centrée :
+   un peu d'air au-dessus du titre, **et un peu avant le séparateur** (sinon le trait colle
+   au texte de la description). */
+.q-bottom-sheet__header-text--with-description {
+  padding-bottom: 6px;
+}
+
+.q-bottom-sheet__header-text--with-description .q-bottom-sheet__title {
+  padding-top: 4px;
+}
+
 .q-bottom-sheet__title {
   margin: 0;
   font-size: 17px;
@@ -5334,7 +5375,7 @@ a.q-breadcrumbs__el:hover {
 .q-bottom-sheet__description {
   margin: 4px 0 0;
   font-size: 14px;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   line-height: 1.4;
 }
 
@@ -5382,10 +5423,17 @@ a.q-breadcrumbs__el:hover {
 }
 
 .q-bottom-sheet__panel--dark .q-bottom-sheet__header,
-.q-bottom-sheet__panel--dark .q-bottom-sheet__footer {
+.q-bottom-sheet__panel--dark .q-bottom-sheet__footer,
+/* Thème sombre : le noir 8 % codé en dur est invisible (même classe que le dialog). */
+.dark .q-bottom-sheet__header,
+.dark .q-bottom-sheet__footer {
   border-color: rgb(255 255 255 / 0.12);
 }
 
+.dark .q-bottom-sheet__close:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 /* — transitions (slide vertical type vaul) — durées configurables via
    transition-duration (vars --q-bs-duration-enter/leave) */
 .q-bs-enter-active,
@@ -5655,7 +5703,7 @@ a.q-breadcrumbs__el:hover {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
 }
 
 .q-date-picker__overlay {
@@ -5708,9 +5756,11 @@ a.q-breadcrumbs__el:hover {
 }
 
 .q-date-picker__sheet--dialog .q-date-picker__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* La safe-area **s'ajoute** au padding de base — sinon le titre et le × collent au bord
+     haut (0 px) sur tout appareil sans encoche (`env()` vaut 0). */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 
 .q-date-picker__sheet-header {
@@ -5718,7 +5768,7 @@ a.q-breadcrumbs__el:hover {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -6186,16 +6236,17 @@ a.q-breadcrumbs__el:hover {
   box-shadow: none;
 }
 .q-country-picker__sheet--dialog .q-country-picker__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* Safe-area **ajoutée** au padding de base (cf. date-picker). */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 .q-country-picker__sheet-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -6946,6 +6997,17 @@ a.q-breadcrumbs__el:hover {
   min-width: 0;
 }
 
+/* Description présente → le bloc titre+description est plus haut que la toolbar centrée :
+   un peu d'air au-dessus du titre, **et un peu avant le séparateur** (sinon le trait colle
+   au texte de la description). */
+.q-dialog__header-text--with-description {
+  padding-bottom: 6px;
+}
+
+.q-dialog__header-text--with-description .q-dialog__title {
+  padding-top: 4px;
+}
+
 .q-dialog__title {
   margin: 0;
   font-size: 17px;
@@ -6956,7 +7018,7 @@ a.q-breadcrumbs__el:hover {
 .q-dialog__description {
   margin: 4px 0 0;
   font-size: 14px;
-  color: rgb(0 0 0 / 0.6);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
   line-height: 1.4;
 }
 
@@ -6979,6 +7041,18 @@ a.q-breadcrumbs__el:hover {
   background-color: rgb(0 0 0 / 0.06);
 }
 
+/* Mode sombre du dialog : bordure des zones sticky et survol du × — le noir
+   codé en dur (bordure, hover) y est invisible. Convention du paquet :
+   surfaces/hovers sombres en blanc translucide (cf. `.dark .q-btn-actions__item:hover`). */
+.dark .q-dialog__header,
+.dark .q-dialog__footer {
+  border-color: var(--border);
+}
+
+.dark .q-dialog__close:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 .q-dialog__close svg {
   width: 16px;
   height: 16px;
@@ -8103,9 +8177,11 @@ a.q-breadcrumbs__el:hover {
    En mode sheet avec recherche en bas, c'est le champ qui gère l'inset ;
    sinon (liste seule) c'est la liste. */
 .q-select__sheet--dialog .q-select__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* Safe-area **ajoutée** au padding de base — en mode plein écran le titre et le ×
+     sont au bord haut ; sans encoche `env()` vaut 0, d'où le padding de repli. */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 
 .q-select__sheet--dialog .q-select__sheet-list,