@inera/ids-react 9.2.2 → 9.4.0

package/components/header-1177-pro/header-1177-pro-base.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/header-1177-pro/composite-header-1177-pro.css';
+import { IDSHeader1177ProLogo } from './header-1177-pro-logo.js';
 
 function IDSHeader1177ProBase({ hideRegionPicker = false, unresponsive = false, logoText = "för vårdpersonal", srLogoText = "Logotyp", logoHref = "", logoProps = {}, avatar, logoLink, regionPicker, items, skipToContentLink, mobileMenu, className, children, ...props }) {
     return (jsxs("header", { ...props, className: clsx("ids-header-1177-pro", {
             "ids-header-1177-pro--unresponsive": unresponsive
-        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-pro__main", children: [jsxs("div", { className: "ids-header-1177-pro__main-left", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: logoLink ? (logoLink) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177-pro__region-picker", children: regionPicker })] }), jsx("div", { className: "ids-header-1177-pro__main-right", children: jsxs("div", { className: "ids-header-1177-pro__items", children: [items, " ", avatar, mobileMenu && jsx("div", { className: "ids-header-1177-pro__mobile-menu", children: mobileMenu })] }) })] }), children] }));
+        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-pro__main", children: [jsxs("div", { className: "ids-header-1177-pro__main-left", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: jsx(IDSHeader1177ProLogo, { logoLink: logoLink, logoHref: logoHref, logoProps: logoProps, srLogoText: srLogoText }) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177-pro__region-picker", children: regionPicker })] }), jsx("div", { className: "ids-header-1177-pro__main-right", children: jsxs("div", { className: "ids-header-1177-pro__items", children: [items, " ", avatar, mobileMenu && jsx("div", { className: "ids-header-1177-pro__mobile-menu", children: mobileMenu })] }) })] }), children] }));
 }
 IDSHeader1177ProBase.displayName = "IDSHeader1177ProBase";
 

package/components/header-1177-pro/header-1177-pro-item-base.d.ts

@@ -4,7 +4,7 @@ interface IDSHeader1177ProItemBaseProps extends HTMLAttributes<HTMLElement> {
     icon?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177ProItemBase({ mobile, icon, children, unresponsive, ...props }: IDSHeader1177ProItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProItemBase({ mobile, icon, children, unresponsive, ...props }: IDSHeader1177ProItemBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProItemBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-item-base.js

@@ -2,11 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
 function IDSHeader1177ProItemBase({ mobile = false, icon, children, unresponsive = false, ...props }) {
-    const renderContent = () => (jsx("div", { className: "ids-header-1177-pro-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     return (jsxs("div", { ...props, className: clsx("ids-header-1177-pro-item", {
             "ids-header-1177-pro-item--unresponsive": unresponsive,
             "ids-header-1177-pro-item--mobile": mobile
-        }), children: [renderContent(), children] }));
+        }), children: [jsx("div", { className: "ids-header-1177-pro-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }), children] }));
 }
 IDSHeader1177ProItemBase.displayName = "IDSHeader1177ProItemBase";
 

package/components/header-1177-pro/header-1177-pro-item.d.ts

@@ -3,7 +3,7 @@ interface IDSHeader1177ProItemProps extends HTMLAttributes<HTMLElement> {
     mobile?: boolean;
     icon?: string;
 }
-export declare function IDSHeader1177ProItem({ mobile, icon, children, ...props }: IDSHeader1177ProItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProItem({ mobile, icon, children, ...props }: IDSHeader1177ProItemProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProItem {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-logo.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+interface IDSHeader1177ProLogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    srLogoText?: string;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    logoLink?: ReactNode;
+}
+export declare function IDSHeader1177ProLogo({ srLogoText, logoHref, logoProps, logoLink }: IDSHeader1177ProLogoProps): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+export declare namespace IDSHeader1177ProLogo {
+    var displayName: string;
+}
+export {};

package/components/header-1177-pro/header-1177-pro-logo.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+function IDSHeader1177ProLogo({ srLogoText = "Logotyp", logoHref = "", logoProps = {}, logoLink }) {
+    return logoLink ? (logoLink) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps }));
+}
+IDSHeader1177ProLogo.displayName = "IDSHeader1177ProLogo";
+
+export { IDSHeader1177ProLogo };

package/components/header-1177-pro/header-1177-pro-menu-mobile-base.d.ts

@@ -8,7 +8,7 @@ interface IDSHeader1177ProMenuMobileBaseProps extends HTMLAttributes<HTMLElement
     componentRef?: React.RefObject<HTMLDivElement>;
     buttonRef?: React.RefObject<HTMLButtonElement>;
 }
-export declare function IDSHeader1177ProMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, client, onToggleMenu, ...props }: IDSHeader1177ProMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, client, onToggleMenu, ...props }: IDSHeader1177ProMenuMobileBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProMenuMobileBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-menu-mobile.d.ts

@@ -6,7 +6,7 @@ interface IDSHeader1177ProMenuMobileProps extends HTMLAttributes<HTMLElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare function IDSHeader1177ProMenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177ProMenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProMenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177ProMenuMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProMenuMobile {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav-base.d.ts

@@ -6,9 +6,10 @@ interface IDSHeader1177ProNavBaseProps {
     children?: ReactNode;
     unresponsive?: boolean;
     mobileOnly?: boolean;
+    desktopOnly?: boolean;
     srLabel?: string;
 }
-export declare function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive, mobileOnly, srLabel, ...props }: IDSHeader1177ProNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive, mobileOnly, desktopOnly, srLabel, ...props }: IDSHeader1177ProNavBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProNavBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav-base.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive = false, mobileOnly = false, srLabel = "Huvudmeny", ...props }) {
+function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive = false, mobileOnly = false, desktopOnly = false, srLabel = "Huvudmeny", ...props }) {
     return (jsx("nav", { className: clsx("ids-header-1177-pro-nav", {
             "ids-header-1177-pro-nav--unresponsive": unresponsive,
-            "ids-header-1177-pro-nav--only-mobile": mobileOnly
+            "ids-header-1177-pro-nav--mobile-only": mobileOnly,
+            "ids-header-1177-pro-nav--desktop-only": desktopOnly
         }), "aria-label": srLabel, ...props, children: jsxs("div", { className: "ids-header-1177-pro-nav__inner", children: [children, mobileRegionPicker, mobileNavItems, mobileAvatar] }) }));
 }
 IDSHeader1177ProNavBase.displayName = "IDSHeader1177ProNavBase";

package/components/header-1177-pro/header-1177-pro-nav-item-base.d.ts

@@ -16,7 +16,7 @@ export interface IDSHeader1177ProNavItemBaseProps extends HTMLAttributes<HTMLEle
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177ProNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177ProNavItemBaseProps): React.JSX.Element;
 export declare namespace IDSHeader1177ProNavItemBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav-item-base.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import clsx from 'clsx';
+import { IDSHeader1177ProNavItemLink } from './header-1177-pro-nav-item-link.js';
 
 function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client = false, ...props }) {
     const itemId = `header-1177-pro-item-${useId()}`;
@@ -13,17 +14,7 @@ function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1,
             "ids-header-1177-pro-nav-item--unresponsive": unresponsive,
             "ids-header-1177-pro-nav-item--expanded": expanded,
             "ids-header-1177-pro-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-pro-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-pro-nav-item__link", children: React.Children.map(children, child => {
-                    if (!React.isValidElement(child))
-                        return child;
-                    const element = child;
-                    if (active && !element.props["aria-current"]) {
-                        return React.cloneElement(element, {
-                            "aria-current": "page"
-                        });
-                    }
-                    return element;
-                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-1177-pro-nav-item__menu", {
+        }), ...props, children: [!label && jsx(IDSHeader1177ProNavItemLink, { active: active, children: children }), !!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-pro-nav-item__button", ...toggleHandler, children: label })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-1177-pro-nav-item__menu", {
                     "ids-header-1177-pro-nav-item__menu--expanded": expanded
                 }), children: jsxs("div", { className: "ids-header-1177-pro-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) })] }) })] }));
 }

package/components/header-1177-pro/header-1177-pro-nav-item-link.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface IDSHeader1177ProNavItemLinkProps {
+    active?: boolean;
+    children?: React.ReactNode;
+}
+export declare function IDSHeader1177ProNavItemLink({ active, children }: IDSHeader1177ProNavItemLinkProps): React.JSX.Element;
+export declare namespace IDSHeader1177ProNavItemLink {
+    var displayName: string;
+}
+export {};

package/components/header-1177-pro/header-1177-pro-nav-item-link.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+function IDSHeader1177ProNavItemLink({ active, children }) {
+    return (jsx("span", { className: "ids-header-1177-pro-nav-item__link", children: React.Children.map(children, child => {
+            if (!React.isValidElement(child))
+                return child;
+            const element = child;
+            if (active && !element.props["aria-current"]) {
+                return React.cloneElement(element, {
+                    "aria-current": "page"
+                });
+            }
+            return element;
+        }) }));
+}
+IDSHeader1177ProNavItemLink.displayName = "IDSHeader1177ProNavItemLink";
+
+export { IDSHeader1177ProNavItemLink };

package/components/header-1177-pro/header-1177-pro-nav-item-mobile-base.d.ts

@@ -3,7 +3,7 @@ interface IDSHeader1177ProNavItemMobileBaseProps extends HTMLAttributes<HTMLElem
     icon?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177ProNavItemMobileBase({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNavItemMobileBase({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProNavItemMobileBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav-item-mobile.d.ts

@@ -3,7 +3,7 @@ interface IDSHeader1177ProNavItemMobileProps extends HTMLAttributes<HTMLElement>
     icon?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177ProNavItemMobile({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNavItemMobile({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProNavItemMobile {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav-item.d.ts

@@ -12,7 +12,7 @@ export interface IDSHeader1177ProNavItemProps extends HTMLAttributes<HTMLElement
     itemId?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177ProNavItem({ expanded, ...props }: IDSHeader1177ProNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNavItem({ expanded, ...props }: IDSHeader1177ProNavItemProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProNavItem {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav.d.ts

@@ -4,9 +4,10 @@ interface IDSHeader1177ProNavProps extends HTMLAttributes<HTMLElement> {
     mobileNavItems?: ReactNode;
     mobileAvatar?: ReactNode;
     mobileOnly?: boolean;
+    desktopOnly?: boolean;
     srLabel?: string;
 }
-export declare function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }: IDSHeader1177ProNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, desktopOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }: IDSHeader1177ProNavProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProNav {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-nav.js

@@ -3,9 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { IDSHeader1177ProNavBase } from './header-1177-pro-nav-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }) {
+function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, desktopOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    return (jsx(IDSHeader1177ProNavBase, { ...props, mobileOnly: mobileOnly, srLabel: srLabel, mobileRegionPicker: mobileRegionPicker, mobileNavItems: mobileNavItems, mobileAvatar: mobileAvatar, unresponsive: headerContext.unresponsive, children: children }));
+    return (jsx(IDSHeader1177ProNavBase, { ...props, mobileOnly: mobileOnly, desktopOnly: desktopOnly, srLabel: srLabel, mobileRegionPicker: mobileRegionPicker, mobileNavItems: mobileNavItems, mobileAvatar: mobileAvatar, unresponsive: headerContext.unresponsive, children: children }));
 }
 IDSHeader1177ProNav.displayName = "IDSHeader1177ProNav";
 

package/components/header-1177-pro/header-1177-pro-region-picker-base.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     hide?: boolean;
     client?: boolean;
     onToggleRegion?: () => void;
 }
-export declare function IDSHeader1177ProRegionPickerBase({ text, expanded, hide, children, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerBase({ text, ariaLabel, ariaControls, expanded, hide, children, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker-base.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,11 +9,16 @@ function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hid
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
             "ids-header-1177-pro-region-picker--selected-region": !!children
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
                         "ids-header-1177-pro-region-picker__button--expanded": expanded
-                    }), "aria-label": text, children: text }) })] }));
+                    }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: text }) })] }));
 }
 IDSHeader1177ProRegionPickerBase.displayName = "IDSHeader1177ProRegionPickerBase";
 

package/components/header-1177-pro/header-1177-pro-region-picker-mobile-base.d.ts

@@ -1,13 +1,15 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerMobileBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     hide?: boolean;
     client?: boolean;
     unresponsive?: boolean;
     onToggleRegion?: () => void;
 }
-export declare function IDSHeader1177ProRegionPickerMobileBase({ text, expanded, children, hide, client, unresponsive, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerMobileBase({ text, ariaLabel, ariaControls, expanded, children, hide, client, unresponsive, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerMobileBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker-mobile-base.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,12 +9,17 @@ function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expande
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
             "ids-header-1177-pro-region-picker-mobile--selected-region": !!children,
             "ids-header-1177-pro-region-picker-mobile--unresponsive": unresponsive
-        }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
+        }), ...props, children: jsxs("button", { ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
                 "ids-header-1177-pro-region-picker-mobile__button--expanded": expanded
-            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
+            }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
 }
 IDSHeader1177ProRegionPickerMobileBase.displayName = "IDSHeader1177ProRegionPickerMobileBase";
 

package/components/header-1177-pro/header-1177-pro-region-picker-mobile.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerMobileProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
-export declare function IDSHeader1177ProRegionPickerMobile({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerMobile({ expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerMobile {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker-mobile.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177ProRegionPickerMobileBase } from './header-1177-pro-region-picker-mobile-base.js';
 
-function IDSHeader1177ProRegionPickerMobile({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPickerMobile({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

package/components/header-1177-pro/header-1177-pro-region-picker.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
-export declare function IDSHeader1177ProRegionPicker({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPicker({ expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPicker {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { IDSHeader1177ProRegionPickerBase } from './header-1177-pro-region-picker-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeader1177ProRegionPicker({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPicker({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

package/components/header-1177-pro/header-1177-pro.d.ts

@@ -15,7 +15,7 @@ interface IDSHeader1177ProProps extends HTMLAttributes<HTMLElement> {
     skipToContentLink?: ReactNode;
     mobileMenu?: ReactNode;
 }
-export declare function IDSHeader1177Pro({ hideRegionPicker, hideAvatar, unresponsive, children, ...props }: IDSHeader1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177Pro({ hideRegionPicker, hideAvatar, unresponsive, children, ...props }: IDSHeader1177ProProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177Pro {
     var displayName: string;
 }

package/components/header-inera/header-inera-base.d.ts

@@ -8,9 +8,9 @@ interface IDSHeaderIneraBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     items?: ReactNode;
     mobileMenu?: ReactNode;
     skipToContent?: ReactNode;
-    logo?: ReactNode;
+    logoLink?: ReactNode;
 }
-export declare function IDSHeaderIneraBase({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logo, className, children, ...props }: IDSHeaderIneraBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraBase({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logoLink, className, children, ...props }: IDSHeaderIneraBaseProps): React.JSX.Element;
 export declare namespace IDSHeaderIneraBase {
     var displayName: string;
 }

package/components/header-inera/header-inera-base.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/header-inera/composite-header-inera.css';
+import { IDSHeaderIneraLogo } from './header-inera-logo.js';
 
-function IDSHeaderIneraBase({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) {
+function IDSHeaderIneraBase({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logoLink, className, children, ...props }) {
     return (jsxs("header", { ...props, className: clsx("ids-header-inera", {
             "ids-header-inera--unresponsive": unresponsive
-        }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [jsxs("div", { className: "ids-header-inera__main", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoText, className: "ids-header-inera__logo", ...logoProps })) : logo ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logo })) : (jsx("div", { className: "ids-header-inera__logo" })), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] })] }));
+        }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [jsxs("div", { className: "ids-header-inera__main", children: [jsx(IDSHeaderIneraLogo, { logoLink: logoLink, logoHref: logoHref, logoProps: logoProps, srLogoText: srLogoText }), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] })] }));
 }
 IDSHeaderIneraBase.displayName = "IDSHeaderIneraBase";
 

package/components/header-inera/header-inera-item-base.d.ts

@@ -5,7 +5,7 @@ export interface IDSHeaderIneraItemBaseProps extends HTMLAttributes<HTMLElement>
     separatorLeft?: boolean;
     icon?: string;
 }
-export declare function IDSHeaderIneraItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraItemBase {
     var displayName: string;
 }

package/components/header-inera/header-inera-item-base.js

@@ -2,11 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
 function IDSHeaderIneraItemBase({ mobile = false, unresponsive = false, separatorLeft = false, icon = "", children, ...props }) {
-    const renderContent = () => (jsx("div", { className: "ids-header-inera-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     return (jsxs("div", { className: clsx("ids-header-inera-item", {
             "ids-header-inera-item--mobile": mobile,
             "ids-header-inera-item--unresponsive": unresponsive
-        }), ...props, children: [renderContent(), children] }));
+        }), ...props, children: [jsx("div", { className: "ids-header-inera-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }), children] }));
 }
 IDSHeaderIneraItemBase.displayName = "IDSHeaderIneraItemBase";
 

package/components/header-inera/header-inera-item.d.ts

@@ -4,7 +4,7 @@ export interface IDSHeaderIneraItemProps extends HTMLAttributes<HTMLElement> {
     separatorLeft?: boolean;
     icon?: string;
 }
-export declare function IDSHeaderIneraItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraItem {
     var displayName: string;
 }

package/components/header-inera/header-inera-logo.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+interface IDSHeaderIneraLogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    srLogoText?: string;
+    logoLink?: ReactNode;
+}
+export declare function IDSHeaderIneraLogo({ logoHref, logoProps, srLogoText, logoLink }: IDSHeaderIneraLogoProps): React.JSX.Element;
+export declare namespace IDSHeaderIneraLogo {
+    var displayName: string;
+}
+export {};

package/components/header-inera/header-inera-logo.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+function IDSHeaderIneraLogo({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", logoLink }) {
+    return logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoText, className: "ids-header-inera__logo", ...logoProps })) : logoLink ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logoLink })) : (jsx("div", { className: "ids-header-inera__logo" }));
+}
+IDSHeaderIneraLogo.displayName = "IDSHeaderIneraLogo";
+
+export { IDSHeaderIneraLogo };

package/components/header-inera/header-inera-menu-mobile-base.d.ts

@@ -8,7 +8,7 @@ interface IDSHeaderIneraMenuMobileBaseProps extends HTMLAttributes<HTMLElement>
     buttonRef?: React.RefObject<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSHeaderIneraMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, onToggleMenu, client, ...props }: IDSHeaderIneraMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, onToggleMenu, client, ...props }: IDSHeaderIneraMenuMobileBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraMenuMobileBase {
     var displayName: string;
 }

package/components/header-inera/header-inera-menu-mobile.d.ts

@@ -6,7 +6,7 @@ interface IDSHeaderIneraMenuMobileProps extends HTMLAttributes<HTMLElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare function IDSHeaderIneraMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraMenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraMenuMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraMenuMobile {
     var displayName: string;
 }

package/components/header-inera/header-inera-nav-base.d.ts

@@ -3,7 +3,7 @@ interface IDSHeaderIneraNavBaseProps {
     children?: ReactNode;
     unresponsive?: boolean;
 }
-export declare function IDSHeaderIneraNavBase({ children, unresponsive, ...props }: IDSHeaderIneraNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraNavBase({ children, unresponsive, ...props }: IDSHeaderIneraNavBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraNavBase {
     var displayName: string;
 }

package/components/header-inera/header-inera-nav-base.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 function IDSHeaderIneraNavBase({ children, unresponsive = false, ...props }) {
     return (jsx("nav", { className: clsx("ids-header-inera-nav", {
             "ids-header-inera-nav--unresponsive": unresponsive
-        }), "aria-label": "Huvudmeny", ...props, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
+        }), "aria-label": "Huvudmeny", ...props, children: jsx("div", { className: "ids-header-inera-nav__inner", children: children }) }));
 }
 IDSHeaderIneraNavBase.displayName = "IDSHeaderIneraNavBase";
 

package/components/header-inera/header-inera-nav-item-base.d.ts

@@ -15,7 +15,7 @@ export interface IDSHeaderIneraNavItemBaseProps extends HTMLAttributes<HTMLEleme
     onToggleItem?: () => void;
     unresponsive?: boolean;
 }
-export declare function IDSHeaderIneraNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, ...props }: IDSHeaderIneraNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, ...props }: IDSHeaderIneraNavItemBaseProps): React.JSX.Element;
 export declare namespace IDSHeaderIneraNavItemBase {
     var displayName: string;
 }

package/components/header-inera/header-inera-nav-item-base.js

@@ -1,24 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import clsx from 'clsx';
+import { IDSHeaderIneraNavItemLink } from './header-inera-nav-item-link.js';
 
 function IDSHeaderIneraNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, ...props }) {
     const itemId = `header-inera-item-${useId()}`;
-    return (jsxs("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-nav-item", {
+    return (jsxs("div", { ref: componentRef, className: clsx("ids-header-inera-nav-item", {
             "ids-header-inera-nav-item--unresponsive": unresponsive,
             "ids-header-inera-nav-item--expanded": expanded,
             "ids-header-inera-nav-item--active": active
-        }), children: [!!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-nav-item__button", onClick: onToggleItem, children: label })), !label && (jsx("span", { className: "ids-header-inera-nav-item__link", children: React.Children.map(children, child => {
-                    if (!React.isValidElement(child))
-                        return child;
-                    const element = child;
-                    if (active && !element.props["aria-current"]) {
-                        return React.cloneElement(element, {
-                            "aria-current": "page"
-                        });
-                    }
-                    return element;
-                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-nav-item__menu", {
+        }), ...props, children: [!label && jsx(IDSHeaderIneraNavItemLink, { active: active, children: children }), !!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-nav-item__button", onClick: onToggleItem, children: label })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-nav-item__menu", {
                     "ids-header-inera-nav-item__menu--expanded": expanded
                 }), children: jsxs("div", { className: "ids-header-inera-nav-item__menu-content", children: [jsx("div", { className: "ids-header-inera-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-4", children: col4 })] }) })] }));
 }

package/components/header-inera/header-inera-nav-item-link.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface IDSHeaderIneraNavItemLinkProps {
+    active?: boolean;
+    children?: React.ReactNode;
+}
+export declare function IDSHeaderIneraNavItemLink({ active, children }: IDSHeaderIneraNavItemLinkProps): React.JSX.Element;
+export declare namespace IDSHeaderIneraNavItemLink {
+    var displayName: string;
+}
+export {};