@dbcdk/react-components 0.0.150 → 0.0.152

package/dist/components/alert/Alert.module.css

@@ -95,3 +95,9 @@
   --alert-fg: var(--color-brand);
   --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
+
+.accent {
+  --alert-bg: var(--color-accent-bg);
+  --alert-fg: var(--color-accent-fg);
+  --alert-border: var(--color-accent-border);
+}

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var severity = require('../../constants/severity');
 var styles = require('./AttributeChip.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,15 +13,23 @@ function AttributeChip({
   value,
   size = "md",
   loading,
-  severity = "neutral"
+  severity: severity$1
 }) {
-  const valueClassName = [styles__default.default.value, styles__default.default[severity], !label && styles__default.default.valueStandalone].filter(Boolean).join(" ");
+  const markerSeverity = severity$1 && severity$1 !== "neutral" ? severity$1 : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" })
+      !markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: styles__default.default.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": severity.SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { SeverityBgColor } from '../../constants/severity';
 import styles from './AttributeChip.module.css';
 
 function AttributeChip({
@@ -6,15 +7,23 @@ function AttributeChip({
   value,
   size = "md",
   loading,
-  severity = "neutral"
+  severity
 }) {
-  const valueClassName = [styles.value, styles[severity], !label && styles.valueStandalone].filter(Boolean).join(" ");
+  const markerSeverity = severity && severity !== "neutral" ? severity : void 0;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" })
+      !markerSeverity ? /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    markerSeverity ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -1,6 +1,7 @@
 .container {
   display: inline-flex;
   align-items: center;
+  gap: var(--spacing-2xs);
   white-space: nowrap;
   border-radius: var(--border-radius-default);
   border: 1px solid var(--color-border-subtle);
@@ -13,14 +14,12 @@
      avoids uneven leading around the glyphs at different font-sizes. */
   line-height: 1;
   --attribute-chip-padding-inline: var(--spacing-xxs);
-  --attribute-chip-value-bleed: calc(
-    (var(--attribute-chip-padding-inline) - var(--spacing-2xs)) * -1
-  );
   padding-inline: var(--attribute-chip-padding-inline);
 }
 
 .label,
-.value {
+.value,
+.marker {
   display: inline-flex;
   align-items: center;
   height: 100%;
@@ -32,28 +31,20 @@
 }
 
 .value {
-  height: calc(100% - 2 * var(--spacing-2xs));
-  margin-block: var(--spacing-2xs);
   font-weight: var(--font-weight-medium);
-  padding-inline: var(--attribute-chip-padding-inline);
-  margin-inline-end: var(--attribute-chip-value-bleed);
-  border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
-  background: var(--value-bg, transparent);
-  color: var(--value-fg, inherit);
 }
 
-/* When there's no label/separator before it, the value is the only content,
-   so it bleeds into the left padding too and becomes a full pill. A thin
-   sliver of the container's own background stays visible around it. */
-.valueStandalone {
-  margin-inline-start: var(--attribute-chip-value-bleed);
-  border-radius: var(--border-radius-default);
+.marker {
+  inline-size: var(--border-width-medium);
+  block-size: 0.9em;
+  flex: 0 0 auto;
+  border-radius: var(--border-radius-sm);
+  background: var(--attribute-chip-marker-color, var(--color-brand));
+  margin-inline: var(--spacing-2xs) var(--spacing-2xs);
 }
 
 .separator {
   color: var(--color-border-default);
-  margin-inline-start: var(--spacing-xxs);
-  margin-inline-end: var(--spacing-2xs);
 }
 
 /* Sizes */
@@ -71,35 +62,3 @@
   height: var(--component-size-md);
   font-size: var(--font-size-md);
 }
-
-/* Severity colors for the value */
-
-.neutral {
-  --value-bg: transparent;
-  --value-fg: inherit;
-}
-
-.success {
-  --value-bg: var(--color-status-success-bg);
-  --value-fg: var(--color-status-success-fg);
-}
-
-.warning {
-  --value-bg: var(--color-status-warning-bg);
-  --value-fg: var(--color-status-warning-fg);
-}
-
-.error {
-  --value-bg: var(--color-status-error-bg);
-  --value-fg: var(--color-status-error-fg);
-}
-
-.info {
-  --value-bg: var(--color-status-info-bg);
-  --value-fg: var(--color-status-info-fg);
-}
-
-.brand {
-  --value-bg: var(--color-brand);
-  --value-fg: var(--color-fg-on-brand);
-}

package/dist/components/chip/Chip.module.css

@@ -172,6 +172,17 @@
   box-shadow: inset 0 0 0 1px transparent;
 }
 
+.accent {
+  --chip-bg: var(--color-accent-bg);
+  --chip-fg: var(--color-accent-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-accent-border);
+  --chip-outlined-border-hover: var(--color-accent-border);
+  --chip-outlined-fg: var(--color-accent-fg);
+  --chip-outlined-fg-hover: var(--color-accent-fg);
+  box-shadow: inset 0 0 0 1px var(--color-accent-border);
+}
+
 /* Selected */
 
 .selected {

package/dist/components/circle/Circle.module.css

@@ -40,6 +40,9 @@
 .brand {
   background-color: var(--color-brand);
 }
+.accent {
+  background-color: var(--color-accent);
+}
 .success {
   background-color: var(--color-status-success);
 }
@@ -57,6 +60,10 @@
   box-shadow: 0 0 0 2px var(--color-bg-selected);
 }
 
+.accent[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-accent-bg);
+}
+
 .success[data-glow='true'] {
   box-shadow: 0 0 0 2px var(--color-status-success-bg);
 }

package/dist/components/environment-banner/EnvironmentBanner.module.css

@@ -43,6 +43,11 @@
   --env-banner-fg: var(--color-fg-on-brand);
 }
 
+.banner[data-severity='accent'] {
+  --env-banner-bg: var(--color-accent);
+  --env-banner-fg: var(--color-fg-on-accent);
+}
+
 .banner[data-severity='neutral'] {
   --env-banner-bg: var(--color-neutral);
   --env-banner-fg: var(--color-fg-default);

package/dist/components/forms/switch/Switch.cjs

@@ -18,6 +18,8 @@ function Switch({
   modified,
   label,
   labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
   size = "md",
   containerLabel,
   error,
@@ -64,7 +66,8 @@ function Switch({
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thumb, "aria-hidden": "true" })
           }
         ) }),
-        label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }))
+        label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })),
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
     }
   );

package/dist/components/forms/switch/Switch.d.ts

@@ -9,6 +9,16 @@ interface SwitchProps {
     modified?: boolean;
     label?: ReactNode;
     labelAs?: 'label' | 'span';
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * The component owns the layout/spacing for this slot.
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Whether the endAdornment wrapper is hidden from assistive tech.
+     * Defaults to true since endAdornment is typically decorative.
+     */
+    endAdornmentAriaHidden?: boolean;
     size?: Size;
     containerLabel?: string;
     error?: string;
@@ -23,5 +33,5 @@ interface SwitchProps {
     tooltip?: ReactNode;
     tooltipPlacement?: TooltipPlacement;
 }
-export declare function Switch({ checked: controlled, onChange, disabled, modified, label, labelAs, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: SwitchProps): JSX.Element;
+export declare function Switch({ checked: controlled, onChange, disabled, modified, label, labelAs, endAdornment, endAdornmentAriaHidden, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: SwitchProps): JSX.Element;
 export {};

package/dist/components/forms/switch/Switch.js

@@ -12,6 +12,8 @@ function Switch({
   modified,
   label,
   labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
   size = "md",
   containerLabel,
   error,
@@ -58,7 +60,8 @@ function Switch({
             children: /* @__PURE__ */ jsx("span", { className: styles.thumb, "aria-hidden": "true" })
           }
         ) }),
-        label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label }))
+        label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label })),
+        endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
     }
   );

package/dist/components/forms/switch/Switch.module.css

@@ -81,3 +81,9 @@
   overflow-wrap: anywhere;
   word-break: break-word;
 }
+
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}

package/dist/components/icon/Icon.cjs

@@ -14,7 +14,8 @@ const SeverityIcon = {
   error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
   info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
   warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
-  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
+  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
+  accent: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {})
 };
 function Icon({ severity, label, customIcon }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [

package/dist/components/icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import { Sparkles, Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
 import styles from './Icon.module.css';
 
 const SeverityIcon = {
@@ -8,7 +8,8 @@ const SeverityIcon = {
   error: /* @__PURE__ */ jsx(CircleX, {}),
   info: /* @__PURE__ */ jsx(Info, {}),
   warning: /* @__PURE__ */ jsx(CircleAlert, {}),
-  brand: /* @__PURE__ */ jsx(Building2, {})
+  brand: /* @__PURE__ */ jsx(Building2, {}),
+  accent: /* @__PURE__ */ jsx(Sparkles, {})
 };
 function Icon({ severity, label, customIcon }) {
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [

package/dist/components/icon/Icon.module.css

@@ -35,3 +35,7 @@
 .brand {
   color: var(--color-fg-on-brand);
 }
+
+.accent {
+  color: var(--color-accent);
+}

package/dist/components/inline-status/InlineStatus.module.css

@@ -90,3 +90,9 @@
   --inline-status-fg: var(--color-brand);
   --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
+
+.accent {
+  --inline-status-bg: var(--color-accent-bg);
+  --inline-status-fg: var(--color-accent-fg);
+  --inline-status-border: var(--color-accent-border);
+}

package/dist/components/menu/Menu.cjs

@@ -6,6 +6,7 @@ var React = require('react');
 var styles = require('./Menu.module.css');
 var Checkbox = require('../forms/checkbox/Checkbox');
 var RadioButton = require('../forms/radio-buttons/RadioButton');
+var Switch = require('../forms/switch/Switch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -82,8 +83,23 @@ MenuBase.displayName = "Menu";
 const isInteractiveEl = (el) => React__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
 function applyMenuItemPropsToElement(child, opts) {
   var _a, _b, _c, _d;
-  const { active, selected, disabled, role, tabIndex = 0, className } = opts;
+  const {
+    active,
+    selected,
+    disabled,
+    role,
+    tabIndex = 0,
+    className,
+    endAdornment,
+    endAdornmentAriaHidden = true
+  } = opts;
   const childClass = [styles__default.default.item, active ? styles__default.default.active : "", selected ? styles__default.default.selected : ""].filter(Boolean).join(" ");
+  const endAdornmentProps = endAdornment ? {
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      child.props.children,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+    ] })
+  } : {};
   const nextImmediate = React__namespace.cloneElement(child, {
     className: [child.props.className, styles__default.default.interactiveChild, className].filter(Boolean).join(" ")
   });
@@ -94,7 +110,8 @@ function applyMenuItemPropsToElement(child, opts) {
       "aria-selected": selected || void 0,
       "aria-disabled": disabled || void 0,
       className: [child.props.className, styles__default.default.interactive, childClass, className].filter(Boolean).join(" "),
-      ...child.type === "button" ? { disabled } : {}
+      ...child.type === "button" ? { disabled } : {},
+      ...endAdornmentProps
     });
   }
   return React__namespace.cloneElement(nextImmediate, {
@@ -103,11 +120,23 @@ function applyMenuItemPropsToElement(child, opts) {
     "aria-selected": selected || void 0,
     "aria-disabled": disabled || void 0,
     className: [nextImmediate.props.className, styles__default.default.interactive, childClass].filter(Boolean).join(" "),
-    disabled
+    disabled,
+    ...endAdornmentProps
   });
 }
 const MenuItem = React__namespace.forwardRef(
-  ({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
+  ({
+    children,
+    active,
+    selected,
+    disabled,
+    className,
+    itemRole,
+    variant,
+    endAdornment,
+    endAdornmentAriaHidden = true,
+    ...liProps
+  }, ref) => {
     const resolvedRole = itemRole != null ? itemRole : "menuitem";
     const isBordered = variant === "bordered";
     const itemClassName = variant === "danger" ? styles__default.default.itemDanger : void 0;
@@ -119,10 +148,12 @@ const MenuItem = React__namespace.forwardRef(
         selected,
         disabled,
         role: resolvedRole,
-        className: itemClassName
+        className: itemClassName,
+        endAdornment,
+        endAdornmentAriaHidden
       }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         role: resolvedRole,
@@ -138,7 +169,10 @@ const MenuItem = React__namespace.forwardRef(
         ].filter(Boolean).join(" "),
         type: "button",
         disabled,
-        children
+        children: [
+          children,
+          endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+        ]
       }
     ) });
   }
@@ -295,6 +329,79 @@ const MenuRadioItem = React__namespace.forwardRef(
   }
 );
 MenuRadioItem.displayName = "Menu.RadioItem";
+const MenuSwitchItem = React__namespace.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      isSelected ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: interactiveRef,
+            role: interactiveProps == null ? void 0 : interactiveProps.role,
+            tabIndex: -1,
+            "aria-selected": isSelected || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
+            onClick: (event) => {
+              var _a;
+              (_a = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              const target = event.target;
+              if (target instanceof Element && target.closest("button") !== null) {
+                return;
+              }
+              onCheckedChange == null ? void 0 : onCheckedChange(!checked);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+              endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden != null ? endAdornmentAriaHidden : true, children: endAdornment }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.switchControl, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Switch.Switch,
+                {
+                  size: "sm",
+                  noContainer: true,
+                  checked,
+                  disabled,
+                  onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSwitchItem.displayName = "Menu.SwitchItem";
+const MenuLabel = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: [styles__default.default.label, className].filter(Boolean).join(" "), ...props })
+);
+MenuLabel.displayName = "Menu.Label";
 const MenuSeparator = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -325,6 +432,8 @@ const Menu = Object.assign(MenuBase, {
   Item: MenuItem,
   CheckItem: MenuCheckItem,
   RadioItem: MenuRadioItem,
+  SwitchItem: MenuSwitchItem,
+  Label: MenuLabel,
   Separator: MenuSeparator,
   Header: MenuHeader
 });

package/dist/components/menu/Menu.d.ts

@@ -10,6 +10,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /** Adds a gap of --spacing-xs between items */
     gap?: boolean;
 }
+export type MenuLabelProps = React.HTMLAttributes<HTMLSpanElement>;
 export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
@@ -26,6 +27,15 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     itemRole?: 'menuitem' | 'option';
     /** Adds a rounded border around the item */
     variant?: 'default' | 'bordered' | 'danger';
+    /**
+     * Extra content rendered after `children` (e.g. a status dot or badge).
+     * Appended as a trailing, vertically-centered slot inside the interactive
+     * element, so `children` stays exactly the icon + label content it was
+     * before — no need to know about `Menu.Label`.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the endAdornment wrapper. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
 }
 export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     label: React.ReactNode;
@@ -61,10 +71,28 @@ export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     /** Forwarded to the underlying RadioButton. Defaults to true. */
     endAdornmentAriaHidden?: boolean;
 }
+export interface MenuSwitchItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * Forwarded to the underlying Switch, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying Switch. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
+}
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {
     Item: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
     CheckItem: React.ForwardRefExoticComponent<MenuCheckItemProps & React.RefAttributes<HTMLLIElement>>;
     RadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLLIElement>>;
+    SwitchItem: React.ForwardRefExoticComponent<MenuSwitchItemProps & React.RefAttributes<HTMLLIElement>>;
     Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
     Header: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLLIElement>>;
+    Label: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLSpanElement>>;
 };

package/dist/components/menu/Menu.js

@@ -1,9 +1,10 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
+import { Switch } from '../forms/switch/Switch';
 
 const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
@@ -57,8 +58,23 @@ MenuBase.displayName = "Menu";
 const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
 function applyMenuItemPropsToElement(child, opts) {
   var _a, _b, _c, _d;
-  const { active, selected, disabled, role, tabIndex = 0, className } = opts;
+  const {
+    active,
+    selected,
+    disabled,
+    role,
+    tabIndex = 0,
+    className,
+    endAdornment,
+    endAdornmentAriaHidden = true
+  } = opts;
   const childClass = [styles.item, active ? styles.active : "", selected ? styles.selected : ""].filter(Boolean).join(" ");
+  const endAdornmentProps = endAdornment ? {
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      child.props.children,
+      /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+    ] })
+  } : {};
   const nextImmediate = React.cloneElement(child, {
     className: [child.props.className, styles.interactiveChild, className].filter(Boolean).join(" ")
   });
@@ -69,7 +85,8 @@ function applyMenuItemPropsToElement(child, opts) {
       "aria-selected": selected || void 0,
       "aria-disabled": disabled || void 0,
       className: [child.props.className, styles.interactive, childClass, className].filter(Boolean).join(" "),
-      ...child.type === "button" ? { disabled } : {}
+      ...child.type === "button" ? { disabled } : {},
+      ...endAdornmentProps
     });
   }
   return React.cloneElement(nextImmediate, {
@@ -78,11 +95,23 @@ function applyMenuItemPropsToElement(child, opts) {
     "aria-selected": selected || void 0,
     "aria-disabled": disabled || void 0,
     className: [nextImmediate.props.className, styles.interactive, childClass].filter(Boolean).join(" "),
-    disabled
+    disabled,
+    ...endAdornmentProps
   });
 }
 const MenuItem = React.forwardRef(
-  ({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
+  ({
+    children,
+    active,
+    selected,
+    disabled,
+    className,
+    itemRole,
+    variant,
+    endAdornment,
+    endAdornmentAriaHidden = true,
+    ...liProps
+  }, ref) => {
     const resolvedRole = itemRole != null ? itemRole : "menuitem";
     const isBordered = variant === "bordered";
     const itemClassName = variant === "danger" ? styles.itemDanger : void 0;
@@ -94,10 +123,12 @@ const MenuItem = React.forwardRef(
         selected,
         disabled,
         role: resolvedRole,
-        className: itemClassName
+        className: itemClassName,
+        endAdornment,
+        endAdornmentAriaHidden
       }) });
     }
-    return /* @__PURE__ */ jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxs(
       "button",
       {
         role: resolvedRole,
@@ -113,7 +144,10 @@ const MenuItem = React.forwardRef(
         ].filter(Boolean).join(" "),
         type: "button",
         disabled,
-        children
+        children: [
+          children,
+          endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+        ]
       }
     ) });
   }
@@ -270,6 +304,79 @@ const MenuRadioItem = React.forwardRef(
   }
 );
 MenuRadioItem.displayName = "Menu.RadioItem";
+const MenuSwitchItem = React.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      isSelected ? styles.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: interactiveRef,
+            role: interactiveProps == null ? void 0 : interactiveProps.role,
+            tabIndex: -1,
+            "aria-selected": isSelected || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
+            onClick: (event) => {
+              var _a;
+              (_a = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              const target = event.target;
+              if (target instanceof Element && target.closest("button") !== null) {
+                return;
+              }
+              onCheckedChange == null ? void 0 : onCheckedChange(!checked);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+              endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden != null ? endAdornmentAriaHidden : true, children: endAdornment }),
+              /* @__PURE__ */ jsx("span", { className: styles.switchControl, children: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  size: "sm",
+                  noContainer: true,
+                  checked,
+                  disabled,
+                  onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSwitchItem.displayName = "Menu.SwitchItem";
+const MenuLabel = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: [styles.label, className].filter(Boolean).join(" "), ...props })
+);
+MenuLabel.displayName = "Menu.Label";
 const MenuSeparator = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "li",
@@ -300,6 +407,8 @@ const Menu = Object.assign(MenuBase, {
   Item: MenuItem,
   CheckItem: MenuCheckItem,
   RadioItem: MenuRadioItem,
+  SwitchItem: MenuSwitchItem,
+  Label: MenuLabel,
   Separator: MenuSeparator,
   Header: MenuHeader
 });

package/dist/components/menu/Menu.module.css

@@ -39,13 +39,51 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
-.interactive > :last-child {
+/* Default case: applies wrap-safety to whichever element ends up last,
+   e.g. a plain label with no `endAdornment` prop involved — covers most
+   Menu.Item usage as-is. Excluded once .endAdornment is present (it's then
+   always the true last child) — wrap the label in <Menu.Label> in that case,
+   since it's no longer last and needs the wrap styling explicitly. */
+.interactive > :last-child:not(.endAdornment) {
   min-width: 0;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
+/* Explicit label slot (use <Menu.Label>) so wrap styling doesn't depend on
+   the label being the last child — needed once trailing content (the
+   `endAdornment` prop) is rendered after it. */
+.label {
+  min-width: 0;
+  flex: 1 1 auto;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Trailing content rendered via the `endAdornment` prop (e.g. a status
+   dot/badge). Centered on its own regardless of the row's flex-start
+   alignment, since it isn't tied to the first text line the way a leading
+   icon is. */
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  flex: 0 0 auto;
+}
+
+/* Wraps a bare <Switch noContainer> in Menu.SwitchItem so it docks at the
+   end of the row (label/endAdornment are rendered by Menu, not Switch).
+   Shrink-proof: Switch's own `.container` still matches the generic
+   `.row :global(.container)` full-width rule below, but that now resolves
+   against this wrapper's own content width, not the whole row. */
+.switchControl {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
 /*
   Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
   so that menu row styling still works for components that render a wrapper.

package/dist/components/metric-tile/MetricTile.module.css

@@ -57,6 +57,11 @@
   color: var(--color-fg-on-brand);
 }
 
+.tile[data-severity='accent'] {
+  background-color: var(--color-accent-bg-soft);
+  color: var(--color-accent-fg-soft);
+}
+
 .label {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold, 600);

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -16,6 +16,7 @@
   --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
   --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
   --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
+  --progress-fill-accent: color-mix(in srgb, var(--color-accent) 75%, transparent);
 
   position: relative;
   width: 100%;
@@ -106,6 +107,10 @@
   background: var(--progress-fill-error);
 }
 
+.progressSegment[data-severity='accent'] {
+  background: var(--progress-fill-accent);
+}
+
 /* Label overlay */
 .progressCenter {
   position: absolute;

package/dist/components/toast/Toast.module.css

@@ -41,6 +41,10 @@
   border-left-color: var(--color-brand);
 }
 
+.accent {
+  border-left-color: var(--color-accent);
+}
+
 .success {
   border-left-color: var(--color-status-success);
 }

package/dist/constants/severity.cjs

@@ -3,6 +3,7 @@
 const SeverityBgColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
   success: "var(--color-status-success)",
   error: "var(--color-status-error)",
   info: "var(--color-status-info)",
@@ -11,6 +12,7 @@ const SeverityBgColor = {
 const SeverityBorderColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
   success: "var(--color-status-success-border)",
   error: "var(--color-status-error-border)",
   info: "var(--color-status-info-border)",
@@ -19,6 +21,7 @@ const SeverityBorderColor = {
 const SeverityTextColor = {
   neutral: "var(--color-neutral-strong-fg)",
   brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
   success: "var(--color-status-success-fg)",
   error: "var(--color-status-error-fg)",
   info: "var(--color-status-info-fg)",

package/dist/constants/severity.js

@@ -1,6 +1,7 @@
 const SeverityBgColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
   success: "var(--color-status-success)",
   error: "var(--color-status-error)",
   info: "var(--color-status-info)",
@@ -9,6 +10,7 @@ const SeverityBgColor = {
 const SeverityBorderColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
   success: "var(--color-status-success-border)",
   error: "var(--color-status-error-border)",
   info: "var(--color-status-info-border)",
@@ -17,6 +19,7 @@ const SeverityBorderColor = {
 const SeverityTextColor = {
   neutral: "var(--color-neutral-strong-fg)",
   brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
   success: "var(--color-status-success-fg)",
   error: "var(--color-status-error-fg)",
   info: "var(--color-status-info-fg)",

package/dist/constants/severity.types.d.ts

@@ -1 +1 @@
-export type Severity = 'neutral' | 'brand' | 'success' | 'error' | 'info' | 'warning';
+export type Severity = 'neutral' | 'brand' | 'accent' | 'success' | 'error' | 'info' | 'warning';

package/dist/styles/themes/dbc/colors.css

@@ -43,6 +43,9 @@ html {
   /* Accents */
   --dbc-pink-500: light-dark(#ec4899, #f472b6);
   --dbc-pink-600: light-dark(#be185d, #db2777);
+  --dbc-magenta-500: light-dark(#d946ef, #e879f9);
+  --dbc-magenta-100: light-dark(#fae8ff, #3b0a45);
+  --dbc-magenta-700: light-dark(#a21caf, #f5d0fe);
 
   --dbc-gray-500: light-dark(#6b7280, #9ca3af);
   --dbc-gray-600: light-dark(#4b5563, #6b7280);
@@ -77,6 +80,11 @@ html {
   --color-brand: var(--dbc-blue-500);
   --color-brand-hover: var(--dbc-blue-600);
   --color-brand-strong: var(--dbc-blue-600);
+  --color-accent: var(--dbc-magenta-500);
+  --color-accent-bg: var(--dbc-magenta-100);
+  --color-accent-border: color-mix(in srgb, var(--dbc-magenta-500) 24%, transparent);
+  --color-accent-fg: var(--dbc-magenta-700);
+  --color-fg-on-accent: light-dark(#ffffff, #111827);
 
   /* Backgrounds & surfaces */
   --color-bg-page: light-dark(#ffffff, #111827);
@@ -176,6 +184,8 @@ html {
   --color-status-warning-fg-soft: var(--color-status-warning-fg);
   --color-status-error-fg-soft: var(--color-status-error-fg);
   --color-status-info-fg-soft: var(--color-status-info-fg);
+  --color-accent-bg-soft: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-surface));
+  --color-accent-fg-soft: var(--color-accent-fg);
 
   /* Chart colors */
   --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 10%, rgb(255 255 255 / 0));
@@ -184,6 +194,7 @@ html {
   --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
   --color-chart-warning: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
   --color-chart-brand: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-accent: color-mix(in srgb, var(--dbc-magenta-500) 75%, rgb(255 255 255 / 0));
   --color-chart-info: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
   --color-chart-error: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));
 
@@ -192,6 +203,7 @@ html {
   --color-chart-green: var(--color-chart-success);
   --color-chart-amber: var(--color-chart-warning);
   --color-chart-pink: var(--color-chart-brand);
+  --color-chart-magenta: var(--color-chart-accent);
   --color-chart-sky: var(--color-chart-info);
   --color-chart-red: var(--color-chart-error);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.150",
+  "version": "0.0.152",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",