@mond-design-system/react 4.9.0 → 4.10.2

package/dist/index.d.cts

@@ -840,6 +840,37 @@ interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
  */
 declare function SearchField({ label, clearLabel, value, onChange, className, ...rest }: SearchFieldProps): ReactElement;
 
+interface ScrollerLabels {
+    previous: string;
+    next: string;
+}
+interface ScrollerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Words over the row. They name the scrolling group too. */
+    title: string;
+    /** The arrows are glyphs, so the words are the app's. */
+    labels: ScrollerLabels;
+    /** Where the title sits in the document outline. Default 2. */
+    level?: HeadingLevel;
+    /** Beside the title, before the arrows — a link to the rest. */
+    action?: ReactNode;
+    children: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A titled row that scrolls sideways — featured posts, a shelf of covers.
+ * The row scrolls with the finger; the arrows do the same for a pointer or a
+ * key, and shut themselves at each end.
+ *
+ * ```tsx
+ * <Scroller title={t("home.featured")} labels={t.scroller}>
+ *   {slots.map((slot) => (
+ *     <PostCard key={slot.id} post={slot.post} variant="grid" />
+ *   ))}
+ * </Scroller>
+ * ```
+ */
+declare function Scroller({ title, labels, level, action, children, className, ...rest }: ScrollerProps): ReactElement;
+
 interface ListGroupProps extends HTMLAttributes<HTMLUListElement> {
     children: ReactNode;
     /** Heading over the group. Also names the list to a screen reader. */
@@ -876,13 +907,15 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
         `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. */
+    /** Makes the whole row a button — or, with `href`, reports the press on the
+        way out: a notification marked read, a tap counted. */
     onClick?: () => void;
     /** Marks an onClick row as a toggle — a picker row that selects rather than
         navigates. Lands as aria-pressed on the row button itself, where the
         screen reader's focus is. Leave unset for rows that navigate. */
     pressed?: boolean;
-    /** Makes the whole row a link. Wins over onClick. */
+    /** Makes the whole row a link. The row navigates rather than acts, and any
+        onClick rides along with the navigation. */
     href?: string;
     /** Element override for that link, e.g. a router's Link. */
     as?: ElementType;
@@ -1906,4 +1939,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -840,6 +840,37 @@ interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
  */
 declare function SearchField({ label, clearLabel, value, onChange, className, ...rest }: SearchFieldProps): ReactElement;
 
+interface ScrollerLabels {
+    previous: string;
+    next: string;
+}
+interface ScrollerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Words over the row. They name the scrolling group too. */
+    title: string;
+    /** The arrows are glyphs, so the words are the app's. */
+    labels: ScrollerLabels;
+    /** Where the title sits in the document outline. Default 2. */
+    level?: HeadingLevel;
+    /** Beside the title, before the arrows — a link to the rest. */
+    action?: ReactNode;
+    children: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A titled row that scrolls sideways — featured posts, a shelf of covers.
+ * The row scrolls with the finger; the arrows do the same for a pointer or a
+ * key, and shut themselves at each end.
+ *
+ * ```tsx
+ * <Scroller title={t("home.featured")} labels={t.scroller}>
+ *   {slots.map((slot) => (
+ *     <PostCard key={slot.id} post={slot.post} variant="grid" />
+ *   ))}
+ * </Scroller>
+ * ```
+ */
+declare function Scroller({ title, labels, level, action, children, className, ...rest }: ScrollerProps): ReactElement;
+
 interface ListGroupProps extends HTMLAttributes<HTMLUListElement> {
     children: ReactNode;
     /** Heading over the group. Also names the list to a screen reader. */
@@ -876,13 +907,15 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
         `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. */
+    /** Makes the whole row a button — or, with `href`, reports the press on the
+        way out: a notification marked read, a tap counted. */
     onClick?: () => void;
     /** Marks an onClick row as a toggle — a picker row that selects rather than
         navigates. Lands as aria-pressed on the row button itself, where the
         screen reader's focus is. Leave unset for rows that navigate. */
     pressed?: boolean;
-    /** Makes the whole row a link. Wins over onClick. */
+    /** Makes the whole row a link. The row navigates rather than acts, and any
+        onClick rides along with the navigation. */
     href?: string;
     /** Element override for that link, e.g. a router's Link. */
     as?: ElementType;
@@ -1906,4 +1939,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.js

@@ -148,6 +148,8 @@ function Button({
   children,
   ...rest
 }) {
+  const glyph = iconOnly && children != null ? /* @__PURE__ */ 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 };
@@ -169,7 +171,7 @@ function Button({
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
-        children,
+        body,
         !loading && iconRight ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
@@ -383,10 +385,10 @@ function CountButton({
   );
 }
 function CloseGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
 }
 function ChevronLeftGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M10 3l-5 5 5 5",
@@ -399,7 +401,7 @@ function ChevronLeftGlyph({ className }) {
   ) });
 }
 function ChevronRightGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M6 3l5 5-5 5",
@@ -412,7 +414,7 @@ function ChevronRightGlyph({ className }) {
   ) });
 }
 function Magnifier({ className, children }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.25" }),
     /* @__PURE__ */ jsx("path", { d: "M10.2 10.2L14 14" }),
     children
@@ -425,35 +427,35 @@ function ZoomOutGlyph({ className }) {
   return /* @__PURE__ */ jsx(Magnifier, { className, children: /* @__PURE__ */ jsx("path", { d: "M4.75 7h4.5" }) });
 }
 function PlayGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
 }
 function PauseGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
 }
 function Speaker() {
   return /* @__PURE__ */ jsx("path", { d: "M2.5 6.25h2.25L8 3.4v9.2L4.75 9.75H2.5z", fill: "currentColor", stroke: "none" });
 }
 function VolumeGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx(Speaker, {}),
     /* @__PURE__ */ jsx("path", { d: "M10.5 5.75a3.25 3.25 0 010 4.5" }),
     /* @__PURE__ */ jsx("path", { d: "M12.5 3.9a5.75 5.75 0 010 8.2" })
   ] }) });
 }
 function VolumeOffGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx(Speaker, {}),
     /* @__PURE__ */ jsx("path", { d: "M10.75 6.25l3.5 3.5M14.25 6.25l-3.5 3.5" })
   ] }) });
 }
 function CaptionsGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx("rect", { x: "1.75", y: "3.25", width: "12.5", height: "9.5", rx: "2" }),
     /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M6 2.5H2.5V6M10 2.5h3.5V6M6 13.5H2.5V10M10 13.5h3.5V10",
@@ -466,7 +468,7 @@ function FullscreenGlyph({ className }) {
   ) });
 }
 function FullscreenExitGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M2.5 6H6V2.5M13.5 6H10V2.5M2.5 10H6v3.5M13.5 10H10v3.5",
@@ -501,7 +503,15 @@ function Field({ label, children, hint, error, required = false, className }) {
         children
       }
     ),
-    message && /* @__PURE__ */ jsx("span", { id: messageId, className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error), children: message })
+    message && /* @__PURE__ */ 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
+      }
+    )
   ] });
 }
 
@@ -1351,6 +1361,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 = useRef(null);
+  const titleId = useId();
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(true);
+  const measure = useCallback(() => {
+    const row = track.current;
+    if (row === null) return;
+    setAtStart(row.scrollLeft <= 0);
+    setAtEnd(row.scrollLeft + row.clientWidth >= row.scrollWidth - 1);
+  }, []);
+  useEffect(measure);
+  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__ */ jsxs("section", { className: cx(Scroller_module_default.scroller, className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: Scroller_module_default.header, children: [
+      /* @__PURE__ */ jsx(Heading, { level, variant: "label", id: titleId, children: title }),
+      /* @__PURE__ */ jsxs("div", { className: Scroller_module_default.trailing, children: [
+        action,
+        /* @__PURE__ */ jsxs("div", { className: Scroller_module_default.arrows, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.previous,
+              disabled: atStart,
+              onClick: () => step(-1),
+              children: /* @__PURE__ */ jsx(ChevronLeftGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.next,
+              disabled: atEnd,
+              onClick: () => step(1),
+              children: /* @__PURE__ */ jsx(ChevronRightGlyph, {})
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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 = createContext(false);
@@ -1409,7 +1498,7 @@ function ListItem({
       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(
+        href !== void 0 ? /* @__PURE__ */ jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, onClick, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -2347,7 +2436,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 };
@@ -2460,7 +2549,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__ */ jsx(ZoomOutGlyph, {})
             }
           ),
@@ -2472,7 +2561,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__ */ jsx(ZoomInGlyph, {})
             }
           ),
@@ -2735,6 +2824,6 @@ function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   );
 }
 
-export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DataTable, DateTimePicker, Divider, EmptyState, Field, FileDrop, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, SideNav, SideNavGroup, SideNavItem, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DataTable, DateTimePicker, Divider, EmptyState, Field, FileDrop, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, Scroller, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, SideNav, SideNavGroup, SideNavItem, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map