asma-ui-core 3.81.5 → 3.82.0

package/dist/components/custom/page/page-header/PageHeader.js

@@ -1,103 +1,106 @@
 import { cn as m } from "../../../../helpers/cn.js";
-import { HamburgerIcon as le } from "../../../icons/hamburger-icon/HamburgerIcon.js";
+import { StyledBadge as le } from "../../../data-display/badge/StyledBadge.js";
+import { HamburgerIcon as oe } from "../../../icons/hamburger-icon/HamburgerIcon.js";
 import { ArrowLeftIcon as ie } from "../../../icons/arrow-left-icon/ArrowLeftIcon.js";
-import { StyledButton as E } from "../../../inputs/button/StyledButton.js";
-import { useElementWidthPx as oe } from "../../../../hooks/useElementWidthPx.js";
+import { StyledButton as _ } from "../../../inputs/button/StyledButton.js";
+import { useElementWidthPx as se } from "../../../../hooks/useElementWidthPx.js";
 import { useWidthRegistry as re } from "../../../../hooks/useWidthRegistry.js";
-import { planToolbarActions as se } from "../../module/header-layout/planToolbarActions.js";
-import { ToolbarActionButton as ce, ToolbarActionGroup as de } from "../../module/header-layout/ToolbarActionGroup.js";
-import { useToolbarTranslations as me } from "../../module/header-layout/useTranslations.js";
-import { KEY_MORE_BUTTON as ue, ToolbarMeasurementStrip as he, actionKey as z } from "../../module/header-layout/ToolbarMeasurement.js";
-import { useIsTitleClamped as fe, useSearchFocus as pe, useStickyScrollPadding as xe, useStuckOnScroll as be } from "./PageHeader.hooks.js";
-import { useMemo as G, useRef as I } from "react";
-import { Fragment as ge, jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useMergeRefs as ve } from "@floating-ui/react";
-var we = 744, Ne = 8, Te = 32, Ae = 120, Le = (t) => {
-  const { badgeCount: s, ...i } = t, a = {
-    ...i,
-    canHideLabel: i.icon != null && i.canHideLabel !== !1
+import { planToolbarActions as ce } from "../../module/header-layout/planToolbarActions.js";
+import { ToolbarActionButton as de, ToolbarActionGroup as me } from "../../module/header-layout/ToolbarActionGroup.js";
+import { useToolbarTranslations as ue } from "../../module/header-layout/useTranslations.js";
+import { KEY_MORE_BUTTON as he, ToolbarMeasurementStrip as fe, actionKey as z } from "../../module/header-layout/ToolbarMeasurement.js";
+import { useIsTitleClamped as pe, useSearchFocus as xe, useStickyScrollPadding as ge, useStuckOnScroll as be } from "./PageHeader.hooks.js";
+import { useMemo as G, useRef as E } from "react";
+import { Fragment as ve, jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useMergeRefs as we } from "@floating-ui/react";
+var Ne = 744, Te = 8, Ae = 32, Le = 120, Me = (t) => {
+  const { badgeCount: r, ...o } = t, a = {
+    ...o,
+    canHideLabel: o.icon != null && o.canHideLabel !== !1
   };
-  if (s == null || a.render) return a;
-  const o = `${a.label} (${s})`;
+  if (r == null || a.render) return a;
+  const l = `${a.label} (${r})`;
   return {
     ...a,
-    label: o,
-    ariaLabel: o,
-    render: ({ showLabel: u }) => /* @__PURE__ */ l("span", {
-      className: "relative inline-flex",
-      children: [/* @__PURE__ */ e(ce, {
+    label: l,
+    ariaLabel: l,
+    render: ({ showLabel: u }) => /* @__PURE__ */ e(le, {
+      dataTest: `${a.dataTest ?? `page-header-action-${a.id}`}-badge`,
+      badgeContent: r,
+      statusMessage: l,
+      slotProps: { badge: { style: {
+        right: -8,
+        top: -4,
+        transform: "none"
+      } } },
+      children: /* @__PURE__ */ e(de, {
         action: {
           ...a,
-          ariaLabel: o
+          ariaLabel: l
         },
         showLabel: u
-      }), /* @__PURE__ */ e("span", {
-        "aria-hidden": !0,
-        className: "absolute -right-2 -top-1 flex h-5 min-w-[20px] items-center justify-center rounded-full border border-solid border-lime-500 bg-lime-300 px-1.5 text-sm font-semibold leading-5 text-gama-800",
-        "data-testid": `${a.dataTest ?? `page-header-action-${a.id}`}-badge`,
-        children: s
-      })]
+      })
     })
   };
 };
-function Me({ compact: t }) {
-  return /* @__PURE__ */ l("div", {
+function Pe({ compact: t }) {
+  return /* @__PURE__ */ s("div", {
     className: "flex w-full min-w-0 items-center justify-between gap-2",
     "aria-hidden": !0,
     children: [/* @__PURE__ */ e("div", { className: m("animate-pulse rounded bg-delta-100", t ? "h-6 w-3/5" : "h-8 w-2/5 max-w-[500px]") }), /* @__PURE__ */ e("div", { className: "h-10 w-14 shrink-0 animate-pulse rounded bg-delta-100" })]
   });
 }
-function Ge({ title: t, titleAs: s = "h1", titleDataTest: i, titleRef: a, subtitle: o, status: u, leading: h, onLeadingClick: P, leadingLabel: X, leadingSlot: W, actions: k = [], search: w, searchOpen: y = !1, onSearchClose: Y, searchCloseLabel: F, loading: f = !1, sticky: p = !1, locale: D = "en", className: U, dataTest: x = "page-header" }) {
-  const c = me(D), { ref: S, widthPx: N } = oe(), { register: b, widths: r } = re(), T = I(null), C = I(null), $ = I(null), n = N > 0 && N < we, V = ve([T, a]), A = y && w != null, g = f || A;
-  pe(w != null, y, $, T);
+function Ye({ title: t, titleAs: r = "h1", titleDataTest: o, titleRef: a, subtitle: l, status: u, leading: h, onLeadingClick: I, leadingLabel: X, leadingSlot: W, actions: k = [], search: w, searchOpen: y = !1, onSearchClose: Y, searchCloseLabel: F, loading: f = !1, sticky: p = !1, locale: D = "en", className: U, dataTest: x = "page-header" }) {
+  const c = ue(D), { ref: S, widthPx: N } = se(), { register: g, widths: i } = re(), T = E(null), C = E(null), B = E(null), n = N > 0 && N < Ne, V = we([T, a]), A = y && w != null, b = f || A;
+  xe(w != null, y, B, T);
   const v = be(p, C);
-  xe(p, S);
-  const Z = fe(T, t, !g), L = G(() => k.filter((d) => !d.hidden).map(Le), [k]), B = Math.max(0, N - Te), H = h != null || W != null, M = u != null, q = H ? r["slot:leading"] ?? 0 : 0, J = M ? r["slot:status"] ?? 0 : 0, Q = r.title ?? 0, ee = Math.max(Ae, Math.min(Q, Math.floor(B * 0.5))), te = 1 + (H ? 1 : 0) + (M ? 1 : 0), K = Math.max(0, B - q - J - ee - Ne * te), ae = G(() => se({
+  ge(p, S);
+  const Z = pe(T, t, !b), L = G(() => k.filter((d) => !d.hidden).map(Me), [k]), $ = Math.max(0, N - Ae), H = h != null || W != null, M = u != null, q = H ? i["slot:leading"] ?? 0 : 0, J = M ? i["slot:status"] ?? 0 : 0, Q = i.title ?? 0, ee = Math.max(Le, Math.min(Q, Math.floor($ * 0.5))), te = 1 + (H ? 1 : 0) + (M ? 1 : 0), K = Math.max(0, $ - q - J - ee - Te * te), ae = G(() => ce({
     actions: L,
     availableWidth: K,
     collapseLabels: !0,
-    resolveActionWidth: (d, _) => r[z(d.id, _)],
-    moreButtonWidthPx: r[ue]
+    resolveActionWidth: (d, R) => i[z(d.id, R)],
+    moreButtonWidthPx: i[he]
   }), [
     L,
     K,
-    r
-  ]), R = X ?? (h === "menu" ? c.menu : c.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(E, {
+    i
+  ]), P = X ?? (h === "menu" ? c.menu : c.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(_, {
     dataTest: `${x}-menu`,
     variant: "text",
     size: "large",
-    onClick: P,
-    "aria-label": R,
-    startIcon: /* @__PURE__ */ e(le, {
+    onClick: I,
+    "aria-label": P,
+    startIcon: /* @__PURE__ */ e(oe, {
       width: 24,
       height: 24
     })
-  }) : h === "back" ? /* @__PURE__ */ e(E, {
+  }) : h === "back" ? /* @__PURE__ */ e(_, {
     dataTest: `${x}-back`,
     variant: n ? "text" : "outlined",
     size: "large",
-    onClick: P,
-    "aria-label": n ? R : void 0,
+    onClick: I,
+    "aria-label": n ? P : void 0,
     startIcon: /* @__PURE__ */ e(ie, {
       width: n ? 24 : 20,
       height: n ? 24 : 20
     }),
-    children: n ? void 0 : R
-  }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(s, {
+    children: n ? void 0 : P
+  }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(r, {
     ref: V,
     tabIndex: -1,
-    "data-test": i,
-    "data-testid": i,
+    "data-test": o,
+    "data-testid": o,
     title: Z ? t : void 0,
     className: m("m-0 line-clamp-2 min-w-0 break-words font-semibold text-delta-800 outline-none", j ? "text-xl leading-7" : "text-2xl leading-8"),
     children: t
   });
-  return /* @__PURE__ */ l(ge, { children: [p && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ s(ve, { children: [p && /* @__PURE__ */ e("div", {
     ref: C,
     "aria-hidden": !0,
     className: "h-px w-full",
     style: { marginBottom: -1 }
-  }), /* @__PURE__ */ l("div", {
+  }), /* @__PURE__ */ s("div", {
     ref: S,
     "data-testid": x,
     "data-compact": n ? "true" : "false",
@@ -105,40 +108,40 @@ function Ge({ title: t, titleAs: s = "h1", titleDataTest: i, titleRef: a, subtit
     "aria-busy": f || void 0,
     className: m("flex w-full items-center gap-2 px-4", v ? "min-h-[56px] py-2 shadow-sm" : "min-h-[64px] py-3", p && "sticky top-0 z-30 bg-delta-50", U),
     children: [
-      /* @__PURE__ */ e(he, {
+      /* @__PURE__ */ e(fe, {
         actions: L,
-        register: b,
+        register: g,
         overflowMenuLabel: c.more,
         title: t,
         titleClassName: m("font-semibold", j ? "text-xl leading-7" : "text-2xl leading-8")
       }),
       O != null && /* @__PURE__ */ e("span", {
-        ref: b("slot:leading"),
+        ref: g("slot:leading"),
         className: "inline-flex shrink-0",
         children: O
       }),
-      /* @__PURE__ */ l("div", {
-        className: m(g ? "sr-only" : "flex min-w-0 flex-1 flex-col justify-center"),
-        children: [/* @__PURE__ */ l("div", {
+      /* @__PURE__ */ s("div", {
+        className: m(b ? "sr-only" : "flex min-w-0 flex-1 flex-col justify-center"),
+        children: [/* @__PURE__ */ s("div", {
           className: "flex min-w-0 items-center gap-2",
-          children: [ne, M && !g && /* @__PURE__ */ e("span", {
-            ref: b("slot:status"),
+          children: [ne, M && !b && /* @__PURE__ */ e("span", {
+            ref: g("slot:status"),
             className: "inline-flex shrink-0 items-center",
             children: u
           })]
-        }), !g && o != null && !v && /* @__PURE__ */ e("div", {
+        }), !b && l != null && !v && /* @__PURE__ */ e("div", {
           className: "mt-0.5 min-w-0 text-sm text-delta-700",
-          children: o
+          children: l
         })]
       }),
-      f && /* @__PURE__ */ e(Me, { compact: n }),
-      A && /* @__PURE__ */ l("div", {
-        ref: $,
+      f && /* @__PURE__ */ e(Pe, { compact: n }),
+      A && /* @__PURE__ */ s("div", {
+        ref: B,
         className: "flex w-full min-w-0 items-center gap-2",
         children: [/* @__PURE__ */ e("div", {
           className: "min-w-0 flex-1",
           children: w
-        }), /* @__PURE__ */ e(E, {
+        }), /* @__PURE__ */ e(_, {
           dataTest: `${x}-search-close`,
           variant: "text",
           size: "large",
@@ -146,14 +149,14 @@ function Ge({ title: t, titleAs: s = "h1", titleDataTest: i, titleRef: a, subtit
           children: F ?? c.close
         })]
       }),
-      !f && !A && /* @__PURE__ */ e(de, {
+      !f && !A && /* @__PURE__ */ e(me, {
         plan: ae,
         overflowMenuLabel: c.more,
-        registerActionWidth: (d, _) => b(z(d, _))
+        registerActionWidth: (d, R) => g(z(d, R))
       })
     ]
   })] });
 }
 export {
-  Ge as PageHeader
+  Ye as PageHeader
 };

package/dist/components/data-display/badge/StyledBadge.js

@@ -1,10 +1,11 @@
-import { resolveSx as n } from "../../../helpers/sx.js";
-import C from "clsx";
-import { jsx as O, jsxs as A } from "react/jsx-runtime";
-var c = {
+import { resolveSx as p } from "../../../helpers/sx.js";
+import E from "clsx";
+import { useEffect as L, useRef as u } from "react";
+import { jsx as m, jsxs as D } from "react/jsx-runtime";
+var b = {
   primary: {
-    backgroundColor: "var(--colors-gama-500)",
-    color: "#fff"
+    backgroundColor: "var(--colors-badge-background)",
+    color: "var(--colors-badge-label)"
   },
   default: {
     backgroundColor: "var(--colors-delta-200)",
@@ -30,29 +31,49 @@ var c = {
     backgroundColor: "var(--colors-warning-700)",
     color: "#fff"
   }
-}, L = {
+}, $ = {
   "top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2 origin-[100%_0%]",
   "top-left": "top-0 left-0 -translate-x-1/2 -translate-y-1/2 origin-[0%_0%]",
   "bottom-right": "bottom-0 right-0 translate-x-1/2 translate-y-1/2 origin-[100%_100%]",
   "bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 origin-[0%_100%]"
-}, i = "& .MuiBadge-badge", T = ({ color: f = "primary", dataTest: d, size: p = "medium", badgeContent: o, max: e = 99, showZero: m = !1, variant: x = "standard", invisible: u, anchorOrigin: l, children: g, className: b, sx: r, overlap: N, classes: $, slots: z, slotProps: a, component: B, ...v }) => {
-  const s = r && typeof r == "object" && !Array.isArray(r) ? r : {}, y = n(s[i]), h = n(Object.fromEntries(Object.entries(s).filter(([j]) => j !== i))), t = x === "dot", _ = !!u || !t && (o === 0 || o === void 0 || o === null) && !m, w = t ? null : typeof o == "number" && o > e ? `${e}+` : o, S = l?.vertical ?? "top", k = l?.horizontal ?? "right";
-  return /* @__PURE__ */ A("span", {
+}, x = "& .MuiBadge-badge", J = ({ color: l = "primary", dataTest: v, size: s = "medium", badgeContent: r, max: z, showZero: I, variant: y = "standard", statusMessage: n, invisible: g, anchorOrigin: c, children: h, className: _, sx: t, overlap: T, classes: Z, slots: G, slotProps: i, component: H, tabIndex: W, ...S }) => {
+  const a = u(null), e = typeof r == "number" ? r : void 0, d = u(e);
+  L(() => {
+    e !== d.current && (d.current = e, a.current && (a.current.textContent = n ?? ""));
+  }, [e, n]);
+  const f = t && typeof t == "object" && !Array.isArray(t) ? t : {}, w = p(f[x]), k = p(Object.fromEntries(Object.entries(f).filter(([B]) => B !== x))), o = y === "dot", j = !!g || !o && (r === 0 || r === void 0 || r === null), O = o ? null : typeof r == "number" && r > 99 ? "99+" : r, A = typeof r == "number" && r > 0 && r < 10, C = c?.vertical ?? "top", N = c?.horizontal ?? "right", R = l === "primary" ? {
+    borderColor: o ? "var(--colors-badge-border-dot)" : "var(--colors-badge-border-count)",
+    borderStyle: "solid",
+    borderWidth: o ? "var(--border-badge-dot)" : "var(--border-badge-count)"
+  } : {};
+  return /* @__PURE__ */ D("span", {
     className: "relative inline-flex shrink-0 align-middle",
-    "data-testid": d,
-    style: h,
-    ...v,
-    children: [g, !_ && /* @__PURE__ */ O("span", {
-      className: C("absolute z-[1] box-border flex flex-row flex-wrap content-center items-center justify-center whitespace-nowrap font-roboto font-semibold leading-none", L[`${S}-${k}`], t ? "h-[8px] w-[8px] min-w-[8px] rounded-full p-0" : p === "small" ? "h-[16px] w-max min-w-[16px] rounded-[20px] px-[4px] text-[0.75rem]" : "h-[20px] min-w-[20px] rounded-[20px] px-[6px] text-sm", b, a?.badge?.className),
-      style: {
-        ...c[f] ?? c.default,
-        ...y,
-        ...a?.badge?.style
-      },
-      children: w
-    })]
+    "data-testid": v,
+    style: k,
+    ...S,
+    children: [
+      h,
+      !j && /* @__PURE__ */ m("span", {
+        "aria-hidden": "true",
+        className: E("absolute z-[1] box-border flex items-center justify-center whitespace-nowrap font-roboto font-semibold", $[`${C}-${N}`], o ? "h-[12px] w-[12px] min-w-[12px] rounded-full p-0" : s === "small" ? "h-[16px] w-max min-w-[16px] rounded-[20px] px-[4px] text-[0.75rem]" : "h-[20px] min-w-[20px] rounded-[20px] px-[6px] text-sm leading-5", !o && s === "medium" && A && "w-[20px]", _, i?.badge?.className),
+        style: {
+          ...b[l] ?? b.default,
+          ...R,
+          ...w,
+          ...i?.badge?.style
+        },
+        children: O
+      }),
+      /* @__PURE__ */ m("span", {
+        ref: a,
+        "aria-atomic": "true",
+        "aria-live": "polite",
+        className: "sr-only",
+        role: "status"
+      })
+    ]
   });
 };
 export {
-  T as StyledBadge
+  J as StyledBadge
 };

package/dist/src/components/data-display/badge/StyledBadge.d.ts

@@ -2,19 +2,23 @@ import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
 type StyledBadgeSize = 'medium' | 'small';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15181-43817
- * Figma "Badge". Number badge = solid gama-500 pill, white Helper-Semibold 14px (h20/px6/r20);
- * `dot` variant = 8px dot (Unread/Filters). `color` selects the badge palette (primary→teal number
- * badge, error→soft error-100/error-600); other colors are app extensions with no Figma type.
+ * Figma "Badge". Notification count = 20px lime pill with a 1px border and Helper-Semibold 14/20;
+ * `dot` = 12px lime circle with a stronger 2px border. Other colors and `small` are legacy app
+ * extensions with no matching Figma notification variant.
  */
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** @figmaProp Badge content (the number/label) */
     badgeContent?: ReactNode;
-    /** @figmaProp Type/colour = primary→number badge (gama-500) | error→error-100/600 | others = app */
+    /** @figmaProp Type/colour = primary→notification badge | others = legacy app extensions */
     color?: string;
+    /** @deprecated Notification badges always cap at 99. */
     max?: number;
+    /** @deprecated A zero notification count is always omitted. */
     showZero?: boolean;
-    /** @figmaProp Type = dot→"Unread/Filters" (8px) | standard→number badge */
+    /** @figmaProp Size = dot→"Dot" (12px) | standard→"Default" count badge */
     variant?: 'standard' | 'dot';
+    /** Polite live-update text. Keep this contextual and include the real, uncapped count. */
+    statusMessage?: string;
     invisible?: boolean;
     anchorOrigin?: {
         vertical: 'top' | 'bottom';
@@ -42,5 +46,5 @@ type StyledBadgeProps = BadgeProps & {
  * The established styling API `sx={{ '& .MuiBadge-badge': {...} }}` is preserved by extracting that
  * slot and applying `resolveSx` to the badge span (DEC-007 slot-sx). Signature unchanged (DEC-003).
  */
-export declare const StyledBadge: ({ color, dataTest, size, badgeContent, max, showZero, variant, invisible, anchorOrigin, children, className, sx, overlap: _overlap, classes: _classes, slots: _slots, slotProps, component: _component, ...props }: StyledBadgeProps) => JSX.Element;
+export declare const StyledBadge: ({ color, dataTest, size, badgeContent, max: _max, showZero: _showZero, variant, statusMessage, invisible, anchorOrigin, children, className, sx, overlap: _overlap, classes: _classes, slots: _slots, slotProps, component: _component, tabIndex: _tabIndex, ...props }: StyledBadgeProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.81.5",
+    "version": "3.82.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/color-variables/rootVariables.css

@@ -85,6 +85,14 @@
     --colors-lime-500: #beda2f;
     --colors-lime-700: #8ba01d;
 
+    /* Figma Badge semantic tokens are shared by all three ASMA themes. */
+    --colors-badge-background: #d9f256;
+    --colors-badge-label: #404d00;
+    --colors-badge-border-count: #a2c200;
+    --colors-badge-border-dot: #778f00;
+    --border-badge-count: 1px;
+    --border-badge-dot: 2px;
+
     --colors-success-50: #e9fbf0;
     --colors-success-100: #d3f8e1;
     --colors-success-300: #a1ebbd;