@dnax/ui 0.0.62 → 0.0.64

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/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/components/QTabs.vue

@@ -25,9 +25,12 @@ export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
+import { Icon } from "@iconify/vue"
 import { cva } from "class-variance-authority"
 import { cn } from "../lib/utils"
 import { colorValue } from "../lib/colors"
+import { icons } from "../lib/icons"
+import { tabArrowState, tabArrowStep } from "../lib/tabs"
 
 const tabsVariants = cva("q-tabs", {
   variants: {
@@ -70,6 +73,12 @@ interface Props {
   switchIndicatorPosition?: boolean | "top" | "bottom"
   /** Tabs en colonne (verticales) */
   vertical?: boolean
+  /**
+   * **Flèches de défilement** quand les tabs débordent (comportement Quasar, défaut `true`) :
+   * le contenu devient défilable et deux boutons apparaissent aux extrémités débordantes.
+   * `false` → aucun défilement (les tabs débordent, comme avant).
+   */
+  showArrows?: boolean
   /** Ne pas s'étendre (usage dans un QToolbar) */
   shrink?: boolean
   /** S'étendre sur l'axe croisé du parent flex */
@@ -106,6 +115,7 @@ const props = withDefaults(defineProps<Props>(), {
   noCaps: false,
   switchIndicatorPosition: undefined,
   vertical: false,
+  showArrows: true,
   shrink: false,
   stretch: false,
   contentClass: "",
@@ -148,10 +158,36 @@ const tabRegs = shallowRef<QTabRegistration[]>([])
 const tick = ref(0)
 const rootEl = ref<HTMLElement | null>(null)
 
-// Recalcule la position de l'indicateur après chaque changement de DOM
+// — Flèches de défilement (`show-arrows`, comportement Quasar) —
+const contentEl = ref<HTMLElement | null>(null)
+const canScrollStart = ref(false)
+const canScrollEnd = ref(false)
+let contentObserver: ResizeObserver | null = null
+
+/** Met à jour la visibilité des flèches depuis les mesures de défilement (axe courant). */
+const updateArrows = () => {
+  const el = contentEl.value
+  if (!el) return
+  const state = props.vertical
+    ? tabArrowState(el.scrollTop, el.clientHeight, el.scrollHeight)
+    : tabArrowState(el.scrollLeft, el.clientWidth, el.scrollWidth)
+  canScrollStart.value = state.canStart
+  canScrollEnd.value = state.canEnd
+}
+
+/** Fait défiler d'un cran (≈ 60 % de la zone visible) — fluide. */
+const scrollArrows = (dir: -1 | 1) => {
+  const el = contentEl.value
+  if (!el) return
+  const delta = tabArrowStep(props.vertical ? el.clientHeight : el.clientWidth) * dir
+  el.scrollBy(props.vertical ? { top: delta, behavior: "smooth" } : { left: delta, behavior: "smooth" })
+}
+
+// Recalcule la position de l'indicateur (et les flèches) après chaque changement de DOM
 const measure = async () => {
   await nextTick()
   tick.value++
+  updateArrows()
 }
 
 // collapse-inactive : le label s'étend/retombe via une transition max-width
@@ -169,10 +205,18 @@ onMounted(() => {
   measure()
   if (typeof window !== "undefined") window.addEventListener("resize", measure)
   rootEl.value?.addEventListener("transitionend", onCollapseEnd)
+  // Le conteneur peut changer de largeur sans resize fenêtre (sidebar, flex…) : les
+  // flèches doivent suivre le débordement réel.
+  if (typeof ResizeObserver !== "undefined" && contentEl.value) {
+    contentObserver = new ResizeObserver(updateArrows)
+    contentObserver.observe(contentEl.value)
+  }
 })
 onBeforeUnmount(() => {
   if (typeof window !== "undefined") window.removeEventListener("resize", measure)
   rootEl.value?.removeEventListener("transitionend", onCollapseEnd)
+  contentObserver?.disconnect()
+  contentObserver = null
 })
 
 const context: QTabContext = {
@@ -240,6 +284,7 @@ const tabsClasses = computed(() =>
     props.animated && "q-tabs--animated",
     props.animated && `q-tabs--anim-${props.transition}`,
     props.collapseInactive && "q-tabs--collapse-inactive",
+    props.showArrows && "q-tabs--arrows",
   ),
 )
 </script>
@@ -253,9 +298,32 @@ const tabsClasses = computed(() =>
     role="tablist"
     :aria-orientation="vertical ? 'vertical' : 'horizontal'"
   >
-    <div class="q-tabs__content" :class="contentClass">
+    <button
+      v-if="showArrows && canScrollStart"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--start"
+      :aria-label="vertical ? 'Defiler les onglets vers le haut' : 'Defiler les onglets vers la gauche'"
+      @click="scrollArrows(-1)"
+    >
+      <Icon :icon="vertical ? icons.chevronUp : icons.chevronLeft" aria-hidden="true" />
+    </button>
+    <div
+      ref="contentEl"
+      class="q-tabs__content"
+      :class="contentClass"
+      @scroll="updateArrows"
+    >
       <slot />
       <div class="q-tabs__indicator" :style="indicatorStyle" aria-hidden="true" />
     </div>
+    <button
+      v-if="showArrows && canScrollEnd"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--end"
+      :aria-label="vertical ? 'Defiler les onglets vers le bas' : 'Defiler les onglets vers la droite'"
+      @click="scrollArrows(1)"
+    >
+      <Icon :icon="vertical ? icons.chevronDown : icons.chevronRight" aria-hidden="true" />
+    </button>
   </div>
 </template>

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

@@ -100,6 +100,8 @@ describe("classes de style (composant ↔ CSS)", () => {
       "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"],
+    ["components/QTabs.vue", "q-tabs--arrows", ".q-tabs--arrows .q-tabs__content"],
   ]
 
   for (const [file, className, selector] of CONTRACTS) {
@@ -109,6 +111,22 @@ describe("classes de style (composant ↔ CSS)", () => {
       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", () => {
@@ -121,3 +139,28 @@ describe("mode sombre des contrôles", () => {
     }
   })
 })
+
+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/lib/tabs.test.ts

@@ -0,0 +1,35 @@
+// Tests unitaires des flèches de défilement de QTabs (`lib/tabs.ts`).
+import { describe, expect, it } from "bun:test"
+import { tabArrowState, tabArrowStep } from "./tabs"
+
+describe("tabArrowState", () => {
+  it("pas de débordement → aucune flèche", () => {
+    expect(tabArrowState(0, 400, 400)).toEqual({ canStart: false, canEnd: false })
+  })
+
+  it("début → seule la flèche de fin", () => {
+    expect(tabArrowState(0, 400, 900)).toEqual({ canStart: false, canEnd: true })
+  })
+
+  it("milieu → les deux flèches", () => {
+    expect(tabArrowState(200, 400, 900)).toEqual({ canStart: true, canEnd: true })
+  })
+
+  it("fin → seule la flèche de début", () => {
+    expect(tabArrowState(500, 400, 900)).toEqual({ canStart: true, canEnd: false })
+  })
+
+  it("tolère l'arrondi des sous-pixels (1 px)", () => {
+    // Collé au début malgré un `scrollLeft` de 1 (arrondi)
+    expect(tabArrowState(1, 400, 900)).toEqual({ canStart: false, canEnd: true })
+    // Collé à la fin malgré un `scrollLeft` à 1 px du max
+    expect(tabArrowState(499, 400, 900)).toEqual({ canStart: true, canEnd: false })
+  })
+})
+
+describe("tabArrowStep", () => {
+  it("avance d'environ 60 % de la zone visible, avec un plancher de 80 px", () => {
+    expect(tabArrowStep(400)).toBe(240)
+    expect(tabArrowStep(100)).toBe(80) // 60 < 80 → plancher
+  })
+})

package/lib/tabs.ts

@@ -0,0 +1,38 @@
+// Flèches de défilement de QTabs (`show-arrows`, comportement Quasar) : décide si les boutons
+// de début / fin doivent apparaître, selon la position de défilement et les mesures.
+//
+// Logique **pure**, testable hors navigateur. Les navigateurs arrondissent `scrollLeft` /
+// `scrollTop` (sous-pixels, zoom) : on tolère 1 px pour ne pas faire clignoter une flèche.
+
+const EPSILON = 1
+
+export interface QTabArrowState {
+  /** On peut défiler vers le **début** (gauche / haut) */
+  canStart: boolean
+  /** On peut défiler vers la **fin** (droite / bas) */
+  canEnd: boolean
+}
+
+/**
+ * État des flèches pour un axe donné.
+ *
+ * @param position   `scrollLeft` / `scrollTop`
+ * @param clientSize `clientWidth` / `clientHeight` (partie visible)
+ * @param scrollSize `scrollWidth` / `scrollHeight` (contenu total)
+ */
+export function tabArrowState(
+  position: number,
+  clientSize: number,
+  scrollSize: number,
+): QTabArrowState {
+  const overflow = scrollSize - clientSize
+  return {
+    canStart: position > EPSILON,
+    canEnd: overflow > EPSILON && position < overflow - EPSILON,
+  }
+}
+
+/** Déplacement d'un clic sur une flèche : ~60 % de la zone visible (au moins 80 px). */
+export function tabArrowStep(clientSize: number): number {
+  return Math.max(80, Math.round(clientSize * 0.6))
+}

package/package.json

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

package/styles/main.css

@@ -831,6 +831,62 @@ html.dark body {
   align-items: stretch;
 }
 
+/* Flèches de défilement (`show-arrows`, comportement Quasar) : le contenu devient
+   défilable (barre de défilement masquée, le défilement est piloté par les flèches). */
+.q-tabs--arrows .q-tabs__content {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.q-tabs--arrows .q-tabs__content::-webkit-scrollbar {
+  display: none;
+}
+
+.q-tabs--vertical.q-tabs--arrows .q-tabs__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.q-tabs__arrow {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.q-tabs__arrow:hover {
+  opacity: 1;
+  background-color: rgb(0 0 0 / 0.04);
+}
+
+/* Thème sombre : le hover noir 4 % est invisible (cf. convention des hovers sombres). */
+.dark .q-tabs__arrow:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.q-tabs__arrow svg {
+  width: 16px;
+  height: 16px;
+}
+
+.q-tabs--vertical .q-tabs__arrow {
+  width: 100%;
+  height: 24px;
+}
+
 .q-tabs--dense {
   --q-tabs-h: 32px;
 }
@@ -841,10 +897,14 @@ html.dark body {
 
 .q-tabs--center .q-tabs__content {
   justify-content: center;
+  /* `safe` : en cas de débordement, retombe sur `flex-start` au lieu de rendre le
+     début inaccessible au défilement (bug classique du flex centré + overflow). */
+  justify-content: safe center;
 }
 
 .q-tabs--right .q-tabs__content {
   justify-content: flex-end;
+  justify-content: safe flex-end;
 }
 
 .q-tabs--justify .q-tab {
@@ -3609,6 +3669,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 {
@@ -3855,7 +3924,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;
@@ -5107,7 +5176,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;
@@ -5344,7 +5415,12 @@ a.q-breadcrumbs__el:hover {
 }
 
 /* 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. */
+   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;
 }
@@ -5407,10 +5483,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,
@@ -5733,9 +5816,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 {
@@ -5743,7 +5828,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;
@@ -6211,16 +6296,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;
@@ -6972,7 +7058,12 @@ a.q-breadcrumbs__el:hover {
 }
 
 /* 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. */
+   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;
 }
@@ -8146,9 +8237,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,