origam 2.18.19 → 2.18.21

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/border.const.cjs

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BORDER_REGEX = exports.BORDER_PROP_KEYS = exports.BORDER_POSITION_MAP = exports.BORDER_LOGICAL_AXIS_MAP = exports.BORDER_KEYWORD_WIDTH = void 0;
 var _enums = require("../../enums/index.cjs");
-const BORDER_REGEX = exports.BORDER_REGEX = /^(?<width>(?: ?(?:[0-9]+)(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?){0,4}) {0,1}(?<style>(?:(?: ?(?:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset))+){0,4}) ?(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\(--[^)]+\))|(?:(?:rgb|hsl|rgba)a?\(.*\))|(?:[A-Za-z]+))){0,4})$/;
+const BORDER_STYLE_ALTERNATION = Object.values(_enums.BORDER_STYLE).join("|");
+const BORDER_LENGTH_UNITS = "(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?";
+const BORDER_COLOR_GROUP = "(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\\(--[^)]+\\))|(?:(?:rgb|hsl|rgba)a?\\(.*\\))|(?:[A-Za-z]+))){0,4})";
+const BORDER_REGEX = exports.BORDER_REGEX = new RegExp(`^(?<width>(?: ?var\\(--[^)]+\\)(?= +(?:${BORDER_STYLE_ALTERNATION}))| ?(?:[0-9]+)${BORDER_LENGTH_UNITS}){0,4}) {0,1}(?<style>(?:(?: ?(?:${BORDER_STYLE_ALTERNATION}))+){0,4}) ?` + BORDER_COLOR_GROUP + "$");
 const BORDER_POSITION_MAP = exports.BORDER_POSITION_MAP = [{
   side: _enums.BLOCK.TOP,
   widthProp: "borderTop",

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

@@ -1,23 +1,5 @@
 import { BLOCK, INLINE } from '../../enums';
 import type { TBorderLogicalAxis, TBorderWidthKeyword } from '../../types/Commons/border.type';
-/**
- * Parse a free-form `border` value into width / style / color groups.
- *
- * Accepted color forms (in alternation order — `var()` MUST come before
- * the bare `[A-Za-z]+` branch, otherwise `var` would be eaten as a word
- * before the parenthesis group has a chance to match):
- *
- *   • Hex literal       — `#abc` / `#aabbcc`
- *   • CSS function      — `rgb(…)` / `rgba(…)` / `hsl(…)` / `hsla(…)`
- *   • CSS custom prop   — `var(--origam-color__action--primary---bg)` (with optional
- *                          fallback: `var(--x, fallback)`)
- *   • Named keyword     — `red`, `currentColor`, `transparent`, etc.
- *
- * The user reported that DS-token references (`var(--…)`) silently
- * dropped through this regex and were never emitted as `border-color`,
- * while raw hex / named colors worked. Adding the `var()` alternative
- * fixes the design-token path.
- */
 export declare const BORDER_REGEX: RegExp;
 /**
  * Physical-side lookup driving the per-side border wiring (issue #215).

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

@@ -1,5 +1,10 @@
-import { BLOCK, BORDER_LOGICAL_AXIS, INLINE } from "../../enums/index.js";
-export const BORDER_REGEX = /^(?<width>(?: ?(?:[0-9]+)(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?){0,4}) {0,1}(?<style>(?:(?: ?(?:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset))+){0,4}) ?(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\(--[^)]+\))|(?:(?:rgb|hsl|rgba)a?\(.*\))|(?:[A-Za-z]+))){0,4})$/;
+import { BLOCK, BORDER_LOGICAL_AXIS, BORDER_STYLE, INLINE } from "../../enums/index.js";
+const BORDER_STYLE_ALTERNATION = Object.values(BORDER_STYLE).join("|");
+const BORDER_LENGTH_UNITS = "(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?";
+const BORDER_COLOR_GROUP = "(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\\(--[^)]+\\))|(?:(?:rgb|hsl|rgba)a?\\(.*\\))|(?:[A-Za-z]+))){0,4})";
+export const BORDER_REGEX = new RegExp(
+  `^(?<width>(?: ?var\\(--[^)]+\\)(?= +(?:${BORDER_STYLE_ALTERNATION}))| ?(?:[0-9]+)${BORDER_LENGTH_UNITS}){0,4}) {0,1}(?<style>(?:(?: ?(?:${BORDER_STYLE_ALTERNATION}))+){0,4}) ?` + BORDER_COLOR_GROUP + "$"
+);
 export const BORDER_POSITION_MAP = [
   { side: BLOCK.TOP, widthProp: "borderTop", colorProp: "borderTopColor" },
   { side: INLINE.RIGHT, widthProp: "borderRight", colorProp: "borderRightColor" },

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/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;
@@ -960,6 +971,17 @@ Object.keys(_elevation).forEach(function (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;

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

@@ -84,5 +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,5 +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/typography.interface.d.ts

@@ -6,9 +6,14 @@ import type { TLineHeight } from '../../types/Commons/line-height.type';
 /**
  * Cross-cutting typography surface — the font equivalent of
  * `IColorProps` / `IBorderProps` / `IMarginProps`. Every prop is optional
- * and maps a primitive font token key to the matching component CSS
- * variable via `useTypography`. When a prop is unset the component keeps
- * its theme value (no override emitted).
+ * and resolves to the matching component CSS variable via `useTypography`.
+ * When a prop is unset the component keeps its theme value (no override
+ * emitted).
+ *
+ * The first FIVE props are primitive font token KEYS, wrapped into
+ * `var(--origam-font__{group}---{value})`. `fontStyle` is the one
+ * PASSTHROUGH: a CSS keyword emitted verbatim, because `font-style` has no
+ * design scale — see its own note below.
  *
  * | Prop            | CSS property      | Primitive token group        |
  * |-----------------|-------------------|------------------------------|
@@ -17,6 +22,7 @@ import type { TLineHeight } from '../../types/Commons/line-height.type';
  * | `fontWeight`    | `font-weight`     | `--origam-font__weight---*`        |
  * | `lineHeight`    | `line-height`     | `--origam-font__lineHeight---*`    |
  * | `letterSpacing` | `letter-spacing`  | `--origam-font__letterSpacing---*` |
+ * | `fontStyle`     | `font-style`      | *none — passthrough, see below*    |
  *
  * Collision-free names by design: `fontSize` / `fontWeight` / `fontFamily`
  * (not `size` / `weight` / `family`) so the surface composes with
@@ -53,4 +59,42 @@ export interface ITypographyProps {
      * When unset, the component keeps its theme letter-spacing.
      */
     letterSpacing?: TLetterSpacing;
+    /*********************************************************
+     * fontStyle
+     *
+     * @description
+     * Style de fonte, emis LITTERALEMENT dans
+     * `--origam-{prefix}---font-style`. Seul membre PASSTHROUGH de cette
+     * interface : les cinq autres props sont des cles de token que
+     * `useTypography` enveloppe en `var(--origam-font__{groupe}---{valeur})`.
+     *
+     * @description
+     * ⛔ POURQUOI PAS UN TOKEN. `italic` / `normal` / `oblique` sont des
+     * MOTS-CLES CSS, pas les echelons d'une echelle de design : il n'existe
+     * aucun groupe `--origam-font__style---*` dans `primitive.css` (verifie,
+     * zero occurrence) et il n'en faut pas. Enveloppee, la valeur sortirait
+     * en `var(--origam-font__style---italic)`, un nom que nulle feuille ne
+     * declare — donc rien ne peindrait.
+     *
+     * @description
+     * Type `string` volontairement large, par coherence avec
+     * `IBorderProps.borderStyle` / `borderColor`, les deux autres
+     * passthrough de mot-cle CSS des interfaces Commons. Laisse passer
+     * `oblique 10deg`, qu'une union fermee rejetterait.
+     *
+     * @description
+     * ⚠️ N'a d'EFFET que si la SCSS du composant lit le var GENERIQUE
+     * `--origam-{prefix}---font-style`. Mesure a l'ajout : un seul composant
+     * le fait — `OrigamBlockquote`
+     * (`--origam-blockquote---resolved-font-style` retombe dessus).
+     * @description
+     * ⛔ `OrigamBracketCompetitor` ne compte PAS, et la nuance vaut d'etre
+     * lue : il lit `--origam-bracket-competitor--pending---font-style`, un
+     * var de MODIFICATEUR D'ETAT (double tiret `--pending---`), pas le
+     * generique que `useTypography(props, 'bracket-competitor')` emet. La
+     * prop y type-check et emet sa variable sans rien peindre — meme cas
+     * que `fontFamily` sur Btn. Ne pas ajouter de regle SCSS pour lui
+     * forcer un effet sans le signaler.
+     ********************************************************/
+    fontStyle?: string;
 }

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

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

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

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

@@ -0,0 +1,36 @@
+/*********************************************************
+ * TOpacity
+ *
+ * @description
+ * `opacity` prop accepted by every component that consumes `useOpacity`
+ * (`src/composables/Commons/opacity.composable.ts`).
+ *
+ * @description
+ * Two numeric readings share one type, disambiguated at runtime by the
+ * MAGNITUDE of the value — the same loose `number | string` union
+ * `TElevation` and `TRounded` use, for the same reason: the shapes are
+ * told apart by `useOpacity`, not by the type system.
+ *
+ * @description
+ * A number `<= 1` is read as a CSS fraction and emitted verbatim
+ * (`0.7` -> `opacity: 0.7`). A number `> 1` is read on the 0..100
+ * PERCENT scale that names the token rungs (`70` -> rung `70`), which is
+ * the vocabulary ADR-005's variant presets are written in
+ * (`plain: { opacity: 70, hover: { opacity: 100 } }`).
+ *
+ * @description
+ * ⛔ The split is at 1, not at 0, and that is deliberate. Reading every
+ * number on the percent scale would make `opacity={1}` mean 1 % — very
+ * nearly invisible — where every CSS author on earth means "opaque". The
+ * cost of the split is that 1 % cannot be written as a number; pass the
+ * string `'1%'` for it. That trade was chosen because `opacity={1}`
+ * meaning "opaque" is the single most likely thing a consumer types, and
+ * silently rendering it invisible is the worst available failure.
+ *
+ * @description
+ * A non-numeric string passes through verbatim, so `'50%'`,
+ * `'var(--origam-opacity---50)'` and `'calc(1 / 3)'` all reach the
+ * declaration untouched. Mirrors the custom-value escape hatch of
+ * `TRounded` / `TElevation`.
+ ********************************************************/
+export type TOpacity = number | string;

package/dist/src/types/Commons/state-effect.type.d.ts

@@ -2,6 +2,7 @@ import type { IBgColorProps, IColorProps } from '../../interfaces/Commons/color.
 import type { IBorderProps } from '../../interfaces/Commons/border.interface';
 import type { IElevationProps } from '../../interfaces/Commons/elevation.interface';
 import type { IMarginProps } from '../../interfaces/Commons/margin.interface';
+import type { IOpacityProps } from '../../interfaces/Commons/opacity.interface';
 import type { IPaddingProps } from '../../interfaces/Commons/padding.interface';
 import type { IRoundedProps } from '../../interfaces/Commons/rounded.interface';
 /**
@@ -25,6 +26,6 @@ import type { IRoundedProps } from '../../interfaces/Commons/rounded.interface';
  * OVERRIDE object a consumer passes to `hover` / `active`. This type
  * describes the RESTING props those overrides are layered on top of.
  */
-export type TStateEffectProps = IColorProps & IBgColorProps & IBorderProps & IRoundedProps & IElevationProps & IPaddingProps & IMarginProps & {
+export type TStateEffectProps = IColorProps & IBgColorProps & IBorderProps & IRoundedProps & IElevationProps & IPaddingProps & IMarginProps & IOpacityProps & {
     gap?: boolean | number | string;
 };