@inera/ids-react 9.1.1 → 9.2.0

package/components/accordion/accordion-base.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 import { HTMLAttributes, ReactNode } from "react";
 import "@inera/ids-design/components/accordion/accordion.css";
 interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     headline: ReactNode;
+    subtitle?: string;
     expanded?: boolean;
     level?: 1 | 2;
     headlineSize?: "m" | "s" | "xs";
@@ -10,8 +12,9 @@ interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     onToggleAccordion?: () => void;
     client?: boolean;
+    accordionRef?: React.Ref<HTMLDivElement>;
 }
-export declare function IDSAccordionBase({ headline, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, children, className, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSAccordionBase {
     var displayName: string;
 }

package/components/accordion/accordion-base.js

@@ -3,15 +3,41 @@ import clsx from 'clsx';
 import React, { useId } from 'react';
 import '@inera/ids-design/components/accordion/accordion.css';
 
-function IDSAccordionBase({ headline, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, children, className, ...props }) {
-    const contentId = `accordion-content-${useId()}`;
+function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, children, className, accordionRef, ...props }) {
+    const reactId = useId();
+    const headerId = `accordion-header-${reactId}`;
+    const contentId = `accordion-content-${reactId}`;
     const hasChildren = !!React.Children.toArray(children).length;
     const handleKeyDown = (e) => {
         if (!onToggleAccordion)
             return;
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onToggleAccordion();
+        const container = e.currentTarget.closest("[data-accordion-root]") || document;
+        const items = Array.from(container.querySelectorAll("[data-accordion-header]"));
+        const currentIndex = items.indexOf(e.currentTarget);
+        if (currentIndex === -1)
+            return;
+        switch (e.key) {
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                onToggleAccordion();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                items[currentIndex + 1]?.focus();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                items[currentIndex - 1]?.focus();
+                break;
+            case "Home":
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            case "End":
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
         }
     };
     const toggleHandlers = client && onToggleAccordion
@@ -20,13 +46,13 @@ function IDSAccordionBase({ headline, expanded = false, level = 1, headlineSize
             onKeyDown: handleKeyDown
         }
         : {};
-    return (jsxs("div", { ...props, className: clsx("ids-accordion", {
+    return (jsxs("div", { ...props, ref: accordionRef, className: clsx("ids-accordion", {
             "ids-accordion--expanded": expanded,
             "ids-accordion--no-border": noBorder,
             "ids-accordion--lean": lean,
             "ids-accordion--has-children": !!hasChildren,
             "ids-accordion--is-child": level === 2
-        }, className), children: [jsx("div", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), role: "button", tabIndex: 0, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsx("div", { className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: headline }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, className: "ids-accordion__content", children: children })] }));
+        }, className), children: [jsx("div", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), role: "button", tabIndex: 0, "data-accordion-header": true, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsxs("div", { id: headerId, className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: [headline, !!subtitle && jsx("div", { className: "ids-accordion__subtitle", children: subtitle })] }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, "aria-labelledby": headerId, role: "region", className: "ids-accordion__content", children: jsx("div", { "data-accordion-root": true, children: children }) })] }));
 }
 IDSAccordionBase.displayName = "IDSAccordionBase";
 

package/components/accordion/accordion.d.ts

@@ -1,16 +1,19 @@
 import React, { ReactNode } from "react";
 interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     headline: ReactNode;
+    subtitle?: string;
     accordions?: ReactNode;
     headlineSize?: "m" | "s" | "xs";
     level?: 1 | 2;
     expanded?: boolean;
+    defaultExpanded?: boolean;
     lean?: boolean;
     noBorder?: boolean;
     onCollapsed?: () => void;
     onExpanded?: () => void;
+    onExpandedChange?: (expanded: boolean) => void;
 }
-export declare function IDSAccordion({ headline, accordions, level, headlineSize, expanded, lean, noBorder, onCollapsed, onExpanded, children, className, ...props }: IDSAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordion({ headline, subtitle, accordions, level, headlineSize, expanded, defaultExpanded, lean, noBorder, onCollapsed, onExpanded, onExpandedChange, children, ...props }: IDSAccordionProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSAccordion {
     var displayName: string;
 }

package/components/accordion/accordion.js

@@ -3,26 +3,29 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSAccordionBase } from './accordion-base.js';
 
-function IDSAccordion({ headline, accordions, level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, children, className, ...props }) {
-    const [isExpanded, setIsExpanded] = useState(expanded);
+function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize = level === 2 ? "s" : "m", expanded, defaultExpanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, onExpandedChange, children, ...props }) {
+    const isControlled = expanded !== undefined;
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
+    const isExpanded = isControlled ? expanded : internalExpanded;
     useEffect(() => {
         if (level === 1 && accordionRef.current?.closest(".ids-card") && !accordions) {
             setIsLean(true);
         }
-    }, [level]);
-    useEffect(() => {
-        setIsExpanded(expanded);
-    }, [expanded]);
+    }, [level, accordions]);
     const toggleExpanded = () => {
-        setIsExpanded(prev => !prev);
-        if (isExpanded)
-            onCollapsed?.();
-        else
+        const next = !isExpanded;
+        if (!isControlled) {
+            setInternalExpanded(next);
+        }
+        onExpandedChange?.(next);
+        if (next)
             onExpanded?.();
+        else
+            onCollapsed?.();
     };
-    return (jsx("div", { ref: accordionRef, children: jsx(IDSAccordionBase, { ...props, client: true, headline: headline, level: level, headlineSize: headlineSize, expanded: isExpanded, lean: isLean, noBorder: noBorder, className: className, onToggleAccordion: toggleExpanded, children: children }) }));
+    return (jsx(IDSAccordionBase, { ...props, client: true, accordionRef: accordionRef, headline: headline, subtitle: subtitle, level: level, headlineSize: headlineSize, expanded: isExpanded, lean: isLean, noBorder: noBorder, onToggleAccordion: toggleExpanded, children: children }));
 }
 IDSAccordion.displayName = "IDSAccordion";
 

package/components/alert/alert-base.d.ts

@@ -19,3 +19,6 @@ export interface IDSAlertBaseProps extends React.HTMLAttributes<HTMLDivElement>
     client?: boolean;
 }
 export declare function IDSAlertBase({ collapsible, ribbon, collapsed, dismissible, headline, collapsableHeadline, compact, type, srCloseText, srCollapseText, srExpandText, noRole, onClose, onToggleCollapse, client, children, className, ...props }: IDSAlertBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSAlertBase {
+    var displayName: string;
+}

package/components/alert/alert-base.js

@@ -20,10 +20,11 @@ function IDSAlertBase({ collapsible = false, ribbon = false, collapsed = false,
             "ids-alert--collapsed": collapsed,
             "ids-alert--ribbon": ribbon,
             "ids-alert--compact": compact,
-            "ids-alert--dismissible": dismissible,
-        }, className), 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", ...closeHandler, "aria-label": srCloseText })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { className: clsx("ids-alert__expand-button", {
+            "ids-alert--dismissible": dismissible
+        }, className), 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", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
                                 "ids-alert__expand-button--expanded": !collapsed
-                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, 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: collapsed ? 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", ...closeHandler, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
+                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, 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: collapsed ? 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", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 }
+IDSAlertBase.displayName = "IDSAlertBase";
 
 export { IDSAlertBase };

package/components/alert/alert.d.ts

@@ -1,5 +1,10 @@
 import { IDSAlertBaseProps } from "./alert-base";
 export interface IDSAlertProps extends Omit<IDSAlertBaseProps, "contentId" | "onToggleCollapse"> {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSAlert({ collapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAlert({ collapsed, defaultCollapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSAlert {
+    var displayName: string;
+}

package/components/alert/alert.js

@@ -1,22 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { IDSAlertBase } from './alert-base.js';
 
-function IDSAlert({ collapsed = false, onCollapsedChange, onClose, children, className, ...props }) {
-    const [isCollapsed, setIsCollapsed] = useState(collapsed);
-    useEffect(() => {
-        setIsCollapsed(collapsed);
-    }, [collapsed]);
+// FIXME 10.0 byt till expanded och defaultExpanded?
+function IDSAlert({ collapsed, defaultCollapsed = false, onCollapsedChange, onClose, children, className, ...props }) {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
     const handleToggleCollapse = () => {
-        const newState = !isCollapsed;
-        setIsCollapsed(newState);
-        onCollapsedChange?.(newState);
+        const next = !isCollapsed;
+        if (!isControlled) {
+            setInternalCollapsed(next);
+        }
+        onCollapsedChange?.(next);
     };
     const handleClose = () => {
         onClose?.();
     };
     return (jsx(IDSAlertBase, { ...props, client: true, collapsed: isCollapsed, className: className, onToggleCollapse: handleToggleCollapse, onClose: handleClose, children: children }));
 }
+IDSAlert.displayName = "IDSAlert";
 
 export { IDSAlert };

package/components/badge/badge.d.ts

@@ -4,4 +4,4 @@ export interface IDSBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
     icon?: string;
 }
-export declare function IDSBadge({ type, icon, children, className, ...props }: IDSBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const IDSBadge: React.NamedExoticComponent<IDSBadgeProps>;

package/components/badge/badge.js

@@ -1,9 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/badge/badge.css';
 
-function IDSBadge({ type = "primary", icon, children, className, ...props }) {
-    return (jsx("div", { ...props, className: clsx(`ids-badge ids-badge--${type}`, className), 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] }) }));
-}
+const IDSBadge = React.memo(function IDSBadge(props) {
+    const { type = "primary", icon, children, className, ...rest } = props;
+    return (jsx("div", { ...rest, className: clsx(`ids-badge ids-badge--${type}`, className), 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] }) }));
+});
+IDSBadge.displayName = "IDSBadge";
 
 export { IDSBadge };

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -5,4 +5,7 @@ interface IDSBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;
 }
 export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSBreadcrumbs {
+    var displayName: string;
+}
 export {};

package/components/breadcrumbs/breadcrumbs.js

@@ -1,9 +1,29 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 
 function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className, ...props }) {
+    const listRef = useRef(null);
+    const handleKeyDown = (e) => {
+        if (!listRef.current)
+            return;
+        const items = listRef.current.querySelectorAll("[data-crumb] a, [data-crumb] button");
+        if (!items.length)
+            return;
+        const active = document.activeElement;
+        const currentIndex = Array.from(items).indexOf(active);
+        if (currentIndex === -1)
+            return;
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            items[currentIndex + 1]?.focus();
+        }
+        if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            items[currentIndex - 1]?.focus();
+        }
+    };
     const getMobileLink = () => {
         if (mobileLink) {
             return React.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
@@ -17,14 +37,15 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {
-                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", children: child }, index));
+                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: child }, index));
             }
             else {
-                return (jsxs("li", { className: "ids-breadcrumbs__crumb", children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));
+                return (jsxs("li", { className: "ids-breadcrumbs__crumb", "data-crumb": true, children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));
             }
         });
     };
-    return (jsxs("nav", { ...props, className: clsx("ids-breadcrumbs", className), "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), mobileLink && (jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) }))] }));
+    return (jsxs("nav", { ...props, className: clsx("ids-breadcrumbs", className), "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", ref: listRef, onKeyDown: handleKeyDown, children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), mobileLink && (jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon", "aria-hidden": "true" }), getMobileLink()] }) }))] }));
 }
+IDSBreadcrumbs.displayName = "IDSBreadcrumbs";
 
 export { IDSBreadcrumbs };

package/components/button/button-group.d.ts

@@ -9,4 +9,7 @@ interface IDSButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     break?: Break;
 }
 export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSButtonGroup {
+    var displayName: string;
+}
 export {};

package/components/button/button-group.js

@@ -9,5 +9,6 @@ function IDSButtonGroup({ rtl = false, justify = "start", unresponsive = false,
     }, className);
     return (jsx("div", { ...props, className: classNames, children: children }));
 }
+IDSButtonGroup.displayName = "IDSButtonGroup";
 
 export { IDSButtonGroup };

package/components/button/button.js

@@ -4,20 +4,28 @@ import { forwardRef } from 'react';
 import { IDSSpinner } from '../form/spinner/spinner.js';
 
 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,
-        "ids-button--fab": fab,
-        "ids-button--icon": (icon && !children) || iconButton,
-        "ids-button--secondary": secondary,
-        "ids-button--tertiary": tertiary,
-        "ids-button--disabled": disabled,
-        "ids-button--block": block,
-        "ids-button--submit": submit,
-        "ids-button--loading": loading,
-        "ids-focus-anchor": focusAnchor
-    }, className);
+    let classNames;
+    if (fab) {
+        classNames = clsx("ids-button", {
+            "ids-button--fab": fab,
+            "ids-focus-anchor": focusAnchor
+        }, className);
+    }
+    else {
+        classNames = clsx("ids-button", !!size && `ids-button--${size}`, {
+            "ids-button--m-block": mBlock,
+            "ids-button--s-block": sBlock,
+            "ids-button--active": active,
+            "ids-button--icon": (icon && !children) || iconButton,
+            "ids-button--secondary": secondary,
+            "ids-button--tertiary": tertiary,
+            "ids-button--disabled": disabled,
+            "ids-button--block": block,
+            "ids-button--submit": submit,
+            "ids-button--loading": loading,
+            "ids-focus-anchor": focusAnchor
+        }, className);
+    }
     return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children] }));
 });
 IDSButton.displayName = "IDSButton";

package/components/card/card.d.ts

@@ -10,4 +10,7 @@ interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
     interactive?: boolean;
 }
 export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSCard {
+    var displayName: string;
+}
 export {};

package/components/card/card.js

@@ -6,12 +6,13 @@ function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = fa
     return (jsxs("div", { ...props, className: clsx("ids-card", {
             "ids-card--fill": fill,
             "ids-card--border-top": !!borderTop && !focusCard,
-            "ids-card--focus-card": !!focusCard && !borderTop,
+            "ids-card--focus": !!focusCard && !borderTop,
             "ids-card--hide-on-m": hideOnM,
             "ids-card--hide-on-s": hideOnS,
             "ids-card--lean": lean,
             "ids-card--interactive": !!interactive && !hideOnM && !hideOnS && !borderTop
         }, className), children: [!!borderTop && !focusCard && !interactive && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children })] }));
 }
+IDSCard.displayName = "IDSCard";
 
 export { IDSCard };

package/components/carousel/carousel-item.d.ts

@@ -9,3 +9,6 @@ export interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
 }
 export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSCarouselItem {
+    var displayName: string;
+}

package/components/carousel/carousel-item.js

@@ -22,5 +22,6 @@ function IDSCarouselItem({ headline, step, description, activeSlide = false, pre
             next: nextSlide
         }, className), "aria-hidden": !activeSlide, inert: !activeSlide, children: jsxs("div", { className: clsx("ids-carousel-item"), 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 }) }))] }))] })] }) }));
 }
+IDSCarouselItem.displayName = "IDSCarouselItem";
 
 export { IDSCarouselItem };

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

@@ -14,4 +14,7 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     srText?: string;
 }
 export declare function IDSDateLabel({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSDateLabel {
+    var displayName: string;
+}
 export {};

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

@@ -14,5 +14,6 @@ function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel =
     const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
     return (jsxs("span", { ...props, className: clsx("ids-date-label", className), "aria-label": srText, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "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: "ids-date-label__time ids-date-label__time--separator", "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() })] }))] }));
 }
+IDSDateLabel.displayName = "IDSDateLabel";
 
 export { IDSDateLabel };

package/components/dialog/dialog-base.d.ts

@@ -13,7 +13,6 @@ export interface IDSDialogBaseProps extends HTMLAttributes<HTMLDivElement> {
     srClose?: string;
     noScrollAreaFocus?: boolean;
     noOverlay?: boolean;
-    dialogRef?: React.Ref<HTMLDivElement>;
     scrollAreaRef?: React.Ref<HTMLDivElement>;
     onOverlayClick?: () => void;
     client?: boolean;

package/components/dialog/dialog-base.js

@@ -3,7 +3,7 @@ import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/dialog/dialog.css';
 
-const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headline, actions, dismissible, onCloseDialog, srClose = "Stäng", noScrollAreaFocus, noOverlay = false, noFocusTrap = false, dialogRef, scrollAreaRef, onOverlayClick, client = false, children, className, ...props }, ref) => {
+const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headline, actions, dismissible, onCloseDialog, srClose = "Stäng", noScrollAreaFocus, noOverlay = false, noFocusTrap = false, scrollAreaRef, onOverlayClick, client = false, children, className, ...props }, ref) => {
     const reactId = useId();
     const headlineId = `dialog-header-${reactId}`;
     const overlayHandler = client && onOverlayClick
@@ -16,11 +16,11 @@ const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headl
             onClick: onCloseDialog
         }
         : {};
-    return (jsxs(Fragment, { children: [!noOverlay && (jsx("div", { className: `ids-dialog-overlay ${!show ? "ids-dialog-overlay--hidden" : ""}`, ...overlayHandler })), jsxs("div", { ...props, className: clsx("ids-dialog", {
+    return (jsxs(Fragment, { children: [!noOverlay && (jsx("div", { className: `ids-dialog-overlay ${!show ? "ids-dialog-overlay--hidden" : ""}`, ...overlayHandler, "aria-hidden": "true" })), jsxs("div", { ...props, className: clsx("ids-dialog", {
                     "ids-dialog--hidden": !show,
                     "ids-focus-trap": !noFocusTrap,
                     "ids-dialog--dismissible": !!dismissible
-                }, className), ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 });

package/components/dialog/dialog.d.ts

@@ -18,3 +18,6 @@ export interface IDSDialogProps extends HTMLAttributes<HTMLDivElement> {
     onVisibilityChange?: (isVisible: boolean) => void;
 }
 export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSDialog {
+    var displayName: string;
+}

package/components/dialog/dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { IDSDialogBase } from './dialog-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
@@ -10,8 +10,23 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
     const triggerRef = useRef(null);
     const dialogRef = useRef(null);
     const scrollAreaRef = useRef(null);
+    const closeDialog = useCallback(() => {
+        setIsVisible(false);
+        focusTrigger();
+    }, []);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
-    useEsc(() => setIsVisible(false), triggerRef, isVisible && !persistent);
+    useEsc(closeDialog, triggerRef, dialogRef, !persistent && isVisible);
+    const focusTrigger = () => {
+        const container = triggerRef.current;
+        if (!container)
+            return;
+        const el = container.querySelector('button, [href], input, [tabindex]:not([tabindex="-1"])');
+        el?.focus();
+    };
+    const overlayClick = useCallback(() => {
+        if (!persistent)
+            setIsVisible(false);
+    }, []);
     // Sync prop show
     useEffect(() => {
         setIsVisible(show);
@@ -53,23 +68,8 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
             }
         }
     }, [isVisible, autoFocus]);
-    const focusTrigger = () => {
-        const container = triggerRef.current;
-        if (!container)
-            return;
-        const focusable = container.querySelector('button, [href], input, [tabindex]:not([tabindex="-1"])');
-        focusable?.focus();
-    };
-    const overlayClick = useCallback(() => {
-        if (!persistent)
-            setIsVisible(false);
-        focusTrigger();
-    }, []);
-    const closeDialog = useCallback(() => {
-        setIsVisible(false);
-        focusTrigger();
-    }, []);
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, dialogRef: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, ref: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
 }
+IDSDialog.displayName = "IDSDialog";
 
 export { IDSDialog };

package/components/dropdown/dropdown-base.js

@@ -4,7 +4,9 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 
 function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
-    const triggerId = `dropdown-trigger-${useId()}`;
+    const reactId = useId();
+    const triggerId = `dropdown-trigger-${reactId}`;
+    const contentId = `dropdown-trigger-${reactId}`;
     const handleKeyPress = (e) => {
         if (!!onTriggerClick && (e.key === "Enter" || e.key === " ")) {
             e.preventDefault();
@@ -23,6 +25,7 @@ function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, positi
             id: triggerId,
             "aria-expanded": expanded,
             "aria-haspopup": "dialog",
+            "aria-controls": contentId,
             ...triggerHandlers,
             ...trigger.props
         })
@@ -31,12 +34,12 @@ function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, positi
             "ids-dropdown--m-block": mBlock,
             "ids-dropdown--s-block": sBlock,
             "ids-dropdown--expanded": expanded
-        }, className), children: [enhancedTrigger, jsx("div", { ...props, ref: contentRef, "aria-labelledby": triggerId, "aria-hidden": !expanded, className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
+        }, className), children: [enhancedTrigger, jsx("div", { id: contentId, ...props, ref: contentRef, "aria-labelledby": triggerId, hidden: !expanded, role: "dialog", "aria-modal": "true", className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, "ids-focus-trap", {
                     "ids-dropdown-content--show": expanded,
                     "ids-dropdown-content--mblock": mBlock,
                     "ids-dropdown-content--sblock": sBlock,
                     "ids-dropdown-content--scrollable": !!maxHeight
-                }, className), style: { minWidth }, children: jsx("div", { className: "ids-dropdown-content__scroll-area", role: "menu", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: children }) })] }));
+                }, className), style: { minWidth }, children: jsx("div", { className: "ids-dropdown-content__scroll-area", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: children }) })] }));
 }
 
 export { IDSDropdownBase };

package/components/dropdown/dropdown-content-button.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import clsx from 'clsx';
 
 const IDSDropdownContentButton = forwardRef(({ icon, children, className, ...props }, ref) => {
-    return (jsxs("button", { ...props, ref: ref, role: "menuitem", className: clsx("ids-dropdown-content__button", className), children: [icon && jsx("span", { className: `ids-icon-${icon} ids-dropdown--start-icon` }), children] }));
+    return (jsxs("button", { ...props, ref: ref, className: clsx("ids-dropdown-content__button", className), children: [icon && jsx("span", { className: `ids-icon-${icon} ids-dropdown--start-icon` }), children] }));
 });
 IDSDropdownContentButton.displayName = "IDSDropdownContentButton";
 

package/components/dropdown/dropdown-content-link.d.ts

@@ -3,3 +3,6 @@ export interface IDSDropdownContentLinkProps extends Omit<HTMLAttributes<HTMLAnc
     children: ReactElement;
 }
 export declare function IDSDropdownContentLink({ children, className, ...props }: IDSDropdownContentLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace IDSDropdownContentLink {
+    var displayName: string;
+}

package/components/dropdown/dropdown-content-link.js

@@ -6,9 +6,9 @@ function IDSDropdownContentLink({ children, className, ...props }) {
     return cloneElement(children, {
         ...props,
         className: clsx("ids-dropdown-content__link", className),
-        role: "menuitem",
         children: content
     });
 }
+IDSDropdownContentLink.displayName = "IDSDropdownContentLink";
 
 export { IDSDropdownContentLink };