origam 2.18.19 → 2.18.20

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

package/dist/src/types/index.cjs

@@ -597,6 +597,17 @@ Object.keys(_dimension).forEach(function (key) {
     }
   });
 });
+var _backdrop = require("./Commons/backdrop.type.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.type.cjs");
 Object.keys(_elevation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -608,6 +619,17 @@ Object.keys(_elevation).forEach(function (key) {
     }
   });
 });
+var _opacity = require("./Commons/opacity.type.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 _variant = require("./Commons/variant.type.cjs");
 Object.keys(_variant).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -52,7 +52,9 @@ export * from './Commons/letter-spacing.type';
 export * from './Commons/line-height.type';
 export * from './Commons/rounded.type';
 export * from './Commons/dimension.type';
+export * from './Commons/backdrop.type';
 export * from './Commons/elevation.type';
+export * from './Commons/opacity.type';
 export * from './Commons/variant.type';
 export * from './Commons/variant-preset.type';
 export * from './Commons/direction.type';

package/dist/src/types/index.js

@@ -52,7 +52,9 @@ export * from "./Commons/letter-spacing.type.js";
 export * from "./Commons/line-height.type.js";
 export * from "./Commons/rounded.type.js";
 export * from "./Commons/dimension.type.js";
+export * from "./Commons/backdrop.type.js";
 export * from "./Commons/elevation.type.js";
+export * from "./Commons/opacity.type.js";
 export * from "./Commons/variant.type.js";
 export * from "./Commons/variant-preset.type.js";
 export * from "./Commons/direction.type.js";