@inera/ids-react 8.1.0 → 9.0.0

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

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

package/components/accordion/accordion-base.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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()}`;
+    const hasChildren = !!React.Children.toArray(children).length;
+    const handleKeyDown = (e) => {
+        if (!onToggleAccordion)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleAccordion();
+        }
+    };
+    const toggleHandlers = client && onToggleAccordion
+        ? {
+            onClick: onToggleAccordion,
+            onKeyDown: handleKeyDown
+        }
+        : {};
+    return (jsxs("div", { ...props, 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 })] }));
+}
+IDSAccordionBase.displayName = "IDSAccordionBase";
+
+export { IDSAccordionBase };

package/components/accordion/accordion.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
-import "@inera/ids-design/components/accordion/accordion.css";
 interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     headline: ReactNode;
+    accordions?: ReactNode;
     headlineSize?: "m" | "s" | "xs";
     level?: 1 | 2;
     expanded?: boolean;
@@ -9,8 +9,9 @@ interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     noBorder?: boolean;
     onCollapsed?: () => void;
     onExpanded?: () => void;
-    accordions?: ReactNode;
-    children?: ReactNode;
 }
-export declare const IDSAccordion: React.FC<IDSAccordionProps>;
+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 namespace IDSAccordion {
+    var displayName: string;
+}
 export {};

package/components/accordion/accordion.js

@@ -1,45 +1,26 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import clsx from 'clsx';
-import '@inera/ids-design/components/accordion/accordion.css';
-import { useElementId } from '../utils/hooks/useElementId.js';
+import { IDSAccordionBase } from './accordion-base.js';
 
-const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, accordions, children, className, ...props }) => {
+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);
-    const contentId = useElementId();
+    const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
     useEffect(() => {
-        setIsExpanded(expanded);
-    }, [expanded]);
-    const toggleExpansion = () => {
-        setIsExpanded(prev => !prev);
-        if (isExpanded) {
-            if (onCollapsed) {
-                onCollapsed();
-            }
-        }
-        else {
-            if (onExpanded) {
-                onExpanded();
-            }
-        }
-    };
-    const onKeyPress = (e) => {
-        if (e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            toggleExpansion();
+        if (level === 1 && accordionRef.current?.closest(".ids-card") && !accordions) {
+            setIsLean(true);
         }
+    }, [level]);
+    const toggleExpanded = () => {
+        setIsExpanded(prev => !prev);
+        if (isExpanded)
+            onCollapsed?.();
+        else
+            onExpanded?.();
     };
-    return (jsxs("div", { ref: accordionRef, className: clsx("ids-accordion", {
-            "ids-accordion--expanded": isExpanded,
-            "ids-accordion--no-border": noBorder,
-            "ids-accordion--lean": lean,
-            "ids-accordion--has-children": !!accordions,
-            "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 }) }), jsxs("div", { "aria-hidden": !isExpanded, id: contentId, className: "ids-accordion__content", children: [children, accordions && accordions] })] }));
-};
+    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 }) }));
+}
+IDSAccordion.displayName = "IDSAccordion";
 
 export { IDSAccordion };

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

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/alert/alert.css";
+export interface IDSAlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    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;
+    noRole?: boolean;
+    children?: ReactNode;
+    onClose?: () => void;
+    onToggleCollapse?: () => void;
+    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;

package/components/alert/alert-base.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/alert/alert.css';
+
+function IDSAlertBase({ 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, onToggleCollapse, client = false, children, className, ...props }) {
+    const contentId = `alert-content-${useId()}`;
+    const closeHandler = client && onClose
+        ? {
+            onClick: onClose
+        }
+        : {};
+    const toggleHandler = client && onToggleCollapse
+        ? {
+            onClick: onToggleCollapse
+        }
+        : {};
+    return (jsx("div", { ...props, role: !noRole ? "alert" : undefined, className: clsx("ids-alert", `ids-alert--${type}`, {
+            "ids-alert--collapsible": collapsible,
+            "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__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 }) })] })) }));
+}
+
+export { IDSAlertBase };

package/components/alert/alert.d.ts

@@ -1,21 +1,5 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/alert/alert.css";
-interface IDSAlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    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;
-    noRole?: boolean;
-    children?: ReactNode;
-    onClose?: () => void;
+import { IDSAlertBaseProps } from "./alert-base";
+export interface IDSAlertProps extends Omit<IDSAlertBaseProps, "contentId" | "onToggleCollapse"> {
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare const IDSAlert: React.FC<IDSAlertProps>;
-export {};
+export declare function IDSAlert({ collapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react/jsx-runtime").JSX.Element;

package/components/alert/alert.js

@@ -1,32 +1,22 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } 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';
+import { IDSAlertBase } from './alert-base.js';
 
-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();
+function IDSAlert({ collapsed = false, onCollapsedChange, onClose, children, className, ...props }) {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
     }, [collapsed]);
     const handleToggleCollapse = () => {
-        const newCollapsedState = !isCollapsed;
-        setIsCollapsed(newCollapsedState);
-        onCollapsedChange?.(newCollapsedState);
+        const newState = !isCollapsed;
+        setIsCollapsed(newState);
+        onCollapsedChange?.(newState);
     };
     const handleClose = () => {
         onClose?.();
     };
-    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), ...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 }) })] })) }));
-};
+    return (jsx(IDSAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggleCollapse: handleToggleCollapse, onClose: handleClose, children: children }));
+}
 
 export { IDSAlert };

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/global-alert/global-alert.css";
+export interface IDSGlobalAlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    agent?: boolean;
+    srExpandText?: string;
+    srCollapseText?: string;
+    collapsed?: boolean;
+    noRole?: boolean;
+    headline: string;
+    actions?: ReactNode;
+    children?: ReactNode;
+    onToggle?: () => void;
+    client?: boolean;
+}
+export declare function IDSGlobalAlertBase({ agent, srExpandText, srCollapseText, collapsed, noRole, headline, actions, children, className, onToggle, client, ...props }: IDSGlobalAlertBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/alert/global-alert-base.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/global-alert/global-alert.css';
+
+function IDSGlobalAlertBase({ agent = false, srExpandText = "Visa meddelande", srCollapseText = "Dölj meddelande", collapsed = false, noRole = false, headline, actions, children, className, onToggle, client = false, ...props }) {
+    const contentId = `alert-global-content-${useId()}`;
+    const toggleHandler = client && onToggle
+        ? {
+            onClick: onToggle
+        }
+        : {};
+    return (jsx("div", { role: noRole ? undefined : "alert", className: clsx("ids-global-alert", {
+            "ids-global-alert--collapsed": collapsed,
+            "ids-global-alert--agent": agent
+        }, className), ...props, children: jsxs("div", { className: "ids-global-alert__inner", children: [jsx("div", { className: "ids-global-alert__header", children: jsx("button", { className: clsx("ids-global-alert__button", {
+                            "ids-global-alert__button--expanded": !collapsed
+                        }), "aria-controls": contentId, "aria-expanded": !collapsed, ...toggleHandler, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
+}
+
+export { IDSGlobalAlertBase };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { IDSGlobalAlertBase } from "./global-alert-base";
+interface IDSGlobalAlertProps extends Omit<React.ComponentProps<typeof IDSGlobalAlertBase>, "onToggle" | "contentId"> {
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+}
+export declare function IDSGlobalAlert({ collapsed, onCollapsedChange, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/alert/global-alert.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { IDSGlobalAlertBase } from './global-alert-base.js';
+
+function IDSGlobalAlert({ collapsed = false, onCollapsedChange, ...props }) {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+    const handleToggleCollapse = () => {
+        const newState = !isCollapsed;
+        setIsCollapsed(newState);
+        onCollapsedChange?.(newState);
+    };
+    return jsx(IDSGlobalAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggle: handleToggleCollapse });
+}
+
+export { IDSGlobalAlert };

package/components/badge/badge.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@inera/ids-design/components/badge/badge.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/badge/badge.css';
 
 function 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] }) }));
+    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] }) }));
 }
 
 export { IDSBadge };

package/components/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 
 function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className, ...props }) {
     const getMobileLink = () => {
@@ -24,7 +24,7 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
             }
         });
     };
-    return (jsxs("nav", { className: clsx("ids-breadcrumbs", className), "aria-label": lead, ...props, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), 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", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) })] }));
 }
 
 export { IDSBreadcrumbs };

package/components/{button-group → button}/button-group.js

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/button-group/button-group.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/button-group/button-group.css';
 
 function IDSButtonGroup({ rtl = false, justify = "start", unresponsive = false, break: breakpoint = "m", children, className, ...props }) {
     const classNames = clsx("ids-button-group", `ids-button-group--break-${breakpoint}`, `ids-button-group--${justify}`, {
         "ids-button-group--rtl": rtl,
         "ids-button-group--unresponsive": unresponsive
     }, className);
-    return (jsx("div", { className: classNames, ...props, children: children }));
+    return (jsx("div", { ...props, className: classNames, children: children }));
 }
 
 export { IDSButtonGroup };

package/components/button/button.js

@@ -1,10 +1,10 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 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}`, {
+    const classNames = clsx("ids-button", !!size && `ids-button--${size}`, {
         "ids-button--m-block": mBlock,
         "ids-button--s-block": sBlock,
         "ids-button--active": active,
@@ -18,7 +18,7 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
         "ids-button--loading": loading,
         "ids-focus-anchor": focusAnchor
     }, className);
-    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] }));
+    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.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/card/card.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/card/card.css';
 
 function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) {
     let enhancedCardLink = null;
@@ -14,7 +14,7 @@ function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = fa
         const anchorProps = cardLink;
         enhancedCardLink = jsx("a", { ...anchorProps, className: clsx(anchorProps.className, "ids-card--interactive-link") });
     }
-    return (jsxs("div", { className: clsx("ids-card", {
+    return (jsxs("div", { ...props, className: clsx("ids-card", {
             "ids-card--fill": fill,
             "ids-card--border-top": !!borderTop && !focusCard,
             "ids-card--focus-card": !!focusCard && !borderTop,
@@ -22,7 +22,7 @@ function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = fa
             "ids-card--hide-on-s": hideOnS,
             "ids-card--lean": lean,
             "ids-card--interactive": !!cardLink
-        }, className), ...props, children: [!!borderTop && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
+        }, className), 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.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import "@inera/ids-design/components/carousel/carousel-item.css";
-interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     step?: string;
     description?: string;
+    activeSlide?: boolean;
+    previousSlide?: boolean;
+    nextSlide?: boolean;
     children: React.ReactNode;
 }
-export declare const IDSCarouselItem: React.FC<IDSCarouselItemProps>;
-export {};
+export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): import("react/jsx-runtime").JSX.Element;

package/components/carousel/carousel-item.js

@@ -1,10 +1,8 @@
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import '@inera/ids-design/components/carousel/carousel-item.css';
 import clsx from 'clsx';
 
-const IDSCarouselItem = ({ headline, step, description, children, className, ...props }) => {
+function IDSCarouselItem({ headline, step, description, activeSlide = false, previousSlide = false, nextSlide = false, children, className, ...props }) {
     const isImageElement = (child) => {
         return React.isValidElement(child) && child.type === "img";
     };
@@ -18,7 +16,11 @@ const IDSCarouselItem = ({ headline, step, description, children, className, ...
     const image = findCarouselImage(childrenArray);
     const otherContent = getNonImageContent(childrenArray);
     const hasFooterContent = description || 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 }) }))] }))] })] }));
-};
+    return (jsx("div", { ...props, className: clsx("ids-carousel-item-wrapper", {
+            active: activeSlide,
+            prev: previousSlide,
+            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 }) }))] }))] })] }) }));
+}
 
 export { IDSCarouselItem };

package/components/carousel/carousel.d.ts

@@ -5,5 +5,8 @@ interface IDSCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     srPrevLabel?: string;
     children: React.ReactNode;
 }
-export declare const IDSCarousel: React.FC<IDSCarouselProps>;
+export declare function IDSCarousel({ srNextLabel, srPrevLabel, className, children, ...props }: IDSCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSCarousel {
+    var displayName: string;
+}
 export {};

package/components/carousel/carousel.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, Children, useEffect } from 'react';
-import '@inera/ids-design/components/carousel/carousel.css';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, Children, useEffect, isValidElement, cloneElement } from 'react';
 import { breakPoints } from '../utils/utils.js';
+import clsx from 'clsx';
+import '@inera/ids-design/components/carousel/carousel.css';
 
-const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", className, children, ...props }) => {
+function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", className, children, ...props }) {
+    const [windowWidth, setWindowWidth] = useState(0);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [isAnimating, setIsAnimating] = useState(false);
     const [isAnimatingLeft, setIsAnimatingLeft] = useState(false);
@@ -13,11 +14,16 @@ const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
     const [buttonPosition, setButtonPosition] = useState({ top: 0, height: 0 });
     const carouselRef = useRef(null);
     const slideCount = Children.count(children);
-    let windowWidth = window.innerWidth;
+    useEffect(() => {
+        const updateWidth = () => setWindowWidth(window.innerWidth);
+        updateWidth(); // set immediately after mount
+        window.addEventListener("resize", updateWidth);
+        return () => window.removeEventListener("resize", updateWidth);
+    }, []);
     // Validate slide count
     useEffect(() => {
         if (slideCount < 3) {
-            console.warn("Carousel requires at least 3 carousel-items.");
+            console.warn("Carousel requires at least 3 carousel-items");
         }
     }, [slideCount]);
     // Initial setup
@@ -26,10 +32,6 @@ const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
             setActiveSlideIndex(0);
         }
     }, []);
-    // Recalculate window width on resize
-    useEffect(() => {
-        windowWidth = window.innerWidth;
-    }, [windowWidth]);
     // Resize observer
     useEffect(() => {
         const resizeObserver = new ResizeObserver(entries => {
@@ -93,23 +95,6 @@ const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
             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) => {
         touchStartX.current = e.touches[0].clientX;
@@ -123,27 +108,27 @@ const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
         touchStartX.current = null;
     };
     const slides = Children.map(children, (child, index) => {
+        if (!isValidElement(child))
+            return child;
         const isActive = index === activeSlideIndex;
         const isPrev = index === (activeSlideIndex - 1 + slideCount) % slideCount;
         const isNext = index === (activeSlideIndex + 1) % slideCount;
-        let itemClass = "ids-carousel-item-wrapper";
-        if (isActive)
-            itemClass += " active";
-        else if (isPrev)
-            itemClass += " prev";
-        else if (isNext)
-            itemClass += " next";
-        return isActive ? (jsx("div", { className: itemClass, "aria-hidden": "false", children: child }, index)) : (jsx("div", { className: itemClass, "aria-hidden": "true", inert: true, children: child }, index));
+        return cloneElement(child, {
+            activeSlide: isActive,
+            previousSlide: isPrev,
+            nextSlide: isNext
+        });
     });
     const isMobile = windowWidth < breakPoints.medium;
-    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, ...props, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
+    return (jsxs("div", { ...props, className: clsx("ids-carousel", className), ref: carouselRef, 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-content js-carousel-slide", {
+                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-content", {
                     "animating-left": isAnimatingLeft,
                     "animating-right": isAnimatingRight
                 }), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: jsx("div", { "aria-live": "polite", children: slides }) })] }));
-};
+}
+IDSCarousel.displayName = "IDSCarousel";
 
 export { IDSCarousel };

package/components/{pagination/data-pagination → data-pagination}/data-pagination.d.ts

@@ -1,19 +1,15 @@
-import React, { ReactNode, ChangeEvent } from "react";
-import "@inera/ids-design/components/pagination/data-pagination/data-pagination.css";
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/data-pagination/data-pagination.css";
 export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
-    label?: string;
     from: number;
     to: number;
     of?: string;
     total: number | string;
     defaultValue?: string;
-    selectId?: string;
     light?: boolean;
-    noSelect?: boolean;
     firstPageButton?: ReactNode;
     previousButton?: ReactNode;
     nextButton?: ReactNode;
     lastPageButton?: ReactNode;
-    onSelectChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
 export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLSelectElement>>;