@inera/ids-react 7.1.1 → 8.0.0

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

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
+import clsx from 'clsx';
 
-const IDSPuffListItemInfo = ({ children }) => {
-    return jsx("div", { className: "ids-puff-list-item__info", children: children });
+const IDSPuffListItemInfo = ({ bottom, children, ...props }) => {
+    return (jsx("div", { className: clsx("ids-puff-list-item__info", {
+            "ids-puff-list-item__info--bottom": bottom
+        }), ...props, children: children }));
 };
 
 export { IDSPuffListItemInfo };

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

@@ -11,8 +11,16 @@ interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     monthLabel?: string;
     day?: number;
     time?: string;
+    dateTo?: Date | null;
+    yearTo?: string;
+    monthTo?: number;
+    monthToLabel?: string;
+    dayTo?: number;
+    timeTo?: string;
     noContent?: boolean;
+    lean?: boolean;
     noMargin?: boolean;
+    noListItem?: boolean;
     dateLabel?: ReactNode;
     children?: ReactNode;
 }

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

@@ -1,22 +1,45 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useEffect, isValidElement, cloneElement } from 'react';
+import React, { useState, useEffect, isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/puff-list/puff-list.css';
-import { getMonthAsSweText, getDayAsText } from '../../utils/utils.js';
+import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, noMargin = false, dateLabel, className, children }) => {
-    const [presentedDate, setPresentedDate] = useState(date);
+const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", dateTo = null, yearTo = "", monthTo = -1, monthToLabel = "", dayTo = -1, timeTo = "", noContent = false, noMargin = false, noListItem = false, lean = false, dateLabel, className, children, ...props }) => {
+    const [presentedDate, setPresentedDate] = useState(date ? new Date(date) : null);
+    const [presentedToDate, setPresentedToDate] = useState(dateTo ? new Date(dateTo) : null);
     useEffect(() => {
         if (date) {
             setPresentedDate(new Date(date));
         }
     }, [date]);
-    const hasDate = () => date || year || month !== -1 || day !== -1;
-    const getYear = () => presentedDate?.getFullYear() || year;
+    useEffect(() => {
+        if (dateTo) {
+            setPresentedToDate(new Date(dateTo));
+        }
+    }, [dateTo]);
+    const hasDate = () => date !== null ||
+        (year !== "" && year !== undefined) ||
+        (month !== null && month !== undefined && month > 0) ||
+        (day !== null && day !== undefined && day > 0);
+    const hasToDate = () => dateTo !== null ||
+        (yearTo !== "" && yearTo !== undefined) ||
+        (monthTo !== null && monthTo !== undefined && monthTo > 0) ||
+        (dayTo !== null && dayTo !== undefined && dayTo > 0);
+    const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
+    const getYearTo = () => (presentedToDate ? presentedToDate.getFullYear() : yearTo);
     const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
+    const getMonthTo = () => (presentedToDate ? presentedToDate.getMonth() + 1 : monthTo);
+    const getDay = () => {
+        const dayNumber = presentedDate ? presentedDate.getDate() : day;
+        return getDayAsText(dayNumber);
+    };
+    const getDayTo = () => {
+        const dayNumber = presentedToDate ? presentedToDate.getDate() : dayTo;
+        return getDayAsText(dayNumber);
+    };
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    const getDay = () => getDayAsText(presentedDate?.getDate() || day);
+    const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
     const getTime = () => {
         if (time)
             return time;
@@ -27,20 +50,30 @@ const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemL
         }
         return "";
     };
+    const getTimeTo = () => {
+        if (timeTo)
+            return timeTo;
+        if (presentedToDate) {
+            const hour = presentedToDate.getHours();
+            const min = presentedToDate.getMinutes();
+            return `${hour.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
+        }
+        return "";
+    };
     const getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item--no-margin": noMargin
+        "ids-puff-list-item__header--no-margin": noMargin
     });
     const renderHeadline = () => {
         const level = [2, 3, 4, 5].includes(headlineLevel) ? headlineLevel : 2;
         const Tag = `h${level}`;
         const headlineContent = jsx(Fragment, { children: headline });
         if (headlineLink && isValidElement(headlineLink)) {
-            return React__default.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
+            return React.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
                 ...headlineLink.props,
                 children: headlineContent
             }));
         }
-        return React__default.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
+        return React.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
     };
     const renderBody = () => {
         const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
@@ -53,9 +86,10 @@ const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemL
         }
         return content;
     };
-    return (jsx("li", { className: clsx("ids-puff-list-item", {
-            "ids-puff-list-item--interactive": !!itemLink
-        }, 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: [hasDate() && (jsxs("div", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), renderBody()] })] }) }));
+    return (jsx("div", { 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: [hasDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), hasDate() && hasToDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), `${getDayTo()} ${getMonthToText()} ${getYearTo()}`, !!getTimeTo() && jsx("span", { className: "ids-puff-list-item__time", children: getTimeTo() })] })), renderBody()] })] }) }));
 };
 
 export { IDSPuffListItem };

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

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

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

@@ -18,8 +18,7 @@ const IDSRegionIcon = ({ name, size = "m", colorPreset = 1, light = false, inlin
                 return "2.5rem";
         }
     };
-    const classNames = clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 4 : colorPreset}`, { "ids-region-icon--inline": inline }, className);
-    return jsx("span", { className: classNames, style: { fontSize: getSize() }, ...props });
+    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 }));
 };
 
 export { IDSRegionIcon };

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

@@ -10,7 +10,7 @@ interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     labelNotification?: ReactNode;
     link?: ReactNode;
     children?: ReactNode;
-    onExpandedChange?: (expanded: boolean) => void;
+    onExpandedChange?: (isExpanded: boolean) => void;
 }
 export declare const IDSSideMenu: React.FC<IDSSideMenuProps>;
 export {};

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React, { useState } from 'react';
 import '@inera/ids-design/components/side-menu/side-menu.css';
 import clsx from 'clsx';
 
-const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange }) => {
+const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const hasChildren = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) && child.type === IDSSideMenu);
+    const hasChildren = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === IDSSideMenu);
     const toggleExpanded = (e) => {
         e.stopPropagation();
         if (hasChildren) {
@@ -30,7 +30,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
                     "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", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" }));
+        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) {
@@ -38,7 +38,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
                             "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", 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] })] }));
+        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) {
@@ -46,7 +46,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
         }
         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", className), children: [jsx("div", { className: clsx("ids-side-menu__header", `ids-side-menu--level-${level}`, {
+    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 })] }));

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

@@ -1,5 +1,6 @@
 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> {
     show?: boolean;
     left?: boolean;
@@ -9,6 +10,7 @@ interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
     srLabel?: string;
     srClose?: string;
     srOpen?: string;
+    size?: PanelSize;
     onVisibilityChange?: (visible: boolean) => void;
     onOpen?: () => void;
     onClose?: () => void;

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

@@ -4,11 +4,11 @@ import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/side-panel/side-panel.css';
 import clsx from 'clsx';
 
-const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = false, footer = false, srLabel = "Sidopanel", srClose = "Stäng", srOpen = "Öppna", onVisibilityChange, onOpen, onClose, footerLinks, footerText, headline, className, children, ...props }) => {
+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);
     const hamburgerRef = useRef(null);
     const panelRef = useRef(null);
-    const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
+    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
@@ -48,9 +48,9 @@ const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = fal
         onVisibilityChange?.(isVisible);
         if (isVisible) {
             onOpen?.();
-            // Set focus to headline if available
-            const headlineSlot = panelRef.current?.querySelector("[slot=headline]");
-            headlineSlot?.focus();
+            const heading = panelRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
+            heading?.setAttribute("tabindex", "-1");
+            heading?.focus();
         }
         else {
             onClose?.();

package/components/stepper/step.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", last = "false", expanded: expandedProp = false, disabled = false, onToggleExpansion, onExpanded, onClosed, className, children }) => {
+const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", last = "false", expanded: expandedProp = false, disabled = false, onToggleExpansion, onExpanded, onClosed, className, children, ...props }) => {
     const [expanded, setExpanded] = useState(expandedProp);
     useEffect(() => {
         setExpanded(expandedProp);
@@ -29,7 +29,7 @@ const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicato
             return null;
         return stepNumber;
     };
-    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, onClick: toggleExpansion, onKeyDown: handleKeyPress, 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

package/components/stepper/stepper.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { isValidElement, cloneElement } from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-const IDSStepper = ({ children, onToggleExpansion, className }) => {
-    const stepsArray = React__default.Children.toArray(children).filter(isValidElement);
+const IDSStepper = ({ children, onToggleExpansion, className, ...props }) => {
+    const stepsArray = React.Children.toArray(children).filter(isValidElement);
     const handleExpansion = (step, expanded) => {
         onToggleExpansion?.(step, expanded);
     };
@@ -17,7 +17,7 @@ const IDSStepper = ({ children, onToggleExpansion, className }) => {
             onToggleExpansion: handleExpansion
         });
     });
-    return jsx("div", { className: clsx("ids-stepper", className), children: enhancedSteps });
+    return (jsx("div", { className: clsx("ids-stepper", className), ...props, children: enhancedSteps }));
 };
 
 export { IDSStepper };

package/components/tabs/tab-panel.js

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import '@inera/ids-design/components/tabs/tab-panel.css';
 import clsx from 'clsx';
 
-const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id = "", tabId = "", children, className }) => {
+const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id = "", tabId = "", children, className, ...props }) => {
     const panelRef = useRef(null);
     useEffect(() => {
         if (panelRef.current && !noFocus) {
@@ -14,7 +14,7 @@ const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id =
     return (jsx("div", { ref: panelRef, role: "tabpanel", id: id, "aria-hidden": !selected, "aria-labelledby": tabId, hidden: !selected, className: clsx("ids-tab-panel", {
             "ids-tab-panel--selected": selected,
             "ids-tab-panel--compact": compact
-        }, className), children: children }));
+        }, className), ...props, children: children }));
 };
 
 export { IDSTabPanel };

package/components/tabs/tab.js

@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import '@inera/ids-design/components/tabs/tab.css';
 import clsx from 'clsx';
 
-const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon = "", notification, className, onTabClick, onKeyDown }) => {
+const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon = "", notification, className, onTabClick, onKeyDown, ...props }) => {
     const tabRef = useRef(null);
     const handleClick = () => {
         if (!selected) {
@@ -13,7 +13,7 @@ const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon =
     };
     return (jsx("div", { id: id, ref: tabRef, role: "tab", tabIndex: 0, onClick: handleClick, onKeyDown: onKeyDown, className: clsx("ids-tab", {
             "ids-tab--selected": selected
-        }, className), "aria-selected": selected, "aria-controls": panelId, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-icon-${icon} ids-icon--m` }), label, notification] }) }));
+        }, className), "aria-selected": selected, "aria-controls": panelId, ...props, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification] }) }));
 };
 
 export { IDSTab };

package/components/tabs/tabs.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/tabs/tabs.css";
 import { IDSTabProps } from "./tab";
 interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     unresponsive?: boolean;
+    light?: boolean;
     compact?: boolean;
     breakpoint?: "m" | "s";
     selectLabel?: string;

package/components/tabs/tabs.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React, { useState } from 'react';
 import { IDSSelect } from '../form/select/select.js';
 import '@inera/ids-design/components/tabs/tabs.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange }) => {
+const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange, ...props }) => {
     const tabsId = useElementId();
-    const initialSelectedIndex = tabs.findIndex(tab => React__default.isValidElement(tab) && tab.props.selected === true);
+    const initialSelectedIndex = tabs.findIndex(tab => React.isValidElement(tab) && tab.props.selected === true);
     const [activeTab, setActiveTab] = useState(initialSelectedIndex !== -1 ? initialSelectedIndex : 0);
     const responsiveOnM = breakpoint === "m" && !unresponsive;
     const responsiveOnS = breakpoint === "s" && !unresponsive;
@@ -36,10 +36,10 @@ const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", sele
     const getTabPanelId = (index) => {
         return `${tabsId}-tab-panel-${index}`;
     };
-    const enhancedTabs = React__default.Children.map(tabs, (tab, idx) => {
-        if (!React__default.isValidElement(tab))
+    const enhancedTabs = React.Children.map(tabs, (tab, idx) => {
+        if (!React.isValidElement(tab))
             return tab;
-        return React__default.cloneElement(tab, {
+        return React.cloneElement(tab, {
             key: `tab-key-${idx}`,
             id: getTabId(idx),
             panelId: getTabPanelId(idx),
@@ -50,10 +50,10 @@ const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", sele
             onKeyDown: (e) => handleKeydown(e, idx)
         });
     });
-    const enhancedTabPanels = React__default.Children.map(children, (panel, idx) => {
-        if (!React__default.isValidElement(panel))
+    const enhancedTabPanels = React.Children.map(children, (panel, idx) => {
+        if (!React.isValidElement(panel))
             return panel;
-        return React__default.cloneElement(panel, {
+        return React.cloneElement(panel, {
             key: `tab-panel-key-${idx}`,
             id: getTabPanelId(idx),
             tabId: getTabId(idx),
@@ -68,14 +68,28 @@ const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", sele
         handleSelect(index);
     };
     const renderTabOptions = () => tabs?.map((tab, i) => {
-        const label = React__default.isValidElement(tab) ? tab.props.label || `Tab ${i + 1}` : `Tab ${i + 1}`;
-        return (jsx("option", { value: i, children: label }, i));
+        if (!React.isValidElement(tab))
+            return null;
+        const { label, notification } = tab.props;
+        let notificationText = "";
+        if (typeof notification === "string" || typeof notification === "number") {
+            notificationText = String(notification);
+        }
+        else if (React.isValidElement(notification)) {
+            const badge = notification;
+            const childTexts = React.Children.toArray(badge.props.children)
+                .map(child => (typeof child === "string" || typeof child === "number" ? child : ""))
+                .join("");
+            notificationText = childTexts.trim();
+        }
+        const optionLabel = notificationText ? `${label} (${notificationText})` : label;
+        return (jsx("option", { value: i, children: optionLabel }, i));
     });
     return (jsxs("div", { className: clsx("ids-tabs", {
             "ids-tabs--unresponsive": unresponsive,
             "ids-tabs--responsive-on-m": responsiveOnM,
             "ids-tabs--responsive-on-s": responsiveOnS
-        }, className), children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
+        }, className), ...props, children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
 };
 
 export { IDSTabs };

package/components/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/tooltip/tooltip.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTooltip = ({ position = "top", trigger, children, className }) => {
+const IDSTooltip = ({ position = "top", trigger, children, className, ...props }) => {
     const [translateX, setTranslateX] = useState(position === "top" || position === "bottom" ? "-50%" : "0");
     const [translateY, setTranslateY] = useState(position.includes("top") ? "-100%" : "100%");
     const tooltipContentRef = useRef(null);
@@ -76,7 +76,7 @@ const IDSTooltip = ({ position = "top", trigger, children, className }) => {
             triggerWrapper.removeEventListener("focusin", handleOverflow);
         };
     }, [triggerRef]);
-    return (jsxs("span", { className: clsx("ids-tooltip", className), children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})` }, children: children })] }));
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})` }, children: children })] }));
 };
 
 export { IDSTooltip };

package/components/utils/contexts/HeaderContext.d.ts

@@ -1,8 +1,6 @@
 export interface IDSHeaderConfig {
     unresponsive: boolean;
-    fluid: boolean;
     hideRegionPicker?: boolean;
-    regionPickerText?: string;
 }
 export declare const HeaderContext: import("react").Context<IDSHeaderConfig>;
 export declare const useHeaderContext: () => IDSHeaderConfig;