@inera/ids-react 6.1.0 → 7.0.0

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

@@ -1,6 +1,16 @@
-import '@inera/ids-core/components/side-menu/register.js';
-import { IDSSideMenu as SideMenu } from '@inera/ids-core/components/side-menu/side-menu-element.js';
-export declare const IDSSideMenu: import("@lit-labs/react").ReactWebComponent<SideMenu, {
-    onClosed: string;
-    onOpened: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/side-menu/side-menu.css";
+interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    srToggleText?: string;
+    expanded?: boolean;
+    active?: boolean;
+    level?: number;
+    icon?: string;
+    labelNotification?: ReactNode;
+    link?: ReactNode;
+    children?: ReactNode;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+export declare const IDSSideMenu: React.FC<IDSSideMenuProps>;
+export {};

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

@@ -1,16 +1,55 @@
-import * as React from 'react';
-import '@inera/ids-core/components/side-menu/register.js';
-import { IDSSideMenu as IDSSideMenu$1 } from '@inera/ids-core/components/side-menu/side-menu-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import '@inera/ids-design/components/side-menu/side-menu.css';
+import clsx from 'clsx';
 
-const IDSSideMenu = createComponent({
-    tagName: 'ids-side-menu',
-    elementClass: IDSSideMenu$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onOpened: 'opened'
-    }
-});
+const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const hasChildren = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) && child.type === IDSSideMenu);
+    const toggleExpanded = (e) => {
+        e.stopPropagation();
+        if (hasChildren) {
+            const newExpanded = !isExpanded;
+            setIsExpanded(newExpanded);
+            onExpandedChange?.(newExpanded);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.code !== "Escape") {
+            e.stopPropagation();
+        }
+        if (e.code === "Space" || e.code === "Enter") {
+            e.preventDefault(); // ✅ Prevent browser from also firing `click`
+            toggleExpanded(e);
+        }
+    };
+    const renderExpandButton = () => {
+        if (hasChildren) {
+            return (jsx("button", { className: clsx("ids-side-menu__chevron-button", {
+                    "ids-side-menu__chevron-button--expanded": isExpanded
+                }), onClick: toggleExpanded, onKeyDown: handleKeyDown, "aria-expanded": isExpanded, "aria-label": srToggleText }));
+        }
+        return icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" }));
+    };
+    const renderLabel = () => {
+        if (hasChildren) {
+            return (jsxs("button", { className: "ids-side-menu__label-button", onClick: toggleExpanded, onKeyDown: handleKeyDown, "aria-expanded": isExpanded, "aria-label": srToggleText, children: [jsx("div", { className: clsx("ids-side-menu__label-chevron", {
+                            "ids-side-menu__label-chevron--expanded": isExpanded
+                        }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
+        }
+        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
+    };
+    const renderMenuPost = () => {
+        if (label) {
+            return renderLabel();
+        }
+        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}`, {
+                    "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 })] }));
+};
 
 export { IDSSideMenu };

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

@@ -1,6 +1,21 @@
-import '@inera/ids-core/components/side-panel/register.js';
-import { IDSSidePanel as SidePanel } from '@inera/ids-core/components/side-panel/side-panel-element.js';
-export declare const IDSSidePanel: import("@lit-labs/react").ReactWebComponent<SidePanel, {
-    onClosed: string;
-    onOpened: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/side-panel/side-panel.css";
+interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+    left?: boolean;
+    elevated?: boolean;
+    menu?: boolean;
+    footer?: boolean;
+    srLabel?: string;
+    srClose?: string;
+    srOpen?: string;
+    onVisibilityChange?: (visible: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    footerLinks?: ReactNode;
+    footerText?: ReactNode;
+    headline?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSSidePanel: React.FC<IDSSidePanelProps>;
+export {};

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

@@ -1,16 +1,77 @@
-import * as React from 'react';
-import '@inera/ids-core/components/side-panel/register.js';
-import { IDSSidePanel as IDSSidePanel$1 } from '@inera/ids-core/components/side-panel/side-panel-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/side-panel/side-panel.css';
+import clsx from 'clsx';
 
-const IDSSidePanel = createComponent({
-    tagName: 'ids-side-panel',
-    elementClass: IDSSidePanel$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onOpened: 'opened'
-    }
-});
+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 [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", {
+        "ids-side-panel--show": isVisible,
+        "ids-side-panel--elevated": elevated,
+        "ids-side-panel--left": !menu && left
+    }, className);
+    useEffect(() => {
+        const handleResize = () => {
+            if (panelRef.current) {
+                if (window.innerWidth <= 1024) {
+                    panelRef.current.setAttribute("role", "dialog");
+                    panelRef.current.setAttribute("aria-modal", "true");
+                    panelRef.current.setAttribute("aria-label", srLabel);
+                }
+                else {
+                    panelRef.current.removeAttribute("role");
+                    panelRef.current.removeAttribute("aria-modal");
+                    panelRef.current.removeAttribute("aria-label");
+                }
+            }
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    useEffect(() => {
+        setIsVisible(show);
+    }, [show]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape" && isVisible) {
+                setIsVisible(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isVisible]);
+    useEffect(() => {
+        onVisibilityChange?.(isVisible);
+        if (isVisible) {
+            onOpen?.();
+            // Set focus to headline if available
+            const headlineSlot = panelRef.current?.querySelector("[slot=headline]");
+            headlineSlot?.focus();
+        }
+        else {
+            onClose?.();
+            if (menu && hamburgerRef.current) {
+                hamburgerRef.current.focus();
+            }
+        }
+    }, [isVisible]);
+    const togglePanel = () => setIsVisible(prev => !prev);
+    const closePanel = () => setIsVisible(false);
+    const renderButton = () => {
+        return menu ? (jsx("button", { "aria-label": isVisible ? srClose : srOpen, className: "ids-side-panel__hamburger", id: "js-hamburger", "aria-expanded": isVisible, onClick: togglePanel, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": isVisible, className: "ids-side-panel__close-button", onClick: closePanel }));
+    };
+    const renderFooter = () => {
+        if (menu && footer) {
+            return (jsxs("footer", { className: "ids-side-panel__footer", children: [footerLinks && jsx("div", { className: "ids-side-panel__footer-links", children: footerLinks }), jsx("div", { className: "ids-side-panel__footer-text", children: footerText })] }));
+        }
+        return null;
+    };
+    const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
+    return (jsx("div", { className: classNames, ref: panelRef, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [jsx("div", { className: "ids-side-panel__actions", children: renderButton() }), renderContent()] }) }));
+};
 
 export { IDSSidePanel };

package/components/stepper/step.d.ts

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

package/components/stepper/step.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 [expanded, setExpanded] = useState(expandedProp);
+    useEffect(() => {
+        setExpanded(expandedProp);
+    }, [expandedProp]);
+    useEffect(() => {
+        onToggleExpansion?.(Number(stepNumber), expanded);
+        expanded ? onExpanded?.() : onClosed?.();
+    }, [expanded]);
+    const toggleExpansion = () => {
+        if (!disabled) {
+            setExpanded(prev => !prev);
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleExpansion();
+        }
+    };
+    const renderStepIndicator = () => {
+        if (state === "valid" || state === "invalid")
+            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", {
+                    "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
+                                    }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
+                    "ids-step__content--expanded": expanded
+                }), children: children })] }));
+};
+
+export { IDSStep };

package/components/stepper/stepper.d.ts

@@ -1,7 +1,9 @@
-import '@inera/ids-core/components/stepper/register.js';
-import { IDSStepper as Stepper } from '@inera/ids-core/components/stepper/stepper-element.js';
-import { IDSStep as Step } from '@inera/ids-core/components/stepper/step/step-element.js';
-export declare const IDSStepper: import("@lit-labs/react").ReactWebComponent<Stepper, {
-    onDidToggleExpansion: string;
-}>;
-export declare const IDSStep: import("@lit-labs/react").ReactWebComponent<Step, {}>;
+import React, { ReactElement } from "react";
+import { IDSStepProps } from "./step";
+import "@inera/ids-design/components/stepper/stepper.css";
+interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<IDSStepProps>[] | ReactElement<IDSStepProps>;
+    onToggleExpansion?: (step: number, expanded: boolean) => void;
+}
+export declare const IDSStepper: React.FC<IDSStepperProps>;
+export {};

package/components/stepper/stepper.js

@@ -1,21 +1,23 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/stepper/register.js';
-import { IDSStepper as IDSStepper$1 } from '@inera/ids-core/components/stepper/stepper-element.js';
-import { IDSStep as IDSStep$1 } from '@inera/ids-core/components/stepper/step/step-element.js';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default, { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/stepper/stepper.css';
+import clsx from 'clsx';
 
-const IDSStepper = createComponent({
-    tagName: 'ids-stepper',
-    elementClass: IDSStepper$1,
-    react: React,
-    events: {
-        onDidToggleExpansion: 'didToggleExpansion'
-    }
-});
-const IDSStep = createComponent({
-    tagName: 'ids-step',
-    elementClass: IDSStep$1,
-    react: React
-});
+const IDSStepper = ({ children, onToggleExpansion, className }) => {
+    const stepsArray = React__default.Children.toArray(children).filter(isValidElement);
+    const handleExpansion = (step, expanded) => {
+        onToggleExpansion?.(step, expanded);
+    };
+    const enhancedSteps = stepsArray.map((step, index) => {
+        return cloneElement(step, {
+            key: `step-key-${index}`,
+            stepNumber: `${index + 1}`,
+            last: index === stepsArray.length - 1 ? "true" : "false",
+            onToggleExpansion: handleExpansion
+        });
+    });
+    return jsx("div", { className: clsx("ids-stepper", className), children: enhancedSteps });
+};
 
-export { IDSStep, IDSStepper };
+export { IDSStepper };

package/components/tabs/tab-panel.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/tabs/tab-panel.css";
+export interface IDSTabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    compact?: boolean;
+    noFocus?: boolean;
+    selected?: boolean;
+    children?: ReactNode;
+    id?: string;
+    tabId?: string;
+}
+export declare const IDSTabPanel: React.FC<IDSTabPanelProps>;

package/components/tabs/tab-panel.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+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 panelRef = useRef(null);
+    useEffect(() => {
+        if (panelRef.current && !noFocus) {
+            panelRef.current.setAttribute("tabindex", "0");
+        }
+    }, [noFocus]);
+    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 }));
+};
+
+export { IDSTabPanel };

package/components/tabs/tab.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode, KeyboardEvent } from "react";
+import "@inera/ids-design/components/tabs/tab.css";
+export interface IDSTabProps extends React.HTMLAttributes<HTMLDivElement> {
+    notices?: number;
+    label: string;
+    index?: string;
+    id?: string;
+    panelId?: string;
+    icon?: string;
+    selected?: boolean;
+    notification?: ReactNode;
+    onTabClick?: (index: string) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+export declare const IDSTab: React.FC<IDSTabProps>;

package/components/tabs/tab.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 tabRef = useRef(null);
+    const handleClick = () => {
+        if (!selected) {
+            onTabClick?.(index);
+        }
+    };
+    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] }) }));
+};
+
+export { IDSTab };

package/components/tabs/tabs.d.ts

@@ -1,9 +1,14 @@
-import '@inera/ids-core/components/tabs/register.js';
-import { IDSTabs as Tabs } from '@inera/ids-core/components/tabs/tabs-element.js';
-import { IDSTab as Tab } from '@inera/ids-core/components/tabs/tab/tab-element.js';
-import { IDSTabPanel as TabPanel } from '@inera/ids-core/components/tabs/panel/tab-panel-element.js';
-export declare const IDSTabs: import("@lit-labs/react").ReactWebComponent<Tabs, {
-    onTabChange: string;
-}>;
-export declare const IDSTab: import("@lit-labs/react").ReactWebComponent<Tab, {}>;
-export declare const IDSTabPanel: import("@lit-labs/react").ReactWebComponent<TabPanel, {}>;
+import React, { ReactNode, ReactElement } from "react";
+import "@inera/ids-design/components/tabs/tabs.css";
+import { IDSTabProps } from "./tab";
+interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    unresponsive?: boolean;
+    compact?: boolean;
+    breakpoint?: "m" | "s";
+    selectLabel?: string;
+    tabs?: ReactElement<IDSTabProps>[];
+    children?: ReactNode;
+    onTabChange?: (index: number) => void;
+}
+export declare const IDSTabs: React.FC<IDSTabsProps>;
+export {};

package/components/tabs/tabs.js

@@ -1,27 +1,81 @@
-import * as React from 'react';
-import '@inera/ids-core/components/tabs/register.js';
-import { IDSTabs as IDSTabs$1 } from '@inera/ids-core/components/tabs/tabs-element.js';
-import { IDSTab as IDSTab$1 } from '@inera/ids-core/components/tabs/tab/tab-element.js';
-import { IDSTabPanel as IDSTabPanel$1 } from '@inera/ids-core/components/tabs/panel/tab-panel-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { 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 = createComponent({
-    tagName: 'ids-tabs',
-    elementClass: IDSTabs$1,
-    react: React,
-    events: {
-        onTabChange: 'tabChange'
-    }
-});
-const IDSTab = createComponent({
-    tagName: 'ids-tab',
-    elementClass: IDSTab$1,
-    react: React
-});
-const IDSTabPanel = createComponent({
-    tagName: 'ids-tab-panel',
-    elementClass: IDSTabPanel$1,
-    react: React
-});
+const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange }) => {
+    const tabsId = useElementId();
+    const initialSelectedIndex = tabs.findIndex(tab => React__default.isValidElement(tab) && tab.props.selected === true);
+    const [activeTab, setActiveTab] = useState(initialSelectedIndex !== -1 ? initialSelectedIndex : 0);
+    const responsiveOnM = breakpoint === "m" && !unresponsive;
+    const responsiveOnS = breakpoint === "s" && !unresponsive;
+    const handleSelect = (index) => {
+        setActiveTab(index);
+        onTabChange?.(index);
+    };
+    const handleKeydown = (e, index) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelect(index);
+        }
+        else if (e.key === "ArrowLeft" && index > 0) {
+            e.preventDefault();
+            document.getElementById(getTabId(index - 1))?.focus();
+        }
+        else if (e.key === "ArrowRight" && index < tabs.length - 1) {
+            e.preventDefault();
+            document.getElementById(getTabId(index + 1))?.focus();
+        }
+    };
+    const getTabId = (index) => {
+        return `${tabsId}-tab-${index}`;
+    };
+    const getTabPanelId = (index) => {
+        return `${tabsId}-tab-panel-${index}`;
+    };
+    const enhancedTabs = React__default.Children.map(tabs, (tab, idx) => {
+        if (!React__default.isValidElement(tab))
+            return tab;
+        return React__default.cloneElement(tab, {
+            key: `tab-key-${idx}`,
+            id: getTabId(idx),
+            panelId: getTabPanelId(idx),
+            index: `${idx}`,
+            label: tab.props.label,
+            selected: activeTab === idx,
+            onTabClick: () => handleSelect(idx),
+            onKeyDown: (e) => handleKeydown(e, idx)
+        });
+    });
+    const enhancedTabPanels = React__default.Children.map(children, (panel, idx) => {
+        if (!React__default.isValidElement(panel))
+            return panel;
+        return React__default.cloneElement(panel, {
+            key: `tab-panel-key-${idx}`,
+            id: getTabPanelId(idx),
+            tabId: getTabId(idx),
+            role: "tabpanel",
+            hidden: activeTab !== idx,
+            selected: activeTab === idx,
+            compact
+        });
+    });
+    const tabChangedFromSelect = (e) => {
+        const index = Number(e.target.value);
+        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));
+    });
+    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 })] }));
+};
 
-export { IDSTab, IDSTabPanel, IDSTabs };
+export { IDSTabs };

package/components/tag/tag.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/tag/tag.css";
-type IDSTagProps = {
-    closeable?: boolean;
+interface IDSTagProps extends React.HTMLAttributes<HTMLButtonElement> {
     srCloseLabel?: string;
     onClose?: () => void;
-    children?: React.ReactNode;
-    clickable?: React.ReactElement<any>;
-};
+    onClick?: () => void;
+    children?: ReactNode;
+}
 export declare const IDSTag: React.FC<IDSTagProps>;
 export {};

package/components/tag/tag.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '@inera/ids-design/components/tag/tag.css';
+import clsx from 'clsx';
 
-const IDSTag = ({ closeable = false, srCloseLabel = "", onClose, children, clickable }) => {
-    return (jsx(Fragment, { children: clickable ? (React__default.cloneElement(clickable, {
-            className: `${clickable.props.className || ""} ids-tag ids-tag--clickable`
-        })) : (jsxs("span", { className: `${clickable ? "" : "ids-tag"}`, children: [jsx("div", { className: "ids-tag__content", children: children }), closeable && !clickable && (jsx("button", { className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
+const IDSTag = ({ srCloseLabel = "", onClose, onClick, children, className, ...props }) => {
+    const TagWrapper = !!onClick ? "button" : "span";
+    return (jsx(TagWrapper, { className: clsx("ids-tag", {
+            "ids-tag--clickable": !!onClick
+        }, className), onClick: !!onClick ? onClick : undefined, ...props, children: jsxs("div", { className: "ids-tag__content", children: [children, !onClick && !!onClose && (jsx("button", { className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
                         e.stopPropagation();
-                        if (onClose)
-                            onClose();
-                    } }))] })) }));
+                        onClose?.();
+                    } }))] }) }));
 };
 
 export { IDSTag };

package/components/tooltip/tooltip.d.ts

@@ -1,3 +1,10 @@
-import '@inera/ids-core/components/tooltip/register.js';
-import { IDSTooltip as Tooltip } from '@inera/ids-core/components/tooltip/tooltip-element.js';
-export declare const IDSTooltip: import("@lit-labs/react").ReactWebComponent<Tooltip, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/tooltip/tooltip.css";
+export type TooltipPosition = "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
+interface IDSTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: TooltipPosition;
+    trigger: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSTooltip: React.FC<IDSTooltipProps>;
+export {};