origam 2.18.18 → 2.18.20

package/dist/src/consts/Commons/backdrop.const.d.ts

@@ -0,0 +1,47 @@
+/*********************************************************
+ * BACKDROP_BLUR_RUNG_VARS
+ *
+ * @description
+ * The primitive blur ladder, mapped to the `var()` expression
+ * `useBackdrop` wraps in `blur(...)`. Keys are the rung names as they
+ * appear in the token suffix and in the utility class.
+ *
+ * @description
+ * ⛔ WHOLE LITERAL STRINGS, same reason as `OPACITY_RUNG_VARS`: the
+ * dormant direction of `token-var-channels` greps `.ts` sources for the
+ * literal `var(--origam-…)` text, and these five tokens have NO other
+ * reader in the repo yet — no component consumes `useBackdrop` until
+ * ADR-005's lot 4 converts `ghost`. Concatenating the name would make all
+ * five read as dormant and turn the guard red on a correct change.
+ *
+ * @description
+ * RUNG VALUES ARE MEASURED, NOT INVENTED. Counted over the `blur(Npx)`
+ * literals in `packages/ds/src` + `packages/marketing/src`:
+ * `8px` x25, `16px` x21, `6px` x17, `20px` x14, `24px` x7, `12px` x7,
+ * `28px` x5. The five rungs below sit on that distribution rather than on
+ * a tidy doubling, which is why `sm` is `6px` and not `4px`.
+ ********************************************************/
+export declare const BACKDROP_BLUR_RUNG_VARS: Readonly<Record<string, string>>;
+/*********************************************************
+ * BACKDROP_BLUR_DEFAULT_RUNG
+ *
+ * @description
+ * Rung used when `backdropBlur` is passed as a bare `true`.
+ *
+ * @description
+ * `md` is `8px`, which is both the most frequent blur literal in the repo
+ * and the exact value `OrigamBtn`'s `ghost` rule paints today
+ * (`backdrop-filter: var(--origam-btn---backdrop-filter-ghost, blur(8px))`).
+ * ADR-005 lot 4 can therefore convert `ghost` to `backdropBlur: 'md'`
+ * with no rendering change to justify.
+ ********************************************************/
+export declare const BACKDROP_BLUR_DEFAULT_RUNG = "md";
+/*********************************************************
+ * BACKDROP_UTILITY_CLASS_PREFIX
+ *
+ * @description
+ * Root of the global backdrop utility classes emitted by `useBackdrop`
+ * (`.origam--backdrop-blur-md`, ...). Declared in
+ * `src/assets/css/tokens/origam-utilities.css`.
+ ********************************************************/
+export declare const BACKDROP_UTILITY_CLASS_PREFIX = "origam--backdrop-blur-";

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

@@ -0,0 +1,9 @@
+export const 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)"
+};
+export const BACKDROP_BLUR_DEFAULT_RUNG = "md";
+export const BACKDROP_UTILITY_CLASS_PREFIX = "origam--backdrop-blur-";

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPACITY_UTILITY_CLASS_PREFIX = exports.OPACITY_RUNG_VARS = exports.OPACITY_PERCENT_SCALE = exports.OPACITY_FRACTION_CEILING = void 0;
+const OPACITY_RUNG_VARS = exports.OPACITY_RUNG_VARS = {
+  "0": "var(--origam-opacity---0, 0)",
+  "12": "var(--origam-opacity---12, 0.12)",
+  "26": "var(--origam-opacity---26, 0.26)",
+  "32": "var(--origam-opacity---32, 0.32)",
+  "50": "var(--origam-opacity---50, 0.5)",
+  "60": "var(--origam-opacity---60, 0.6)",
+  "70": "var(--origam-opacity---70, 0.7)",
+  "87": "var(--origam-opacity---87, 0.87)",
+  "100": "var(--origam-opacity---100, 1)"
+};
+const OPACITY_UTILITY_CLASS_PREFIX = exports.OPACITY_UTILITY_CLASS_PREFIX = "origam--opacity-";
+const OPACITY_FRACTION_CEILING = exports.OPACITY_FRACTION_CEILING = 1;
+const OPACITY_PERCENT_SCALE = exports.OPACITY_PERCENT_SCALE = 100;

package/dist/src/consts/Commons/opacity.const.d.ts

@@ -0,0 +1,58 @@
+/*********************************************************
+ * OPACITY_RUNG_VARS
+ *
+ * @description
+ * The 0..100 percent rungs of the primitive opacity ladder, mapped to the
+ * `var()` expression `useOpacity` emits for each. Keys are the rung names
+ * as they appear in the token suffix and in the utility class.
+ *
+ * @description
+ * ⛔ WRITTEN AS WHOLE LITERAL STRINGS ON PURPOSE, not assembled from a
+ * prefix plus the key. `token-var-channels` scans `.ts` sources for the
+ * literal text `var(--origam-…)` to decide whether a declared token is
+ * read by anybody; a name concatenated at runtime
+ * (`var(${PREFIX}${rung})`) matches nothing, so every rung here would be
+ * reported DORMANT and the guard would redden. That is the same blind
+ * spot #813 shipped through and #823 exists to close — see the
+ * `SHADOW_TOKEN_PREFIX` banner in `elevation.const.ts` for the version of
+ * this trap that already cost the repo a release.
+ *
+ * @description
+ * Each reference carries a literal fallback, the shape CLAUDE.md names as
+ * the one to copy (`useRounded`'s `var(--origam-radius---md, 8px)`). The
+ * ladder is declared in `primitive.css` / `_primitive.scss`, so the
+ * fallback is inert today; it stops the declaration from being destroyed
+ * outright should a consumer ship the component CSS without the token
+ * sheet.
+ ********************************************************/
+export declare const OPACITY_RUNG_VARS: Readonly<Record<string, string>>;
+/*********************************************************
+ * OPACITY_UTILITY_CLASS_PREFIX
+ *
+ * @description
+ * Root of the global opacity utility classes emitted by `useOpacity`
+ * (`.origam--opacity-70`, ...). Declared in
+ * `src/assets/css/tokens/origam-utilities.css`.
+ ********************************************************/
+export declare const OPACITY_UTILITY_CLASS_PREFIX = "origam--opacity-";
+/*********************************************************
+ * OPACITY_FRACTION_CEILING
+ *
+ * @description
+ * Boundary between the two numeric readings of `TOpacity`. A value at or
+ * below it is a CSS fraction; above it, a 0..100 percentage.
+ *
+ * @description
+ * Named rather than inlined so the one place that decides `opacity={1}`
+ * means "opaque" and not "1 %" is greppable — see {@link TOpacity} for
+ * why that call was made.
+ ********************************************************/
+export declare const OPACITY_FRACTION_CEILING = 1;
+/*********************************************************
+ * OPACITY_PERCENT_SCALE
+ *
+ * @description
+ * Divisor turning a percent-scale `opacity` into the CSS fraction it
+ * denotes, for the values that name no token rung (`42` -> `0.42`).
+ ********************************************************/
+export declare const OPACITY_PERCENT_SCALE = 100;

package/dist/src/consts/Commons/opacity.const.js

@@ -0,0 +1,14 @@
+export const OPACITY_RUNG_VARS = {
+  "0": "var(--origam-opacity---0, 0)",
+  "12": "var(--origam-opacity---12, 0.12)",
+  "26": "var(--origam-opacity---26, 0.26)",
+  "32": "var(--origam-opacity---32, 0.32)",
+  "50": "var(--origam-opacity---50, 0.5)",
+  "60": "var(--origam-opacity---60, 0.6)",
+  "70": "var(--origam-opacity---70, 0.7)",
+  "87": "var(--origam-opacity---87, 0.87)",
+  "100": "var(--origam-opacity---100, 1)"
+};
+export const OPACITY_UTILITY_CLASS_PREFIX = "origam--opacity-";
+export const OPACITY_FRACTION_CEILING = 1;
+export const OPACITY_PERCENT_SCALE = 100;

package/dist/src/consts/Commons/variant-preset.const.cjs

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANT_PROP_KEY = exports.VARIANT_PRESETS = void 0;
+const VARIANT_PROP_KEY = exports.VARIANT_PROP_KEY = "variant";
+const VARIANT_PRESETS = exports.VARIANT_PRESETS = {};

package/dist/src/consts/Commons/variant-preset.const.d.ts

@@ -0,0 +1,60 @@
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
+/*********************************************************
+ * VARIANT_PROP_KEY
+ *
+ * @description
+ * Le nom du prop discriminant qu'une table de presets indexe. ADR-005
+ * n'en prevoit qu'un, et le resolveur a besoin de le nommer pour deux
+ * raisons distinctes.
+ *
+ * @description
+ * ⛔ C'EST AUSSI LA GARDE ANTI-RECURSION. Le getter installe sur un prop
+ * lit `props.variant` pour savoir quelle entree de la table consulter. Si
+ * ce getter etait AUSSI installe sur `variant` lui-meme, cette lecture se
+ * rappellerait indefiniment. Un preset ne pose jamais `variant` — il n'y
+ * a donc rien a resoudre pour cette cle, et `patchThemedPropSlot` la
+ * saute explicitement sur le canal preset.
+ ********************************************************/
+export declare const VARIANT_PROP_KEY = "variant";
+/*********************************************************
+ * VARIANT_PRESETS
+ *
+ * @description
+ * Les tables de presets que le DS LIVRE, par nom kebab de composant. Un
+ * theme les surcharge via `IOrigamTheme.variants` (ADR-005 D4) ; il ne les
+ * constitue pas.
+ *
+ * @description
+ * ⛔ VIDE A DESSEIN DANS CE LOT, et ce n'est pas du code mort. Le lot 1
+ * d'ADR-005 livre le MECANISME (type partage, rang dans le resolveur,
+ * canal `theme.variants`) et aucune conversion de composant : chaque
+ * composant arrive avec son propre lot, parce qu'aucun ne se convertit
+ * mecaniquement. Mesure a l'appui (2026-09-30), la taxonomie « famille A »
+ * de D5 est optimiste sur trois des quatre composants qu'elle liste :
+ * @description
+ * - `OrigamKbd` — ses regles de variant posent des PROPRIETES CUSTOM que
+ *   `key-surface` consomme sur la racine ET sur les descendants `__key`
+ *   (`&--variant-outlined &__key`). Un prop de racine emet
+ *   `background-color`, qui n'herite pas jusqu'a `__key` ; et la
+ *   declaration de `key-surface` siege a (0,2,0), donc une valeur de
+ *   preset TOKENISEE lui perdrait. Conversion fidele = revoir par ou
+ *   `key-surface` recoit sa couleur.
+ * - `OrigamBtnGroup` — recopie `--origam-btn-group---border-width` dans
+ *   une propriete custom qui alimente un `calc()` de rayon interieur.
+ *   Inexprimable en prop de racine.
+ * - `OrigamBlockquote` — `padding-inline-start: calc(var(--…) + var(--…))`
+ *   et des regles imbriquees sur `__body` / `__attribution`.
+ * @description
+ * Seul `OrigamBtn` ne peint que des proprietes de racine — mais il depend
+ * de `IOpacityProps` / `IBackdropProps` (Q1, absents) et son `ghost` porte
+ * une branche `@supports not (backdrop-filter)` qui echange le fond de
+ * 12 % a 18 % : aucune prop n'exprime une valeur conditionnee a une
+ * feature query.
+ *
+ * @description
+ * Le pilote est `OrigamKbd`, pour une raison que D7 ne donne pas : AUCUN
+ * theme de marque ne touche un seul token `origam-kbd` (verifie, zero
+ * occurrence sur les 8 themes), donc le zero-changement y est prouvable en
+ * isolation. `OrigamBtn` vient au lot 4.
+ ********************************************************/
+export declare const VARIANT_PRESETS: TVariantPresetRegistry;

package/dist/src/consts/Commons/variant-preset.const.js

@@ -0,0 +1,2 @@
+export const VARIANT_PROP_KEY = "variant";
+export const VARIANT_PRESETS = {};

package/dist/src/consts/index.cjs

@@ -949,6 +949,17 @@ Object.keys(_cssSupport).forEach(function (key) {
     }
   });
 });
+var _backdrop = require("./Commons/backdrop.const.cjs");
+Object.keys(_backdrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") 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.const.cjs");
 Object.keys(_elevation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -959,4 +970,26 @@ Object.keys(_elevation).forEach(function (key) {
       return _elevation[key];
     }
   });
+});
+var _opacity = require("./Commons/opacity.const.cjs");
+Object.keys(_opacity).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _opacity[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _opacity[key];
+    }
+  });
+});
+var _variantPreset = require("./Commons/variant-preset.const.cjs");
+Object.keys(_variantPreset).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _variantPreset[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _variantPreset[key];
+    }
+  });
 });

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

@@ -84,4 +84,7 @@ export * from './Audio/audio.const';
 export * from './Audio/audio-waveform.const';
 export * from './Clipboard/clipboard.const';
 export * from './Commons/css-support.const';
+export * from './Commons/backdrop.const';
 export * from './Commons/elevation.const';
+export * from './Commons/opacity.const';
+export * from './Commons/variant-preset.const';

package/dist/src/consts/index.js

@@ -84,4 +84,7 @@ export * from "./Audio/audio.const.js";
 export * from "./Audio/audio-waveform.const.js";
 export * from "./Clipboard/clipboard.const.js";
 export * from "./Commons/css-support.const.js";
+export * from "./Commons/backdrop.const.js";
 export * from "./Commons/elevation.const.js";
+export * from "./Commons/opacity.const.js";
+export * from "./Commons/variant-preset.const.js";

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

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

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

@@ -0,0 +1,49 @@
+import type { TBackdropBlur } from '../../types/Commons/backdrop.type';
+/*********************************************************
+ * IBackdropProps
+ *
+ * @description
+ * Backdrop-filter surface — the "frosted glass" channel. Carries the blur
+ * rung only; it is not a general `filter` surface.
+ *
+ * @description
+ * ⛔ SCOPE, AND WHY IT STOPS HERE. ADR-005 Q1 was arbitrated as "a new
+ * prop surface" so `OrigamBtn`'s `ghost` variant can become a pure props
+ * preset instead of a `.origam-btn--variant-ghost` rule. What `ghost`
+ * needs is `backdrop-filter: blur(8px)` — that is the whole requirement,
+ * and this interface covers exactly it. `saturate()`, `brightness()` and
+ * multi-function filters are NOT guessed at here: a component that needs
+ * one keeps writing its own `--origam-{cmp}---backdrop-filter`, the
+ * channel 12 components already use today (Alert, Card, Chip, Field,
+ * Menu, Sheet, Snackbar, Tooltip, Toolbar, Overlay, CommandPalette, Btn).
+ *
+ * @description
+ * ⚠️ ADR-005 D6 recorded "no prop, no token group, no utility class" for
+ * this axis. Remeasured for this lot: the PROP and the UTILITY CLASS were
+ * indeed absent, but the per-component `---backdrop-filter` token channel
+ * above already existed. What was genuinely missing was a PRIMITIVE blur
+ * ladder, which this lot adds as `--origam-blur---{xs,sm,md,lg,xl}`.
+ *
+ * @description
+ * Consumed via `useBackdrop(props)` -> `{ backdropClasses, backdropStyles }`.
+ ********************************************************/
+export interface IBackdropProps {
+    /*********************************************************
+     * backdropBlur
+     *
+     * @description
+     * Blur radius applied to what sits BEHIND the element. A rung name
+     * (`'md'`) resolves to `blur(var(--origam-blur---md))`; `true` means
+     * the default rung; a number is read as `px`; any other string is
+     * emitted inside `blur(...)` verbatim.
+     *
+     * @description
+     * Emits `-webkit-backdrop-filter` alongside the standard property —
+     * Safari still needs the prefix. No `@supports` gate: an unsupported
+     * browser drops an unknown declaration on its own, and the
+     * `@supports not (...)` blocks in the DS today exist to thicken the
+     * BACKGROUND when blur is unavailable, which is a `bgColor` concern
+     * and not this one.
+     ********************************************************/
+    backdropBlur?: TBackdropBlur;
+}

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

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

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

@@ -0,0 +1,37 @@
+import type { TOpacity } from '../../types/Commons/opacity.type';
+/*********************************************************
+ * IOpacityProps
+ *
+ * @description
+ * Opacity surface. Single scalar — there is no per-side or per-axis form,
+ * `opacity` being a whole-element property.
+ *
+ * @description
+ * ⛔ REUSE NOTE — this interface does NOT bring a token group with it. The
+ * primitive ladder it resolves against already existed before the
+ * interface did: `--origam-opacity---{0,12,26,32,50,60,70,87,100}`,
+ * declared in `assets/css/tokens/primitive.css` and its SCSS twin, and
+ * already read by `OrigamBtn`'s `--variant-plain` rule
+ * (`opacity: var(--origam-btn---opacity-plain, var(--origam-opacity---70))`).
+ * ADR-005's D6 proposed "add `IOpacityProps` + a token group"; only the
+ * first half was missing. Declaring a second ladder would have been the
+ * duplication the repo's reuse rule exists to prevent.
+ *
+ * @description
+ * Consumed via `useOpacity(props)` -> `{ opacityClasses, opacityStyles }`,
+ * both bound in parallel (strategy A) exactly as `useElevation` does.
+ ********************************************************/
+export interface IOpacityProps {
+    /*********************************************************
+     * opacity
+     *
+     * @description
+     * Element opacity. A number `<= 1` is a CSS fraction (`0.7`); a number
+     * `> 1` is a 0..100 percentage naming a token rung (`70`). Any other
+     * string passes through verbatim (`'50%'`, `'var(...)'`, `'calc(...)'`).
+     *
+     * @description
+     * See {@link TOpacity} for why the fraction/percent split sits at 1.
+     ********************************************************/
+    opacity?: TOpacity;
+}

package/dist/src/interfaces/Commons/state-effect.interface.d.ts

@@ -1,6 +1,7 @@
 import type { IBorderProps } from './border.interface';
 import type { IElevationProps } from './elevation.interface';
 import type { IMarginProps } from './margin.interface';
+import type { IOpacityProps } from './opacity.interface';
 import type { IPaddingProps } from './padding.interface';
 import type { IRoundedProps } from './rounded.interface';
 import type { TColor } from '../../types/Commons/color.type';
@@ -42,6 +43,23 @@ export interface IStateEffectConfig {
     bgColor?: TColor;
     /** Border width / style / direction override. */
     border?: IBorderProps['border'];
+    /*********************************************************
+     * borderColor
+     *
+     * @description
+     * Border COLOUR override, independent of the `border` shorthand.
+     *
+     * @description
+     * ⚠️ ADR-005's D6 audit missed this one. It lists `opacity` as the
+     * single gap on this interface, having checked the variants that set
+     * a border WIDTH; `outlined --active` sets a border-COLOUR, which the
+     * `border` shorthand above cannot carry.
+     *
+     * @description
+     * Found by remeasuring D6 rather than by reading it, and recorded
+     * here because the ADR's own table is incomplete on this row.
+     ********************************************************/
+    borderColor?: IBorderProps['borderColor'];
     /** Corner radius override. */
     rounded?: IRoundedProps['rounded'];
     /** Box-shadow elevation override. */
@@ -52,6 +70,19 @@ export interface IStateEffectConfig {
     margin?: IMarginProps['margin'];
     /** Gap (flex/grid) override. Components that expose a `gap` prop pick it up. */
     gap?: boolean | number | string;
+    /*********************************************************
+     * opacity
+     *
+     * @description
+     * Opacity override. This is the half of `OrigamBtn`'s `plain` variant
+     * that a preset could not express.
+     *
+     * @description
+     * `plain` is `opacity: var(--origam-opacity---70)` at rest plus
+     * `:hover { opacity: 1 }` — i.e. `{ opacity: 70, hover: { opacity: 100 } }`
+     * once this key exists (ADR-005 D6).
+     ********************************************************/
+    opacity?: IOpacityProps['opacity'];
 }
 /**
  * Hover-state configuration. Same shape as the generic state config —

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

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { IThemeVars } from './semantic-tree.interface';
 import type { TThemeVars } from '../../types/Commons/token-tree.type';
 import type { TMode, TTheme } from '../../types/Commons/theme.type';
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
 import type { IDefault } from '../DefaultsProvider/defaults-provider.interface';
 /**
  * Shape of the `useTheme()` singleton state.
@@ -127,4 +128,36 @@ export interface IOrigamTheme {
      * }
      */
     components?: IDefault;
+    /*********************************************************
+     * variants
+     *
+     * @description
+     * ADR-005 D4 — redefinit en PROPS ce qu'un `variant` veut dire, par
+     * composant puis par valeur de variant :
+     *
+     *     variants: {
+     *         'origam-btn': { outlined: { border: 3, rounded: 'lg' } }
+     *     }
+     *
+     * @description
+     * C'est ce qui rend les variants conformes a la regle PROPS-D'ABORD :
+     * un theme retune `outlined` en changeant des valeurs de props, et ne
+     * descend a `vars` / `cssVars` que pour ce que les props n'expriment
+     * pas. Les variants etaient le seul API du DS a violer cette regle
+     * structurellement.
+     *
+     * @description
+     * FRERE de `components`, pas une cle imbriquee dedans : `components`
+     * est type `IDefault` (composant -> map de props), donc y nicher un
+     * niveau de variant rendrait `{ 'origam-btn': { outlined: … } }`
+     * ambigu avec un prop qui s'appellerait litteralement `outlined`.
+     *
+     * @description
+     * Fusionne par-dessus la table livree par le DS a l'installation
+     * (`resolveVariantPresetRegistry`), avec le `mergeDeep` que
+     * `provideDefaults` utilise deja. Le preset resultant reste le rang
+     * LE PLUS FAIBLE de la resolution (arbitrage Q2) : un prop ecrit au
+     * site d'appel, comme un defaut de `components`, le battent tous deux.
+     ********************************************************/
+    variants?: TVariantPresetRegistry;
 }

package/dist/src/interfaces/Masonry/masonry.interface.d.ts

@@ -59,8 +59,8 @@ export interface IMasonryProps extends ICommonsComponentProps, ITagProps, IDimen
      * Gap between items, both vertically and horizontally. Accepts:
      *
      * - one of the grid size tokens `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
-     *   (resolved via `tokens/component/grid.json`, same matrix as
-     *   `<OrigamGrid>` for visual consistency).
+     *   (resolved via `GRID_GAP_SIZE_VAR` to `--origam-grid---gap-{size}`,
+     *   same matrix as `<OrigamGrid>` for visual consistency).
      * - any CSS length string (`'24px'`, `'1rem'`).
      * - a plain `number` interpreted as pixels.
      *

package/dist/src/interfaces/index.cjs

@@ -542,6 +542,17 @@ Object.keys(_autocomplete).forEach(function (key) {
     }
   });
 });
+var _backdrop = require("./Commons/backdrop.interface.cjs");
+Object.keys(_backdrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _backdrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _backdrop[key];
+    }
+  });
+});
 var _border = require("./Commons/border.interface.cjs");
 Object.keys(_border).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -927,6 +938,17 @@ Object.keys(_nested).forEach(function (key) {
     }
   });
 });
+var _opacity = require("./Commons/opacity.interface.cjs");
+Object.keys(_opacity).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _opacity[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _opacity[key];
+    }
+  });
+});
 var _padding = require("./Commons/padding.interface.cjs");
 Object.keys(_padding).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -47,6 +47,7 @@ export * from './Commons/adjacent.interface';
 export * from './Commons/align.interface';
 export * from './Commons/audio.interface';
 export * from './Commons/autocomplete.interface';
+export * from './Commons/backdrop.interface';
 export * from './Commons/border.interface';
 export * from './Commons/box.interface';
 export * from './Commons/clickOutside.interface';
@@ -82,6 +83,7 @@ export * from './Commons/locale.interface';
 export * from './Commons/margin.interface';
 export * from './Commons/message.interface';
 export * from './Commons/nested.interface';
+export * from './Commons/opacity.interface';
 export * from './Commons/padding.interface';
 export * from './Commons/position.interface';
 export * from './Commons/resizeObserver.interface';

package/dist/src/interfaces/index.js

@@ -47,6 +47,7 @@ export * from "./Commons/adjacent.interface.js";
 export * from "./Commons/align.interface.js";
 export * from "./Commons/audio.interface.js";
 export * from "./Commons/autocomplete.interface.js";
+export * from "./Commons/backdrop.interface.js";
 export * from "./Commons/border.interface.js";
 export * from "./Commons/box.interface.js";
 export * from "./Commons/clickOutside.interface.js";
@@ -82,6 +83,7 @@ export * from "./Commons/locale.interface.js";
 export * from "./Commons/margin.interface.js";
 export * from "./Commons/message.interface.js";
 export * from "./Commons/nested.interface.js";
+export * from "./Commons/opacity.interface.js";
 export * from "./Commons/padding.interface.js";
 export * from "./Commons/position.interface.js";
 export * from "./Commons/resizeObserver.interface.js";

package/dist/src/origam.cjs

@@ -32,6 +32,7 @@ function createOrigam(origam = {}) {
   const defaultsRef = (0, _composables.createDefaults)({});
   defaultsRef.value = activeDefaultsFor(allThemes, allThemes[0]?.name ?? "", void 0);
   const themedKeysUnion = (0, _composables.themedPropKeysUnion)(allThemes.map(theme => theme.components).filter(components2 => !!components2));
+  const variantPresets = (0, _composables.resolveVariantPresetRegistry)(_consts.VARIANT_PRESETS, allThemes.map(theme => theme.variants).filter(variants => !!variants));
   const scope = (0, _vue.effectScope)();
   return scope.run(() => {
     const icons = (0, _composables.createIcons)(options.icons);
@@ -67,7 +68,7 @@ function createOrigam(origam = {}) {
       app.provide(_consts.ORIGAM_GO_TO_KEY, goTo);
       app.provide(_consts.ORIGAM_THEMES_KEY, installedThemes);
       app.provide(_consts.ORIGAM_DEFAULTS_KEY, defaultsRef);
-      (0, _composables.installThemePropsResolver)(app, themedKeysUnion);
+      (0, _composables.installThemePropsResolver)(app, themedKeysUnion, variantPresets);
       app.provide(_consts.ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (_consts.IN_BROWSER && options.ssr) {
         const nuxt = app.$nuxt;

package/dist/src/origam.js

@@ -7,6 +7,7 @@ import {
   createIcons,
   createLocale,
   installThemePropsResolver,
+  resolveVariantPresetRegistry,
   themedPropKeysUnion
 } from "./composables/index.js";
 import {
@@ -19,7 +20,8 @@ import {
   ORIGAM_ICONS_KEY,
   ORIGAM_LOCALE_KEY,
   ORIGAM_THEME_DEFAULTS_KEY,
-  ORIGAM_THEMES_KEY
+  ORIGAM_THEMES_KEY,
+  VARIANT_PRESETS
 } from "./consts/index.js";
 import * as origamDirectives from "./directives/index.js";
 import { setContrastConfig } from "./directives/Contrast/contrast.directive.js";
@@ -45,6 +47,10 @@ export function createOrigam(origam = {}) {
   const themedKeysUnion = themedPropKeysUnion(
     allThemes.map((theme) => theme.components).filter((components2) => !!components2)
   );
+  const variantPresets = resolveVariantPresetRegistry(
+    VARIANT_PRESETS,
+    allThemes.map((theme) => theme.variants).filter((variants) => !!variants)
+  );
   const scope = effectScope();
   return scope.run(() => {
     const icons = createIcons(options.icons);
@@ -80,7 +86,7 @@ export function createOrigam(origam = {}) {
       app.provide(ORIGAM_GO_TO_KEY, goTo);
       app.provide(ORIGAM_THEMES_KEY, installedThemes);
       app.provide(ORIGAM_DEFAULTS_KEY, defaultsRef);
-      installThemePropsResolver(app, themedKeysUnion);
+      installThemePropsResolver(app, themedKeysUnion, variantPresets);
       app.provide(ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (IN_BROWSER && options.ssr) {
         const nuxt = app.$nuxt;

package/dist/src/types/Commons/backdrop.type.cjs

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

package/dist/src/types/Commons/backdrop.type.d.ts

@@ -0,0 +1,23 @@
+/*********************************************************
+ * TBackdropBlur
+ *
+ * @description
+ * `backdropBlur` prop accepted by every component that consumes
+ * `useBackdrop` (`src/composables/Commons/backdrop.composable.ts`).
+ *
+ * @description
+ * Three shapes, disambiguated at runtime by `useBackdrop`:
+ *   - a rung name (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) resolving to
+ *     `blur(var(--origam-blur---{rung}))`;
+ *   - `true`, meaning the default rung (`BACKDROP_BLUR_DEFAULT_RUNG`), so
+ *     a consumer can write `backdrop-blur` with no value;
+ *   - a number (read as `px`) or any CSS length string, emitted inside
+ *     `blur(...)` verbatim.
+ *
+ * @description
+ * `false`, `null` and `undefined` all mean "no backdrop filter" and emit
+ * nothing at all — not `backdrop-filter: none`. Emitting `none` would win
+ * the cascade over a component's own rule and erase a blur the component
+ * painted for itself, the same defect #813 measured on `box-shadow`.
+ ********************************************************/
+export type TBackdropBlur = boolean | number | string;