@dnax/ui 0.0.60 → 0.0.62

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/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/QSidebar.vue

@@ -180,7 +180,10 @@ let isHorizontal = false
 
 const onPointerDown = (e: PointerEvent) => {
   if (isStatic.value || !open.value || props.disable) return
-  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  // ⚠️ Ne **pas** `setPointerCapture` ici : capturer au `pointerdown` fait retarger le
+  // `click` qui suit vers l'`<aside>` → **aucun** handler interne ne se déclenche (ni le ×
+  // de fermeture, ni les items de menu). La capture est prise uniquement si le geste est
+  // **confirmé horizontal** (cf. `onPointerMove`), donc un vrai clic n'est jamais capturé.
   startX = e.clientX
   startY = e.clientY
   currentDx = 0
@@ -198,6 +201,10 @@ const onPointerMove = (e: PointerEvent) => {
   if (!isHorizontal) {
     if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
       isHorizontal = true
+      // Capture **au moment du swipe confirmé** (et non au pointerdown) : c'est ce qui
+      // laisse le `click` d'un vrai clic atteindre les handlers internes, tout en gardant
+      // les événements du swipe même si le pointeur sort du panneau.
+      rootEl.value.setPointerCapture(e.pointerId)
       rootEl.value.style.transition = "none"
     }
     else return
@@ -210,11 +217,14 @@ const onPointerMove = (e: PointerEvent) => {
   rootEl.value.style.transform = `translateX(${dir === 1 ? travel : -travel}px)`
 }
 
-const onPointerUp = () => {
+const onPointerUp = (e: PointerEvent) => {
   if (!dragging.value) return
   dragging.value = false
   const el = rootEl.value
   if (!el) return
+  // Relâche la capture prise au swipe confirmé (le navigateur le fait aussi en fin de geste ;
+  // on l'explicite pour rester cohérent).
+  if (el.hasPointerCapture?.(e.pointerId)) el.releasePointerCapture(e.pointerId)
   el.style.transition = "" // restaure la transition CSS
   const width = el.offsetWidth || parseInt(props.width, 10) || 260
   if (currentDx > Math.min(80, width * 0.3)) {

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/styleTokens.test.ts

@@ -0,0 +1,123 @@
+// 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",
+    ],
+  ]
+
+  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 })
+    })
+  }
+})
+
+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 })
+    }
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "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 {
@@ -3675,8 +3688,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 +3720,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;
 }
 
@@ -4164,7 +4183,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 +4907,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;
 }
 
@@ -5324,6 +5343,12 @@ 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 évite qu'il colle au bord haut. */
+.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 +5359,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;
 }
 
@@ -5655,7 +5680,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 {
@@ -6946,6 +6971,12 @@ 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 évite qu'il colle au bord haut. */
+.q-dialog__header-text--with-description .q-dialog__title {
+  padding-top: 4px;
+}
+
 .q-dialog__title {
   margin: 0;
   font-size: 17px;
@@ -6956,7 +6987,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 +7010,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;