@dbcdk/react-components 0.0.9 → 0.0.10

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

@@ -35,56 +35,42 @@ 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 parseYMD(ymd) {
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd);
-    if (!m)
-        return null;
-    const y = +m[1];
-    const mo = +m[2];
-    const d = +m[3];
-    if (mo < 1 || mo > 12 || d < 1 || d > 31)
-        return null;
-    return { y, m: mo, d };
+export function isUtcIsoString(v) {
+    return typeof v === 'string' && /Z$/.test(v) && !Number.isNaN(Date.parse(v));
 }
-export function ymdFromLocalDate(dLocal) {
-    const y = dLocal.getFullYear();
-    const m = dLocal.getMonth() + 1;
-    const d = dLocal.getDate();
-    return `${y}-${pad2(m)}-${pad2(d)}`;
+export function utcMillisFromIso(iso) {
+    return Date.parse(iso);
 }
-export function ymdFromUTCDateOnly(utcDay) {
-    const y = utcDay.getUTCFullYear();
-    const m = utcDay.getUTCMonth() + 1;
-    const d = utcDay.getUTCDate();
-    return `${y}-${pad2(m)}-${pad2(d)}`;
+/**
+ * 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();
 }
-// Used only for ordering/comparing date-only values.
-export function utcMillisFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
-        return NaN;
-    return Date.UTC(p.y, p.m - 1, p.d);
+/** Convert a local Date to a UTC ISO string (Z). */
+export function isoFromLocalDate(dLocal) {
+    return dLocal.toISOString();
 }
-// For anchoring the calendar grid safely from a date-only value.
-export function localDateFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
+/** 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;
-    // local noon avoids DST edge cases for date-only anchors
-    return new Date(p.y, p.m - 1, p.d, 12, 0, 0, 0);
+    return new Date(ms); // local rendering
 }
 /* ---------- Formatting (UI shows local) ---------- */
 // From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
@@ -97,12 +83,6 @@ export function toMaskedFromDate(d, enableTime) {
         out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
     return out;
 }
-export function toMaskedFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
-        return '';
-    return `${pad2(p.d)}-${pad2(p.m)}-${p.y}`;
-}
 /* ---------- 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);
+}

package/dist/components/forms/radio-buttons/RadioButton.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface RadioButtonProps {
+    /** group name (required for radio behavior) */
+    name: string;
+    /** this option's value */
+    value: string;
+    /** controlled selected value for the group */
+    selectedValue?: string;
+    /** uncontrolled checked (rare; prefer selectedValue on group) */
+    checked?: boolean;
+    /** called with (value, event) */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    /**
+     * If true, do NOT wrap with InputContainer.
+     * Use inside RadioGroup.
+     */
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+}
+export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
+export {};

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import styles from './RadioButtons.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant = 'outlined', size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `radio-${generatedId}`;
+    const isChecked = selectedValue !== undefined ? selectedValue === value : Boolean(checked);
+    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsxs("span", { className: styles.controlWrap, children: [_jsx("input", { id: controlId, className: styles.input, type: "radio", name: name, value: value, checked: isChecked, disabled: disabled, required: required, "aria-invalid": Boolean(error) || undefined, onChange: e => {
+                            if (disabled)
+                                return;
+                            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
+                        } }), _jsx("span", { className: [
+                            styles.radio,
+                            isChecked ? styles.checked : '',
+                            disabled ? styles.disabled : '',
+                            styles[variant],
+                            styles[size],
+                        ]
+                            .filter(Boolean)
+                            .join(' '), "aria-hidden": "true", children: _jsx("span", { className: styles.dot }) })] }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
+    if (noContainer || (!containerLabel && !error))
+        return content;
+    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+}

package/dist/components/forms/radio-buttons/RadioButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from 'react';
+export type RadioOption<V extends string = string> = {
+    label: string;
+    value: V;
+    disabled?: boolean;
+};
+export interface RadioGroupProps<V extends string = string> {
+    name?: string;
+    value: V | null;
+    onChange: (value: V) => void;
+    options: RadioOption<V>[];
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    helpText?: string;
+    required?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    modified?: boolean;
+    /** layout of radios themselves */
+    direction?: 'row' | 'column';
+    'data-cy'?: string;
+}
+export declare function RadioButtonGroup<V extends string = string>({ name, value, onChange, options, disabled, label, error, helpText, required, orientation, labelWidth, fullWidth, modified, direction, 'data-cy': dataCy, }: RadioGroupProps<V>): JSX.Element;

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { RadioButton } from './RadioButton';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButtonGroup({ name, value, onChange, options, disabled = false, label, error, helpText, required = false, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, modified = false, direction = 'column', 'data-cy': dataCy, }) {
+    const generated = useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${generated}`;
+    const content = (_jsx("div", { role: "radiogroup", "aria-invalid": Boolean(error) || undefined, "data-cy": dataCy, style: {
+            display: 'flex',
+            flexDirection: direction,
+            gap: '8px',
+        }, children: options.map(opt => (_jsx(RadioButton, { noContainer: true, name: groupName, value: String(opt.value), selectedValue: value !== null && value !== void 0 ? value : undefined, disabled: disabled || opt.disabled, label: opt.label, required: required, onChange: v => onChange(v), "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : undefined }, String(opt.value)))) }));
+    // If no InputContainer props were provided, just return group content
+    if (!label && !error)
+        return content;
+    // Wrap once as a proper field
+    return (_jsx(InputContainer, { label: label, htmlFor: undefined, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, modified: modified, children: content }));
+}

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -0,0 +1,117 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Real input stays for a11y, but visually hidden */
+.input {
+  position: absolute;
+  inset: 0;
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* The visible radio */
+.radio {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: var(--color-bg-surface);
+  border: 2px solid rgba(0, 0, 0, 0.25);
+
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background: var(--color-brand);
+}
+
+/* checked state */
+.checked {
+  border-color: var(--color-brand);
+}
+.checked .dot {
+  transform: scale(1);
+}
+
+/* hover (only when not disabled) */
+.input:not(:disabled):hover + .radio {
+  border-color: var(--color-brand-hover);
+}
+
+/* focus ring */
+.input:focus-visible + .radio {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
+  border-color: var(--color-brand-strong);
+}
+
+/* disabled */
+.disabled {
+  opacity: 0.5;
+}
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.primary.checked {
+  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+}
+
+.default {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Sizes */
+.sm {
+  width: 16px;
+  height: 16px;
+}
+.sm .dot {
+  width: 8px;
+  height: 8px;
+}
+
+.md {
+  width: 20px;
+  height: 20px;
+}
+.md .dot {
+  width: 10px;
+  height: 10px;
+}
+
+.lg {
+  width: 24px;
+  height: 24px;
+}
+.lg .dot {
+  width: 12px;
+  height: 12px;
+}

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

@@ -18,5 +18,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, 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, }: SelectProps<T>): React.ReactNode;
 export {};

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

@@ -10,7 +10,7 @@ import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
 export function Select({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
 // Select props
 id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
     const generatedId = useId();
@@ -72,10 +72,10 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
             ids.push(tooltipId);
         return ids.length ? ids.join(' ') : undefined;
     })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_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 => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_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 => {
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, 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 : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, 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 : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), 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/text-area/Textarea.js

@@ -4,9 +4,9 @@ import { useCallback, useId, useMemo } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Textarea.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, 
+export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, modified = false, 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, 
 // Native textarea props
 className, ...rest }) {
     const generatedId = useId();
@@ -28,6 +28,6 @@ className, ...rest }) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };
 Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -9,6 +9,14 @@
   font-family: var(--font-family);
 }
 
+.container textarea:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .internalCount {
   text-align: right;
   font-size: var(--font-size-sm);
@@ -22,5 +30,4 @@
 .container textarea:focus-visible {
   outline: none;
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
 }