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

package/dist/cjs/components/field/field-counter.js

@@ -3,6 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
 var paragraph = require('../paragraph/paragraph.js');
 var validationMessage = require('../validation-message/validation-message.js');
 var fieldObserver = require('./field-observer.js');
@@ -17,11 +20,15 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
  * </Field>
  */
-const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
     const [count, setCount] = react.useState(0);
+    const [liveRegionText, setLiveRegionText] = react.useState('');
+    const fieldInputRef = react.useRef(null);
     const counterRef = react.useRef(null);
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
+    const debouncedSetLiveRegionText = useDebounceCallback.useDebounceCallback((text) => setLiveRegionText(text), 1200);
+    // Listen to native input events (user typing) to update the counter in real time
     react.useEffect(() => {
         const field = counterRef.current?.closest('.ds-field');
         const input = Array.from(field?.getElementsByTagName('*') || []).find(fieldObserver.isInputLike);
@@ -31,10 +38,23 @@ const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d
         };
         if (input)
             onInput({ target: input }); // Initial setup
+        fieldInputRef.current = input;
         field?.addEventListener('input', onInput);
         return () => field?.removeEventListener('input', onInput);
-    }, [setCount]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+    }, []);
+    /* React does not dispatch a native input event when the value prop changes externally.
+    Since the parent re-renders this component when value changes, we can sync on render. */
+    react.useEffect(() => {
+        if (fieldInputRef.current) {
+            const valueLength = fieldInputRef.current.value.length;
+            setCount((prev) => (prev === valueLength ? prev : valueLength));
+        }
+    });
+    // Update live region text when count or limit changes
+    react.useEffect(() => {
+        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
+    }, [count, limit, over, under, hasExceededLimit, remainder]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
 });
 
 exports.FieldCounter = FieldCounter;

package/dist/cjs/components/field/field-description.js

@@ -4,6 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
 const FieldDescription = react.forwardRef(function FieldDescription(rest, ref) {
     return jsxRuntime.jsx("div", { "data-field": 'description', ref: ref, ...rest });
 });

package/dist/cjs/components/field/field-observer.js

@@ -27,7 +27,7 @@ function fieldObserver(fieldElement) {
                 elements.set(el, el.htmlFor);
             else if (el.hasAttribute('data-field'))
                 elements.set(el, el.id);
-            else if (isInputLike(el)) {
+            else if (isInputLike(el) && !el.hidden) {
                 input = el;
                 describedby = el.getAttribute('aria-describedby') || '';
             }
@@ -44,7 +44,7 @@ function fieldObserver(fieldElement) {
             }
         }
         // Connect elements
-        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -62,10 +62,12 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (descriptionType === 'validation')
-                describedbyIds.unshift(el.id); // Validations to the front
-            else if (descriptionType)
-                describedbyIds.push(el.id); // Other descriptions to the back
+            if (!describedbyIds.includes(el.id)) {
+                if (descriptionType === 'validation')
+                    describedbyIds.unshift(el.id); // Validations to the front
+                else if (descriptionType)
+                    describedbyIds.push(el.id); // Other descriptions to the back
+            }
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

package/dist/cjs/components/field/field.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var fieldObserver = require('./field-observer.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var fieldObserver = require('./field-observer.js');
 
 /**
  * Field component, used to wrap a form field.

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

@@ -17,19 +17,19 @@ var fieldDescription = require('./field-description.js');
  *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
-const Field = Object.assign(field.Field, {
+const FieldComponent = Object.assign(field.Field, {
     Description: fieldDescription.FieldDescription,
     Affixes: fieldAffix.FieldAffixes,
     Affix: fieldAffix.FieldAffix,
     Counter: fieldCounter.FieldCounter,
 });
-Field.Description.displayName = 'Field.Description';
-Field.Affixes.displayName = 'Field.Affixes';
-Field.Affix.displayName = 'Field.Affix';
-Field.Counter.displayName = 'Field.Counter';
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
 
 exports.FieldAffix = fieldAffix.FieldAffix;
 exports.FieldAffixes = fieldAffix.FieldAffixes;
 exports.FieldCounter = fieldCounter.FieldCounter;
 exports.FieldDescription = fieldDescription.FieldDescription;
-exports.Field = Field;
+exports.Field = FieldComponent;

package/dist/cjs/components/fieldset/fieldset-description.js

@@ -9,9 +9,9 @@ var paragraph = require('../paragraph/paragraph.js');
  * FieldsetDescription component, used to display a description for a fieldset.
  *
  * @example
- * <Fieldset.Description>
+ * <FieldsetDescription>
  *   Gi en kort beskrivelse i begge feltene
- * </Fieldset.Description>
+ * </FieldsetDescription>
  */
 const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
     return jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest });

package/dist/cjs/components/fieldset/fieldset-legend.js

@@ -9,7 +9,7 @@ var label = require('../label/label.js');
  * FieldsetLegend component, used to display a legend for a fieldset.
  *
  * @example
- * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
  */
 const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
     return (jsxRuntime.jsx(label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));

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

@@ -20,13 +20,13 @@ var fieldsetLegend = require('./fieldset-legend.js');
  *   </Field>
  * </Fieldset>
  */
-const Fieldset = Object.assign(fieldset.Fieldset, {
+const FieldsetComponent = Object.assign(fieldset.Fieldset, {
     Legend: fieldsetLegend.FieldsetLegend,
     Description: fieldsetDescription.FieldsetDescription,
 });
-Fieldset.Legend.displayName = 'Fieldset.Legend';
-Fieldset.Description.displayName = 'Fieldset.Description';
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
 
 exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
 exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
-exports.Fieldset = Fieldset;
+exports.Fieldset = FieldsetComponent;

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

@@ -4,16 +4,16 @@
 var listItem = require('./list-item.js');
 var lists = require('./lists.js');
 
-const List = {
+const ListComponent = {
     Item: listItem.ListItem,
     Ordered: lists.ListOrdered,
     Unordered: lists.ListUnordered,
 };
-List.Item.displayName = 'List.Item';
-List.Ordered.displayName = 'List.Ordered';
-List.Unordered.displayName = 'List.Unordered';
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
 
 exports.ListItem = listItem.ListItem;
 exports.ListOrdered = lists.ListOrdered;
 exports.ListUnordered = lists.ListUnordered;
-exports.List = List;
+exports.List = ListComponent;

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

@@ -5,6 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
 const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'li';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });

package/dist/cjs/components/list/lists.js

@@ -15,10 +15,10 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
  * Renders a native `ul` element.
  *
  * @example
- * <List.Unordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Unordered>
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
  */
 const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
@@ -28,10 +28,10 @@ const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
  * Renders a native `ol` element.
  *
  * @example
- * <List.Ordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Ordered>
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
  */
 const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);

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

@@ -24,16 +24,16 @@ var paginationList = require('./pagination-list.js');
  *   </Pagination.List>
  * </Pagination>
  */
-const Pagination = Object.assign(pagination.Pagination, {
+const PaginationComponent = Object.assign(pagination.Pagination, {
     List: paginationList.PaginationList,
     Item: paginationItem.PaginationItem,
     Button: paginationButton.PaginationButton,
 });
-Pagination.List.displayName = 'Pagination.List';
-Pagination.Item.displayName = 'Pagination.Item';
-Pagination.Button.displayName = 'Pagination.Button';
+PaginationComponent.List.displayName = 'Pagination.List';
+PaginationComponent.Item.displayName = 'Pagination.Item';
+PaginationComponent.Button.displayName = 'Pagination.Button';
 
 exports.PaginationButton = paginationButton.PaginationButton;
 exports.PaginationItem = paginationItem.PaginationItem;
 exports.PaginationList = paginationList.PaginationList;
-exports.Pagination = Pagination;
+exports.Pagination = PaginationComponent;

package/dist/cjs/components/pagination/pagination-button.js

@@ -9,9 +9,9 @@ var button = require('../button/button.js');
  * PaginationButton component, use within a Pagination.Item.
  *
  * @example
- * <Pagination.Item>
- *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- * </Pagination.Item>
+ * <PaginationItem>
+ *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ * </PaginationItem>
  */
 const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
     return jsxRuntime.jsx(button.Button, { ref: ref, ...rest });

package/dist/cjs/components/pagination/pagination-item.js

@@ -9,11 +9,11 @@ var react = require('react');
  * PaginationItem component, use within a Pagination.List.
  *
  * @example
- * <Pagination.List>
- *   <Pagination.Item>
- *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination.List>
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
  */
 const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'li';

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

@@ -10,11 +10,11 @@ var react = require('react');
  *
  * @example
  * <Pagination>
- *   <Pagination.List>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *     </Pagination.Item>
- *   </Pagination.List>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
  * </Pagination>
  */
 const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {

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

@@ -16,13 +16,13 @@ var popoverTriggerContext = require('./popover-trigger-context.js');
  *   </Popover>
  * </Popover.TriggerContext>
  */
-const Popover = Object.assign(popover.Popover, {
+const PopoverComponent = Object.assign(popover.Popover, {
     TriggerContext: popoverTriggerContext.PopoverTriggerContext,
     Trigger: popoverTrigger.PopoverTrigger,
 });
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
 
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
 exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
-exports.Popover = Popover;
+exports.Popover = PopoverComponent;

package/dist/cjs/components/popover/popover-trigger-context.js

@@ -8,12 +8,12 @@ var react = require('react');
  * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = react.useId();

package/dist/cjs/components/popover/popover-trigger.js

@@ -11,22 +11,22 @@ var popoverTriggerContext = require('./popover-trigger-context.js');
  * PopoverTrigger component, used to trigger a popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  *
  * @example inline
- * <Popover.TriggerContext>
+ * <PopoverTriggerContext>
  *   <Paragraph>
- *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
  *   </Paragraph>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = react.useContext(popoverTriggerContext.Context);

package/dist/cjs/components/popover/popover.js

@@ -6,8 +6,8 @@ var dom = require('@floating-ui/dom');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var popoverTriggerContext = require('./popover-trigger-context.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
 
 /**
  * Popover component, used to display content in a popover over an element.
@@ -42,13 +42,15 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
             const isOutside = !isTrigger && !popover?.contains(el);
             if (isTrigger) {
                 event.preventDefault(); // Prevent native Popover API
-                setInternalOpen((open) => !open);
-                onOpen?.();
             }
-            if (isOutside) {
+            if (controlledOpen && (isTrigger || isOutside)) {
                 setInternalOpen(false);
                 onClose?.();
             }
+            else if (!controlledOpen && isTrigger) {
+                setInternalOpen(true);
+                onOpen?.();
+            }
         };
         const handleKeydown = (event) => {
             if (event.key !== 'Escape' || !controlledOpen)
@@ -86,7 +88,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
+                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
     }, [controlledOpen, placement, id, autoPlacement]);

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

@@ -22,16 +22,16 @@ var searchInput = require('./search-input.js');
  *   <Search.Clear />
  * </Search>
  */
-const Search = Object.assign(search.Search, {
+const SearchComponent = Object.assign(search.Search, {
     Clear: searchClear.SearchClear,
     Button: searchButton.SearchButton,
     Input: searchInput.SearchInput,
 });
-Search.Clear.displayName = 'Search.Clear';
-Search.Button.displayName = 'Search.Button';
-Search.Input.displayName = 'Search.Input';
+SearchComponent.Clear.displayName = 'Search.Clear';
+SearchComponent.Button.displayName = 'Search.Button';
+SearchComponent.Input.displayName = 'Search.Input';
 
 exports.SearchButton = searchButton.SearchButton;
 exports.SearchClear = searchClear.SearchClear;
 exports.SearchInput = searchInput.SearchInput;
-exports.Search = Search;
+exports.Search = SearchComponent;

package/dist/cjs/components/search/search-button.js

@@ -10,8 +10,8 @@ var button = require('../button/button.js');
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Button>Søk</Search.Button>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
  * </Search>
  */
 const SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {

package/dist/cjs/components/search/search-clear.js

@@ -11,8 +11,8 @@ var utilities = require('../Combobox/utilities.js');
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
  * </Search>
  */
 const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {

package/dist/cjs/components/search/search-input.js

@@ -10,7 +10,7 @@ var input = require('../input/input.js');
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
+ *   <SearchInput aria-label='Søk' />
  * </Search>
  */
 const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {

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

@@ -14,13 +14,13 @@ var selectOption = require('./select-option.js');
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = Object.assign(select.Select, {
+const SelectComponent = Object.assign(select.Select, {
     Option: selectOption.SelectOption,
     Optgroup: selectOptgroup.SelectOptgroup,
 });
-Select.Option.displayName = 'Select.Option';
-Select.Optgroup.displayName = 'Select.Optgroup';
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
 
 exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
 exports.SelectOption = selectOption.SelectOption;
-exports.Select = Select;
+exports.Select = SelectComponent;

package/dist/cjs/components/select/select-optgroup.js

@@ -10,10 +10,10 @@ var react = require('react');
  *
  * @example
  * <Select>
- *   <Select.Optgroup label='Group 1'>
- *     <Select.Option value='1'>Option 1</Select.Option>
- *     <Select.Option value='2'>Option 2</Select.Option>
- *   </Select.Optgroup>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
  * </Select>
  */
 const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

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

@@ -10,8 +10,8 @@ var react = require('react');
  *
  * @example
  * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
  * </Select>
  */
 const SelectOption = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {

package/dist/cjs/components/skeleton/skeleton.js

@@ -5,8 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.

package/dist/cjs/components/spinner/spinner.js

@@ -4,8 +4,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
 
 /**
  * Spinner component used for indicating busy or indeterminate loading.

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

@@ -2,7 +2,6 @@
 'use strict';
 
 var suggestion = require('./suggestion.js');
-var suggestionChips = require('./suggestion-chips.js');
 var suggestionClear = require('./suggestion-clear.js');
 var suggestionEmpty = require('./suggestion-empty.js');
 var suggestionInput = require('./suggestion-input.js');
@@ -24,7 +23,6 @@ var suggestionOption = require('./suggestion-option.js');
  * </Suggestion>
  */
 const EXPERIMENTAL_Suggestion = Object.assign(suggestion.Suggestion, {
-    Chips: suggestionChips.SuggestionChips,
     List: suggestionList.SuggestionList,
     Input: suggestionInput.SuggestionInput,
     Empty: suggestionEmpty.SuggestionEmpty,
@@ -32,14 +30,12 @@ const EXPERIMENTAL_Suggestion = Object.assign(suggestion.Suggestion, {
     Clear: suggestionClear.SuggestionClear,
 });
 EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
-EXPERIMENTAL_Suggestion.Chips.displayName = 'EXPERIMENTAL_Suggestion.Chips';
 EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
 EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
 EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
 EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
 EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
-exports.EXPERIMENTAL_SuggestionChips = suggestionChips.SuggestionChips;
 exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
 exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;

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

@@ -17,7 +17,7 @@ var button = require('../button/button.js');
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
     return (jsxRuntime.jsx(button.Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsxRuntime.jsx("del", {}) }));
 });