origam 2.26.2 → 2.29.1

package/dist/src/directives/Contrast/contrast.directive.cjs

@@ -142,12 +142,67 @@ function enforceContrast(el, enabled) {
   const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
   el.style.setProperty("color", better, "important");
   el.dataset.origamContrastFixed = "true";
-  console.warn(`[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`, el);
+  if (process.env?.DEV) {
+    console.warn(`[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`, el);
+  }
+}
+const MAX_SETTLE_PASSES = 4;
+const COLOR_TRANSITION_PROPERTIES = /* @__PURE__ */new Set(["color", "background-color"]);
+function declaredTransitionMs(el) {
+  const toMs = value => {
+    const n = parseFloat(value);
+    if (Number.isNaN(n)) return 0;
+    return value.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  let longest = 0;
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const durations = style.transitionDuration.split(",");
+    const delays = style.transitionDelay.split(",");
+    durations.forEach((duration, i) => {
+      longest = Math.max(longest, toMs(duration) + toMs(delays[i % delays.length] ?? "0"));
+    });
+  }
+  return longest;
+}
+function runningColorTransitions(el) {
+  const found = [];
+  for (let node = el; node; node = node.parentElement) {
+    for (const animation of node.getAnimations()) {
+      const property = animation.transitionProperty;
+      if (property && COLOR_TRANSITION_PROPERTIES.has(property) && animation.playState !== "finished") {
+        found.push(animation);
+      }
+    }
+  }
+  return found;
+}
+function forceStyleRecalc(el) {
+  return getComputedStyle(el).color;
+}
+function settleThenEnforce(el, enabled, pending, pass = 0) {
+  if (pending.cancelled) return;
+  if (!forceStyleRecalc(el)) return;
+  if (typeof el.getAnimations === "function") {
+    const running = pass < MAX_SETTLE_PASSES ? runningColorTransitions(el) : [];
+    if (running.length) {
+      Promise.allSettled(running.map(animation => animation.finished)).then(() => settleThenEnforce(el, enabled, pending, pass + 1));
+      return;
+    }
+    enforceContrast(el, enabled);
+    return;
+  }
+  const wait = declaredTransitionMs(el);
+  if (wait > 0 && pass === 0 && typeof setTimeout !== "undefined") {
+    pending.timeout = setTimeout(() => settleThenEnforce(el, enabled, pending, 1), wait);
+    return;
+  }
+  enforceContrast(el, enabled);
 }
-const SETTLE_MS = 250;
 function cancelScheduled(el) {
   const pending = el._contrastTimers;
   if (!pending) return;
+  pending.cancelled = true;
   if (pending.raf !== void 0 && typeof cancelAnimationFrame !== "undefined") {
     cancelAnimationFrame(pending.raf);
   }
@@ -160,10 +215,7 @@ function schedule(el, enabled) {
   cancelScheduled(el);
   const pending = {};
   if (typeof requestAnimationFrame !== "undefined") {
-    pending.raf = requestAnimationFrame(() => enforceContrast(el, enabled));
-  }
-  if (typeof setTimeout !== "undefined") {
-    pending.timeout = setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+    pending.raf = requestAnimationFrame(() => settleThenEnforce(el, enabled, pending));
   }
   el._contrastTimers = pending;
 }

package/dist/src/directives/Contrast/contrast.directive.d.ts

@@ -1,5 +1,15 @@
 import type { Directive } from 'vue';
 import type { IContrastOptions } from '../../interfaces/Commons/commons.interface';
 export declare function setContrastConfig(value: boolean | IContrastOptions | undefined): void;
+/**
+ * `v-contrast` — guards an element's text legibility at runtime.
+ *
+ * After the browser has resolved the design-token CSS variables, it measures
+ * the element's text colour against its painted background. When the WCAG
+ * ratio falls below the configured threshold it forces the better of
+ * black / white text (in every build) and, in dev only, logs a one-line warning explaining the swap. Toggle
+ * globally via `createOrigam({ contrast: false })`, or per-element with
+ * `v-contrast="false"`.
+ */
 declare const vContrast: Directive<HTMLElement, boolean | undefined>;
 export default vContrast;

package/dist/src/directives/Contrast/contrast.directive.js

@@ -120,15 +120,70 @@ function enforceContrast(el, enabled) {
   const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
   el.style.setProperty("color", better, "important");
   el.dataset.origamContrastFixed = "true";
-  console.warn(
-    `[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`,
-    el
-  );
+  if (import.meta.env?.DEV) {
+    console.warn(
+      `[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`,
+      el
+    );
+  }
+}
+const MAX_SETTLE_PASSES = 4;
+const COLOR_TRANSITION_PROPERTIES = /* @__PURE__ */ new Set(["color", "background-color"]);
+function declaredTransitionMs(el) {
+  const toMs = (value) => {
+    const n = parseFloat(value);
+    if (Number.isNaN(n)) return 0;
+    return value.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  let longest = 0;
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const durations = style.transitionDuration.split(",");
+    const delays = style.transitionDelay.split(",");
+    durations.forEach((duration, i) => {
+      longest = Math.max(longest, toMs(duration) + toMs(delays[i % delays.length] ?? "0"));
+    });
+  }
+  return longest;
+}
+function runningColorTransitions(el) {
+  const found = [];
+  for (let node = el; node; node = node.parentElement) {
+    for (const animation of node.getAnimations()) {
+      const property = animation.transitionProperty;
+      if (property && COLOR_TRANSITION_PROPERTIES.has(property) && animation.playState !== "finished") {
+        found.push(animation);
+      }
+    }
+  }
+  return found;
+}
+function forceStyleRecalc(el) {
+  return getComputedStyle(el).color;
+}
+function settleThenEnforce(el, enabled, pending, pass = 0) {
+  if (pending.cancelled) return;
+  if (!forceStyleRecalc(el)) return;
+  if (typeof el.getAnimations === "function") {
+    const running = pass < MAX_SETTLE_PASSES ? runningColorTransitions(el) : [];
+    if (running.length) {
+      Promise.allSettled(running.map((animation) => animation.finished)).then(() => settleThenEnforce(el, enabled, pending, pass + 1));
+      return;
+    }
+    enforceContrast(el, enabled);
+    return;
+  }
+  const wait = declaredTransitionMs(el);
+  if (wait > 0 && pass === 0 && typeof setTimeout !== "undefined") {
+    pending.timeout = setTimeout(() => settleThenEnforce(el, enabled, pending, 1), wait);
+    return;
+  }
+  enforceContrast(el, enabled);
 }
-const SETTLE_MS = 250;
 function cancelScheduled(el) {
   const pending = el._contrastTimers;
   if (!pending) return;
+  pending.cancelled = true;
   if (pending.raf !== void 0 && typeof cancelAnimationFrame !== "undefined") {
     cancelAnimationFrame(pending.raf);
   }
@@ -141,10 +196,7 @@ function schedule(el, enabled) {
   cancelScheduled(el);
   const pending = {};
   if (typeof requestAnimationFrame !== "undefined") {
-    pending.raf = requestAnimationFrame(() => enforceContrast(el, enabled));
-  }
-  if (typeof setTimeout !== "undefined") {
-    pending.timeout = setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+    pending.raf = requestAnimationFrame(() => settleThenEnforce(el, enabled, pending));
   }
   el._contrastTimers = pending;
 }

package/dist/src/enums/Skeleton/skeleton.enum.cjs

@@ -9,8 +9,6 @@ var SKELETON_VARIANT = exports.SKELETON_VARIANT = /* @__PURE__ */(SKELETON_VARIA
   SKELETON_VARIANT2["RECTANGULAR"] = "rectangular";
   SKELETON_VARIANT2["CIRCULAR"] = "circular";
   SKELETON_VARIANT2["PILL"] = "pill";
-  SKELETON_VARIANT2["CARD"] = "card";
-  SKELETON_VARIANT2["LIST_ITEM"] = "list-item";
   return SKELETON_VARIANT2;
 })(SKELETON_VARIANT || {});
 var SKELETON_ANIMATION = exports.SKELETON_ANIMATION = /* @__PURE__ */(SKELETON_ANIMATION2 => {

package/dist/src/enums/Skeleton/skeleton.enum.d.ts

@@ -4,16 +4,13 @@
  * @description
  * Shape presets for `<OrigamSkeleton>`. `text`, `rectangular`, `circular`
  * and `pill` are the PRIMITIVES — the bricks a component assembles to mimic
- * its own anatomy. `card` and `list-item` are fixed composite templates kept
- * until the components that consume them have moved to primitives.
+ * its own anatomy, inside an `<OrigamSkeletonGroup>`.
  ********************************************************/
 export declare enum SKELETON_VARIANT {
     TEXT = "text",
     RECTANGULAR = "rectangular",
     CIRCULAR = "circular",
-    PILL = "pill",
-    CARD = "card",
-    LIST_ITEM = "list-item"
+    PILL = "pill"
 }
 /*********************************************************
  * SKELETON_ANIMATION

package/dist/src/enums/Skeleton/skeleton.enum.js

@@ -3,8 +3,6 @@ export var SKELETON_VARIANT = /* @__PURE__ */ ((SKELETON_VARIANT2) => {
   SKELETON_VARIANT2["RECTANGULAR"] = "rectangular";
   SKELETON_VARIANT2["CIRCULAR"] = "circular";
   SKELETON_VARIANT2["PILL"] = "pill";
-  SKELETON_VARIANT2["CARD"] = "card";
-  SKELETON_VARIANT2["LIST_ITEM"] = "list-item";
   return SKELETON_VARIANT2;
 })(SKELETON_VARIANT || {});
 export var SKELETON_ANIMATION = /* @__PURE__ */ ((SKELETON_ANIMATION2) => {

package/dist/src/interfaces/Btn/btn.interface.d.ts

@@ -33,6 +33,7 @@ export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColor
     block?: boolean;
     slim?: boolean;
     stacked?: boolean;
+    wrap?: boolean;
     text?: string;
     status?: TStatus;
     statusIconPosition?: TStatusPosition;

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

@@ -15,6 +15,20 @@ import { TSSROptions } from '../../types/Commons/display.type';
  * `enabled` toggles the whole feature; `threshold` is the minimum acceptable
  * WCAG contrast ratio (default 4.5:1 — AA for normal text).
  */
+/*********************************************************
+ * IContrastScheduled
+ *
+ * @description
+ * What `v-contrast` has queued for one element: the animation frame that
+ * starts the measure, the fallback timer (browsers without `getAnimations`,
+ * derived from the declared transition) and a flag that cancels a measure
+ * already waiting on a transition. Stored on the element as `_contrastTimers`.
+ ********************************************************/
+export interface IContrastScheduled {
+    raf?: number;
+    timeout?: number;
+    cancelled?: boolean;
+}
 export interface IContrastOptions {
     enabled?: boolean;
     threshold?: number;

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

@@ -23,3 +23,24 @@ export interface IStyleTagOptions extends IConfigurableDocument {
      */
     id?: string;
 }
+/*********************************************************
+ * ISsrStyleEntry / ISsrStyleCollector (#1092)
+ *
+ * @description
+ * `ISsrStyleEntry` is one `useStyle()` rule resolved for the server render:
+ * `id` is the DOM id of the `<style>` tag it belongs to, `css` the
+ * `#element-id { … }` rule, already safe to embed in a `<style>`.
+ *
+ * @description
+ * `ISsrStyleCollector` is the per-app registry of those rules. Rules are
+ * registered as GETTERS and read at collection time, so a value a later pass
+ * of the render settled on is what ships.
+ ********************************************************/
+export interface ISsrStyleEntry {
+    id: string;
+    css: string;
+}
+export interface ISsrStyleCollector {
+    add(id: string, css: () => string): void;
+    entries(): ISsrStyleEntry[];
+}

package/dist/src/nuxt/plugin.server.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _origam = require("../origam.cjs");
 var _applyTheme = require("../utils/Commons/apply-theme.util.cjs");
+var _ssrStyles = require("../utils/Commons/ssr-styles.util.cjs");
 var _theme = require("../consts/Commons/theme.const.cjs");
 var _app = require("#app");
 function resolveServerTheme(cookieValue, config) {
@@ -79,6 +80,23 @@ module.exports = (0, _app.defineNuxtPlugin)({
     });
     origam._defaultsRef.value = origam._activeDefaultsFor(resolvedTheme === _theme.ORIGAM_THEME_AUTO ? "" : resolvedTheme, resolvedMode);
     nuxtApp.vueApp.use(origam);
+    nuxtApp.hook("app:rendered", ({
+      ssrContext
+    }) => {
+      const styles = (0, _ssrStyles.getSsrStyles)(nuxtApp.vueApp);
+      if (styles.length && ssrContext) {
+        ssrContext.head.push({
+          style: styles.map(({
+            id,
+            css
+          }) => ({
+            id,
+            key: id,
+            innerHTML: css
+          }))
+        });
+      }
+    });
     return {
       provide: {
         origam: {

package/dist/src/nuxt/plugin.server.js

@@ -1,5 +1,6 @@
 import { createOrigam } from "../origam.js";
 import { themeToCss } from "../utils/Commons/apply-theme.util.js";
+import { getSsrStyles } from "../utils/Commons/ssr-styles.util.js";
 import { ORIGAM_MODE_ATTR, ORIGAM_MODE_DARK, ORIGAM_MODE_LIGHT, ORIGAM_THEME_ATTR, ORIGAM_THEME_AUTO } from "../consts/Commons/theme.const.js";
 import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders, useRuntimeConfig } from "#app";
 function resolveServerTheme(cookieValue, config) {
@@ -69,6 +70,14 @@ export default defineNuxtPlugin({
       resolvedMode
     );
     nuxtApp.vueApp.use(origam);
+    nuxtApp.hook("app:rendered", ({ ssrContext }) => {
+      const styles = getSsrStyles(nuxtApp.vueApp);
+      if (styles.length && ssrContext) {
+        ssrContext.head.push({
+          style: styles.map(({ id, css }) => ({ id, key: id, innerHTML: css }))
+        });
+      }
+    });
     return {
       provide: {
         origam: {

package/dist/src/origam.cjs

@@ -69,6 +69,9 @@ 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);
+      if (!_consts.IN_BROWSER) {
+        app.provide(_consts.ORIGAM_SSR_STYLES_KEY, (0, _utils.registerSsrStyleCollector)(app));
+      }
       (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) {

package/dist/src/origam.js

@@ -20,13 +20,14 @@ import {
   ORIGAM_GO_TO_KEY,
   ORIGAM_ICONS_KEY,
   ORIGAM_LOCALE_KEY,
+  ORIGAM_SSR_STYLES_KEY,
   ORIGAM_THEME_DEFAULTS_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";
-import { applyThemes, installedThemesFromList, mergeDeep } from "./utils/index.js";
+import { applyThemes, installedThemesFromList, mergeDeep, registerSsrStyleCollector } from "./utils/index.js";
 import "@mdi/font/css/materialdesignicons.css";
 import { defineComponent, effectScope, nextTick, reactive } from "vue";
 export function createOrigam(origam = {}) {
@@ -88,6 +89,9 @@ export function createOrigam(origam = {}) {
       app.provide(ORIGAM_GO_TO_KEY, goTo);
       app.provide(ORIGAM_THEMES_KEY, installedThemes);
       app.provide(ORIGAM_DEFAULTS_KEY, defaultsRef);
+      if (!IN_BROWSER) {
+        app.provide(ORIGAM_SSR_STYLES_KEY, registerSsrStyleCollector(app));
+      }
       installThemePropsResolver(app, themedKeysUnion, variantPresets);
       app.provide(ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (IN_BROWSER && options.ssr) {