@dbcdk/react-components 0.0.8 → 0.0.10

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

@@ -5,9 +5,9 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Popover } from '../../components/popover/Popover';
+import { isoFromLocalDate, isoFromLocalParts, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, utcMillisFromIso, toMaskedFromDate, } from './dateTimeHelpers';
 import styles from './DateTimePicker.module.css';
-import { maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, toMaskedRange, } from './dateTimeHelpers';
-/* ---------- Date grid helpers (UTC) ---------- */
+/* ---------- Date grid helpers (UTC date-only cells) ---------- */
 const dUTC = (y, m, day) => new Date(Date.UTC(y, m, day));
 const addDaysUTC = (utcDate, n) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate() + n);
 const startOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), 1);
@@ -15,14 +15,16 @@ const endOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTC
 const sameDayUTC = (a, b) => a.getUTCFullYear() === b.getUTCFullYear() &&
     a.getUTCMonth() === b.getUTCMonth() &&
     a.getUTCDate() === b.getUTCDate();
-const toUTCDateOnly = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
+// IMPORTANT: treat local calendar date as the source of truth for the grid.
+// Build an equivalent "UTC date-only" for comparisons.
+const toUTCDateOnlyFromLocal = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
 const startOfWeekUTC = (utcDate, weekStartsOn) => {
     const dow = utcDate.getUTCDay();
     const diff = (dow - weekStartsOn + 7) % 7;
     return addDaysUTC(utcDate, -diff);
 };
 function buildMonthGrid(anchorLocalDate, weekStartsOn) {
-    const anchorUTC = toUTCDateOnly(anchorLocalDate);
+    const anchorUTC = toUTCDateOnlyFromLocal(anchorLocalDate);
     const firstUTC = startOfWeekUTC(startOfMonthUTC(anchorUTC), weekStartsOn);
     const cells = [];
     for (let i = 0; i < 42; i++)
@@ -33,13 +35,6 @@ const isBetweenUTC = (d, a, b) => {
     const t = +d, s = +a, e = +b;
     return t >= Math.min(s, e) && t <= Math.max(s, e);
 };
-function composeLocalDateTimeISO(utcDateOnly, hh, mm) {
-    const y = utcDateOnly.getUTCFullYear();
-    const m = utcDateOnly.getUTCMonth();
-    const d = utcDateOnly.getUTCDate();
-    const local = new Date(y, m, d, hh, mm, 0, 0);
-    return local.toISOString();
-}
 /* ---------- Formatting (exposed but input uses mask) ---------- */
 function defaultFormatDate(d, { locale, enableTime }) {
     const opts = enableTime
@@ -57,40 +52,77 @@ function defaultFormatRange(s, e, opts) {
     return '';
 }
 const cx = (...classes) => classes.filter(Boolean).join(' ');
-export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, // still exposed, not used for input text
-formatRange = defaultFormatRange, // still exposed, not used for input text
- }, _ref) {
+export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, }, _ref) {
     void formatDate;
     void formatRange;
     const popRef = useRef(null);
     const todayLocal = useMemo(() => new Date(), []);
+    // ---- local anchor from controlled value ----
     const initialAnchor = useMemo(() => {
-        if (mode === 'single' && value instanceof Date && value)
-            return value;
-        if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start)
-            return value.start;
+        var _a, _b;
+        if (mode === 'single') {
+            if (typeof value === 'string')
+                return (_a = localDateFromIso(value)) !== null && _a !== void 0 ? _a : todayLocal;
+            return todayLocal;
+        }
+        if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start) {
+            return (_b = localDateFromIso(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
+        }
         return todayLocal;
     }, [mode, value, todayLocal]);
     const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
+    useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
+    // time defaults (local)
     const [timeHH, setTimeHH] = useState(todayLocal.getHours());
     const [timeMM, setTimeMM] = useState(Math.floor(todayLocal.getMinutes() / timeStep) * timeStep);
+    // If datetime value changes externally, keep HH/MM in sync
+    useEffect(() => {
+        if (mode === 'single' && enableTime && typeof value === 'string') {
+            const d = localDateFromIso(value);
+            if (!d)
+                return;
+            setTimeHH(d.getHours());
+            setTimeMM(Math.floor(d.getMinutes() / timeStep) * timeStep);
+        }
+    }, [mode, enableTime, value, timeStep]);
     const [hoverUTC, setHoverUTC] = useState(null);
     const cellsUTC = useMemo(() => buildMonthGrid(monthAnchor, weekStartsOn), [monthAnchor, weekStartsOn]);
-    const monthStartUTC = useMemo(() => startOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
-    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+    const monthStartUTC = useMemo(() => startOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)), [monthAnchor]);
+    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)), [monthAnchor]);
     const weekdayFmt = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
     const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }), [locale]);
-    const selectedUTC_single = mode === 'single' && value instanceof Date && value ? toUTCDateOnly(value) : null;
-    const selectedUTC_start = mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start
-        ? toUTCDateOnly(value.start)
-        : null;
-    const selectedUTC_end = mode === 'range' && value && typeof value === 'object' && 'end' in value && value.end
-        ? toUTCDateOnly(value.end)
-        : null;
+    // ---- selection state for grid (compare in UTC date-only) ----
+    const selectedUTC_single = useMemo(() => {
+        if (mode !== 'single')
+            return null;
+        if (typeof value !== 'string')
+            return null;
+        const d = localDateFromIso(value);
+        if (!d)
+            return null;
+        return toUTCDateOnlyFromLocal(d);
+    }, [mode, value]);
+    const selectedUTC_start = useMemo(() => {
+        if (mode !== 'range' || !value || typeof value !== 'object' || !('start' in value))
+            return null;
+        if (!value.start)
+            return null;
+        const d = localDateFromIso(value.start);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
+    }, [mode, value]);
+    const selectedUTC_end = useMemo(() => {
+        if (mode !== 'range' || !value || typeof value !== 'object' || !('end' in value))
+            return null;
+        if (!value.end)
+            return null;
+        const d = localDateFromIso(value.end);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
+    }, [mode, value]);
     const isDisabledUTC = useCallback((utcDay) => {
-        if (min && utcDay < toUTCDateOnly(min))
+        // Interpret min/max as local-day constraints for UI
+        if (min && utcDay < toUTCDateOnlyFromLocal(min))
             return true;
-        if (max && utcDay > toUTCDateOnly(max))
+        if (max && utcDay > toUTCDateOnlyFromLocal(max))
             return true;
         return false;
     }, [min, max]);
@@ -98,29 +130,33 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
         var _a, _b;
         if (isDisabledUTC(utcDay))
             return;
+        // utcDay's UTC Y/M/D corresponds to the *local calendar day* shown in UI.
+        const y = utcDay.getUTCFullYear();
+        const m0 = utcDay.getUTCMonth();
+        const d = utcDay.getUTCDate();
         if (mode === 'single') {
-            if (enableTime) {
-                const iso = composeLocalDateTimeISO(utcDay, timeHH, timeMM);
-                onChange(new Date(iso));
-            }
-            else {
-                onChange(new Date(utcDay.getTime()));
-            }
+            const iso = enableTime
+                ? isoFromLocalParts(y, m0, d, timeHH, timeMM)
+                : isoFromLocalParts(y, m0, d, 0, 0);
+            onChange(iso);
             (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
             return;
         }
-        const curr = value && typeof value === 'object' && 'start' in value ? value : { start: null, end: null };
+        // range (date-only in UI, but emitted as ISO instants at local midnight)
+        const curr = value && typeof value === 'object' && 'start' in value
+            ? value
+            : { start: null, end: null };
+        const picked = isoFromLocalParts(y, m0, d, 0, 0);
         if (!curr.start || (curr.start && curr.end)) {
-            onChange({ start: new Date(utcDay.getTime()), end: null });
-        }
-        else {
-            const startUTC = toUTCDateOnly(curr.start);
-            const endUTC = utcDay;
-            const s = new Date(Math.min(+startUTC, +endUTC));
-            const e = new Date(Math.max(+startUTC, +endUTC));
-            onChange({ start: s, end: e });
-            (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            onChange({ start: picked, end: null });
+            return;
         }
+        const a = utcMillisFromIso(curr.start);
+        const b = utcMillisFromIso(picked);
+        const start = a <= b ? curr.start : picked;
+        const end = a <= b ? picked : curr.start;
+        onChange({ start, end });
+        (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
     };
     const gridRef = useRef(null);
     useEffect(() => {
@@ -143,7 +179,7 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
             ].includes(e.key)) {
                 e.preventDefault();
             }
-            const anchor = toUTCDateOnly(monthAnchor);
+            const anchor = toUTCDateOnlyFromLocal(monthAnchor);
             const move = (days) => setMonthAnchor(prev => addDaysLocal(prev, days));
             switch (e.key) {
                 case 'ArrowLeft':
@@ -177,20 +213,32 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
     }, [monthAnchor]);
     const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
     const minutes = useMemo(() => Array.from({ length: Math.floor(60 / (timeStep || 1)) }, (_, i) => i * (timeStep || 1)), [timeStep]);
-    // ---- Input display: follow mask format (not Intl) ----
+    // ---- Input display: always local ----
     const formatted = useMemo(() => {
-        var _a, _b;
         if (mode === 'single') {
-            return value instanceof Date && value ? toMaskedFromDate(value, enableTime) : '';
+            if (typeof value !== 'string')
+                return '';
+            const d = localDateFromIso(value);
+            return d ? toMaskedFromDate(d, enableTime) : '';
         }
         const v = value;
-        return toMaskedRange((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null, (_b = v === null || v === void 0 ? void 0 : v.end) !== null && _b !== void 0 ? _b : null, enableTime);
+        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromIso(v.start) : null;
+        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? localDateFromIso(v.end) : null;
+        const ss = s ? toMaskedFromDate(s, false) : '';
+        const ee = e ? toMaskedFromDate(e, false) : '';
+        if (ss && ee)
+            return `${ss} – ${ee}`;
+        if (ss)
+            return `${ss} –`;
+        if (ee)
+            return `– ${ee}`;
+        return '';
     }, [mode, value, enableTime]);
     const [text, setText] = useState(formatted);
-    const [dirty, setDirty] = useState(false); // while user is typing
+    const [dirty, setDirty] = useState(false);
     useEffect(() => {
         if (!dirty)
-            setText(formatted); // keep in sync when external value changes
+            setText(formatted);
     }, [formatted, dirty]);
     const commitTypedValue = useCallback(() => {
         if (!text.trim()) {
@@ -203,16 +251,19 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
         }
         if (mode === 'single') {
             const dLocal = parseLooseDateOrDateTime(text);
-            if (dLocal) {
-                onChange(dLocal);
-                setMonthAnchor(dLocal);
-                setDirty(false);
-            }
+            if (!dLocal)
+                return;
+            // If enableTime=false, parseLooseDateOrDateTime returns 00:00 local -> still OK.
+            onChange(isoFromLocalDate(dLocal));
+            setMonthAnchor(dLocal);
+            setDirty(false);
             return;
         }
         const r = parseLooseRange(text);
         if (r) {
-            onChange({ start: r.start, end: r.end });
+            const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+            const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+            onChange({ start: startIso, end: endIso });
             setMonthAnchor(r.start);
             setDirty(false);
         }
@@ -238,10 +289,10 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
     const fallbackPlaceholder = mode === 'single' ? 'Vælg dato' : 'Vælg interval';
     return (_jsx(Popover, { ref: popRef, trigger: toggle => {
             var _a, _b;
-            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
+            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, 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 => {
                         setDirty(true);
                         const raw = e.target.value;
-                        const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, enableTime);
+                        const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, false);
                         setText(masked);
                     }, onBlur: commitTypedValue, onKeyDown: e => {
                         var _a;
@@ -256,14 +307,16 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
         }, viewportPadding: 8, children: _jsxs("div", { className: cx(styles.panel, !!(presets === null || presets === void 0 ? void 0 : presets.length) && styles.panelWithPresets), children: [(presets === null || presets === void 0 ? void 0 : presets.length) ? (_jsxs("div", { className: styles.presetsCol, children: [_jsx("div", { className: styles.presetsLabel, children: "Forvalg" }), _jsxs("div", { className: styles.presetsList, children: [presets.map(p => (_jsx(Button, { variant: "outlined", size: "sm", onClick: () => {
                                         var _a;
                                         const r = p.getRange();
-                                        onChange({ start: r.start, end: r.end });
+                                        const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+                                        const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+                                        onChange({ start: startIso, end: endIso });
                                         setDirty(false);
-                                        setText(toMaskedRange(r.start, r.end, enableTime));
+                                        setText(`${toMaskedFromDate(r.start, false)} – ${toMaskedFromDate(r.end, false)}`);
                                         setMonthAnchor(r.start);
                                         (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
                                     }, children: p.label }, p.label))), mode === 'range' && (_jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }))] })] })) : null, _jsxs("div", { className: styles.calendarArea, children: [_jsxs("div", { className: styles.header, children: [_jsx(Button, { variant: "outlined", size: "sm", "aria-label": "Forrige m\u00E5ned", icon: _jsx(ChevronLeft, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, -1)) }), _jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }), _jsx(Button, { variant: "outlined", size: "sm", "aria-label": "N\u00E6ste m\u00E5ned", icon: _jsx(ChevronRight, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, 1)) })] }), _jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map(dow => (_jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow))) }), _jsx("div", { ref: gridRef, role: "grid", "aria-label": "Kalender", tabIndex: 0, className: styles.grid, onMouseLeave: () => setHoverUTC(null), children: cellsUTC.map((utcDay, idx) => {
                                 const inThisMonth = utcDay >= monthStartUTC && utcDay <= monthEndUTC;
-                                const isToday = sameDayUTC(utcDay, toUTCDateOnly(todayLocal));
+                                const isToday = sameDayUTC(utcDay, toUTCDateOnlyFromLocal(todayLocal));
                                 const disabledDay = isDisabledUTC(utcDay);
                                 let selected = false;
                                 let inRange = false;

package/dist/components/datetime-picker/dateTimeHelpers.d.ts

@@ -2,10 +2,22 @@ export declare const digits: (s: string) => string;
 export declare function maskDateEU(text: string): string;
 export declare function maskTimeHM(text: string): string;
 export declare function maskSingle(text: string, enableTime: boolean): string;
-export declare function maskRange(text: string, enableTime: boolean): string;
+export declare function maskRange(text: string, _enableTime: boolean): string;
 export declare const pad2: (n: number) => string;
+export type UtcIsoString = string;
+export declare function isUtcIsoString(v: unknown): v is UtcIsoString;
+export declare function utcMillisFromIso(iso: UtcIsoString): number;
+/**
+ * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
+ * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
+ */
+export declare function isoFromLocalParts(y: number, m0: number, // 0-based
+d: number, hh?: number, mm?: number): UtcIsoString;
+/** Convert a local Date to a UTC ISO string (Z). */
+export declare function isoFromLocalDate(dLocal: Date): UtcIsoString;
+/** For anchoring the calendar safely from a UTC ISO string. */
+export declare function localDateFromIso(iso: UtcIsoString): Date | null;
 export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
-export declare function toMaskedRange(start: Date | null, end: Date | null, enableTime: boolean): string;
 export declare function parseLooseDateOrDateTime(input: string): Date | null;
 export declare function parseLooseRange(input: string): {
     start: Date;

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

@@ -35,19 +35,44 @@ export function maskSingle(text, enableTime) {
     return timePart ? `${datePart} ${timePart}` : datePart;
 }
 // Range: mask both sides around common separators (–, -, to, til)
-export function maskRange(text, enableTime) {
+export function maskRange(text, _enableTime) {
+    // NOTE: range is date-only in the UI
     const sepRe = /\s*(?:–|-|to|til)\s*/i;
     const parts = text.split(sepRe);
-    if (parts.length === 1) {
-        // user typing first side
-        return maskSingle(parts[0], enableTime);
-    }
-    const a = maskSingle(parts[0], enableTime);
-    const b = maskSingle(parts.slice(1).join(' '), enableTime); // everything after first sep
+    if (parts.length === 1)
+        return maskSingle(parts[0], false);
+    const a = maskSingle(parts[0], false);
+    const b = maskSingle(parts.slice(1).join(' '), false);
     return `${a} – ${b}`.trim();
 }
 // Pad helper
 export const pad2 = (n) => String(n).padStart(2, '0');
+export function isUtcIsoString(v) {
+    return typeof v === 'string' && /Z$/.test(v) && !Number.isNaN(Date.parse(v));
+}
+export function utcMillisFromIso(iso) {
+    return Date.parse(iso);
+}
+/**
+ * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
+ * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
+ */
+export function isoFromLocalParts(y, m0, // 0-based
+d, hh = 0, mm = 0) {
+    return new Date(y, m0, d, hh, mm, 0, 0).toISOString();
+}
+/** Convert a local Date to a UTC ISO string (Z). */
+export function isoFromLocalDate(dLocal) {
+    return dLocal.toISOString();
+}
+/** For anchoring the calendar safely from a UTC ISO string. */
+export function localDateFromIso(iso) {
+    const ms = Date.parse(iso);
+    if (Number.isNaN(ms))
+        return null;
+    return new Date(ms); // local rendering
+}
+/* ---------- Formatting (UI shows local) ---------- */
 // From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
 export function toMaskedFromDate(d, enableTime) {
     const dd = pad2(d.getDate());
@@ -58,16 +83,6 @@ export function toMaskedFromDate(d, enableTime) {
         out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
     return out;
 }
-// From start/end → "DD-MM-YYYY – DD-MM-YYYY" (+ optional time)
-export function toMaskedRange(start, end, enableTime) {
-    if (start && end)
-        return `${toMaskedFromDate(start, enableTime)} – ${toMaskedFromDate(end, enableTime)}`;
-    if (start)
-        return `${toMaskedFromDate(start, enableTime)} –`;
-    if (end)
-        return `– ${toMaskedFromDate(end, enableTime)}`;
-    return '';
-}
 /* ---------- Parsing helpers (no deps) ---------- */
 // Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
 export function parseLooseDateOrDateTime(input) {

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

@@ -7,7 +7,7 @@ interface CheckboxProps {
     onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: Variant;
     disabled?: boolean;
-    /** Text shown next to the box (per-item label) */
+    modified?: boolean;
     label?: string;
     size?: Size;
     containerLabel?: string;
@@ -17,15 +17,9 @@ interface CheckboxProps {
     labelWidth?: string;
     fullWidth?: boolean;
     required?: boolean;
-    /**
-     * If true, do NOT wrap with InputContainer.
-     * Use this inside CheckboxGroup (so you don't get group-form layout per item).
-     */
     noContainer?: boolean;
-    /** Optional id for accessibility (label htmlFor) */
     id?: string;
-    /** Data attributes pass-through */
     'data-cy'?: string;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
     const [internal, setInternal] = useState(false);
     const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
     const generatedId = useId();
@@ -19,9 +19,7 @@ export function Checkbox({ checked: controlled, onChange, variant = 'outlined',
     const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
                     .filter(Boolean)
                     .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
-    // For CheckboxGroup use-case
-    if (noContainer || (!containerLabel && !error))
+    if (noContainer)
         return content;
-    // Standalone form field use-case
-    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+    return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
 }

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

@@ -15,6 +15,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     buttonIcon?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    modified?: boolean;
 };
 /**
  * Explicit exported type annotation is required with --isolatedDeclarations.

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

@@ -23,9 +23,7 @@ function mergeRefs(...refs) {
  */
 export const Input = forwardRef(function Input({ 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
-// ✅ Input-level tooltip props
-tooltip, tooltipPlacement = 'right', 
+label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
 // Input-only props
 icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, 
 // Native input props
@@ -50,7 +48,7 @@ id, style, className, ...inputProps }, ref) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: _jsxs("div", { style: rootStyle, className: [
+    return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
                 styles.container,
                 fullWidth ? styles.fullWidth : '',
                 onClear ? styles.withClear : '',

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

@@ -4,7 +4,6 @@
   display: inline-flex;
   align-items: stretch;
   gap: 0;
-
   /* width control */
   inline-size: var(--input-width, auto);
   min-inline-size: var(--input-min-width, 0);
@@ -33,14 +32,13 @@
   flex: 1 1 auto;
   min-inline-size: 0; /* critical */
   inline-size: 100%;
-
+  background: var(--color-bg-surface);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   box-sizing: border-box;
   text-overflow: ellipsis;
 
-  background-color: var(--color-bg-surface);
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
@@ -53,6 +51,13 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 /* Button group styling */
 .withButton .input {
   border-top-right-radius: 0;
@@ -75,26 +80,19 @@
 }
 
 .input:focus-visible {
-  outline: none;
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
 }
 
 /* Variants */
 .filled {
   background-color: var(--color-bg-surface);
-  border: 0;
 }
 .standalone {
   border-radius: var(--border-radius-rounded);
   background-color: var(--color-bg-surface);
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
-.standalone:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
+
 .outlined {
   background-color: transparent;
 }

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -11,5 +11,6 @@ export interface InputContainerProps {
     orientation?: 'vertical' | 'horizontal';
     labelWidth?: string;
     labelAlignment?: 'top' | 'center';
+    modified?: boolean;
 }
-export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, }: InputContainerProps): React.ReactElement;
+export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, modified, }: InputContainerProps): React.ReactElement;

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './InputContainer.module.css';
-export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '120px', }) {
+export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '160px', modified = false, }) {
     const message = error !== null && error !== void 0 ? error : helpText;
     const messageClass = error ? styles.errorText : styles.helpText;
     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", { className: "dbc-flex dbc-flex-column dbc-gap-xs", 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", { 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

@@ -6,6 +6,12 @@
   gap: var(--gap);
 }
 
+.label {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
 .horizontal .errorText,
 .horizontal .helpText {
   margin-left: calc(var(--label-width) + var(--gap));
@@ -32,3 +38,62 @@
   color: var(--color-status-error);
   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)
+  );
+}
+
+/**
+ * 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.
+ */
+.inputContainer[data-modified] label:not(.label) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-md);
+  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);
+}