@mond-design-system/react 4.8.0 → 4.10.1

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;
@@ -1663,6 +1696,40 @@ interface UploadProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
  */
 declare function UploadProgress({ name, labels, preview, mark, value, status, detail, error, onCancel, onRetry, onRemove, className, ...rest }: UploadProgressProps): ReactElement;
 
+interface FileDropProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
+    /** The invitation, in the app's words — what to hand over, and how. */
+    label: string;
+    /** The rule under it: the kinds taken, the size ceiling, how many fit. */
+    hint?: string;
+    /** Glyph above the words, from the app's icon set. */
+    icon?: ReactNode;
+    /** Passed to the picker, so it offers the right kinds. Same syntax as the
+        input attribute: "image/*", ".pdf,.docx". */
+    accept?: string;
+    /** More than one at a time. A drop of several is cut to one without it —
+        the picker would not have let them through either. */
+    multiple?: boolean;
+    disabled?: boolean;
+    /** What arrived, picked or dropped. Never empty. */
+    onFiles: (files: File[]) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A place to hand over a file: press it for the picker, or drop one on it.
+ * The list of what is on its way up is UploadProgress' job.
+ *
+ * ```tsx
+ * <FileDrop
+ *   label={t.upload.drop}
+ *   hint={t.upload.limit}
+ *   accept="image/*"
+ *   multiple
+ *   onFiles={upload.add}
+ * />
+ * ```
+ */
+declare function FileDrop({ label, hint, icon, accept, multiple, disabled, onFiles, className, ref, ...rest }: FileDropProps): ReactElement;
+
 interface LightboxLabels {
     /** Names the dialog itself, e.g. "Image". */
     dialog: string;
@@ -1872,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, 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;
@@ -1663,6 +1696,40 @@ interface UploadProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
  */
 declare function UploadProgress({ name, labels, preview, mark, value, status, detail, error, onCancel, onRetry, onRemove, className, ...rest }: UploadProgressProps): ReactElement;
 
+interface FileDropProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
+    /** The invitation, in the app's words — what to hand over, and how. */
+    label: string;
+    /** The rule under it: the kinds taken, the size ceiling, how many fit. */
+    hint?: string;
+    /** Glyph above the words, from the app's icon set. */
+    icon?: ReactNode;
+    /** Passed to the picker, so it offers the right kinds. Same syntax as the
+        input attribute: "image/*", ".pdf,.docx". */
+    accept?: string;
+    /** More than one at a time. A drop of several is cut to one without it —
+        the picker would not have let them through either. */
+    multiple?: boolean;
+    disabled?: boolean;
+    /** What arrived, picked or dropped. Never empty. */
+    onFiles: (files: File[]) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A place to hand over a file: press it for the picker, or drop one on it.
+ * The list of what is on its way up is UploadProgress' job.
+ *
+ * ```tsx
+ * <FileDrop
+ *   label={t.upload.drop}
+ *   hint={t.upload.limit}
+ *   accept="image/*"
+ *   multiple
+ *   onFiles={upload.add}
+ * />
+ * ```
+ */
+declare function FileDrop({ label, hint, icon, accept, multiple, disabled, onFiles, className, ref, ...rest }: FileDropProps): ReactElement;
+
 interface LightboxLabels {
     /** Names the dialog itself, e.g. "Image". */
     dialog: string;
@@ -1872,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, 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

@@ -501,7 +501,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 +1359,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 +1496,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",
@@ -2269,11 +2356,85 @@ function UploadProgress({
   ] });
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/FileDrop/FileDrop.module.css?mds-scoped
+var FileDrop_module_default = { "drop": "mds-FileDrop__drop", "target": "mds-FileDrop__target", "over": "mds-FileDrop__over", "icon": "mds-FileDrop__icon", "picker": "mds-FileDrop__picker" };
+function FileDrop({
+  label,
+  hint,
+  icon,
+  accept,
+  multiple = false,
+  disabled = false,
+  onFiles,
+  className,
+  ref,
+  ...rest
+}) {
+  const picker = useRef(null);
+  const [over, setOver] = useState(false);
+  const take = (list) => {
+    if (disabled || list === null || list.length === 0) return;
+    const files = [...list];
+    onFiles(multiple ? files : files.slice(0, 1));
+  };
+  const dropped = (event) => {
+    event.preventDefault();
+    setOver(false);
+    take(event.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(FileDrop_module_default.drop, over && FileDrop_module_default.over, className),
+      ref,
+      onDragOver: (event) => {
+        event.preventDefault();
+        setOver(!disabled);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: dropped,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: FileDrop_module_default.target,
+            disabled,
+            onClick: () => picker.current?.click(),
+            children: [
+              icon !== void 0 && /* @__PURE__ */ jsx("span", { className: FileDrop_module_default.icon, children: icon }),
+              /* @__PURE__ */ jsx(Text, { variant: "label", children: label }),
+              hint !== void 0 && /* @__PURE__ */ jsx(Text, { variant: "meta", children: hint })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            className: FileDrop_module_default.picker,
+            ref: picker,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            multiple,
+            ...accept === void 0 ? {} : { accept },
+            onChange: (event) => {
+              take(event.target.files);
+              event.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped
 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 };
@@ -2386,7 +2547,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, {})
             }
           ),
@@ -2398,7 +2559,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, {})
             }
           ),
@@ -2661,6 +2822,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, 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