origam 2.25.0 → 2.26.1

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

@@ -408,7 +408,9 @@ function tokenForegroundForIntent(intent) {
 }
 const _warnedColorKeys = /* @__PURE__ */new Set();
 function warnLegacyColor(kind, value) {
+  if (!process.env?.DEV) return;
   if (typeof console === "undefined") return;
+  if (/^\s*(?:var|color-mix)\(/i.test(value)) return;
   const key = `${kind}::${value}`;
   if (_warnedColorKeys.has(key)) return;
   _warnedColorKeys.add(key);

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

@@ -470,6 +470,13 @@ export declare function tokenForegroundForIntent(intent: TIntent): string;
  * 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.
+ *
+ * @description
+ * Dev-only (`import.meta.env.DEV`, same gate as `warnUnsupportedProp`), so
+ * the message is tree-shaken from production bundles. `var(--x)` and
+ * `color-mix(...)` are NOT raw colors: they are the migration path the DS
+ * recommends (token reference / derived from tokens) and are rendered
+ * through the custom-value channel without any warning.
  ********************************************************/
 export declare function warnLegacyColor(kind: 'color' | 'bgColor', value: string): void;
 /*********************************************************

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

@@ -314,7 +314,9 @@ export function tokenForegroundForIntent(intent) {
 }
 const _warnedColorKeys = /* @__PURE__ */ new Set();
 export function warnLegacyColor(kind, value) {
+  if (!import.meta.env?.DEV) return;
   if (typeof console === "undefined") return;
+  if (/^\s*(?:var|color-mix)\(/i.test(value)) return;
   const key = `${kind}::${value}`;
   if (_warnedColorKeys.has(key)) return;
   _warnedColorKeys.add(key);

package/dist/src/utils/DataTable/skeleton-cell.util.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSkeletonCellShape = getSkeletonCellShape;
+var _align = require("../../enums/Commons/align.enum.cjs");
+var _dataTable = require("../../enums/DataTable/data-table.enum.cjs");
+function getSkeletonCellShape(column) {
+  if (column.key === "data-table-select" || column.key === "data-table-expand") return _dataTable.DATATABLE_SKELETON_CELL.CONTROL;
+  if (column.align === _align.ALIGN.END) return _dataTable.DATATABLE_SKELETON_CELL.END;
+  return _dataTable.DATATABLE_SKELETON_CELL.TEXT;
+}

package/dist/src/utils/DataTable/skeleton-cell.util.d.ts

@@ -0,0 +1,12 @@
+import { DATATABLE_SKELETON_CELL } from '../../enums/DataTable/data-table.enum';
+import type { IInternalDataTableHeader } from '../../interfaces/DataTable/data-table-header.interface';
+/*********************************************************
+ * getSkeletonCellShape
+ *
+ * @description
+ * Which silhouette a placeholder cell draws for `column`. The descriptor
+ * has no "type", so the shape is read from what it does carry: the
+ * reserved `data-table-select` / `data-table-expand` keys are controls,
+ * an `align: 'end'` column holds figures, anything else is text.
+ ********************************************************/
+export declare function getSkeletonCellShape(column: Pick<IInternalDataTableHeader, 'key' | 'align'>): DATATABLE_SKELETON_CELL;

package/dist/src/utils/DataTable/skeleton-cell.util.js

@@ -0,0 +1,7 @@
+import { ALIGN } from "../../enums/Commons/align.enum.js";
+import { DATATABLE_SKELETON_CELL } from "../../enums/DataTable/data-table.enum.js";
+export function getSkeletonCellShape(column) {
+  if (column.key === "data-table-select" || column.key === "data-table-expand") return DATATABLE_SKELETON_CELL.CONTROL;
+  if (column.align === ALIGN.END) return DATATABLE_SKELETON_CELL.END;
+  return DATATABLE_SKELETON_CELL.TEXT;
+}

package/dist/src/utils/Skeleton/skeleton.util.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSkeletonHostClasses = getSkeletonHostClasses;
+exports.splitSkeletonOverrides = splitSkeletonOverrides;
+var _skeleton = require("../../enums/Skeleton/skeleton.enum.cjs");
+function getSkeletonHostClasses(animation) {
+  return ["origam--skeleton", {
+    "origam--skeleton-wave": animation === _skeleton.SKELETON_ANIMATION.WAVE,
+    "origam--skeleton-none": animation === _skeleton.SKELETON_ANIMATION.NONE
+  }];
+}
+function splitSkeletonOverrides(overrides, loadingText) {
+  const o = overrides ?? {};
+  const group = {
+    animation: o.animation,
+    label: o.label ?? loadingText
+  };
+  const block = {
+    color: o.color,
+    bgColor: o.bgColor,
+    rounded: o.rounded
+  };
+  return {
+    group,
+    block
+  };
+}

package/dist/src/utils/Skeleton/skeleton.util.d.ts

@@ -0,0 +1,33 @@
+import type { TSkeletonAnimation } from '../../types/Skeleton/skeleton.type';
+import type { ISkeletonOverrides } from '../../interfaces/Skeleton/skeleton.interface';
+/*********************************************************
+ * getSkeletonHostClasses
+ *
+ * @description
+ * The classes that turn ANY element into a placeholder (`.origam--skeleton`
+ * and its animation modifier, see `origam-utilities.css`). Shared by
+ * `<OrigamSkeleton>` and by the hosts that paint themselves without adding
+ * a node (the placeholder `<td>` of `<OrigamDataTableRows>`), so the
+ * mapping animation -> class exists once.
+ ********************************************************/
+export declare function getSkeletonHostClasses(animation: TSkeletonAnimation | undefined): Array<string | Record<string, boolean>>;
+/*********************************************************
+ * splitSkeletonOverrides
+ *
+ * @description
+ * `loading="{ type: 'skeleton', ... }"` carries ONE bag of
+ * `Partial<ISkeletonProps>`. A container that composes several primitives
+ * inside an `<OrigamSkeletonGroup>` has two targets for it, and the
+ * boundary is the same everywhere:
+ *
+ * - the GROUP owns what is per zone: `animation` (one clock) and `label`
+ *   (the one announcement). `loadingText` is the default label, an explicit
+ *   `label` in the bag wins.
+ * - every PRIMITIVE owns what is per block: `color`, `bgColor`, `rounded`.
+ *
+ * @description
+ * `variant`, `loading`, the dimension props and `size` are deliberately
+ * dropped: they describe ONE block's silhouette, and applying one value to
+ * every primitive of a composed silhouette would flatten it.
+ ********************************************************/
+export declare function splitSkeletonOverrides(overrides: unknown, loadingText?: string): ISkeletonOverrides;

package/dist/src/utils/Skeleton/skeleton.util.js

@@ -0,0 +1,23 @@
+import { SKELETON_ANIMATION } from "../../enums/Skeleton/skeleton.enum.js";
+export function getSkeletonHostClasses(animation) {
+  return [
+    "origam--skeleton",
+    {
+      "origam--skeleton-wave": animation === SKELETON_ANIMATION.WAVE,
+      "origam--skeleton-none": animation === SKELETON_ANIMATION.NONE
+    }
+  ];
+}
+export function splitSkeletonOverrides(overrides, loadingText) {
+  const o = overrides ?? {};
+  const group = {
+    animation: o.animation,
+    label: o.label ?? loadingText
+  };
+  const block = {
+    color: o.color,
+    bgColor: o.bgColor,
+    rounded: o.rounded
+  };
+  return { group, block };
+}

package/dist/src/utils/index.cjs

@@ -25,6 +25,17 @@ Object.keys(_snackbarGroup).forEach(function (key) {
     }
   });
 });
+var _skeleton = require("./Skeleton/skeleton.util.cjs");
+Object.keys(_skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeleton[key];
+    }
+  });
+});
 var _a11y = require("./Commons/a11y.util.cjs");
 Object.keys(_a11y).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -641,6 +652,17 @@ Object.keys(_slotName).forEach(function (key) {
     }
   });
 });
+var _skeletonCell = require("./DataTable/skeleton-cell.util.cjs");
+Object.keys(_skeletonCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeletonCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeletonCell[key];
+    }
+  });
+});
 var _fuzzyMatch = require("./CommandPalette/fuzzy-match.util.cjs");
 Object.keys(_fuzzyMatch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -1,5 +1,6 @@
 export * from './Media/format-time.util';
 export * from './Snackbar/snackbar-group.util';
+export * from './Skeleton/skeleton.util';
 export * from './Commons/a11y.util';
 export * from './Commons/anchor.util';
 export * from './Commons/border.util';
@@ -56,6 +57,7 @@ export * from './DataTable/items.util';
 export * from './DataTable/sort.util';
 export * from './DataTable/group.util';
 export * from './DataTable/slot-name.util';
+export * from './DataTable/skeleton-cell.util';
 export * from './CommandPalette/fuzzy-match.util';
 export * from './Code/parse-highlight-lines.util';
 export * from './TextareaField/sanitize-html.util';

package/dist/src/utils/index.js

@@ -1,5 +1,6 @@
 export * from "./Media/format-time.util.js";
 export * from "./Snackbar/snackbar-group.util.js";
+export * from "./Skeleton/skeleton.util.js";
 export * from "./Commons/a11y.util.js";
 export * from "./Commons/anchor.util.js";
 export * from "./Commons/border.util.js";
@@ -56,6 +57,7 @@ export * from "./DataTable/items.util.js";
 export * from "./DataTable/sort.util.js";
 export * from "./DataTable/group.util.js";
 export * from "./DataTable/slot-name.util.js";
+export * from "./DataTable/skeleton-cell.util.js";
 export * from "./CommandPalette/fuzzy-match.util.js";
 export * from "./Code/parse-highlight-lines.util.js";
 export * from "./TextareaField/sanitize-html.util.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.25.0",
+  "version": "2.26.1",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [