origam 2.18.18 → 2.18.20

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

@@ -1,5 +1,19 @@
 /*********************************************************
- * useLayout
+ * useLayoutMain
+ *
+ * @description
+ * ⛔ RENOMME depuis `useLayout`, qui ECRASAIT le composable natif de Nuxt.
+ * Nuxt expose `useLayout` en auto-import (`#app/composables/layout`) ; le nôtre
+ * portant le même nom, c'est LE NOTRE QUI GAGNAIT et celui du framework qui
+ * était ignoré. Relevé sur le serveur de dev de l'utilisateur :
+ *   WARN [NUXT_B6002] useLayout is already auto-imported by Nuxt as a built-in,
+ *        and overriding it will likely cause issues.
+ *   WARN Duplicated imports "useLayout", the one from "#app/composables/layout"
+ *        has been ignored
+ * Ce n'était pas cosmétique : notre version LEVE une exception sans provider
+ * Origam, donc tout code Nuxt attendant `useLayout` plantait au lieu de recevoir
+ * le composable du framework. Le nom `useLayoutMain` dit ce qu'il fait — il
+ * expose la zone MAIN — et s'aligne sur `useLayoutItem`.
  *
  * @description
  * Reads the nearest `ORIGAM_LAYOUT_KEY` injection provided by
@@ -11,7 +25,7 @@
  * level (no direct function dependency) — the three only share the
  * `ORIGAM_LAYOUT_KEY` provide/inject contract.
  ********************************************************/
-export declare function useLayout(): {
+export declare function useLayoutMain(): {
     getLayoutItem: (id: string) => import("../../interfaces").ILayerItem | undefined;
     mainRect: import("vue").Ref<import("../../interfaces").ILayer, import("../../interfaces").ILayer>;
     mainStyles: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;

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

@@ -1,6 +1,6 @@
 import { inject } from "vue";
 import { ORIGAM_LAYOUT_KEY } from "../../consts/Commons/layout.const.js";
-export function useLayout() {
+export function useLayoutMain() {
   const layout = inject(ORIGAM_LAYOUT_KEY);
   if (!layout) {
     throw new Error("[Origam] Could not find injected layout");

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/theme-props-resolver.composable.cjs

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.installThemePropsResolver = installThemePropsResolver;
+exports.resolveVariantPresetRegistry = resolveVariantPresetRegistry;
 exports.themedPropKeysUnion = themedPropKeysUnion;
 var _vue = require("vue");
 var _defaults = require("../../consts/Commons/defaults.const.cjs");
+var _variantPreset = require("../../consts/Commons/variant-preset.const.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
 var _color = require("../../utils/Commons/color.util.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
@@ -28,6 +30,15 @@ function themedPropKeysUnion(themes) {
   }
   return union;
 }
+function resolveVariantPresetRegistry(shipped, themeVariants) {
+  let out = {
+    ...shipped
+  };
+  for (const variants of themeVariants) {
+    out = (0, _commons.mergeDeep)(out, variants);
+  }
+  return out;
+}
 function passedPropValue(vnodeProps, key) {
   if (!vnodeProps) return void 0;
   for (const rawKey in vnodeProps) {
@@ -35,19 +46,40 @@ function passedPropValue(vnodeProps, key) {
   }
   return void 0;
 }
-function collectTargetKeys(themedKeysUnion, defaults, name) {
+function addSetKeys(source, target) {
+  if (!source) return;
+  for (const key of source) target.add(key);
+}
+function addObjectKeys(source, target) {
+  if (!source) return;
+  for (const key in source) target.add(key);
+}
+function addPresetKeys(presetTable, target) {
+  if (!presetTable) return;
+  for (const variantValue in presetTable) {
+    for (const key in presetTable[variantValue]) target.add(key);
+  }
+}
+function collectTargetKeys(themedKeysUnion, defaults, name, presetTable) {
   const ownKeys = themedKeysUnion.get(name);
   const globalKeys = themedKeysUnion.get("global");
   const providerOwnKeys = defaults.value?.[name];
   const providerGlobalKeys = defaults.value?.global;
-  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return null;
+  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys && !presetTable) return null;
   const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */new Set();
-  if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
-  if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
-  if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+  addSetKeys(globalKeys, targetKeys);
+  addObjectKeys(providerOwnKeys, targetKeys);
+  addObjectKeys(providerGlobalKeys, targetKeys);
+  addPresetKeys(presetTable, targetKeys);
   return targetKeys;
 }
-function patchThemedPropSlot(instance, defaults, name, key) {
+function readVariantPreset(presetTable, rawProps, key) {
+  if (!presetTable || key === _variantPreset.VARIANT_PROP_KEY) return void 0;
+  const activeVariant = rawProps[_variantPreset.VARIANT_PROP_KEY];
+  if (typeof activeVariant !== "string") return void 0;
+  return presetTable[activeVariant]?.[key];
+}
+function patchThemedPropSlot(instance, defaults, name, key, presetTable) {
   const rawProps = instance.props;
   const fallbackValue = (0, _vue.shallowRef)(rawProps[key]);
   let wasPassed = passedPropValue(instance.vnode.props, key) !== void 0;
@@ -65,6 +97,8 @@ function patchThemedPropSlot(instance, defaults, name, key) {
       if (globalDefaults && globalDefaults[key] !== void 0) {
         return globalDefaults[key];
       }
+      const fromPreset = readVariantPreset(presetTable, rawProps, key);
+      if (fromPreset !== void 0) return fromPreset;
       return fallback;
     },
     set(value) {
@@ -73,14 +107,15 @@ function patchThemedPropSlot(instance, defaults, name, key) {
     }
   });
 }
-function installThemePropsResolver(app, themedKeysUnion) {
+function installThemePropsResolver(app, themedKeysUnion, variantPresets = {}) {
   app.mixin({
     beforeCreate() {
       const instance = (0, _vue.getCurrentInstance)();
       if (!instance) return;
       const name = (0, _getCurrentInstance.getCurrentInstanceName)("theme-props-resolver");
       const defaults = (0, _vue.inject)(_defaults.ORIGAM_DEFAULTS_KEY, (0, _vue.ref)({}));
-      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name);
+      const presetTable = variantPresets[name];
+      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name, presetTable);
       if (!targetKeys) return;
       const rawProps = instance.props;
       for (const key of targetKeys) {
@@ -88,7 +123,7 @@ function installThemePropsResolver(app, themedKeysUnion) {
           (0, _color.warnUnsupportedProp)(name, key, `theme names this prop but <${name}> does not declare it`);
           continue;
         }
-        patchThemedPropSlot(instance, defaults, name, key);
+        patchThemedPropSlot(instance, defaults, name, key, presetTable);
       }
     }
   });

package/dist/src/composables/Commons/theme-props-resolver.composable.d.ts

@@ -1,5 +1,6 @@
 import { type App } from 'vue';
 import type { IDefault } from '../../interfaces/DefaultsProvider/defaults-provider.interface';
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
 /*********************************************************
  * themedPropKeysUnion
  *
@@ -21,6 +22,37 @@ import type { IDefault } from '../../interfaces/DefaultsProvider/defaults-provid
  * `createOrigam()` install time.
  ********************************************************/
 export declare function themedPropKeysUnion(themes: IDefault[]): Map<string, Set<string>>;
+/*********************************************************
+ * resolveVariantPresetRegistry
+ *
+ * @description
+ * ADR-005 D4 — collapse les tables de presets que le DS livre avec celles
+ * que les themes enregistres redefinissent, en un seul registre.
+ *
+ * @description
+ * Un theme retune ce que `outlined` VEUT DIRE en changeant des valeurs de
+ * PROPS, et ne descend aux `vars` / `cssVars` que pour ce que les props
+ * n'expriment pas. C'est ce qui reconcilie les variants avec la regle
+ * PROPS-D'ABORD : le seul API du DS qui la violait structurellement.
+ *
+ * @description
+ * `variants` est un FRERE de `components`, pas une cle imbriquee dedans.
+ * `components` est type `IDefault` (composant -> map de props) ; y nicher
+ * un niveau de variant rendrait `{ 'origam-btn': { outlined: … } }`
+ * ambigu avec un prop qui s'appellerait litteralement `outlined`.
+ *
+ * @description
+ * Fusion par `mergeDeep`, celui-la meme que `provideDefaults` utilise —
+ * le theme gagne, prop par prop. Consequence a connaitre : un preset
+ * d'ETAT (`active: { … }`, autorise par Q3) est donc FUSIONNE et non
+ * remplace, comme l'est deja un bloc `components` de theme. Une marque qui
+ * veut effacer une cle d'etat la repose explicitement.
+ *
+ * @description
+ * Pure — aucun acces Vue/DOM — donc appelee une fois, synchronement, a
+ * l'installation par `createOrigam()`, comme `themedPropKeysUnion`.
+ ********************************************************/
+export declare function resolveVariantPresetRegistry(shipped: TVariantPresetRegistry, themeVariants: Array<TVariantPresetRegistry>): TVariantPresetRegistry;
 /*********************************************************
  * installThemePropsResolver
  *
@@ -46,4 +78,4 @@ export declare function themedPropKeysUnion(themes: IDefault[]): Map<string, Set
  * carries the cost argument: an instance that neither a theme nor an ancestor
  * provider names returns after a Map lookup and one property lookup.
  ********************************************************/
-export declare function installThemePropsResolver(app: App, themedKeysUnion: Map<string, Set<string>>): void;
+export declare function installThemePropsResolver(app: App, themedKeysUnion: Map<string, Set<string>>, variantPresets?: TVariantPresetRegistry): void;

package/dist/src/composables/Commons/theme-props-resolver.composable.js

@@ -1,6 +1,7 @@
 import { getCurrentInstance, inject, ref, shallowRef } from "vue";
 import { ORIGAM_DEFAULTS_KEY } from "../../consts/Commons/defaults.const.js";
-import { camelize } from "../../utils/Commons/commons.util.js";
+import { VARIANT_PROP_KEY } from "../../consts/Commons/variant-preset.const.js";
+import { camelize, mergeDeep } from "../../utils/Commons/commons.util.js";
 import { warnUnsupportedProp } from "../../utils/Commons/color.util.js";
 import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 export function themedPropKeysUnion(themes) {
@@ -21,6 +22,13 @@ export function themedPropKeysUnion(themes) {
   }
   return union;
 }
+export function resolveVariantPresetRegistry(shipped, themeVariants) {
+  let out = { ...shipped };
+  for (const variants of themeVariants) {
+    out = mergeDeep(out, variants);
+  }
+  return out;
+}
 function passedPropValue(vnodeProps, key) {
   if (!vnodeProps) return void 0;
   for (const rawKey in vnodeProps) {
@@ -28,19 +36,40 @@ function passedPropValue(vnodeProps, key) {
   }
   return void 0;
 }
-function collectTargetKeys(themedKeysUnion, defaults, name) {
+function addSetKeys(source, target) {
+  if (!source) return;
+  for (const key of source) target.add(key);
+}
+function addObjectKeys(source, target) {
+  if (!source) return;
+  for (const key in source) target.add(key);
+}
+function addPresetKeys(presetTable, target) {
+  if (!presetTable) return;
+  for (const variantValue in presetTable) {
+    for (const key in presetTable[variantValue]) target.add(key);
+  }
+}
+function collectTargetKeys(themedKeysUnion, defaults, name, presetTable) {
   const ownKeys = themedKeysUnion.get(name);
   const globalKeys = themedKeysUnion.get("global");
   const providerOwnKeys = defaults.value?.[name];
   const providerGlobalKeys = defaults.value?.global;
-  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return null;
+  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys && !presetTable) return null;
   const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */ new Set();
-  if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
-  if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
-  if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+  addSetKeys(globalKeys, targetKeys);
+  addObjectKeys(providerOwnKeys, targetKeys);
+  addObjectKeys(providerGlobalKeys, targetKeys);
+  addPresetKeys(presetTable, targetKeys);
   return targetKeys;
 }
-function patchThemedPropSlot(instance, defaults, name, key) {
+function readVariantPreset(presetTable, rawProps, key) {
+  if (!presetTable || key === VARIANT_PROP_KEY) return void 0;
+  const activeVariant = rawProps[VARIANT_PROP_KEY];
+  if (typeof activeVariant !== "string") return void 0;
+  return presetTable[activeVariant]?.[key];
+}
+function patchThemedPropSlot(instance, defaults, name, key, presetTable) {
   const rawProps = instance.props;
   const fallbackValue = shallowRef(rawProps[key]);
   let wasPassed = passedPropValue(instance.vnode.props, key) !== void 0;
@@ -58,6 +87,8 @@ function patchThemedPropSlot(instance, defaults, name, key) {
       if (globalDefaults && globalDefaults[key] !== void 0) {
         return globalDefaults[key];
       }
+      const fromPreset = readVariantPreset(presetTable, rawProps, key);
+      if (fromPreset !== void 0) return fromPreset;
       return fallback;
     },
     set(value) {
@@ -66,14 +97,15 @@ function patchThemedPropSlot(instance, defaults, name, key) {
     }
   });
 }
-export function installThemePropsResolver(app, themedKeysUnion) {
+export function installThemePropsResolver(app, themedKeysUnion, variantPresets = {}) {
   app.mixin({
     beforeCreate() {
       const instance = getCurrentInstance();
       if (!instance) return;
       const name = getCurrentInstanceName("theme-props-resolver");
       const defaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
-      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name);
+      const presetTable = variantPresets[name];
+      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name, presetTable);
       if (!targetKeys) return;
       const rawProps = instance.props;
       for (const key of targetKeys) {
@@ -81,7 +113,7 @@ export function installThemePropsResolver(app, themedKeysUnion) {
           warnUnsupportedProp(name, key, `theme names this prop but <${name}> does not declare it`);
           continue;
         }
-        patchThemedPropSlot(instance, defaults, name, key);
+        patchThemedPropSlot(instance, defaults, name, key, presetTable);
       }
     }
   });

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-";