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

package/dist/cjs/components/suggestion/suggestion-list.js

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('@u-elements/u-datalist');
+var dom = require('@floating-ui/dom');
 var suggestion = require('./suggestion.js');
 
 /**
@@ -17,10 +18,47 @@ var suggestion = require('./suggestion.js');
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { handleFilter } = react.useContext(suggestion.SuggestionContext);
+const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
+    const { handleFilter, uComboboxRef } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter); // Must run on every render
-    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, ...rest }));
+    // Position with floating-ui
+    react.useEffect(() => {
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
+        if (list && trigger) {
+            return dom.autoUpdate(trigger, list, () => {
+                dom.computePosition(trigger, list, {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                    middleware: [
+                        ...(autoPlacement
+                            ? [
+                                dom.flip({
+                                    fallbackAxisSideDirection: 'start',
+                                    fallbackPlacements: ['top'],
+                                }),
+                                dom.shift(),
+                            ]
+                            : []),
+                        undefined,
+                        triggerWidth,
+                    ],
+                }).then(({ x, y, placement }) => {
+                    const varOperator = placement.startsWith('top') ? '-' : '+';
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
+                });
+            });
+        }
+    }, []);
+    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
 });
+const triggerWidth = {
+    name: 'TriggerWidth',
+    fn(data) {
+        const { elements, rects } = data;
+        elements.floating.style.width = `${rects.reference.width}px`;
+        return data;
+    },
+};
 
 exports.SuggestionList = SuggestionList;

package/dist/cjs/components/suggestion/suggestion-option.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
 });

package/dist/cjs/components/suggestion/suggestion.js

@@ -6,42 +6,41 @@ var react = require('react');
 require('@u-elements/u-combobox');
 var cl = require('clsx/lite');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var index = require('../chip/index.js');
 
-const SuggestionContext = react.createContext({
-    handleFilter: () => undefined,
-});
 const text = (el) => el.textContent?.trim() || '';
-const sanitizeItems = (values = []) => (typeof values === 'string'
+const sanitizeItems = (values = []) => typeof values === 'string'
     ? [{ label: values, value: values }]
-    : values.map((value) => typeof value === 'string'
-        ? { label: value, value }
-        : {
-            label: value.label || value.value || '',
-            value: value.value || '',
-        })).filter((x) => !!x.label);
+    : !Array.isArray(values)
+        ? [values]
+        : values.map((value) => typeof value === 'string' ? { label: value, value } : value);
 const nextItems = (data, prev, multiple) => {
     const item = { label: text(data), value: data.value };
     if (!multiple)
-        return data.isConnected ? [] : [item];
+        return data.isConnected ? undefined : item;
     return data.isConnected
         ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
         : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
     const uComboboxRef = react.useRef(null);
-    const generatedSelectId = react.useId();
-    const selectId = rest.id ? `${rest.id}-select` : generatedSelectId;
-    const isContolled = value !== undefined;
+    const genId = react.useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = react.useState(false);
-    const [selectedItems, setSelectedItems] = react.useState(sanitizeItems(defaultValue || value));
-    // Update if controlled values
-    const prevControlled = react.useRef(value);
-    if (value !== prevControlled.current) {
-        prevControlled.current = value;
-        setSelectedItems(sanitizeItems(prevControlled.current));
-    }
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+    const onSelectedChangeRef = react.useRef(onSelectedChange);
+    const selectedItemsRef = react.useRef(selectedItems);
+    // Keep the ref updated with the latest callback
+    react.useEffect(() => {
+        onSelectedChangeRef.current = onSelectedChange;
+    }, [onSelectedChange]);
+    react.useEffect(() => {
+        selectedItemsRef.current = selectedItems;
+    }, [selectedItems]);
     /**
      * Listerners and handling of adding/removing
      */
@@ -51,14 +50,21 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            if (isContolled)
-                onValueChange?.(nextItems(data, prevControlled.current, multiple));
-            else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+            onSelectedChangeRef.current?.(nextItem || null);
+            if (!isControlled)
+                setDefaultItems(sanitizeItems(nextItem));
         };
-        combobox?.addEventListener('beforechange', beforeChange);
-        return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+        combobox?.addEventListener('comboboxbeforeselect', beforeChange);
+        return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
+    }, [isControlled]);
+    // Before match event listener
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('comboboxbeforematch', beforeMatch);
+        return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = react.useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -80,7 +86,10 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+});
+const SuggestionContext = react.createContext({
+    handleFilter: () => undefined,
 });
 
 exports.Suggestion = Suggestion;

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

@@ -34,7 +34,7 @@ var tableRow = require('./table-row.js');
  *   </Table.Foot>
  * </Table>
  */
-const Table = Object.assign(table.Table, {
+const TableComponent = Object.assign(table.Table, {
     Head: tableHead.TableHead,
     Body: tableBody.TableBody,
     Row: tableRow.TableRow,
@@ -42,13 +42,13 @@ const Table = Object.assign(table.Table, {
     HeaderCell: tableHeaderCell.TableHeaderCell,
     Foot: tableFoot.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';
 
 exports.TableBody = tableBody.TableBody;
 exports.TableCell = tableCell.TableCell;
@@ -56,4 +56,4 @@ exports.TableFoot = tableFoot.TableFoot;
 exports.TableHead = tableHead.TableHead;
 exports.TableHeaderCell = tableHeaderCell.TableHeaderCell;
 exports.TableRow = tableRow.TableRow;
-exports.Table = Table;
+exports.Table = TableComponent;

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableBody(rest, ref) {
     return jsxRuntime.jsx("tbody", { ref: ref, ...rest });

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

@@ -8,7 +8,7 @@ var react = require('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 = react.forwardRef(function TableCell(rest, ref) {
     return jsxRuntime.jsx("td", { ref: ref, ...rest });

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableFoot(rest, ref) {
     return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableHead(rest, ref) {
     return jsxRuntime.jsx("thead", { ref: ref, ...rest });

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

@@ -8,7 +8,7 @@ var react = require('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 = react.forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
     return (jsxRuntime.jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsxRuntime.jsx("button", { type: 'button', children: children }) : children }));

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

@@ -8,10 +8,10 @@ var react = require('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 = react.forwardRef(function TableRow(rest, ref) {
     return jsxRuntime.jsx("tr", { ref: ref, ...rest });

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

@@ -21,16 +21,16 @@ var tabsTab = require('./tabs-tab.js');
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-const Tabs = Object.assign(tabs.Tabs, {
+const TabsComponent = Object.assign(tabs.Tabs, {
     List: tabsList.TabsList,
     Tab: tabsTab.TabsTab,
     Panel: tabsPanel.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';
 
 exports.TabsList = tabsList.TabsList;
 exports.TabsPanel = tabsPanel.TabsPanel;
 exports.TabsTab = tabsTab.TabsTab;
-exports.Tabs = Tabs;
+exports.Tabs = TabsComponent;

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

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
 var tabs = require('./tabs.js');
 
@@ -10,14 +11,15 @@ var tabs = require('./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 = react.forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value } = react.useContext(tabs.Context);
-    return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+    const { value, tablistRef } = react.useContext(tabs.Context);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, tablistRef]);
+    return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
 });
 
 exports.TabsList = TabsList;

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

@@ -3,19 +3,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var tabs = require('./tabs.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var tabs = require('./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 = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
-    const { value: tabsValue } = react.useContext(tabs.Context);
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
+    const { value: tabsValue, tablistRef, setPanelButtonMap, } = react.useContext(tabs.Context);
     const active = value === tabsValue;
+    const generatedId = react.useId();
+    const panelId = id ?? `tabpanel-${generatedId}`;
     const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const [labelledBy, setLabelledBy] = react.useState(undefined);
     const internalRef = react.useRef(null);
     const mergedRef = useMergeRefs.useMergeRefs([ref, internalRef]);
     /* Check if the panel has any tabbable elements */
@@ -25,7 +28,17 @@ const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest
         const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         setHasTabbableElement(tabbableElements.length > 0);
     }, [children]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+    /* get associated button */
+    react.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 (jsxRuntime.jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
 });
 
 exports.TabsPanel = TabsPanel;

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

@@ -10,13 +10,16 @@ var tabs = require('./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 = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+const TabsTab = react.forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
     const tabs$1 = react.useContext(tabs.Context);
     const generatedId = react.useId();
     const buttonId = id ?? `tab-${generatedId}`;
-    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs$1.value === value, id: buttonId, onClick: () => tabs$1.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs$1.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
+                tabs$1.onChange?.(value);
+                onClick?.(e);
+            }, "aria-controls": tabs$1.panelButtonMap?.get(buttonId), ...rest }) }));
 });
 
 exports.TabsTab = TabsTab;

package/dist/cjs/components/tabs/tabs.js

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

package/dist/cjs/components/tag/tag.js

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

package/dist/cjs/components/textfield/textfield.js

@@ -21,7 +21,7 @@ var fieldAffix = require('../field/field-affix.js');
  * <Textfield label="Textfield label">
  */
 const Textfield = react.forwardRef(function Textfield({ label: label$1, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
-    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label$1 && jsxRuntime.jsx(label.Label, { children: label$1 }), !!description && jsxRuntime.jsx(fieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(fieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label$1 && jsxRuntime.jsx(label.Label, { children: label$1 }), !!description && jsxRuntime.jsx(fieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(fieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: suffix })] }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
 });
 
 exports.Textfield = Textfield;

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

@@ -14,10 +14,10 @@ var toggleGroupItem = require('./toggle-group-item.js');
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
+const ToggleGroupComponent = Object.assign(toggleGroup.ToggleGroup, {
     Item: toggleGroupItem.ToggleGroupItem,
 });
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
 
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
-exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroup = ToggleGroupComponent;

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

@@ -10,11 +10,11 @@ var useToggleGroupitem = require('./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 = react.forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
-    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(button.Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+    const { active, buttonProps, value, variant } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(button.Button, { variant: active ? variant : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
 });
 
 exports.ToggleGroupItem = ToggleGroupItem;

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

@@ -17,7 +17,7 @@ const ToggleGroupContext = react.createContext({});
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, variant = 'primary', value, defaultValue, onChange, name, className, ...rest }, ref) {
     const nameId = react.useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -30,11 +30,12 @@ const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, def
         value = uncontrolledValue;
     }
     return (jsxRuntime.jsx(ToggleGroupContext.Provider, { value: {
+            variant,
             value,
             defaultValue,
             name: name ?? `togglegroup-name-${nameId}`,
             onChange: onValueChange,
-        }, children: jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+        }, children: jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', "data-variant": variant, ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
 
 exports.ToggleGroup = ToggleGroup;

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

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

package/dist/cjs/components/tooltip/tooltip.js

@@ -21,13 +21,14 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, ...rest }, ref) {
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, type, ...rest }, ref) {
     const randomTooltipId = react.useId();
     const [internalOpen, setInternalOpen] = react.useState(false);
     const triggerRef = react.useRef(null);
     const tooltipRef = react.useRef(null);
     const mergedRefs = useMergeRefs.useMergeRefs([tooltipRef, ref]);
     const controlledOpen = open ?? internalOpen;
+    const tooltipId = id ?? randomTooltipId;
     const setOpen = () => {
         setInternalOpen(true);
     };
@@ -60,23 +61,39 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
                         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 */
     react.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' : reactSlot.Slot;
     /* Make sure it is valid */
@@ -85,12 +102,13 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
         return null;
     }
     const popoverProps = {
-        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: tooltipId,
         [react.version.startsWith('19')
             ? 'popoverTargetAction'
             : 'popovertargetaction']: 'show',
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, [type ? 'aria-' + type : autoType]: tooltipId, children: children }), jsxRuntime.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',