@dnax/ui 0.0.19 → 0.0.21

package/components/QAutocomplete.vue

@@ -53,6 +53,8 @@ interface Props {
   sheetOptions?: QAutocompleteModeOptions
   /** Options spécifiques au mode modal */
   modalOptions?: QAutocompleteModeOptions
+  /** En mode sheet, swipe vers le bas sur le header pour fermer */
+  swipeToClose?: boolean
 }
 
 export interface QAutocompleteModeOptions {
@@ -86,6 +88,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   noOptionsLabel: "No options to display",
   mode: "inline",
+  swipeToClose: false,
 })
 
 const emit = defineEmits<{
@@ -157,6 +160,41 @@ const sheetTitle = computed(
   () => modeOptions.value?.title ?? props.title ?? props.label ?? props.placeholder ?? "Select",
 )
 
+// — Swipe down pour fermer (mode sheet, opt-in swipe-to-close) —
+const dragging = ref(false)
+let dragStartY = 0
+let dragDy = 0
+const canSwipe = computed(() => props.swipeToClose && props.mode === "sheet")
+
+const onDragStart = (e: PointerEvent) => {
+  if (!canSwipe.value) return
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+  dragStartY = e.clientY
+  dragDy = 0
+  dragging.value = true
+}
+
+const onDragMove = (e: PointerEvent) => {
+  if (!dragging.value) return
+  dragDy = Math.max(0, e.clientY - dragStartY)
+  if (sheetRef.value) sheetRef.value.style.transform = `translateY(${dragDy}px)`
+}
+
+const onDragEnd = () => {
+  if (!dragging.value) return
+  dragging.value = false
+  if (dragDy > 80) closePopup()
+  else if (sheetRef.value) sheetRef.value.style.transform = ""
+  dragDy = 0
+}
+
+const sheetClasses = computed(() => [
+  `q-autocomplete__sheet--${props.mode}`,
+  modeOptions.value?.class,
+  dragging.value && "q-autocomplete__sheet--dragging",
+  canSwipe.value && "q-autocomplete__sheet--swipeable",
+])
+
 // — Valeurs des options —
 const getValue = (opt: any): any =>
   typeof props.optionValue === "function" ? props.optionValue(opt) : opt?.[props.optionValue]
@@ -242,6 +280,15 @@ const onClear = () => {
   emit("clear")
 }
 
+// Clear du champ de recherche du panneau (sheet/modal) : vide la recherche
+// sans effacer la sélection, garde le focus dans l'input
+const onSearchClear = () => {
+  query.value = ""
+  emit("update:inputValue", "")
+  activeIndex.value = 0
+  nextTick(() => panelInput.value?.focus())
+}
+
 const isSelected = (opt: any) => getValue(opt) === props.modelValue
 
 // À la perte de focus : si le texte saisi ne correspond exactement à aucune
@@ -428,13 +475,19 @@ watch(open, (v) => {
           <div
             ref="sheetRef"
             class="q-autocomplete__sheet"
-            :class="[`q-autocomplete__sheet--${mode}`, modeOptions?.class]"
+            :class="sheetClasses"
             :style="[sheetStyle, modeOptions?.style]"
             role="dialog"
             aria-modal="true"
             :aria-label="sheetTitle"
           >
-            <div class="q-autocomplete__sheet-header">
+            <div
+              class="q-autocomplete__sheet-header"
+              @pointerdown="onDragStart"
+              @pointermove="onDragMove"
+              @pointerup="onDragEnd"
+              @pointercancel="onDragEnd"
+            >
               <span class="q-autocomplete__sheet-title">{{ sheetTitle }}</span>
               <button
                 type="button"
@@ -458,6 +511,15 @@ watch(open, (v) => {
                 @input="onInput"
                 @keydown="onKeydown"
               />
+              <button
+                v-if="query !== ''"
+                type="button"
+                class="q-autocomplete__search-clear"
+                aria-label="Effacer la recherche"
+                @mousedown.prevent="onSearchClear"
+              >
+                <Icon :icon="icons.x" aria-hidden="true" />
+              </button>
             </div>
             <div
               ref="popupRef"

package/components/QCol.vue

@@ -2,7 +2,6 @@
 // QCol — cellule de la grille : <q-col :span="6" :span-md="4" :offset="1">
 // Responsive : span-sm/md/lg/xl et offset-* écrasent la valeur de base au breakpoint.
 import { computed } from "vue"
-import { useGridBreakpoints } from "../lib/breakpoints"
 
 type ColSpan = number | "auto"
 
@@ -27,19 +26,19 @@ const props = withDefaults(defineProps<Props>(), {
   alignSelf: "stretch",
 })
 
-const bp = useGridBreakpoints()
-
+// Les classes responsive (span-md-*…) sont TOUJOURS posées — ce sont les
+// @media (min-width) du CSS qui les activent au bon breakpoint (pas de JS).
 const classes = computed(() => ({
   ...(props.span !== "auto" ? { [`q-col--span-${props.span}`]: true } : {}),
   ...(props.offset ? { [`q-col--offset-${props.offset}`]: true } : {}),
-  ...(bp.value.sm && props.spanSm !== undefined && props.spanSm !== "auto" ? { [`q-col--span-sm-${props.spanSm}`]: true } : {}),
-  ...(bp.value.sm && props.offsetSm ? { [`q-col--offset-sm-${props.offsetSm}`]: true } : {}),
-  ...(bp.value.md && props.spanMd !== undefined && props.spanMd !== "auto" ? { [`q-col--span-md-${props.spanMd}`]: true } : {}),
-  ...(bp.value.md && props.offsetMd ? { [`q-col--offset-md-${props.offsetMd}`]: true } : {}),
-  ...(bp.value.lg && props.spanLg !== undefined && props.spanLg !== "auto" ? { [`q-col--span-lg-${props.spanLg}`]: true } : {}),
-  ...(bp.value.lg && props.offsetLg ? { [`q-col--offset-lg-${props.offsetLg}`]: true } : {}),
-  ...(bp.value.xl && props.spanXl !== undefined && props.spanXl !== "auto" ? { [`q-col--span-xl-${props.spanXl}`]: true } : {}),
-  ...(bp.value.xl && props.offsetXl ? { [`q-col--offset-xl-${props.offsetXl}`]: true } : {}),
+  ...(props.spanSm !== undefined && props.spanSm !== "auto" ? { [`q-col--span-sm-${props.spanSm}`]: true } : {}),
+  ...(props.offsetSm ? { [`q-col--offset-sm-${props.offsetSm}`]: true } : {}),
+  ...(props.spanMd !== undefined && props.spanMd !== "auto" ? { [`q-col--span-md-${props.spanMd}`]: true } : {}),
+  ...(props.offsetMd ? { [`q-col--offset-md-${props.offsetMd}`]: true } : {}),
+  ...(props.spanLg !== undefined && props.spanLg !== "auto" ? { [`q-col--span-lg-${props.spanLg}`]: true } : {}),
+  ...(props.offsetLg ? { [`q-col--offset-lg-${props.offsetLg}`]: true } : {}),
+  ...(props.spanXl !== undefined && props.spanXl !== "auto" ? { [`q-col--span-xl-${props.spanXl}`]: true } : {}),
+  ...(props.offsetXl ? { [`q-col--offset-xl-${props.offsetXl}`]: true } : {}),
 }))
 
 const style = computed(() => (props.alignSelf !== "stretch" ? { alignSelf: props.alignSelf } : undefined))

package/components/QGrid.vue

@@ -4,7 +4,6 @@
 // Mode cellules (Vant) : activé par `column-num` → <q-grid-item> enfants
 // (icône + texte), ex. menu d'app : <q-grid :column-num="4" gutter="8" clickable>
 import { computed } from "vue"
-import { useGridBreakpoints } from "../lib/breakpoints"
 
 interface Props {
   /** Nombre de colonnes du layout (défaut : 12) */
@@ -60,8 +59,6 @@ const props = withDefaults(defineProps<Props>(), {
   iconColor: "",
 })
 
-const bp = useGridBreakpoints()
-
 const px = (v: string | number | undefined) =>
   v === undefined ? undefined : typeof v === "number" ? `${v}px` : v
 
@@ -84,12 +81,12 @@ const style = computed<Record<string, string>>(() => {
   s.alignItems = props.align
   return s
 })
-
+// Classes cols responsive TOUJOURS posées — activées par les @media CSS
 const classes = computed(() => ({
-  ...(bp.value.sm && props.colsSm ? { [`q-grid--cols-sm-${props.colsSm}`]: true } : {}),
-  ...(bp.value.md && props.colsMd ? { [`q-grid--cols-md-${props.colsMd}`]: true } : {}),
-  ...(bp.value.lg && props.colsLg ? { [`q-grid--cols-lg-${props.colsLg}`]: true } : {}),
-  ...(bp.value.xl && props.colsXl ? { [`q-grid--cols-xl-${props.colsXl}`]: true } : {}),
+  ...(props.colsSm ? { [`q-grid--cols-sm-${props.colsSm}`]: true } : {}),
+  ...(props.colsMd ? { [`q-grid--cols-md-${props.colsMd}`]: true } : {}),
+  ...(props.colsLg ? { [`q-grid--cols-lg-${props.colsLg}`]: true } : {}),
+  ...(props.colsXl ? { [`q-grid--cols-xl-${props.colsXl}`]: true } : {}),
   "q-grid--cell": isCellMode.value,
   "q-grid--border": isCellMode.value && props.border,
   "q-grid--square": isCellMode.value && props.square,

package/package.json

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

package/styles/main.css

@@ -850,6 +850,9 @@ html.dark body {
   text-transform: uppercase;
   cursor: pointer;
   user-select: none;
+  /* Supprime le délai double-tap/zoom d'iOS qui « avalait » le premier tap
+     → la couleur active et la sélection se font dès le premier clic. */
+  touch-action: manipulation;
   transition:
     color 0.2s ease,
     background-color 0.2s ease,
@@ -857,9 +860,13 @@ html.dark body {
     transform 0.15s ease;
 }
 
-/* appui au clic : léger aplatissement (prop animated) */
-.q-tabs--animated .q-tab:active:not(:disabled) {
-  transform: scale(0.94);
+/* appui au clic : léger aplatissement (prop animated) — scopé aux devices avec
+   souris : sur mobile le scale peut faire sortir le point du doigt de l'élément
+   au relâchement et ANNULER le clic (second tap requis). */
+@media (hover: hover) and (pointer: fine) {
+  .q-tabs--animated .q-tab:active:not(:disabled) {
+    transform: scale(0.94);
+  }
 }
 
 /* pop du tab actif (overshoot) — spring (défaut) et elastic */
@@ -3459,6 +3466,22 @@ html.dark body {
   color: inherit;
   border-radius: var(--q-radius);
   box-shadow: 0 12px 40px rgb(0 0 0 / 0.3);
+  transition: transform 0.25s ease;
+}
+
+/* pendant le swipe : suivi direct, sans transition ni snap */
+.q-autocomplete__sheet--dragging {
+  transition: none;
+}
+
+/* le header est la zone qui attrape le swipe (cursor grab) — seulement si
+   swipe-to-close est actif (classe --swipeable) */
+.q-autocomplete__sheet--swipeable .q-autocomplete__sheet-header {
+  cursor: grab;
+  touch-action: none;
+}
+.q-autocomplete__sheet--dragging .q-autocomplete__sheet-header {
+  cursor: grabbing;
 }
 .q-autocomplete__overlay--modal .q-autocomplete__sheet {
   max-width: 480px;
@@ -3548,6 +3571,27 @@ html.dark body {
 .q-autocomplete__search-input::placeholder {
   color: rgb(0 0 0 / 0.45);
 }
+.q-autocomplete__search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.15);
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.q-autocomplete__search-clear:hover {
+  background: rgb(0 0 0 / 0.25);
+}
+.q-autocomplete__search-clear svg {
+  width: 12px;
+  height: 12px;
+}
 .q-autocomplete__sheet-list {
   overflow-y: auto;
   padding: 6px;
@@ -7476,7 +7520,11 @@ html.dark body {
 }
 .q-col {
   min-width: 0;
-  grid-column-start: calc(var(--q-col-offset, 0) + 1);
+  /* Placement auto par défaut : fallback -1 → calc(0) = 0 → valeur INVALIDE
+     pour grid-column-start → la propriété retombe sur auto et l'item est
+     auto-placé (sinon TOUS les q-col démarreraient en colonne 1 et se
+     superposeraient — une seule colonne visible). */
+  grid-column-start: calc(var(--q-col-offset, -1) + 1);
   grid-column-end: span var(--q-col-span, 1);
 }
 .q-col--span-1 { --q-col-span: 1; }
@@ -7502,146 +7550,162 @@ html.dark body {
 .q-col--offset-9 { --q-col-offset: 9; }
 .q-col--offset-10 { --q-col-offset: 10; }
 .q-col--offset-11 { --q-col-offset: 11; }
-.q-col--span-sm-1 { --q-col-span: 1; }
-.q-col--span-sm-2 { --q-col-span: 2; }
-.q-col--span-sm-3 { --q-col-span: 3; }
-.q-col--span-sm-4 { --q-col-span: 4; }
-.q-col--span-sm-5 { --q-col-span: 5; }
-.q-col--span-sm-6 { --q-col-span: 6; }
-.q-col--span-sm-7 { --q-col-span: 7; }
-.q-col--span-sm-8 { --q-col-span: 8; }
-.q-col--span-sm-9 { --q-col-span: 9; }
-.q-col--span-sm-10 { --q-col-span: 10; }
-.q-col--span-sm-11 { --q-col-span: 11; }
-.q-col--span-sm-12 { --q-col-span: 12; }
-.q-col--offset-sm-1 { --q-col-offset: 1; }
-.q-col--offset-sm-2 { --q-col-offset: 2; }
-.q-col--offset-sm-3 { --q-col-offset: 3; }
-.q-col--offset-sm-4 { --q-col-offset: 4; }
-.q-col--offset-sm-5 { --q-col-offset: 5; }
-.q-col--offset-sm-6 { --q-col-offset: 6; }
-.q-col--offset-sm-7 { --q-col-offset: 7; }
-.q-col--offset-sm-8 { --q-col-offset: 8; }
-.q-col--offset-sm-9 { --q-col-offset: 9; }
-.q-col--offset-sm-10 { --q-col-offset: 10; }
-.q-col--offset-sm-11 { --q-col-offset: 11; }
-.q-grid--cols-sm-1 { --q-grid-cols: 1; }
-.q-grid--cols-sm-2 { --q-grid-cols: 2; }
-.q-grid--cols-sm-3 { --q-grid-cols: 3; }
-.q-grid--cols-sm-4 { --q-grid-cols: 4; }
-.q-grid--cols-sm-5 { --q-grid-cols: 5; }
-.q-grid--cols-sm-6 { --q-grid-cols: 6; }
-.q-grid--cols-sm-7 { --q-grid-cols: 7; }
-.q-grid--cols-sm-8 { --q-grid-cols: 8; }
-.q-grid--cols-sm-9 { --q-grid-cols: 9; }
-.q-grid--cols-sm-10 { --q-grid-cols: 10; }
-.q-grid--cols-sm-11 { --q-grid-cols: 11; }
-.q-grid--cols-sm-12 { --q-grid-cols: 12; }
-.q-col--span-md-1 { --q-col-span: 1; }
-.q-col--span-md-2 { --q-col-span: 2; }
-.q-col--span-md-3 { --q-col-span: 3; }
-.q-col--span-md-4 { --q-col-span: 4; }
-.q-col--span-md-5 { --q-col-span: 5; }
-.q-col--span-md-6 { --q-col-span: 6; }
-.q-col--span-md-7 { --q-col-span: 7; }
-.q-col--span-md-8 { --q-col-span: 8; }
-.q-col--span-md-9 { --q-col-span: 9; }
-.q-col--span-md-10 { --q-col-span: 10; }
-.q-col--span-md-11 { --q-col-span: 11; }
-.q-col--span-md-12 { --q-col-span: 12; }
-.q-col--offset-md-1 { --q-col-offset: 1; }
-.q-col--offset-md-2 { --q-col-offset: 2; }
-.q-col--offset-md-3 { --q-col-offset: 3; }
-.q-col--offset-md-4 { --q-col-offset: 4; }
-.q-col--offset-md-5 { --q-col-offset: 5; }
-.q-col--offset-md-6 { --q-col-offset: 6; }
-.q-col--offset-md-7 { --q-col-offset: 7; }
-.q-col--offset-md-8 { --q-col-offset: 8; }
-.q-col--offset-md-9 { --q-col-offset: 9; }
-.q-col--offset-md-10 { --q-col-offset: 10; }
-.q-col--offset-md-11 { --q-col-offset: 11; }
-.q-grid--cols-md-1 { --q-grid-cols: 1; }
-.q-grid--cols-md-2 { --q-grid-cols: 2; }
-.q-grid--cols-md-3 { --q-grid-cols: 3; }
-.q-grid--cols-md-4 { --q-grid-cols: 4; }
-.q-grid--cols-md-5 { --q-grid-cols: 5; }
-.q-grid--cols-md-6 { --q-grid-cols: 6; }
-.q-grid--cols-md-7 { --q-grid-cols: 7; }
-.q-grid--cols-md-8 { --q-grid-cols: 8; }
-.q-grid--cols-md-9 { --q-grid-cols: 9; }
-.q-grid--cols-md-10 { --q-grid-cols: 10; }
-.q-grid--cols-md-11 { --q-grid-cols: 11; }
-.q-grid--cols-md-12 { --q-grid-cols: 12; }
-.q-col--span-lg-1 { --q-col-span: 1; }
-.q-col--span-lg-2 { --q-col-span: 2; }
-.q-col--span-lg-3 { --q-col-span: 3; }
-.q-col--span-lg-4 { --q-col-span: 4; }
-.q-col--span-lg-5 { --q-col-span: 5; }
-.q-col--span-lg-6 { --q-col-span: 6; }
-.q-col--span-lg-7 { --q-col-span: 7; }
-.q-col--span-lg-8 { --q-col-span: 8; }
-.q-col--span-lg-9 { --q-col-span: 9; }
-.q-col--span-lg-10 { --q-col-span: 10; }
-.q-col--span-lg-11 { --q-col-span: 11; }
-.q-col--span-lg-12 { --q-col-span: 12; }
-.q-col--offset-lg-1 { --q-col-offset: 1; }
-.q-col--offset-lg-2 { --q-col-offset: 2; }
-.q-col--offset-lg-3 { --q-col-offset: 3; }
-.q-col--offset-lg-4 { --q-col-offset: 4; }
-.q-col--offset-lg-5 { --q-col-offset: 5; }
-.q-col--offset-lg-6 { --q-col-offset: 6; }
-.q-col--offset-lg-7 { --q-col-offset: 7; }
-.q-col--offset-lg-8 { --q-col-offset: 8; }
-.q-col--offset-lg-9 { --q-col-offset: 9; }
-.q-col--offset-lg-10 { --q-col-offset: 10; }
-.q-col--offset-lg-11 { --q-col-offset: 11; }
-.q-grid--cols-lg-1 { --q-grid-cols: 1; }
-.q-grid--cols-lg-2 { --q-grid-cols: 2; }
-.q-grid--cols-lg-3 { --q-grid-cols: 3; }
-.q-grid--cols-lg-4 { --q-grid-cols: 4; }
-.q-grid--cols-lg-5 { --q-grid-cols: 5; }
-.q-grid--cols-lg-6 { --q-grid-cols: 6; }
-.q-grid--cols-lg-7 { --q-grid-cols: 7; }
-.q-grid--cols-lg-8 { --q-grid-cols: 8; }
-.q-grid--cols-lg-9 { --q-grid-cols: 9; }
-.q-grid--cols-lg-10 { --q-grid-cols: 10; }
-.q-grid--cols-lg-11 { --q-grid-cols: 11; }
-.q-grid--cols-lg-12 { --q-grid-cols: 12; }
-.q-col--span-xl-1 { --q-col-span: 1; }
-.q-col--span-xl-2 { --q-col-span: 2; }
-.q-col--span-xl-3 { --q-col-span: 3; }
-.q-col--span-xl-4 { --q-col-span: 4; }
-.q-col--span-xl-5 { --q-col-span: 5; }
-.q-col--span-xl-6 { --q-col-span: 6; }
-.q-col--span-xl-7 { --q-col-span: 7; }
-.q-col--span-xl-8 { --q-col-span: 8; }
-.q-col--span-xl-9 { --q-col-span: 9; }
-.q-col--span-xl-10 { --q-col-span: 10; }
-.q-col--span-xl-11 { --q-col-span: 11; }
-.q-col--span-xl-12 { --q-col-span: 12; }
-.q-col--offset-xl-1 { --q-col-offset: 1; }
-.q-col--offset-xl-2 { --q-col-offset: 2; }
-.q-col--offset-xl-3 { --q-col-offset: 3; }
-.q-col--offset-xl-4 { --q-col-offset: 4; }
-.q-col--offset-xl-5 { --q-col-offset: 5; }
-.q-col--offset-xl-6 { --q-col-offset: 6; }
-.q-col--offset-xl-7 { --q-col-offset: 7; }
-.q-col--offset-xl-8 { --q-col-offset: 8; }
-.q-col--offset-xl-9 { --q-col-offset: 9; }
-.q-col--offset-xl-10 { --q-col-offset: 10; }
-.q-col--offset-xl-11 { --q-col-offset: 11; }
-.q-grid--cols-xl-1 { --q-grid-cols: 1; }
-.q-grid--cols-xl-2 { --q-grid-cols: 2; }
-.q-grid--cols-xl-3 { --q-grid-cols: 3; }
-.q-grid--cols-xl-4 { --q-grid-cols: 4; }
-.q-grid--cols-xl-5 { --q-grid-cols: 5; }
-.q-grid--cols-xl-6 { --q-grid-cols: 6; }
-.q-grid--cols-xl-7 { --q-grid-cols: 7; }
-.q-grid--cols-xl-8 { --q-grid-cols: 8; }
-.q-grid--cols-xl-9 { --q-grid-cols: 9; }
-.q-grid--cols-xl-10 { --q-grid-cols: 10; }
-.q-grid--cols-xl-11 { --q-grid-cols: 11; }
-.q-grid--cols-xl-12 { --q-grid-cols: 12; }
+
+/* breakpoint sm : >= 600px */
+@media (min-width: 600px) {
+  .q-col--span-sm-1 { --q-col-span: 1; }
+  .q-col--span-sm-2 { --q-col-span: 2; }
+  .q-col--span-sm-3 { --q-col-span: 3; }
+  .q-col--span-sm-4 { --q-col-span: 4; }
+  .q-col--span-sm-5 { --q-col-span: 5; }
+  .q-col--span-sm-6 { --q-col-span: 6; }
+  .q-col--span-sm-7 { --q-col-span: 7; }
+  .q-col--span-sm-8 { --q-col-span: 8; }
+  .q-col--span-sm-9 { --q-col-span: 9; }
+  .q-col--span-sm-10 { --q-col-span: 10; }
+  .q-col--span-sm-11 { --q-col-span: 11; }
+  .q-col--span-sm-12 { --q-col-span: 12; }
+  .q-col--offset-sm-1 { --q-col-offset: 1; }
+  .q-col--offset-sm-2 { --q-col-offset: 2; }
+  .q-col--offset-sm-3 { --q-col-offset: 3; }
+  .q-col--offset-sm-4 { --q-col-offset: 4; }
+  .q-col--offset-sm-5 { --q-col-offset: 5; }
+  .q-col--offset-sm-6 { --q-col-offset: 6; }
+  .q-col--offset-sm-7 { --q-col-offset: 7; }
+  .q-col--offset-sm-8 { --q-col-offset: 8; }
+  .q-col--offset-sm-9 { --q-col-offset: 9; }
+  .q-col--offset-sm-10 { --q-col-offset: 10; }
+  .q-col--offset-sm-11 { --q-col-offset: 11; }
+  .q-grid--cols-sm-1 { --q-grid-cols: 1; }
+  .q-grid--cols-sm-2 { --q-grid-cols: 2; }
+  .q-grid--cols-sm-3 { --q-grid-cols: 3; }
+  .q-grid--cols-sm-4 { --q-grid-cols: 4; }
+  .q-grid--cols-sm-5 { --q-grid-cols: 5; }
+  .q-grid--cols-sm-6 { --q-grid-cols: 6; }
+  .q-grid--cols-sm-7 { --q-grid-cols: 7; }
+  .q-grid--cols-sm-8 { --q-grid-cols: 8; }
+  .q-grid--cols-sm-9 { --q-grid-cols: 9; }
+  .q-grid--cols-sm-10 { --q-grid-cols: 10; }
+  .q-grid--cols-sm-11 { --q-grid-cols: 11; }
+  .q-grid--cols-sm-12 { --q-grid-cols: 12; }
+}
+
+/* breakpoint md : >= 1024px */
+@media (min-width: 1024px) {
+  .q-col--span-md-1 { --q-col-span: 1; }
+  .q-col--span-md-2 { --q-col-span: 2; }
+  .q-col--span-md-3 { --q-col-span: 3; }
+  .q-col--span-md-4 { --q-col-span: 4; }
+  .q-col--span-md-5 { --q-col-span: 5; }
+  .q-col--span-md-6 { --q-col-span: 6; }
+  .q-col--span-md-7 { --q-col-span: 7; }
+  .q-col--span-md-8 { --q-col-span: 8; }
+  .q-col--span-md-9 { --q-col-span: 9; }
+  .q-col--span-md-10 { --q-col-span: 10; }
+  .q-col--span-md-11 { --q-col-span: 11; }
+  .q-col--span-md-12 { --q-col-span: 12; }
+  .q-col--offset-md-1 { --q-col-offset: 1; }
+  .q-col--offset-md-2 { --q-col-offset: 2; }
+  .q-col--offset-md-3 { --q-col-offset: 3; }
+  .q-col--offset-md-4 { --q-col-offset: 4; }
+  .q-col--offset-md-5 { --q-col-offset: 5; }
+  .q-col--offset-md-6 { --q-col-offset: 6; }
+  .q-col--offset-md-7 { --q-col-offset: 7; }
+  .q-col--offset-md-8 { --q-col-offset: 8; }
+  .q-col--offset-md-9 { --q-col-offset: 9; }
+  .q-col--offset-md-10 { --q-col-offset: 10; }
+  .q-col--offset-md-11 { --q-col-offset: 11; }
+  .q-grid--cols-md-1 { --q-grid-cols: 1; }
+  .q-grid--cols-md-2 { --q-grid-cols: 2; }
+  .q-grid--cols-md-3 { --q-grid-cols: 3; }
+  .q-grid--cols-md-4 { --q-grid-cols: 4; }
+  .q-grid--cols-md-5 { --q-grid-cols: 5; }
+  .q-grid--cols-md-6 { --q-grid-cols: 6; }
+  .q-grid--cols-md-7 { --q-grid-cols: 7; }
+  .q-grid--cols-md-8 { --q-grid-cols: 8; }
+  .q-grid--cols-md-9 { --q-grid-cols: 9; }
+  .q-grid--cols-md-10 { --q-grid-cols: 10; }
+  .q-grid--cols-md-11 { --q-grid-cols: 11; }
+  .q-grid--cols-md-12 { --q-grid-cols: 12; }
+}
+
+/* breakpoint lg : >= 1440px */
+@media (min-width: 1440px) {
+  .q-col--span-lg-1 { --q-col-span: 1; }
+  .q-col--span-lg-2 { --q-col-span: 2; }
+  .q-col--span-lg-3 { --q-col-span: 3; }
+  .q-col--span-lg-4 { --q-col-span: 4; }
+  .q-col--span-lg-5 { --q-col-span: 5; }
+  .q-col--span-lg-6 { --q-col-span: 6; }
+  .q-col--span-lg-7 { --q-col-span: 7; }
+  .q-col--span-lg-8 { --q-col-span: 8; }
+  .q-col--span-lg-9 { --q-col-span: 9; }
+  .q-col--span-lg-10 { --q-col-span: 10; }
+  .q-col--span-lg-11 { --q-col-span: 11; }
+  .q-col--span-lg-12 { --q-col-span: 12; }
+  .q-col--offset-lg-1 { --q-col-offset: 1; }
+  .q-col--offset-lg-2 { --q-col-offset: 2; }
+  .q-col--offset-lg-3 { --q-col-offset: 3; }
+  .q-col--offset-lg-4 { --q-col-offset: 4; }
+  .q-col--offset-lg-5 { --q-col-offset: 5; }
+  .q-col--offset-lg-6 { --q-col-offset: 6; }
+  .q-col--offset-lg-7 { --q-col-offset: 7; }
+  .q-col--offset-lg-8 { --q-col-offset: 8; }
+  .q-col--offset-lg-9 { --q-col-offset: 9; }
+  .q-col--offset-lg-10 { --q-col-offset: 10; }
+  .q-col--offset-lg-11 { --q-col-offset: 11; }
+  .q-grid--cols-lg-1 { --q-grid-cols: 1; }
+  .q-grid--cols-lg-2 { --q-grid-cols: 2; }
+  .q-grid--cols-lg-3 { --q-grid-cols: 3; }
+  .q-grid--cols-lg-4 { --q-grid-cols: 4; }
+  .q-grid--cols-lg-5 { --q-grid-cols: 5; }
+  .q-grid--cols-lg-6 { --q-grid-cols: 6; }
+  .q-grid--cols-lg-7 { --q-grid-cols: 7; }
+  .q-grid--cols-lg-8 { --q-grid-cols: 8; }
+  .q-grid--cols-lg-9 { --q-grid-cols: 9; }
+  .q-grid--cols-lg-10 { --q-grid-cols: 10; }
+  .q-grid--cols-lg-11 { --q-grid-cols: 11; }
+  .q-grid--cols-lg-12 { --q-grid-cols: 12; }
+}
+
+/* breakpoint xl : >= 1920px */
+@media (min-width: 1920px) {
+  .q-col--span-xl-1 { --q-col-span: 1; }
+  .q-col--span-xl-2 { --q-col-span: 2; }
+  .q-col--span-xl-3 { --q-col-span: 3; }
+  .q-col--span-xl-4 { --q-col-span: 4; }
+  .q-col--span-xl-5 { --q-col-span: 5; }
+  .q-col--span-xl-6 { --q-col-span: 6; }
+  .q-col--span-xl-7 { --q-col-span: 7; }
+  .q-col--span-xl-8 { --q-col-span: 8; }
+  .q-col--span-xl-9 { --q-col-span: 9; }
+  .q-col--span-xl-10 { --q-col-span: 10; }
+  .q-col--span-xl-11 { --q-col-span: 11; }
+  .q-col--span-xl-12 { --q-col-span: 12; }
+  .q-col--offset-xl-1 { --q-col-offset: 1; }
+  .q-col--offset-xl-2 { --q-col-offset: 2; }
+  .q-col--offset-xl-3 { --q-col-offset: 3; }
+  .q-col--offset-xl-4 { --q-col-offset: 4; }
+  .q-col--offset-xl-5 { --q-col-offset: 5; }
+  .q-col--offset-xl-6 { --q-col-offset: 6; }
+  .q-col--offset-xl-7 { --q-col-offset: 7; }
+  .q-col--offset-xl-8 { --q-col-offset: 8; }
+  .q-col--offset-xl-9 { --q-col-offset: 9; }
+  .q-col--offset-xl-10 { --q-col-offset: 10; }
+  .q-col--offset-xl-11 { --q-col-offset: 11; }
+  .q-grid--cols-xl-1 { --q-grid-cols: 1; }
+  .q-grid--cols-xl-2 { --q-grid-cols: 2; }
+  .q-grid--cols-xl-3 { --q-grid-cols: 3; }
+  .q-grid--cols-xl-4 { --q-grid-cols: 4; }
+  .q-grid--cols-xl-5 { --q-grid-cols: 5; }
+  .q-grid--cols-xl-6 { --q-grid-cols: 6; }
+  .q-grid--cols-xl-7 { --q-grid-cols: 7; }
+  .q-grid--cols-xl-8 { --q-grid-cols: 8; }
+  .q-grid--cols-xl-9 { --q-grid-cols: 9; }
+  .q-grid--cols-xl-10 { --q-grid-cols: 10; }
+  .q-grid--cols-xl-11 { --q-grid-cols: 11; }
+  .q-grid--cols-xl-12 { --q-grid-cols: 12; }
+}
 
 /* ===== QGrid — mode cellules (Vant Grid) =====
    Activé par :column-num — cellules QGridItem en grille égale, avec icône + texte. */