@digdir/designsystemet-react 0.0.0-next-20250710132619 → 0.0.0-react-side-effects-20260113071010

package/dist/esm/components/switch/switch.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 
@@ -12,7 +12,7 @@ import { Label } from '../label/label.js';
  * <Switch label="I agree" value="agree" />
  */
 const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
+    return (jsxs(FieldComponent, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
 });
 
 export { Switch };

package/dist/esm/components/table/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { Table as Table$1 } from './table.js';
+import { Table } from './table.js';
 import { TableBody } from './table-body.js';
 import { TableCell } from './table-cell.js';
 import { TableFoot } from './table-foot.js';
@@ -32,7 +32,7 @@ import { TableRow } from './table-row.js';
  *   </Table.Foot>
  * </Table>
  */
-const Table = Object.assign(Table$1, {
+const TableComponent = Object.assign(Table, {
     Head: TableHead,
     Body: TableBody,
     Row: TableRow,
@@ -40,12 +40,12 @@ const Table = Object.assign(Table$1, {
     HeaderCell: TableHeaderCell,
     Foot: TableFoot,
 });
-Table.displayName = 'Table';
-Table.Head.displayName = 'Table.Head';
-Table.Body.displayName = 'Table.Body';
-Table.Row.displayName = 'Table.Row';
-Table.Cell.displayName = 'Table.Cell';
-Table.HeaderCell.displayName = 'Table.HeaderCell';
-Table.Foot.displayName = 'Table.Foot';
+TableComponent.displayName = 'Table';
+TableComponent.Head.displayName = 'Table.Head';
+TableComponent.Body.displayName = 'Table.Body';
+TableComponent.Row.displayName = 'Table.Row';
+TableComponent.Cell.displayName = 'Table.Cell';
+TableComponent.HeaderCell.displayName = 'Table.HeaderCell';
+TableComponent.Foot.displayName = 'Table.Foot';
 
-export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };
+export { TableComponent as Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/table/table-body.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
  *
  * @example
- * <Table.Body>
- *   <Table.Row>
- *     <Table.Cell>John</Table.Cell>
- *     <Table.Cell>25</Table.Cell>
- *   </Table.Row>
- * </Table.Body>
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
  */
 const TableBody = forwardRef(function TableBody(rest, ref) {
     return jsx("tbody", { ref: ref, ...rest });

package/dist/esm/components/table/table-cell.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableCell component, used to display the cells of a table. Renders a native HTML td element.
  *
  * @example
- * <Table.Cell>John</Table.Cell>
+ * <TableCell>John</TableCell>
  */
 const TableCell = forwardRef(function TableCell(rest, ref) {
     return jsx("td", { ref: ref, ...rest });

package/dist/esm/components/table/table-foot.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
  *
  * @example
- * <Table.Foot>
- *   <Table.Row>
- *     <Table.Cell>Total</Table.Cell>
- *     <Table.Cell>2</Table.Cell>
- *   </Table.Row>
- * </Table.Foot>
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
  */
 const TableFoot = forwardRef(function TableFoot(rest, ref) {
     return jsx("tfoot", { ref: ref, ...rest });

package/dist/esm/components/table/table-head.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableHead component, used to display the header of a table. Renders a native HTML thead element.
  *
  * @example
- * <Table.Head>
- *   <Table.Row>
- *     <Table.HeaderCell>Name</Table.HeaderCell>
- *     <Table.HeaderCell>Age</Table.HeaderCell>
- *   </Table.Row>
- * </Table.Head>
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
  */
 const TableHead = forwardRef(function TableHead(rest, ref) {
     return jsx("thead", { ref: ref, ...rest });

package/dist/esm/components/table/table-header-cell.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
  *
  * @example
- * <Table.HeaderCell>Name</Table.HeaderCell>
+ * <TableHeaderCell>Name</TableHeaderCell>
  */
 const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
     return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));

package/dist/esm/components/table/table-row.js

@@ -6,10 +6,10 @@ import { forwardRef } from 'react';
  * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
  *
  * @example
- * <Table.Row>
- *   <Table.Cell>John</Table.Cell>
- *   <Table.Cell>25</Table.Cell>
- * </Table.Row>
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
  */
 const TableRow = forwardRef(function TableRow(rest, ref) {
     return jsx("tr", { ref: ref, ...rest });

package/dist/esm/components/tabs/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { Tabs as Tabs$1 } from './tabs.js';
+import { Tabs } from './tabs.js';
 import { TabsList } from './tabs-list.js';
 import { TabsPanel } from './tabs-panel.js';
 import { TabsTab } from './tabs-tab.js';
@@ -19,13 +19,13 @@ import { TabsTab } from './tabs-tab.js';
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-const Tabs = Object.assign(Tabs$1, {
+const TabsComponent = Object.assign(Tabs, {
     List: TabsList,
     Tab: TabsTab,
     Panel: TabsPanel,
 });
-Tabs.Tab.displayName = 'Tabs.Tab';
-Tabs.List.displayName = 'Tabs.List';
-Tabs.Panel.displayName = 'Tabs.Panel';
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
 
-export { Tabs, TabsList, TabsPanel, TabsTab };
+export { TabsComponent as Tabs, TabsList, TabsPanel, TabsTab };

package/dist/esm/components/tabs/tabs-list.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 import { Context } from './tabs.js';
 
@@ -8,14 +9,15 @@ import { Context } from './tabs.js';
  * The container for all `Tab` components.
  *
  * @example
- * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- * </Tabs.List>
+ * <TabsList>
+ *  <TabsTab value='1'>Tab 1</TabsTab>
+ *  <TabsTab value='2'>Tab 2</TabsTab>
+ * </TabsList>
  */
 const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value } = useContext(Context);
-    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+    const { value, tablistRef } = useContext(Context);
+    const mergedRefs = useMergeRefs([ref, tablistRef]);
+    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
 });
 
 export { TabsList };

package/dist/esm/components/tabs/tabs-panel.js

@@ -1,19 +1,22 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
-import { Context } from './tabs.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './tabs.js';
 
 /**
  * A single content item in a Tabs component.
  *
  * @example
- * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ * <TabsPanel value='1'>content 1</TabsPanel>
  */
-const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
-    const { value: tabsValue } = useContext(Context);
+const TabsPanel = forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
+    const { value: tabsValue, tablistRef, setPanelButtonMap, } = useContext(Context);
     const active = value === tabsValue;
+    const generatedId = useId();
+    const panelId = id ?? `tabpanel-${generatedId}`;
     const [hasTabbableElement, setHasTabbableElement] = useState(false);
+    const [labelledBy, setLabelledBy] = useState(undefined);
     const internalRef = useRef(null);
     const mergedRef = useMergeRefs([ref, internalRef]);
     /* Check if the panel has any tabbable elements */
@@ -23,7 +26,17 @@ const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, re
         const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         setHasTabbableElement(tabbableElements.length > 0);
     }, [children]);
-    return (jsx(Fragment, { children: active && (jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+    /* get associated button */
+    useEffect(() => {
+        if (!tablistRef)
+            return;
+        const button = tablistRef.current?.querySelector(`[role="tab"][data-value="${value}"]`);
+        setLabelledBy(button ? button.id : undefined);
+        if (button) {
+            setPanelButtonMap?.((prev) => new Map(prev).set(button.id, panelId));
+        }
+    }, [tablistRef]);
+    return (jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
 });
 
 export { TabsPanel };

package/dist/esm/components/tabs/tabs-tab.js

@@ -8,13 +8,16 @@ import { Context } from './tabs.js';
  * A single item in a Tabs component.
  *
  * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ * <TabsTab value='1'>Tab 1</TabsTab>
  */
-const TabsTab = forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+const TabsTab = forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
     const tabs = useContext(Context);
     const generatedId = useId();
     const buttonId = id ?? `tab-${generatedId}`;
-    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
+                tabs.onChange?.(value);
+                onClick?.(e);
+            }, "aria-controls": tabs.panelButtonMap?.get(buttonId), ...rest }) }));
 });
 
 export { TabsTab };

package/dist/esm/components/tabs/tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useState } from 'react';
+import { createContext, forwardRef, useRef, useState } from 'react';
 
 const Context = createContext({});
 /**
@@ -20,8 +20,10 @@ const Context = createContext({});
  * </Tabs>
  */
 const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const tablistRef = useRef(null);
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [panelButtonMap, setPanelButtonMap] = useState(new Map());
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -34,6 +36,9 @@ const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange
             value,
             defaultValue,
             onChange: onValueChange,
+            tablistRef,
+            panelButtonMap,
+            setPanelButtonMap,
         }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
 

package/dist/esm/components/tag/tag.js

@@ -9,8 +9,8 @@ import { forwardRef } from 'react';
  * @example
  * <Tag>Melk</Tag>
  */
-const Tag = forwardRef(function Tag({ className, ...rest }, ref) {
-    return jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
+const Tag = forwardRef(function Tag({ className, variant = 'default', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-tag', className), ref: ref, "data-variant": variant, ...rest }));
 });
 
 export { Tag };

package/dist/esm/components/textfield/textfield.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import { Textarea } from '../textarea/textarea.js';
@@ -19,7 +19,7 @@ import { FieldAffixes, FieldAffix } from '../field/field-affix.js';
  * <Textfield label="Textfield label">
  */
 const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+    return (jsxs(FieldComponent, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!counter && (jsx(FieldComponent.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Textfield };

package/dist/esm/components/toggle-group/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { ToggleGroup as ToggleGroup$1 } from './toggle-group.js';
+import { ToggleGroup } from './toggle-group.js';
 import { ToggleGroupItem } from './toggle-group-item.js';
 
 /**
@@ -12,9 +12,9 @@ import { ToggleGroupItem } from './toggle-group-item.js';
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = Object.assign(ToggleGroup$1, {
+const ToggleGroupComponent = Object.assign(ToggleGroup, {
     Item: ToggleGroupItem,
 });
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -8,11 +8,11 @@ import { useToggleGroupItem } from './use-toggle-groupitem.js';
 /**
  * A single item in a ToggleGroup.
  * @example
- * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
  */
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, buttonProps, value } = useToggleGroupItem(rest);
-    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+    const { active, buttonProps, value, variant } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? variant : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
 });
 
 export { ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useId, useState, createContext } from 'react';
+import { createContext, forwardRef, useId, useState } from 'react';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 
 const ToggleGroupContext = createContext({});
@@ -15,7 +15,7 @@ const ToggleGroupContext = createContext({});
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = forwardRef(function ToggleGroup({ children, variant = 'primary', value, defaultValue, onChange, name, className, ...rest }, ref) {
     const nameId = useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -28,11 +28,12 @@ const ToggleGroup = forwardRef(function ToggleGroup({ children, value, defaultVa
         value = uncontrolledValue;
     }
     return (jsx(ToggleGroupContext.Provider, { value: {
+            variant,
             value,
             defaultValue,
             name: name ?? `togglegroup-name-${nameId}`,
             onChange: onValueChange,
-        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', "data-variant": variant, ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
 
 export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/toggle-group/use-toggle-groupitem.js

@@ -9,11 +9,13 @@ const useToggleGroupItem = (props) => {
     const toggleGroup = useContext(ToggleGroupContext);
     const value = props.value ?? genValue;
     const active = toggleGroup.value === value;
+    const variant = toggleGroup.variant;
     const buttonId = `togglegroup-item-${useId()}`;
     return {
         ...rest,
         active: active,
         value,
+        variant,
         buttonProps: {
             id: buttonId,
             'aria-checked': active,

package/dist/esm/components/tooltip/tooltip.js

@@ -19,13 +19,14 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, ...rest }, ref) {
+const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, type, ...rest }, ref) {
     const randomTooltipId = useId();
     const [internalOpen, setInternalOpen] = useState(false);
     const triggerRef = useRef(null);
     const tooltipRef = useRef(null);
     const mergedRefs = useMergeRefs([tooltipRef, ref]);
     const controlledOpen = open ?? internalOpen;
+    const tooltipId = id ?? randomTooltipId;
     const setOpen = () => {
         setInternalOpen(true);
     };
@@ -58,23 +59,39 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
                         safeAreaElement,
                     ],
                 }).then(({ x, y }) => {
-                    tooltip.style.translate = `${x}px ${y}px`;
+                    tooltip.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
         }
     }, [controlledOpen, placement]);
-    /* Add listener for ESC to dismiss */
+    /* Add listeners for ESC to dismiss and click outside on mobile */
     useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
                 setInternalOpen(false);
             }
         };
-        window.addEventListener('keydown', handleKeyDown);
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTooltip = tooltip?.contains(el);
+            const isTrigger = trigger?.contains(el);
+            const isOutside = !isTrigger && !isTooltip;
+            if (isOutside && controlledOpen) {
+                setInternalOpen(false);
+            }
+        };
+        if (controlledOpen) {
+            window.addEventListener('keydown', handleKeyDown);
+            /* Add click listener to handle mobile tap-to-close */
+            document.addEventListener('click', handleClick);
+        }
         return () => {
             window.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('click', handleClick);
         };
-    }, []);
+    }, [controlledOpen]);
     /* If children is only a string, make a span */
     const ChildContainer = typeof children === 'string' ? 'span' : Slot;
     /* Make sure it is valid */
@@ -83,12 +100,13 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
         return null;
     }
     const popoverProps = {
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: tooltipId,
         [version.startsWith('19')
             ? 'popoverTargetAction'
             : 'popovertargetaction']: 'show',
     };
-    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
+    const autoType = `aria-${triggerRef.current?.innerText?.trim() ? 'describedby' : 'labelledby'}`;
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, [type ? 'aria-' + type : autoType]: tooltipId, children: children }), jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: tooltipId, popover: 'manual', ...rest, children: content })] }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',