@mond-design-system/react 4.2.0 → 4.4.0

package/dist/index.d.cts

@@ -44,13 +44,15 @@ interface TextProps extends HTMLAttributes<HTMLElement> {
  */
 declare function Text({ variant, as, tone, align, truncate, className, ...rest }: TextProps): ReactElement;
 
-type HeadingVariant = "display" | "title" | "subtitle";
+type HeadingVariant = "display" | "title" | "subtitle" | "label";
 type HeadingLevel = 1 | 2 | 3 | 4;
 type HeadingTone = "primary" | "secondary" | "inverse" | "accent" | "on-media";
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Document outline level → h1–h4, with a matching default type role. Default 2. */
     level?: HeadingLevel;
-    /** Type role override — outline level and visual size are separate concerns. */
+    /** Type role override — outline level and visual size are separate concerns.
+        `label` is the small one: a rail beside the page, a group inside a form —
+        a title that names its section without competing with the page's own. */
     variant?: HeadingVariant;
     tone?: HeadingTone;
 }
@@ -1076,7 +1078,10 @@ interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
     onClick?: () => void;
     /** Makes the whole card a link. Wins over onClick. */
     href?: string;
-    /** Element override for that link, e.g. a router's Link. */
+    /** Element override for the root. With href, the link element — a router's
+        Link. Without one, what the card is in the outline: a <section> that names
+        itself, an <article> holding a post. No wrapper can supply that from
+        outside, since the wrapper is not the card. Default div. */
     as?: ElementType;
     /** The root is an `<a>`, a `<button>` or a `<div>` depending on the props,
         so the ref is typed to what all three are. */

package/dist/index.d.ts

@@ -44,13 +44,15 @@ interface TextProps extends HTMLAttributes<HTMLElement> {
  */
 declare function Text({ variant, as, tone, align, truncate, className, ...rest }: TextProps): ReactElement;
 
-type HeadingVariant = "display" | "title" | "subtitle";
+type HeadingVariant = "display" | "title" | "subtitle" | "label";
 type HeadingLevel = 1 | 2 | 3 | 4;
 type HeadingTone = "primary" | "secondary" | "inverse" | "accent" | "on-media";
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Document outline level → h1–h4, with a matching default type role. Default 2. */
     level?: HeadingLevel;
-    /** Type role override — outline level and visual size are separate concerns. */
+    /** Type role override — outline level and visual size are separate concerns.
+        `label` is the small one: a rail beside the page, a group inside a form —
+        a title that names its section without competing with the page's own. */
     variant?: HeadingVariant;
     tone?: HeadingTone;
 }
@@ -1076,7 +1078,10 @@ interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
     onClick?: () => void;
     /** Makes the whole card a link. Wins over onClick. */
     href?: string;
-    /** Element override for that link, e.g. a router's Link. */
+    /** Element override for the root. With href, the link element — a router's
+        Link. Without one, what the card is in the outline: a <section> that names
+        itself, an <article> holding a post. No wrapper can supply that from
+        outside, since the wrapper is not the card. Default div. */
     as?: ElementType;
     /** The root is an `<a>`, a `<button>` or a `<div>` depending on the props,
         so the ref is typed to what all three are. */

package/dist/index.js

@@ -48,7 +48,7 @@ function Text({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Heading/Heading.module.css?mds-scoped
-var Heading_module_default = { "heading": "mds-Heading__heading", "variant-display": "mds-Heading__variant-display", "variant-title": "mds-Heading__variant-title", "variant-subtitle": "mds-Heading__variant-subtitle", "tone-primary": "mds-Heading__tone-primary", "tone-secondary": "mds-Heading__tone-secondary", "tone-inverse": "mds-Heading__tone-inverse", "tone-accent": "mds-Heading__tone-accent", "tone-on-media": "mds-Heading__tone-on-media" };
+var Heading_module_default = { "heading": "mds-Heading__heading", "variant-display": "mds-Heading__variant-display", "variant-title": "mds-Heading__variant-title", "variant-subtitle": "mds-Heading__variant-subtitle", "variant-label": "mds-Heading__variant-label", "tone-primary": "mds-Heading__tone-primary", "tone-secondary": "mds-Heading__tone-secondary", "tone-inverse": "mds-Heading__tone-inverse", "tone-accent": "mds-Heading__tone-accent", "tone-on-media": "mds-Heading__tone-on-media" };
 
 // src/components/Heading/Heading.tsx
 var LEVEL_VARIANT = {
@@ -1521,34 +1521,42 @@ function ToastProvider({
   const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs("div", { role: "status", className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]), children: [
-      /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
-        /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
-        entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
-      ] }),
-      entry.action !== void 0 && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: Toast_module_default.action,
-          onClick: () => {
-            entry.action?.onClick();
-            dismiss(entry.id);
-          },
-          children: entry.action.label
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": `${dismissLabel}: ${entry.title}`,
-          className: Toast_module_default.close,
-          onClick: () => dismiss(entry.id),
-          children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
-        }
-      )
-    ] }, entry.id)) })
+    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: entry.tone === "danger" ? "alert" : "status",
+        className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
+            /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
+            entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
+          ] }),
+          entry.action !== void 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Toast_module_default.action,
+              onClick: () => {
+                entry.action?.onClick();
+                dismiss(entry.id);
+              },
+              children: entry.action.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${dismissLabel}: ${entry.title}`,
+              className: Toast_module_default.close,
+              onClick: () => dismiss(entry.id),
+              children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
+            }
+          )
+        ]
+      },
+      entry.id
+    )) })
   ] });
 }
 
@@ -1616,8 +1624,8 @@ var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Car
 function Card({ children, variant = "card", emphasis = false, onClick, href, as, className, ref, ...rest }) {
   const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
   if (href !== void 0) {
-    const Element = as ?? "a";
-    return /* @__PURE__ */ jsx(Element, { className: cx(cardClass, Card_module_default.interactive), href, ref, ...rest, children });
+    const Element2 = as ?? "a";
+    return /* @__PURE__ */ jsx(Element2, { className: cx(cardClass, Card_module_default.interactive), href, ref, ...rest, children });
   }
   if (onClick !== void 0) {
     return /* @__PURE__ */ jsx(
@@ -1632,7 +1640,8 @@ function Card({ children, variant = "card", emphasis = false, onClick, href, as,
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: cardClass, ref, ...rest, children });
+  const Element = as ?? "div";
+  return /* @__PURE__ */ jsx(Element, { className: cardClass, ref, ...rest, children });
 }
 function CardHeader({ className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { className: cx(Card_module_default.header, className), ...rest });