@mond-design-system/react 6.1.0 → 6.2.0

package/dist/index.d.cts

@@ -179,7 +179,7 @@ type ButtonProps = ButtonBaseProps & IconOnlyEnforcement;
  * <Button iconOnly aria-label="Menu" shape="rect"><Icon name="menu" /></Button>
  * ```
  */
-declare function Button({ variant, size, shape, onMedia, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, ...rest }: ButtonProps): ReactElement;
+declare function Button({ variant, size, shape, onMedia, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, onClick, ...rest }: ButtonProps): ReactElement;
 
 type LinkVariant = "inline" | "standalone" | "plain";
 type LinkSize = "xs" | "sm" | "base" | "lg" | "xl";
@@ -192,6 +192,10 @@ type LinkOwnProps<E extends ElementType> = {
     size?: LinkSize;
     /** Opens in a new tab with rel protection. */
     external?: boolean;
+    /** Announced after the link text, unseen — a new tab is a context change a
+        reader cannot see coming, e.g. "opens in new tab". The words are the
+        app's, so they arrive here rather than being baked in English. */
+    externalLabel?: string;
     /** Element override — `'button'` for a link-styled action, or a router's
         Link component, whose own props (`to`, `href`, …) then type-check. */
     as?: E;
@@ -208,7 +212,7 @@ type LinkProps<E extends ElementType = "a"> = LinkOwnProps<E> & Omit<ComponentPr
  * <Link as={RouterLink} to="/about">About</Link>
  * ```
  */
-declare function Link<E extends ElementType = "a">({ variant, size, external, as, ...rest }: LinkProps<E>): ReactElement;
+declare function Link<E extends ElementType = "a">({ variant, size, external, externalLabel, as, children, ...rest }: LinkProps<E>): ReactElement;
 
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 /** One of the five brand identity tints (`--mds-avatar-tone-1..5`). */
@@ -406,7 +410,7 @@ interface CountButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
  * </CountButton>
  * ```
  */
-declare function CountButton({ icon, label, active, tone, disabled, loading, className, children, ...rest }: CountButtonProps): ReactElement;
+declare function CountButton({ icon, label, active, tone, disabled, loading, className, children, onClick, ...rest }: CountButtonProps): ReactElement;
 
 interface DateTimePickerLabels {
     /** Accessible name of the picker dialog. */
@@ -586,6 +590,9 @@ interface FieldContextValue {
     /** Space-joined ids of hint/error, for aria-describedby. */
     describedBy: string | undefined;
     invalid: boolean;
+    /** The label's asterisk is aria-hidden decoration; controls carry the
+     *  requirement as aria-required so assistive tech hears it too. */
+    required: boolean;
 }
 /** Controls call this to pick up Field wiring. Null outside a Field. */
 declare function useFieldContext(): FieldContextValue | null;
@@ -813,7 +820,7 @@ type SwitchProps = SwitchBaseProps & SwitchLabelEnforcement;
  * <Switch aria-label="Email on new posts" checked={on} loading={saving} onChange={toggle} />
  * ```
  */
-declare function Switch({ label, loading, disabled, className, ...rest }: SwitchProps): ReactElement;
+declare function Switch({ label, loading, disabled, className, onClick, onChange, ...rest }: SwitchProps): ReactElement;
 
 interface SegmentOption<T extends string = string> {
     value: T;
@@ -1039,6 +1046,9 @@ declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowAct
 
 interface EmptyStateProps {
     title: string;
+    /** Outline level of the title — the caller knows where the empty state
+     *  sits in the page's heading structure. Default 3. */
+    level?: HeadingLevel;
     description?: string;
     /** Illustration or Icon slot. */
     icon?: ReactNode;
@@ -1058,7 +1068,7 @@ interface EmptyStateProps {
  * />
  * ```
  */
-declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): ReactElement;
+declare function EmptyState({ title, level, description, icon, action, className }: EmptyStateProps): ReactElement;
 
 interface TabsProps {
     value: string;
@@ -1295,6 +1305,8 @@ interface ModalProps {
     closeOnScrimClick?: boolean;
     /** alertdialog interrupts — ConfirmDialog sets it. Default "dialog". */
     role?: "dialog" | "alertdialog";
+    /** id of the element that explains the dialog, read out with its name. */
+    describedBy?: string | undefined;
     children: ReactNode;
 }
 /**
@@ -1309,7 +1321,7 @@ interface ModalProps {
  * </Modal>
  * ```
  */
-declare function Modal({ open, onClose, label, closeOnScrimClick, role, children }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, label, closeOnScrimClick, role, describedBy, children }: ModalProps): react.JSX.Element;
 declare function ModalHeader({ children }: {
     children: ReactNode;
 }): react.JSX.Element;
@@ -1368,6 +1380,9 @@ interface PopoverProps {
     anchorRef: RefObject<HTMLElement | null>;
     /** Accessible name of the panel. */
     label: string;
+    /** Lands on the panel element, so the trigger's aria-controls has something
+        to point at. The trigger is the caller's, so the wiring is too. */
+    id?: string | undefined;
     /** Side it prefers. It flips and slides to stay on screen. Default "bottom-start". */
     placement?: PopoverPlacement;
     className?: string;
@@ -1393,7 +1408,7 @@ interface PopoverProps {
  * </Popover>
  * ```
  */
-declare function Popover({ open, onClose, anchorRef, label, placement, className, children, }: PopoverProps): react.ReactPortal | null;
+declare function Popover({ open, onClose, anchorRef, label, id, placement, className, children, }: PopoverProps): react.ReactPortal | null;
 type PopoverHeaderProps = {
     children: ReactNode;
 } & ({
@@ -1597,6 +1612,10 @@ interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     leading?: ReactNode;
     /** Right slot — actions. */
     trailing?: ReactNode;
+    /** Drop the page padding so the bar's content reaches the screen edge.
+        Off by default: the padding is what lines the bar up with the page
+        column (Container shares the same token). */
+    flush?: boolean;
     ref?: Ref<HTMLElement>;
 }
 /**
@@ -1613,7 +1632,7 @@ interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  * />
  * ```
  */
-declare function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }: AppBarProps): react.JSX.Element;
+declare function AppBar({ title, subtitle, leading, trailing, flush, className, ref, ...rest }: AppBarProps): react.JSX.Element;
 
 interface TabBarProps {
     /** Accessible name of the navigation landmark. */
@@ -1642,6 +1661,10 @@ interface TabBarItemProps {
     /** Attention dot on the icon — unread, pending. Boolean only: the count
         lives on the destination screen, the bar just says "something's there". */
     badge?: boolean | undefined;
+    /** What the dot means, e.g. "New messages" — the dot itself sits inside the
+        aria-hidden icon, so without these words the badge is invisible to a
+        reader. The words are the app's, like every label here. */
+    badgeLabel?: string | undefined;
     /** 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;
@@ -1651,7 +1674,7 @@ interface TabBarItemProps {
         everywhere. Hidden, never dropped — the word is the item's name. */
     hideLabel?: boolean | undefined;
 }
-declare function TabBarItem({ label, icon, href, onClick, active, badge, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
+declare function TabBarItem({ label, icon, href, onClick, active, badge, badgeLabel, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
 interface TabBarActionProps {
     /** Names the action — icon-only, so this is all a screen reader gets. */
     label: string;
@@ -2051,6 +2074,16 @@ interface UseOverlayOptions {
      * anchor are the same gesture answered two ways.
      */
     lockScroll?: boolean;
+    /**
+     * Trap Tab inside the panel and always hand focus back on close. Default
+     * true.
+     *
+     * False for non-modal surfaces: the page behind a popover is still live,
+     * so Tab walks out of the panel instead of cycling, and focus returns to
+     * the opener only when the close takes it from inside the panel — a press
+     * elsewhere on the page already put it where the reader wanted it.
+     */
+    modal?: boolean;
 }
 /**
  * Shared modal-surface behaviour: focus capture and restore, Escape to

package/dist/index.d.ts

@@ -179,7 +179,7 @@ type ButtonProps = ButtonBaseProps & IconOnlyEnforcement;
  * <Button iconOnly aria-label="Menu" shape="rect"><Icon name="menu" /></Button>
  * ```
  */
-declare function Button({ variant, size, shape, onMedia, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, ...rest }: ButtonProps): ReactElement;
+declare function Button({ variant, size, shape, onMedia, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, onClick, ...rest }: ButtonProps): ReactElement;
 
 type LinkVariant = "inline" | "standalone" | "plain";
 type LinkSize = "xs" | "sm" | "base" | "lg" | "xl";
@@ -192,6 +192,10 @@ type LinkOwnProps<E extends ElementType> = {
     size?: LinkSize;
     /** Opens in a new tab with rel protection. */
     external?: boolean;
+    /** Announced after the link text, unseen — a new tab is a context change a
+        reader cannot see coming, e.g. "opens in new tab". The words are the
+        app's, so they arrive here rather than being baked in English. */
+    externalLabel?: string;
     /** Element override — `'button'` for a link-styled action, or a router's
         Link component, whose own props (`to`, `href`, …) then type-check. */
     as?: E;
@@ -208,7 +212,7 @@ type LinkProps<E extends ElementType = "a"> = LinkOwnProps<E> & Omit<ComponentPr
  * <Link as={RouterLink} to="/about">About</Link>
  * ```
  */
-declare function Link<E extends ElementType = "a">({ variant, size, external, as, ...rest }: LinkProps<E>): ReactElement;
+declare function Link<E extends ElementType = "a">({ variant, size, external, externalLabel, as, children, ...rest }: LinkProps<E>): ReactElement;
 
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 /** One of the five brand identity tints (`--mds-avatar-tone-1..5`). */
@@ -406,7 +410,7 @@ interface CountButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
  * </CountButton>
  * ```
  */
-declare function CountButton({ icon, label, active, tone, disabled, loading, className, children, ...rest }: CountButtonProps): ReactElement;
+declare function CountButton({ icon, label, active, tone, disabled, loading, className, children, onClick, ...rest }: CountButtonProps): ReactElement;
 
 interface DateTimePickerLabels {
     /** Accessible name of the picker dialog. */
@@ -586,6 +590,9 @@ interface FieldContextValue {
     /** Space-joined ids of hint/error, for aria-describedby. */
     describedBy: string | undefined;
     invalid: boolean;
+    /** The label's asterisk is aria-hidden decoration; controls carry the
+     *  requirement as aria-required so assistive tech hears it too. */
+    required: boolean;
 }
 /** Controls call this to pick up Field wiring. Null outside a Field. */
 declare function useFieldContext(): FieldContextValue | null;
@@ -813,7 +820,7 @@ type SwitchProps = SwitchBaseProps & SwitchLabelEnforcement;
  * <Switch aria-label="Email on new posts" checked={on} loading={saving} onChange={toggle} />
  * ```
  */
-declare function Switch({ label, loading, disabled, className, ...rest }: SwitchProps): ReactElement;
+declare function Switch({ label, loading, disabled, className, onClick, onChange, ...rest }: SwitchProps): ReactElement;
 
 interface SegmentOption<T extends string = string> {
     value: T;
@@ -1039,6 +1046,9 @@ declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowAct
 
 interface EmptyStateProps {
     title: string;
+    /** Outline level of the title — the caller knows where the empty state
+     *  sits in the page's heading structure. Default 3. */
+    level?: HeadingLevel;
     description?: string;
     /** Illustration or Icon slot. */
     icon?: ReactNode;
@@ -1058,7 +1068,7 @@ interface EmptyStateProps {
  * />
  * ```
  */
-declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): ReactElement;
+declare function EmptyState({ title, level, description, icon, action, className }: EmptyStateProps): ReactElement;
 
 interface TabsProps {
     value: string;
@@ -1295,6 +1305,8 @@ interface ModalProps {
     closeOnScrimClick?: boolean;
     /** alertdialog interrupts — ConfirmDialog sets it. Default "dialog". */
     role?: "dialog" | "alertdialog";
+    /** id of the element that explains the dialog, read out with its name. */
+    describedBy?: string | undefined;
     children: ReactNode;
 }
 /**
@@ -1309,7 +1321,7 @@ interface ModalProps {
  * </Modal>
  * ```
  */
-declare function Modal({ open, onClose, label, closeOnScrimClick, role, children }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, label, closeOnScrimClick, role, describedBy, children }: ModalProps): react.JSX.Element;
 declare function ModalHeader({ children }: {
     children: ReactNode;
 }): react.JSX.Element;
@@ -1368,6 +1380,9 @@ interface PopoverProps {
     anchorRef: RefObject<HTMLElement | null>;
     /** Accessible name of the panel. */
     label: string;
+    /** Lands on the panel element, so the trigger's aria-controls has something
+        to point at. The trigger is the caller's, so the wiring is too. */
+    id?: string | undefined;
     /** Side it prefers. It flips and slides to stay on screen. Default "bottom-start". */
     placement?: PopoverPlacement;
     className?: string;
@@ -1393,7 +1408,7 @@ interface PopoverProps {
  * </Popover>
  * ```
  */
-declare function Popover({ open, onClose, anchorRef, label, placement, className, children, }: PopoverProps): react.ReactPortal | null;
+declare function Popover({ open, onClose, anchorRef, label, id, placement, className, children, }: PopoverProps): react.ReactPortal | null;
 type PopoverHeaderProps = {
     children: ReactNode;
 } & ({
@@ -1597,6 +1612,10 @@ interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     leading?: ReactNode;
     /** Right slot — actions. */
     trailing?: ReactNode;
+    /** Drop the page padding so the bar's content reaches the screen edge.
+        Off by default: the padding is what lines the bar up with the page
+        column (Container shares the same token). */
+    flush?: boolean;
     ref?: Ref<HTMLElement>;
 }
 /**
@@ -1613,7 +1632,7 @@ interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  * />
  * ```
  */
-declare function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }: AppBarProps): react.JSX.Element;
+declare function AppBar({ title, subtitle, leading, trailing, flush, className, ref, ...rest }: AppBarProps): react.JSX.Element;
 
 interface TabBarProps {
     /** Accessible name of the navigation landmark. */
@@ -1642,6 +1661,10 @@ interface TabBarItemProps {
     /** Attention dot on the icon — unread, pending. Boolean only: the count
         lives on the destination screen, the bar just says "something's there". */
     badge?: boolean | undefined;
+    /** What the dot means, e.g. "New messages" — the dot itself sits inside the
+        aria-hidden icon, so without these words the badge is invisible to a
+        reader. The words are the app's, like every label here. */
+    badgeLabel?: string | undefined;
     /** 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;
@@ -1651,7 +1674,7 @@ interface TabBarItemProps {
         everywhere. Hidden, never dropped — the word is the item's name. */
     hideLabel?: boolean | undefined;
 }
-declare function TabBarItem({ label, icon, href, onClick, active, badge, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
+declare function TabBarItem({ label, icon, href, onClick, active, badge, badgeLabel, as, hideLabel, }: TabBarItemProps): react.JSX.Element;
 interface TabBarActionProps {
     /** Names the action — icon-only, so this is all a screen reader gets. */
     label: string;
@@ -2051,6 +2074,16 @@ interface UseOverlayOptions {
      * anchor are the same gesture answered two ways.
      */
     lockScroll?: boolean;
+    /**
+     * Trap Tab inside the panel and always hand focus back on close. Default
+     * true.
+     *
+     * False for non-modal surfaces: the page behind a popover is still live,
+     * so Tab walks out of the panel instead of cycling, and focus returns to
+     * the opener only when the close takes it from inside the panel — a press
+     * elsewhere on the page already put it where the reader wanted it.
+     */
+    modal?: boolean;
 }
 /**
  * Shared modal-surface behaviour: focus capture and restore, Escape to