@dbcdk/react-components 0.0.149 → 0.0.151

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/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/overlay/modal/Modal.cjs

@@ -18,6 +18,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -143,6 +144,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/components/overlay/modal/Modal.d.ts

@@ -14,6 +14,7 @@ export type ModalProps = {
     onRequestClose: () => void;
     header?: ReactNode;
     subheader?: ReactNode;
+    headerAddition?: ReactNode;
     content?: ReactNode;
     children?: ReactNode;
     primaryAction?: ModalActionConfig;
@@ -25,4 +26,4 @@ export type ModalProps = {
     width?: number | string;
     ariaLabel?: string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, subheader, headerAddition, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -12,6 +12,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -137,6 +138,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/styles/styles.css

@@ -237,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

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

@@ -55,6 +55,8 @@ html {
 
   --dbc-amber-700: light-dark(#b45309, #f59e0b);
   --dbc-amber-100: light-dark(#fff7ed, #2b1b00);
+  /* Fixed (not light-dark): needs to stay a legible pale gold behind dark ink in both schemes */
+  --dbc-amber-200: #fde68a;
   --dbc-amber-800: light-dark(#92400e, #fcd34d);
   --dbc-amber-400: light-dark(#f59e0b, #fbbf24);
 
@@ -99,8 +101,8 @@ html {
   --color-bg-selected-hover: var(--dbc-blue-150);
 
   /* Highlight */
-  --color-highlight-bg: var(--color-bg-selected-hover);
-  --color-highlight-fg: var(--color-fg-default);
+  --color-highlight-bg: var(--dbc-amber-200);
+  --color-highlight-fg: #1a1a1a;
 
   --color-neutral: var(--dbc-neutral-200);
 

package/dist/styles.css

@@ -237,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

package/package.json

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

package/dist/styles/themes/forfatterweb/light.css

@@ -1,121 +0,0 @@
-:root {
-  /* Colors */
-  --color-primary: #1e88e5;
-  --color-primary-hover: #007bb0;
-  --color-highlight: #3b99e0;
-  --focus-ring: 0 0 0 2px #3b99e0;
-  --color-primary-hover: #0932b6;
-  --color-secondary: #6b7280;
-  --color-secondary-hover: #4b5563;
-  --color-accent: #ec4899;
-  --color-accent-hover: #be185d;
-
-  --color-highlight: #0932b6;
-  --color-hover: var(--opac-bg-light);
-
-  --color-background: #ffffff;
-
-  --color-text: #111827;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-muted: #6b7280;
-  --color-text-inverse: #ffffff;
-
-  --color-border: #e5e7eb;
-  --color-border-strong: #d1d5db;
-
-  --color-success: #16a34a;
-  --color-warning: #f59e0b;
-  --color-error: #dc2626;
-  --color-info: #0ea5e9;
-
-  --color-chart-empty: color-mix(in srgb, var(--color-text-muted) 15%, rgb(255 255 255 / 0));
-  --color-chart-neutral: color-mix(in srgb, var(--color-text-muted) 25%, rgb(255 255 255 / 0));
-  --color-chart-primary: color-mix(in srgb, var(--color-primary) 75%, rgb(255 255 255 / 0));
-  --color-chart-success: color-mix(in srgb, var(--color-success) 75%, rgb(255 255 255 / 0));
-  --color-chart-warning: color-mix(in srgb, var(--color-warning) 75%, rgb(255 255 255 / 0));
-  --color-chart-brand: color-mix(in srgb, var(--color-accent) 75%, rgb(255 255 255 / 0));
-  --color-chart-info: color-mix(in srgb, var(--color-info) 75%, rgb(255 255 255 / 0));
-  --color-chart-error: color-mix(in srgb, var(--color-error) 75%, rgb(255 255 255 / 0));
-
-  /* Legacy aliases */
-  --color-chart-blue: var(--color-chart-primary);
-  --color-chart-green: var(--color-chart-success);
-  --color-chart-amber: var(--color-chart-warning);
-  --color-chart-pink: var(--color-chart-brand);
-  --color-chart-sky: var(--color-chart-info);
-  --color-chart-red: var(--color-chart-error);
-
-  --opac-bg-light: rgba(0, 0, 0, 0.025);
-  --opac-bg-default: rgba(0, 0, 0, 0.05);
-  --opac-bg-dark: rgba(0, 0, 0, 0.1);
-  --opac-bg-dark-inverse: rgba(255, 255, 255, 0.1);
-
-  /* Spacing */
-  --spacing-xxs: 0.25rem;
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-
-  --icon-size: 20px;
-
-  --component-size-xs: 1.5rem;
-  --component-size-sm: 2rem;
-  --component-size-md: 2.5rem;
-  --component-size-lg: 3rem;
-  --component-size-xl: 4rem;
-
-  /* Borders */
-
-  --border-width-thin: 1px;
-  --border-width-thick: 2px;
-
-  --border-radius-none: 0;
-  --border-radius-default: 0.25rem;
-  --border-radius-rounded: 2rem;
-  --border-radius-round: 50%;
-
-  /* Typography */
-  --font-family: Roboto, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, monospace;
-
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 2rem;
-  --font-size-2xl: 3rem;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* Overlay */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 250ms ease-in-out;
-  --transition-slow: 400ms ease-in-out;
-
-  --focus-ring: 0 0 0 2px var(--color-primary);
-
-  /* Layers */
-  --z-dropdown: 1000;
-  --z-sticky: 1100;
-  --z-modal: 1200;
-  --z-popover: 1300;
-  --z-tooltip: 1400;
-}

package/dist/themes/forfatterweb.css

@@ -1,2 +0,0 @@
-@import '../styles/themes/forfatterweb/light.css';
-@import '../index.css';