@dbcdk/react-components 0.0.146 → 0.0.148

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

@@ -11,14 +11,16 @@ function AttributeChip({
   label,
   value,
   size = "md",
-  loading
+  loading,
+  severity = "neutral"
 }) {
+  const valueClassName = [styles__default.default.value, styles__default.default[severity], !label && styles__default.default.valueStandalone].filter(Boolean).join(" ");
   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: "|" })
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -1,9 +1,11 @@
 import type { JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface AttributeChipProps {
     label?: string;
     value: string | number | boolean;
     loading?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    severity?: Severity;
 }
-export declare function AttributeChip({ label, value, size, loading, }: AttributeChipProps): JSX.Element;
+export declare function AttributeChip({ label, value, size, loading, severity, }: AttributeChipProps): JSX.Element;
 export {};

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

@@ -5,14 +5,16 @@ function AttributeChip({
   label,
   value,
   size = "md",
-  loading
+  loading,
+  severity = "neutral"
 }) {
+  const valueClassName = [styles.value, styles[severity], !label && styles.valueStandalone].filter(Boolean).join(" ");
   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: "|" })
     ] }) : null,
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    /* @__PURE__ */ jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

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

@@ -8,14 +8,22 @@
   color: var(--color-fg-default);
   font-family: var(--font-family);
   font-weight: var(--font-weight-default);
-  line-height: var(--line-height-tight);
-  padding-inline: var(--spacing-sm);
+  /* All text here is single-line and vertically centered via flex, so use a
+     tight line-height instead of the paragraph-oriented default — that
+     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 {
   display: inline-flex;
   align-items: center;
+  height: 100%;
 }
 
 .label {
@@ -24,29 +32,74 @@
 }
 
 .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);
 }
 
 .separator {
   color: var(--color-border-default);
-  margin-inline: var(--spacing-xxs);
+  margin-inline-start: var(--spacing-xxs);
+  margin-inline-end: var(--spacing-2xs);
 }
 
 /* Sizes */
 .sm {
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);
-  padding-inline: var(--spacing-xs);
 }
 
 .md {
   height: var(--component-size-sm);
   font-size: var(--font-size-sm);
-  padding-inline: var(--spacing-sm);
 }
 
 .lg {
   height: var(--component-size-md);
   font-size: var(--font-size-md);
-  padding-inline: var(--spacing-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/forms/checkbox/Checkbox.cjs

@@ -19,6 +19,8 @@ function Checkbox({
   disabled,
   label,
   labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
   size = "md",
   modified,
   containerLabel,
@@ -70,7 +72,8 @@ function Checkbox({
             children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })
           }
         ) }),
-        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/checkbox/Checkbox.d.ts

@@ -11,6 +11,16 @@ interface CheckboxProps {
     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;
@@ -25,5 +35,5 @@ interface CheckboxProps {
     tooltip?: ReactNode;
     tooltipPlacement?: TooltipPlacement;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
 export {};

package/dist/components/forms/checkbox/Checkbox.js

@@ -13,6 +13,8 @@ function Checkbox({
   disabled,
   label,
   labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
   size = "md",
   modified,
   containerLabel,
@@ -64,7 +66,8 @@ function Checkbox({
             children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })
           }
         ) }),
-        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/checkbox/Checkbox.module.css

@@ -44,6 +44,12 @@
   word-break: break-word;
 }
 
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
 .checkbox:hover {
   border-color: var(--color-fg-default);
 }

package/dist/components/forms/radio-buttons/RadioButton.cjs

@@ -18,6 +18,8 @@ function RadioButton({
   onChange,
   disabled,
   label,
+  endAdornment,
+  endAdornmentAriaHidden = true,
   variant = "outlined",
   size = "md",
   containerLabel,
@@ -69,7 +71,8 @@ function RadioButton({
         }
       )
     ] }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label })
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }),
+    endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
   ] });
   if (noContainer || !containerLabel && !error) return content;
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/forms/radio-buttons/RadioButton.d.ts

@@ -15,6 +15,16 @@ export interface RadioButtonProps {
     onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     label?: string;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * The component owns the layout/spacing for this slot.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Whether the endAdornment wrapper is hidden from assistive tech.
+     * Defaults to true since endAdornment is typically decorative.
+     */
+    endAdornmentAriaHidden?: boolean;
     variant?: Variant;
     size?: Size;
     containerLabel?: string;
@@ -32,5 +42,5 @@ export interface RadioButtonProps {
     id?: string;
     'data-cy'?: string;
 }
-export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
+export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, endAdornment, endAdornmentAriaHidden, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
 export {};

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -12,6 +12,8 @@ function RadioButton({
   onChange,
   disabled,
   label,
+  endAdornment,
+  endAdornmentAriaHidden = true,
   variant = "outlined",
   size = "md",
   containerLabel,
@@ -63,7 +65,8 @@ function RadioButton({
         }
       )
     ] }),
-    label && /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label })
+    label && /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }),
+    endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
   ] });
   if (noContainer || !containerLabel && !error) return content;
   return /* @__PURE__ */ jsx(

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -81,6 +81,12 @@
   flex: 1;
 }
 
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
 .primary.checked {
   background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
 }

package/dist/components/forms/select/Select.cjs

@@ -38,7 +38,8 @@ function Select({
   datakey,
   dataCy,
   disabled,
-  minWidth
+  minWidth,
+  menuHeader
 }) {
   const generatedId = react.useId();
   const controlId = id != null ? id : `select-${generatedId}`;
@@ -109,18 +110,14 @@ function Select({
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.max(i - 1, 0));
         break;
       }
       case "Enter":
@@ -241,40 +238,44 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Menu.Menu.Item,
-                {
-                  active: isActive,
-                  itemRole: "option",
-                  "aria-selected": isSelected,
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      ref: (el) => {
-                        optionRefs.current[index] = el;
-                      },
-                      type: "button",
-                      tabIndex: isActive ? 0 : -1,
-                      onClick: () => {
-                        var _a;
-                        onChange(opt.value);
-                        (_a = popoverRef.current) == null ? void 0 : _a.close();
-                      },
-                      onFocus: () => setActiveIndex(index),
-                      style: { display: "flex", alignItems: "center", width: "100%" },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
-                        opt.label
-                      ]
-                    }
-                  )
-                },
-                String(opt.value)
-              );
-            }) })
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
+              options.map((opt, index) => {
+                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  Menu.Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles__default.default.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          optionRefs.current[index] = el;
+                        },
+                        type: "button",
+                        tabIndex: isActive ? 0 : -1,
+                        onClick: () => {
+                          var _a;
+                          onChange(opt.value);
+                          (_a = popoverRef.current) == null ? void 0 : _a.close();
+                        },
+                        onFocus: () => setActiveIndex(index),
+                        style: { display: "flex", alignItems: "center", width: "100%" },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+                          opt.label
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
           }
         ),
         (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })

package/dist/components/forms/select/Select.d.ts

@@ -16,8 +16,9 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     dataCy?: string;
     disabled?: boolean;
     minWidth?: string | number;
+    menuHeader?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -32,7 +32,8 @@ function Select({
   datakey,
   dataCy,
   disabled,
-  minWidth
+  minWidth,
+  menuHeader
 }) {
   const generatedId = useId();
   const controlId = id != null ? id : `select-${generatedId}`;
@@ -103,18 +104,14 @@ function Select({
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.max(i - 1, 0));
         break;
       }
       case "Enter":
@@ -235,40 +232,44 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsx(
-                Menu.Item,
-                {
-                  active: isActive,
-                  itemRole: "option",
-                  "aria-selected": isSelected,
-                  children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      ref: (el) => {
-                        optionRefs.current[index] = el;
-                      },
-                      type: "button",
-                      tabIndex: isActive ? 0 : -1,
-                      onClick: () => {
-                        var _a;
-                        onChange(opt.value);
-                        (_a = popoverRef.current) == null ? void 0 : _a.close();
-                      },
-                      onFocus: () => setActiveIndex(index),
-                      style: { display: "flex", alignItems: "center", width: "100%" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
-                        opt.label
-                      ]
-                    }
-                  )
-                },
-                String(opt.value)
-              );
-            }) })
+            children: /* @__PURE__ */ jsxs(Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
+              options.map((opt, index) => {
+                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          optionRefs.current[index] = el;
+                        },
+                        type: "button",
+                        tabIndex: isActive ? 0 : -1,
+                        onClick: () => {
+                          var _a;
+                          onChange(opt.value);
+                          (_a = popoverRef.current) == null ? void 0 : _a.close();
+                        },
+                        onFocus: () => setActiveIndex(index),
+                        style: { display: "flex", alignItems: "center", width: "100%" },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                          opt.label
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
           }
         ),
         (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })

package/dist/components/forms/select/Select.module.css

@@ -30,3 +30,12 @@
   box-shadow: inset 0 0 0 1px
     color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }
+
+.selectedOption > button {
+  background-color: var(--color-bg-toolbar-hover);
+}
+
+.selectedOption > button:hover,
+.selectedOption > button:focus-visible {
+  background-color: var(--color-bg-toolbar-hover);
+}

package/dist/components/menu/Menu.cjs

@@ -153,6 +153,8 @@ const MenuCheckItem = React__namespace.forwardRef(
     interactiveRef,
     interactiveProps,
     onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
     className,
     ...liProps
   }, ref) => {
@@ -200,6 +202,8 @@ const MenuCheckItem = React__namespace.forwardRef(
                 disabled,
                 labelAs: "span",
                 label,
+                endAdornment,
+                endAdornmentAriaHidden,
                 onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
               }
             )
@@ -221,6 +225,8 @@ const MenuRadioItem = React__namespace.forwardRef(
     interactiveRef,
     interactiveProps,
     onValueChange,
+    endAdornment,
+    endAdornmentAriaHidden,
     className,
     ...liProps
   }, ref) => {
@@ -277,6 +283,8 @@ const MenuRadioItem = React__namespace.forwardRef(
                 checked,
                 disabled,
                 label,
+                endAdornment,
+                endAdornmentAriaHidden,
                 onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
               }
             )

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

@@ -35,6 +35,13 @@ export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     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 Checkbox, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying Checkbox. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
 }
 export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     name: string;
@@ -46,6 +53,13 @@ export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     interactiveRef?: React.Ref<HTMLDivElement>;
     interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
     onValueChange?: (value: string) => void;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * Forwarded to the underlying RadioButton, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying RadioButton. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {
     Item: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/menu/Menu.js

@@ -128,6 +128,8 @@ const MenuCheckItem = React.forwardRef(
     interactiveRef,
     interactiveProps,
     onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
     className,
     ...liProps
   }, ref) => {
@@ -175,6 +177,8 @@ const MenuCheckItem = React.forwardRef(
                 disabled,
                 labelAs: "span",
                 label,
+                endAdornment,
+                endAdornmentAriaHidden,
                 onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
               }
             )
@@ -196,6 +200,8 @@ const MenuRadioItem = React.forwardRef(
     interactiveRef,
     interactiveProps,
     onValueChange,
+    endAdornment,
+    endAdornmentAriaHidden,
     className,
     ...liProps
   }, ref) => {
@@ -252,6 +258,8 @@ const MenuRadioItem = React.forwardRef(
                 checked,
                 disabled,
                 label,
+                endAdornment,
+                endAdornmentAriaHidden,
                 onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
               }
             )

package/dist/components/page-layout/PageLayout.module.css

@@ -176,7 +176,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding-inline: var(--spacing-xl);
+  padding-inline: var(--spacing-md);
 }
 
 .headerContent {

package/package.json

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