origam 2.16.0 → 2.17.0

package/dist/src/utils/Commons/color.util.d.ts

@@ -1,5 +1,9 @@
-import type { TBgFgRole, TColor, TColorType, THex, THSLA, THSVA, TIntent, TLAB, TRGBA, TXYZ } from '../../types';
-/**
+import type { TBgFgRole, TColor, TColorType, THex, THSLA, THSVA, TLAB, TRGBA, TXYZ } from '../../types/Commons/color.type';
+import type { TIntent } from '../../types/Commons/intent.type';
+/*********************************************************
+ * isCssColor
+ *
+ * @description
  * Recognise any string the CSS engine treats as a colour:
  *   - hex (`#abc`, `#aabbcc`, `#aabbccdd`)
  *   - functional notation (`rgb()`, `rgba()`, `hsl()`, `hsla()`,
@@ -9,6 +13,7 @@ import type { TBgFgRole, TColor, TColorType, THex, THSLA, THSVA, TIntent, TLAB,
  *   - one of the 148 named colours OR a CSS-wide keyword
  *     (`transparent`, `currentColor`, `inherit`, …)
  *
+ * @description
  * `color-mix` was added ADR-005 (Kbd pilot): it is a real CSS `<color>`
  * function (e.g. `color-mix(in srgb, currentColor 8%, transparent)`, the
  * literal value the pre-migration `OrigamKbd` `tonal` variant SCSS used for
@@ -19,12 +24,16 @@ import type { TBgFgRole, TColor, TColorType, THex, THSLA, THSVA, TIntent, TLAB,
  * `useElevation`'s equivalent custom-value detector
  * (`CUSTOM_BOX_SHADOW_REGEX`) already listed `color-mix` — this brings
  * `isCssColor` in line with it.
- */
+ ********************************************************/
 export declare function isCssColor(color?: string | null | false): boolean;
-/**
+/*********************************************************
+ * isParsableColor
+ *
+ * @description
  * Is parsable color.
  *
  * @description
+ * @description
  * A CSS colour is "parsable" when `parseColor()` (below) can actually
  * compute its RGBA components in JS — used to gate the auto-contrast
  * (`getForeground`) path. `var(--…)` references are excluded because their
@@ -35,272 +44,445 @@ export declare function isCssColor(color?: string | null | false): boolean;
  * `isCssColor` recognising `color-mix` (so it still renders verbatim via
  * the "custom value" style channel) does NOT make it parsable.
  *
+ * @description
  * @param color …
  * @returns …
- */
+ ********************************************************/
 export declare function isParsableColor(color: string): boolean;
-/**
+/*********************************************************
+ * parseColor
+ *
+ * @description
  * Parse color.
  *
+ * @description
  * @param color …
  * @returns …
- */
+ ********************************************************/
 export declare function parseColor(color: TColorType): TRGBA;
-/**
+/*********************************************************
+ * getForeground
+ *
+ * @description
  * Get foreground.
  *
+ * @description
  * @param color …
- */
-export declare function getForeground(color: TColorType): "#fff" | "#000";
-/**
+ ********************************************************/
+export declare function getForeground(color: TColorType): "#000" | "#fff";
+/*********************************************************
+ * HSLtoRGB
+ *
+ * @description
  * Hs lto rgb.
  *
+ * @description
  * @param hsla …
  * @returns …
- */
+ ********************************************************/
 export declare function HSLtoRGB(hsla: THSLA): TRGBA;
-/**
+/*********************************************************
+ * RGBtoHSV
+ *
+ * @description
  * Rg bto hsv.
  *
+ * @description
  * @param rgba …
  * @returns …
- */
+ ********************************************************/
 export declare function RGBtoHSV(rgba: TRGBA): THSVA;
-/**
+/*********************************************************
+ * HSVtoHSL
+ *
+ * @description
  * Hs vto hsl.
  *
+ * @description
  * @param hsva …
  * @returns …
- */
+ ********************************************************/
 export declare function HSVtoHSL(hsva: THSVA): THSLA;
-/**
+/*********************************************************
+ * HSLtoHSV
+ *
+ * @description
  * Hs lto hsv.
  *
+ * @description
  * @param hsl …
  * @returns …
- */
+ ********************************************************/
 export declare function HSLtoHSV(hsl: THSLA): THSVA;
-/**
+/*********************************************************
+ * RGBtoCSS
+ *
+ * @description
  * Rg bto css.
  *
+ * @description
  * @param options …
  * @returns …
- */
+ ********************************************************/
 export declare function RGBtoCSS({ r, g, b, a }: TRGBA): string;
-/**
+/*********************************************************
+ * HSVtoCSS
+ *
+ * @description
  * Hs vto css.
  *
+ * @description
  * @param hsva …
  * @returns …
- */
+ ********************************************************/
 export declare function HSVtoCSS(hsva: THSVA): string;
-/**
+/*********************************************************
+ * toHex
+ *
+ * @description
  * To hex.
  *
+ * @description
  * @param v …
- */
+ ********************************************************/
 export declare function toHex(v: number): string;
-/**
+/*********************************************************
+ * RGBtoHex
+ *
+ * @description
  * Rg bto hex.
  *
+ * @description
  * @param options …
  * @returns …
- */
+ ********************************************************/
 export declare function RGBtoHex({ r, g, b, a }: TRGBA): THex;
-/**
+/*********************************************************
+ * HexToRGB
+ *
+ * @description
  * Hex to rgb.
  *
+ * @description
  * @param hex …
  * @returns …
- */
+ ********************************************************/
 export declare function HexToRGB(hex: THex): TRGBA;
-/**
+/*********************************************************
+ * HexToHSV
+ *
+ * @description
  * Hex to hsv.
  *
+ * @description
  * @param hex …
  * @returns …
- */
+ ********************************************************/
 export declare function HexToHSV(hex: THex): THSVA;
-/**
+/*********************************************************
+ * HSVtoHex
+ *
+ * @description
  * Hs vto hex.
  *
+ * @description
  * @param hsva …
  * @returns …
- */
+ ********************************************************/
 export declare function HSVtoHex(hsva: THSVA): THex;
-/**
+/*********************************************************
+ * HSVtoRGB
+ *
+ * @description
  * Hs vto rgb.
  *
+ * @description
  * @param hsva …
  * @returns …
- */
+ ********************************************************/
 export declare function HSVtoRGB(hsva: THSVA): TRGBA;
-/**
+/*********************************************************
+ * parseHex
+ *
+ * @description
  * Parse hex.
  *
+ * @description
  * @param hex …
  * @returns …
- */
+ ********************************************************/
 export declare function parseHex(hex: string): THex;
-/**
+/*********************************************************
+ * lighten
+ *
+ * @description
  * Lighten.
  *
+ * @description
  * @param value  …
  * @param amount …
  * @returns …
- */
+ ********************************************************/
 export declare function lighten(value: TRGBA, amount: number): TRGBA;
-/**
+/*********************************************************
+ * darken
+ *
+ * @description
  * Darken.
  *
+ * @description
  * @param value  …
  * @param amount …
  * @returns …
- */
+ ********************************************************/
 export declare function darken(value: TRGBA, amount: number): TRGBA;
-/**
+/*********************************************************
+ * getContrast
+ *
+ * @description
  * Get contrast.
  *
+ * @description
  * @param first  …
  * @param second …
- */
+ ********************************************************/
 export declare function getContrast(first: TColorType, second: TColorType): number;
-/**
+/*********************************************************
+ * getLuma
+ *
+ * @description
  * Get luma.
  *
+ * @description
  * @param color …
- */
+ ********************************************************/
 export declare function getLuma(color: TColorType): number;
-/**
+/*********************************************************
+ * parseGradient
+ *
+ * @description
  * Parse gradient.
  *
+ * @description
  * @param gradient …
  * @param colors   …
- */
+ ********************************************************/
 export declare function parseGradient(gradient: string, colors: Record<string, Record<string, string>>): string;
-/**
+/*********************************************************
+ * classToHex
+ *
+ * @description
  * Class to hex.
  *
+ * @description
  * @param color  …
  * @param colors …
  * @returns …
- */
+ ********************************************************/
 export declare function classToHex(color: string, colors: Record<string, Record<string, string>>): string;
-/**
+/*********************************************************
+ * XyzToRgb
+ *
+ * @description
  * Xyz to rgb.
  *
+ * @description
  * @param xyz …
  * @returns …
- */
+ ********************************************************/
 export declare function XyzToRgb(xyz: TXYZ): TRGBA;
-/**
+/*********************************************************
+ * RgbtoXyz
+ *
+ * @description
  * Rgbto xyz.
  *
+ * @description
  * @param options …
  * @returns …
- */
+ ********************************************************/
 export declare function RgbtoXyz({ r, g, b }: TRGBA): TXYZ;
-/**
+/*********************************************************
+ * XyztoLab
+ *
+ * @description
  * Xyzto lab.
  *
+ * @description
  * @param xyz …
  * @returns …
- */
+ ********************************************************/
 export declare function XyztoLab(xyz: TXYZ): TLAB;
-/**
+/*********************************************************
+ * LabtoXyz
+ *
+ * @description
  * Labto xyz.
  *
+ * @description
  * @param lab …
  * @returns …
- */
+ ********************************************************/
 export declare function LabtoXyz(lab: TLAB): TXYZ;
-/**
+/*********************************************************
+ * APCAcontrast
+ *
+ * @description
  * Apc acontrast.
  *
+ * @description
  * @param text       …
  * @param background …
- */
+ ********************************************************/
 export declare function APCAcontrast(text: TRGBA, background: TRGBA): number;
-/**
+/*********************************************************
+ * isIntent
+ *
+ * @description
  * Type guard: is `v` a known semantic intent?
- */
+ ********************************************************/
 export declare function isIntent(v: TColor | TIntent | null | undefined): v is TIntent;
-/**
+/*********************************************************
+ * isUtilityIntent
+ *
+ * @description
  * Type guard: is `v` an intent for which a global utility class ships
  * (`.origam--bg-<intent>` / `.origam--color-<intent>`)? `ghost` is
  * intentionally excluded — the design system does not ship
  * `.origam--bg-ghost`.
- */
+ ********************************************************/
 export declare function isUtilityIntent(v: TColor | TIntent | null | undefined): v is TIntent;
-/**
+/*********************************************************
+ * intentTokenBase
+ *
+ * @description
  * Resolve the token-base prefix (BEM block + modifier, without the
  * `--origam-color__` / `---<prop>` envelope) for a given intent.
  * Drives every other helper below:
  *
+ * @description
  *   'neutral'  → 'action--secondary'
  *   'primary'  → 'action--primary'
  *   'success'  → 'feedback--success'
  *   'danger'   → 'feedback--danger'
  *   …
  *
+ * @description
  * Consumed as ``var(--origam-color__${base}---${slot})`` — the BEM
  * grammar matches the rest of the token namespace (`__` between
  * domain and block, `--` between block and modifier, `---` before the
  * property/slot).
- */
+ ********************************************************/
 export declare function intentTokenBase(intent: TIntent): string;
-/**
+/*********************************************************
+ * intentBgExpr
+ *
+ * @description
  * Emit a state-aware bg expression for an intent:
  *
+ * @description
  *   • `default`  → `var(--…-bg)`
  *   • `hover`    → `var(--…-bgHover, color-mix(in srgb, var(--…-bg), black 20%))`
  *   • `active`   → `var(--…-bgActive, color-mix(in srgb, var(--…-bg), black 30%))`
  *   • `disabled` → `var(--…-bgDisabled)`
- */
+ ********************************************************/
 export declare function intentBgExpr(intent: TIntent, role: TBgFgRole): string;
-/**
+/*********************************************************
+ * intentFgExpr
+ *
+ * @description
  * Foreground stays the same hue across hover / active by design — we
  * darken the surface around the text, the text itself keeps the
  * WCAG-paired contrast token.
- */
+ ********************************************************/
 export declare function intentFgExpr(intent: TIntent, role: TBgFgRole): string;
-/**
+/*********************************************************
+ * tokenStylesForIntent
+ *
+ * @description
  * Build the CSS-vars override map for an intent (foreground + background)
  * for a given interaction state.
- */
+ ********************************************************/
 export declare function tokenStylesForIntent(intent: TIntent, role?: TBgFgRole): Record<string, string>;
-/**
+/*********************************************************
+ * rawBgExprWithState
+ *
+ * @description
  * Derive a state-aware bg from a raw CSS color value (hex/rgb/etc.) via
  * `color-mix`. Used in the legacy raw-color path so consumers passing
  * `bgColor="#abcdef"` still get a hover/active darken (matches the
  * intent path's behaviour, just without the token cascade).
- */
+ ********************************************************/
 export declare function rawBgExprWithState(raw: string, role: TBgFgRole): string;
-/**
+/*********************************************************
+ * tokenForegroundForIntent
+ *
+ * @description
  * Resolve the **foreground-only** colour for an intent — the token used
  * when the consumer says `color="primary"` and expects the *text itself*
  * to be primary-coloured (no surface implied).
  *
+ * @description
  * This is NOT the same as `tokenStylesForIntent(...).color`:
  *   - That one returns the WCAG-contrasted text colour to put ON TOP of
  *     the matching `bg` token (typically white on a dark surface).
  *   - This helper returns the `fgSubtle` rung — a darker shade of the
  *     intent itself, designed for "coloured text on a light surface".
  *
+ * @description
  * Falls back gracefully on intents without a `fgSubtle` rung
  * (`secondary`, `ghost`, `neutral`).
- */
+ ********************************************************/
 export declare function tokenForegroundForIntent(intent: TIntent): string;
-/**
+/*********************************************************
+ * warnLegacyColor
+ *
+ * @description
  * Warn (once per prop / value) that the consumer passed a raw CSS color
  * to a prop where the design system expects a `TIntent`. Raw color
  * support is deprecated and will be removed in v3.0.0.
- */
-export declare function warnLegacyColor(kind: 'color' | 'bgColor' | 'hoverColor' | 'hoverBgColor' | 'activeColor' | 'activeBgColor', value: string): void;
-/**
+ ********************************************************/
+export declare function warnLegacyColor(kind: 'color' | 'bgColor', value: string): void;
+/*********************************************************
+ * warnDeprecatedProp
+ *
+ * @description
  * Warn (once per component / old-prop) that the consumer passed a
  * deprecated prop name where the design system now expects the renamed
  * one. The deprecated prop keeps working (alias) until the removal
  * version.
- */
+ ********************************************************/
 export declare function warnDeprecatedProp(component: string, oldProp: string, newProp: string, removalVersion?: string): void;
+/*********************************************************
+ * warnUnsupportedProp
+ *
+ * @description
+ * Warn (once per component / prop, dev builds only) that a prop was passed
+ * but has no effect on this particular component. `reason` should name the
+ * mechanism that makes the prop inapplicable (e.g. "binary colour model via
+ * bullishColor/bearishColor").
+ ********************************************************/
+export declare function warnUnsupportedProp(component: string, prop: string, reason: string): void;
+/*********************************************************
+ * warnDeprecatedEmit
+ *
+ * @description
+ * Warn (once per component / emit, dev builds only) that the consumer
+ * attached a listener to an emit scheduled for removal. The emit KEEPS
+ * FIRING until the removal version — this announces the break instead of
+ * shipping it. `replacement` should name what to do instead, not merely
+ * say the emit is going away. Same once-per-key cache as the three
+ * warnings above, but for a public EMIT rather than a prop.
+ *
+ * @description
+ * First use case: `click:prepend` / `click:append` on `<OrigamBtn>` (#443).
+ * Those two were reachable by MOUSE ONLY — the emit is bound to a
+ * descendant span, while keyboard activation synthesises its click on the
+ * button root. The `role="button"` + tab-stop remedy `useAdjacent` applies
+ * on the other ten consumers is ILLEGAL here: Btn's root is a
+ * `<button>`/`<a>`, whose content model forbids both an interactive
+ * descendant and any descendant carrying `tabindex`. A control that already
+ * owns one action cannot host a second — two actions are two buttons
+ * (`origam-btn-group`).
+ ********************************************************/
+export declare function warnDeprecatedEmit(component: string, emit: string, replacement: string, removalVersion?: string): void;

package/dist/src/utils/Commons/color.util.js

@@ -1,35 +1,4 @@
-import {
-  BCO,
-  BLK_CLMP,
-  BLK_THRS,
-  CIELAB_FORWARD_TRANSFORM,
-  CIELAB_REVERSE_TRANSFORM,
-  COLOR_ACTIVE_MIX_PCT,
-  COLOR_DELTA_Y_MIN,
-  COLOR_HOVER_MIX_PCT,
-  COLOR_INTENTS,
-  COLOR_MAPPERS,
-  COLOR_UTILITY_INTENTS,
-  CSS_COLOR_REGEX,
-  CSS_NAMED_COLORS,
-  GCO,
-  LO_CLIP,
-  LO_CON_FACTOR,
-  LO_CON_OFFSET,
-  LO_CON_THRESH,
-  MAIN_TRC,
-  NORM_BG,
-  NORM_TXT,
-  RCO,
-  REV_BG,
-  REV_TXT,
-  SCALE_B_O_W,
-  SCALE_W_O_B,
-  SRGB_FORWARD_MATRIX,
-  SRGB_FORWARD_TRANSFORM,
-  SRGB_REVERSE_MATRIX,
-  SRGB_REVERSE_TRANSFORM
-} from "../../consts/index.js";
+import { BCO, BLK_CLMP, BLK_THRS, CIELAB_FORWARD_TRANSFORM, CIELAB_REVERSE_TRANSFORM, COLOR_ACTIVE_MIX_PCT, COLOR_DELTA_Y_MIN, COLOR_HOVER_MIX_PCT, COLOR_INTENTS, COLOR_MAPPERS, COLOR_UTILITY_INTENTS, CSS_COLOR_REGEX, CSS_NAMED_COLORS, GCO, LO_CLIP, LO_CON_FACTOR, LO_CON_OFFSET, LO_CON_THRESH, MAIN_TRC, NORM_BG, NORM_TXT, RCO, REV_BG, REV_TXT, SCALE_B_O_W, SCALE_W_O_B, SRGB_FORWARD_MATRIX, SRGB_FORWARD_TRANSFORM, SRGB_REVERSE_MATRIX, SRGB_REVERSE_TRANSFORM } from "../../consts/Commons/color.const.js";
 import { BG_FG_ROLE } from "../../enums/Commons/color.enum.js";
 import { chunk, clamp, has, int, padEnd } from "./commons.util.js";
 import { consoleWarn } from "./console.util.js";
@@ -359,3 +328,25 @@ export function warnDeprecatedProp(component, oldProp, newProp, removalVersion =
     `[origam] <${component}> prop "${oldProp}" is deprecated \u2014 use "${newProp}" instead. "${oldProp}" keeps working as an alias and will be removed in ${removalVersion}.`
   );
 }
+const _warnedUnsupportedPropKeys = /* @__PURE__ */ new Set();
+export function warnUnsupportedProp(component, prop, reason) {
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const key = `${component}::${prop}`;
+  if (_warnedUnsupportedPropKeys.has(key)) return;
+  _warnedUnsupportedPropKeys.add(key);
+  console.warn(
+    `[origam] <${component}> prop "${prop}" has no effect on this component: ${reason}`
+  );
+}
+const _warnedDeprecatedEmitKeys = /* @__PURE__ */ new Set();
+export function warnDeprecatedEmit(component, emit, replacement, removalVersion = "v3.0.0") {
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const key = `${component}::${emit}`;
+  if (_warnedDeprecatedEmitKeys.has(key)) return;
+  _warnedDeprecatedEmitKeys.add(key);
+  console.warn(
+    `[origam] <${component}> emit "${emit}" is deprecated and will be removed in ${removalVersion}. ${replacement}`
+  );
+}

package/dist/src/utils/Commons/commons.util.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addWindowListener = addWindowListener;
+exports.camelize = camelize;
 exports.chunk = chunk;
 exports.clamp = clamp;
 exports.convertToUnit = convertToUnit;
@@ -52,9 +53,9 @@ exports.tryOnMounted = tryOnMounted;
 exports.tryOnScopeDispose = tryOnScopeDispose;
 exports.wrapInArray = wrapInArray;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
 var _enums = require("../../enums/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _getCurrentInstance = require("./getCurrentInstance.util.cjs");
 function convertToUnit(str, unit = "px") {
   if (str == null || str === "") {
     return void 0;
@@ -83,6 +84,9 @@ function toKebabCase(str = "") {
   return kebab;
 }
 toKebabCase.cache = /* @__PURE__ */new Map();
+function camelize(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
 function findChildrenWithProvide(key, vnode) {
   if (!vnode || typeof vnode !== "object") return [];
   if (Array.isArray(vnode)) {
@@ -331,7 +335,7 @@ function mergeDeep(source = {}, target = {}, arrayFn) {
   return out;
 }
 function defer(timeout, cb) {
-  if (!_consts.IN_BROWSER || timeout === 0) {
+  if (!_commons.IN_BROWSER || timeout === 0) {
     cb();
     return () => {};
   }
@@ -339,7 +343,7 @@ function defer(timeout, cb) {
   return () => window.clearTimeout(timeoutId);
 }
 function matchesSelector(el, selector) {
-  const supportsSelector = _consts.IN_BROWSER && typeof CSS !== "undefined" && typeof CSS.supports !== "undefined" && CSS.supports(`selector(${selector})`);
+  const supportsSelector = _commons.IN_BROWSER && typeof CSS !== "undefined" && typeof CSS.supports !== "undefined" && CSS.supports(`selector(${selector})`);
   if (!supportsSelector) return null;
   try {
     return !!el && el.matches(selector);
@@ -348,7 +352,7 @@ function matchesSelector(el, selector) {
   }
 }
 function isOn(key) {
-  return _consts.ON_REGEX.test(key);
+  return _commons.ON_REGEX.test(key);
 }
 function eventName(propName) {
   return propName[2].toLowerCase() + propName.slice(3);
@@ -411,7 +415,7 @@ function getEventCoordinates(e) {
   };
 }
 function tryOnMounted(fn, sync = true, target) {
-  const instance = (0, _utils.getLifeCycleTarget)(target);
+  const instance = (0, _getCurrentInstance.getLifeCycleTarget)(target);
   if (instance) (0, _vue.onMounted)(fn, target);else if (sync) fn();else (0, _vue.nextTick)(fn);
 }
 function tryOnScopeDispose(fn) {