origam 2.3.0 → 2.6.1

package/dist/src/utils/Chart/path.util.d.ts

@@ -0,0 +1,116 @@
+/**
+ * Pure SVG path-string helpers consumed by `useChart`. Each function
+ * is intentionally **stateless** — given the same coordinates it
+ * always returns the same string. Keeping them out of the composable
+ * is what makes the chart render-safe on the server (no DOM
+ * measurement, no `getBBox()`, no `window.*`).
+ *
+ * The helpers are intentionally low-level: they expect already-scaled
+ * pixel coordinates and don't know about data ranges, padding, or
+ * categorical axes — `useChart` handles the scale and feeds the
+ * scaled points in.
+ */
+/** A pre-scaled `[x, y]` coordinate pair (pixels in the SVG viewBox). */
+export type TPathPoint = [number, number];
+/**
+ * Joins a list of pixel points with straight segments.
+ *
+ * Returns an empty string when `points` is empty so callers don't
+ * emit `<path d="">` (Chrome logs a warning).
+ *
+ * ```ts
+ * linePath([[0,0],[10,10],[20,5]])  // 'M0,0 L10,10 L20,5'
+ * ```
+ */
+export declare const linePath: (points: Array<TPathPoint>) => string;
+/**
+ * Catmull-Rom-derived cubic-Bezier path through `points`. Produces a
+ * visually smoother line than `linePath` at the cost of a small
+ * overshoot near sharp peaks (documented in `<OrigamChart>` doc).
+ *
+ * Falls back to `linePath` when there are fewer than 3 points (a
+ * single segment doesn't have enough neighbours to compute tangents).
+ */
+export declare const smoothPath: (points: Array<TPathPoint>) => string;
+/**
+ * Monotone cubic-Bezier spline through `points`. Unlike
+ * `smoothPath`, the Fritsch-Carlson tangent estimate guarantees
+ * the curve is monotone between every pair of points — no
+ * overshoot at sharp peaks, no spurious bumps. Most production
+ * "spline" charts (Highcharts, ApexCharts, Chart.js) use this
+ * algorithm rather than naive Catmull-Rom.
+ *
+ * Falls back to `linePath` when there are fewer than 3 points.
+ */
+export declare const monotonePath: (points: Array<TPathPoint>) => string;
+/**
+ * Stepped (staircase) polyline through `points`. Each segment
+ * draws horizontally from `points[i]` to `points[i+1].x`, then
+ * vertically to `points[i+1].y`. Used by the `stepped-line` chart
+ * type for "event log" / "discrete state" visualisations.
+ *
+ * Returns an empty string when `points` is empty.
+ */
+export declare const steppedPath: (points: Array<TPathPoint>) => string;
+/**
+ * Closes the path produced by `linePath` / `smoothPath` /
+ * `monotonePath` / `steppedPath` down to the `baselineY` then back
+ * to the first X — the canonical "area chart" shape.
+ *
+ * `smooth` accepts:
+ *   - `false` — straight line segments (default).
+ *   - `true` — Catmull-Rom Bezier (`smoothPath`).
+ *   - `'monotone'` — Fritsch-Carlson Bezier (`monotonePath`).
+ *   - `'stepped'` — staircase (`steppedPath`).
+ */
+export declare const areaPath: (points: Array<TPathPoint>, baselineY: number, smooth?: boolean | "monotone" | "stepped") => string;
+/**
+ * SVG arc path for a pie / donut slice.
+ *
+ * - `cx`, `cy` — center of the chart.
+ * - `outerR` — outer radius (pie radius).
+ * - `innerR` — inner radius (`0` for pie, `> 0` for donut).
+ * - `startAngle`, `endAngle` — radians, mathematical convention
+ *   (zero at 3 o'clock, increasing counter-clockwise). The helper
+ *   converts internally to the SVG convention (zero at noon,
+ *   clockwise) so callers can reason in standard math.
+ *
+ * Returns an empty string when the sweep is zero (avoids a
+ * malformed `M…A…M…A…Z`).
+ */
+export declare const arcPath: (cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number) => string;
+/**
+ * Polygon path through `points` (radar / area-fill of a radar).
+ *
+ * Returns an empty string when `points` is empty. The path is
+ * **closed** (`Z` at the end) so the consumer can fill it without
+ * worrying about the start/end gap.
+ */
+export declare const polygonPath: (points: Array<TPathPoint>) => string;
+/**
+ * Cartesian length of a polyline. Used by the chart to seed
+ * `stroke-dasharray` / `stroke-dashoffset` for the entrance
+ * animation (the "drawing" effect on line / area charts).
+ */
+export declare const pathLength: (points: Array<TPathPoint>) => number;
+/**
+ * Manhattan length of a stepped polyline — the actual SVG `d`
+ * generated by `steppedPath` draws BOTH a horizontal AND a
+ * vertical segment between every pair of input points, so the
+ * total rendered length is `Σ(|Δx| + |Δy|)`, not
+ * `Σ(sqrt(Δx² + Δy²))`.
+ *
+ * Using the Cartesian `pathLength` here would make the
+ * `stroke-dasharray` animation truncate the visible stroke
+ * partway through (the symptom: stepped-line tail not drawn).
+ */
+export declare const steppedPathLength: (points: Array<TPathPoint>) => number;
+/**
+ * Convert a polar (cx, cy, radius, angle) into a Cartesian
+ * `[x, y]` pixel pair. Used by radar and pie to position labels.
+ *
+ * Angles use the mathematical convention (radians, zero at 3
+ * o'clock, CCW) — `arcPath` and `polarToCartesian` are
+ * consistent.
+ */
+export declare const polarToCartesian: (cx: number, cy: number, radius: number, angle: number) => TPathPoint;

package/dist/src/utils/Chart/path.util.js

@@ -0,0 +1,143 @@
+export const linePath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail}` : head;
+};
+export const smoothPath = (points) => {
+  if (points.length < 3) return linePath(points);
+  const [first] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+    const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+    const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(p2[0])},${formatNum(p2[1])}`;
+  }
+  return d;
+};
+export const monotonePath = (points) => {
+  if (points.length < 3) return linePath(points);
+  const n = points.length;
+  const dx = [];
+  const dy = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    dy.push(points[i + 1][1] - points[i][1]);
+    m.push(dx[i] === 0 ? 0 : dy[i] / dx[i]);
+  }
+  const t = new Array(n);
+  t[0] = m[0];
+  t[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      t[i] = 0;
+    } else {
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = dx[i] + 2 * dx[i - 1];
+      t[i] = (w1 + w2) / (w1 / m[i - 1] + w2 / m[i]);
+    }
+  }
+  let d = `M${formatNum(points[0][0])},${formatNum(points[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const cp1x = points[i][0] + dx[i] / 3;
+    const cp1y = points[i][1] + t[i] * dx[i] / 3;
+    const cp2x = points[i + 1][0] - dx[i] / 3;
+    const cp2y = points[i + 1][1] - t[i + 1] * dx[i] / 3;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(points[i + 1][0])},${formatNum(points[i + 1][1])}`;
+  }
+  return d;
+};
+export const steppedPath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  let prevY = first[1];
+  for (const [x, y] of rest) {
+    d += ` L${formatNum(x)},${formatNum(prevY)} L${formatNum(x)},${formatNum(y)}`;
+    prevY = y;
+  }
+  return d;
+};
+export const areaPath = (points, baselineY, smooth = false) => {
+  if (!points.length) return "";
+  let lineD;
+  if (smooth === "monotone") lineD = monotonePath(points);
+  else if (smooth === "stepped") lineD = steppedPath(points);
+  else if (smooth === true) lineD = smoothPath(points);
+  else lineD = linePath(points);
+  const lastX = points[points.length - 1][0];
+  const firstX = points[0][0];
+  return `${lineD} L${formatNum(lastX)},${formatNum(baselineY)} L${formatNum(firstX)},${formatNum(baselineY)} Z`;
+};
+export const arcPath = (cx, cy, outerR, innerR, startAngle, endAngle) => {
+  const sweep = endAngle - startAngle;
+  if (Math.abs(sweep) < 1e-6) return "";
+  const toSvg = (a) => a - Math.PI / 2;
+  const sa = toSvg(startAngle);
+  const ea = toSvg(endAngle);
+  const largeArc = Math.abs(sweep) > Math.PI ? 1 : 0;
+  const sweepFlag = sweep > 0 ? 1 : 0;
+  const x1 = cx + outerR * Math.cos(sa);
+  const y1 = cy + outerR * Math.sin(sa);
+  const x2 = cx + outerR * Math.cos(ea);
+  const y2 = cy + outerR * Math.sin(ea);
+  if (innerR <= 0) {
+    return `M${formatNum(cx)},${formatNum(cy)} L${formatNum(x1)},${formatNum(y1)} A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)} Z`;
+  }
+  const ix1 = cx + innerR * Math.cos(sa);
+  const iy1 = cy + innerR * Math.sin(sa);
+  const ix2 = cx + innerR * Math.cos(ea);
+  const iy2 = cy + innerR * Math.sin(ea);
+  const innerSweepFlag = sweep > 0 ? 0 : 1;
+  return [
+    `M${formatNum(x1)},${formatNum(y1)}`,
+    `A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)}`,
+    `L${formatNum(ix2)},${formatNum(iy2)}`,
+    `A${formatNum(innerR)},${formatNum(innerR)} 0 ${largeArc},${innerSweepFlag} ${formatNum(ix1)},${formatNum(iy1)}`,
+    "Z"
+  ].join(" ");
+};
+export const polygonPath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail} Z` : `${head} Z`;
+};
+export const pathLength = (points) => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i][0] - points[i - 1][0];
+    const dy = points[i][1] - points[i - 1][1];
+    total += Math.sqrt(dx * dx + dy * dy);
+  }
+  return total;
+};
+export const steppedPathLength = (points) => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = Math.abs(points[i][0] - points[i - 1][0]);
+    const dy = Math.abs(points[i][1] - points[i - 1][1]);
+    total += dx + dy;
+  }
+  return total;
+};
+export const polarToCartesian = (cx, cy, radius, angle) => {
+  const a = angle - Math.PI / 2;
+  return [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+};
+const formatNum = (n) => {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1e3) / 1e3;
+  return rounded === 0 ? "0" : String(rounded);
+};

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

@@ -184,7 +184,7 @@ function HSVtoCSS(hsva) {
 }
 function toHex(v) {
   const h = Math.round(v).toString(16);
-  return ("00".substr(0, 2 - h.length) + h).toUpperCase();
+  return ("00".slice(0, 2 - h.length) + h).toUpperCase();
 }
 function RGBtoHex({
   r,
@@ -273,7 +273,9 @@ function parseGradient(gradient, colors) {
   });
 }
 function classToHex(color, colors) {
-  const [colorName, colorModifier] = color.toString().trim().replace("-", "").split(" ", 2);
+  const parts = color.toString().trim().split(" ", 2);
+  const colorName = parts[0];
+  const colorModifier = parts[1]?.replace(/-/g, "");
   let hexColor = "";
   if (colorName && colorName in colors) {
     if (colorModifier && colorModifier in colors[colorName]) {

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

@@ -133,7 +133,7 @@ export function HSVtoCSS(hsva) {
 }
 export function toHex(v) {
   const h = Math.round(v).toString(16);
-  return ("00".substr(0, 2 - h.length) + h).toUpperCase();
+  return ("00".slice(0, 2 - h.length) + h).toUpperCase();
 }
 export function RGBtoHex({ r, g, b, a }) {
   return `#${[
@@ -207,7 +207,9 @@ export function parseGradient(gradient, colors) {
   });
 }
 export function classToHex(color, colors) {
-  const [colorName, colorModifier] = color.toString().trim().replace("-", "").split(" ", 2);
+  const parts = color.toString().trim().split(" ", 2);
+  const colorName = parts[0];
+  const colorModifier = parts[1]?.replace(/-/g, "");
   let hexColor = "";
   if (colorName && colorName in colors) {
     if (colorModifier && colorModifier in colors[colorName]) {

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

@@ -89,7 +89,8 @@ function findChildrenWithProvide(key, vnode) {
   } else if (Array.isArray(vnode.children)) {
     return vnode.children.map(child => findChildrenWithProvide(key, child)).flat(1);
   } else if (vnode.component) {
-    if (Object.getOwnPropertySymbols(vnode.component.provides).includes(key)) {
+    const componentProvides = vnode.component.provides ?? {};
+    if (Object.getOwnPropertySymbols(componentProvides).includes(key)) {
       return [vnode.component];
     } else if (vnode.component.subTree) {
       return findChildrenWithProvide(key, vnode.component.subTree).flat(1);
@@ -132,7 +133,7 @@ function chunk(str, size = 1) {
   const chunked = [];
   let index = 0;
   while (index < str.length) {
-    chunked.push(str.substr(index, size));
+    chunked.push(str.slice(index, index + size));
     index += size;
   }
   return chunked;

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

@@ -50,7 +50,8 @@ export function findChildrenWithProvide(key, vnode) {
   } else if (Array.isArray(vnode.children)) {
     return vnode.children.map((child) => findChildrenWithProvide(key, child)).flat(1);
   } else if (vnode.component) {
-    if (Object.getOwnPropertySymbols(vnode.component.provides).includes(key)) {
+    const componentProvides = vnode.component.provides ?? {};
+    if (Object.getOwnPropertySymbols(componentProvides).includes(key)) {
       return [vnode.component];
     } else if (vnode.component.subTree) {
       return findChildrenWithProvide(key, vnode.component.subTree).flat(1);
@@ -91,7 +92,7 @@ export function chunk(str, size = 1) {
   const chunked = [];
   let index = 0;
   while (index < str.length) {
-    chunked.push(str.substr(index, size));
+    chunked.push(str.slice(index, index + size));
     index += size;
   }
   return chunked;

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

@@ -3,4 +3,4 @@
  *  - 'null' if the node is not attached to the DOM
  *  - the root node (HTMLDocument | ShadowRoot) otherwise
  */
-export declare function attachedRoot(node: Node): null | HTMLDocument | ShadowRoot;
+export declare function attachedRoot(node: Node): null | Document | ShadowRoot;

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

@@ -15,7 +15,7 @@ function formatElevationStyle(elevation = 0, bgColor) {
     s: 0,
     l: 0
   };
-  if (bgColor && (0, _utils.isParsableColor)(bgColor)) {
+  if (typeof bgColor === "string" && (0, _utils.isParsableColor)(bgColor)) {
     color = (0, _utils.HSVtoHSL)((0, _utils.RGBtoHSV)((0, _utils.parseColor)(bgColor)));
   }
   return `box-shadow: ${(0, _utils.convertToUnit)(offsetX)} ${(0, _utils.convertToUnit)(offsetY)} ${(0, _utils.convertToUnit)(blurRadius)} hsl(${(0, _utils.convertToUnit)(color.h, "deg")} ${(0, _utils.convertToUnit)(color.s * 100, "%")} ${(0, _utils.convertToUnit)(color.l * 100, "%")} / ${opacity.toFixed(2)})`;

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

@@ -5,7 +5,7 @@ export function formatElevationStyle(elevation = 0, bgColor) {
   const offsetY = roundTo(normalize(elevation * 0.04, 0, 1, 0, 16), 1);
   const opacity = roundTo(normalize(elevation * 0.04, 0, 1, 0.5, 0.25), 2);
   let color = { h: 0, s: 0, l: 0 };
-  if (bgColor && isParsableColor(bgColor)) {
+  if (typeof bgColor === "string" && isParsableColor(bgColor)) {
     color = HSVtoHSL(RGBtoHSV(parseColor(bgColor)));
   }
   return `box-shadow: ${convertToUnit(offsetX)} ${convertToUnit(offsetY)} ${convertToUnit(blurRadius)} hsl(${convertToUnit(color.h, "deg")} ${convertToUnit(color.s * 100, "%")} ${convertToUnit(color.l * 100, "%")} / ${opacity.toFixed(2)})`;

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

@@ -62,7 +62,7 @@ function forwardRefs(target, ...refs) {
           const ref2 = queue.shift();
           const descriptor2 = getDescriptor(ref2.value, key);
           if (descriptor2) return descriptor2;
-          const childRefs2 = ref2.value && ref2.value[_consts.FORWARD_REFS];
+          const childRefs2 = ref2.value?.[_consts.FORWARD_REFS];
           if (childRefs2) queue.push(...childRefs2);
         }
       }

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

@@ -55,7 +55,7 @@ export function forwardRefs(target, ...refs) {
           const ref2 = queue.shift();
           const descriptor2 = getDescriptor(ref2.value, key);
           if (descriptor2) return descriptor2;
-          const childRefs2 = ref2.value && ref2.value[FORWARD_REFS];
+          const childRefs2 = ref2.value?.[FORWARD_REFS];
           if (childRefs2) queue.push(...childRefs2);
         }
       }

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gradientFromObject = gradientFromObject;
+exports.isGradient = isGradient;
+exports.resolveGradient = resolveGradient;
+var _color = require("./color.util.cjs");
+const GRADIENT_FN_RE = /^\s*(repeating-)?(linear|radial|conic)-gradient\s*\(/i;
+const PRESET_PREFIX = "gradient-";
+function isGradientString(value) {
+  return GRADIENT_FN_RE.test(value);
+}
+function isPresetString(value) {
+  return value.startsWith(PRESET_PREFIX) && value.length > PRESET_PREFIX.length;
+}
+function isGradientObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const obj = value;
+  const hasShortForm = typeof obj.from === "string" && typeof obj.to === "string";
+  const hasStops = Array.isArray(obj.stops) && obj.stops.length >= 2;
+  return hasShortForm || hasStops;
+}
+function isGradient(value) {
+  if (typeof value === "string") {
+    return isGradientString(value) || isPresetString(value);
+  }
+  return isGradientObject(value);
+}
+function resolveStopColor(color) {
+  if ((0, _color.isIntent)(color)) {
+    return `var(--origam-color__${(0, _color.intentTokenBase)(color)}---bg)`;
+  }
+  return color;
+}
+function resolveDirection(type, direction) {
+  if (direction === void 0 || direction === null || direction === "") {
+    if (type === "radial") return "circle at center";
+    if (type === "conic") return "from 0deg at 50% 50%";
+    return "135deg";
+  }
+  if (typeof direction === "number") return `${direction}deg`;
+  return direction;
+}
+function gradientFromObject(g) {
+  const type = g.type ?? "linear";
+  const directionPart = resolveDirection(type, g.direction);
+  let stopsPart = "";
+  if (Array.isArray(g.stops) && g.stops.length >= 2) {
+    stopsPart = g.stops.map(s => `${resolveStopColor(s.color)} ${s.position}%`).join(", ");
+  } else if (g.from && g.to) {
+    const parts = [resolveStopColor(g.from)];
+    if (g.via) parts.push(resolveStopColor(g.via));
+    parts.push(resolveStopColor(g.to));
+    stopsPart = parts.join(", ");
+  } else {
+    stopsPart = "transparent, transparent";
+  }
+  return `${type}-gradient(${directionPart}, ${stopsPart})`;
+}
+function resolveGradient(value) {
+  if (value === null || value === void 0 || value === false) return "";
+  if (typeof value === "string") {
+    if (isGradientString(value)) return value;
+    if (isPresetString(value)) {
+      const slug = value.slice(PRESET_PREFIX.length);
+      return `var(--origam-gradient---${slug})`;
+    }
+    return "";
+  }
+  if (isGradientObject(value)) return gradientFromObject(value);
+  return "";
+}

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

@@ -0,0 +1,36 @@
+import type { IGradient } from '../../interfaces/Commons/gradient.interface';
+import type { TColor } from '../../types';
+/**
+ * Type guard: does `value` carry gradient semantics?
+ *
+ *   - Direct CSS function string (`linear-gradient(...)`, …).
+ *   - Preset name (`gradient-sunset`).
+ *   - {@link IGradient} object.
+ *
+ * Returns `false` for intents, hex colors, transparent, null, undefined.
+ */
+export declare function isGradient(value: unknown): boolean;
+/**
+ * Build the CSS gradient function call from a structured {@link IGradient}
+ * descriptor. Pure — no side effects, no warning.
+ *
+ *   { from: 'primary', to: 'success' }
+ *     → 'linear-gradient(135deg, var(--origam-color__action--primary---bg), var(--origam-color__feedback--success---bg))'
+ *
+ *   { type: 'radial', stops: [{ color: '#fff', position: 0 }, { color: '#000', position: 100 }] }
+ *     → 'radial-gradient(circle at center, #fff 0%, #000 100%)'
+ */
+export declare function gradientFromObject(g: IGradient): string;
+/**
+ * Resolve any gradient-flavoured input into a CSS `background-image`
+ * value (the `linear-gradient(…)` / `radial-gradient(…)` / preset
+ * `var(--origam-gradient---*)` string).
+ *
+ * Caller is responsible for wrapping it in the right declaration —
+ * either `background-image: <value>` (default) or the `background-clip:
+ * text` triad when applied to a foreground.
+ *
+ * Returns an empty string for non-gradient inputs (so callers can use
+ * the return value as a truthiness check).
+ */
+export declare function resolveGradient(value: TColor | IGradient): string;

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

@@ -0,0 +1,66 @@
+import { intentTokenBase, isIntent } from "./color.util.js";
+const GRADIENT_FN_RE = /^\s*(repeating-)?(linear|radial|conic)-gradient\s*\(/i;
+const PRESET_PREFIX = "gradient-";
+function isGradientString(value) {
+  return GRADIENT_FN_RE.test(value);
+}
+function isPresetString(value) {
+  return value.startsWith(PRESET_PREFIX) && value.length > PRESET_PREFIX.length;
+}
+function isGradientObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const obj = value;
+  const hasShortForm = typeof obj.from === "string" && typeof obj.to === "string";
+  const hasStops = Array.isArray(obj.stops) && obj.stops.length >= 2;
+  return hasShortForm || hasStops;
+}
+export function isGradient(value) {
+  if (typeof value === "string") {
+    return isGradientString(value) || isPresetString(value);
+  }
+  return isGradientObject(value);
+}
+function resolveStopColor(color) {
+  if (isIntent(color)) {
+    return `var(--origam-color__${intentTokenBase(color)}---bg)`;
+  }
+  return color;
+}
+function resolveDirection(type, direction) {
+  if (direction === void 0 || direction === null || direction === "") {
+    if (type === "radial") return "circle at center";
+    if (type === "conic") return "from 0deg at 50% 50%";
+    return "135deg";
+  }
+  if (typeof direction === "number") return `${direction}deg`;
+  return direction;
+}
+export function gradientFromObject(g) {
+  const type = g.type ?? "linear";
+  const directionPart = resolveDirection(type, g.direction);
+  let stopsPart = "";
+  if (Array.isArray(g.stops) && g.stops.length >= 2) {
+    stopsPart = g.stops.map((s) => `${resolveStopColor(s.color)} ${s.position}%`).join(", ");
+  } else if (g.from && g.to) {
+    const parts = [resolveStopColor(g.from)];
+    if (g.via) parts.push(resolveStopColor(g.via));
+    parts.push(resolveStopColor(g.to));
+    stopsPart = parts.join(", ");
+  } else {
+    stopsPart = "transparent, transparent";
+  }
+  return `${type}-gradient(${directionPart}, ${stopsPart})`;
+}
+export function resolveGradient(value) {
+  if (value === null || value === void 0 || value === false) return "";
+  if (typeof value === "string") {
+    if (isGradientString(value)) return value;
+    if (isPresetString(value)) {
+      const slug = value.slice(PRESET_PREFIX.length);
+      return `var(--origam-gradient---${slug})`;
+    }
+    return "";
+  }
+  if (isGradientObject(value)) return gradientFromObject(value);
+  return "";
+}

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

@@ -20,12 +20,14 @@ function updateHover(el, binding, wasEnabled, name) {
   const options = {
     class: `${name}--hover`
   };
-  if ((0, _utils.isObject)(value) && value.class) {
+  if ((0, _utils.isObject)(value) && typeof value.class === "string") {
     options.class = value.class;
   }
   el._hover = el._hover ?? {};
   el._hover.enabled = enabled;
   el._hover.class = options.class;
+  el._hover.mouseenter = (0, _utils.isObject)(value) ? value.mouseenter : void 0;
+  el._hover.mouseleave = (0, _utils.isObject)(value) ? value.mouseleave : void 0;
   if (!enabled) {
     _consts.HOVER.hide(el, options);
   }
@@ -70,6 +72,7 @@ function hoverShow(e) {
     value.class = element._hover.class;
   }
   _consts.HOVER.show(e, element, value);
+  element._hover.mouseenter?.(element, e);
 }
 function hoverStop(e) {
   e[_consts.ORIGAM_HOVER_STOP_KEY] = true;
@@ -84,6 +87,7 @@ function hoverHide(e) {
     value.class = element._hover.class;
   }
   _consts.HOVER.hide(element, value);
+  element._hover.mouseleave?.(element, e);
 }
 function hoverRemoveListeners(el) {
   el.removeEventListener("mouseenter", hoverShow);

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

@@ -4,12 +4,14 @@ export function updateHover(el, binding, wasEnabled, name) {
   const { value, modifiers } = binding;
   const enabled = isHoverEnabled(value);
   const options = { class: `${name}--hover` };
-  if (isObject(value) && value.class) {
+  if (isObject(value) && typeof value.class === "string") {
     options.class = value.class;
   }
   el._hover = el._hover ?? {};
   el._hover.enabled = enabled;
   el._hover.class = options.class;
+  el._hover.mouseenter = isObject(value) ? value.mouseenter : void 0;
+  el._hover.mouseleave = isObject(value) ? value.mouseleave : void 0;
   if (!enabled) {
     HOVER.hide(el, options);
   }
@@ -46,6 +48,7 @@ export function hoverShow(e) {
     value.class = element._hover.class;
   }
   HOVER.show(e, element, value);
+  element._hover.mouseenter?.(element, e);
 }
 export function hoverStop(e) {
   e[ORIGAM_HOVER_STOP_KEY] = true;
@@ -58,6 +61,7 @@ export function hoverHide(e) {
     value.class = element._hover.class;
   }
   HOVER.hide(element, value);
+  element._hover.mouseleave?.(element, e);
 }
 export function hoverRemoveListeners(el) {
   el.removeEventListener("mouseenter", hoverShow);

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

@@ -179,11 +179,10 @@ function rippleRemoveListeners(el) {
 }
 function rippleTransform(el, value) {
   el.style.transform = value;
-  el.style.webkitTransform = value;
 }
 let keyboardRipple = false;
 function keyboardRippleShow(e) {
-  if (!keyboardRipple && (e.keyCode === _consts.KEYCODES.enter || e.keyCode === _consts.KEYCODES.space || e.code === _consts.KEYCODES.enter.toString() || e.code === _consts.KEYCODES.space.toString())) {
+  if (!keyboardRipple && (e.key === "Enter" || e.key === " ")) {
     keyboardRipple = true;
     rippleShow(e);
   }

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

@@ -1,4 +1,4 @@
-import { DELAY_RIPPLE, KEYCODES, ORIGAM_RIPPLE_STOP_KEY, RIPPLES } from "../../consts/index.js";
+import { DELAY_RIPPLE, ORIGAM_RIPPLE_STOP_KEY, RIPPLES } from "../../consts/index.js";
 import { isObject } from "../../utils/index.js";
 export function updateRipple(el, binding, wasEnabled) {
   const { value, modifiers } = binding;
@@ -140,11 +140,10 @@ export function rippleRemoveListeners(el) {
 }
 export function rippleTransform(el, value) {
   el.style.transform = value;
-  el.style.webkitTransform = value;
 }
 let keyboardRipple = false;
 export function keyboardRippleShow(e) {
-  if (!keyboardRipple && (e.keyCode === KEYCODES.enter || e.keyCode === KEYCODES.space || (e.code === KEYCODES.enter.toString() || e.code === KEYCODES.space.toString()))) {
+  if (!keyboardRipple && (e.key === "Enter" || e.key === " ")) {
     keyboardRipple = true;
     rippleShow(e);
   }