@digdir/designsystemet-react 1.18.0 → 1.19.1

package/dist/cjs/components/divider/divider.js

@@ -12,9 +12,7 @@ var react = require('react');
  * <Divider />
  */
 const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
-    return (
-    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
 
 exports.Divider = Divider;

package/dist/cjs/components/file-upload/file-upload.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <Field>
+ *  <Label>Upload file</Label>
+ *  <FileUpload>
+ *    <CloudUpIcon aria-hidden='true' />
+ *    <Field.Description>Drop file here</Field.Description>
+ *    <Field.Description>
+ *      File must be in csv format and less than 2MB
+ *    </Field.Description>
+ *    <Button asChild data-variant='secondary'>
+ *      <span>Upload file</span>
+ *    </Button>
+ *    <input type="file" />
+ *  </FileUpload>
+ * </Field>
+ */
+const FileUpload = react.forwardRef(function FileUpload({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { ref: ref, className: cl('ds-file-upload', className), ...rest }));
+});
+
+exports.FileUpload = FileUpload;

package/dist/cjs/components/file-upload/index.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var fileUpload = require('./file-upload.js');
+
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <Field>
+ *  <Label>Upload file</Label>
+ *  <FileUpload>
+ *    <CloudUpIcon aria-hidden='true' />
+ *    <Field.Description>Drop file here</Field.Description>
+ *    <Field.Description>
+ *      File must be in csv format and less than 2MB
+ *    </Field.Description>
+ *    <Button asChild data-variant='secondary'>
+ *      <span>Upload file</span>
+ *    </Button>
+ *    <input type="file" />
+ *  </FileUpload>
+ * </Field>
+ */
+const EXPERIMENTAL_FileUpload = fileUpload.FileUpload;
+
+exports.EXPERIMENTAL_FileUpload = EXPERIMENTAL_FileUpload;

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

@@ -6,10 +6,6 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const render = (tagName, { asChild, className, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : tagName;
-    return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
-};
 /**
  * ListUnordered component, used to display a list of items.
  * Renders a native `ul` element.
@@ -20,8 +16,9 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
  *   <ListItem>Item 2</ListItem>
  * </ListUnordered>
  */
-const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
-    return render('ul', props, ref);
+const ListUnordered = react.forwardRef(function ListUnordered({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ul';
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
 });
 /**
  * ListOrdered component, used to display a list of items.
@@ -33,8 +30,9 @@ const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
  *   <ListItem>Item 2</ListItem>
  * </ListOrdered>
  */
-const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
-    return render('ol', props, ref);
+const ListOrdered = react.forwardRef(function ListOrdered({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ol';
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
 });
 
 exports.ListOrdered = ListOrdered;

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

@@ -9,6 +9,7 @@ require('@digdir/designsystemet-web');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 var popoverTriggerContext = require('./popover-trigger-context.js');
 
+const IS_DROPDOWN = /(?:^|\s)ds-dropdown(?:\s|$)/;
 /**
  * Popover component, used to display content in a popover over an element.
  *
@@ -26,7 +27,7 @@ var popoverTriggerContext = require('./popover-trigger-context.js');
  *   Content
  * </Popover>
  */
-const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, variant, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = react.forwardRef(function Popover({ id, className = '', onClose, onOpen, open, variant, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);
     const mergedRefs = useMergeRefs.useMergeRefs([popoverRef, ref]);
@@ -61,10 +62,12 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
             }
         };
         popover?.togglePopover?.(controlledOpen);
-        if (controlledOpen) {
-            const options = { detail: document.querySelector(trigger) };
-            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
-        }
+        if (controlledOpen)
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', {
+                bubbles: true,
+                composed: true, // Enable bubbling out of shadow DOM boundaries
+                detail: document.querySelector(trigger), // Since togglePopover({ source }) is not supported in all browsers yet
+            }));
         document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
         document.addEventListener('keydown', handleKeydown);
         return () => {
@@ -77,7 +80,9 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+    return (jsxRuntime.jsx(Component, { className: 
+        // Prevent double className when using Dropdown component
+        cl(IS_DROPDOWN.test(className) ? undefined : 'ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
         : true, ...rest }));
 });
 // NOTE: This is not able to check if the popover is the most recently added #topLayer,

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

@@ -7,6 +7,7 @@ var suggestionEmpty = require('./suggestion-empty.js');
 var suggestionInput = require('./suggestion-input.js');
 var suggestionList = require('./suggestion-list.js');
 var suggestionOption = require('./suggestion-option.js');
+var suggestionToggle = require('./suggestion-toggle.js');
 
 /**
  * A component that provides a suggestion list for an input field.
@@ -14,6 +15,7 @@ var suggestionOption = require('./suggestion-option.js');
  * @example
  * <Suggestion>
  *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
  *   <Suggestion.Clear />
  *   <Suggestion.List>
  *     <Suggestion.Empty>Tomt</Suggestion.Empty>
@@ -27,6 +29,7 @@ const EXPERIMENTAL_Suggestion = Object.assign(suggestion.Suggestion, {
     Input: suggestionInput.SuggestionInput,
     Empty: suggestionEmpty.SuggestionEmpty,
     Option: suggestionOption.SuggestionOption,
+    Toggle: suggestionToggle.SuggestionToggle,
     Clear: suggestionClear.SuggestionClear,
 });
 EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
@@ -34,6 +37,7 @@ 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.Toggle.displayName = 'EXPERIMENTAL_Suggestion.Toggle';
 EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
 exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
@@ -41,4 +45,5 @@ exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
 exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
 exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
+exports.EXPERIMENTAL_SuggestionToggle = suggestionToggle.SuggestionToggle;
 exports.EXPERIMENTAL_Suggestion = EXPERIMENTAL_Suggestion;

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

@@ -12,6 +12,7 @@ var react = require('react');
  * @example
  * <Suggestion>
  *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
  *   <Suggestion.Clear />
  *   <Suggestion.List />
  * </Suggestion>

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

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var suggestion = require('./suggestion.js');
 require('@digdir/designsystemet-web');
 
 /**
@@ -17,9 +16,8 @@ require('@digdir/designsystemet-web');
  * </Suggestion.List>
  */
 const SuggestionEmpty = react.forwardRef(function SuggestionEmpty(rest, ref) {
-    const { isEmpty } = react.useContext(suggestion.SuggestionContext);
-    return isEmpty ? (jsxRuntime.jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
-        : true, value: '', ...rest })) : null;
+    return (jsxRuntime.jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, ...rest }));
 });
 
 exports.SuggestionEmpty = SuggestionEmpty;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Component that provides a toggle button for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionToggle = react.forwardRef(function SuggestionToggle({ 'aria-label': label = 'Valg', ...rest }, ref) {
+    return (jsxRuntime.jsx("button", { "aria-expanded": 'false', "aria-label": label, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, type: 'button', ...rest }));
+});
+
+exports.SuggestionToggle = SuggestionToggle;

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

@@ -28,7 +28,6 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
     const selectId = rest.id ? `${rest.id}-select` : genId;
     const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs.useMergeRefs([ref, dsSuggestionRef]);
-    const [isEmpty, setIsEmpty] = react.useState(false);
     const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
     const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     const onSelectedChangeRef = react.useRef(onSelectedChange);
@@ -72,7 +71,7 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
         const filterFn = filter === true ? defaultFilter : filter;
         let disabled = 0;
         let index = 0;
-        for (const option of options)
+        for (const option of Array.from(options))
             if (!option.hasAttribute('data-empty')) {
                 if (filterFn && input)
                     option.disabled =
@@ -86,9 +85,8 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
                         }) && Boolean(++disabled);
                 index++; // Increment index for each <option>
             }
-        setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, dsSuggestionRef }, children: jsxRuntime.jsxs("ds-suggestion", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { handleFilter, dsSuggestionRef }, children: jsxRuntime.jsxs("ds-suggestion", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, suppressHydrationWarning // Since <ds-suggestion> adds attributes
             : true, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx("data", { value: item.value, children: renderSelected(item) }, item.value))), children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 const SuggestionContext = react.createContext({

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

@@ -20,8 +20,8 @@ var fieldAffix = require('../field/field-affix.js');
  * @example
  * <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 })] }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+const Textfield = react.forwardRef(function Textfield({ label: label$1, description, error, multiline, prefix, suffix, 'data-color': color, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-color": color, "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

@@ -8,7 +8,7 @@ var toggleGroupItem = require('./toggle-group-item.js');
  * Display a group of buttons that can be toggled between.
  *
  * @example
- * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>

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

@@ -16,8 +16,8 @@ const ToggleGroupItem = react.forwardRef(function ToggleGroupItem({ className, c
     const toggleGroup$1 = react.useContext(toggleGroup.ToggleGroupContext);
     const value = rawValue ?? genValue;
     const active = toggleGroup$1.value === value;
-    const { 'aria-disabled': ariaDisabled, disabled, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
-    return (jsxRuntime.jsxs("label", { ref: ref, ...labelProps, className: cl('ds-button', className), "data-variant": 'tertiary', "aria-disabled": ariaDisabled ?? disabled, children: [jsxRuntime.jsx("input", { "aria-disabled": ariaDisabled, checked: active, disabled: disabled, form: form, formAction: formAction, formEncType: formEncType, formMethod: formMethod, formNoValidate: formNoValidate, formTarget: formTarget, name: toggleGroup$1.name, onChange: () => toggleGroup$1.onChange?.(value), required: required, type: 'radio', value: value }), children] }));
+    const { 'aria-disabled': ariaDisabled, disabled, readOnly, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
+    return (jsxRuntime.jsxs("label", { ref: ref, ...labelProps, className: cl('ds-button', className), "data-variant": 'tertiary', "aria-disabled": ariaDisabled ?? disabled, children: [jsxRuntime.jsx("input", { "aria-disabled": ariaDisabled, checked: active, disabled: disabled, readOnly: readOnly, form: form, formAction: formAction, formEncType: formEncType, formMethod: formMethod, formNoValidate: formNoValidate, formTarget: formTarget, name: toggleGroup$1.name, onChange: () => toggleGroup$1.onChange?.(value), required: required, type: 'radio', value: value }), children] }));
 });
 
 exports.ToggleGroupItem = ToggleGroupItem;

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

@@ -10,13 +10,13 @@ const ToggleGroupContext = react.createContext({});
  * Display a group of buttons that can be toggled between.
  *
  * @example
- * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = react.forwardRef(function ToggleGroup({ children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
+const ToggleGroup = react.forwardRef(function ToggleGroup({ 'data-toggle-group': label, children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
     const nameId = react.useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -34,9 +34,8 @@ const ToggleGroup = react.forwardRef(function ToggleGroup({ children, className,
             onChange: onValueChange,
             value,
             variant,
-        }, children: jsxRuntime.jsx("fieldset", { className: cl('ds-toggle-group', className), "data-toggle-group": '' // Default to empty string to ensure attribute is present
-            , "data-variant": variant, suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
-            : true, ref: ref, ...rest, children: children }) }));
+        }, children: jsxRuntime.jsx("fieldset", { "aria-label": label, className: cl('ds-toggle-group', className), "data-variant": variant, focusgroup: 'radiogroup', ref: ref, suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+            : true, ...rest, children: children }) }));
 });
 
 exports.ToggleGroup = ToggleGroup;

package/dist/cjs/index.js

@@ -16,31 +16,32 @@ var index$5 = require('./components/details/index.js');
 var index$6 = require('./components/dialog/index.js');
 var divider = require('./components/divider/divider.js');
 var index$7 = require('./components/dropdown/index.js');
-var index$9 = require('./components/error-summary/index.js');
-var index$a = require('./components/field/index.js');
-var index$b = require('./components/fieldset/index.js');
+var index$a = require('./components/error-summary/index.js');
+var index$b = require('./components/field/index.js');
+var index$c = require('./components/fieldset/index.js');
+var index$8 = require('./components/file-upload/index.js');
 var heading = require('./components/heading/heading.js');
 var input = require('./components/input/input.js');
 var label = require('./components/label/label.js');
 var link = require('./components/link/link.js');
-var index$c = require('./components/list/index.js');
-var index$d = require('./components/pagination/index.js');
+var index$d = require('./components/list/index.js');
+var index$e = require('./components/pagination/index.js');
 var paragraph = require('./components/paragraph/paragraph.js');
-var index$e = require('./components/popover/index.js');
+var index$f = require('./components/popover/index.js');
 var radio = require('./components/radio/radio.js');
-var index$f = require('./components/search/index.js');
-var index$g = require('./components/select/index.js');
+var index$g = require('./components/search/index.js');
+var index$h = require('./components/select/index.js');
 var skeleton = require('./components/skeleton/skeleton.js');
 var skipLink = require('./components/skip-link/skip-link.js');
 var spinner = require('./components/spinner/spinner.js');
-var index$8 = require('./components/suggestion/index.js');
+var index$9 = require('./components/suggestion/index.js');
 var _switch = require('./components/switch/switch.js');
-var index$h = require('./components/table/index.js');
-var index$i = require('./components/tabs/index.js');
+var index$i = require('./components/table/index.js');
+var index$j = require('./components/tabs/index.js');
 var tag = require('./components/tag/tag.js');
 var textarea = require('./components/textarea/textarea.js');
 var textfield = require('./components/textfield/textfield.js');
-var index$j = require('./components/toggle-group/index.js');
+var index$k = require('./components/toggle-group/index.js');
 var tooltip = require('./components/tooltip/tooltip.js');
 var validationMessage = require('./components/validation-message/validation-message.js');
 var omit = require('./components/Combobox/omit/omit.js');
@@ -78,6 +79,7 @@ var suggestionEmpty = require('./components/suggestion/suggestion-empty.js');
 var suggestionInput = require('./components/suggestion/suggestion-input.js');
 var suggestionList = require('./components/suggestion/suggestion-list.js');
 var suggestionOption = require('./components/suggestion/suggestion-option.js');
+var suggestionToggle = require('./components/suggestion/suggestion-toggle.js');
 var errorSummaryHeading = require('./components/error-summary/error-summary-heading.js');
 var errorSummaryItem = require('./components/error-summary/error-summary-item.js');
 var errorSummaryLink = require('./components/error-summary/error-summary-link.js');
@@ -126,31 +128,32 @@ exports.Details = index$5.Details;
 exports.Dialog = index$6.Dialog;
 exports.Divider = divider.Divider;
 exports.Dropdown = index$7.Dropdown;
-exports.ErrorSummary = index$9.ErrorSummary;
-exports.Field = index$a.Field;
-exports.Fieldset = index$b.Fieldset;
+exports.ErrorSummary = index$a.ErrorSummary;
+exports.Field = index$b.Field;
+exports.Fieldset = index$c.Fieldset;
+exports.EXPERIMENTAL_FileUpload = index$8.EXPERIMENTAL_FileUpload;
 exports.Heading = heading.Heading;
 exports.Input = input.Input;
 exports.Label = label.Label;
 exports.Link = link.Link;
-exports.List = index$c.List;
-exports.Pagination = index$d.Pagination;
+exports.List = index$d.List;
+exports.Pagination = index$e.Pagination;
 exports.Paragraph = paragraph.Paragraph;
-exports.Popover = index$e.Popover;
+exports.Popover = index$f.Popover;
 exports.Radio = radio.Radio;
-exports.Search = index$f.Search;
-exports.Select = index$g.Select;
+exports.Search = index$g.Search;
+exports.Select = index$h.Select;
 exports.Skeleton = skeleton.Skeleton;
 exports.SkipLink = skipLink.SkipLink;
 exports.Spinner = spinner.Spinner;
-exports.EXPERIMENTAL_Suggestion = index$8.EXPERIMENTAL_Suggestion;
+exports.EXPERIMENTAL_Suggestion = index$9.EXPERIMENTAL_Suggestion;
 exports.Switch = _switch.Switch;
-exports.Table = index$h.Table;
-exports.Tabs = index$i.Tabs;
+exports.Table = index$i.Table;
+exports.Tabs = index$j.Tabs;
 exports.Tag = tag.Tag;
 exports.Textarea = textarea.Textarea;
 exports.Textfield = textfield.Textfield;
-exports.ToggleGroup = index$j.ToggleGroup;
+exports.ToggleGroup = index$k.ToggleGroup;
 exports.Tooltip = tooltip.Tooltip;
 exports.ValidationMessage = validationMessage.ValidationMessage;
 exports.omit = omit.omit;
@@ -190,6 +193,7 @@ exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
 exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
 exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
+exports.EXPERIMENTAL_SuggestionToggle = suggestionToggle.SuggestionToggle;
 exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;

package/dist/esm/components/divider/divider.js

@@ -10,9 +10,7 @@ import { forwardRef } from 'react';
  * <Divider />
  */
 const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
-    return (
-    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-    jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
+    return (jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
 
 export { Divider };

package/dist/esm/components/file-upload/file-upload.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <Field>
+ *  <Label>Upload file</Label>
+ *  <FileUpload>
+ *    <CloudUpIcon aria-hidden='true' />
+ *    <Field.Description>Drop file here</Field.Description>
+ *    <Field.Description>
+ *      File must be in csv format and less than 2MB
+ *    </Field.Description>
+ *    <Button asChild data-variant='secondary'>
+ *      <span>Upload file</span>
+ *    </Button>
+ *    <input type="file" />
+ *  </FileUpload>
+ * </Field>
+ */
+const FileUpload = forwardRef(function FileUpload({ className, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cl('ds-file-upload', className), ...rest }));
+});
+
+export { FileUpload };

package/dist/esm/components/file-upload/index.js

@@ -0,0 +1,25 @@
+'use client';
+import { FileUpload } from './file-upload.js';
+
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <Field>
+ *  <Label>Upload file</Label>
+ *  <FileUpload>
+ *    <CloudUpIcon aria-hidden='true' />
+ *    <Field.Description>Drop file here</Field.Description>
+ *    <Field.Description>
+ *      File must be in csv format and less than 2MB
+ *    </Field.Description>
+ *    <Button asChild data-variant='secondary'>
+ *      <span>Upload file</span>
+ *    </Button>
+ *    <input type="file" />
+ *  </FileUpload>
+ * </Field>
+ */
+const EXPERIMENTAL_FileUpload = FileUpload;
+
+export { EXPERIMENTAL_FileUpload };

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

@@ -4,10 +4,6 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-const render = (tagName, { asChild, className, ...rest }, ref) => {
-    const Component = asChild ? Slot : tagName;
-    return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
-};
 /**
  * ListUnordered component, used to display a list of items.
  * Renders a native `ul` element.
@@ -18,8 +14,9 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
  *   <ListItem>Item 2</ListItem>
  * </ListUnordered>
  */
-const ListUnordered = forwardRef(function ListUnordered(props, ref) {
-    return render('ul', props, ref);
+const ListUnordered = forwardRef(function ListUnordered({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ul';
+    return (jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
 });
 /**
  * ListOrdered component, used to display a list of items.
@@ -31,8 +28,9 @@ const ListUnordered = forwardRef(function ListUnordered(props, ref) {
  *   <ListItem>Item 2</ListItem>
  * </ListOrdered>
  */
-const ListOrdered = forwardRef(function ListOrdered(props, ref) {
-    return render('ol', props, ref);
+const ListOrdered = forwardRef(function ListOrdered({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ol';
+    return (jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
 });
 
 export { ListOrdered, ListUnordered };

package/dist/esm/components/popover/popover.js

@@ -7,6 +7,7 @@ import '@digdir/designsystemet-web';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { Context } from './popover-trigger-context.js';
 
+const IS_DROPDOWN = /(?:^|\s)ds-dropdown(?:\s|$)/;
 /**
  * Popover component, used to display content in a popover over an element.
  *
@@ -24,7 +25,7 @@ import { Context } from './popover-trigger-context.js';
  *   Content
  * </Popover>
  */
-const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, variant, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = forwardRef(function Popover({ id, className = '', onClose, onOpen, open, variant, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);
     const mergedRefs = useMergeRefs([popoverRef, ref]);
@@ -59,10 +60,12 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
             }
         };
         popover?.togglePopover?.(controlledOpen);
-        if (controlledOpen) {
-            const options = { detail: document.querySelector(trigger) };
-            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
-        }
+        if (controlledOpen)
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', {
+                bubbles: true,
+                composed: true, // Enable bubbling out of shadow DOM boundaries
+                detail: document.querySelector(trigger), // Since togglePopover({ source }) is not supported in all browsers yet
+            }));
         document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
         document.addEventListener('keydown', handleKeydown);
         return () => {
@@ -75,7 +78,9 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+    return (jsx(Component, { className: 
+        // Prevent double className when using Dropdown component
+        cl(IS_DROPDOWN.test(className) ? undefined : 'ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
         : true, ...rest }));
 });
 // NOTE: This is not able to check if the popover is the most recently added #topLayer,

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

@@ -5,6 +5,7 @@ import { SuggestionEmpty } from './suggestion-empty.js';
 import { SuggestionInput } from './suggestion-input.js';
 import { SuggestionList } from './suggestion-list.js';
 import { SuggestionOption } from './suggestion-option.js';
+import { SuggestionToggle } from './suggestion-toggle.js';
 
 /**
  * A component that provides a suggestion list for an input field.
@@ -12,6 +13,7 @@ import { SuggestionOption } from './suggestion-option.js';
  * @example
  * <Suggestion>
  *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
  *   <Suggestion.Clear />
  *   <Suggestion.List>
  *     <Suggestion.Empty>Tomt</Suggestion.Empty>
@@ -25,6 +27,7 @@ const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
     Input: SuggestionInput,
     Empty: SuggestionEmpty,
     Option: SuggestionOption,
+    Toggle: SuggestionToggle,
     Clear: SuggestionClear,
 });
 EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
@@ -32,6 +35,7 @@ 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.Toggle.displayName = 'EXPERIMENTAL_Suggestion.Toggle';
 EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
-export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionToggle as EXPERIMENTAL_SuggestionToggle };