@dbcdk/react-components 0.0.44 → 0.0.46

package/dist/components/datetime-picker/DateTimePicker.js

@@ -346,7 +346,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             var _a, _b;
             return (_jsx("div", { onClick: toggle, className: [styles.triggerWrap, fullWidth ? styles.triggerWrapFullWidth : '']
                     .filter(Boolean)
-                    .join(' '), children: _jsx(Input, { ...inputProps, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
+                    .join(' '), children: _jsx(Input, { ...inputProps, fieldClassName: styles.compactTriggerField, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
                         setDirty(true);
                         const raw = e.target.value;
                         const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, false);

package/dist/components/datetime-picker/DateTimePicker.module.css

@@ -7,6 +7,15 @@
   width: 100%;
 }
 
+.compactTriggerField {
+  padding-block: 2px;
+  padding-inline-end: calc(var(--spacing-xs) + 24px);
+}
+
+.compactTriggerField.fieldWithIcon {
+  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-sm));
+}
+
 .panel {
   display: grid;
   grid-template-columns: 1fr;

package/dist/components/filter-field/FilterField.d.ts

@@ -25,10 +25,11 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     placeholder?: string;
     disabled?: boolean;
     width?: string;
+    maxWidth?: string;
     debounceTime?: number;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, debounceTime, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, maxWidth, debounceTime, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

package/dist/components/filter-field/FilterField.js

@@ -3,9 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { useMemo, useRef, useState, useEffect } from 'react';
 import { Input } from '../../components/forms/input/Input';
-import { MultiSelect } from '../../components/forms/multi-select/MultiSelect';
+import { Typeahead } from '../../components/forms/typeahead/Typeahead';
 import styles from './FilterField.module.css';
-import { Select } from '../forms/select/Select';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 const LABELS = {
@@ -70,8 +69,8 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
-    var _a, _b;
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, maxWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
+    var _a, _b, _c, _d, _e, _f;
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
     const [selectedOperator, setSelectedOperator] = useState(operator);
     const active = isFilterActive(value);
@@ -159,16 +158,18 @@ export function FilterField({ field, control, operator, value, onChange, operato
     }, []);
     return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
             .filter(Boolean)
-            .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, style: { width }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, value: localValue, onChange: e => {
+            .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: [styles.valueWrapper, control === 'input' ? 'dbc-flex dbc-flex-grow' : '']
+                    .filter(Boolean)
+                    .join(' '), style: { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         setLocalValue(next);
                         scheduleEmitValue(next);
                     }, onBlur: () => {
                         flushPendingValue();
-                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, onClear: () => {
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'off', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
                         clearDebounce();
                         pendingValueRef.current = '';
                         setLocalValue('');
                         emit({ value: '' });
-                    } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }), disabled: disabled })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: nextSelectedValues => emit({ value: nextSelectedValues }), onClear: () => emit({ value: [] }), fullWidth: true, disabled: disabled, children: placeholder })) })] }));
+                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), placeholder: placeholder, variant: "embedded", inputProps: { inputSize: size }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: true })) })] }));
 }

package/dist/components/filter-field/FilterField.module.css

@@ -86,8 +86,8 @@
   content: '';
   position: absolute;
   inset-inline-start: 0;
-  top: 1px;
-  bottom: 1px;
+  top: 0;
+  bottom: 0;
   width: 3px;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
@@ -97,12 +97,7 @@
 }
 
 .filterField.outlined.active::before {
-  inset-inline-start: -1px;
-  top: -1px;
-  bottom: -1px;
-  width: 4px;
-  border-top-left-radius: var(--border-radius-default);
-  border-bottom-left-radius: var(--border-radius-default);
+  width: 3px;
 }
 
 /* =========================
@@ -273,7 +268,7 @@
    ========================= */
 
 .filterField .valueWrapper {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   padding: 0;
   height: 100%;
@@ -290,12 +285,37 @@
 
 .filterField .valueWrapper > div {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   height: 100%;
   width: 100%;
   min-width: 0;
 }
 
+/* Embedded typeahead tweaks */
+.filterField .valueWrapper .field {
+  min-height: unset;
+  height: 100%;
+  block-size: 100%;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+.filterField .valueWrapper .input {
+  height: 100%;
+  block-size: 100%;
+  min-height: unset;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+}
+.filterField .valueWrapper .startAdornment {
+  margin-left: 0;
+  gap: 2px;
+}
+
 /* =========================
    TEXT
    ========================= */

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

@@ -7,6 +7,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     autoFocus?: boolean;
     minWidth?: string | number;
     width?: string | number;
+    maxWidth?: string | number;
     inputSize?: Size;
     variant?: InputVariant;
     onClear?: () => void;
@@ -16,5 +17,15 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     modified?: boolean;
+    /**
+     * Custom content to render inside the input field, before the input element (e.g. chips)
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Custom content to render inside the input field, after the input element
+     */
+    endAdornment?: React.ReactNode;
+    fieldClassName?: string;
+    'data-cy'?: string;
 };
 export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;

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, icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, style, className, ...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, id, style, className, fieldClassName, startAdornment, endAdornment, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -32,6 +32,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
         ...(style !== null && style !== void 0 ? style : {}),
         ...(minWidth ? { ['--input-min-width']: minWidth } : null),
         ...(width ? { ['--input-width']: width } : null),
+        ...(maxWidth ? { ['--input-max-width']: maxWidth } : null),
     };
     const { triggerProps } = useTooltipTrigger({
         content: tooltip,
@@ -47,13 +48,15 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                 className !== null && className !== void 0 ? className : '',
             ]
                 .filter(Boolean)
-                .join(' '), children: [_jsxs("div", { className: styles.field, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [
-                                styles.input,
-                                icon ? styles.inputWithIcon : '',
-                                inputSize ? styles[inputSize] : '',
-                                styles[variant],
-                            ]
-                                .filter(Boolean)
-                                .join(' ') }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                .join(' '), children: [_jsxs("div", { className: [
+                        styles.field,
+                        styles[variant],
+                        icon ? styles.fieldWithIcon : '',
+                        inputSize ? styles[inputSize] : '',
+                        modified ? styles.modified : '',
+                        fieldClassName !== null && fieldClassName !== void 0 ? fieldClassName : '',
+                    ]
+                        .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, children: icon }), startAdornment && _jsx("span", { className: styles.startAdornment, children: startAdornment }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : ''].filter(Boolean).join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, 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

@@ -22,8 +22,20 @@
   display: flex;
   align-items: center;
   flex: 1 1 auto;
+  height: 100%;
   min-inline-size: 0;
   color: var(--color-fg-default);
+  background: var(--color-bg-surface);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+  box-sizing: border-box;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
 }
 
 /* Actual input */
@@ -33,24 +45,15 @@
   inline-size: 100%;
   box-sizing: border-box;
   text-overflow: ellipsis;
-
   color: var(--color-fg-default);
-  background: var(--color-bg-surface);
+  background: transparent;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
 }
 
 .input::placeholder {
@@ -58,8 +61,7 @@
 }
 
 .input:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: transparent;
+  background-color: transparent;
   color: var(--color-disabled-fg);
   cursor: not-allowed;
   opacity: 1;
@@ -72,7 +74,7 @@
   border-bottom-right-radius: 0;
 }
 
-.withClear .input {
+.withClear .field {
   padding-inline-end: calc(var(--spacing-md) + 16px);
 }
 
@@ -91,11 +93,11 @@
   border-color: var(--color-border-default);
 }
 
-.outlined:hover:not(:disabled) {
+.outlined:hover:not([aria-disabled='true']) {
   border-color: var(--color-border-strong);
 }
 
-.outlined:focus-visible:not(:disabled) {
+.outlined:focus-within:not([aria-disabled='true']) {
   border-color: var(--color-border-selected);
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
@@ -106,12 +108,12 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
-.surface:hover:not(:disabled) {
+.surface:hover:not([aria-disabled='true']) {
   border-color: var(--color-border-default);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.surface:focus-visible:not(:disabled) {
+.surface:focus-within:not([aria-disabled='true']) {
   border-color: var(--color-border-selected);
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
@@ -123,11 +125,11 @@
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-.subtle:hover:not(:disabled) {
+.subtle:hover:not([aria-disabled='true']) {
   background-color: var(--color-bg-toolbar-hover);
 }
 
-.subtle:focus-visible:not(:disabled) {
+.subtle:focus-within:not([aria-disabled='true']) {
   border-color: var(--color-border-selected);
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
@@ -142,9 +144,8 @@
   block-size: 100%;
 }
 
-.embedded:hover:not(:disabled),
-.embedded:focus:not(:disabled),
-.embedded:focus-visible:not(:disabled) {
+.embedded:hover:not([aria-disabled='true']),
+.embedded:focus-within:not([aria-disabled='true']) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
@@ -158,12 +159,12 @@
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
 
-.standalone:hover:not(:disabled) {
+.standalone:hover:not([aria-disabled='true']) {
   border-color: var(--color-border-strong);
   box-shadow: var(--shadow-sm), var(--shadow-md);
 }
 
-.standalone:focus-visible:not(:disabled) {
+.standalone:focus-within:not([aria-disabled='true']) {
   border-color: var(--color-border-selected);
   box-shadow:
     var(--shadow-xs),
@@ -171,6 +172,136 @@
     inset 0 0 0 1px var(--color-border-selected);
 }
 
+/* =========================
+   Modified state
+   ========================= */
+
+.modified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
+  box-shadow: inset 4px 0 0 var(--color-status-warning-border);
+}
+
+/* Hover should stay warm, not switch back to the normal border */
+.modified:hover:not([aria-disabled='true']) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+}
+
+/* Focus should also stay warm and readable */
+.modified:focus-within:not([aria-disabled='true']) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    inset 0 0 0 1px
+      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+
+/* Variant-specific tweaks when modified */
+.surface.modified {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.surface.modified:hover:not([aria-disabled='true']) {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.surface.modified:focus-within:not([aria-disabled='true']) {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    inset 0 0 0 1px
+      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+
+.subtle.modified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
+  border-color: transparent;
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    inset 0 0 0 1px transparent;
+}
+
+.subtle.modified:hover:not([aria-disabled='true']) {
+  background-color: color-mix(
+    in srgb,
+    var(--color-status-warning-bg) 36%,
+    var(--color-bg-toolbar-hover)
+  );
+}
+
+.subtle.modified:focus-within:not([aria-disabled='true']) {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    inset 0 0 0 1px
+      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+
+.standalone.modified {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    var(--shadow-xs),
+    var(--shadow-md);
+}
+
+.standalone.modified:hover:not([aria-disabled='true']) {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    var(--shadow-sm),
+    var(--shadow-md);
+}
+
+.standalone.modified:focus-within:not([aria-disabled='true']) {
+  box-shadow:
+    inset 4px 0 0 var(--color-status-warning-border),
+    var(--shadow-xs),
+    var(--shadow-md),
+    inset 0 0 0 1px
+      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+
+/* Embedded should stay visually light, but can still get the marker */
+.embedded.modified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
+  border-color: transparent;
+  box-shadow: inset 3px 0 0 var(--color-status-warning-border);
+}
+
+.embedded.modified:hover:not([aria-disabled='true']),
+.embedded.modified:focus-within:not([aria-disabled='true']) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
+  border-color: transparent;
+  box-shadow: inset 3px 0 0 var(--color-status-warning-border);
+}
+
+/* Disabled modified state */
+.modified[aria-disabled='true'] {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  box-shadow: none;
+}
+
 /* Sizes */
 .xs {
   block-size: var(--component-size-xs);
@@ -183,6 +314,12 @@
   font-size: var(--font-size-sm);
 }
 
+.sm.embedded,
+.md.embedded,
+.lg.embedded {
+  block-size: 100%;
+}
+
 .md {
   block-size: var(--component-size-md);
   font-size: var(--font-size-sm);
@@ -194,11 +331,11 @@
 }
 
 /* Leading icon */
-.inputWithIcon {
+.fieldWithIcon {
   padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
 }
 
-.embedded.inputWithIcon {
+.embedded.fieldWithIcon {
   padding-inline-start: calc(var(--icon-size-md) + var(--spacing-xl));
 }
 
@@ -244,3 +381,18 @@
 .input[type='datetime-local']::-webkit-calendar-picker-indicator {
   filter: invert(0.7);
 }
+
+/* Start and end adornments */
+.startAdornment {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+}
+
+.endAdornment {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 4px;
+}

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

@@ -6,9 +6,9 @@ export function InputContainer({ label, htmlFor, error, helpText, helpTextAdditi
     const renderLabel = label && (_jsxs("label", { className: styles.label, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: styles.required, children: " *" })] }));
     const renderMessageRow = (message || helpTextAddition) && (_jsxs("div", { className: `${messageClass} ${styles.messageRow}`, children: [_jsx("span", { children: message }), helpTextAddition && _jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })] }));
     if (orientation === 'vertical') {
-        return (_jsxs("div", { "data-modified": modified ? true : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
+        return (_jsxs("div", { "data-modified": modified ? 'true' : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
     }
-    return (_jsx("div", { "data-modified": modified ? true : undefined, className: styles.inputContainer, style: {
+    return (_jsx("div", { "data-modified": modified ? 'true' : undefined, className: styles.inputContainer, style: {
             '--label-width': labelWidth,
             width: fullWidth ? '100%' : undefined,
         }, children: _jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, children: [_jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [renderLabel, children] }), renderMessageRow] }) }));

package/dist/components/forms/input-container/InputContainer.module.css

@@ -25,6 +25,10 @@
   justify-content: space-between;
 }
 
+.helpTextAddition {
+  color: var(--color-fg-subtle);
+}
+
 .horizontal label {
   width: var(--label-width);
 }
@@ -39,61 +43,14 @@
   font-weight: bold;
 }
 
-/* ---------------- MODIFIED FIELD (DIRECT CONTROL TINT) ---------------- */
-
-/* Optional scan cue: left bar only (no box around control) */
-.inputContainer[data-modified] {
-  border-left: var(--border-width-thick) solid var(--color-status-warning-border);
-  padding-left: var(--spacing-xs);
-}
-
-/**
- * Tint "real controls" directly.
- * This covers:
- * - native input/textarea
- * - button-based components (Select trigger, Checkbox button, etc.)
- * - combobox triggers
- */
-.inputContainer[data-modified]
-  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 45%, var(--color-bg-surface));
-}
-
-/**
- * If your controls also have borders, nudge them slightly warmer.
- * (Keep subtle so it doesn't look like validation.)
- */
-.inputContainer[data-modified]
-  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 35%,
-    var(--color-border-default)
-  );
+.messageRow {
+  min-height: 1lh;
 }
 
-/**
- * Checkbox/Radio special case:
- * - Their "label" is inside children.
- * - InputContainer’s own label uses .label class.
- * We want to tint ONLY the child labels, not the container label column.
- */
+/* Optional: keep this only for controls whose own label lives inside children,
+   such as checkbox/radio wrappers. It will not affect Input's top label. */
 .inputContainer[data-modified] label:not(.label) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
   border-radius: var(--border-radius-default);
   padding: 2px 6px;
 }
-
-/* Correct disabled selector (no accidental “actionable” tint) */
-.inputContainer[data-modified]
-  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]):disabled,
-.inputContainer[data-modified]
-  :is(
-    input,
-    textarea,
-    button[data-forminput],
-    [role='combobox'][data-forminput]
-  )[aria-disabled='true'] {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-}