origam 2.21.0 → 2.22.0

package/dist/src/assets/css/tokens/dark.css

@@ -182,6 +182,11 @@
   --origam-color__surface---inverse: var(--origam-color__neutral---0);
   --origam-color__text---primary: var(--origam-color__neutral---50);
   --origam-color__text---secondary: var(--origam-color__neutral---400);
+  /* #1044 — `neutral---500` échoue AA ici (4.18:1 sur #0a0a0a, sous 4.5:1) ;
+     aucun rung n'existe entre 400 et 500 (300/400/500 = d4d4d4/a3a3a3/737373).
+     `tertiary` s'aplatit donc sur la même valeur que `secondary` en sombre —
+     assumé, pas un oubli : préféré à une violation AA. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---400);
   --origam-color__text---disabled: var(--origam-color__neutral---600);
   --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
   --origam-color__text---onColor: var(--origam-color__neutral---0);
@@ -3192,6 +3197,9 @@
     --origam-color__surface---inverse: var(--origam-color__neutral---0);
     --origam-color__text---primary: var(--origam-color__neutral---50);
     --origam-color__text---secondary: var(--origam-color__neutral---400);
+    /* #1044 — meme aplatissement que le bloc explicite ci-dessus : voir sa
+       note, cette feuille doit rester le miroir exact de ce bloc. */
+    --origam-color__text---tertiary: var(--origam-color__neutral---400);
     --origam-color__text---disabled: var(--origam-color__neutral---600);
     --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
     --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/css/tokens/light.css

@@ -84,6 +84,9 @@
      `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
   --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
+  /* #1044 — un niveau sous `secondary`, mesuré 4.74:1 sur `surface---default`
+     (#ffffff), AA. Voir dark.css pour la contrainte qui a fixé ce rung. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---500);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
   --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -182,6 +182,11 @@
   --origam-color__surface---inverse: var(--origam-color__neutral---0);
   --origam-color__text---primary: var(--origam-color__neutral---50);
   --origam-color__text---secondary: var(--origam-color__neutral---400);
+  /* #1044 — `neutral---500` échoue AA ici (4.18:1 sur #0a0a0a, sous 4.5:1) ;
+     aucun rung n'existe entre 400 et 500 (300/400/500 = d4d4d4/a3a3a3/737373).
+     `tertiary` s'aplatit donc sur la même valeur que `secondary` en sombre —
+     assumé, pas un oubli : préféré à une violation AA. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---400);
   --origam-color__text---disabled: var(--origam-color__neutral---600);
   --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
   --origam-color__text---onColor: var(--origam-color__neutral---0);
@@ -3192,6 +3197,9 @@
     --origam-color__surface---inverse: var(--origam-color__neutral---0);
     --origam-color__text---primary: var(--origam-color__neutral---50);
     --origam-color__text---secondary: var(--origam-color__neutral---400);
+    /* #1044 — meme aplatissement que le bloc explicite ci-dessus : voir sa
+       note, cette feuille doit rester le miroir exact de ce bloc. */
+    --origam-color__text---tertiary: var(--origam-color__neutral---400);
     --origam-color__text---disabled: var(--origam-color__neutral---600);
     --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
     --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/scss/tokens/_light.scss

@@ -84,6 +84,9 @@
      `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
   --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
+  /* #1044 — un niveau sous `secondary`, mesuré 4.74:1 sur `surface---default`
+     (#ffffff), AA. Voir dark.css pour la contrainte qui a fixé ce rung. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---500);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
   --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -1,5 +1,8 @@
 <template>
-	<teleport to="body">
+	<teleport
+			:disabled="!teleportTarget"
+			:to="teleportTarget"
+	>
 		<transition name="origam-command-palette--fade">
 			<div
 					v-if="isActive"
@@ -172,6 +175,7 @@ import OrigamKbd from "../Kbd/OrigamKbd.vue";
 import { useCommand } from "../../composables/CommandPalette/command.composable";
 import { useHotkey } from "../../composables/Commons/hotkey.composable";
 import { useLocale } from "../../composables/Commons/locale.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
 import { COMMAND_PALETTE_DEFAULT_HOTKEY, COMMAND_PALETTE_DEFAULT_MAX_HEIGHT, COMMAND_PALETTE_DEFAULT_WIDTH } from "../../consts/CommandPalette/command-palette.const";
@@ -195,7 +199,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: null, required: false }
+  fontSize: { type: null, required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 const emit = defineEmits(["update:modelValue", "select", "query"]);
 defineSlots();
@@ -208,6 +213,7 @@ watch(registryOpen, (next) => {
 watch(isActive, (next) => {
   if (next !== registryOpen.value) registryOpen.value = next;
 });
+const { teleportTarget } = useTeleport(computed(() => props.attach || false));
 const uid = getUid();
 const inputId = computed(() => `origam-command-palette-input-${uid}`);
 const listboxId = computed(() => `origam-command-palette-listbox-${uid}`);

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -39,7 +39,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -75,6 +74,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   activeClass: { type: String, required: false },
   expandIcon: { type: String, required: false },
   collapseIcon: { type: String, required: false },

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -168,7 +168,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -204,6 +203,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: true },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -144,7 +144,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -180,6 +179,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false },
   scrim: { type: [Boolean, String], required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -1,7 +1,7 @@
 <template>
 	<teleport
-			:disabled="isLayoutOrphan"
-			:to="teleportDrawer"
+			:disabled="teleportDisabled"
+			:to="teleportTo"
 			defer
 	>
 		<origam-transition :transition="transition">
@@ -83,6 +83,7 @@ import { useStateEffect } from "../../composables/Commons/stateEffect.composable
 import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useSticky } from "../../composables/Commons/sticky.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
 import { useTouch } from "../../composables/Commons/touch.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
@@ -104,6 +105,7 @@ const props = defineProps({
   sticky: { type: Boolean, required: false },
   push: { type: [Boolean, null], required: false, default: null },
   clipped: { type: [Boolean, null], required: false, default: null },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true, default: null },
   tag: { type: String, required: false, default: "nav" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -276,6 +278,14 @@ const teleportDrawer = computed(() => {
   if (isLayoutOrphan.value) return void 0;
   return `#${resolvedLayoutId.value} .origam-layout__wrapper`;
 });
+const hasExplicitAttach = computed(() => props.attach !== null);
+const { teleportTarget: attachTarget } = useTeleport(computed(() => props.attach || false));
+const teleportDisabled = computed(() => {
+  return hasExplicitAttach.value ? !attachTarget.value : isLayoutOrphan.value;
+});
+const teleportTo = computed(() => {
+  return hasExplicitAttach.value ? attachTarget.value : teleportDrawer.value;
+});
 const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles });
 const scrimStyles = computed(() => ({
   ...isDragging.value ? {

package/dist/src/components/Menu/OrigamMenu.vue

@@ -101,7 +101,6 @@ import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 const props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -139,6 +138,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   activeClass: { type: String, required: false },
   expandIcon: { type: String, required: false },
   collapseIcon: { type: String, required: false },

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -83,7 +83,6 @@ import { getScrollParent } from "../../utils/Commons/scroll.util";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false, default: true },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -121,7 +120,8 @@ const props = defineProps({
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
-  scrim: { type: [Boolean, String], required: false, default: true }
+  scrim: { type: [Boolean, String], required: false, default: true },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
 defineSlots();

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -120,7 +120,6 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -158,6 +157,7 @@ const props = defineProps({
     component: OrigamSnack
   }) },
   scrim: { type: [Boolean, String], required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   position: { type: null, required: false },
   top: { type: [Number, String], required: false },
   bottom: { type: [Number, String], required: false },

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <teleport to="body">
+  <teleport
+    :disabled="!teleportTarget"
+    :to="teleportTarget"
+  >
     <component
       :is="tag"
       :id="resolvedDomId"
@@ -41,6 +44,7 @@ import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbarGroupInternal.composable";
 import { INTENT } from "../../enums/Commons/intent.enum";
 import { SNACKBAR_GROUP_DIRECTION } from "../../enums/Snackbar/snackbar-group.enum";
@@ -55,13 +59,15 @@ const props = defineProps({
   direction: { type: null, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "div" }
+  tag: { type: String, required: false, default: "div" },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 defineEmits([]);
 defineSlots();
 const { t } = useLocale();
 const { filterProps } = useProps(props);
 const rootRef = ref();
+const { teleportTarget } = useTeleport(computed(() => props.attach || false));
 const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(() => props.id);
 watch(() => props.defaultDuration, (duration) => {
   registerDefaultDuration(duration);

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -59,7 +59,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false, default: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -95,6 +94,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false, default: true },
   transition: { type: [Boolean, String, Object], required: false, default: false },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   fontSize: { type: null, required: false },

package/dist/src/composables/Commons/hydration.composable.cjs

@@ -9,9 +9,14 @@ var _display = require("./display.composable.cjs");
 var _commons = require("../../consts/Commons/commons.const.cjs");
 function useHydration() {
   if (!_commons.IN_BROWSER) return (0, _vue.shallowRef)(false);
-  const {
-    ssr
-  } = (0, _display.useDisplay)();
+  let ssr;
+  try {
+    ({
+      ssr
+    } = (0, _display.useDisplay)());
+  } catch {
+    return (0, _vue.shallowRef)(true);
+  }
   if (ssr) {
     const isMounted = (0, _vue.shallowRef)(false);
     (0, _vue.onMounted)(() => {

package/dist/src/composables/Commons/hydration.composable.d.ts

@@ -13,11 +13,19 @@
  * navigateur (`!IN_BROWSER`), retourne un Ref fige a `false`.
  *
  * @description
- * ⛔ Dans un navigateur, ce composable DEPEND de `createOrigam()` : il
+ * ⚠️ Dans un navigateur, ce composable PREFERE `createOrigam()` : il
  * appelle `useDisplay()`, dont l'injection n'existe que si le plugin est
- * installe. Mesure, montage d'un composant sans `createOrigam()` :
- * `useHydration()` LEVE `Could not find Origam display injection`. Ce
- * n'est donc pas un utilitaire autonome, contrairement a `useSsrBoot` qui
- * n'injecte rien.
+ * installe, pour savoir si l'app tourne en SSR. **#attach-harmonisation** —
+ * jusque-la, l'absence du plugin faisait LEVER `useDisplay()` (« Could not
+ * find Origam display injection »), ce qui a casse 4 e2e marketing (SSR
+ * Nuxt) : `useTeleport()`, qui appelle desormais ce composable pour eviter
+ * une course de montage (voir teleport.composable.ts), doit rester
+ * utilisable comme primitive BRUTE — sans `createOrigam()` — exactement
+ * comme il l'etait avant. Le `try/catch` ci-dessous rattrape UNIQUEMENT ce
+ * cas (plugin absent) et retombe sur le chemin non-SSR (`shallowRef(true)`,
+ * aucun delai) : un consommateur qui a reellement besoin du signal SSR et
+ * installe le plugin obtient exactement le comportement documente plus
+ * haut, inchange. Aucun test n'epinglait le lever — `grep -rn "Could not
+ * find Origam display injection" packages/tests` ne retourne rien.
  ********************************************************/
 export declare function useHydration(): import("vue").ShallowRef<boolean, boolean>;

package/dist/src/composables/Commons/hydration.composable.js

@@ -3,7 +3,12 @@ import { useDisplay } from "./display.composable.js";
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 export function useHydration() {
   if (!IN_BROWSER) return shallowRef(false);
-  const { ssr } = useDisplay();
+  let ssr;
+  try {
+    ({ ssr } = useDisplay());
+  } catch {
+    return shallowRef(true);
+  }
   if (ssr) {
     const isMounted = shallowRef(false);
     onMounted(() => {

package/dist/src/composables/Commons/teleport.composable.cjs

@@ -7,10 +7,13 @@ exports.useTeleport = useTeleport;
 var _commons = require("../../consts/Commons/commons.const.cjs");
 var _console = require("../../utils/Commons/console.util.cjs");
 var _vue = require("vue");
+var _hydration = require("./hydration.composable.cjs");
 function useTeleport(target) {
+  const isHydrated = (0, _hydration.useHydration)();
   const teleportTarget = (0, _vue.computed)(() => {
     const _target = target.value;
     if (_target === true || !_commons.IN_BROWSER) return void 0;
+    if (!isHydrated.value) return void 0;
     const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
     if (targetElement == null) {
       (0, _console.consoleWarn)(`Unable to locate target ${_target}`);

package/dist/src/composables/Commons/teleport.composable.d.ts

@@ -15,6 +15,62 @@ import { Ref } from 'vue';
  * `teleportTarget` reste `undefined` — le composant appelant retombe
  * alors sur son rendu non-teleporte plutot que de crasher. En SSR
  * (`!IN_BROWSER`), toujours `undefined`, sans avertissement.
+ *
+ * @description
+ * ⛔ `useHydration()` — #attach-harmonisation. Un selecteur `string` ciblant
+ * un NOEUD FRERE cree dans la MEME passe de rendu (ex: un conteneur local
+ * que le consommateur monte lui-meme juste avant le composant qui teleporte)
+ * peut ne pas encore etre connecte a `document` au moment ou ce `computed`
+ * s'evalue pour la PREMIERE fois — mesure concrete sous Histoire (dont
+ * `OrigamApp`/`OrigamLayout` englobent chaque story dans un `<Suspense>` :
+ * l'arbre entier, y compris les freres, n'est commit dans le vrai DOM
+ * qu'une fois la resolution async terminee). `document.querySelector` n'est
+ * PAS une dependance reactive : si le premier appel echoue, le `computed`
+ * reste bloque sur `undefined` pour toujours, meme apres que la cible soit
+ * reellement montee — rien ne le marque sale.
+ *
+ * @description
+ * ⛔ UN COMPTEUR LOCAL (`mountTick`, essaye d'abord) CASSE LE SSR MARKETING.
+ * Mesure, CI (#1043) : 4 e2e marketing (Nuxt, SSR) en echec sur « sans
+ * erreur JS console » / « pas d'erreur d'hydratation ». Cause reelle,
+ * independante de `mountTick` : la toute PREMIERE evaluation du computed
+ * divergeait DEJA entre serveur et client. Cote serveur, `!IN_BROWSER` est
+ * toujours vrai (pas de `window` en SSR) -> `undefined` (teleport
+ * desactive, rendu en place). Cote client, `IN_BROWSER` est vrai DES LE
+ * DEPART, y compris pendant la passe d'HYDRATATION (avant tout
+ * `onMounted`) -> la cible (souvent `document.body`, qui existe toujours)
+ * se resout avec SUCCES sur ce tout premier rendu -> teleport deja ACTIF.
+ * Vue compare les deux rendus pendant l'hydratation : desactive vs actif,
+ * d'ou le decalage. `mountTick` n'ajoutait qu'une DEUXIEME evaluation
+ * post-montage — elle n'a jamais ete la cause du decalage, qui existait
+ * deja sur la premiere.
+ *
+ * @description
+ * Le fix : `isHydrated.value` (vrai gate, pas une simple lecture de
+ * dependance) force EXACTEMENT le meme `undefined` cote client QUE cote
+ * serveur tant que l'hydratation n'est pas terminee — `useHydration()`
+ * (deja utilise par `OrigamOverlay.vue`) seede `isHydrated` a `false` sur
+ * les DEUX rendus compares (serveur ET premiere passe client) quand l'app
+ * est reellement en SSR (`ssr` vrai), et ne bascule a `true` que dans un
+ * `onMounted` — donc APRES que l'hydratation ait deja conclu. Reutilise,
+ * ne redeclare pas.
+ *
+ * @description
+ * ⚠️ Dans une app 100% client (pas de SSR — Histoire, Tauri…),
+ * `useHydration()` renvoie `isHydrated=true` DES LE DEPART (son
+ * optimisation deliberee : « pas de delai artificiel » — voir son propre
+ * commentaire de tete) : le gate ci-dessous ne retarde donc RIEN la ou il
+ * n'y a aucune hydratation a proteger. Consequence mesuree : une cible
+ * FRERE montee dans la MEME passe de rendu que le consommateur (ex: un
+ * conteneur local qu'une story Histoire monte juste avant le composant
+ * teleportant, sous un `<Suspense>` qui ne commit l'arbre qu'une fois
+ * resolu) peut encore echouer sur cette toute premiere resolution, pour la
+ * meme raison qu'avant : `document.querySelector` n'est pas reactif. Ce
+ * n'est PAS le defaut que ce correctif vise — c'est un defaut DIFFERENT,
+ * propre a la construction du test (une cible fraiche ne preexiste jamais
+ * en usage reel), traite cote story plutot qu'en reintroduisant un
+ * compteur local ici (voir les stories CommandPalette / SnackbarGroup /
+ * Drawer, variante « Prop - attach »).
  ********************************************************/
 export declare function useTeleport(target: Ref<boolean | string | Element>): {
     teleportTarget: import("vue").ComputedRef<Element | undefined>;

package/dist/src/composables/Commons/teleport.composable.js

@@ -1,10 +1,13 @@
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 import { consoleWarn } from "../../utils/Commons/console.util.js";
 import { computed } from "vue";
+import { useHydration } from "./hydration.composable.js";
 export function useTeleport(target) {
+  const isHydrated = useHydration();
   const teleportTarget = computed(() => {
     const _target = target.value;
     if (_target === true || !IN_BROWSER) return void 0;
+    if (!isHydrated.value) return void 0;
     const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
     if (targetElement == null) {
       consoleWarn(`Unable to locate target ${_target}`);

package/dist/src/interfaces/CommandPalette/command-palette.interface.d.ts

@@ -1,4 +1,5 @@
 import type { ICommand } from './command.interface';
+import type { IAttachProps } from '../Commons/attach.interface';
 import type { ICommonsComponentProps } from '../Commons/commons.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
 /**
@@ -11,7 +12,7 @@ import type { ITypographyProps } from '../Commons/typography.interface';
  * the listeners so consumers can pass either form interchangeably.
  */
 export type TCommandPaletteHotkey = ReadonlyArray<string> | ReadonlyArray<ReadonlyArray<string>>;
-export interface ICommandPaletteProps extends ICommonsComponentProps, Pick<ITypographyProps, 'fontSize'> {
+export interface ICommandPaletteProps extends ICommonsComponentProps, Pick<ITypographyProps, 'fontSize'>, IAttachProps {
     /** v-model — whether the palette is open. */
     modelValue?: boolean;
     /**

package/dist/src/interfaces/Commons/attach.interface.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/src/interfaces/Commons/attach.interface.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `attach` — the teleport target for a component's floating / portal
+ * surface, resolved through `useTeleport()`
+ * (`composables/Commons/teleport.composable.ts`), the SINGLE consumption
+ * point for the whole DS. Extracted from `IOverlayProps` (#attach-
+ * harmonisation) so every component that teleports declares the exact
+ * same surface instead of a half-implemented, hand-rolled `to="body"`.
+ *
+ *   • `true`               → no teleport, render in place.
+ *   • `false` / unset      → `document.body`. Vue's boolean-prop casting
+ *                             defaults an ABSENT prop whose declared type
+ *                             includes `Boolean` to `false` when the
+ *                             component declares no `default` for it — so
+ *                             "not passed" and "passed `false`" resolve
+ *                             identically to `document.body` by design
+ *                             (see `OrigamOverlay`, `OrigamMenu`).
+ *   • a CSS selector string → resolved against `document.querySelector`.
+ *   • an `Element`          → used directly as the teleport container.
+ *   • `null`                → reserved for a component whose OWN default
+ *                             is not `document.body` (`OrigamDrawer`
+ *                             teleports into its `<OrigamLayout>` wrapper
+ *                             by default) and therefore needs a THIRD
+ *                             state, distinguishable from an explicit
+ *                             `false`, to fall back to that non-body
+ *                             default instead. Same tri-state pattern as
+ *                             `IDrawerProps.push` / `.clipped`.
+ */
+export interface IAttachProps {
+    attach?: boolean | string | Element | null;
+}

package/dist/src/interfaces/Drawer/drawer.interface.d.ts

@@ -1,5 +1,6 @@
 import type { IActiveProps } from '../Commons/active.interface';
 import type { IAdjacentSlots } from '../Commons/adjacent.interface';
+import type { IAttachProps } from '../Commons/attach.interface';
 import type { IBgColorProps, IColorProps } from '../Commons/color.interface';
 import type { IBorderProps } from '../Commons/border.interface';
 import type { ICommonsComponentEmits, ICommonsComponentProps, ITagProps } from '../Commons/commons.interface';
@@ -12,7 +13,7 @@ import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { IScrimProps } from '../Overlay/overlay-scrim.interface';
 import type { ITransitionComponentProps } from '../Commons/transition-component.interface';
-export interface IDrawerProps extends ITagProps, ICommonsComponentProps, IBorderProps, IElevationProps, ILayoutItemProps, IRoundedProps, IColorProps, IBgColorProps, IDensityProps, IPaddingProps, IMarginProps, ITransitionComponentProps, IScrimProps, IActiveProps, IHoverProps {
+export interface IDrawerProps extends ITagProps, ICommonsComponentProps, IBorderProps, IElevationProps, ILayoutItemProps, IRoundedProps, IColorProps, IBgColorProps, IDensityProps, IPaddingProps, IMarginProps, ITransitionComponentProps, IScrimProps, IActiveProps, IHoverProps, IAttachProps {
     disableResizeWatcher?: boolean;
     disableRouteWatcher?: boolean;
     expandOnHover?: boolean;
@@ -60,6 +61,28 @@ export interface IDrawerProps extends ITagProps, ICommonsComponentProps, IBorder
      *               Drawer before AppBar → drawer full-height.
      */
     clipped?: boolean | null;
+    /**
+     * `attach` — inherited from `IAttachProps`, re-documented here because
+     * `OrigamDrawer`'s DEFAULT target is not `document.body` like the rest
+     * of the Overlay family: it teleports into its `<OrigamLayout>`
+     * ancestor's `.origam-layout__wrapper` (by `id`, via `useLayoutItem`),
+     * or renders inline when no `<OrigamLayout>` ancestor exists (the
+     * "orphan" case).
+     *
+     *   • `null` (default) → keep the layout-wrapper / orphan-inline
+     *               behaviour described above. Declared as the explicit
+     *               `withDefaults` value so Vue's boolean-prop casting —
+     *               which would otherwise force an UNSET `attach` to
+     *               `false` — never overrides it. Same device as `push` /
+     *               `clipped` above.
+     *   • `true`  → render in place, bypassing BOTH the layout teleport
+     *               AND the orphan fallback.
+     *   • `false` → `document.body`, same as the rest of the Overlay
+     *               family — escapes the layout wrapper entirely.
+     *   • a CSS selector `string` / an `Element` → teleport there instead
+     *               of the layout wrapper.
+     */
+    attach?: boolean | string | Element | null;
 }
 /**
  * Emits fired by `<OrigamDrawer>` — v-model on the open state, plus a

package/dist/src/interfaces/Overlay/overlay.interface.d.ts

@@ -1,4 +1,5 @@
 import type { IActivatorProps } from '../Commons/activator.interface';
+import type { IAttachProps } from '../Commons/attach.interface';
 import type { IClickOutsideEmits } from '../Commons/clickOutside.interface';
 import type { ICommonsComponentEmits, ICommonsComponentProps } from '../Commons/commons.interface';
 import type { IDimensionProps } from '../Commons/dimension.interface';
@@ -7,9 +8,8 @@ import type { ILocationStrategyProps } from '../Commons/location.interface';
 import type { IScrimProps } from './overlay-scrim.interface';
 import type { IScrollStrategyProps } from '../Commons/scroll.interface';
 import type { ITransitionComponentProps } from '../Commons/transition-component.interface';
-export interface IOverlayProps extends ICommonsComponentProps, IDimensionProps, IActivatorProps, ILocationStrategyProps, IScrollStrategyProps, ILazyProps, ITransitionComponentProps, IScrimProps {
+export interface IOverlayProps extends ICommonsComponentProps, IDimensionProps, IActivatorProps, ILocationStrategyProps, IScrollStrategyProps, ILazyProps, ITransitionComponentProps, IScrimProps, IAttachProps {
     absolute?: boolean;
-    attach?: boolean | string | Element;
     closeOnBack?: boolean;
     contentClass?: string | Array<string>;
     contentProps?: any;

package/dist/src/interfaces/Snackbar/snackbar-group.interface.d.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import type { IAttachProps } from '../Commons/attach.interface';
 import type { ICommonsComponentProps, ITagProps } from '../Commons/commons.interface';
 import type { ISnackbarGroupItem, ISnackbarGroupItemOptions } from './snackbar-group-item.interface';
 import type { TSnackbarGroupDirection, TSnackbarGroupLocation } from '../../types/Snackbar/snackbar-group.type';
@@ -12,7 +13,7 @@ import type { TSnackbarGroupDirection, TSnackbarGroupLocation } from '../../type
  * The component subscribes to its registered stack `id` and re-renders
  * when the underlying `items` ref changes.
  */
-export interface ISnackbarGroupProps extends ICommonsComponentProps, ITagProps {
+export interface ISnackbarGroupProps extends ICommonsComponentProps, ITagProps, IAttachProps {
     /**
      * Identifier of the stack this container renders. Pair with
      * `useSnackbarGroup({ id })` to spawn items into the same stack.

package/dist/src/interfaces/index.cjs

@@ -520,6 +520,17 @@ Object.keys(_align).forEach(function (key) {
     }
   });
 });
+var _attach = require("./Commons/attach.interface.cjs");
+Object.keys(_attach).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _attach[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _attach[key];
+    }
+  });
+});
 var _audio = require("./Commons/audio.interface.cjs");
 Object.keys(_audio).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/interfaces/index.d.ts

@@ -45,6 +45,7 @@ export * from './Commons/activator.interface';
 export * from './Commons/active.interface';
 export * from './Commons/adjacent.interface';
 export * from './Commons/align.interface';
+export * from './Commons/attach.interface';
 export * from './Commons/audio.interface';
 export * from './Commons/autocomplete.interface';
 export * from './Commons/backdrop.interface';

package/dist/src/interfaces/index.js

@@ -45,6 +45,7 @@ export * from "./Commons/activator.interface.js";
 export * from "./Commons/active.interface.js";
 export * from "./Commons/adjacent.interface.js";
 export * from "./Commons/align.interface.js";
+export * from "./Commons/attach.interface.js";
 export * from "./Commons/audio.interface.js";
 export * from "./Commons/autocomplete.interface.js";
 export * from "./Commons/backdrop.interface.js";