@dbcdk/react-components 0.0.88 → 0.0.89

package/dist/components/accordion/Accordion.d.ts

@@ -2,6 +2,7 @@ import type { JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
 export interface AccordionItem {
     header: string;
+    subheader?: ReactNode;
     headerAddition?: ReactNode;
     headerIcon?: ReactNode;
     severity?: Severity;

package/dist/components/accordion/components/AccordionRow.js

@@ -49,5 +49,5 @@ export function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate
     const buttonId = `${uid}-acc-btn-${index}`;
     const panelId = `${uid}-acc-panel-${index}`;
     const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
-    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
+    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, subheader: item.subheader, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
 }

package/dist/components/button/Button.js

@@ -67,7 +67,14 @@ export const Button = React.forwardRef(function Button({ variant = 'outlined', s
         });
     }
     else {
-        buttonEl = (_jsx("button", { className: computedClassName, type: type, ...buttonProps, ...(tooltipEnabled ? triggerProps : {}), "aria-describedby": describedBy, children: content }));
+        const isDisabled = Boolean(buttonProps.disabled);
+        buttonEl = (_jsx("button", { className: computedClassName, type: type, ...buttonProps, ...(tooltipEnabled && !isDisabled ? triggerProps : {}), "aria-describedby": describedBy, children: content }));
+        if (tooltipEnabled && isDisabled) {
+            buttonEl = (_jsx("span", { ref: triggerProps.ref, onPointerEnter: triggerProps.onPointerEnter, onPointerLeave: triggerProps.onPointerLeave, style: {
+                    display: fullWidth ? 'flex' : 'inline-flex',
+                    cursor: 'not-allowed',
+                }, children: buttonEl }));
+        }
     }
     return buttonEl;
 });

package/dist/components/button/Button.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -117,6 +117,7 @@
 
 .button.lg {
   height: var(--component-size-lg);
+  font-size: var(--font-size-md);
   min-block-size: var(--component-size-lg);
   padding-inline: var(--spacing-lg);
 }

package/dist/components/card/Card.d.ts

@@ -6,6 +6,7 @@ type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
 export interface CardProps {
     title?: string;
+    subheader?: ReactNode;
     loading?: boolean;
     variant?: CardVariant;
     size?: CardSize;
@@ -21,11 +22,6 @@ export interface CardProps {
     sectionTitle?: string;
     showSectionDivider?: boolean;
     children?: ReactNode;
-    /**
-     * Keep current behavior: if provided, Card becomes "linked".
-     * NOTE: this assumes your Hyperlink component can render the passed element correctly.
-     * If Hyperlink expects an <a>, pass <a href="...">...</a> or whatever your existing pattern is.
-     */
     link?: ReactNode;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/card/Card.js

@@ -4,6 +4,27 @@ import { CardMeta, CardMetaRow } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+/**
+ * Fix for flex gap issue:
+ * Distributes gap proportionally across cards
+ */
+function getGapShare(width) {
+    switch (width) {
+        case 25:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
+        case 33:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
+        case 50:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) / 2)';
+        case 66:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
+        case 75:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
+        case 100:
+        default:
+            return '0px';
+    }
+}
 function getInnerPlacementClass(imgPlacement, s) {
     switch (imgPlacement) {
         case 'top':
@@ -24,8 +45,13 @@ function getVariantClass(variant, s) {
             return s.variantDefault;
     }
 }
-function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
-    const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
+function CardImpl({ title, subheader, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
+    const outerStyle = width
+        ? {
+            ['--width']: `${width}%`,
+            ['--gap-share']: getGapShare(width),
+        }
+        : undefined;
     const mediaStyle = mediaWidth
         ? { ['--card-media-width']: `${mediaWidth}px` }
         : undefined;
@@ -35,8 +61,7 @@ function CardImpl({ title, loading = false, variant = 'default', size = 'md', he
     const showSection = !loading && (showSectionDivider || !!sectionTitle);
     const showBody = !loading && !!children;
     const showActions = !loading && !!actions;
-    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
-    // keep existing behavior
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, subheader: subheader, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
     const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));
 }

package/dist/components/card/Card.module.css

@@ -1,62 +1,53 @@
-/* OUTER WRAPPER (optional width control) */
 .outerContainer {
-  inline-size: var(--width, 100%);
+  --width: 100%;
+  --gap-share: 0px;
+
+  flex: 0 1 calc(var(--width) - var(--gap-share));
+  min-width: 0;
+  box-sizing: border-box;
 }
 
-/* CARD CONTAINER */
+/* Card surface */
 .container {
-  inline-size: 100%;
-  position: relative;
-  color: var(--card-fg-default, var(--color-fg-default));
-  background-color: var(--card-bg-default, var(--color-bg-surface));
-  border-radius: var(--border-radius-md);
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  box-shadow: var(--shadow-xs);
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    transform var(--transition-fast) var(--ease-standard);
-}
+  height: 100%;
+  border-radius: var(--border-radius-sm);
+  box-sizing: border-box;
 
-.container:hover {
-  box-shadow: var(--shadow-sm);
+  /* ✅ Restore border */
+  border: 1px solid var(--color-border-subtle);
+
+  /* Optional: ensure background sits under border */
+  background-clip: padding-box;
 }
 
-/* BACKGROUND VARIANTS */
+/* Variants */
 .variantDefault {
-  background-color: var(--card-bg-default, var(--color-bg-surface));
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
 }
 
 .variantSubtle {
-  background-color: var(--card-bg-subtle, var(--color-bg-contextual-subtle));
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
 }
 
-/* SIZE VARIANTS (define vars once; inner uses them) */
-.sm {
-  --card-pad: var(--spacing-md);
-  --card-gap: var(--spacing-md);
+/* Sizes */
+.sm .container {
+  padding: var(--spacing-md);
 }
-.md {
-  --card-pad: var(--spacing-lg);
-  --card-gap: var(--spacing-lg);
+
+.md .container {
+  padding: var(--spacing-lg);
 }
-.lg {
-  --card-pad: var(--spacing-xl);
-  --card-gap: var(--spacing-xl);
+
+.lg .container {
+  padding: var(--spacing-xl);
 }
 
-/* INNER LAYOUT */
+/* Layout */
 .inner {
-  margin-inline: auto;
   display: flex;
-  align-items: flex-start;
-  padding: var(--card-pad);
-  gap: var(--card-gap);
-}
-
-/* Media placement */
-.innerImgTop {
-  flex-direction: column;
+  gap: var(--spacing-lg);
+  height: 100%;
+  min-width: 0;
 }
 
 .innerImgLeft {
@@ -67,101 +58,97 @@
   flex-direction: row-reverse;
 }
 
-/* MEDIA */
-.media {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.innerImgLeft .media,
-.innerImgRight .media {
-  inline-size: var(--card-media-width, 56px);
-  max-inline-size: 25%;
-}
-
-.innerImgTop .media {
-  inline-size: 100%;
-  max-inline-size: 100%;
+.innerImgTop {
+  flex-direction: column;
 }
 
-.media img,
-.media picture,
-.media video,
-.media svg {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
+.media {
+  flex: 0 0 var(--card-media-width, auto);
+  min-width: 0;
 }
 
-/* CONTENT */
 .content {
-  flex: 1 1 auto;
-  min-inline-size: 0;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--spacing-md);
+  min-width: 0;
 }
 
-/* HEADER */
+/* Header */
 .header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--spacing-sm);
-}
-
-.header > :first-child {
-  flex: 1 1 auto;
-  min-inline-size: 0;
+  gap: var(--spacing-md);
+  min-width: 0;
 }
 
 .headerMeta {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+  flex: 0 0 auto;
 }
 
-/* LOADING */
-.loadingList {
-  display: grid;
-  gap: var(--spacing-sm);
+/* Body */
+.body {
+  min-width: 0;
 }
 
-.loadingRow {
-  display: grid;
-  grid-template-columns: auto 1fr;
+/* Actions */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-sm);
-  align-items: center;
+  margin-top: auto;
 }
 
-/* SECTION */
+/* Section */
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
 }
 
 .sectionDivider {
-  inline-size: 100%;
-  block-size: var(--border-width-thin);
-  background: var(--color-border-subtle);
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-subtle);
 }
 
 .sectionTitle {
-  font-weight: var(--font-weight-semibold);
+  font-weight: 500;
 }
 
-/* BODY */
-.body {
-  /* neutral container */
+/* Loading */
+.loadingList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
 }
 
-/* ACTIONS */
-.actions {
-  margin-top: auto;
+.loadingRow {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
   gap: var(--spacing-sm);
 }
+
+/* Responsive */
+@media screen and (max-width: 767px) {
+  .outerContainer {
+    --width: 100%;
+    --gap-share: 0px;
+
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .inner,
+  .innerImgLeft,
+  .innerImgRight,
+  .innerImgTop {
+    flex-direction: column;
+  }
+
+  .header {
+    flex-direction: column;
+  }
+}

package/dist/components/card-container/CardContainer.d.ts

@@ -2,10 +2,11 @@ import type { JSX, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 interface CardContainerProps {
     headline?: string;
+    subheader?: ReactNode;
     children?: ReactNode[];
     expand?: boolean;
     severity?: Severity;
     displayHeaderMarker?: boolean;
 }
-export declare function CardContainer({ children, headline, expand, severity, displayHeaderMarker, }: CardContainerProps): JSX.Element;
+export declare function CardContainer({ children, headline, subheader, expand, severity, displayHeaderMarker, }: CardContainerProps): JSX.Element;
 export {};

package/dist/components/card-container/CardContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Headline } from '../../components/headline/Headline';
 import styles from './CardContainer.module.css';
-export function CardContainer({ children, headline, expand, severity, displayHeaderMarker, }) {
-    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, disableMargin: true, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
+export function CardContainer({ children, headline, subheader, expand, severity, displayHeaderMarker, }) {
+    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, disableMargin: true, subheader: subheader, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
 }

package/dist/components/card-container/CardContainer.module.css

@@ -8,8 +8,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
+  --card-container-gap: var(--spacing-md);
   border-radius: var(--border-radius-sm);
-  --width: 100%;
 }
 
 .container.default {
@@ -47,14 +47,15 @@
   padding: var(--spacing-lg);
 }
 
-@media screen and (min-width: 768px) {
-  .container {
-    --width: 33.333%;
-  }
-}
-
 .container > * {
-  flex-grow: var(--expand);
-  flex-shrink: 1;
+  min-width: 0;
   box-sizing: border-box;
 }
+
+/* Mobile: stack */
+@media screen and (max-width: 767px) {
+  .container > * {
+    flex-basis: 100% !important;
+    max-width: 100%;
+  }
+}

package/dist/components/clear-button/ClearButton.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
+import * as React from 'react';
 interface ClearButtonProps {
-    onClick: () => void;
+    onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     absolute?: boolean;
 }
 export declare function ClearButton({ onClick, absolute }: ClearButtonProps): ReactNode;

package/dist/components/clear-button/ClearButton.js

@@ -2,8 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import styles from './ClearButton.module.css';
 export function ClearButton({ onClick, absolute }) {
-    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("span", { className: styles.button, role: "button", onClick: e => {
+    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("button", { className: styles.button, type: "button", "data-input-role": "clear", onMouseDown: e => {
+                e.preventDefault();
                 e.stopPropagation();
-                onClick();
+            }, onClick: e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }, children: _jsx(X, { size: 16 }) }) }));
 }

package/dist/components/clear-button/ClearButton.module.css

@@ -1,8 +1,14 @@
 .clearButton .button {
+  appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0;
+  border: 0;
+  background: transparent;
   color: var(--color-fg-subtle);
+  font: inherit;
+  line-height: 0;
   padding: var(--spacing-xxs);
   cursor: pointer;
   border-radius: 100%;

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,5 @@
+type DividerProps = {
+    spacing?: 'sm' | 'md' | 'lg';
+};
+export declare const Divider: ({ spacing }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/divider/Divider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const spacingMap = {
+    sm: 'var(--spacing-sm)',
+    md: 'var(--spacing-md)',
+    lg: 'var(--spacing-lg)',
+};
+export const Divider = ({ spacing = 'md' }) => {
+    return (_jsx("div", { style: {
+            borderTop: '1px solid var(--color-border-subtle)',
+            marginBlock: spacingMap[spacing],
+        } }));
+};

package/dist/components/forms/input/Input.d.ts

@@ -10,10 +10,11 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     maxWidth?: string | number;
     inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
-    onClear?: () => void;
+    onClear?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     onButtonClick?: () => void;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
+    trailingLabel?: string;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     tooltipOpenOnFocus?: boolean;

package/dist/components/forms/input/Input.js

@@ -18,7 +18,7 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
+export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, trailingLabel, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -28,6 +28,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
     const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+    const hasTrailingLabel = Boolean(trailingLabel);
     const hasValue = Boolean(inputProps.value);
     const hasVisibleClear = Boolean(onClear && hasValue);
     const hasEndAdornment = Boolean(endAdornment);
@@ -54,6 +55,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                 onClear ? styles.withClear : '',
                 hasInlineClear ? styles.withInlineClear : '',
                 hasButton ? styles.withButton : '',
+                hasTrailingLabel ? styles.withTrailingLabel : '',
                 className !== null && className !== void 0 ? className : '',
             ]
                 .filter(Boolean)
@@ -68,6 +70,8 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                         .filter(Boolean)
                         .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && (_jsx("span", { className: styles.icon, "data-input-role": "icon", children: icon })), startAdornment && (_jsx("span", { className: styles.startAdornment, "data-input-role": "start-adornment", children: startAdornment })), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
                                 .filter(Boolean)
-                                .join(' ') }), (reservesInlineClearSlot || hasEndAdornment) && (_jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [reservesInlineClearSlot ? (_jsx("span", { className: styles.clearSlot, "aria-hidden": hasVisibleClear ? undefined : 'true', children: hasVisibleClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null })) : null, endAdornment] })), hasVisibleClear && !hasEndAdornment && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                                .join(' ') }), (reservesInlineClearSlot || hasEndAdornment) && (_jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [reservesInlineClearSlot ? (_jsx("span", { className: styles.clearSlot, "aria-hidden": hasVisibleClear ? undefined : 'true', children: hasVisibleClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null })) : null, endAdornment] })), hasVisibleClear && !hasEndAdornment && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasTrailingLabel && (_jsx("span", { className: [styles.trailingLabel, inputSize ? styles[inputSize] : '']
+                        .filter(Boolean)
+                        .join(' '), children: trailingLabel })), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';

package/dist/components/forms/input/Input.module.css

@@ -375,6 +375,38 @@
   block-size: var(--icon-size-md);
 }
 
+/* Trailing label (unit, currency, etc.) */
+.withTrailingLabel .field {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.trailingLabel {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding-inline: var(--spacing-sm);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-muted);
+  background: var(--color-bg-toolbar);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  margin-left: calc(-1 * var(--border-width-thin));
+  border-top-right-radius: var(--border-radius-default);
+  border-bottom-right-radius: var(--border-radius-default);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.withTrailingLabel:has(.standalone) .trailingLabel {
+  border-top-right-radius: var(--border-radius-rounded);
+  border-bottom-right-radius: var(--border-radius-rounded);
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-sm);
+}
+
 /* Trailing action button (outside field) */
 .trailingButton {
   flex: 0 0 auto;

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

@@ -15,8 +15,9 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     datakey?: string;
     dataCy?: string;
     disabled?: boolean;
+    minWidth?: string | number;
     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, }: 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, }: SelectProps<T>): React.ReactNode;
 export {};

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

@@ -9,7 +9,7 @@ import { ClearButton } from '../../clear-button/ClearButton';
 import { Menu } from '../../menu/Menu';
 import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
-export function Select({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
+export function Select({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, minWidth, }) {
     const generatedId = useId();
     const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
     const describedById = `${controlId}-desc`;
@@ -169,7 +169,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, className: modified ? styles.triggerModified : undefined, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, style: minWidth != null ? { minWidth } : undefined, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, className: modified ? styles.triggerModified : undefined, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -33,6 +33,7 @@ interface TypeaheadProps<T> {
     spellCheck?: InputProps['spellCheck'];
     popoverAnchorRef?: React.RefObject<HTMLElement | null>;
     fitContent?: boolean;
+    enableHotkey?: boolean;
 }
-export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, }: TypeaheadProps<T>): React.ReactElement;
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, enableHotkey, }: TypeaheadProps<T>): React.ReactElement;
 export {};