origam 2.20.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);
@@ -2718,18 +2723,10 @@
   --origam-blockquote--quoted---glyph-offset-top: -0.1em;
   --origam-blockquote--quoted---glyph-offset-left: -0.05em;
   --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-  --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
   --origam-blockquote__elegant---font-style: italic;
-  --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
   --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-  --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
   --origam-blockquote__minimal---font-style: italic;
   --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-  --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-  --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-  --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
   --origam-blockquote__pull---padding-block: var(--origam-space---6);
   --origam-blockquote__pull---rule-width: 2px;
   --origam-video---background-color: var(--origam-color---black);
@@ -3200,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);
@@ -5735,18 +5735,10 @@
     --origam-blockquote--quoted---glyph-offset-top: -0.1em;
     --origam-blockquote--quoted---glyph-offset-left: -0.05em;
     --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-    --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-    --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
     --origam-blockquote__elegant---font-style: italic;
-    --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
     --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-    --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
     --origam-blockquote__minimal---font-style: italic;
     --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-    --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-    --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-    --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-    --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
     --origam-blockquote__pull---padding-block: var(--origam-space---6);
     --origam-blockquote__pull---rule-width: 2px;
     --origam-video---background-color: var(--origam-color---black);

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);
@@ -2634,18 +2637,10 @@
   --origam-blockquote--quoted---glyph-offset-top: -0.1em;
   --origam-blockquote--quoted---glyph-offset-left: -0.05em;
   --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-  --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
   --origam-blockquote__elegant---font-style: italic;
-  --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
   --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-  --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
   --origam-blockquote__minimal---font-style: italic;
   --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-  --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-  --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-  --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
   --origam-blockquote__pull---padding-block: var(--origam-space---6);
   --origam-blockquote__pull---rule-width: 2px;
   --origam-video---background-color: var(--origam-color---black);

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);
@@ -2718,18 +2723,10 @@
   --origam-blockquote--quoted---glyph-offset-top: -0.1em;
   --origam-blockquote--quoted---glyph-offset-left: -0.05em;
   --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-  --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
   --origam-blockquote__elegant---font-style: italic;
-  --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
   --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-  --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
   --origam-blockquote__minimal---font-style: italic;
   --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-  --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-  --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-  --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
   --origam-blockquote__pull---padding-block: var(--origam-space---6);
   --origam-blockquote__pull---rule-width: 2px;
   --origam-video---background-color: var(--origam-color---black);
@@ -3200,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);
@@ -5735,18 +5735,10 @@
     --origam-blockquote--quoted---glyph-offset-top: -0.1em;
     --origam-blockquote--quoted---glyph-offset-left: -0.05em;
     --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-    --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-    --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
     --origam-blockquote__elegant---font-style: italic;
-    --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
     --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-    --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
     --origam-blockquote__minimal---font-style: italic;
     --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-    --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-    --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-    --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-    --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
     --origam-blockquote__pull---padding-block: var(--origam-space---6);
     --origam-blockquote__pull---rule-width: 2px;
     --origam-video---background-color: var(--origam-color---black);

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);
@@ -2634,18 +2637,10 @@
   --origam-blockquote--quoted---glyph-offset-top: -0.1em;
   --origam-blockquote--quoted---glyph-offset-left: -0.05em;
   --origam-blockquote--quoted---glyph-padding-extra: 1rem;
-  --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
   --origam-blockquote__elegant---font-style: italic;
-  --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
   --origam-blockquote__elegant---padding-block: var(--origam-space---6);
-  --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
   --origam-blockquote__minimal---font-style: italic;
   --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
-  --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
-  --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
-  --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
-  --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
   --origam-blockquote__pull---padding-block: var(--origam-space---6);
   --origam-blockquote__pull---rule-width: 2px;
   --origam-video---background-color: var(--origam-color---black);

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -7,7 +7,7 @@
 			:style="blockquoteStyles"
 	>
 		<span
-				v-if="showQuoteMark"
+				v-if="quoteMark"
 				class="origam-blockquote__mark origam-blockquote__mark--bg"
 				aria-hidden="true"
 		>{{ openMark }}</span>
@@ -68,7 +68,8 @@ const props = defineProps({
   source: { type: String, required: false },
   cite: { type: String, required: false },
   lang: { type: null, required: false, default: "auto" },
-  align: { type: null, required: false },
+  align: { type: null, required: false, default: "left" },
+  quoteMark: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -160,14 +161,9 @@ const effectiveLang = computed(() => {
 });
 const openMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].open);
 const closeMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].close);
-const showQuoteMark = computed(() => props.variant === "quoted");
 const hasAuthor = computed(() => Boolean(slots.author) || (props.author?.length ?? 0) > 0);
 const hasSource = computed(() => Boolean(slots.source) || (props.source?.length ?? 0) > 0);
 const hasAttribution = computed(() => hasAuthor.value || hasSource.value);
-const effectiveAlign = computed(() => {
-  if (props.align) return props.align;
-  return props.variant === "pull" ? "center" : "left";
-});
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);
 const { borderClasses, borderStyles } = useBorder(props);
@@ -202,7 +198,7 @@ const blockquoteClasses = computed(() => {
   return [
     "origam-blockquote",
     `origam-blockquote--variant-${props.variant}`,
-    `origam-blockquote--align-${effectiveAlign.value}`,
+    `origam-blockquote--align-${props.align}`,
     {
       [`origam-blockquote--color-${props.color}`]: colorIsIntent.value,
       [`origam-blockquote--accent-${resolvedAccentColor.value}`]: accentIsIntent.value,
@@ -229,10 +225,8 @@ const blockquoteStyles = computed(() => {
 });
 defineExpose({
   effectiveLang,
-  effectiveAlign,
   openMark,
   closeMark,
-  showQuoteMark,
   hasAttribution
 });
 </script>
@@ -259,14 +253,13 @@ defineExpose({
 		// win the cascade. Without it the scoped compiler pushes this rule
 		// to (0,2,0) and beats the utility's (0,1,0).
 		//
-		// ⚠️ Deliberately PARTIAL. The `--variant-*` rules further down are
-		// modifiers and keep their (0,2,0) per #950's decision — and
-		// `variant` defaults to `'default'`, so
-		// `.origam-blockquote--variant-default` is ALWAYS present and owns
-		// `padding-inline-start`. After this change `padding-block-*` and
-		// `padding-inline-end` answer the utility; `padding-inline-start`
-		// stays held by the active variant. That is the intended trade:
-		// the variant's accent-bar offset must not lose to a utility.
+		// ⚠️ #950's caveat about a competing variant rule is OBSOLETE since
+		// ADR-005 D7 (lot #1015): there is no longer any variant rule to
+		// compete with. A variant's spacing now arrives as an INLINE
+		// declaration from its props preset, which outranks both this rule
+		// and the utility class — so the accent-bar offset still cannot
+		// lose to a utility, by a stronger mechanism than specificity.
+		// This rule is what a variant that sets no spacing falls back to.
 		:where(&) {
 			margin: 0;
 			padding-block: var(--origam-blockquote---resolved-padding-block);
@@ -335,53 +328,10 @@ defineExpose({
 		text-align: right;
 	}
 
-	.origam-blockquote--variant-default {
-		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
-		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
-	}
-
-	.origam-blockquote--variant-elegant {
-		font-family: var(--origam-blockquote__elegant---font-family, Georgia, 'Times New Roman', serif);
-		font-size: var(--origam-blockquote__elegant---font-size, 1.125rem);
-		font-style: var(--origam-blockquote__elegant---font-style, italic);
-		line-height: var(--origam-blockquote__elegant---line-height, 2);
-		padding-block: var(--origam-blockquote__elegant---padding-block, 24px);
-		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
-		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
-	}
-
-	.origam-blockquote--variant-quoted {
-		padding-top: calc(var(--origam-blockquote---resolved-padding-block) + var(--origam-blockquote--quoted---glyph-padding-extra, 1rem));
-
-		.origam-blockquote__body {
-			position: relative;
-			z-index: 1;
-		}
-
-		.origam-blockquote__attribution {
-			position: relative;
-			z-index: 1;
-		}
-	}
-
-	.origam-blockquote--variant-minimal {
-		font-size: var(--origam-blockquote__minimal---font-size, 0.875rem);
-		font-style: var(--origam-blockquote__minimal---font-style, italic);
-		padding-inline: var(--origam-blockquote__minimal---padding-inline, 12px);
-		padding-block: 0;
-		border-inline-start: var(--origam-blockquote--minimal---accent-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
-		padding-inline-start: calc(var(--origam-blockquote__minimal---padding-inline, 12px) + var(--origam-blockquote--minimal---accent-width, 2px));
-	}
-
-	.origam-blockquote--variant-pull {
-		font-family: var(--origam-blockquote__pull---font-family, Georgia, 'Times New Roman', serif);
-		font-size: var(--origam-blockquote__pull---font-size, 1.5rem);
-		font-weight: var(--origam-blockquote__pull---font-weight, 500);
-		line-height: var(--origam-blockquote__pull---line-height, 1.375);
-		padding-block: var(--origam-blockquote__pull---padding-block, 24px);
-		padding-inline: var(--origam-blockquote---resolved-padding-inline);
-		border-block-start: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
-		border-block-end: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+	.origam-blockquote__mark--bg + .origam-blockquote__body,
+	.origam-blockquote__mark--bg ~ .origam-blockquote__attribution {
+		position: relative;
+		z-index: 1;
 	}
 
 	.origam-blockquote--accent-primary {

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}`);