asma-ui-core 3.99.0 → 3.100.1

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

@@ -1,8 +1,8 @@
-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 = {
+import { resolveSx as v } from "../../../helpers/sx.js";
+import g from "clsx";
+import { useEffect as I, useRef as y } from "react";
+import { jsx as h, jsxs as T } from "react/jsx-runtime";
+var _ = {
   primary: {
     backgroundColor: "var(--colors-badge-background)",
     color: "var(--colors-badge-label)"
@@ -31,41 +31,43 @@ var b = {
     backgroundColor: "var(--colors-warning-700)",
     color: "#fff"
   }
-}, $ = {
+}, Z = {
   "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%]"
-}, 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)",
+}, w = "& .MuiBadge-badge", U = ({ color: s = "primary", dataTest: S, size: i = "medium", badgeContent: o, max: G, showZero: H, variant: k = "standard", purpose: j = "notification", statusMessage: c, invisible: A, anchorOrigin: d, children: f, className: u, sx: e, overlap: W, classes: X, slots: Y, slotProps: m, component: q, tabIndex: F, ...p }) => {
+  const l = y(null), a = typeof o == "number" ? o : void 0, b = y(a);
+  I(() => {
+    a !== b.current && (b.current = a, l.current && (l.current.textContent = c ?? ""));
+  }, [a, c]);
+  const x = e && typeof e == "object" && !Array.isArray(e) ? e : {}, C = v(x[w]), O = v(Object.fromEntries(Object.entries(x).filter(([z]) => z !== w))), r = k === "dot", n = r && j !== "notification", t = r && f === void 0, R = !!A || !r && (o === 0 || o === void 0 || o === null), D = r ? null : typeof o == "number" && o > 99 ? "99+" : o, B = typeof o == "number" && o > 0 && o < 10, E = d?.vertical ?? "top", L = d?.horizontal ?? "right", N = s === "primary" && !n ? {
+    borderColor: r ? "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": v,
-    style: k,
-    ...S,
+    borderWidth: r ? "var(--border-badge-dot)" : "var(--border-badge-count)"
+  } : {}, $ = t && p["aria-label"] ? { role: "img" } : {};
+  return /* @__PURE__ */ T("span", {
+    className: t ? g("inline-flex shrink-0 align-middle", u) : "relative inline-flex shrink-0 align-middle",
+    "data-testid": S,
+    style: O,
+    ...$,
+    ...p,
     children: [
-      h,
-      !j && /* @__PURE__ */ m("span", {
+      f,
+      !R && /* @__PURE__ */ h("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),
+        className: g("box-border flex items-center justify-center whitespace-nowrap font-roboto font-semibold", !t && "absolute z-[1]", !t && Z[`${E}-${L}`], n ? "h-[8px] w-[8px] min-w-[8px] rounded-full p-0" : r ? "h-[12px] w-[12px] min-w-[12px] rounded-full p-0" : i === "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", !r && i === "medium" && B && "w-[20px]", !t && u, m?.badge?.className),
         style: {
-          ...b[l] ?? b.default,
-          ...R,
-          ...w,
-          ...i?.badge?.style
+          ..._[s] ?? _.default,
+          ...n ? { backgroundColor: "var(--colors-gama-500)" } : {},
+          ...N,
+          ...C,
+          ...m?.badge?.style
         },
-        children: O
+        children: D
       }),
-      /* @__PURE__ */ m("span", {
-        ref: a,
+      /* @__PURE__ */ h("span", {
+        ref: l,
         "aria-atomic": "true",
         "aria-live": "polite",
         className: "sr-only",
@@ -75,5 +77,5 @@ var b = {
   });
 };
 export {
-  J as StyledBadge
+  U as StyledBadge
 };

package/dist/components/utils/filter-menu/StyledFilterButton.js

@@ -1,26 +1,32 @@
-import { FilterIcon as d } from "../../icons/filter-icon/FilterIcon.js";
-import { StyledButton as c } from "../../inputs/button/StyledButton.js";
-import { useDynamicToolbarLayout as s } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
-import g from "clsx";
-import { Fragment as h, jsx as r, jsxs as u } from "react/jsx-runtime";
-var F = ({ filterIsActive: i, label: o, hideLabel: l, size: t = "large", variant: a = "outlined", ...n }) => {
-  const { filterIconOnly: m } = s(), e = l ?? m;
-  return /* @__PURE__ */ r(h, { children: /* @__PURE__ */ u("div", {
+import { StyledBadge as m } from "../../data-display/badge/StyledBadge.js";
+import { FilterIcon as c } from "../../icons/filter-icon/FilterIcon.js";
+import { StyledButton as s } from "../../inputs/button/StyledButton.js";
+import { useDynamicToolbarLayout as p } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
+import f from "clsx";
+import { Fragment as u, jsx as r, jsxs as g } from "react/jsx-runtime";
+var B = ({ filterIsActive: i, label: o, hideLabel: l, size: t = "large", variant: a = "outlined", ...n }) => {
+  const { filterIconOnly: d } = p(), e = l ?? d;
+  return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ g("div", {
     className: "relative h-fit w-fit",
-    children: [/* @__PURE__ */ r(c, {
+    children: [/* @__PURE__ */ r(s, {
       ...n,
       type: "button",
       "aria-label": e ? o ?? "Filter" : void 0,
-      startIcon: /* @__PURE__ */ r(d, {
+      startIcon: /* @__PURE__ */ r(c, {
         width: t === "large" ? 24 : 20,
         height: t === "large" ? 24 : 20
       }),
       variant: a,
       size: t,
       children: !e && (o ?? "Filter")
-    }), i && /* @__PURE__ */ r("div", { className: g("absolute h-2 w-2 rounded-full bg-gama-400", t === "large" ? "right-2 top-2" : "right-1 top-1") })]
+    }), i && /* @__PURE__ */ r(m, {
+      dataTest: "filter-button-active-dot",
+      variant: "dot",
+      purpose: "filter",
+      className: f("absolute", t === "large" ? "right-2 top-2" : "right-1 top-1")
+    })]
   }) });
 };
 export {
-  F as StyledFilterButton
+  B as StyledFilterButton
 };

package/dist/components/utils/filter-menu/StyledFilterMenu.js

@@ -1,12 +1,13 @@
+import { StyledBadge as O } from "../../data-display/badge/StyledBadge.js";
 import { FilterIcon as b } from "../../icons/filter-icon/FilterIcon.js";
-import { StyledButton as v } from "../../inputs/button/StyledButton.js";
-import { StyledPopover as E } from "../popover/StyledPopover.js";
-import { useDynamicToolbarLayout as F } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
-import k from "clsx";
-import c, { useState as x } from "react";
-import { Fragment as C, jsx as e, jsxs as y } from "react/jsx-runtime";
-var I = () => {
-  const [r, t] = x(null), s = (a) => {
+import { StyledButton as E } from "../../inputs/button/StyledButton.js";
+import { StyledPopover as F } from "../popover/StyledPopover.js";
+import { useDynamicToolbarLayout as k } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
+import x from "clsx";
+import s, { useState as C } from "react";
+import { Fragment as I, jsx as c, jsxs as y } from "react/jsx-runtime";
+var S = () => {
+  const [r, t] = C(null), e = (a) => {
     const o = a.currentTarget;
     t(o);
   }, l = () => {
@@ -16,38 +17,43 @@ var I = () => {
     anchorEl: r,
     onClose: l,
     onAnchorClick: (a) => {
-      r ? l() : s(a);
+      r ? l() : e(a);
     }
   };
-}, N = (r) => c.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), $ = ({ filterIsActive: r, popoverContent: t, dataTest: s, disabled: l, size: i = "large", variant: a = "outlined", popoverProps: o, anchorNode: h, label: d, hideLabel: A }) => {
-  const { onAnchorClick: u, onClose: m, anchorEl: n } = I(), { filterIconOnly: O } = F(), g = A ?? O, f = h?.({
-    isOpen: !!n,
+}, N = (r) => s.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), D = ({ filterIsActive: r, popoverContent: t, dataTest: e, disabled: l, size: n = "large", variant: a = "outlined", popoverProps: o, anchorNode: d, label: h, hideLabel: v }) => {
+  const { onAnchorClick: u, onClose: m, anchorEl: i } = S(), { filterIconOnly: A } = k(), g = v ?? A, f = d?.({
+    isOpen: !!i,
     onClose: m
-  }), p = c.useId();
-  return /* @__PURE__ */ y(C, { children: [/* @__PURE__ */ y("div", {
+  }), p = s.useId();
+  return /* @__PURE__ */ y(I, { children: [/* @__PURE__ */ y("div", {
     className: "relative h-fit w-fit",
-    children: [h && c.isValidElement(f) ? c.cloneElement(f, { onClick: u }) : /* @__PURE__ */ e(v, {
+    children: [d && s.isValidElement(f) ? s.cloneElement(f, { onClick: u }) : /* @__PURE__ */ c(E, {
       type: "button",
       disabled: l,
       variant: a,
-      startIcon: /* @__PURE__ */ e(b, {
-        width: i === "large" ? 24 : 20,
-        height: i === "large" ? 24 : 20
+      startIcon: /* @__PURE__ */ c(b, {
+        width: n === "large" ? 24 : 20,
+        height: n === "large" ? 24 : 20
       }),
       onClick: u,
-      size: i,
-      dataTest: s,
-      "aria-label": g ? d ?? "Filter" : void 0,
+      size: n,
+      dataTest: e,
+      "aria-label": g ? h ?? "Filter" : void 0,
       "aria-haspopup": "true",
-      "aria-expanded": !!n,
-      "aria-controls": n ? p : void 0,
-      children: !g && (d ?? "Filter")
-    }), r && /* @__PURE__ */ e("div", { className: k("absolute h-2 w-2 rounded-full bg-gama-400", i === "large" ? "right-2 top-2" : "right-1 top-1") })]
-  }), /* @__PURE__ */ e(E, {
+      "aria-expanded": !!i,
+      "aria-controls": i ? p : void 0,
+      children: !g && (h ?? "Filter")
+    }), r && /* @__PURE__ */ c(O, {
+      dataTest: `${e}-active-dot`,
+      variant: "dot",
+      purpose: "filter",
+      className: x("absolute", n === "large" ? "right-2 top-2" : "right-1 top-1")
+    })]
+  }), /* @__PURE__ */ c(F, {
     ...o,
     id: p,
-    open: !!n,
-    anchorEl: n,
+    open: !!i,
+    anchorEl: i,
     onClose: m,
     anchorOrigin: o?.anchorOrigin ?? {
       vertical: "bottom",
@@ -59,11 +65,11 @@ var I = () => {
     },
     className: o?.className ?? "my-1",
     children: N(t) ? t : t({
-      isOpen: !!n,
+      isOpen: !!i,
       onClose: m
     })
   })] });
 };
 export {
-  $ as StyledFilterMenu
+  D as StyledFilterMenu
 };

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

@@ -1,10 +1,19 @@
 import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
 type StyledBadgeSize = 'medium' | 'small';
+/** Figma's `Parent` axis. It sets the dot's size and fill together, which is why it is not a colour. */
+type StyledBadgePurpose = 'notification' | 'unread' | 'filter';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15181-43817
  * 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.
+ *
+ * Pass children to decorate them — the badge anchors to their corner. Pass none and a `dot` becomes
+ * a flow element (Figma `Size=Dot`, node 44267-214524), for a table cell or a marker in a row, and
+ * `className` then applies to the badge's own root so the caller can place it.
+ *
+ * `purpose` selects Figma's `Parent`: the default notification dot, or the 8px solid primary dot
+ * that marks something unread or a filter as active.
  */
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** @figmaProp Badge content (the number/label) */
@@ -15,8 +24,17 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     max?: number;
     /** @deprecated A zero notification count is always omitted. */
     showZero?: boolean;
-    /** @figmaProp Size = dot→"Dot" (12px) | standard→"Default" count badge */
+    /**
+     * @figmaProp Size = dot→"Dot" (12px) | standard→"Default" count badge
+     * A `dot` with no children renders in normal flow rather than anchored to a corner.
+     */
     variant?: 'standard' | 'dot';
+    /**
+     * @figmaProp Parent = notification→the lime ringed dot | unread/filter→an 8px solid primary dot
+     * `unread` and `filter` are the same mark in Figma and differ only in meaning. Dots only: a
+     * count badge is always the notification pill.
+     */
+    purpose?: StyledBadgePurpose;
     /** Polite live-update text. Keep this contextual and include the real, uncapped count. */
     statusMessage?: string;
     invisible?: boolean;
@@ -46,5 +64,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: _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 declare const StyledBadge: ({ color, dataTest, size, badgeContent, max: _max, showZero: _showZero, variant, purpose, statusMessage, invisible, anchorOrigin, children, className, sx, overlap: _overlap, classes: _classes, slots: _slots, slotProps, component: _component, tabIndex: _tabIndex, ...props }: StyledBadgeProps) => JSX.Element;
 export {};

package/dist/src/components/utils/filter-menu/StyledFilterButton.d.ts

@@ -2,7 +2,7 @@ import { StyledButtonProps } from '../../inputs/button';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16741-35884 (Design-System · "Filter button") — button-only variant
  * of `StyledFilterMenu` (no popover). Aligned `StyledButton` (Outlined) + the "Filters applied" badge:
- * an 8px `gama-400` dot at top-right when `filterIsActive`.
+ * Figma's `Parent=Filter` dot at top-right when `filterIsActive`.
  *
  * Custom props:
  * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made

package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts

@@ -4,8 +4,8 @@ import { StyledPopoverProps } from '../popover';
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16741-35884 (Design-System · "Filter button")
  *
  * Composes the aligned `StyledButton` (Secondary/Outlined, filter icon 24/20) + `StyledPopover`
- * (Menus surface). `filterIsActive` shows the DS "Filters applied" badge — an 8px `gama-400` dot at
- * top-right. No own styling beyond that dot; all visuals come from the aligned primitives.
+ * (Menus surface). `filterIsActive` shows the DS "Filters applied" badge — Figma's `Parent=Filter`
+ * dot at top-right. No own styling beyond that dot; all visuals come from the aligned primitives.
  *
  * Custom props:
  * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made

package/package.json

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