@inera/ids-react 7.1.1 → 8.0.0

package/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/accordion/accordion.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
@@ -69,9 +69,9 @@ const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "
             "ids-accordion--is-child": level === 2
         }, className), ...props, children: [jsx("div", { className: `ids-accordion__button ids-accordion__button--${headlineSize}`, role: "button", tabIndex: 0, onClick: toggleExpansion, onKeyDown: onKeyPress, "aria-expanded": isExpanded, "aria-controls": contentId, children: jsx("div", { className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, {
                         "ids-accordion__headline--expanded": isExpanded
-                    }), children: headline }) }), jsx("div", { "aria-hidden": !isExpanded, id: contentId, className: "ids-accordion__content", children: React__default.Children.map(children, child => {
-                    if (React__default.isValidElement(child)) {
-                        return React__default.cloneElement(child, {
+                    }), children: headline }) }), jsx("div", { "aria-hidden": !isExpanded, id: contentId, className: "ids-accordion__content", children: React.Children.map(children, child => {
+                    if (React.isValidElement(child)) {
+                        return React.cloneElement(child, {
                             level: 2,
                             headlineSize: headlineSize === "m" ? "s" : headlineSize === "s" ? "xs" : "xs"
                         });

package/components/alert/alert.d.ts

@@ -1,21 +1,21 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/alert/alert.css";
 interface IDSAlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    collapsable?: boolean;
+    collapsible?: boolean;
     ribbon?: boolean;
     collapsed?: boolean;
     dismissible?: boolean;
     headline?: ReactNode;
+    collapsableHeadline?: string;
     compact?: boolean;
     type?: "info" | "attention" | "success" | "error";
     srCloseText?: string;
     srCollapseText?: string;
     srExpandText?: string;
-    srIconTitle?: string;
     noRole?: boolean;
     children?: ReactNode;
     onClose?: () => void;
-    onCollapsedChange?: (collapsed: boolean) => void;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
 }
 export declare const IDSAlert: React.FC<IDSAlertProps>;
 export {};

package/components/alert/alert.js

@@ -3,8 +3,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/alert/alert.css';
 import clsx from 'clsx';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dismissible = false, headline, compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, srIconTitle = "", onClose, onCollapsedChange, className, children, ...props }) => {
+const IDSAlert = ({ collapsible = false, ribbon = false, collapsed = false, dismissible = false, headline, collapsableHeadline = "", compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, onClose, onCollapsedChange, className, children, ...props }) => {
+    const contentId = useElementId();
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -17,13 +19,14 @@ const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dism
     const handleClose = () => {
         onClose?.();
     };
-    return (jsx("div", { className: clsx("ids-alert", `ids-alert--${type}`, {
+    return (jsx("div", { role: !noRole ? "alert" : undefined, className: clsx("ids-alert", `ids-alert--${type}`, {
+            "ids-alert--collapsible": collapsible,
             "ids-alert--collapsed": isCollapsed,
             "ids-alert--ribbon": ribbon,
             "ids-alert--compact": compact
-        }, className), role: !noRole ? "alert" : undefined, ...props, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", title: srIconTitle }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", title: srIconTitle }), jsx("div", { className: "ids-alert__headline", children: headline })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText })), collapsable && !compact && !ribbon && (jsx("button", { className: clsx("ids-alert__expand", {
-                                "ids-alert__expand--expanded": !isCollapsed
-                            }), onClick: handleToggleCollapse, "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? srExpandText : srCollapseText }))] }), !isCollapsed && jsx("div", { className: "ids-alert__content", children: children })] })) }));
+        }, className), ...props, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx(Fragment, { children: jsx("button", { className: clsx("ids-alert__expand-button", {
+                                    "ids-alert__expand-button--expanded": !isCollapsed
+                                }), onClick: handleToggleCollapse, "aria-controls": contentId, "aria-expanded": !isCollapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !isCollapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 };
 
 export { IDSAlert };

package/components/badge/badge.d.ts

@@ -3,7 +3,6 @@ import "@inera/ids-design/components/badge/badge.css";
 interface IDSBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
     icon?: string;
-    oldIcon?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSBadge: React.FC<IDSBadgeProps>;

package/components/badge/badge.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '@inera/ids-design/components/badge/badge.css';
 import clsx from 'clsx';
 
-const IDSBadge = ({ type = "primary", icon, oldIcon, children, className, ...props }) => {
-    return (jsx("div", { className: clsx(`ids-badge ids-badge--${type}`, className), ...props, children: jsxs("div", { className: "ids-badge__inner", children: [oldIcon, icon && jsx("span", { className: `ids-icon-${icon}` }), (icon || oldIcon) && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
+const IDSBadge = ({ type = "primary", icon, children, className, ...props }) => {
+    return (jsx("div", { className: clsx(`ids-badge ids-badge--${type}`, className), ...props, children: jsxs("div", { className: "ids-badge__inner", children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), icon && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
 };
 
 export { IDSBadge };

package/components/box-link/box-link.js

@@ -4,9 +4,9 @@ import { useRef } from 'react';
 import '@inera/ids-design/components/box-link/box-link.css';
 import clsx from 'clsx';
 
-const IDSBoxLink = ({ srButton = "", buttonIcon = "", onButtonClick, children, className, buttonProps = {} }) => {
+const IDSBoxLink = ({ srButton = "", buttonIcon = "", onButtonClick, children, className, buttonProps = {}, ...props }) => {
     const boxLinkRef = useRef(null);
-    return (jsx("div", { className: clsx("ids-box-link", className), ref: boxLinkRef, children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), !!onButtonClick && (jsx("div", { className: "ids-box-link__button", children: jsx("button", { className: `ids-icon-${buttonIcon}`, onClick: onButtonClick, "aria-label": srButton, ...buttonProps }) }))] }) }));
+    return (jsx("div", { className: clsx("ids-box-link", className), ref: boxLinkRef, ...props, children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), !!onButtonClick && (jsx("div", { className: "ids-box-link__button", children: jsx("button", { className: `ids-icon-${buttonIcon}`, onClick: onButtonClick, "aria-label": srButton, ...buttonProps }) }))] }) }));
 };
 
 export { IDSBoxLink };

package/components/breadcrumbs/breadcrumbs.js

@@ -1,20 +1,20 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 import clsx from 'clsx';
 
 const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children, className, ...props }) => {
     const getMobileLink = () => {
         if (mobileLink) {
-            return React__default.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
+            return React.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
         }
         else {
             return null;
         }
     };
     const getLinks = () => {
-        const links = React__default.Children.toArray(children);
+        const links = React.Children.toArray(children);
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {

package/components/button/button.d.ts

@@ -1,23 +1,22 @@
-import React, { ReactNode, ButtonHTMLAttributes } from "react";
+import { ReactNode, ButtonHTMLAttributes } from "react";
 type ButtonSize = "s" | "m" | "l";
 export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
     block?: boolean;
     disabled?: boolean;
     fab?: boolean;
-    iconButton?: boolean;
-    oldIcon?: ReactNode;
+    focusAnchor?: boolean;
     icon?: string;
+    iconButton?: boolean;
+    loading?: boolean;
     mBlock?: boolean;
     sBlock?: boolean;
-    loading?: boolean;
-    tertiary?: boolean;
     secondary?: boolean;
     size?: ButtonSize;
     submit?: boolean;
+    tertiary?: boolean;
     toggle?: boolean;
-    focusAnchor?: boolean;
     children?: ReactNode;
 }
-export declare const IDSButton: React.ForwardRefExoticComponent<IDSButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IDSButton: import("react").ForwardRefExoticComponent<IDSButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/components/button/button.js

@@ -1,44 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 
-const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", oldIcon = false, mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const oldIconRef = useRef(null);
-    const handleMouseEnter = () => {
-        if (!disabled && oldIconRef.current) {
-            setIconHoveredAttributes(oldIconRef.current);
-        }
-    };
-    const handleMouseLeave = () => {
-        if (oldIconRef.current) {
-            setOldIconAttributes(oldIconRef.current);
-        }
-    };
-    const handleFocus = () => {
-        setIsFocused(true);
-        if (!disabled && oldIconRef.current) {
-            setIconHoveredAttributes(oldIconRef.current);
-        }
-    };
-    const handleBlur = () => {
-        setIsFocused(false);
-    };
-    useEffect(() => {
-        if (oldIconRef.current) {
-            oldIconRef.current.setAttribute("size", "s");
-            if (!fab) {
-                setOldIconAttributes(oldIconRef.current);
-            }
-        }
-    }, []);
+const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
     const classNames = clsx("ids-button", size && `ids-button--${size}`, {
         "ids-button--m-block": mBlock,
         "ids-button--s-block": sBlock,
-        "ids-button--active": active || isFocused,
+        "ids-button--active": active,
         "ids-button--fab": fab,
-        "ids-button--icon": ((icon || oldIcon) && !children) || iconButton,
+        "ids-button--icon": (icon && !children) || iconButton,
         "ids-button--secondary": secondary,
         "ids-button--tertiary": tertiary,
         "ids-button--disabled": disabled,
@@ -47,52 +18,7 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
         "ids-button--loading": loading,
         "ids-focus-anchor": focusAnchor
     }, className);
-    const setOldIconAttributes = (iconComponent) => {
-        if (iconComponent && !fab) {
-            let color = "var(--IDS-BUTTON__ICON-COLOR)";
-            let color2 = "var(--IDS-BUTTON__ICON-COLOR-2)";
-            if (secondary) {
-                color = active
-                    ? "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR)"
-                    : "var(--IDS-BUTTON--SECONDARY__ICON-COLOR)";
-                color2 = active
-                    ? "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2)"
-                    : "var(--IDS-BUTTON--SECONDARY__ICON-COLOR-2)";
-            }
-            else if (tertiary) {
-                color = "var(--IDS-BUTTON--TERTIARY__ICON-COLOR)";
-                color2 = "var(--IDS-BUTTON--TERTIARY__ICON-COLOR-2)";
-            }
-            if (disabled) {
-                color = "var(--IDS-BUTTON--DISABLED__COLOR)";
-                color2 = "var(--IDS-BUTTON--DISABLED__COLOR)";
-            }
-            setOldIconColors(iconComponent, color, color2);
-        }
-    };
-    const setIconHoveredAttributes = (iconComponent) => {
-        if (oldIcon && !fab) {
-            let color = "var(--IDS-BUTTON--ACTIVE__ICON-COLOR)";
-            let color2 = "var(--IDS-BUTTON--ACTIVE__ICON-COLOR-2)";
-            if (secondary) {
-                color = "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR)";
-                color2 = "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2)";
-            }
-            else if (tertiary) {
-                color = "var(--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR)";
-                color2 = "var(--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2)";
-            }
-            setOldIconColors(iconComponent, color, color2);
-        }
-    };
-    const setOldIconColors = (iconComponent, color, color2) => {
-        iconComponent.setAttribute("color", color);
-        iconComponent.setAttribute("color2", color2);
-    };
-    const renderOldIcon = oldIcon && React__default.isValidElement(oldIcon)
-        ? React__default.cloneElement(oldIcon, { ref: oldIconRef })
-        : oldIcon;
-    return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), oldIcon && renderOldIcon, children] }));
+    return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
 });
 IDSButton.displayName = "IDSButton";
 

package/components/card/card.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/card/card.css";
 interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    focusCard?: boolean;
+    borderTop?: boolean;
+    cardLink?: ReactNode;
     fill?: boolean;
-    borderTop?: number;
-    lean?: boolean;
+    focusCard?: boolean;
     hideOnM?: boolean;
     hideOnS?: boolean;
-    cardLink?: ReactNode;
+    lean?: boolean;
     children?: ReactNode;
 }
 export declare const IDSCard: React.FC<IDSCardProps>;

package/components/card/card.js

@@ -3,20 +3,21 @@ import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/card/card.css';
 import clsx from 'clsx';
 
-const IDSCard = ({ focusCard = false, fill = false, borderTop = 0, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) => {
+const IDSCard = ({ focusCard = false, fill = false, borderTop = false, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) => {
     const enhancedCardLink = isValidElement(cardLink)
         ? cloneElement(cardLink, {
             className: clsx(cardLink.props.className, "ids-card--interactive-link")
         })
         : cardLink;
-    return (jsxs("div", { className: clsx("ids-card", !focusCard && borderTop && `ids-card--border-top-${borderTop}`, {
+    return (jsxs("div", { className: clsx("ids-card", {
             "ids-card--fill": fill,
-            "ids-card--focus-card": focusCard && !borderTop,
+            "ids-card--border-top": !!borderTop && !focusCard,
+            "ids-card--focus-card": !!focusCard && !borderTop,
             "ids-card--hide-on-m": hideOnM,
             "ids-card--hide-on-s": hideOnS,
             "ids-card--lean": lean,
             "ids-card--interactive": !!cardLink
-        }, className), ...props, children: [borderTop > 0 && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
+        }, className), ...props, children: [!!borderTop && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
 };
 
 export { IDSCard };

package/components/carousel/carousel-item.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import '@inera/ids-design/components/carousel/carousel-item.css';
 import clsx from 'clsx';
 
-const IDSCarouselItem = ({ headline, step, description, children, className }) => {
+const IDSCarouselItem = ({ headline, step, description, children, className, ...props }) => {
     const isImageElement = (child) => {
-        return React__default.isValidElement(child) && child.type === "img";
+        return React.isValidElement(child) && child.type === "img";
     };
     const findCarouselImage = (children) => {
         return children.find(isImageElement);
@@ -14,11 +14,11 @@ const IDSCarouselItem = ({ headline, step, description, children, className }) =
     const getNonImageContent = (children) => {
         return children.filter(child => !isImageElement(child));
     };
-    const childrenArray = React__default.Children.toArray(children);
+    const childrenArray = React.Children.toArray(children);
     const image = findCarouselImage(childrenArray);
     const otherContent = getNonImageContent(childrenArray);
     const hasFooterContent = description || step;
-    return (jsxs("div", { className: clsx("ids-carousel-item", className), children: [jsx("div", { className: "ids-carousel-item__image", children: image }), jsxs("div", { className: "ids-carousel-item__content", children: [headline && jsx("h2", { className: "ids-carousel-item__headline", children: headline }), otherContent, hasFooterContent && (jsxs("div", { className: "ids-carousel-item__footer", children: [description && jsx("div", { className: "ids-carousel-item__description", children: description }), step && (jsx("div", { className: "ids-carousel-item__step", children: jsx("div", { className: "ids-tag", children: step }) }))] }))] })] }));
+    return (jsxs("div", { className: clsx("ids-carousel-item", className), ...props, children: [jsx("div", { className: "ids-carousel-item__image", children: image }), jsxs("div", { className: "ids-carousel-item__content", children: [headline && jsx("h2", { className: "ids-carousel-item__headline", children: headline }), otherContent, hasFooterContent && (jsxs("div", { className: "ids-carousel-item__footer", children: [description && jsx("div", { className: "ids-carousel-item__description", children: description }), step && (jsx("div", { className: "ids-carousel-item__step", children: jsx("div", { className: "ids-tag", children: step }) }))] }))] })] }));
 };
 
 export { IDSCarouselItem };

package/components/carousel/carousel.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 import "@inera/ids-design/components/carousel/carousel.css";
 interface IDSCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
-    autoplay?: boolean;
-    autoplayDelay?: number;
     srNextLabel?: string;
     srPrevLabel?: string;
     children: React.ReactNode;

package/components/carousel/carousel.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useState, useRef, Children, useEffect } from 'react';
+import { useState, useRef, Children, useEffect } from 'react';
 import '@inera/ids-design/components/carousel/carousel.css';
 import clsx from 'clsx';
 import { breakPoints } from '../utils/utils.js';
 
-const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "Nästa slide", srPrevLabel = "Föregående slide", className, children }) => {
+const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", className, children, ...props }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [isAnimating, setIsAnimating] = useState(false);
     const [isAnimatingLeft, setIsAnimatingLeft] = useState(false);
@@ -61,9 +61,7 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
     }, []);
     // Set button location
     const setButtonLocation = () => {
-        const imageHeight = carouselRef.current
-            ?.querySelector(".ids-carousel-item__image")
-            ?.getBoundingClientRect().height;
+        const imageHeight = carouselRef.current?.querySelector(".ids-carousel-item__image")?.getBoundingClientRect().height;
         const buttonPlacement = imageHeight / 2;
         if (imageHeight && buttonPlacement) {
             setButtonPosition({
@@ -72,15 +70,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             });
         }
     };
-    useEffect(() => {
-        if (!autoplay)
-            return;
-        const delay = Math.max(autoplayDelay, 500);
-        const timer = setInterval(() => {
-            handleNext();
-        }, delay);
-        return () => clearInterval(timer);
-    }, [autoplay, autoplayDelay]);
     // change slide
     const handleNext = () => {
         if (isAnimating)
@@ -93,7 +82,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             setIsAnimatingRight(false);
         }, 500);
     };
-    // Previous slide
     const handlePrev = () => {
         if (isAnimating)
             return;
@@ -105,6 +93,22 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             setIsAnimatingLeft(false);
         }, 500);
     };
+    useEffect(() => {
+        if (!carouselRef.current)
+            return;
+        const allSlides = carouselRef.current.querySelectorAll(".ids-carousel-item-wrapper");
+        allSlides.forEach((slide, index) => {
+            const isActive = index === activeSlideIndex;
+            if (isActive) {
+                slide.removeAttribute("inert");
+                slide.setAttribute("aria-hidden", "false");
+            }
+            else {
+                slide.setAttribute("inert", "");
+                slide.setAttribute("aria-hidden", "true");
+            }
+        });
+    }, [activeSlideIndex]);
     // Touch/swipe
     const touchStartX = useRef(null);
     const handleTouchStart = (e) => {
@@ -118,28 +122,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             handleNext();
         touchStartX.current = null;
     };
-    const setTabIndexRecursively = (node, tabIndex) => {
-        if (React__default.isValidElement(node)) {
-            const props = {};
-            // Skip recursion into IDSLink — set tabIndex only at the top level if needed
-            if (node.type.displayName === "IDSLink" || node.type.name === "IDSLink") {
-                return React__default.cloneElement(node, {
-                    tabIndex
-                });
-            }
-            if (typeof node.type === "string") {
-                const focusableTags = ["a", "button", "input", "select", "textarea"];
-                if (focusableTags.includes(node.type)) {
-                    props.tabIndex = tabIndex;
-                }
-            }
-            if (node.props && node.props.children) {
-                props.children = React__default.Children.map(node.props.children, child => setTabIndexRecursively(child, tabIndex));
-            }
-            return React__default.cloneElement(node, props);
-        }
-        return node;
-    };
     const slides = Children.map(children, (child, index) => {
         const isActive = index === activeSlideIndex;
         const isPrev = index === (activeSlideIndex - 1 + slideCount) % slideCount;
@@ -151,16 +133,14 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             itemClass += " prev";
         else if (isNext)
             itemClass += " next";
-        // Disable tabbing for all elements inside inactive slides
-        const processedChild = isActive ? child : setTabIndexRecursively(child, -1);
-        return (jsx("div", { className: itemClass, "aria-hidden": !isActive, children: processedChild }, index));
+        return isActive ? (jsx("div", { className: itemClass, "aria-hidden": "false", children: child }, index)) : (jsx("div", { className: itemClass, "aria-hidden": "true", inert: true, children: child }, index));
     });
     const isMobile = windowWidth < breakPoints.medium;
-    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
+    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, ...props, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
                     "ids-carousel__button-prev--mobile": isMobile
                 }), onClick: handlePrev, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("button", { "aria-label": srNextLabel, className: clsx("ids-carousel__button-next", {
                     "ids-carousel__button-next--mobile": isMobile
-                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-slide js-carousel-slide", {
+                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-content js-carousel-slide", {
                     "animating-left": isAnimatingLeft,
                     "animating-right": isAnimatingRight
                 }), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: jsx("div", { "aria-live": "polite", children: slides }) })] }));

package/components/date-label/date-label.d.ts

@@ -6,6 +6,12 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     month?: number;
     monthLabel?: string;
     day?: number;
+    dateTo?: Date | null;
+    yearTo?: number;
+    monthTo?: number;
+    monthToLabel?: string;
+    dayTo?: number;
+    srText?: string;
 }
 export declare const IDSDateLabel: React.FC<IDSDateLabelProps>;
 export {};

package/components/date-label/date-label.js

@@ -5,21 +5,36 @@ import '@inera/ids-design/components/date-label/date-label.css';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day = 0, className, ...props }) => {
-    const [presentedDate, setPresentedDate] = useState(null);
+const IDSDateLabel = ({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, className, ...props }) => {
+    const [presentedDate, setPresentedDate] = useState(date ? new Date(date) : null);
+    const [presentedToDate, setPresentedToDate] = useState(dateTo ? new Date(dateTo) : null);
     useEffect(() => {
         if (date) {
             setPresentedDate(new Date(date));
         }
     }, [date]);
+    useEffect(() => {
+        if (dateTo) {
+            setPresentedToDate(new Date(dateTo));
+        }
+    }, [dateTo]);
     const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
+    const getYearTo = () => (presentedToDate ? presentedToDate.getFullYear() : yearTo);
     const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
+    const getMonthTo = () => (presentedToDate ? presentedToDate.getMonth() + 1 : monthTo);
     const getDay = () => {
         const dayNumber = presentedDate ? presentedDate.getDate() : day;
         return getDayAsText(dayNumber);
     };
+    const getDayTo = () => {
+        const dayNumber = presentedToDate ? presentedToDate.getDate() : dayTo;
+        return getDayAsText(dayNumber);
+    };
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    return (jsxs("time", { className: clsx("ids-date-label", className), dateTime: `${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`, ...props, children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }));
+    const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
+    // dateTime={`${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`}
+    // dateTime={`${getDayTo()}-${getMonthTo().toString().padStart(2, "0")}-${getYearTo()}`}
+    return (jsxs("span", { className: "ids-date-label", "aria-label": srText, ...props, role: "text", children: [jsxs("time", { className: clsx("ids-date-label__time", className), "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(!!dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: clsx("ids-date-label__time ids-date-label__time--separator", className), "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
 };
 
 export { IDSDateLabel };

package/components/dialog/dialog.d.ts

@@ -1,23 +1,23 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/dialog/dialog.css";
 interface IDSDialogProps extends React.HTMLAttributes<HTMLDivElement> {
-    show?: boolean;
-    srClose?: string;
-    dismissible?: boolean;
+    actions?: ReactNode;
     autoFocus?: boolean;
-    noOverlay?: boolean;
-    noFocusTrap?: boolean;
+    dismissible?: boolean;
+    headline?: ReactNode;
+    height?: string;
     keepScrollbar?: boolean;
-    persistent?: boolean;
-    noScrollAreaFocus?: boolean;
-    width?: string;
     maxWidth?: string;
-    height?: string;
+    noFocusTrap?: boolean;
+    noOverlay?: boolean;
+    noScrollAreaFocus?: boolean;
+    persistent?: boolean;
+    show?: boolean;
+    srClose?: string;
     trigger?: ReactNode;
-    headline?: ReactNode;
-    actions?: ReactNode;
+    width?: string;
     children?: ReactNode;
-    onVisibilityChange?: (value: boolean) => void;
+    onVisibilityChange?: (isVisible: boolean) => void;
 }
 export declare const IDSDialog: React.FC<IDSDialogProps>;
 export {};

package/components/dialog/dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useId, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/dialog/dialog.css';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import clsx from 'clsx';
@@ -9,8 +9,6 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
     const [isVisible, setIsVisible] = useState(show);
     const dialogRef = useRef(null);
     const bodyRef = useRef(null);
-    const headlineId = useId();
-    const contentId = useId();
     const [hasScrollbar, setHasScrollbar] = useState(false);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
     useEffect(() => {
@@ -50,7 +48,7 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
             setTimeout(() => {
                 const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
                     bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
-                    dialogRef.current?.querySelector("button.ids-dialog__header__button");
+                    dialogRef.current?.querySelector("button.ids-dialog__close-button");
                 console.log("focusable", focusable);
                 focusable?.focus();
             });
@@ -65,15 +63,15 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
                     "ids-dialog-overlay--hidden": !isVisible || noOverlay
                 }), onClick: overlayClick }), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
                     "ids-dialog--hidden": !isVisible
-                }, className), role: "dialog", "aria-modal": "true", "aria-labelledby": headlineId, "aria-describedby": contentId, style: {
+                }, className), role: "dialog", "aria-modal": "true", style: {
                     width,
                     maxWidth,
                     height,
                     maxHeight: height || undefined
-                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__header", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__header__button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
+                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__close-button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--has-scrollbar": hasScrollbar,
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
-                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { id: headlineId, className: "ids-dialog__body__headline", children: headline }), jsx("div", { id: contentId, className: "ids-dialog__body__content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
+                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 };
 
 export { IDSDialog };