origam 2.18.19 → 2.18.21

package/dist/src/assets/css/tokens/origam-utilities.css

@@ -123,3 +123,33 @@
 .origam--text-lg { font-size: var(--origam-font__size---lg); }
 .origam--text-xl { font-size: var(--origam-font__size---xl); }
 .origam--text-2xl { font-size: var(--origam-font__size---2xl); }
+
+/* --- Opacity --------------------------------------------- */
+/*                                                            */
+/* Emitted by `useOpacity` when the value lands on a rung of   */
+/* the primitive ladder. `useOpacity` ALSO emits the matching  */
+/* inline `opacity:` declaration (strategy A). That is not     */
+/* redundancy: a scoped component rule is (0,2,0) and beats    */
+/* this (0,1,0) class whatever the load order, and OrigamBtn   */
+/* already declares `opacity` in its own SCSS. See #514.       */
+.origam--opacity-0 { opacity: var(--origam-opacity---0); }
+.origam--opacity-12 { opacity: var(--origam-opacity---12); }
+.origam--opacity-26 { opacity: var(--origam-opacity---26); }
+.origam--opacity-32 { opacity: var(--origam-opacity---32); }
+.origam--opacity-50 { opacity: var(--origam-opacity---50); }
+.origam--opacity-60 { opacity: var(--origam-opacity---60); }
+.origam--opacity-70 { opacity: var(--origam-opacity---70); }
+.origam--opacity-87 { opacity: var(--origam-opacity---87); }
+.origam--opacity-100 { opacity: var(--origam-opacity---100); }
+
+/* --- Backdrop blur --------------------------------------- */
+/*                                                            */
+/* Emitted by `useBackdrop`. The -webkit- twin is required:    */
+/* Safari still ships backdrop-filter prefixed only. Rung      */
+/* values follow the measured distribution of blur() literals  */
+/* in this repo, not a tidy doubling, hence sm = 6px.          */
+.origam--backdrop-blur-xs { backdrop-filter: blur(var(--origam-blur---xs)); -webkit-backdrop-filter: blur(var(--origam-blur---xs)); }
+.origam--backdrop-blur-sm { backdrop-filter: blur(var(--origam-blur---sm)); -webkit-backdrop-filter: blur(var(--origam-blur---sm)); }
+.origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
+.origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
+.origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }

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

@@ -162,6 +162,11 @@
   --origam-opacity---70: 0.7;
   --origam-opacity---87: 0.87;
   --origam-opacity---100: 1;
+  --origam-blur---xs: 4px;
+  --origam-blur---sm: 6px;
+  --origam-blur---md: 8px;
+  --origam-blur---lg: 16px;
+  --origam-blur---xl: 24px;
   --origam-border__width---0: 0px;
   --origam-border__width---2: 2px;
   --origam-border__width---4: 4px;

package/dist/src/assets/scss/tokens/_origam-utilities.scss

@@ -123,3 +123,33 @@
 .origam--text-lg { font-size: var(--origam-font__size---lg); }
 .origam--text-xl { font-size: var(--origam-font__size---xl); }
 .origam--text-2xl { font-size: var(--origam-font__size---2xl); }
+
+/* --- Opacity --------------------------------------------- */
+/*                                                            */
+/* Emitted by `useOpacity` when the value lands on a rung of   */
+/* the primitive ladder. `useOpacity` ALSO emits the matching  */
+/* inline `opacity:` declaration (strategy A). That is not     */
+/* redundancy: a scoped component rule is (0,2,0) and beats    */
+/* this (0,1,0) class whatever the load order, and OrigamBtn   */
+/* already declares `opacity` in its own SCSS. See #514.       */
+.origam--opacity-0 { opacity: var(--origam-opacity---0); }
+.origam--opacity-12 { opacity: var(--origam-opacity---12); }
+.origam--opacity-26 { opacity: var(--origam-opacity---26); }
+.origam--opacity-32 { opacity: var(--origam-opacity---32); }
+.origam--opacity-50 { opacity: var(--origam-opacity---50); }
+.origam--opacity-60 { opacity: var(--origam-opacity---60); }
+.origam--opacity-70 { opacity: var(--origam-opacity---70); }
+.origam--opacity-87 { opacity: var(--origam-opacity---87); }
+.origam--opacity-100 { opacity: var(--origam-opacity---100); }
+
+/* --- Backdrop blur --------------------------------------- */
+/*                                                            */
+/* Emitted by `useBackdrop`. The -webkit- twin is required:    */
+/* Safari still ships backdrop-filter prefixed only. Rung      */
+/* values follow the measured distribution of blur() literals  */
+/* in this repo, not a tidy doubling, hence sm = 6px.          */
+.origam--backdrop-blur-xs { backdrop-filter: blur(var(--origam-blur---xs)); -webkit-backdrop-filter: blur(var(--origam-blur---xs)); }
+.origam--backdrop-blur-sm { backdrop-filter: blur(var(--origam-blur---sm)); -webkit-backdrop-filter: blur(var(--origam-blur---sm)); }
+.origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
+.origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
+.origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }

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

@@ -162,6 +162,11 @@
   --origam-opacity---70: 0.7;
   --origam-opacity---87: 0.87;
   --origam-opacity---100: 1;
+  --origam-blur---xs: 4px;
+  --origam-blur---sm: 6px;
+  --origam-blur---md: 8px;
+  --origam-blur---lg: 16px;
+  --origam-blur---xl: 24px;
   --origam-border__width---0: 0px;
   --origam-border__width---2: 2px;
   --origam-border__width---4: 4px;

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

@@ -113,7 +113,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 defineEmits([]);
 defineSlots();

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -33,7 +33,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 defineEmits([]);
 defineSlots();

package/dist/src/components/Title/OrigamTitle.vue

@@ -66,7 +66,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 defineEmits([]);

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBackdrop = useBackdrop;
+var _vue = require("vue");
+var _backdrop = require("../../consts/Commons/backdrop.const.cjs");
+function resolveBackdropBlur(value) {
+  if (value == null || value === false || value === "") return null;
+  if (value === true) {
+    return {
+      rung: _backdrop.BACKDROP_BLUR_DEFAULT_RUNG,
+      length: _backdrop.BACKDROP_BLUR_RUNG_VARS[_backdrop.BACKDROP_BLUR_DEFAULT_RUNG]
+    };
+  }
+  if (typeof value === "number") return {
+    rung: null,
+    length: `${value}px`
+  };
+  const key = String(value).trim();
+  const rungVar = _backdrop.BACKDROP_BLUR_RUNG_VARS[key];
+  if (rungVar) return {
+    rung: key,
+    length: rungVar
+  };
+  return {
+    rung: null,
+    length: key
+  };
+}
+function useBackdrop(props) {
+  const resolved = (0, _vue.computed)(() => {
+    return resolveBackdropBlur((0, _vue.isRef)(props) ? props.value : props.backdropBlur);
+  });
+  const backdropClasses = (0, _vue.computed)(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${_backdrop.BACKDROP_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const backdropStyles = (0, _vue.computed)(() => {
+    const current = resolved.value;
+    if (!current) return [];
+    const filter = `blur(${current.length})`;
+    return [`backdrop-filter: ${filter}`, `-webkit-backdrop-filter: ${filter}`];
+  });
+  return {
+    backdropClasses,
+    backdropStyles
+  };
+}

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

@@ -0,0 +1,32 @@
+import { Ref } from 'vue';
+import type { IBackdropProps } from '../../interfaces/Commons/backdrop.interface';
+import { TBackdropBlur } from '../../types/Commons/backdrop.type';
+/*********************************************************
+ * useBackdrop
+ *
+ * @description
+ * Translates the `backdropBlur` prop into `backdropClasses` (the global
+ * utility class, when the value lands on a token rung) AND
+ * `backdropStyles` (always a `backdrop-filter` pair). Both channels are
+ * emitted in PARALLEL — strategy A, same contract as `useElevation`.
+ *
+ * @description
+ * The `-webkit-` prefixed twin is emitted alongside the standard property
+ * on every path: Safari still ships `backdrop-filter` prefixed only, and
+ * every one of the 12 components already painting glass in this DS writes
+ * the pair. Dropping it would make the prop a no-op on Safari while
+ * looking correct everywhere the author tests.
+ *
+ * @description
+ * No `@supports` gate, and that is not an oversight. An unsupported
+ * browser drops an unknown declaration by itself, so the gate would buy
+ * nothing here — and an inline style cannot carry one anyway. The
+ * `@supports not (backdrop-filter: ...)` blocks that exist in the DS
+ * today thicken the BACKGROUND COLOUR when blur is unavailable, which is
+ * a `bgColor` decision belonging to whoever writes the preset, not to
+ * this composable.
+ ********************************************************/
+export declare function useBackdrop(props: IBackdropProps | Ref<TBackdropBlur | undefined>): {
+    backdropClasses: import("vue").ComputedRef<string[]>;
+    backdropStyles: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,33 @@
+import { computed, isRef } from "vue";
+import {
+  BACKDROP_BLUR_DEFAULT_RUNG,
+  BACKDROP_BLUR_RUNG_VARS,
+  BACKDROP_UTILITY_CLASS_PREFIX
+} from "../../consts/Commons/backdrop.const.js";
+function resolveBackdropBlur(value) {
+  if (value == null || value === false || value === "") return null;
+  if (value === true) {
+    return { rung: BACKDROP_BLUR_DEFAULT_RUNG, length: BACKDROP_BLUR_RUNG_VARS[BACKDROP_BLUR_DEFAULT_RUNG] };
+  }
+  if (typeof value === "number") return { rung: null, length: `${value}px` };
+  const key = String(value).trim();
+  const rungVar = BACKDROP_BLUR_RUNG_VARS[key];
+  if (rungVar) return { rung: key, length: rungVar };
+  return { rung: null, length: key };
+}
+export function useBackdrop(props) {
+  const resolved = computed(() => {
+    return resolveBackdropBlur(isRef(props) ? props.value : props.backdropBlur);
+  });
+  const backdropClasses = computed(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${BACKDROP_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const backdropStyles = computed(() => {
+    const current = resolved.value;
+    if (!current) return [];
+    const filter = `blur(${current.length})`;
+    return [`backdrop-filter: ${filter}`, `-webkit-backdrop-filter: ${filter}`];
+  });
+  return { backdropClasses, backdropStyles };
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOpacity = useOpacity;
+var _vue = require("vue");
+var _opacity = require("../../consts/Commons/opacity.const.cjs");
+function resolveNumericOpacity(value) {
+  if (value <= _opacity.OPACITY_FRACTION_CEILING) return {
+    rung: null,
+    css: String(value)
+  };
+  const rung = String(value);
+  const rungVar = _opacity.OPACITY_RUNG_VARS[rung];
+  if (rungVar) return {
+    rung,
+    css: rungVar
+  };
+  return {
+    rung: null,
+    css: String(value / _opacity.OPACITY_PERCENT_SCALE)
+  };
+}
+function resolveOpacity(value) {
+  if (value == null || value === "") return null;
+  const numeric = typeof value === "number" ? value : Number(String(value).trim());
+  if (Number.isFinite(numeric)) return resolveNumericOpacity(numeric);
+  return {
+    rung: null,
+    css: String(value).trim()
+  };
+}
+function useOpacity(props) {
+  const resolved = (0, _vue.computed)(() => {
+    return resolveOpacity((0, _vue.isRef)(props) ? props.value : props.opacity);
+  });
+  const opacityClasses = (0, _vue.computed)(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${_opacity.OPACITY_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const opacityStyles = (0, _vue.computed)(() => {
+    const current = resolved.value;
+    return current ? [`opacity: ${current.css}`] : [];
+  });
+  return {
+    opacityClasses,
+    opacityStyles
+  };
+}

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

@@ -0,0 +1,33 @@
+import { Ref } from 'vue';
+import type { IOpacityProps } from '../../interfaces/Commons/opacity.interface';
+import { TOpacity } from '../../types/Commons/opacity.type';
+/*********************************************************
+ * useOpacity
+ *
+ * @description
+ * Translates the `opacity` prop into `opacityClasses` (the global utility
+ * class, when the value lands on a token rung) AND `opacityStyles`
+ * (always an `opacity:` declaration). Both channels are emitted in
+ * PARALLEL, never one instead of the other — strategy A, the same
+ * contract `useElevation` and `useRounded` honour.
+ *
+ * @description
+ * ⛔ THE STYLE IS NOT REDUNDANT WITH THE CLASS, and dropping it would
+ * break the prop on most components. A utility class is `(0,1,0)`; a Vue
+ * scoped component rule is `.class[data-v-hash]` = `(0,2,0)` and wins
+ * regardless of load order. `OrigamBtn` already declares `opacity` in its
+ * own scoped SCSS (`--variant-plain`, `--disabled`), so on Btn the class
+ * alone would paint nothing. This is the measured lesson of #514 on the
+ * foreground channel, applied here before it can be re-learned.
+ *
+ * @description
+ * REUSES the primitive ladder that already existed
+ * (`--origam-opacity---{0,12,26,32,50,60,70,87,100}`, `primitive.css`);
+ * this composable declares no token of its own. See
+ * {@link IOpacityProps} for why ADR-005's "add a token group" was already
+ * half-done.
+ ********************************************************/
+export declare function useOpacity(props: IOpacityProps | Ref<TOpacity | undefined>): {
+    opacityClasses: import("vue").ComputedRef<string[]>;
+    opacityStyles: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,34 @@
+import { computed, isRef } from "vue";
+import {
+  OPACITY_FRACTION_CEILING,
+  OPACITY_PERCENT_SCALE,
+  OPACITY_RUNG_VARS,
+  OPACITY_UTILITY_CLASS_PREFIX
+} from "../../consts/Commons/opacity.const.js";
+function resolveNumericOpacity(value) {
+  if (value <= OPACITY_FRACTION_CEILING) return { rung: null, css: String(value) };
+  const rung = String(value);
+  const rungVar = OPACITY_RUNG_VARS[rung];
+  if (rungVar) return { rung, css: rungVar };
+  return { rung: null, css: String(value / OPACITY_PERCENT_SCALE) };
+}
+function resolveOpacity(value) {
+  if (value == null || value === "") return null;
+  const numeric = typeof value === "number" ? value : Number(String(value).trim());
+  if (Number.isFinite(numeric)) return resolveNumericOpacity(numeric);
+  return { rung: null, css: String(value).trim() };
+}
+export function useOpacity(props) {
+  const resolved = computed(() => {
+    return resolveOpacity(isRef(props) ? props.value : props.opacity);
+  });
+  const opacityClasses = computed(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${OPACITY_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const opacityStyles = computed(() => {
+    const current = resolved.value;
+    return current ? [`opacity: ${current.css}`] : [];
+  });
+  return { opacityClasses, opacityStyles };
+}

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

@@ -8,6 +8,7 @@ var _vue = require("vue");
 var _border = require("./border.composable.cjs");
 var _elevation = require("./elevation.composable.cjs");
 var _margin = require("./margin.composable.cjs");
+var _opacity = require("./opacity.composable.cjs");
 var _padding = require("./padding.composable.cjs");
 var _rounded = require("./rounded.composable.cjs");
 var _color = require("../../utils/Commons/color.util.cjs");
@@ -44,6 +45,8 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const padding = pickEffective(() => props.padding, isHover, isActive, hoverState, activeState, "padding");
   const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
   const gap = pickEffective(() => props.gap, isHover, isActive, hoverState, activeState, "gap");
+  const opacity = pickEffective(() => props.opacity, isHover, isActive, hoverState, activeState, "opacity");
+  const borderColor = pickEffective(() => props.borderColor, isHover, isActive, hoverState, activeState, "borderColor");
   const sameIntent = (a, b) => {
     return !!a && !!b && a === b && (0, _color.isIntent)(a);
   };
@@ -105,7 +108,7 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
       return border.value;
     },
     get borderColor() {
-      return props.borderColor;
+      return borderColor.value;
     },
     get borderStyle() {
       return props.borderStyle;
@@ -225,6 +228,14 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     return [`gap: ${v}`];
   });
   const gapClasses = (0, _vue.computed)(() => []);
+  const {
+    opacityClasses,
+    opacityStyles
+  } = (0, _opacity.useOpacity)((0, _vue.reactive)({
+    get opacity() {
+      return opacity.value;
+    }
+  }));
   return {
     // Resolved scalar refs (so consumers can read the effective value)
     color,
@@ -235,6 +246,8 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     padding,
     margin,
     gap,
+    opacity,
+    borderColor,
     // Per-axis classes + styles (state-aware)
     colorClasses,
     colorStyles,
@@ -249,6 +262,8 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     marginClasses,
     marginStyles,
     gapClasses,
-    gapStyles
+    gapStyles,
+    opacityClasses,
+    opacityStyles
   };
 }

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

@@ -10,8 +10,9 @@ import type { TStateEffectProps } from '../../types/Commons/state-effect.type';
  * `useBorder` + `useRounded` + `useElevation` + `usePadding` + `useMargin`
  * que chaque composant visuel devait repeter. Lit les etats `isHover`/
  * `isActive`/`isDisabled` (et leurs overrides `hoverState`/`activeState`)
- * et resout 8 axes state-aware : color, bgColor, border, rounded,
- * elevation, padding, margin, gap — chacun avec classes ET styles.
+ * et resout 10 axes state-aware : color, bgColor, border, borderColor,
+ * rounded, elevation, padding, margin, gap, opacity — chacun avec
+ * classes ET styles.
  * Priorite de resolution par axe : HOVER gagne sur ACTIVE (survoler un
  * element presse/selectionne montre la surface hover), qui gagne sur la
  * valeur de repos (`props.xxx`).
@@ -43,6 +44,8 @@ flat?: Ref<boolean> | ComputedRef<boolean>): {
     padding: ComputedRef<string | number | boolean | undefined>;
     margin: ComputedRef<string | number | boolean | undefined>;
     gap: ComputedRef<string | number | boolean | undefined>;
+    opacity: ComputedRef<string | number | undefined>;
+    borderColor: ComputedRef<string | undefined>;
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
     borderClasses: ComputedRef<string[]>;
@@ -57,4 +60,6 @@ flat?: Ref<boolean> | ComputedRef<boolean>): {
     marginStyles: ComputedRef<string[]>;
     gapClasses: ComputedRef<string[]>;
     gapStyles: ComputedRef<string[]>;
+    opacityClasses: ComputedRef<string[]>;
+    opacityStyles: ComputedRef<string[]>;
 };

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

@@ -2,6 +2,7 @@ import { computed, reactive } from "vue";
 import { useBorder } from "./border.composable.js";
 import { useElevation } from "./elevation.composable.js";
 import { useMargin } from "./margin.composable.js";
+import { useOpacity } from "./opacity.composable.js";
 import { usePadding } from "./padding.composable.js";
 import { useRounded } from "./rounded.composable.js";
 import { getForeground, intentBgExpr, isCssColor, isIntent, isParsableColor, isUtilityIntent, parseColor, rawBgExprWithState, tokenForegroundForIntent, tokenStylesForIntent, warnLegacyColor } from "../../utils/Commons/color.util.js";
@@ -45,6 +46,15 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     activeState,
     "gap"
   );
+  const opacity = pickEffective(() => props.opacity, isHover, isActive, hoverState, activeState, "opacity");
+  const borderColor = pickEffective(
+    () => props.borderColor,
+    isHover,
+    isActive,
+    hoverState,
+    activeState,
+    "borderColor"
+  );
   const sameIntent = (a, b) => {
     return !!a && !!b && a === b && isIntent(a);
   };
@@ -104,7 +114,7 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
         return border.value;
       },
       get borderColor() {
-        return props.borderColor;
+        return borderColor.value;
       },
       get borderStyle() {
         return props.borderStyle;
@@ -222,6 +232,13 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     return [`gap: ${v}`];
   });
   const gapClasses = computed(() => []);
+  const { opacityClasses, opacityStyles } = useOpacity(
+    reactive({
+      get opacity() {
+        return opacity.value;
+      }
+    })
+  );
   return {
     // Resolved scalar refs (so consumers can read the effective value)
     color,
@@ -232,6 +249,8 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     padding,
     margin,
     gap,
+    opacity,
+    borderColor,
     // Per-axis classes + styles (state-aware)
     colorClasses,
     colorStyles,
@@ -246,6 +265,8 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     marginClasses,
     marginStyles,
     gapClasses,
-    gapStyles
+    gapStyles,
+    opacityClasses,
+    opacityStyles
   };
 }

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTypography = useTypography;
 var _vue = require("vue");
 const TYPOGRAPHY_TOKEN_MAP = [["fontFamily", "font-family", "font__family"], ["fontSize", "font-size", "font__size"], ["fontWeight", "font-weight", "font__weight"], ["lineHeight", "line-height", "font__lineHeight"], ["letterSpacing", "letter-spacing", "font__letterSpacing"]];
+const TYPOGRAPHY_PASSTHROUGH_MAP = [["fontStyle", "font-style"]];
 function useTypography(props, varPrefix) {
   const typographyStyles = (0, _vue.computed)(() => {
     const styles = {};
@@ -15,6 +16,12 @@ function useTypography(props, varPrefix) {
         styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
       }
     }
+    for (const [propKey, cssProp] of TYPOGRAPHY_PASSTHROUGH_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = String(value);
+      }
+    }
     return Object.keys(styles).length ? styles : null;
   });
   return {

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

@@ -4,13 +4,18 @@ import type { ITypographyProps } from '../../interfaces/Commons/typography.inter
  *
  * @description
  * Volet typographique de `useMargin`/`useBorder`/`useColor` : pour
- * chacune des cinq `ITypographyProps` (`fontFamily`, `fontSize`,
+ * chacune des cinq `ITypographyProps` de TOKEN (`fontFamily`, `fontSize`,
  * `fontWeight`, `lineHeight`, `letterSpacing`) que le consommateur a
  * fixee, emet une custom property inline `--origam-{varPrefix}---{prop}`
  * qui repointe vers le token primitif correspondant. Une prop non fixee
  * n'emet rien — le theme/la variante du composant garde la main.
  *
  * @description
+ * La sixieme, `fontStyle`, passe par un canal PASSTHROUGH : sa valeur est
+ * un mot-cle CSS rendu verbatim, sans enveloppe `var()`. Voir
+ * `TYPOGRAPHY_PASSTHROUGH_MAP` pour le pourquoi.
+ *
+ * @description
  * INLINE UNIQUEMENT (pas de classe utilitaire — `origam-utilities.css`
  * n'a pas de famille `.origam--font-*`), et `typographyStyles` est un
  * objet PLAT `{ '--var': valeur }` (jamais un tableau) : `useStyle()`

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

@@ -6,6 +6,9 @@ const TYPOGRAPHY_TOKEN_MAP = [
   ["lineHeight", "line-height", "font__lineHeight"],
   ["letterSpacing", "letter-spacing", "font__letterSpacing"]
 ];
+const TYPOGRAPHY_PASSTHROUGH_MAP = [
+  ["fontStyle", "font-style"]
+];
 export function useTypography(props, varPrefix) {
   const typographyStyles = computed(() => {
     const styles = {};
@@ -15,6 +18,12 @@ export function useTypography(props, varPrefix) {
         styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
       }
     }
+    for (const [propKey, cssProp] of TYPOGRAPHY_PASSTHROUGH_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = String(value);
+      }
+    }
     return Object.keys(styles).length ? styles : null;
   });
   return { typographyStyles };

package/dist/src/composables/index.cjs

@@ -168,6 +168,18 @@ Object.keys(_dimension).forEach(function (key) {
     }
   });
 });
+var _backdrop = require("./Commons/backdrop.composable.cjs");
+Object.keys(_backdrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _backdrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _backdrop[key];
+    }
+  });
+});
 var _elevation = require("./Commons/elevation.composable.cjs");
 Object.keys(_elevation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -180,6 +192,18 @@ Object.keys(_elevation).forEach(function (key) {
     }
   });
 });
+var _opacity = require("./Commons/opacity.composable.cjs");
+Object.keys(_opacity).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _opacity[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _opacity[key];
+    }
+  });
+});
 var _group = require("./Commons/group.composable.cjs");
 Object.keys(_group).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -11,7 +11,9 @@ export * from './Commons/date-picker-calendar.composable';
 export * from './Commons/date.composable';
 export * from './Commons/density.composable';
 export * from './Commons/dimension.composable';
+export * from './Commons/backdrop.composable';
 export * from './Commons/elevation.composable';
+export * from './Commons/opacity.composable';
 export * from './Commons/group.composable';
 export * from './Commons/groupItem.composable';
 export * from './Commons/groupSiblingLink.composable';

package/dist/src/composables/index.js

@@ -11,7 +11,9 @@ export * from "./Commons/date-picker-calendar.composable.js";
 export * from "./Commons/date.composable.js";
 export * from "./Commons/density.composable.js";
 export * from "./Commons/dimension.composable.js";
+export * from "./Commons/backdrop.composable.js";
 export * from "./Commons/elevation.composable.js";
+export * from "./Commons/opacity.composable.js";
 export * from "./Commons/group.composable.js";
 export * from "./Commons/groupItem.composable.js";
 export * from "./Commons/groupSiblingLink.composable.js";

package/dist/src/consts/Commons/backdrop.const.cjs

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BACKDROP_UTILITY_CLASS_PREFIX = exports.BACKDROP_BLUR_RUNG_VARS = exports.BACKDROP_BLUR_DEFAULT_RUNG = void 0;
+const BACKDROP_BLUR_RUNG_VARS = exports.BACKDROP_BLUR_RUNG_VARS = {
+  xs: "var(--origam-blur---xs, 4px)",
+  sm: "var(--origam-blur---sm, 6px)",
+  md: "var(--origam-blur---md, 8px)",
+  lg: "var(--origam-blur---lg, 16px)",
+  xl: "var(--origam-blur---xl, 24px)"
+};
+const BACKDROP_BLUR_DEFAULT_RUNG = exports.BACKDROP_BLUR_DEFAULT_RUNG = "md";
+const BACKDROP_UTILITY_CLASS_PREFIX = exports.BACKDROP_UTILITY_CLASS_PREFIX = "origam--backdrop-blur-";