origam 2.27.0 → 2.29.1

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

@@ -319,6 +319,7 @@
   --origam-btn---padding-md: var(--origam-space---4);
   --origam-btn---padding-lg: var(--origam-space---5);
   --origam-btn---padding-xl: var(--origam-space---6);
+  --origam-btn---padding-block: 0px;
   --origam-btn---font-size: var(--origam-font__size---md);
   --origam-btn---font-weight: var(--origam-font__weight---medium);
   --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);
@@ -3332,6 +3333,7 @@
     --origam-btn---padding-md: var(--origam-space---4);
     --origam-btn---padding-lg: var(--origam-space---5);
     --origam-btn---padding-xl: var(--origam-space---6);
+    --origam-btn---padding-block: 0px;
     --origam-btn---font-size: var(--origam-font__size---md);
     --origam-btn---font-weight: var(--origam-font__weight---medium);
     --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);

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

@@ -219,6 +219,7 @@
   --origam-btn---padding-md: var(--origam-space---4);
   --origam-btn---padding-lg: var(--origam-space---5);
   --origam-btn---padding-xl: var(--origam-space---6);
+  --origam-btn---padding-block: 0px;
   --origam-btn---font-size: var(--origam-font__size---md);
   --origam-btn---font-weight: var(--origam-font__weight---medium);
   --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);

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

@@ -319,6 +319,7 @@
   --origam-btn---padding-md: var(--origam-space---4);
   --origam-btn---padding-lg: var(--origam-space---5);
   --origam-btn---padding-xl: var(--origam-space---6);
+  --origam-btn---padding-block: 0px;
   --origam-btn---font-size: var(--origam-font__size---md);
   --origam-btn---font-weight: var(--origam-font__weight---medium);
   --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);
@@ -3332,6 +3333,7 @@
     --origam-btn---padding-md: var(--origam-space---4);
     --origam-btn---padding-lg: var(--origam-space---5);
     --origam-btn---padding-xl: var(--origam-space---6);
+    --origam-btn---padding-block: 0px;
     --origam-btn---font-size: var(--origam-font__size---md);
     --origam-btn---font-weight: var(--origam-font__weight---medium);
     --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);

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

@@ -219,6 +219,7 @@
   --origam-btn---padding-md: var(--origam-space---4);
   --origam-btn---padding-lg: var(--origam-space---5);
   --origam-btn---padding-xl: var(--origam-space---6);
+  --origam-btn---padding-block: 0px;
   --origam-btn---font-size: var(--origam-font__size---md);
   --origam-btn---font-weight: var(--origam-font__weight---medium);
   --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);

package/dist/src/components/Btn/OrigamBtn.vue

@@ -145,6 +145,7 @@ const props = defineProps({
   block: { type: Boolean, required: false },
   slim: { type: Boolean, required: false },
   stacked: { type: Boolean, required: false },
+  wrap: { type: Boolean, required: false },
   text: { type: String, required: false },
   status: { type: null, required: false },
   statusIconPosition: { type: null, required: false },
@@ -396,7 +397,8 @@ const btnClasses = computed(() => {
       //      which stays in the DOM (width and name preserved).
       [`origam-btn--loader-${loaderKind.value}`]: isLoading.value,
       "origam-btn--slim": props.slim,
-      "origam-btn--stacked": props.stacked
+      "origam-btn--stacked": props.stacked,
+      "origam-btn--wrap": props.wrap
     },
     variantClasses.value,
     borderClasses.value,
@@ -459,6 +461,10 @@ defineExpose({
 		// blockifies to `block`, i.e. byte-for-byte today's computed value, so
 		// no existing layout moves. `&--block` still overrides it with `flex`.
 		display: inline-block;
+		// #1094 — inoperant tant que la racine est `inline-block` ; prend effet
+		// sur `&--block` (`display: flex`), ou `height: auto` + `min-height`
+		// laisseraient sinon le contenu colle en haut.
+		align-items: center;
 
 		position: var(--origam-btn---position, relative);
 		vertical-align: middle;
@@ -475,12 +481,22 @@ defineExpose({
 		transition-duration: var(--origam-btn---transition-duration, 0.28s);
 		transition-timing-function: var(--origam-btn---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
-		padding: 0 calc(16px + var(--origam-btn---density-padding-x, 0px));
+		// ⛔ #929 — le padding vertical est LU depuis `--origam-btn---padding-block`
+		// (repli `0` : un bouton qui ne le pose pas ne bouge pas). Il n'etait
+		// qu'ecrit, jamais lu. Les rubriques `&--size-*` / `&--slim` ne posent
+		// plus que `padding-inline`, sans quoi leur shorthand `padding: 0 …`
+		// remettrait ce bloc a zero.
+		padding-block: var(--origam-btn---padding-block, 0);
+		padding-inline: calc(16px + var(--origam-btn---density-padding-x, 0px));
 
 		width: var(--origam-btn---width, auto);
 		min-width: calc(var(--origam-btn---min-width, 64px) + var(--origam-btn---density, 0px));
 		max-width: var(--origam-btn---max-width, 100%);
-		height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
+		// ⛔ #1094 — la hauteur est un MINIMUM, plus une valeur fixe : `height: auto`
+		// laisse un contenu a deux lignes (`wrap`) agrandir le bouton, et le
+		// `min-height` ci-dessous garde la taille du token pour un contenu d'une
+		// ligne. La prop `height` reste prioritaire (declaration inline).
+		height: auto;
 		// ⛔ C2 (#597) — `--origam-btn---min-height` reste NON DECLARE, a dessein.
 		// Son repli est `calc(height + density)`, deux vars reglees PAR INSTANCE
 		// (`&--size-*` / `&--density-*` plus bas dans ce bloc). Une custom property
@@ -488,6 +504,13 @@ defineExpose({
 		// figerait la hauteur minimale a la taille/densite racine et les props
 		// `size` / `density` cesseraient d'agir sur elle. Faux positif de la garde,
 		// qui compare des noms et non des chaines de repli.
+		//
+		// ⛔ #1094 — ce `min-height` est desormais le SEUL garant de la hauteur au repos
+		// (la hauteur est `auto`). `--origam-btn---min-height` peut le RELEVER (le site
+		// marketing le fait : 34 / 38 / 44 px) ; le poser a `0` SUPPRIME le plancher et le
+		// bouton retombe a la hauteur de son contenu. Avec une hauteur fixe, ce `0` etait
+		// sans effet : c'est pourquoi Chip / Code / graphes l'ecrivaient en pure perte, et
+		// pourquoi ces ecritures ont ete retirees dans le meme lot.
 		min-height: var(--origam-btn---min-height, calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px)));
 		max-height: var(--origam-btn---max-height, 100%);
 
@@ -559,7 +582,7 @@ defineExpose({
 			--origam-btn---height: var(--origam-btn---height-xs, 20px);
 			--origam-btn---font-size: 0.625rem;
 			--origam-btn---min-width: 36px;
-			padding: 0 calc(var(--origam-btn---padding-xs, 8px) + var(--origam-btn---density-padding-x, 0px));
+			padding-inline: calc(var(--origam-btn---padding-xs, 8px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 16px;
@@ -570,7 +593,7 @@ defineExpose({
 			--origam-btn---height: var(--origam-btn---height-sm, 28px);
 			--origam-btn---font-size: 0.75rem;
 			--origam-btn---min-width: 50px;
-			padding: 0 calc(var(--origam-btn---padding-sm, 12px) + var(--origam-btn---density-padding-x, 0px));
+			padding-inline: calc(var(--origam-btn---padding-sm, 12px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 20px;
@@ -578,7 +601,7 @@ defineExpose({
 		}
 
 		&--size-default {
-			padding: 0 calc(var(--origam-btn---padding-md, 16px) + var(--origam-btn---density-padding-x, 0px));
+			padding-inline: calc(var(--origam-btn---padding-md, 16px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 24px;
@@ -589,7 +612,7 @@ defineExpose({
 			--origam-btn---height: var(--origam-btn---height-lg, 44px);
 			--origam-btn---font-size: 1rem;
 			--origam-btn---min-width: 78px;
-			padding: 0 calc(var(--origam-btn---padding-lg, 20px) + var(--origam-btn---density-padding-x, 0px));
+			padding-inline: calc(var(--origam-btn---padding-lg, 20px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 28px;
@@ -600,7 +623,7 @@ defineExpose({
 			--origam-btn---height: var(--origam-btn---height-xl, 52px);
 			--origam-btn---font-size: 1.125rem;
 			--origam-btn---min-width: 92px;
-			padding: 0 calc(var(--origam-btn---padding-xl, 24px) + var(--origam-btn---density-padding-x, 0px));
+			padding-inline: calc(var(--origam-btn---padding-xl, 24px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 32px;
@@ -728,6 +751,11 @@ defineExpose({
 			--origam-btn---width: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 
 			padding: 0;
+			// #1094 — un bouton icone est CARRE : sa largeur derive du meme token que sa
+			// hauteur (`--origam-btn---width` ci-dessus). Aucun libelle ne peut deborder,
+			// donc la hauteur reste fixe — sans quoi un contenu plus haut que le carre
+			// (icone de Chip, `min-height: 0` des consommateurs) le deformerait.
+			height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 
 			#{$this}__loader {
 				display: flex;
@@ -1016,35 +1044,35 @@ defineExpose({
 				--origam-btn---height: 56px;
 				font-size: 0.625rem;
 				min-width: 56px;
-				padding: 0 calc(12px + var(--origam-btn---density-padding-x, 0px));
+				padding-inline: calc(12px + var(--origam-btn---density-padding-x, 0px));
 			}
 
 			&#{$this}--size-small {
 				--origam-btn---height: 64px;
 				font-size: 0.75rem;
 				min-width: 64px;
-				padding: 0 calc(14px + var(--origam-btn---density-padding-x, 0px));
+				padding-inline: calc(14px + var(--origam-btn---density-padding-x, 0px));
 			}
 
 			&#{$this}--size-default {
 				--origam-btn---height: 72px;
 				font-size: 0.875rem;
 				min-width: 72px;
-				padding: 0 calc(16px + var(--origam-btn---density-padding-x, 0px));
+				padding-inline: calc(16px + var(--origam-btn---density-padding-x, 0px));
 			}
 
 			&#{$this}--size-large {
 				--origam-btn---height: 80px;
 				font-size: 1rem;
 				min-width: 80px;
-				padding: 0 calc(18px + var(--origam-btn---density-padding-x, 0px));
+				padding-inline: calc(18px + var(--origam-btn---density-padding-x, 0px));
 			}
 
 			&#{$this}--size-x-large {
 				--origam-btn---height: 88px;
 				font-size: 1.125rem;
 				min-width: 88px;
-				padding: 0 calc(20px + var(--origam-btn---density-padding-x, 0px));
+				padding-inline: calc(20px + var(--origam-btn---density-padding-x, 0px));
 			}
 
 			&#{$this}--density-comfortable {
@@ -1057,7 +1085,18 @@ defineExpose({
 		}
 
 		&--slim {
-			padding: 0 8px;
+			padding-inline: 8px;
+		}
+
+		// #1093 — le libelle reste sur UNE ligne (`__content { white-space: nowrap }`)
+		// sauf demande : `wrap` le laisse passer a la ligne. Le bouton grandit alors
+		// (sa hauteur est un minimum, #1094) au lieu de laisser le texte deborder.
+		// `text-align: center` : un `<a>` / `<span>` ne centre pas ses lignes seul.
+		&--wrap {
+			#{$this}__content {
+				white-space: normal;
+				text-align: center;
+			}
 		}
 
 		&--rounded {

package/dist/src/components/Chart/OrigamChartCartesian.vue

@@ -48,7 +48,7 @@
 					variant="outlined"
 					:text="drilldownBackLabel"
 					:aria-label="drilldownBackLabel"
-					:style="{ '--origam-btn---min-height': '0', '--origam-btn---min-width': '0' }"
+					:style="{ '--origam-btn---min-width': '0' }"
 					data-cy="origam-chart-cartesian-breadcrumb-back"
 					@click="onDrillUp"
 			/>

package/dist/src/components/Chart/OrigamChartPolar.vue

@@ -39,7 +39,7 @@
 					variant="outlined"
 					:text="drilldownBackLabel"
 					:aria-label="drilldownBackLabel"
-					:style="{ '--origam-btn---min-height': '0', '--origam-btn---min-width': '0' }"
+					:style="{ '--origam-btn---min-width': '0' }"
 					data-cy="origam-chart-polar-breadcrumb-back"
 					@click="onDrillUp"
 			/>

package/dist/src/components/Chip/OrigamChip.vue

@@ -109,7 +109,7 @@
 				:icon="true"
 				size="x-small"
 				density="compact"
-				:style="{'--origam-btn---min-width': '0', '--origam-btn---min-height': '0'}"
+				:style="{'--origam-btn---min-width': '0'}"
 				@click.stop="handleClickClose"
 		>
 			<slot

package/dist/src/components/Code/OrigamCode.vue

@@ -421,7 +421,6 @@ defineExpose({ rebuild, copied, codeRef });
 
 	.origam-code__copy--compact {
 		flex: none;
-		--origam-btn---min-height: 0;
 		--origam-btn---min-width: 0px;
 		--origam-btn---height: auto;
 		--origam-btn---padding-block: var(--origam-code__compact-copy---padding-block);
@@ -464,7 +463,6 @@ defineExpose({ rebuild, copied, codeRef });
 	}
 
 	.origam-code__copy {
-		--origam-btn---min-height: 0;
 		--origam-btn---min-width: 0px;
 		--origam-btn---border-radius: var(--origam-code__copy---border-radius);
 		--origam-btn---font-size: var(--origam-code__copy---font-size);

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStyle = useStyle;
 var _vue = require("vue");
+var _ssrStyle = require("../../consts/Commons/ssr-style.const.cjs");
 var _dom = require("../../utils/Commons/dom.util.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _styleTag = require("./styleTag.composable.cjs");
@@ -21,6 +22,14 @@ function toDeclarations(value) {
   }
   return [];
 }
+const styleSlots = /* @__PURE__ */new WeakMap();
+function nextStyleSlot() {
+  const vm = (0, _vue.getCurrentInstance)();
+  if (!vm) return 0;
+  const slot = styleSlots.get(vm) ?? 0;
+  styleSlots.set(vm, slot + 1);
+  return slot;
+}
 function useStyle(styles, uniq = void 0, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const fallbackId = `${name}-${(0, _getCurrentInstance.getUid)()}`;
   const id = (0, _vue.computed)(() => {
@@ -31,13 +40,17 @@ function useStyle(styles, uniq = void 0, name = (0, _getCurrentInstance.getCurre
     const stylesArray = toDeclarations(styles.value);
     return `#${(0, _dom.escapeCssIdent)(id.value)} {${stylesArray.join(";")}}`;
   });
+  const tagId = `${_ssrStyle.SSR_STYLE_TAG_PREFIX}${fallbackId}-${nextStyleSlot()}`;
+  (0, _vue.inject)(_ssrStyle.ORIGAM_SSR_STYLES_KEY, null)?.add(tagId, () => customCss.value);
   const {
     id: styleTagId,
     css,
     load,
     unload,
     isLoaded
-  } = (0, _styleTag.useStyleTag)(customCss);
+  } = (0, _styleTag.useStyleTag)(customCss, {
+    id: tagId
+  });
   (0, _vue.onMounted)(() => {
     load();
   });

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

@@ -1,18 +1,4 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
-/**
- * Build a per-instance stylesheet out of a computed style bag and inject it
- * in `<head>`, scoped to the root element's id.
- *
- * `uniq` is the id the CALLER wants that root element to carry. Passing
- * `() => props.id` is what makes a consumer-supplied `id` win over the
- * generated one: the returned `id` is what the component binds to its root,
- * and the generated rule targets that same id — so honouring the consumer's
- * `id` never orphans the rule. Reactive (ref / getter) so that an `id` that
- * appears on a later render is picked up.
- *
- * When the caller passes nothing (or an empty value) the generated
- * `<name>-<uid>` id is used, exactly as before.
- */
 /*********************************************************
  * useStyle
  *

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

@@ -1,4 +1,5 @@
-import { computed, onMounted, toValue } from "vue";
+import { computed, getCurrentInstance, inject, onMounted, toValue } from "vue";
+import { ORIGAM_SSR_STYLES_KEY, SSR_STYLE_TAG_PREFIX } from "../../consts/Commons/ssr-style.const.js";
 import { escapeCssIdent } from "../../utils/Commons/dom.util.js";
 import { getCurrentInstanceName, getUid } from "../../utils/Commons/getCurrentInstance.util.js";
 import { useStyleTag } from "./styleTag.composable.js";
@@ -15,6 +16,14 @@ function toDeclarations(value) {
   }
   return [];
 }
+const styleSlots = /* @__PURE__ */ new WeakMap();
+function nextStyleSlot() {
+  const vm = getCurrentInstance();
+  if (!vm) return 0;
+  const slot = styleSlots.get(vm) ?? 0;
+  styleSlots.set(vm, slot + 1);
+  return slot;
+}
 export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName()) {
   const fallbackId = `${name}-${getUid()}`;
   const id = computed(() => {
@@ -25,7 +34,9 @@ export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName())
     const stylesArray = toDeclarations(styles.value);
     return `#${escapeCssIdent(id.value)} {${stylesArray.join(";")}}`;
   });
-  const { id: styleTagId, css, load, unload, isLoaded } = useStyleTag(customCss);
+  const tagId = `${SSR_STYLE_TAG_PREFIX}${fallbackId}-${nextStyleSlot()}`;
+  inject(ORIGAM_SSR_STYLES_KEY, null)?.add(tagId, () => customCss.value);
+  const { id: styleTagId, css, load, unload, isLoaded } = useStyleTag(customCss, { id: tagId });
   onMounted(() => {
     load();
   });

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

@@ -18,15 +18,20 @@ function useStyleTag(css, options = {}) {
   } = options;
   const cssRef = (0, _vue.shallowRef)(css);
   let stop = () => {};
+  let tag;
   const load = () => {
     if (!document) return;
-    const el = document.getElementById(id) || document.createElement("style");
+    if (isLoaded.value) return;
+    const existing = document.getElementById(id);
+    const adoptable = existing && existing.dataset.origamStyleOwned === void 0 ? existing : void 0;
+    const el = adoptable ?? document.createElement("style");
     if (!el.isConnected) {
-      el.id = id;
+      el.id = existing ? `${id}-${++_id}` : id;
       if (options.media) el.media = options.media;
       document.head.appendChild(el);
     }
-    if (isLoaded.value) return;
+    el.dataset.origamStyleOwned = "";
+    tag = el;
     stop = (0, _vue.watch)(cssRef, value => {
       el.textContent = value;
     }, {
@@ -37,7 +42,8 @@ function useStyleTag(css, options = {}) {
   const unload = () => {
     if (!document || !isLoaded.value) return;
     stop();
-    document.head.removeChild(document.getElementById(id));
+    tag?.remove();
+    tag = void 0;
     isLoaded.value = false;
   };
   if (immediate && !manual) (0, _commons2.tryOnMounted)(load);

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

@@ -13,18 +13,23 @@ export function useStyleTag(css, options = {}) {
   const cssRef = shallowRef(css);
   let stop = () => {
   };
+  let tag;
   const load = () => {
     if (!document)
       return;
-    const el = document.getElementById(id) || document.createElement("style");
+    if (isLoaded.value)
+      return;
+    const existing = document.getElementById(id);
+    const adoptable = existing && existing.dataset.origamStyleOwned === void 0 ? existing : void 0;
+    const el = adoptable ?? document.createElement("style");
     if (!el.isConnected) {
-      el.id = id;
+      el.id = existing ? `${id}-${++_id}` : id;
       if (options.media)
         el.media = options.media;
       document.head.appendChild(el);
     }
-    if (isLoaded.value)
-      return;
+    el.dataset.origamStyleOwned = "";
+    tag = el;
     stop = watch(
       cssRef,
       (value) => {
@@ -38,7 +43,8 @@ export function useStyleTag(css, options = {}) {
     if (!document || !isLoaded.value)
       return;
     stop();
-    document.head.removeChild(document.getElementById(id));
+    tag?.remove();
+    tag = void 0;
     isLoaded.value = false;
   };
   if (immediate && !manual)

package/dist/src/consts/Commons/ssr-style.const.cjs

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SSR_STYLE_TAG_PREFIX = exports.ORIGAM_SSR_STYLES_KEY = void 0;
+const ORIGAM_SSR_STYLES_KEY = exports.ORIGAM_SSR_STYLES_KEY = /* @__PURE__ */Symbol.for("origam:ssr-styles");
+const SSR_STYLE_TAG_PREFIX = exports.SSR_STYLE_TAG_PREFIX = "origam-style-";

package/dist/src/consts/Commons/ssr-style.const.d.ts

@@ -0,0 +1,19 @@
+import type { InjectionKey } from 'vue';
+import type { ISsrStyleCollector } from '../../interfaces/Commons/style.interface';
+/*********************************************************
+ * ORIGAM_SSR_STYLES_KEY / SSR_STYLE_TAG_PREFIX (#1092)
+ *
+ * @description
+ * Provide/inject key for the per-app collector the server render fills with
+ * every `useStyle()` rule. Global symbol, like the other origam keys, so two
+ * bundles of the library interoperate. `createOrigam()` provides it ONLY when
+ * there is no `document`: on the client `inject()` returns `null` and
+ * `useStyle` takes the DOM path.
+ *
+ * @description
+ * Prefix of the `id` of the `<style>` tag a `useStyle()` instance owns,
+ * followed by the instance's `useId()` value, so the tag the server renders
+ * and the tag the client looks up at mount carry the SAME id.
+ ********************************************************/
+export declare const ORIGAM_SSR_STYLES_KEY: InjectionKey<ISsrStyleCollector>;
+export declare const SSR_STYLE_TAG_PREFIX = "origam-style-";

package/dist/src/consts/Commons/ssr-style.const.js

@@ -0,0 +1,2 @@
+export const ORIGAM_SSR_STYLES_KEY = /* @__PURE__ */ Symbol.for("origam:ssr-styles");
+export const SSR_STYLE_TAG_PREFIX = "origam-style-";

package/dist/src/consts/index.cjs

@@ -69,6 +69,17 @@ Object.keys(_defaults).forEach(function (key) {
     }
   });
 });
+var _ssrStyle = require("./Commons/ssr-style.const.cjs");
+Object.keys(_ssrStyle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ssrStyle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssrStyle[key];
+    }
+  });
+});
 var _density = require("./Commons/density.const.cjs");
 Object.keys(_density).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -4,6 +4,7 @@ export * from './Commons/color.const';
 export * from './Commons/commons.const';
 export * from './Commons/date.const';
 export * from './Commons/defaults.const';
+export * from './Commons/ssr-style.const';
 export * from './Commons/density.const';
 export * from './Commons/dimension.const';
 export * from './Commons/layout.const';

package/dist/src/consts/index.js

@@ -4,6 +4,7 @@ export * from "./Commons/color.const.js";
 export * from "./Commons/commons.const.js";
 export * from "./Commons/date.const.js";
 export * from "./Commons/defaults.const.js";
+export * from "./Commons/ssr-style.const.js";
 export * from "./Commons/density.const.js";
 export * from "./Commons/dimension.const.js";
 export * from "./Commons/layout.const.js";

package/dist/src/directives/Contrast/contrast.directive.cjs

@@ -142,12 +142,67 @@ function enforceContrast(el, enabled) {
   const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
   el.style.setProperty("color", better, "important");
   el.dataset.origamContrastFixed = "true";
-  console.warn(`[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`, el);
+  if (process.env?.DEV) {
+    console.warn(`[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`, el);
+  }
+}
+const MAX_SETTLE_PASSES = 4;
+const COLOR_TRANSITION_PROPERTIES = /* @__PURE__ */new Set(["color", "background-color"]);
+function declaredTransitionMs(el) {
+  const toMs = value => {
+    const n = parseFloat(value);
+    if (Number.isNaN(n)) return 0;
+    return value.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  let longest = 0;
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const durations = style.transitionDuration.split(",");
+    const delays = style.transitionDelay.split(",");
+    durations.forEach((duration, i) => {
+      longest = Math.max(longest, toMs(duration) + toMs(delays[i % delays.length] ?? "0"));
+    });
+  }
+  return longest;
+}
+function runningColorTransitions(el) {
+  const found = [];
+  for (let node = el; node; node = node.parentElement) {
+    for (const animation of node.getAnimations()) {
+      const property = animation.transitionProperty;
+      if (property && COLOR_TRANSITION_PROPERTIES.has(property) && animation.playState !== "finished") {
+        found.push(animation);
+      }
+    }
+  }
+  return found;
+}
+function forceStyleRecalc(el) {
+  return getComputedStyle(el).color;
+}
+function settleThenEnforce(el, enabled, pending, pass = 0) {
+  if (pending.cancelled) return;
+  if (!forceStyleRecalc(el)) return;
+  if (typeof el.getAnimations === "function") {
+    const running = pass < MAX_SETTLE_PASSES ? runningColorTransitions(el) : [];
+    if (running.length) {
+      Promise.allSettled(running.map(animation => animation.finished)).then(() => settleThenEnforce(el, enabled, pending, pass + 1));
+      return;
+    }
+    enforceContrast(el, enabled);
+    return;
+  }
+  const wait = declaredTransitionMs(el);
+  if (wait > 0 && pass === 0 && typeof setTimeout !== "undefined") {
+    pending.timeout = setTimeout(() => settleThenEnforce(el, enabled, pending, 1), wait);
+    return;
+  }
+  enforceContrast(el, enabled);
 }
-const SETTLE_MS = 250;
 function cancelScheduled(el) {
   const pending = el._contrastTimers;
   if (!pending) return;
+  pending.cancelled = true;
   if (pending.raf !== void 0 && typeof cancelAnimationFrame !== "undefined") {
     cancelAnimationFrame(pending.raf);
   }
@@ -160,10 +215,7 @@ function schedule(el, enabled) {
   cancelScheduled(el);
   const pending = {};
   if (typeof requestAnimationFrame !== "undefined") {
-    pending.raf = requestAnimationFrame(() => enforceContrast(el, enabled));
-  }
-  if (typeof setTimeout !== "undefined") {
-    pending.timeout = setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+    pending.raf = requestAnimationFrame(() => settleThenEnforce(el, enabled, pending));
   }
   el._contrastTimers = pending;
 }

package/dist/src/directives/Contrast/contrast.directive.d.ts

@@ -1,5 +1,15 @@
 import type { Directive } from 'vue';
 import type { IContrastOptions } from '../../interfaces/Commons/commons.interface';
 export declare function setContrastConfig(value: boolean | IContrastOptions | undefined): void;
+/**
+ * `v-contrast` — guards an element's text legibility at runtime.
+ *
+ * After the browser has resolved the design-token CSS variables, it measures
+ * the element's text colour against its painted background. When the WCAG
+ * ratio falls below the configured threshold it forces the better of
+ * black / white text (in every build) and, in dev only, logs a one-line warning explaining the swap. Toggle
+ * globally via `createOrigam({ contrast: false })`, or per-element with
+ * `v-contrast="false"`.
+ */
 declare const vContrast: Directive<HTMLElement, boolean | undefined>;
 export default vContrast;