@inera/ids-react 9.2.1 → 9.3.0

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;
 }

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,11 +9,16 @@ function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hid
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
             "ids-header-1177-pro-region-picker--selected-region": !!children
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
                         "ids-header-1177-pro-region-picker__button--expanded": expanded
-                    }), "aria-label": text, children: text }) })] }));
+                    }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: text }) })] }));
 }
 IDSHeader1177ProRegionPickerBase.displayName = "IDSHeader1177ProRegionPickerBase";
 

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

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

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,12 +9,17 @@ function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expande
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
             "ids-header-1177-pro-region-picker-mobile--selected-region": !!children,
             "ids-header-1177-pro-region-picker-mobile--unresponsive": unresponsive
-        }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
+        }), ...props, children: jsxs("button", { ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
                 "ids-header-1177-pro-region-picker-mobile__button--expanded": expanded
-            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
+            }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
 }
 IDSHeader1177ProRegionPickerMobileBase.displayName = "IDSHeader1177ProRegionPickerMobileBase";
 

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

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

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177ProRegionPickerMobileBase } from './header-1177-pro-region-picker-mobile-base.js';
 
-function IDSHeader1177ProRegionPickerMobile({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPickerMobile({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

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

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

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { IDSHeader1177ProRegionPickerBase } from './header-1177-pro-region-picker-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeader1177ProRegionPicker({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPicker({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

package/components/popover/popover-content.js

@@ -9,7 +9,7 @@ function IDSPopoverContent({ position = "bottom", caretPosition = "bottom", srCl
     const renderCaret = (pos) => (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
     return (jsxs("div", { ref: contentRef, style: style, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
             "ids-focus-trap": !noFocusTrap
-        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(caretPosition), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler, ref: closeButtonRef }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
+        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(caretPosition), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { className: "ids-popover-content__close-btn", "aria-label": srCloseText, ...closeHandler, ref: closeButtonRef }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
 }
 IDSPopoverContent.displayName = "IDSPopoverContent";
 

package/components/popover/popover.d.ts

@@ -10,12 +10,13 @@ interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     noFocusTrap?: boolean;
     autoFocus?: boolean;
     srCloseText?: string;
+    zIndex?: number;
     noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
     headline?: React.ReactNode;
     children?: React.ReactNode;
 }
-export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, zIndex, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSPopover {
     var displayName: string;
 }

package/components/popover/popover.js

@@ -7,7 +7,7 @@ import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { IDSPopoverContent } from './popover-content.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
 
-function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange, ...props }) {
+function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", zIndex = 9999, headline, children, className, onVisibilityChange, ...props }) {
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -34,11 +34,6 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
             setTimeout(() => requestAnimationFrame(() => setReady(true)), 100);
         }
     }, [isExpanded]);
-    useLayoutEffect(() => {
-        if (!ready)
-            return;
-        requestAnimationFrame(() => updatePosition());
-    }, [ready]);
     const handleVisibilityChange = (visible) => {
         setIsExpanded(visible);
         onVisibilityChange?.(visible);
@@ -161,16 +156,35 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
         });
     }, [position]);
     useLayoutEffect(() => {
-        if (!isExpanded || !triggerRef.current || !contentRef.current)
+        if (!ready)
             return;
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        window.addEventListener("scroll", updatePosition);
+        requestAnimationFrame(() => updatePosition());
+    }, [ready, updatePosition]);
+    useLayoutEffect(() => {
+        if (!isExpanded)
+            return;
+        const update = () => {
+            requestAnimationFrame(updatePosition);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        if (triggerRef.current)
+            observer.observe(triggerRef.current);
+        if (contentRef.current)
+            observer.observe(contentRef.current);
+        observer.observe(document.documentElement);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        window.visualViewport?.addEventListener("resize", update);
+        window.visualViewport?.addEventListener("scroll", update);
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition);
+            observer.disconnect();
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+            window.visualViewport?.removeEventListener("resize", update);
+            window.visualViewport?.removeEventListener("scroll", update);
         };
-    }, [isExpanded, position]);
+    }, [isExpanded, updatePosition]);
     return (jsxs("span", { "data-popover-category": category, ref: popoverRef, children: [jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className }), mounted &&
                 isExpanded &&
                 createPortal(jsx(IDSPopoverContent, { client: true, headline: headline, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, caretPosition: position, srCloseText: srCloseText, closeButtonRef: closeButtonRef, closePopover: closePopover, contentScrollAreaStyle: {
@@ -181,7 +195,7 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
                         position: "absolute",
                         top: coords.top,
                         left: coords.left,
-                        zIndex: 9999
+                        zIndex: zIndex
                     }, children: children }), document.body)] }));
 }
 IDSPopover.displayName = "IDSPopover";

package/components/puff-list/puff-list-item-header.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    headlineLevel?: 2 | 3 | 4 | 5;
+    headlineLevel?: 2 | 3 | 4 | 5 | 6;
     headlineExtra?: ReactNode;
     noMargin?: boolean;
 }

package/components/puff-list/puff-list-item.d.ts

@@ -9,8 +9,9 @@ export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement>
     lean?: boolean;
     dateLabel?: ReactNode;
     extra?: ReactNode;
+    noListItem?: boolean;
 }
-export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, noListItem, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSPuffListItem {
     var displayName: string;
 }

package/components/puff-list/puff-list-item.js

@@ -3,8 +3,8 @@ import { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 
-function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, className, children, ...props }) {
-    const Tag = lean ? "div" : "li";
+function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, noListItem, className, children, ...props }) {
+    const Tag = noListItem || lean ? "div" : "li";
     const content = (jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content-wrapper", children: [jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), jsx("div", { className: "ids-puff-list-item-header", children: header }), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] })] }));
     const wrappedContent = itemLink && isValidElement(itemLink)
         ? cloneElement(itemLink, {

package/components/side-panel/side-panel-base.d.ts

@@ -18,6 +18,7 @@ export interface IDSSidePanelBaseProps extends React.HTMLAttributes<HTMLDivEleme
     client?: boolean;
     srClose?: string;
     srOpen?: string;
+    noCloseButton?: boolean;
     noScrollAreaFocus?: boolean;
     hamburgerRef?: React.Ref<HTMLButtonElement>;
     componentRef?: React.Ref<HTMLDivElement>;