@inera/ids-react 8.2.0 → 9.0.1

package/components/puff-list/{puff-list-item/puff-list-item-info.d.ts → puff-list-item-info.d.ts}

@@ -1,6 +1,5 @@
 import React from "react";
-import "@inera/ids-design/components/puff-list/puff-list.css";
 export interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
     bottom?: boolean;
 }
-export declare function IDSPuffListItemInfo({ bottom, children, className, ...props }: IDSPuffListItemInfoProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItemInfo({ bottom, children, ...props }: IDSPuffListItemInfoProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSPuffListItemInfo({ bottom = false, children, ...props }) {
+    return (jsx("div", { ...props, className: clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }), children: children }));
+}
+
+export { IDSPuffListItemInfo };

package/components/puff-list/{puff-list-item/puff-list-item.d.ts → puff-list-item.d.ts}

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

package/components/puff-list/{puff-list-item/puff-list-item.js → puff-list-item.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/puff-list/puff-list.css';
 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 renderBody = () => {
@@ -15,10 +15,10 @@ function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, le
         }
         return content;
     };
-    return (jsxs("div", { className: clsx("ids-puff-list-item", {
+    return (jsxs("div", { ...props, className: clsx("ids-puff-list-item", {
             "ids-puff-list-item--interactive": !!itemLink,
             "ids-puff-list-item--lean": !!lean
-        }, className), ...props, children: [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", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
+        }, className), children: [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", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
 }
 IDSPuffListItem.displayName = "IDSPuffListItem";
 

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

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/puff-list/puff-list.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/puff-list/puff-list.css';
 
 function IDSPuffList({ children, className, ...props }) {
-    const classes = clsx("ids-puff-list", className);
-    return (jsx("div", { className: classes, ...props, children: children }));
+    return (jsx("div", { ...props, className: clsx("ids-puff-list", className), children: children }));
 }
 
 export { IDSPuffList };

package/components/region-icon/region-icon.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/region-icon/region-icon.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/region-icon/region-icon.css';
 
 function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) {
     const getSize = () => {
@@ -19,7 +19,7 @@ function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inlin
                 return "2.5rem";
         }
     };
-    return (jsx("span", { className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), style: { fontSize: getSize() }, ...props }));
+    return (jsx("span", { ...props, className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), style: { fontSize: getSize() } }));
 }
 
 export { IDSRegionIcon };

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

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/side-menu/side-menu.css";
+interface IDSSideMenuBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    srToggleText?: string;
+    expanded?: boolean;
+    active?: boolean;
+    level?: number;
+    icon?: string;
+    labelNotification?: ReactNode;
+    link?: ReactNode;
+    isExpanded?: boolean;
+    onToggleMenu?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    handleKeyDown?: (e: React.KeyboardEvent) => void;
+    toggleButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    client?: boolean;
+}
+export declare function IDSSideMenuBase({ label, srToggleText, expanded, active, level, icon, labelNotification, link, isExpanded, onToggleMenu, handleKeyDown, toggleButtonProps, className, children, client, ...props }: IDSSideMenuBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSideMenuBase {
+    var displayName: string;
+}
+export {};

package/components/side-menu/side-menu-base.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/side-menu/side-menu.css';
+
+function IDSSideMenuBase({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, isExpanded = expanded, onToggleMenu, handleKeyDown, toggleButtonProps, className, children, client = false, ...props }) {
+    const hasChildren = !!React.Children.toArray(children).length;
+    const toggleHandlers = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu,
+            onKeyDown: handleKeyDown
+        }
+        : {};
+    const renderExpandButton = () => {
+        if (hasChildren) {
+            return (jsx("button", { className: clsx("ids-side-menu__chevron-button", {
+                    "ids-side-menu__chevron-button--expanded": isExpanded
+                }), ...toggleHandlers, ...toggleButtonProps, "aria-expanded": isExpanded, "aria-label": srToggleText }));
+        }
+        return icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" }));
+    };
+    const renderLabel = () => {
+        if (hasChildren) {
+            return (jsxs("button", { className: "ids-side-menu__label-button", ...toggleHandlers, ...toggleButtonProps, "aria-expanded": isExpanded, "aria-label": srToggleText, children: [jsx("div", { className: clsx("ids-side-menu__label-chevron", {
+                            "ids-side-menu__label-chevron--expanded": isExpanded
+                        }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
+        }
+        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
+    };
+    const renderMenuPost = () => {
+        if (label)
+            return renderLabel();
+        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", onClick: e => e.stopPropagation(), onKeyDown: e => e.code !== "Escape" && e.stopPropagation(), children: link })] }));
+    };
+    return (jsxs("div", { className: clsx("ids-side-menu", `ids-side-menu--level-${level}`, className), ...props, children: [jsx("div", { className: clsx("ids-side-menu__header", {
+                    "ids-side-menu--active": active,
+                    "ids-side-menu--node-label": hasChildren && label
+                }), children: jsx("div", { className: "ids-side-menu__header-inner", children: renderMenuPost() }) }), isExpanded && jsx("div", { className: "ids-side-menu__children", children: children })] }));
+}
+IDSSideMenuBase.displayName = "IDSSideMenuBase";
+
+export { IDSSideMenuBase };

package/components/side-menu/side-menu.d.ts

@@ -1,16 +1,13 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/side-menu/side-menu.css";
-interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+import React from "react";
+export interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
     srToggleText?: string;
     expanded?: boolean;
     active?: boolean;
     level?: number;
     icon?: string;
-    labelNotification?: ReactNode;
-    link?: ReactNode;
-    children?: ReactNode;
-    onExpandedChange?: (isExpanded: boolean) => void;
+    labelNotification?: React.ReactNode;
+    link?: React.ReactNode;
+    onToggleMenu?: (isExpanded: boolean) => void;
 }
-export declare const IDSSideMenu: React.FC<IDSSideMenuProps>;
-export {};
+export declare function IDSSideMenu({ expanded, onToggleMenu, srToggleText, className, ...props }: IDSSideMenuProps): import("react/jsx-runtime").JSX.Element;

package/components/side-menu/side-menu.js

@@ -1,55 +1,25 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState } from 'react';
-import '@inera/ids-design/components/side-menu/side-menu.css';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { IDSSideMenuBase } from './side-menu-base.js';
 
-const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange, ...props }) => {
+function IDSSideMenu({ expanded = false, onToggleMenu, srToggleText = "Sektion", className, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const hasChildren = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === IDSSideMenu);
-    const toggleExpanded = (e) => {
+    const handleToggleMenu = (e) => {
         e.stopPropagation();
-        if (hasChildren) {
-            const newExpanded = !isExpanded;
-            setIsExpanded(newExpanded);
-            onExpandedChange?.(newExpanded);
-        }
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        onToggleMenu?.(newExpanded);
     };
     const handleKeyDown = (e) => {
-        if (e.code !== "Escape") {
+        if (e.code !== "Escape")
             e.stopPropagation();
-        }
         if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault(); // ✅ Prevent browser from also firing `click`
-            toggleExpanded(e);
-        }
-    };
-    const renderExpandButton = () => {
-        if (hasChildren) {
-            return (jsx("button", { className: clsx("ids-side-menu__chevron-button", {
-                    "ids-side-menu__chevron-button--expanded": isExpanded
-                }), onClick: toggleExpanded, onKeyDown: handleKeyDown, "aria-expanded": isExpanded, "aria-label": srToggleText }));
-        }
-        return icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" }));
-    };
-    const renderLabel = () => {
-        if (hasChildren) {
-            return (jsxs("button", { className: "ids-side-menu__label-button", onClick: toggleExpanded, onKeyDown: handleKeyDown, "aria-expanded": isExpanded, "aria-label": srToggleText, children: [jsx("div", { className: clsx("ids-side-menu__label-chevron", {
-                            "ids-side-menu__label-chevron--expanded": isExpanded
-                        }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
-        }
-        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
-    };
-    const renderMenuPost = () => {
-        if (label) {
-            return renderLabel();
+            e.preventDefault();
+            handleToggleMenu(e);
         }
-        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", children: link })] }));
     };
-    return (jsxs("div", { className: clsx("ids-side-menu", className), ...props, children: [jsx("div", { className: clsx("ids-side-menu__header", `ids-side-menu--level-${level}`, {
-                    "ids-side-menu--active": active,
-                    "ids-side-menu--node-label": hasChildren && label
-                }), children: jsx("div", { className: "ids-side-menu__header-inner", children: renderMenuPost() }) }), isExpanded && jsx("div", { className: "ids-side-menu__children", children: children })] }));
-};
+    return (jsx(IDSSideMenuBase, { ...props, client: true, className: className, srToggleText: srToggleText, isExpanded: isExpanded, onToggleMenu: handleToggleMenu, handleKeyDown: handleKeyDown }));
+}
 
 export { IDSSideMenu };

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

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/side-panel/side-panel.css";
+export type PanelSize = "s" | "m" | "l";
+export interface IDSSidePanelBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+    left?: boolean;
+    elevated?: boolean;
+    menu?: boolean;
+    footer?: boolean;
+    footerDarkmodeToggle?: ReactNode;
+    size?: PanelSize;
+    srLabel?: string;
+    onTogglePanel?: () => void;
+    onClosePanel?: () => void;
+    headline?: ReactNode;
+    footerLinks?: ReactNode;
+    footerText?: ReactNode;
+    client?: boolean;
+    srClose?: string;
+    srOpen?: string;
+    noScrollAreaFocus?: boolean;
+    hamburgerRef?: React.Ref<HTMLButtonElement>;
+}
+export declare const IDSSidePanelBase: React.ForwardRefExoticComponent<IDSSidePanelBaseProps & React.RefAttributes<HTMLDivElement>>;

package/components/side-panel/side-panel-base.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/side-panel/side-panel.css';
+
+const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, className, children, ...props }, ref) => {
+    const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", size && !menu && `ids-side-panel--${size}`, menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
+        "ids-side-panel--show": visible,
+        "ids-side-panel--elevated": elevated,
+        "ids-side-panel--left": !menu && left
+    }, className);
+    const toggleHandler = client && onTogglePanel
+        ? {
+            onClick: onTogglePanel
+        }
+        : {};
+    const closeHandler = client && onClosePanel
+        ? {
+            onClick: onClosePanel
+        }
+        : {};
+    const renderFooter = () => {
+        if (menu && footer) {
+            return (jsxs("footer", { className: "ids-side-panel__footer", children: [footerLinks && jsx("div", { className: "ids-side-panel__footer-links", children: footerLinks }), footerDarkmodeToggle && jsx("div", { className: "ids-side-panel__footer-toggle", children: footerDarkmodeToggle }), footerText && jsx("div", { className: "ids-side-panel__footer-text", children: footerText })] }));
+        }
+        return null;
+    };
+    const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
+    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) }), renderContent()] }) }));
+});
+IDSSidePanelBase.displayName = "IDSSidePanelBase";
+
+export { IDSSidePanelBase };

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+export interface IDSSidePanelProviderProps extends React.HTMLAttributes<HTMLDivElement> {
+    left?: boolean;
+    hideSidePanel?: boolean;
+    sidePanel: ReactNode;
+}
+export declare function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, children, ...props }: IDSSidePanelProviderProps): import("react/jsx-runtime").JSX.Element;

package/components/side-panel/side-panel-provider.js

@@ -0,0 +1,12 @@
+import { jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, children, ...props }) {
+    const classNames = clsx("ids-side-panel-provider", { "ids-side-panel-provider--left": !!left }, className);
+    if (!!left) {
+        return (jsxs("div", { className: classNames, ...props, children: [!hideSidePanel && sidePanel, " ", children] }));
+    }
+    return (jsxs("div", { className: classNames, ...props, children: [children, " ", !hideSidePanel && sidePanel] }));
+}
+
+export { IDSSidePanelProvider };

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

@@ -1,23 +1,22 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/side-panel/side-panel.css";
-type PanelSize = "s" | "m" | "l";
-interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+import { ReactNode } from "react";
+import { PanelSize } from "./side-panel-base";
+export interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
     show?: boolean;
-    left?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    srClose?: string;
+    srOpen?: string;
     elevated?: boolean;
+    left?: boolean;
     menu?: boolean;
     footer?: boolean;
-    srLabel?: string;
-    srClose?: string;
-    srOpen?: string;
+    footerDarkmodeToggle?: ReactNode;
     size?: PanelSize;
-    onVisibilityChange?: (visible: boolean) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
+    srLabel?: string;
+    headline?: ReactNode;
     footerLinks?: ReactNode;
     footerText?: ReactNode;
-    headline?: ReactNode;
-    children?: ReactNode;
+    noScrollAreaFocus?: boolean;
 }
-export declare const IDSSidePanel: React.FC<IDSSidePanelProps>;
-export {};
+export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react/jsx-runtime").JSX.Element;

package/components/side-panel/side-panel.js

@@ -1,77 +1,72 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/side-panel/side-panel.css';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { IDSSidePanelBase } from './side-panel-base.js';
 
-const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = false, footer = false, size = "m", srLabel = "Sidopanel", srClose = "Stäng", srOpen = "Öppna", onVisibilityChange, onOpen, onClose, footerLinks, footerText, headline, className, children, ...props }) => {
-    const [isVisible, setIsVisible] = useState(show);
+function IDSSidePanel({ show = false, menu = false, noScrollAreaFocus = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
+    const internalRef = useRef(null);
     const hamburgerRef = useRef(null);
-    const panelRef = useRef(null);
-    const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", size && !menu && `ids-side-panel--${size}`, menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
-        "ids-side-panel--show": isVisible,
-        "ids-side-panel--elevated": elevated,
-        "ids-side-panel--left": !menu && left
-    }, className);
+    const [internalShow, setInternalShow] = useState(show);
     useEffect(() => {
-        const handleResize = () => {
-            if (panelRef.current) {
-                if (window.innerWidth <= 1024) {
-                    panelRef.current.setAttribute("role", "dialog");
-                    panelRef.current.setAttribute("aria-modal", "true");
-                    panelRef.current.setAttribute("aria-label", srLabel);
-                }
-                else {
-                    panelRef.current.removeAttribute("role");
-                    panelRef.current.removeAttribute("aria-modal");
-                    panelRef.current.removeAttribute("aria-label");
-                }
-            }
-        };
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    useEffect(() => {
-        setIsVisible(show);
+        if (show !== internalShow) {
+            setInternalShow(show);
+            onVisibilityChange?.(show);
+        }
     }, [show]);
+    // Escape key
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key === "Escape" && isVisible) {
-                setIsVisible(false);
+            if (e.key === "Escape" && internalShow) {
+                setInternalShow(false);
+                onVisibilityChange?.(false);
             }
         };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [isVisible]);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [internalShow]);
     useEffect(() => {
-        onVisibilityChange?.(isVisible);
-        if (isVisible) {
+        if (internalShow) {
             onOpen?.();
-            const heading = panelRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
+            const heading = internalRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
             heading?.setAttribute("tabindex", "-1");
             heading?.focus();
         }
         else {
-            onClose?.();
             if (menu && hamburgerRef.current) {
                 hamburgerRef.current.focus();
             }
+            onClose?.();
         }
-    }, [isVisible]);
-    const togglePanel = () => setIsVisible(prev => !prev);
-    const closePanel = () => setIsVisible(false);
-    const renderButton = () => {
-        return menu ? (jsx("button", { "aria-label": isVisible ? srClose : srOpen, className: "ids-side-panel__hamburger", id: "js-hamburger", "aria-expanded": isVisible, onClick: togglePanel, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": isVisible, className: "ids-side-panel__close-button", onClick: closePanel }));
+    }, [internalShow]);
+    // Window resize ARIA attributes
+    useEffect(() => {
+        const handleResize = () => {
+            const panel = internalRef.current;
+            if (panel) {
+                if (window.innerWidth <= 1024) {
+                    panel.setAttribute("role", "dialog");
+                    panel.setAttribute("aria-modal", "true");
+                    panel.setAttribute("aria-label", srLabel);
+                }
+                else {
+                    panel.removeAttribute("role");
+                    panel.removeAttribute("aria-modal");
+                    panel.removeAttribute("aria-label");
+                }
+            }
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [srLabel]);
+    const onClosePanel = () => {
+        setInternalShow(false);
+        onVisibilityChange?.(false);
     };
-    const renderFooter = () => {
-        if (menu && footer) {
-            return (jsxs("footer", { className: "ids-side-panel__footer", children: [footerLinks && jsx("div", { className: "ids-side-panel__footer-links", children: footerLinks }), jsx("div", { className: "ids-side-panel__footer-text", children: footerText })] }));
-        }
-        return null;
+    const onTogglePanel = () => {
+        setInternalShow(prev => !prev);
     };
-    const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
-    return (jsx("div", { className: classNames, ref: panelRef, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [jsx("div", { className: "ids-side-panel__actions", children: renderButton() }), renderContent()] }) }));
-};
+    return (jsx(IDSSidePanelBase, { ...props, ref: internalRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: internalShow, onClosePanel: onClosePanel, onTogglePanel: onTogglePanel, hamburgerRef: hamburgerRef, children: children }));
+}
 
 export { IDSSidePanel };

package/components/stepper/step-base.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/stepper/stepper.css";
+export type StepState = "" | "valid" | "invalid" | "selected";
+export interface IDSStepBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: StepState;
+    headline?: ReactNode;
+    label?: string;
+    stepNumber?: string;
+    srIndicatorText?: string;
+    expanded?: boolean;
+    disabled?: boolean;
+    onToggleStep?: (step: string, expanded: boolean) => void;
+    client?: boolean;
+}
+export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLDivElement>>;

package/components/stepper/step-base.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/stepper/stepper.css';
+
+const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", expanded = false, disabled = false, onToggleStep, client, className, children, ...props }, ref) => {
+    const renderStepIndicator = () => {
+        if (state === "valid" || state === "invalid")
+            return null;
+        return stepNumber;
+    };
+    const handleKeyPress = (e) => {
+        if (!onToggleStep)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleStep(stepNumber, expanded);
+        }
+    };
+    const toggleHandlers = client && onToggleStep
+        ? {
+            onClick: () => onToggleStep?.(stepNumber, expanded),
+            onKeyDown: handleKeyPress
+        }
+        : {};
+    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("div", { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+                    "ids-step__button--disabled": disabled
+                }), "aria-expanded": expanded, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [label && jsx("div", { className: "ids-step__label", children: label }), headline && jsx("div", { className: "ids-step__headline", children: headline })] }), jsx("div", { className: clsx("ids-step__chevron", {
+                                        "ids-step__chevron--expanded": expanded
+                                    }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
+                    "ids-step__content--expanded": expanded
+                }), children: children })] }));
+});
+IDSStepBase.displayName = "IDSStepBase";
+
+export { IDSStepBase };

package/components/stepper/step.d.ts

@@ -1,18 +1,15 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/stepper/stepper.css";
-export type StepState = "" | "valid" | "invalid" | "selected";
+import React from "react";
+import type { StepState } from "./step-base";
 export interface IDSStepProps extends React.HTMLAttributes<HTMLDivElement> {
     state?: StepState;
-    headline?: ReactNode;
+    headline?: React.ReactNode;
     label?: string;
     stepNumber?: string;
     srIndicatorText?: string;
-    last?: string;
     expanded?: boolean;
     disabled?: boolean;
-    onToggleExpansion?: (step: number, expanded: boolean) => void;
+    onToggleStep?: (step: string, expanded: boolean) => void;
     onExpanded?: () => void;
     onClosed?: () => void;
-    children?: ReactNode;
 }
-export declare const IDSStep: React.FC<IDSStepProps>;
+export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLDivElement>>;