@moderneinc/design-system-components 6.1.0-alpha.f3c8fa → 7.0.0-next.57acda

package/dist/ActivityHeader/ActivityHeader.d.ts

@@ -43,7 +43,7 @@ export interface ModActivityHeaderProps {
  *   field: 'activity',
  *   headerName: '',
  *   width: 34,
- *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderHeader: () => <ModActivityHeader size="compact" color="commitJob" />,
  *   renderCell: (params) => (
  *     <ModActivityIndicatorCell
  *       event={params.row.eventType}

package/dist/DataGrid/DataGrid.styles.d.ts

@@ -8,7 +8,7 @@ import type { SxProps, Theme } from '@mui/material/styles';
  * they carry this surface themselves.
  */
 export declare const panelSurfaceStyles: {
-    readonly backgroundColor: "var(--mod-surfaces-white)";
+    readonly backgroundColor: "var(--mod-color-surface-raised)";
 };
 export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
 export declare const getDataGridRowStyles: () => SxProps<Theme>;

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -1,7 +1,5 @@
-import { GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
+import { type GridSlotProps, type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
 import type React from 'react';
-import { ModSelect } from '../Select/Select';
-export type { GridFilterItem as FilterItem, GridFilterOperator as FilterOperator, } from '@mui/x-data-grid';
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
@@ -18,6 +16,19 @@ export declare const ModDataGridFilterPanelRemoveAllIcon: {
     (): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export type ModDataGridSelectProps = GridSlotProps['baseSelect'];
+/**
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
+ */
+export declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
@@ -48,7 +59,6 @@ export declare const ModDataGridFilterPanelRemoveAllIcon: {
  * />
  * ```
  */
-export { ModSelect as ModDataGridSelect };
 export declare const ModDataGridFilterPanel: {
     (props: React.ComponentProps<typeof MuiGridFilterPanel>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/InputField/InputField.d.ts

@@ -2,15 +2,15 @@ import { type InputBaseProps } from '@mui/material/InputBase';
 import type { ReactNode } from 'react';
 type InputFieldSize = 'small' | 'medium';
 export type { InputFieldSize as ModInputFieldSize };
-export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "error" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "color" | "margin" | "disabled" | "size" | "classes" | "className" | "children" | "sx" | "required" | "error" | "variant" | "fullWidth" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     size?: InputFieldSize;
 }, {}, {}>;
-export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style" | "color" | "margin" | "disabled" | "size" | "classes" | "className" | "children" | "sx" | "required" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     size?: InputFieldSize;
     infoIcon?: boolean;
 }, {}, {}>;
 export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style" | "margin" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style" | "margin" | "disabled" | "classes" | "className" | "children" | "sx" | "required" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     size?: InputFieldSize;
 }, {}, {}>;
 export interface ModInputFieldProps extends Omit<InputBaseProps, 'size'> {

package/dist/ListItem/ListItem.d.ts

@@ -40,6 +40,14 @@ export interface ModListItemProps extends Omit<ListItemButtonProps, 'children' |
      * @default false
      */
     isLink?: boolean;
+    /**
+     * URL to navigate to. MUI's ListItemButton promotes its root to an anchor on its
+     * own when `href` is set, so `component="a"` is not required.
+     *
+     * Declared explicitly: `ListItemButtonProps` only exposes anchor attributes
+     * through MUI's polymorphic generic, which this component does not thread through.
+     */
+    href?: string;
     /**
      * Trailing element (optional, e.g., chevron icon for navigation)
      * Renders at the end of the list item, typically used for navigation indicators.

package/dist/MenuItem/MenuItem.d.ts

@@ -19,18 +19,41 @@ type ModMenuItemOwnProps = {
      */
     secondaryText?: string;
     /**
-     * URL to navigate to. When provided, the menu item renders as an anchor
-     * element (via MUI ButtonBase) so users can middle-click or right-click
-     * to open in a new tab. For client-side routing, also pass
-     * `component={NextLink}` (or your router's link component).
+     * URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
+     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
+     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
+     * `Link`) to override that default.
+     *
+     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
+     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
+     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
+     * items, and what `ModListItem` already produces inside `List`.
      */
     href?: string;
+    /**
+     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
+     * roots at `li` and this renders as an inert attribute, the same trap as #722.
+     */
+    target?: string;
+    /**
+     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
+     * the item roots at `li` and this renders as an inert attribute.
+     */
+    rel?: string;
     /**
      * Menu item content (text label)
      */
     children?: ReactNode;
 };
 export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    /**
+     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
+     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
+     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
+     * the exception — ButtonBase promotes a `button` root to an anchor itself.
+     *
+     * @default 'li', or 'a' when `href` is set
+     */
     component?: C;
 };
 /**
@@ -50,7 +73,7 @@ export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuI
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — middle-click/right-click open in a new tab
+ * // As an anchor — `href` alone is enough
  * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
@@ -58,11 +81,11 @@ export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuI
  *   Documentation
  * </ModMenuItem>
  *
- * // Client-side routing (Next.js)
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
  * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
  * ```
  */
-export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ModMenuItem {
     var displayName: string;
 }

package/dist/Tabs/Tabs.d.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 /**
  * ModTabs - Tabs container component based on MUI Tabs
  */
-export declare const ModTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ModTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "classes" | "slots" | "slotProps" | "className" | "action" | "children" | "sx" | "value" | "aria-label" | "aria-labelledby" | "onChange" | "orientation" | "variant" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface ModTabProps extends Omit<TabProps, 'label'> {
     /**
      * The label for the tab

package/dist/TypologyControl/TypologyControl.d.ts

@@ -1,5 +1,5 @@
 import { type ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
-declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ToggleButtonOwnProps> & Omit<import("@mui/material").ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof import("@mui/material").ToggleButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ToggleButtonOwnProps> & Omit<import("@mui/material").ButtonBaseOwnProps, "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material").ToggleButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "disabled" | "size" | "classes" | "type" | "className" | "action" | "centerRipple" | "children" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "value" | "onChange" | "onClick" | "disableFocusRipple" | "fullWidth" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface ModTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
 }
 /**