@dnax/ui 0.0.44 → 0.0.46

package/components/QApp.vue

@@ -1,8 +1,15 @@
+<script setup lang="ts">
+// QApp — conteneur racine de l'application : une div + le slot, en colonne flex sur
+// toute la largeur et une hauteur d'écran. C'est le pendant **pur CSS** de
+// `flex h-screen w-full` (cf. `styles/main.css` : `display: flex; flex-direction: column;
+// width: 100%; height: 100dvh`) — les classes sont aussi posées sur la div pour les
+// apps Tailwind.
+// Les barres (`fixed` ou non) et leurs offsets sont résolus dans son sous-arbre par
+// `lib/fixedLayout.ts`, d'où le `<slot />` qui doit rester son unique enfant.
+</script>
+
 <template>
-<div class="q-app">
-  <slot></slot>
-</div>
+  <div class="q-app flex h-screen w-full" v-bind="$attrs">
+    <slot />
+  </div>
 </template>
-<script setup>
-
-</script>

package/components/QFooter.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 // QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
-import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
+import { 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) */
+  sticky?: boolean
   /** Ombre portée vers le haut */
   elevated?: boolean
   /** Masqué au scroll vers le bas, réaffiché au scroll vers le haut */
@@ -22,6 +25,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fixed: false,
+  sticky: false,
   elevated: false,
   reveal: false,
   bordered: false,
@@ -30,6 +34,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const rootEl = ref<HTMLElement | null>(null)
 
+// Placement dans un QLayout (facultatif) : cellule « f » du `view`, et sticky imposé
+// 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)
+const layoutStyle = computed<Record<string, string | undefined>>(() => ({
+  gridArea: zone.value?.area,
+}))
+
 // Empilement : bottom = hauteur cumulée des footers fixed suivants (si fixed)
 useFixedBarOffset(rootEl, "bar-bottom", () => props.fixed)
 
@@ -68,6 +81,7 @@ onBeforeUnmount(() => {
     class="q-footer"
     :class="{
       'q-footer--fixed': fixed,
+      'q-footer--sticky': isSticky,
       'q-footer--elevated': props.elevated,
       'q-footer--bordered': props.bordered,
       'q-footer--reveal': props.reveal,
@@ -76,7 +90,7 @@ onBeforeUnmount(() => {
       'q-footer--glass': props.glass,
       'q-footer--no-padding': props.noPadding,
     }"
-    :style="translucentStyle"
+    :style="[translucentStyle, layoutStyle]"
     v-bind="$attrs"
   >
     <slot />

package/components/QHeader.vue

@@ -3,12 +3,15 @@
 // Safe-area top/left/right appliquées toujours (styles/main.css).
 // Quand plusieurs barres fixed sont empilées (q-back-header + q-header), chaque
 // barre se décale sous la précédente automatiquement.
-import { computed, ref } from "vue"
+import { computed, inject, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
+import { qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Fixe la barre en haut de l'écran (sort du flux) */
   fixed?: boolean
+  /** Colle la barre en haut pendant le scroll du document (automatique dans un QLayout avec une lettre majuscule) */
+  sticky?: boolean
   /** Fond translucide (frosted glass) : true = 70%, ou valeur % ("70") */
   translucent?: boolean | number
   /** Glassmorphism marqué : fond très translucide + flou fort + bordure claire */
@@ -17,10 +20,20 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fixed: false,
+  sticky: false,
 })
 
 const rootEl = ref<HTMLElement | null>(null)
 
+// Placement dans un QLayout (facultatif) : cellule « h » du `view`, et sticky imposé
+// 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)
+const layoutStyle = computed<Record<string, string | undefined>>(() => ({
+  gridArea: zone.value?.area,
+}))
+
 // Empilement : top = hauteur cumulée des barres fixed précédentes (si fixed)
 useFixedBarOffset(rootEl, "bar", () => props.fixed)
 
@@ -37,10 +50,11 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
     class="q-header"
     :class="{
       'q-header--fixed': fixed,
+      'q-header--sticky': isSticky,
       'q-header--translucent': translucent === true || typeof translucent === 'number',
       'q-header--glass': glass,
     }"
-    :style="translucentStyle"
+    :style="[translucentStyle, layoutStyle]"
     v-bind="$attrs"
   >
     <slot />

package/components/QLayout.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// QLayout — matrice 3×3 pilotée par le prop `view` (modèle Quasar). Les enfants
+// **directs** se placent eux-mêmes : q-header en cellule « h », q-footer en « f »,
+// q-sidebar en « l » / « r », et tout le reste — donc le contenu — en cellule « p ».
+//
+//   <q-layout view="hHh LpR fFf">
+//     <q-header>…</q-header>
+//     <q-sidebar side="left" show-if-above>…</q-sidebar>
+//     <q-page>…</q-page>        ← un SEUL enfant de contenu
+//     <q-footer>…</q-footer>
+//   </q-layout>
+//
+// Majuscule = la zone reste en place au scroll (`position: sticky`), minuscule =
+// elle défile avec la page. L'analyse de `view` vit dans `lib/layout.ts` (pure) ;
+// ici : le rendu de la grille et la mesure.
+//
+// Deux différences assumées avec Quasar : le scroll reste celui du **document**
+// (pas de scroll interne, donc `QFooter reveal`, `QSidebar` statique et les
+// safe-areas continuent de fonctionner), et un header sticky est **clos dans sa
+// cellule** — il ne peut pas passer au-dessus du drawer voisin.
+//
+// Les hauteurs des barres sont mesurées en continu et publiées en variables CSS
+// (`--q-layout-header-h` / `--q-layout-footer-h` / `--q-layout-viewport-h`) : les
+// drawers sticky s'y accrochent sans glisser sous le header, et la hauteur de
+// référence suit le mode (fenêtre, ou conteneur en mode `container`).
+import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from "vue"
+import type { StyleValue } from "vue"
+import { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "../lib/layout"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Matrice 3×3 : 3 groupes de 3 lettres (l, h, r, f, p, ou .) + casse = la zone reste en place */
+  view?: string
+  /** Layout conteneur (comme Quasar) : ne gère pas la fenêtre, une hauteur explicite est requise */
+  container?: boolean
+  /** Classe(s) additionnelle(s) */
+  class?: string
+  /** Styles CSS additionnels */
+  style?: StyleValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: DEFAULT_LAYOUT_VIEW,
+  container: false,
+  class: "",
+  style: undefined,
+})
+
+const parsed = computed(() => parseView(props.view))
+
+// Une `view` invalide n'est jamais fatale : la vue par défaut s'applique et, en dev,
+// la raison est affichée (l'analyse est pure, le composant ne fait que rapporter).
+watch(
+  parsed,
+  (v) => {
+    if (v.error) console.warn(`[q-layout] ${v.error} — vue par défaut appliquée`)
+  },
+  { immediate: true },
+)
+
+// Les enfants (q-header, q-footer, q-sidebar) lisent leur cellule ici.
+provide(qLayoutKey, { zones: computed(() => parsed.value.zones), container: toRef(props, "container") })
+
+const rootEl = ref<HTMLElement | null>(null)
+
+// — Mesure des barres : hauteur cumulée des headers/footers enfants directs —
+let ro: ResizeObserver | null = null
+let mo: MutationObserver | null = null
+
+const bars = (): HTMLElement[] =>
+  Array.from(rootEl.value?.children ?? []).filter(
+    (el): el is HTMLElement =>
+      el instanceof HTMLElement && el.matches(".q-header, .q-back-header, .q-footer"),
+  )
+
+const measure = () => {
+  const root = rootEl.value
+  if (!root || typeof window === "undefined") return
+  let header = 0
+  let footer = 0
+  for (const bar of bars()) {
+    if (bar.matches(".q-footer")) footer += bar.offsetHeight
+    else header += bar.offsetHeight
+  }
+  // Hauteur de référence des zones sticky : la fenêtre, ou le conteneur (mode `container`)
+  const viewport = props.container ? root.clientHeight : window.innerHeight
+  root.style.setProperty("--q-layout-header-h", `${header}px`)
+  root.style.setProperty("--q-layout-footer-h", `${footer}px`)
+  root.style.setProperty("--q-layout-viewport-h", `${viewport}px`)
+}
+
+// Les barres peuvent être rendues conditionnellement (v-if) → on ré-observe.
+const observe = () => {
+  ro?.disconnect()
+  if (typeof ResizeObserver === "undefined") return
+  ro = new ResizeObserver(measure)
+  bars().forEach((bar) => ro!.observe(bar))
+  // En mode conteneur la hauteur de référence est celle du conteneur : on la suit
+  if (props.container && rootEl.value) ro.observe(rootEl.value)
+}
+
+onMounted(() => {
+  measure()
+  observe()
+  if (typeof MutationObserver !== "undefined" && rootEl.value) {
+    mo = new MutationObserver(() => {
+      observe()
+      measure()
+    })
+    mo.observe(rootEl.value, { childList: true })
+  }
+  window.addEventListener("resize", measure)
+})
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  window.removeEventListener("resize", measure)
+})
+
+// Cellules de la grille (`grid-template-areas` + cellule par défaut du contenu).
+const rootStyle = computed<Record<string, string>>(() => ({
+  "--q-layout-areas": parsed.value.gridTemplateAreas,
+  "--q-layout-page-area": parsed.value.zones.page.area ?? "p",
+}))
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="q-layout"
+    :class="cn(container && 'q-layout--container', props.class)"
+    :style="[rootStyle, props.style]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/components/QSelect.vue

@@ -56,7 +56,7 @@ import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyle, radiusValue, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { createSearcher } from "../lib/search"
@@ -184,6 +184,11 @@ defineSlots<{
   hint?: () => any
 }>()
 
+// Multi-racines (le champ + les <Teleport> du popup et du panneau) : Vue ne peut pas
+// hériter les attributs tout seul (avertissement « fragment or text or teleport root
+// nodes »). Ils sont posés explicitement sur le champ (racine principale).
+defineOptions({ inheritAttrs: false })
+
 const instance = getCurrentInstance()
 const hasFilter = computed(() => !!instance?.vnode.props?.onFilter)
 
@@ -223,9 +228,11 @@ const VIEWPORT_MARGIN = 8
 
 const popupDirection = ref<"down" | "up">("down")
 const popupMaxHeight = ref(POPUP_MAX_HEIGHT)
-/** Décalages en px par rapport à la RACINE (bloc conteneur du popup) — null avant mesure */
+/** Coordonnées **fenêtre** : le popup est téléporté dans <body> (`position: fixed`) — null avant mesure */
 const popupTop = ref<number | null>(null)
 const popupBottom = ref<number | null>(null)
+/** Rect du champ (coordonnées fenêtre) : ancre horizontale du popup */
+const popupAnchor = ref<{ left: number; right: number; width: number } | null>(null)
 
 /** Écart champ ↔ popup : `inline-options.offset` prioritaire sur la prop `offset` */
 const popupOffset = computed(() => modeOptions.value?.offset ?? props.offset)
@@ -265,17 +272,32 @@ const positionPopup = () => {
 
   popupDirection.value = down ? "down" : "up"
   popupMaxHeight.value = Math.max(0, Math.min(POPUP_MAX_HEIGHT, available - gap))
-  popupTop.value = Math.round(anchor.bottom - rect.top + gap)
-  popupBottom.value = Math.round(rect.bottom - anchor.top + gap)
+  // Tout en coordonnées fenêtre : le popup est `fixed` dans <body>, il n'est donc
+  // plus positionné par rapport à la racine du composant. Horizontalement on garde la
+  // boîte du CHAMP (c'était `left: 0; right: 0` sur la racine), verticalement l'ancre.
+  popupAnchor.value = { left: rect.left, right: rect.right, width: rect.width }
+  popupTop.value = Math.round(anchor.bottom + gap)
+  popupBottom.value = Math.round(window.innerHeight - anchor.top + gap)
 }
 
 const popupStyle = computed<Record<string, string>>(() => {
   const up = popupDirection.value === "up"
-  const fallback = `calc(100% + ${popupOffset.value}px)`
+  const anchor = popupAnchor.value
   const style: Record<string, string> = {
-    top: up ? "auto" : popupTop.value === null ? fallback : `${popupTop.value}px`,
-    bottom: up ? (popupBottom.value === null ? fallback : `${popupBottom.value}px`) : "auto",
     maxHeight: `${Math.round(popupMaxHeight.value)}px`,
+    // Arrondi : l'échelle de radius du composant (composantProps / prop), sinon la
+    // variable globale. Le popup est TÉLÉPORTÉ dans <body> : il n'hérite plus de
+    // `--q-radius` posé sur le champ, d'où la valeur matérialisée ici.
+    borderRadius: radiusValue(effectiveFieldRadius.value) ?? "var(--q-radius, 4px)",
+  }
+
+  // Vertical : sous le champ, ou au-dessus (bascule / placement forcé)
+  if (up) {
+    style.bottom = popupBottom.value === null ? "0px" : `${popupBottom.value}px`
+    style.top = "auto"
+  } else {
+    style.top = popupTop.value === null ? "0px" : `${popupTop.value}px`
+    style.bottom = "auto"
   }
 
   // Ancre horizontale : par défaut le popup couvre la largeur du champ. Les suffixes
@@ -284,14 +306,19 @@ const popupStyle = computed<Record<string, string>>(() => {
   const placement = popupPlacement.value
   const width = modeOptions.value?.width
   const anchored = placement !== "auto" && placement.includes("-")
+  const left = anchor?.left ?? 0
+  const right =
+    anchor && typeof window !== "undefined" ? window.innerWidth - anchor.right : 0
+
   if (anchored || width) {
     const alignEnd = placement.endsWith("-end")
-    style.left = alignEnd ? "auto" : "0"
-    style.right = alignEnd ? "0" : "auto"
-    style.width = width ?? "100%"
+    style.left = alignEnd ? "auto" : `${left}px`
+    style.right = alignEnd ? `${right}px` : "auto"
+    style.width = width ?? "auto"
   } else {
-    style.left = "0"
-    style.right = "0"
+    style.left = `${left}px`
+    style.right = "auto"
+    style.width = anchor ? `${anchor.width}px` : "auto"
   }
 
   return style
@@ -575,6 +602,8 @@ const onDocMousedown = (e: MouseEvent) => {
   const target = e.target as Node
   if (rootEl.value?.contains(target)) return
   if (sheetRef.value?.contains(target)) return
+  // Popup inline : téléporté dans <body>, donc HORS de la racine du composant
+  if (popupRef.value?.contains(target)) return
   closePopup()
 }
 
@@ -643,7 +672,10 @@ const sheetRadiusStyle = computed<Record<string, string> | undefined>(() => {
   const rounded = modeOptions.value?.rounded ?? props.rounded
   if (rounded === false) return { borderRadius: "0" }
 
-  const defaultRadius = props.mode === "modal" ? "20px" : "12px"
+  // Défaut : l'échelle de radius du composant (composantProps), sinon le défaut
+  // historique du mode — le panneau est téléporté, il ne peut pas lire `--q-radius`.
+  const defaultRadius =
+    radiusValue(effectiveFieldRadius.value) ?? (props.mode === "modal" ? "20px" : "12px")
   const value = typeof rounded === "string" ? rounded : defaultRadius
   const asPx = (v: string | number) => (typeof v === "number" ? `${v}px` : v)
 
@@ -672,7 +704,7 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
 </script>
 
 <template>
-  <div ref="rootEl" class="q-select" :class="fieldClasses" :style="fieldRadiusStyle">
+  <div ref="rootEl" class="q-select" :class="fieldClasses" :style="fieldRadiusStyle" v-bind="$attrs">
     <label v-if="label" class="q-field__label-stack">{{ label }}</label>
     <div class="q-field__control" @click="onControlClick">
       <slot name="prepend">
@@ -751,50 +783,53 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
       </div>
     </div>
 
-    <!-- Popup inline (mode inline) -->
-    <div
-      v-if="open && mode === 'inline'"
-      ref="popupRef"
-      class="q-select__popup"
-      :class="[inlineOptions?.class, popupDirection === 'up' && 'q-select__popup--up']"
-      :style="[popupStyle, inlineOptions?.style]"
-      role="listbox"
-      @mousedown.prevent
-    >
-      <div v-if="searchEnabled && !useInput" class="q-select__search" @mousedown.stop>
-        <Icon :icon="icons.search" class="q-select__search-icon" aria-hidden="true" />
-        <input
-          class="q-select__search-input"
-          :value="query"
-          :placeholder="effectiveSearchPlaceholder"
-          @input="onInput"
-          @keydown="onKeydown"
-        />
-      </div>
-      <template v-if="displayOptions.length">
-        <div
-          v-for="(opt, i) in displayOptions"
-          :key="String(getOptionValue(opt))"
-          role="option"
-          :aria-selected="isSelected(opt) ? 'true' : 'false'"
-          class="q-select__option"
-          :class="{
-            'q-select__option--active': i === activeIndex,
-            'q-select__option--selected': isSelected(opt),
-          }"
-          @mouseenter="activeIndex = i"
-          @mousedown.prevent="select(opt)"
-        >
-          <slot :opt="opt" :index="i" :selected="isSelected(opt)">
-            <span class="q-select__option-label">{{ getOptionLabel(opt) }}</span>
-          </slot>
-          <Icon :icon="icons.check" v-if="multiple && isSelected(opt)" class="q-select__check" aria-hidden="true" />
+    <!-- Popup inline (mode inline) : téléporté dans <body> + `position: fixed`,
+         pour échapper au `overflow: hidden` d'un q-card (cf. positionPopup) -->
+    <Teleport to="body">
+      <div
+        v-if="open && mode === 'inline'"
+        ref="popupRef"
+        class="q-select__popup"
+        :class="[inlineOptions?.class, popupDirection === 'up' && 'q-select__popup--up']"
+        :style="[popupStyle, inlineOptions?.style]"
+        role="listbox"
+        @mousedown.prevent
+      >
+        <div v-if="searchEnabled && !useInput" class="q-select__search" @mousedown.stop>
+          <Icon :icon="icons.search" class="q-select__search-icon" aria-hidden="true" />
+          <input
+            class="q-select__search-input"
+            :value="query"
+            :placeholder="effectiveSearchPlaceholder"
+            @input="onInput"
+            @keydown="onKeydown"
+          />
+        </div>
+        <template v-if="displayOptions.length">
+          <div
+            v-for="(opt, i) in displayOptions"
+            :key="String(getOptionValue(opt))"
+            role="option"
+            :aria-selected="isSelected(opt) ? 'true' : 'false'"
+            class="q-select__option"
+            :class="{
+              'q-select__option--active': i === activeIndex,
+              'q-select__option--selected': isSelected(opt),
+            }"
+            @mouseenter="activeIndex = i"
+            @mousedown.prevent="select(opt)"
+          >
+            <slot :opt="opt" :index="i" :selected="isSelected(opt)">
+              <span class="q-select__option-label">{{ getOptionLabel(opt) }}</span>
+            </slot>
+            <Icon :icon="icons.check" v-if="multiple && isSelected(opt)" class="q-select__check" aria-hidden="true" />
+          </div>
+        </template>
+        <div v-else class="q-select__empty">
+          <slot name="noOption">{{ noOptionsLabel }}</slot>
         </div>
-      </template>
-      <div v-else class="q-select__empty">
-        <slot name="noOption">{{ noOptionsLabel }}</slot>
       </div>
-    </div>
+    </Teleport>
 
     <!-- Mode modal / sheet / dialog : panneau téléporté -->
     <Teleport to="body">

package/components/QSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 // QSidebar — panneau latéral type Sidebar shadcn-vue, API QDrawer Quasar :
-// <q-sidebar v-model="open" side="left" width="260px" bordered show-if-above breakpoint="1023">
+// <q-sidebar v-model="open" side="left" width="260px" bordered show-if-above :breakpoint="1023">
 // Fournit le contexte (toggle) aux QSidebarTrigger enfants.
 import type { InjectionKey, Ref } from "vue"
 
@@ -14,10 +14,11 @@ export const qSidebarKey: InjectionKey<SidebarContext> = Symbol("q-sidebar")
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
+import { computed, inject, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
 import type { StyleValue } from "vue"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Ouvert (v-model) — mode offcanvas ; ignoré en mode statique */
@@ -68,6 +69,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
 
+// Multi-racines (<aside> + backdrop) : Vue ne peut pas hériter les attributs tout seul
+// (avertissement « could not be automatically inherited because component renders
+// fragment … »). On les applique explicitement sur le panneau, la seule racine qui
+// compte : `id`, `data-*`, `aria-label`… arrivent donc sur l'<aside> (l'accessibilité
+// et les sélecteurs de test sont préservés). `class` / `style` restent des props.
+defineOptions({ inheritAttrs: false })
+
 // — Mode statique (viewport >= breakpoint && show-if-above) —
 const isAbove = ref(false)
 let mql: MediaQueryList | null = null
@@ -97,6 +105,13 @@ const toggle = () => setOpen(!open.value)
 
 provide<SidebarContext>(qSidebarKey, { open, setOpen, toggle })
 
+// — Placement dans un QLayout (facultatif) —
+// En mode statique le panneau occupe sa cellule (« l » / « r » du `view`) et devient
+// sticky si la lettre est en majuscule ; en offcanvas il est `fixed` (recouvrant),
+// donc sa place dans la grille ne compte plus.
+const layout = inject(qLayoutKey, null)
+const layoutZone = computed(() => layout?.zones.value[props.side])
+
 // « Retour » navigateur → ferme la sidebar (mode offcanvas uniquement)
 const overlayOpen = computed(() => !isStatic.value && open.value)
 useOverlayBack(overlayOpen, () => setOpen(false), "QSidebar")
@@ -131,7 +146,8 @@ const rootClasses = computed(() =>
     isStatic.value ? "q-sidebar--static" : "q-sidebar--offcanvas",
     !isStatic.value && open.value && "q-sidebar--open",
     props.side === "right" && "q-sidebar--right",
-    props.sticky && "q-sidebar--sticky",
+    // sticky : prop explicite, ou imposé par la casse de la lettre dans un QLayout
+    (props.sticky || !!layoutZone.value?.fixed) && "q-sidebar--sticky",
     props.bordered && "q-sidebar--bordered",
     props.elevated && "q-sidebar--elevated",
     props.dark && "q-sidebar--dark",
@@ -143,6 +159,14 @@ const rootStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = { "--q-sidebar-w": props.width }
   if (props.height) style.height = props.height
   if (props.maxHeight) style.maxHeight = props.maxHeight
+  // Cellule de la grille QLayout (mode statique : en offcanvas le panneau est fixed)
+  const zone = layoutZone.value
+  if (isStatic.value && zone?.area) style.gridArea = zone.area
+  // Sticky : ne s'accroche qu'aux barres qui le surplombent (rangée 0 = au-dessus de lui)
+  if (isStatic.value && zone?.fixed) {
+    if (zone.cells.some(([row]) => row === 0)) style["--q-sidebar-sticky-top"] = "0px"
+    if (zone.cells.some(([row]) => row === 2)) style["--q-sidebar-sticky-bottom"] = "0px"
+  }
   return style
 })
 
@@ -221,6 +245,7 @@ watch(open, (v) => {
     class="q-sidebar"
     :class="rootClasses"
     :style="[rootStyle, props.style]"
+    v-bind="$attrs"
     :aria-hidden="!isStatic && !open ? 'true' : undefined"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"

package/components/QTiptap.vue

@@ -816,6 +816,7 @@ defineExpose({
             :disable="!editor.isEditable"
             aria-label="Font size"
             class="q-tiptap__font-size"
+            :inline-options="{ class: 'q-tiptap__font-size-popup', width: '100px' }"
             @update:model-value="onFontSizeUpdate"
           />
         </div>

package/index.ts

@@ -74,6 +74,7 @@ export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
 export { default as QItemSection } from "./components/QItemSection.vue"
+export { default as QLayout } from "./components/QLayout.vue"
 export { default as QLinearProgress } from "./components/QLinearProgress.vue"
 export { default as QList } from "./components/QList.vue"
 export { default as QLoading } from "./components/QLoading.vue"
@@ -135,7 +136,6 @@ export { default as QTiptap } from "./components/QTiptap.vue"
 export { default as QToolbar } from "./components/QToolbar.vue"
 export { default as QTooltip } from "./components/QTooltip.vue"
 export { default as QUploader } from "./components/QUploader.vue"
-export { default as QVideo } from "./components/QVideo.vue"
 export { default as QVirtualScroll } from "./components/QVirtualScroll.vue"
 
 export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
@@ -173,6 +173,8 @@ export type {
   PopoverPlacement,
   PopoverViewport,
 } from "./lib/datePicker"
+export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
+export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"