@dbcdk/react-components 0.0.200 → 0.0.202

package/dist/components/alert/Alert.cjs

@@ -2,7 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var styles = require('./Alert.module.css');
+var Button = require('../button/Button');
 var Headline = require('../headline/Headline');
 var Icon = require('../icon/Icon');
 
@@ -14,12 +16,16 @@ function Alert({
   children,
   title,
   headlineSize = 3,
+  headlineWeight = 600,
+  headlineVariant,
   severity = "neutral",
   customIcon,
   disableIcon = false,
   fullWidth = false,
   maxWidth = "72ch",
-  role = "status"
+  role = "status",
+  onClose,
+  closeLabel = "Luk"
 }) {
   const hasLeading = Boolean(customIcon) || !disableIcon;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -40,10 +46,32 @@ function Alert({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
           title ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.titleRow, children: [
             hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.title, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.title, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Headline.Headline,
+              {
+                size: headlineSize,
+                weight: headlineWeight,
+                variant: headlineVariant,
+                disableMargin: true,
+                children: title
+              }
+            ) })
           ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children })
-        ] })
+        ] }),
+        onClose ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            variant: "inline",
+            shape: "round",
+            size: "sm",
+            className: styles__default.default.closeButton,
+            "aria-label": closeLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+            onClick: onClose
+          }
+        ) : null
       ]
     }
   );

package/dist/components/alert/Alert.d.ts

@@ -1,14 +1,24 @@
 import type { JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
+import { type HeadlineProps } from '../headline/Headline';
 export interface AlertProps {
     children: ReactNode;
     title?: ReactNode;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    headlineWeight?: HeadlineProps['weight'];
+    headlineVariant?: HeadlineProps['variant'];
     severity?: Severity;
     customIcon?: ReactNode;
     disableIcon?: boolean;
     fullWidth?: boolean;
     maxWidth?: string | number;
     role?: 'status' | 'alert';
+    /**
+     * Shows a close button that calls this. The alert has no open state of its
+     * own: the parent decides whether to keep rendering it.
+     */
+    onClose?: () => void;
+    /** Accessible name for the close button. */
+    closeLabel?: string;
 }
-export declare function Alert({ children, title, headlineSize, severity, customIcon, disableIcon, fullWidth, maxWidth, role, }: AlertProps): JSX.Element;
+export declare function Alert({ children, title, headlineSize, headlineWeight, headlineVariant, severity, customIcon, disableIcon, fullWidth, maxWidth, role, onClose, closeLabel, }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
 import styles from './Alert.module.css';
+import { Button } from '../button/Button';
 import { Headline } from '../headline/Headline';
 import { Icon } from '../icon/Icon';
 
@@ -8,12 +10,16 @@ function Alert({
   children,
   title,
   headlineSize = 3,
+  headlineWeight = 600,
+  headlineVariant,
   severity = "neutral",
   customIcon,
   disableIcon = false,
   fullWidth = false,
   maxWidth = "72ch",
-  role = "status"
+  role = "status",
+  onClose,
+  closeLabel = "Luk"
 }) {
   const hasLeading = Boolean(customIcon) || !disableIcon;
   return /* @__PURE__ */ jsxs(
@@ -34,10 +40,32 @@ function Alert({
         /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
           title ? /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
             hasLeading ? /* @__PURE__ */ jsx("div", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
-            /* @__PURE__ */ jsx("div", { className: styles.title, children: /* @__PURE__ */ jsx(Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
+            /* @__PURE__ */ jsx("div", { className: styles.title, children: /* @__PURE__ */ jsx(
+              Headline,
+              {
+                size: headlineSize,
+                weight: headlineWeight,
+                variant: headlineVariant,
+                disableMargin: true,
+                children: title
+              }
+            ) })
           ] }) : null,
           /* @__PURE__ */ jsx("div", { className: styles.body, children })
-        ] })
+        ] }),
+        onClose ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "inline",
+            shape: "round",
+            size: "sm",
+            className: styles.closeButton,
+            "aria-label": closeLabel,
+            icon: /* @__PURE__ */ jsx(X, {}),
+            onClick: onClose
+          }
+        ) : null
       ]
     }
   );

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

@@ -1,7 +1,6 @@
 .container {
   --alert-bg: var(--color-bg-toolbar);
   --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
 
   display: flex;
   align-items: flex-start;
@@ -9,10 +8,11 @@
   inline-size: min(100%, var(--alert-max-width, 72ch));
   max-inline-size: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--alert-border);
   border-radius: var(--border-radius-default);
   background: var(--alert-bg);
   color: var(--alert-fg);
+  /* Severity stripe on the left edge. An inset shadow keeps size and padding unchanged. */
+  box-shadow: inset var(--border-width-thick) 0 0 var(--alert-accent, transparent);
   box-sizing: border-box;
 }
 
@@ -42,7 +42,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
   min-width: 0;
   flex: 1 1 auto;
 }
@@ -59,44 +59,60 @@
   font-size: var(--font-size-sm);
 }
 
+.closeButton {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  align-self: flex-start;
+}
+
 .neutral {
   --alert-bg: var(--color-bg-toolbar);
   --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
 }
 
 .success {
   --alert-bg: var(--color-status-success-bg);
   --alert-fg: var(--color-status-success-fg);
-  --alert-border: var(--color-status-success-border);
+  --alert-accent: var(--color-status-success);
 }
 
 .warning {
   --alert-bg: var(--color-status-warning-bg);
   --alert-fg: var(--color-status-warning-fg);
-  --alert-border: var(--color-status-warning-border);
+  --alert-accent: var(--color-status-warning);
 }
 
 .error {
   --alert-bg: var(--color-status-error-bg);
   --alert-fg: var(--color-status-error-fg);
-  --alert-border: var(--color-status-error-border);
+  --alert-accent: var(--color-status-error);
 }
 
 .info {
   --alert-bg: var(--color-status-info-bg);
   --alert-fg: var(--color-status-info-fg);
-  --alert-border: var(--color-status-info-border);
+  --alert-accent: var(--color-status-info);
 }
 
 .brand {
   --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
   --alert-fg: var(--color-brand);
-  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+  --alert-accent: var(--color-brand);
 }
 
 .accent {
   --alert-bg: var(--color-accent-bg);
   --alert-fg: var(--color-accent-fg);
-  --alert-border: var(--color-accent-border);
+  --alert-accent: var(--color-accent);
+}
+
+/* Square corners on the striped edge, so the stripe stays straight. */
+.success,
+.warning,
+.error,
+.info,
+.brand,
+.accent {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

package/dist/components/button/Button.cjs

@@ -2,9 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 var React = require('react');
+var lucideReact = require('lucide-react');
 var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
+var refs_utils = require('../../utils/refs.utils');
 var styles = require('./Button.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -33,15 +34,6 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
 const Button = React__namespace.forwardRef(function Button2({
   variant = "outlined",
   shape = "default",
@@ -58,7 +50,6 @@ const Button = React__namespace.forwardRef(function Button2({
   type = "button",
   ...rest
 }, ref) {
-  var _a;
   const { className: userClassName, ...buttonProps } = rest;
   const computedClassName = cx(
     styles__default.default.button,
@@ -71,17 +62,26 @@ const Button = React__namespace.forwardRef(function Button2({
     userClassName
   );
   const tooltipEnabled = Boolean(tooltip);
-  const childRef = isLink && React__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
-  const mergedRef = React__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const linkChild = isLink && React__namespace.isValidElement(children) ? children : null;
+  const childRef = linkChild == null ? void 0 : linkChild.props.ref;
   const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
     content: tooltipEnabled ? tooltip : null,
     placement: tooltipPlacement,
     offset: 8
   });
-  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
+  const { ref: hoverRef, ...tooltipTriggerProps } = triggerProps;
+  const { onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = tooltipTriggerProps;
+  const isDisabled = Boolean(buttonProps.disabled);
+  const tooltipOnControl = tooltipEnabled && (Boolean(linkChild) || !isDisabled);
+  const tooltipRef = tooltipOnControl ? hoverRef : void 0;
+  const mergedRef = React__namespace.useMemo(
+    () => refs_utils.mergeRefs(childRef, ref, tooltipRef),
+    [childRef, ref, tooltipRef]
+  );
   const describedBy = (() => {
     const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
     const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
+    if (linkChild == null ? void 0 : linkChild.props["aria-describedby"]) ids.unshift(linkChild.props["aria-describedby"]);
     return ids.length ? ids.join(" ") : void 0;
   })();
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -90,39 +90,48 @@ const Button = React__namespace.forwardRef(function Button2({
     loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
   ] });
   let buttonEl;
-  if (isLink && React__namespace.isValidElement(children)) {
-    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
+  if (linkChild) {
+    const Link = linkChild.type;
+    const childClassName = typeof linkChild.props.className === "string" ? linkChild.props.className : "";
     const { disabled, onClick, ...linkButtonProps } = buttonProps;
     const handleClick = (e) => {
+      var _a, _b;
       if (disabled) {
         e.preventDefault();
         return;
       }
+      (_b = (_a = linkChild.props).onClick) == null ? void 0 : _b.call(_a, e);
+      if (e.defaultPrevented) return;
       onClick == null ? void 0 : onClick(e);
     };
-    buttonEl = React__namespace.cloneElement(children, {
-      ...linkButtonProps,
-      ref: mergedRef,
-      className: cx(childClassName, computedClassName, styles__default.default.buttonLink),
-      ...tooltipEnabled ? triggerProps : {},
-      "aria-describedby": describedBy,
-      "aria-disabled": disabled ? "true" : void 0,
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    buttonEl = /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        ...linkChild.props,
+        ...linkButtonProps,
+        ...tooltipEnabled ? tooltipTriggerProps : {},
+        key: linkChild.key,
+        ref: mergedRef,
+        className: cx(childClassName, computedClassName, styles__default.default.buttonLink),
+        "aria-describedby": describedBy,
+        "aria-disabled": disabled ? "true" : void 0,
+        onClick: handleClick
+      },
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(styles__default.default.icon, spinIcon ? "spin" : ""), children: icon }),
-        children.props.children,
+        linkChild.props.children,
         loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
       ] })
-    });
+    );
   } else {
-    const isDisabled = Boolean(buttonProps.disabled);
     buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: mergedRef,
         className: computedClassName,
         type,
         ...buttonProps,
-        ...tooltipEnabled && !isDisabled ? triggerProps : {},
+        ...tooltipOnControl ? tooltipTriggerProps : {},
         "aria-describedby": describedBy,
         children: content
       }

package/dist/components/button/Button.js

@@ -1,22 +1,15 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { LoaderCircle } from 'lucide-react';
 import * as React from 'react';
+import { createElement } from 'react';
+import { LoaderCircle } from 'lucide-react';
 import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import { mergeRefs } from '../../utils/refs.utils';
 import styles from './Button.module.css';
 
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
 const Button = React.forwardRef(function Button2({
   variant = "outlined",
   shape = "default",
@@ -33,7 +26,6 @@ const Button = React.forwardRef(function Button2({
   type = "button",
   ...rest
 }, ref) {
-  var _a;
   const { className: userClassName, ...buttonProps } = rest;
   const computedClassName = cx(
     styles.button,
@@ -46,17 +38,26 @@ const Button = React.forwardRef(function Button2({
     userClassName
   );
   const tooltipEnabled = Boolean(tooltip);
-  const childRef = isLink && React.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
-  const mergedRef = React.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const linkChild = isLink && React.isValidElement(children) ? children : null;
+  const childRef = linkChild == null ? void 0 : linkChild.props.ref;
   const { triggerProps, id: tooltipId } = useTooltipTrigger({
     content: tooltipEnabled ? tooltip : null,
     placement: tooltipPlacement,
     offset: 8
   });
-  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
+  const { ref: hoverRef, ...tooltipTriggerProps } = triggerProps;
+  const { onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = tooltipTriggerProps;
+  const isDisabled = Boolean(buttonProps.disabled);
+  const tooltipOnControl = tooltipEnabled && (Boolean(linkChild) || !isDisabled);
+  const tooltipRef = tooltipOnControl ? hoverRef : void 0;
+  const mergedRef = React.useMemo(
+    () => mergeRefs(childRef, ref, tooltipRef),
+    [childRef, ref, tooltipRef]
+  );
   const describedBy = (() => {
     const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
     const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
+    if (linkChild == null ? void 0 : linkChild.props["aria-describedby"]) ids.unshift(linkChild.props["aria-describedby"]);
     return ids.length ? ids.join(" ") : void 0;
   })();
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -65,39 +66,48 @@ const Button = React.forwardRef(function Button2({
     loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
   ] });
   let buttonEl;
-  if (isLink && React.isValidElement(children)) {
-    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
+  if (linkChild) {
+    const Link = linkChild.type;
+    const childClassName = typeof linkChild.props.className === "string" ? linkChild.props.className : "";
     const { disabled, onClick, ...linkButtonProps } = buttonProps;
     const handleClick = (e) => {
+      var _a, _b;
       if (disabled) {
         e.preventDefault();
         return;
       }
+      (_b = (_a = linkChild.props).onClick) == null ? void 0 : _b.call(_a, e);
+      if (e.defaultPrevented) return;
       onClick == null ? void 0 : onClick(e);
     };
-    buttonEl = React.cloneElement(children, {
-      ...linkButtonProps,
-      ref: mergedRef,
-      className: cx(childClassName, computedClassName, styles.buttonLink),
-      ...tooltipEnabled ? triggerProps : {},
-      "aria-describedby": describedBy,
-      "aria-disabled": disabled ? "true" : void 0,
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    buttonEl = /* @__PURE__ */ createElement(
+      Link,
+      {
+        ...linkChild.props,
+        ...linkButtonProps,
+        ...tooltipEnabled ? tooltipTriggerProps : {},
+        key: linkChild.key,
+        ref: mergedRef,
+        className: cx(childClassName, computedClassName, styles.buttonLink),
+        "aria-describedby": describedBy,
+        "aria-disabled": disabled ? "true" : void 0,
+        onClick: handleClick
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx("span", { className: cx(styles.icon, spinIcon ? "spin" : ""), children: icon }),
-        children.props.children,
+        linkChild.props.children,
         loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
       ] })
-    });
+    );
   } else {
-    const isDisabled = Boolean(buttonProps.disabled);
     buttonEl = /* @__PURE__ */ jsx(
       "button",
       {
+        ref: mergedRef,
         className: computedClassName,
         type,
         ...buttonProps,
-        ...tooltipEnabled && !isDisabled ? triggerProps : {},
+        ...tooltipOnControl ? tooltipTriggerProps : {},
         "aria-describedby": describedBy,
         children: content
       }

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

@@ -21,6 +21,7 @@ function Checkbox({
   labelAs = "label",
   endAdornment,
   endAdornmentAriaHidden = true,
+  labelAction,
   size = "md",
   modified,
   containerLabel,
@@ -78,6 +79,7 @@ function Checkbox({
           }
         ) }),
         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 })),
+        labelAction && !containerLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.labelAction, "data-checkbox-label-action": "true", children: labelAction }),
         endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
     }
@@ -88,6 +90,7 @@ function Checkbox({
     {
       modified,
       label: containerLabel,
+      labelAction: containerLabel ? labelAction : void 0,
       htmlFor: controlId,
       error,
       helpText,

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -21,6 +21,13 @@ interface CheckboxProps {
      * Defaults to true since endAdornment is typically decorative.
      */
     endAdornmentAriaHidden?: boolean;
+    /**
+     * Content next to the label, e.g. a help button or other additional content.
+     * Rendered next to `containerLabel` when set, otherwise after the per-item
+     * `label`.
+     * Unlike `endAdornment`, it is never hidden from assistive tech.
+     */
+    labelAction?: ReactNode;
     size?: Size;
     containerLabel?: string;
     error?: string;
@@ -35,5 +42,5 @@ interface CheckboxProps {
     tooltip?: ReactNode;
     tooltipPlacement?: TooltipPlacement;
 }
-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 declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, labelAction, 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

@@ -15,6 +15,7 @@ function Checkbox({
   labelAs = "label",
   endAdornment,
   endAdornmentAriaHidden = true,
+  labelAction,
   size = "md",
   modified,
   containerLabel,
@@ -72,6 +73,7 @@ function Checkbox({
           }
         ) }),
         label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label })),
+        labelAction && !containerLabel && /* @__PURE__ */ jsx("span", { className: styles.labelAction, "data-checkbox-label-action": "true", children: labelAction }),
         endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
     }
@@ -82,6 +84,7 @@ function Checkbox({
     {
       modified,
       label: containerLabel,
+      labelAction: containerLabel ? labelAction : void 0,
       htmlFor: controlId,
       error,
       helpText,

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -57,7 +57,8 @@
   word-break: break-word;
 }
 
-.endAdornment {
+.endAdornment,
+.labelAction {
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;

package/dist/components/forms/form-select/FormSelect.cjs

@@ -55,6 +55,7 @@ function findSelectedOption(options, selectedValue, datakey) {
 function FormSelect({
   // InputContainer props
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -119,6 +120,7 @@ function FormSelect({
     InputContainer.InputContainer,
     {
       label,
+      labelAction,
       htmlFor: controlId,
       fullWidth,
       error,

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -31,5 +31,5 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
      */
     allowClearWhenRequired?: boolean;
 };
-export declare function FormSelect<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/form-select/FormSelect.js

@@ -30,6 +30,7 @@ function findSelectedOption(options, selectedValue, datakey) {
 function FormSelect({
   // InputContainer props
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -94,6 +95,7 @@ function FormSelect({
     InputContainer,
     {
       label,
+      labelAction,
       htmlFor: controlId,
       fullWidth,
       error,

package/dist/components/forms/input-container/InputContainer.cjs

@@ -24,7 +24,7 @@ function InputContainer({
   labelAlignment = "center",
   modified = false
 }) {
-  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles__default.default.label, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })

package/dist/components/forms/input-container/InputContainer.js

@@ -18,7 +18,7 @@ function InputContainer({
   labelAlignment = "center",
   modified = false
 }) {
-  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
     label && /* @__PURE__ */ jsxs("label", { className: styles.label, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })

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

@@ -2,7 +2,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 var react = require('react');
 var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
 var styles = require('./Select.module.css');
@@ -18,6 +17,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function Select({
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -46,6 +46,7 @@ function Select({
   const describedById = `${controlId}-desc`;
   const listboxId = `${controlId}-listbox`;
   const popoverRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
   const optionRefs = react.useRef([]);
   const typeaheadRef = react.useRef("");
   const typeaheadTimeoutRef = react.useRef(null);
@@ -61,9 +62,15 @@ function Select({
     };
   }, []);
   react.useEffect(() => {
-    var _a;
     if (!open) return;
-    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+    const focusActive = () => {
+      var _a, _b, _c;
+      (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+      (_c = (_b = optionRefs.current[activeIndex]) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
+    };
+    focusActive();
+    const frame = requestAnimationFrame(focusActive);
+    return () => cancelAnimationFrame(frame);
   }, [activeIndex, open]);
   const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
   const findTypeaheadMatch = (query, startIndex) => {
@@ -99,25 +106,30 @@ function Select({
     if (!open) setOpen(true);
   };
   const handleKeyDown = (e) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
       e.preventDefault();
       handleTypeahead(e.key);
       return;
     }
     switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-        }
-        break;
-      }
+      case "ArrowDown":
       case "ArrowUp": {
         e.preventDefault();
+        e.stopPropagation();
         if (!open) {
+          resetActiveToSelected();
           setOpen(true);
+          break;
         }
+        if (options.length === 0) break;
+        const nextIndex = Math.max(
+          0,
+          Math.min(activeIndex + (e.key === "ArrowDown" ? 1 : -1), options.length - 1)
+        );
+        setActiveIndex(nextIndex);
+        (_a = optionRefs.current[nextIndex]) == null ? void 0 : _a.focus();
+        (_c = (_b = optionRefs.current[nextIndex]) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
         break;
       }
       case "Enter":
@@ -129,20 +141,21 @@ function Select({
           typeaheadTimeoutRef.current = null;
         }
         if (!open) {
+          resetActiveToSelected();
           setOpen(true);
           return;
         }
         const opt = options[activeIndex];
         if (opt) {
           onChange(opt.value);
-          (_a = popoverRef.current) == null ? void 0 : _a.close();
+          (_d = popoverRef.current) == null ? void 0 : _d.close();
         }
         break;
       }
       case "Escape": {
         if (!open) return;
         e.preventDefault();
-        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        (_e = popoverRef.current) == null ? void 0 : _e.close();
         break;
       }
       case "Home": {
@@ -176,6 +189,7 @@ function Select({
     InputContainer.InputContainer,
     {
       label,
+      labelAction,
       htmlFor: controlId,
       fullWidth,
       error,
@@ -189,6 +203,7 @@ function Select({
           Popover.Popover,
           {
             ref: popoverRef,
+            anchorRef: triggerRef,
             open,
             fullWidth,
             onOpenChange: (next) => {
@@ -203,6 +218,10 @@ function Select({
               {
                 disabled,
                 ...tooltipEnabled ? triggerProps : {},
+                ref: (node) => {
+                  triggerRef.current = node;
+                  if (tooltipEnabled) triggerProps.ref(node);
+                },
                 id: controlId,
                 "data-cy": dataCy != null ? dataCy : "select-button",
                 onKeyDown: handleKeyDown,
@@ -246,7 +265,7 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDownCapture: 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;
@@ -258,7 +277,7 @@ function Select({
                     selected: isSelected,
                     itemRole: "option",
                     className: isSelected ? styles__default.default.selectedOption : void 0,
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {
                         ref: (el) => {
@@ -273,10 +292,7 @@ function Select({
                         },
                         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
-                        ]
+                        children: opt.label
                       }
                     )
                   },

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

@@ -20,5 +20,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     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, menuHeader, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, 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

@@ -1,6 +1,5 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Check } from 'lucide-react';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Select.module.css';
@@ -12,6 +11,7 @@ import { InputContainer } from '../input-container/InputContainer';
 
 function Select({
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -40,6 +40,7 @@ function Select({
   const describedById = `${controlId}-desc`;
   const listboxId = `${controlId}-listbox`;
   const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
   const optionRefs = useRef([]);
   const typeaheadRef = useRef("");
   const typeaheadTimeoutRef = useRef(null);
@@ -55,9 +56,15 @@ function Select({
     };
   }, []);
   useEffect(() => {
-    var _a;
     if (!open) return;
-    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+    const focusActive = () => {
+      var _a, _b, _c;
+      (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+      (_c = (_b = optionRefs.current[activeIndex]) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
+    };
+    focusActive();
+    const frame = requestAnimationFrame(focusActive);
+    return () => cancelAnimationFrame(frame);
   }, [activeIndex, open]);
   const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
   const findTypeaheadMatch = (query, startIndex) => {
@@ -93,25 +100,30 @@ function Select({
     if (!open) setOpen(true);
   };
   const handleKeyDown = (e) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
       e.preventDefault();
       handleTypeahead(e.key);
       return;
     }
     switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-        }
-        break;
-      }
+      case "ArrowDown":
       case "ArrowUp": {
         e.preventDefault();
+        e.stopPropagation();
         if (!open) {
+          resetActiveToSelected();
           setOpen(true);
+          break;
         }
+        if (options.length === 0) break;
+        const nextIndex = Math.max(
+          0,
+          Math.min(activeIndex + (e.key === "ArrowDown" ? 1 : -1), options.length - 1)
+        );
+        setActiveIndex(nextIndex);
+        (_a = optionRefs.current[nextIndex]) == null ? void 0 : _a.focus();
+        (_c = (_b = optionRefs.current[nextIndex]) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
         break;
       }
       case "Enter":
@@ -123,20 +135,21 @@ function Select({
           typeaheadTimeoutRef.current = null;
         }
         if (!open) {
+          resetActiveToSelected();
           setOpen(true);
           return;
         }
         const opt = options[activeIndex];
         if (opt) {
           onChange(opt.value);
-          (_a = popoverRef.current) == null ? void 0 : _a.close();
+          (_d = popoverRef.current) == null ? void 0 : _d.close();
         }
         break;
       }
       case "Escape": {
         if (!open) return;
         e.preventDefault();
-        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        (_e = popoverRef.current) == null ? void 0 : _e.close();
         break;
       }
       case "Home": {
@@ -170,6 +183,7 @@ function Select({
     InputContainer,
     {
       label,
+      labelAction,
       htmlFor: controlId,
       fullWidth,
       error,
@@ -183,6 +197,7 @@ function Select({
           Popover,
           {
             ref: popoverRef,
+            anchorRef: triggerRef,
             open,
             fullWidth,
             onOpenChange: (next) => {
@@ -197,6 +212,10 @@ function Select({
               {
                 disabled,
                 ...tooltipEnabled ? triggerProps : {},
+                ref: (node) => {
+                  triggerRef.current = node;
+                  if (tooltipEnabled) triggerProps.ref(node);
+                },
                 id: controlId,
                 "data-cy": dataCy != null ? dataCy : "select-button",
                 onKeyDown: handleKeyDown,
@@ -240,7 +259,7 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsxs(Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles.menu, children: [
+            children: /* @__PURE__ */ jsxs(Menu, { onKeyDownCapture: 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;
@@ -252,7 +271,7 @@ function Select({
                     selected: isSelected,
                     itemRole: "option",
                     className: isSelected ? styles.selectedOption : void 0,
-                    children: /* @__PURE__ */ jsxs(
+                    children: /* @__PURE__ */ jsx(
                       "button",
                       {
                         ref: (el) => {
@@ -267,10 +286,7 @@ function Select({
                         },
                         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
-                        ]
+                        children: opt.label
                       }
                     )
                   },

package/dist/components/popover/Popover.cjs

@@ -225,6 +225,7 @@ const Popover = React.forwardRef(function Popover2({
     if (!isOpen) return;
     const content = contentRef.current;
     if (!content) return;
+    if (anchorRef == null ? void 0 : anchorRef.current) triggerElRef.current = anchorRef.current;
     const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
     if (autoFocusContent) {
       const focusables = getFocusable(content);

package/dist/components/popover/Popover.js

@@ -201,6 +201,7 @@ const Popover = forwardRef(function Popover2({
     if (!isOpen) return;
     const content = contentRef.current;
     if (!content) return;
+    if (anchorRef == null ? void 0 : anchorRef.current) triggerElRef.current = anchorRef.current;
     const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
     if (autoFocusContent) {
       const focusables = getFocusable(content);

package/package.json

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