@mond-design-system/react 4.5.0 → 4.6.1

package/dist/index.d.cts

@@ -859,8 +859,14 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
     description?: ReactNode;
     /** Slot before the text — Avatar, Icon, … */
     leading?: ReactNode;
-    /** Slot after the text — Badge, chevron, … */
+    /** Slot after the text — Badge, chevron, … Inside the row's hit target, so
+        it is for things that are read, not pressed. */
     trailing?: ReactNode;
+    /** Controls of the row's own, beside it rather than in it. A roster row
+        navigates to the member and carries an add/remove button: put that in
+        `trailing` and it is a button inside the link. This slot sits outside
+        the hit target, where a second control can be reached. */
+    actions?: ReactNode;
     /** Makes the whole row a button. */
     onClick?: () => void;
     /** Marks an onClick row as a toggle — a picker row that selects rather than
@@ -886,7 +892,7 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
  * One row. Static by default; interactive as one whole-row button/link.
  * An `<li>` inside a ListGroup, a standalone `<div>` row anywhere else.
  */
-declare function ListItem({ title, description, leading, trailing, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
+declare function ListItem({ title, description, leading, trailing, actions, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
 
 interface EmptyStateProps {
     title: string;
@@ -1002,7 +1008,7 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
-type StackGap = "hairline" | "tight" | "base" | "loose" | "section";
+type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
 interface StackProps extends HTMLAttributes<HTMLElement> {
     /** Space between children, on the gap scale. Default "base". */

package/dist/index.d.ts

@@ -859,8 +859,14 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
     description?: ReactNode;
     /** Slot before the text — Avatar, Icon, … */
     leading?: ReactNode;
-    /** Slot after the text — Badge, chevron, … */
+    /** Slot after the text — Badge, chevron, … Inside the row's hit target, so
+        it is for things that are read, not pressed. */
     trailing?: ReactNode;
+    /** Controls of the row's own, beside it rather than in it. A roster row
+        navigates to the member and carries an add/remove button: put that in
+        `trailing` and it is a button inside the link. This slot sits outside
+        the hit target, where a second control can be reached. */
+    actions?: ReactNode;
     /** Makes the whole row a button. */
     onClick?: () => void;
     /** Marks an onClick row as a toggle — a picker row that selects rather than
@@ -886,7 +892,7 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
  * One row. Static by default; interactive as one whole-row button/link.
  * An `<li>` inside a ListGroup, a standalone `<div>` row anywhere else.
  */
-declare function ListItem({ title, description, leading, trailing, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
+declare function ListItem({ title, description, leading, trailing, actions, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
 
 interface EmptyStateProps {
     title: string;
@@ -1002,7 +1008,7 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
-type StackGap = "hairline" | "tight" | "base" | "loose" | "section";
+type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
 interface StackProps extends HTMLAttributes<HTMLElement> {
     /** Space between children, on the gap scale. Default "base". */

package/dist/index.js

@@ -658,7 +658,7 @@ function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
 }
 function SheetHeader({ children, onClose, closeLabel }) {
   return /* @__PURE__ */ jsxs("div", { className: Sheet_module_default.header, children: [
-    /* @__PURE__ */ jsx("span", { className: Sheet_module_default.headerTitle, children }),
+    /* @__PURE__ */ jsx("h2", { className: Sheet_module_default.headerTitle, children }),
     onClose !== void 0 && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": closeLabel, className: Sheet_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsx(CloseGlyph, { className: Sheet_module_default.closeGlyph }) })
   ] });
 }
@@ -1324,7 +1324,7 @@ function SearchField({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped
-var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
+var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "withActions": "mds-List__withActions", "actions": "mds-List__actions", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
 var ListGroupContext = createContext(false);
 function ListGroup({ label, className, ...rest }) {
   const headingId = useId();
@@ -1347,6 +1347,7 @@ function ListItem({
   description,
   leading,
   trailing,
+  actions,
   onClick,
   pressed,
   href,
@@ -1368,22 +1369,30 @@ function ListItem({
     ] }),
     trailing != null && /* @__PURE__ */ jsx("span", { className: List_module_default.trailing, children: trailing })
   ] });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Root,
     {
-      className: cx(List_module_default.item, resolved && List_module_default[`surface-${resolved}`], className),
+      className: cx(
+        List_module_default.item,
+        actions != null && List_module_default.withActions,
+        resolved && List_module_default[`surface-${resolved}`],
+        className
+      ),
       ref,
       ...rest,
-      children: href !== void 0 ? /* @__PURE__ */ jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: cx(List_module_default.row, List_module_default.interactive),
-          onClick,
-          "aria-pressed": pressed,
-          children: content
-        }
-      ) : /* @__PURE__ */ jsx("span", { className: List_module_default.row, children: content })
+      children: [
+        href !== void 0 ? /* @__PURE__ */ jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(List_module_default.row, List_module_default.interactive),
+            onClick,
+            "aria-pressed": pressed,
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: List_module_default.row, children: content }),
+        actions != null && /* @__PURE__ */ jsx("span", { className: List_module_default.actions, children: actions })
+      ]
     }
   );
 }
@@ -1566,7 +1575,7 @@ function ToastProvider({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Stack/Stack.module.css?mds-scoped
-var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
+var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-group": "mds-Stack__gap-group", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
 function Stack({
@@ -1659,7 +1668,7 @@ function CardFooter({ className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped
-var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
+var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "headerTitle": "mds-Modal__headerTitle", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
 function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog", children }) {
   return /* @__PURE__ */ jsx(
     Overlay,
@@ -1676,7 +1685,7 @@ function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog"
   );
 }
 function ModalHeader({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: Modal_module_default.header, children });
+  return /* @__PURE__ */ jsx("div", { className: Modal_module_default.header, children: /* @__PURE__ */ jsx("h2", { className: Modal_module_default.headerTitle, children }) });
 }
 function ModalBody({ children }) {
   return /* @__PURE__ */ jsx("div", { className: Modal_module_default.body, children });