@mond-design-system/react 4.0.0 → 4.1.0

package/dist/index.d.cts

@@ -757,6 +757,7 @@ interface SegmentOption<T extends string = string> {
     value: T;
     label: string;
 }
+type SegmentedControlSize = "sm" | "md";
 interface SegmentedControlProps<T extends string = string> {
     /** Accessible group name. */
     label: string;
@@ -768,6 +769,14 @@ interface SegmentedControlProps<T extends string = string> {
     /** Stretch across the container, segments sharing the width equally —
         the usual shape when the control heads a screen-wide view switch. */
     fullWidth?: boolean;
+    /** Control step. Default md. sm is for chrome — a switch sharing a header
+        bar with an avatar and a menu, where the medium step is the tallest
+        thing up there. */
+    size?: SegmentedControlSize;
+    /** Drop the frame: no tray, no padding around the segments. The tray is
+        what makes the group read as a form field, and in a header bar a field
+        is what it is not. The chosen segment still carries its own surface. */
+    bare?: boolean;
     className?: string;
 }
 /**
@@ -786,7 +795,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */
@@ -929,12 +938,25 @@ interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
 declare function TabPanel({ value, className, children, ...rest }: TabPanelProps): ReactElement;
 
 type ToastTone = "neutral" | "success" | "danger";
+interface ToastAction {
+    /** The word on the button — localise. */
+    label: string;
+    onClick: () => void;
+}
 interface ToastOptions {
     title: string;
     description?: string | undefined;
     tone?: ToastTone | undefined;
     /** ms until auto-dismiss. 0 = stays until dismissed. Default 5000. */
     duration?: number | undefined;
+    /** One thing to do about the message, beside it. A toast that asks for
+        something — "Update ready", "Add to home screen" — has nowhere else to
+        put the doing. Taking it closes the toast: the message is answered. */
+    action?: ToastAction | undefined;
+    /** Fires however the toast leaves — timeout, dismiss button, or action.
+        A nudge that must remember a refusal has one place to write it down,
+        rather than three that can disagree. */
+    onDismiss?: (() => void) | undefined;
 }
 interface ToastContextValue {
     toast: (options: ToastOptions) => number;
@@ -1244,7 +1266,7 @@ interface ScreenContentProps extends HTMLAttributes<HTMLElement> {
 /** The scrollable main region of a Screen. */
 declare function ScreenContent({ children, flush, className, ref, ...rest }: ScreenContentProps): react.JSX.Element;
 
-interface AppBarProps {
+interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /** Page heading — rendered as the h1. A node is allowed for titles that
         are themselves a control (e.g. a thread title that opens the event). */
     title?: ReactNode;
@@ -1255,6 +1277,7 @@ interface AppBarProps {
     leading?: ReactNode;
     /** Right slot — actions. */
     trailing?: ReactNode;
+    ref?: Ref<HTMLElement>;
 }
 /**
  * Top app bar. Sticky, one per screen; the title is the page h1.
@@ -1270,7 +1293,7 @@ interface AppBarProps {
  * />
  * ```
  */
-declare function AppBar({ title, subtitle, leading, trailing }: AppBarProps): react.JSX.Element;
+declare function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }: AppBarProps): react.JSX.Element;
 
 interface TabBarProps {
     /** Accessible name of the navigation landmark. */
@@ -1302,8 +1325,13 @@ interface TabBarItemProps {
     /** Element override for the link, e.g. a router's Link. A bottom bar is
         where a full page reload costs the most — it restarts the whole shell. */
     as?: ElementType;
+    /** Take the caption off the screen and leave it in the accessible name.
+        For a bar whose glyphs carry the meaning: four captions on the narrowest
+        phone wrap, and a translation twice the length of the English wraps
+        everywhere. Hidden, never dropped — the word is the item's name. */
+    hideLabel?: boolean | undefined;
 }
-declare function TabBarItem({ label, icon, href, onClick, active, badge, as }: TabBarItemProps): react.JSX.Element;
+declare function TabBarItem({ label, icon, href, onClick, active, badge, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
 interface TabBarActionProps {
     /** Names the action — icon-only, so this is all a screen reader gets. */
     label: string;
@@ -1677,4 +1705,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, 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, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, 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 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, 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, 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

@@ -757,6 +757,7 @@ interface SegmentOption<T extends string = string> {
     value: T;
     label: string;
 }
+type SegmentedControlSize = "sm" | "md";
 interface SegmentedControlProps<T extends string = string> {
     /** Accessible group name. */
     label: string;
@@ -768,6 +769,14 @@ interface SegmentedControlProps<T extends string = string> {
     /** Stretch across the container, segments sharing the width equally —
         the usual shape when the control heads a screen-wide view switch. */
     fullWidth?: boolean;
+    /** Control step. Default md. sm is for chrome — a switch sharing a header
+        bar with an avatar and a menu, where the medium step is the tallest
+        thing up there. */
+    size?: SegmentedControlSize;
+    /** Drop the frame: no tray, no padding around the segments. The tray is
+        what makes the group read as a form field, and in a header bar a field
+        is what it is not. The chosen segment still carries its own surface. */
+    bare?: boolean;
     className?: string;
 }
 /**
@@ -786,7 +795,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */
@@ -929,12 +938,25 @@ interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
 declare function TabPanel({ value, className, children, ...rest }: TabPanelProps): ReactElement;
 
 type ToastTone = "neutral" | "success" | "danger";
+interface ToastAction {
+    /** The word on the button — localise. */
+    label: string;
+    onClick: () => void;
+}
 interface ToastOptions {
     title: string;
     description?: string | undefined;
     tone?: ToastTone | undefined;
     /** ms until auto-dismiss. 0 = stays until dismissed. Default 5000. */
     duration?: number | undefined;
+    /** One thing to do about the message, beside it. A toast that asks for
+        something — "Update ready", "Add to home screen" — has nowhere else to
+        put the doing. Taking it closes the toast: the message is answered. */
+    action?: ToastAction | undefined;
+    /** Fires however the toast leaves — timeout, dismiss button, or action.
+        A nudge that must remember a refusal has one place to write it down,
+        rather than three that can disagree. */
+    onDismiss?: (() => void) | undefined;
 }
 interface ToastContextValue {
     toast: (options: ToastOptions) => number;
@@ -1244,7 +1266,7 @@ interface ScreenContentProps extends HTMLAttributes<HTMLElement> {
 /** The scrollable main region of a Screen. */
 declare function ScreenContent({ children, flush, className, ref, ...rest }: ScreenContentProps): react.JSX.Element;
 
-interface AppBarProps {
+interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /** Page heading — rendered as the h1. A node is allowed for titles that
         are themselves a control (e.g. a thread title that opens the event). */
     title?: ReactNode;
@@ -1255,6 +1277,7 @@ interface AppBarProps {
     leading?: ReactNode;
     /** Right slot — actions. */
     trailing?: ReactNode;
+    ref?: Ref<HTMLElement>;
 }
 /**
  * Top app bar. Sticky, one per screen; the title is the page h1.
@@ -1270,7 +1293,7 @@ interface AppBarProps {
  * />
  * ```
  */
-declare function AppBar({ title, subtitle, leading, trailing }: AppBarProps): react.JSX.Element;
+declare function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }: AppBarProps): react.JSX.Element;
 
 interface TabBarProps {
     /** Accessible name of the navigation landmark. */
@@ -1302,8 +1325,13 @@ interface TabBarItemProps {
     /** Element override for the link, e.g. a router's Link. A bottom bar is
         where a full page reload costs the most — it restarts the whole shell. */
     as?: ElementType;
+    /** Take the caption off the screen and leave it in the accessible name.
+        For a bar whose glyphs carry the meaning: four captions on the narrowest
+        phone wrap, and a translation twice the length of the English wraps
+        everywhere. Hidden, never dropped — the word is the item's name. */
+    hideLabel?: boolean | undefined;
 }
-declare function TabBarItem({ label, icon, href, onClick, active, badge, as }: TabBarItemProps): react.JSX.Element;
+declare function TabBarItem({ label, icon, href, onClick, active, badge, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
 interface TabBarActionProps {
     /** Names the action — icon-only, so this is all a screen reader gets. */
     label: string;
@@ -1677,4 +1705,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, 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, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, 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 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, 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, 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

@@ -1227,7 +1227,7 @@ function Switch({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped
-var SegmentedControl_module_default = { "group": "mds-SegmentedControl__group", "segment": "mds-SegmentedControl__segment", "fullWidth": "mds-SegmentedControl__fullWidth", "face": "mds-SegmentedControl__face", "input": "mds-SegmentedControl__input" };
+var SegmentedControl_module_default = { "group": "mds-SegmentedControl__group", "size-md": "mds-SegmentedControl__size-md", "face": "mds-SegmentedControl__face", "size-sm": "mds-SegmentedControl__size-sm", "bare": "mds-SegmentedControl__bare", "segment": "mds-SegmentedControl__segment", "fullWidth": "mds-SegmentedControl__fullWidth", "input": "mds-SegmentedControl__input" };
 function SegmentedControl({
   label,
   options,
@@ -1235,24 +1235,40 @@ function SegmentedControl({
   onChange,
   disabled = false,
   fullWidth = false,
+  size = "md",
+  bare = false,
   className
 }) {
   const name = useId();
-  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_module_default.group, fullWidth && SegmentedControl_module_default.fullWidth, className), children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: SegmentedControl_module_default.segment, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "radio",
-        name,
-        value: option.value,
-        checked: option.value === value,
-        onChange: () => onChange(option.value),
-        disabled,
-        className: SegmentedControl_module_default.input
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: SegmentedControl_module_default.face, children: option.label })
-  ] }, option.value)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx(
+        SegmentedControl_module_default.group,
+        SegmentedControl_module_default[`size-${size}`],
+        fullWidth && SegmentedControl_module_default.fullWidth,
+        bare && SegmentedControl_module_default.bare,
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: SegmentedControl_module_default.segment, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: option.value,
+            checked: option.value === value,
+            onChange: () => onChange(option.value),
+            disabled,
+            className: SegmentedControl_module_default.input
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: SegmentedControl_module_default.face, children: option.label })
+      ] }, option.value))
+    }
+  );
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
@@ -1467,7 +1483,7 @@ function TabPanel({ value, className, children, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped
-var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close mds-hit-area__hitArea", "closeGlyph": "mds-Toast__closeGlyph" };
+var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close mds-hit-area__hitArea", "closeGlyph": "mds-Toast__closeGlyph", "action": "mds-Toast__action mds-hit-area__hitArea" };
 var ToastContext = createContext(null);
 function useToast() {
   const context = useContext(ToastContext);
@@ -1481,13 +1497,20 @@ function ToastProvider({
 }) {
   const [toasts, setToasts] = useState([]);
   const nextId = useRef(1);
+  const leaving = useRef(/* @__PURE__ */ new Map());
   const dismiss = useCallback((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
+    const said = leaving.current.get(id);
+    if (said !== void 0) {
+      leaving.current.delete(id);
+      said();
+    }
   }, []);
   const toast = useCallback(
-    ({ title, description, tone = "neutral", duration = 5e3 }) => {
+    ({ title, description, tone = "neutral", duration = 5e3, action, onDismiss }) => {
       const id = nextId.current++;
-      setToasts((current) => [...current, { id, title, description, tone }]);
+      if (onDismiss !== void 0) leaving.current.set(id, onDismiss);
+      setToasts((current) => [...current, { id, title, description, tone, action }]);
       if (duration > 0) setTimeout(() => dismiss(id), duration);
       return id;
     },
@@ -1501,6 +1524,18 @@ function ToastProvider({
         /* @__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",
         {
@@ -1718,9 +1753,9 @@ function ScreenContent({ children, flush = false, className, ref, ...rest }) {
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AppBar/AppBar.module.css?mds-scoped
 var AppBar_module_default = { "bar": "mds-AppBar__bar", "title": "mds-AppBar__title", "text": "mds-AppBar__text", "subtitle": "mds-AppBar__subtitle", "slot": "mds-AppBar__slot", "trailing": "mds-AppBar__trailing" };
-function AppBar({ title, subtitle, leading, trailing }) {
+function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }) {
   const heading = title ? /* @__PURE__ */ jsx("h1", { className: AppBar_module_default.title, children: title }) : null;
-  return /* @__PURE__ */ jsxs("header", { className: AppBar_module_default.bar, children: [
+  return /* @__PURE__ */ jsxs("header", { ref, className: cx(AppBar_module_default.bar, className), ...rest, children: [
     leading ? /* @__PURE__ */ jsx("div", { className: AppBar_module_default.slot, children: leading }) : null,
     subtitle != null ? /* @__PURE__ */ jsxs("div", { className: AppBar_module_default.text, children: [
       heading,
@@ -1735,14 +1770,23 @@ var TabBar_module_default = { "bar": "mds-TabBar__bar", "item": "mds-TabBar__ite
 function TabBar({ label, children }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: TabBar_module_default.bar, children });
 }
-function TabBarItem({ label, icon, href, onClick, active = false, badge = false, as }) {
+function TabBarItem({
+  label,
+  icon,
+  href,
+  onClick,
+  active = false,
+  badge = false,
+  as,
+  hideLabel = false
+}) {
   const className = cx(TabBar_module_default.item, active && TabBar_module_default.active);
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: [
       icon,
       badge ? /* @__PURE__ */ jsx("span", { className: TabBar_module_default.badge, "data-testid": "mds-tabbar-badge" }) : null
     ] }),
-    /* @__PURE__ */ jsx("span", { className: TabBar_module_default.label, children: label })
+    hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsx("span", { className: TabBar_module_default.label, children: label })
   ] });
   if (href !== void 0) {
     const Element = as ?? "a";