@inera/ids-react 9.2.2 → 9.3.0

package/components/form/form-hooks/useInputValidity.js

@@ -1,30 +1,46 @@
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
-function useInputValidity(ref, validateOnBlur) {
+function useInputValidity(ref, validateOnBlur, skipValidation) {
     const [isValid, setIsValid] = useState(true);
+    const validationStartedRef = useRef(false);
     useEffect(() => {
+        if (skipValidation) {
+            validationStartedRef.current = false;
+            setIsValid(true);
+            return;
+        }
         const inputEl = ref.current;
         if (!inputEl)
             return;
         const updateValidity = () => {
-            setIsValid(inputEl.validity.valid);
+            const isOptionalEmpty = !inputEl.required && inputEl.value === "";
+            setIsValid(isOptionalEmpty || inputEl.validity.valid);
+        };
+        const startValidation = () => {
+            validationStartedRef.current = true;
+            updateValidity();
+        };
+        const updateValidityAfterValidationStarted = () => {
+            if (validationStartedRef.current) {
+                updateValidity();
+            }
         };
         const form = inputEl.closest("form");
-        form?.addEventListener("submit", updateValidity);
+        form?.addEventListener("submit", startValidation);
+        inputEl.addEventListener("invalid", startValidation);
+        inputEl.addEventListener("change", updateValidityAfterValidationStarted);
         if (validateOnBlur) {
-            inputEl.addEventListener("blur", updateValidity);
+            inputEl.addEventListener("blur", startValidation);
         }
-        inputEl.addEventListener("change", updateValidity);
-        inputEl.addEventListener("invalid", updateValidity);
         return () => {
-            form?.removeEventListener("submit", updateValidity);
+            form?.removeEventListener("submit", startValidation);
+            inputEl.removeEventListener("invalid", startValidation);
+            inputEl.removeEventListener("change", updateValidityAfterValidationStarted);
             if (validateOnBlur) {
-                inputEl.removeEventListener("blur", updateValidity);
+                inputEl.removeEventListener("blur", startValidation);
             }
-            inputEl.removeEventListener("change", updateValidity);
-            inputEl.removeEventListener("invalid", updateValidity);
         };
-    }, [ref]);
+    }, [ref, validateOnBlur, skipValidation]);
     return isValid;
 }
 

package/components/form/form-props/form-props.d.ts

@@ -8,6 +8,7 @@ export interface CommonFormProps {
     label?: string;
     errorMsg?: string;
     hint?: string | ReactNode;
+    subtitle?: string | ReactNode;
     tooltip?: ReactNode;
     focusAnchor?: boolean;
     dataTestId?: string;

package/components/form/input/input-base.d.ts

@@ -1,16 +1,18 @@
 import React, { ReactNode, CSSProperties } from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
 export interface IDSInputBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
-    icon?: string;
     unit?: string;
+    subtitle?: string;
     showSearchLabel?: boolean;
     submitButton?: ReactNode;
     hintId?: string;
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     style?: CSSProperties;
+    icon?: string;
+    clearButton?: ReactNode;
 }
-export declare function IDSInputBase({ label, type, icon, hint, unit, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSInputBase({ label, type, icon, clearButton, hint, unit, subtitle, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSInputBase {
     var displayName: string;
 }

package/components/form/input/input-base.js

@@ -3,7 +3,7 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }) {
+function IDSInputBase({ label, type = "text", icon, clearButton, hint, unit, subtitle, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }) {
     const reactId = useId();
     const inputId = id ?? `input-base-${reactId}`;
     const baseHintId = hintId ?? `input-base-hint-${reactId}`;
@@ -17,15 +17,20 @@ function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel
     if (type === "search" && !showSearchLabel && label) {
         ariaHandler["aria-label"] = label;
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-input--icon": !!icon }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
-                                    "ids-hidden": type === "search" && !showSearchLabel
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", {
+                    "ids-input--search": type === "search",
+                    "ids-input--icon": !!icon && !clearButton,
+                    "ids-input--clear-button": !!clearButton,
+                    "ids-input--unit": !!unit
+                }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
+                                    "ids-label-wrapper--sr-only": type === "search" && !showSearchLabel
                                 }), children: [jsx("label", { className: clsx("ids-label", {
-                                            "ids-label--disabled": disabled || readOnly
-                                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-input__unit-wrapper", children: [jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
-                                                    "ids-input--light": light,
-                                                    "ids-input--invalid": invalid,
-                                                    "ids-focus-anchor": focusAnchor
-                                                }), "aria-invalid": invalid, required: required, disabled: disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), unit && (jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit }))] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                                            "ids-label--sr-only": type === "search" && !showSearchLabel
+                                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
+                                            "ids-input--light": light,
+                                            "ids-input--invalid": invalid,
+                                            "ids-focus-anchor": focusAnchor
+                                        }), "aria-invalid": invalid, required: required, disabled: disabled, ...ariaHandler, ...props }), icon && !clearButton && jsx("span", { className: `ids-input__icon ids-icon-${icon}` }), clearButton && jsx("span", { className: "ids-input__clear-button", children: clearButton }), unit && (jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit }))] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSInputBase.displayName = "IDSInputBase";
 

package/components/form/input/input.d.ts

@@ -2,7 +2,10 @@ import { ReactNode } from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
 interface IDSInputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     icon?: string;
+    clearButton?: ReactNode;
     unit?: string;
+    hint?: string | ReactNode;
+    subtitle?: string;
     showSearchLabel?: boolean;
     submitButton?: ReactNode;
 }

package/components/form/input/input.js

@@ -6,7 +6,7 @@ import { IDSInputBase } from './input-base.js';
 
 const IDSInput = forwardRef(({ invalid = false, noValidation = false, style, validationOnBlur = false, ...props }, ref) => {
     const inputRef = useRef(null);
-    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
+    const hasValidValue = useInputValidity(inputRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

package/components/form/radio/radio-base.js

@@ -13,8 +13,7 @@ function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTes
                     "ids-input--light": light,
                     "ids-focus-anchor": focusAnchor
                 }), name: name, disabled: disabled, "aria-invalid": invalid, ...ariaHandler, ...props }), !!children && (jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-radio__label ids-label", {
-                            "ids-label--clickable": !disabled,
-                            "ids-label--disabled": disabled
+                            "ids-label--clickable": !disabled
                         }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }));
 }
 IDSRadioBase.displayName = "IDSRadioBase";

package/components/form/radio/radio-group-base.d.ts

@@ -7,10 +7,11 @@ interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElem
     required?: boolean;
     tooltip?: ReactNode;
     invalid?: boolean;
+    subtitle?: string | ReactNode;
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
-export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, subtitle, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSRadioGroupBase {
     var displayName: string;
 }

package/components/form/radio/radio-group-base.js

@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import clsx from 'clsx';
 
-function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact = false, required = false, tooltip, className, children, invalid, groupRef, ...props }) {
+function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact = false, required = false, tooltip, subtitle, className, children, invalid, groupRef, ...props }) {
     const showErrorMsg = invalid && !!errorMsg && !!errorMsgId;
-    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsx("div", { className: clsx("ids-label-wrapper", {
+    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsxs("div", { className: clsx("ids-label-wrapper", {
                     "ids-label-wrapper--sr-only": hideLegend
-                }, className), children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
+                }, className), children: [jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }), subtitle && jsx("div", { className: "ids-subtitle ids-subtitle--group", children: subtitle })] })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 IDSRadioGroupBase.displayName = "IDSRadioGroupBase";
 

package/components/form/radio/radio-group.d.ts

@@ -7,11 +7,12 @@ interface IDSRadioGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>
     compact?: boolean;
     invalid?: boolean;
     required?: boolean;
+    subtitle?: string | ReactNode;
     tooltip?: ReactNode;
     noValidation?: boolean;
     onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }: IDSRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, subtitle, children, onRadioChange, ...props }: IDSRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSRadioGroup {
     var displayName: string;
 }

package/components/form/radio/radio-group.js

@@ -5,7 +5,7 @@ import { IDSRadioGroupBase } from './radio-group-base.js';
 import { IDSRadio } from './radio.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 
-function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }) {
+function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, subtitle, children, onRadioChange, ...props }) {
     const groupRef = useRef(null);
     const { isValid, hasInteracted } = useGroupValidity(groupRef, "radio");
     const reactId = useId();
@@ -31,7 +31,7 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
         }
         return child;
     });
-    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
+    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, subtitle: subtitle, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
 }
 IDSRadioGroup.displayName = "IDSRadioGroup";
 

package/components/form/range/range-base.d.ts

@@ -10,7 +10,7 @@ export interface IDSRangeBaseProps extends React.InputHTMLAttributes<HTMLInputEl
     inputRef?: Ref<HTMLInputElement>;
     style?: CSSProperties;
 }
-export declare function IDSRangeBase({ id, label, showTicks, ticks, disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step, inputRef, style, className, ...props }: IDSRangeBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRangeBase({ id, label, showTicks, ticks, disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step, inputRef, style, className, subtitle, ...props }: IDSRangeBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSRangeBase {
     var displayName: string;
 }

package/components/form/range/range-base.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min = 0, max = 10, step = 1, inputRef, style, className, ...props }) {
+function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min = 0, max = 10, step = 1, inputRef, style, className, subtitle, ...props }) {
     const inputId = !!id ? id : `range-${useId()}`;
-    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("input", { id: inputId, ref: inputRef, type: "range", className: clsx("ids-range__input", {
+    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("input", { id: inputId, ref: inputRef, type: "range", className: clsx("ids-range__input", {
                     "ids-focus-anchor": focusAnchor
                 }), min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, "aria-valuenow": valueNow, "aria-disabled": disabled, disabled: disabled, step: step, style: {
                     backgroundSize: ((valueNow - (min ?? 0)) * 100) / ((max ?? 100) - (min ?? 0)) + "% 100%"

package/components/form/select/select-base.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties } from "react";
-import { CommonFormProps } from "../form-props/form-props";
-export interface IDSSelectBaseProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectBaseProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormPropsWithReadOnly {
     selectRef?: React.Ref<HTMLSelectElement>;
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }: IDSSelectBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, readOnly, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, subtitle, ...props }: IDSSelectBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSSelectBase {
     var displayName: string;
 }

package/components/form/select/select-base.js

@@ -3,7 +3,7 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }) {
+function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, readOnly, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, subtitle, ...props }) {
     const reactId = useId();
     const selectId = id ?? `select-base-${reactId}`;
     const baseErrorMsgId = errorMsgId ?? `select-base-error-${reactId}`;
@@ -12,12 +12,10 @@ function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, req
     if (showErrorMsg) {
         ariaHandler["aria-describedby"] = baseErrorMsgId;
     }
-    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: selectId, className: clsx("ids-label", {
-                            "ids-label--disabled": disabled
-                        }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select__wrapper", children: jsx("select", { id: selectId, ref: selectRef, className: clsx("ids-select__select", {
+    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: selectId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-select__wrapper", children: jsx("select", { id: selectId, ref: selectRef, className: clsx("ids-select__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), "aria-invalid": invalid, "aria-disabled": disabled, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                    }), "aria-invalid": invalid, "aria-disabled": readOnly, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSSelectBase.displayName = "IDSSelectBase";
 

package/components/form/select/select.d.ts

@@ -1,4 +1,4 @@
-import { CommonFormProps } from "../form-props/form-props";
-export interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormPropsWithReadOnly {
 }
 export declare const IDSSelect: import("react").ForwardRefExoticComponent<IDSSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/components/form/select/select.js

@@ -7,7 +7,7 @@ import { IDSSelectBase } from './select-base.js';
 const IDSSelect = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, children, ...props }, ref) => {
     const errorMsgId = `select-error-${useId()}`;
     const selectRef = useRef(null);
-    const hasValidValue = useInputValidity(selectRef, validationOnBlur);
+    const hasValidValue = useInputValidity(selectRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

package/components/form/select-multiple/select-multiple-base.d.ts

@@ -14,7 +14,7 @@ export interface IDSSelectMultipleBaseProps extends React.InputHTMLAttributes<HT
     client?: boolean;
     style?: CSSProperties;
 }
-export declare function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, subtitle, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSSelectMultipleBase {
     var displayName: string;
 }

package/components/form/select-multiple/select-multiple-base.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
+function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, subtitle, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
     const reactId = useId();
     const labelId = `select-multiple-base-label-${reactId}`;
     const dropdownId = `select-multiple-base-dropdown-${reactId}`;
@@ -16,7 +16,7 @@ function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selec
             onClick
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: labelId, className: clsx("ids-label", { "ids-label--disabled": disabled || readOnly }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": labelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: labelId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": labelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
                     }), disabled: disabled, "aria-disabled": ariaDisabled || readOnly || undefined, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {

package/components/form/textarea/textarea-base.d.ts

@@ -9,7 +9,7 @@ interface IDSTextareaBaseProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTextareaBase({ id, label, subtitle, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSTextareaBase {
     var displayName: string;
 }

package/components/form/textarea/textarea-base.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useId } from 'react';
 
-function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }) {
+function IDSTextareaBase({ id, label, subtitle, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }) {
     const reactId = useId();
     const inputId = !!id ? id : `textarea-base-${reactId}`;
     const baseHintId = !!hintId ? hintId : `textarea-base-hint-${reactId}`;
@@ -18,13 +18,11 @@ function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invali
             "ids-textarea--block": block,
             "ids-textarea--autosize": autoSize,
             "ids-textarea--no-resize": noResize
-        }, className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", {
-                            "ids-label--disabled": disabled || readOnly
-                        }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("textarea", { ref: textareaRef, id: inputId, className: clsx("ids-textarea__textarea", {
+        }, className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("textarea", { ref: textareaRef, id: inputId, className: clsx("ids-textarea__textarea", {
                     "ids-input--light": light,
                     "ids-input--invalid": invalid,
                     "ids-focus-anchor": focusAnchor
-                }), style: { minWidth: (!!hint || !!errorMsg && showErrorMsg) ? "100%" : "inherit" }, required: required, disabled: disabled, "aria-required": required, "aria-disabled": disabled, "aria-invalid": invalid, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                }), style: { minWidth: !!hint || (!!errorMsg && showErrorMsg) ? "100%" : "inherit" }, required: required, disabled: disabled, "aria-required": required, "aria-disabled": disabled, "aria-invalid": invalid, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSTextareaBase.displayName = "IDSTextareaBase";
 

package/components/form/textarea/textarea.js

@@ -6,7 +6,7 @@ import { IDSTextareaBase } from './textarea-base.js';
 
 const IDSTextarea = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
     const textareaRef = useRef(null);
-    const hasValidValue = useInputValidity(textareaRef, validationOnBlur);
+    const hasValidValue = useInputValidity(textareaRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

package/components/form/time/time-base.d.ts

@@ -5,7 +5,7 @@ export interface IDSTimeBaseProps extends React.InputHTMLAttributes<HTMLInputEle
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, subtitle, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSTimeBase {
     var displayName: string;
 }

package/components/form/time/time-base.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useId } from 'react';
 
-function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, ...props }) {
+function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, subtitle, ...props }) {
     const reactId = useId();
     const inputId = id ?? `time-base-${reactId}`;
     const baseErrorMsgId = errorMsgId ?? `time-base-error-${reactId}`;
@@ -12,9 +12,7 @@ function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = fals
     if (showErrorMsg) {
         ariaHandler["aria-describedby"] = baseErrorMsgId;
     }
-    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
-                            "ids-label--disabled": disabled
-                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
+    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: "ids-label", htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
                     }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, ...ariaHandler, ...props }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));

package/components/form/time/time.js

@@ -4,11 +4,10 @@ import { forwardRef, useRef } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTimeBase } from './time-base.js';
 
-const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
+const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, required = false, ...props }, ref) => {
     const timeRef = useRef(null);
-    const hasValidValue = useInputValidity(timeRef, validationOnBlur);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    // Merge forwarded + local ref
+    const hasValidValue = useInputValidity(timeRef, validationOnBlur, noValidation);
+    const isInvalid = !noValidation && (invalid || !hasValidValue);
     const mergedRef = (node) => {
         timeRef.current = node;
         if (typeof ref === "function")
@@ -16,7 +15,7 @@ const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationO
         else if (ref)
             ref.current = node;
     };
-    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: mergedRef, ...props });
+    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: mergedRef, required: noValidation ? false : required, ...props });
 });
 IDSTime.displayName = "IDSTime";
 

package/components/header-1177/header-1177-region-picker-base.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177RegionPickerBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaLabel?: string;
+    ariaControls?: string;
     expanded?: boolean;
     hide?: boolean;
     onToggle?: () => void;
     client?: boolean;
 }
-export declare function IDSHeader1177RegionPickerBase({ text, expanded, hide, children, onToggle, client, ...props }: IDSHeader1177RegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177RegionPickerBase({ text, ariaLabel, ariaControls, expanded, hide, children, onToggle, client, ...props }: IDSHeader1177RegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177RegionPickerBase {
     var displayName: string;
 }

package/components/header-1177/header-1177-region-picker-base.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177RegionPickerBase({ text = "Välj region", expanded = false, hide = false, children, onToggle, client = false, ...props }) {
+function IDSHeader1177RegionPickerBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded = false, hide = false, children, onToggle, client = false, ...props }) {
     if (hide)
         return null;
     const hasChildren = React.Children.count(children) > 0;
@@ -11,11 +11,16 @@ function IDSHeader1177RegionPickerBase({ text = "Välj region", expanded = false
             onClick: onToggle
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsxs("div", { className: clsx("ids-header-1177-region-picker", {
             "ids-header-1177-region-picker--selected-region": hasChildren
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-region-picker__selector", children: jsx("button", { ...toggleHandler, className: clsx("ids-header-1177-region-picker__button", {
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-region-picker__selector", children: jsx("button", { ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-region-picker__button", {
                         "ids-header-1177-region-picker__button--expanded": expanded
-                    }), "aria-label": text, children: text }) })] }));
+                    }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: text }) })] }));
 }
 IDSHeader1177RegionPickerBase.displayName = "IDSHeader1177RegionPickerBase";
 

package/components/header-1177/header-1177-region-picker-mobile-base.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177RegionPickerMobileBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaLabel?: string;
+    ariaControls?: string;
     expanded?: boolean;
     onToggle?: () => void;
     hide?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177RegionPickerMobileBase({ text, expanded, children, onToggle, hide, client, ...props }: IDSHeader1177RegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177RegionPickerMobileBase({ text, ariaLabel, ariaControls, expanded, children, onToggle, hide, client, ...props }: IDSHeader1177RegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177RegionPickerMobileBase {
     var displayName: string;
 }

package/components/header-1177/header-1177-region-picker-mobile-base.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177RegionPickerMobileBase({ text = "Välj region", expanded = false, children, onToggle, hide = false, client = false, ...props }) {
+function IDSHeader1177RegionPickerMobileBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls = "", expanded = false, children, onToggle, hide = false, client = false, ...props }) {
     if (hide)
         return null;
     const hasChildren = React.Children.count(children) > 0;
@@ -11,11 +11,16 @@ function IDSHeader1177RegionPickerMobileBase({ text = "Välj region", expanded =
             onClick: onToggle
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsx("div", { className: clsx("ids-header-1177-region-picker-mobile", {
             "ids-header-1177-region-picker-mobile--selected-region": hasChildren
-        }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-region-picker-mobile__button", {
+        }), ...props, children: jsxs("button", { ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-region-picker-mobile__button", {
                 "ids-header-1177-region-picker-mobile__button--expanded": expanded
-            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-region-picker-mobile__button-text", children: text })] }) }));
+            }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: [jsx("div", { className: "ids-header-1177-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-region-picker-mobile__button-text", children: text })] }) }));
 }
 IDSHeader1177RegionPickerMobileBase.displayName = "IDSHeader1177RegionPickerMobileBase";
 

package/components/header-1177/header-1177-region-picker-mobile.d.ts

@@ -1,6 +1,8 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177RegionPickerMobileProps extends HTMLAttributes<HTMLElement> {
     expanded?: boolean;
+    ariaLabel?: string;
+    ariaControls?: string;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
 export declare function IDSHeader1177RegionPickerMobile({ expanded, onToggleRegion, children, ...props }: IDSHeader1177RegionPickerMobileProps): import("react/jsx-runtime").JSX.Element;

package/components/header-1177/header-1177-region-picker.d.ts

@@ -1,6 +1,8 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177RegionPickerProps extends HTMLAttributes<HTMLElement> {
     expanded?: boolean;
+    ariaLabel?: string;
+    ariaControls?: string;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
 export declare function IDSHeader1177RegionPicker({ expanded, onToggleRegion, children, ...props }: IDSHeader1177RegionPickerProps): import("react/jsx-runtime").JSX.Element;

package/components/header-1177-pro/header-1177-pro-region-picker-base.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     hide?: boolean;
     client?: boolean;
     onToggleRegion?: () => void;
 }
-export declare function IDSHeader1177ProRegionPickerBase({ text, expanded, hide, children, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerBase({ text, ariaLabel, ariaControls, expanded, hide, children, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerBase {
     var displayName: string;
 }