@dbcdk/react-components 0.0.147 → 0.0.148

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

@@ -8,7 +8,10 @@
   color: var(--color-fg-default);
   font-family: var(--font-family);
   font-weight: var(--font-weight-default);
-  line-height: var(--line-height-tight);
+  /* 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
@@ -20,6 +23,7 @@
 .value {
   display: inline-flex;
   align-items: center;
+  height: 100%;
 }
 
 .label {

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/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.147",
+  "version": "0.0.148",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",