@mond-design-system/react 4.9.0 → 4.10.2

package/dist/index.cjs

@@ -150,6 +150,8 @@ function Button({
   children,
   ...rest
 }) {
+  const glyph = iconOnly && children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children }) : children;
+  const body = loading && iconOnly ? null : glyph;
   const Element = as ?? (href !== void 0 ? "a" : "button");
   const isButton = Element === "button";
   const own = isButton ? { type, disabled: disabled || loading } : { href };
@@ -171,7 +173,7 @@ function Button({
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
-        children,
+        body,
         !loading && iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
@@ -385,10 +387,10 @@ function CountButton({
   );
 }
 function CloseGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
 }
 function ChevronLeftGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M10 3l-5 5 5 5",
@@ -401,7 +403,7 @@ function ChevronLeftGlyph({ className }) {
   ) });
 }
 function ChevronRightGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M6 3l5 5-5 5",
@@ -414,7 +416,7 @@ function ChevronRightGlyph({ className }) {
   ) });
 }
 function Magnifier({ className, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "4.25" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.2 10.2L14 14" }),
     children
@@ -427,35 +429,35 @@ function ZoomOutGlyph({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Magnifier, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.75 7h4.5" }) });
 }
 function PlayGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
 }
 function PauseGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
 }
 function Speaker() {
   return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6.25h2.25L8 3.4v9.2L4.75 9.75H2.5z", fill: "currentColor", stroke: "none" });
 }
 function VolumeGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 5.75a3.25 3.25 0 010 4.5" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 3.9a5.75 5.75 0 010 8.2" })
   ] }) });
 }
 function VolumeOffGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.75 6.25l3.5 3.5M14.25 6.25l-3.5 3.5" })
   ] }) });
 }
 function CaptionsGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1.75", y: "3.25", width: "12.5", height: "9.5", rx: "2" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.25 6.75a2 2 0 100 2.5M11.25 6.75a2 2 0 100 2.5" })
   ] }) });
 }
 function FullscreenGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M6 2.5H2.5V6M10 2.5h3.5V6M6 13.5H2.5V10M10 13.5h3.5V10",
@@ -468,7 +470,7 @@ function FullscreenGlyph({ className }) {
   ) });
 }
 function FullscreenExitGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M2.5 6H6V2.5M13.5 6H10V2.5M2.5 10H6v3.5M13.5 10H10v3.5",
@@ -503,7 +505,15 @@ function Field({ label, children, hint, error, required = false, className }) {
         children
       }
     ),
-    message && /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageId, className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error), children: message })
+    message && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: messageId,
+        role: error !== void 0 ? "alert" : void 0,
+        className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error),
+        children: message
+      }
+    )
   ] });
 }
 
@@ -1353,6 +1363,85 @@ function SearchField({
   ] });
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
+var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
+var STEP = 0.8;
+function Scroller({
+  title,
+  labels,
+  level = 2,
+  action,
+  children,
+  className,
+  ...rest
+}) {
+  const track = react.useRef(null);
+  const titleId = react.useId();
+  const [atStart, setAtStart] = react.useState(true);
+  const [atEnd, setAtEnd] = react.useState(true);
+  const measure = react.useCallback(() => {
+    const row = track.current;
+    if (row === null) return;
+    setAtStart(row.scrollLeft <= 0);
+    setAtEnd(row.scrollLeft + row.clientWidth >= row.scrollWidth - 1);
+  }, []);
+  react.useEffect(measure);
+  react.useEffect(() => {
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+  const step = (direction) => {
+    const row = track.current;
+    if (row === null) return;
+    row.scrollBy({ left: direction * Math.round(row.clientWidth * STEP) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx(Scroller_module_default.scroller, className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level, variant: "label", id: titleId, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.trailing, children: [
+        action,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.arrows, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.previous,
+              disabled: atStart,
+              onClick: () => step(-1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.next,
+              disabled: atEnd,
+              onClick: () => step(1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, {})
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: Scroller_module_default.track,
+        ref: track,
+        role: "group",
+        "aria-labelledby": titleId,
+        onScroll: measure,
+        children
+      }
+    )
+  ] });
+}
+
 // 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", "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 = react.createContext(false);
@@ -1411,7 +1500,7 @@ function ListItem({
       ref,
       ...rest,
       children: [
-        href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, onClick, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -2349,7 +2438,7 @@ function FileDrop({
 var Lightbox_module_default = { "panel": "mds-Lightbox__panel", "bar": "mds-Lightbox__bar", "surface": "mds-Lightbox__surface", "image": "mds-Lightbox__image", "caption": "mds-Lightbox__caption" };
 var MIN_SCALE = 1;
 var MAX_SCALE = 4;
-var STEP = 1;
+var STEP2 = 1;
 var DOUBLE = 2.5;
 var WHEEL = 0.01;
 var ORIGIN = { x: 0, y: 0 };
@@ -2462,7 +2551,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
               variant: "ghost",
               onMedia: true,
               disabled: scale <= MIN_SCALE,
-              onClick: () => zoom(scale - STEP),
+              onClick: () => zoom(scale - STEP2),
               children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutGlyph, {})
             }
           ),
@@ -2474,7 +2563,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
               variant: "ghost",
               onMedia: true,
               disabled: scale >= MAX_SCALE,
-              onClick: () => zoom(scale + STEP),
+              onClick: () => zoom(scale + STEP2),
               children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInGlyph, {})
             }
           ),
@@ -2781,6 +2870,7 @@ exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.Screen = Screen;
 exports.ScreenContent = ScreenContent;
+exports.Scroller = Scroller;
 exports.SearchField = SearchField;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;