@digdir/designsystemet-react 1.0.0-next.15 → 1.0.0-next.17

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
@@ -11,7 +11,7 @@ import { forwardRef } from 'react';
  * <Ingress size='lg'>Ingress</Ingress>
  */
 const Ingress = forwardRef(({ size = 'md', className, spacing, asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    const Component = asChild ? Slot : 'p';
     return (jsx(Component, { ref: ref, className: clsx(`ds-ingress`, `ds-ingress--${size}`, spacing && 'ds-ingress--spacing', className), ...rest }));
 });
 Ingress.displayName = 'Ingress';

package/dist/esm/components/Typography/Label/Label.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
@@ -11,7 +11,7 @@ import { forwardRef } from 'react';
  * <Label size='lg'>Label</Label>
  */
 const Label = forwardRef(({ className, spacing, size = 'md', weight = 'medium', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'label';
+    const Component = asChild ? Slot : 'label';
     return (jsx(Component, { ref: ref, className: clsx('ds-label', `ds-label--${size}`, spacing && 'ds-label--spacing', weight && `ds-font-weight--${weight}`, className), ...rest }));
 });
 Label.displayName = 'Label';

package/dist/esm/components/Typography/Paragraph/Paragraph.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
@@ -16,7 +16,7 @@ const lineHeightMap = {
  * <Paragraph size='lg'>Paragraph</Paragraph>
  */
 const Paragraph = forwardRef(({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    const Component = asChild ? Slot : 'p';
     return (jsx(Component, { ref: ref, className: clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';

package/dist/esm/components/form/Checkbox/{Group/Group.js → CheckboxGroup.js}

@@ -1,7 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useState } from 'react';
-import { Fieldset } from '../../Fieldset/Fieldset.js';
+import { Fieldset } from '../Fieldset/Fieldset.js';
 
 const CheckboxGroupContext = createContext(null);
 const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, size = 'md', ...rest }, ref) => {
@@ -20,7 +21,7 @@ const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, default
                 value,
                 defaultValue,
                 toggleValue,
-            }, children: jsx("div", { className: 'ds-checkbox__group', children: children }) }) }));
+            }, children: jsx("div", { className: clsx('ds-checkbox__group', `ds-checkbox__group--${size}`), children: children }) }) }));
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
 

package/dist/esm/components/form/Checkbox/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { Checkbox as Checkbox$1 } from './Checkbox.js';
-import { CheckboxGroup } from './Group/Group.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
 
 /** `<input> element with `type="checkbox"` used for selecting one option */
 const Checkbox = Checkbox$1;

package/dist/esm/components/form/Checkbox/useCheckbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
-import { CheckboxGroupContext } from './Group/Group.js';
+import { CheckboxGroupContext } from './CheckboxGroup.js';
 
 /** Handles props for `Checkbox` in context with `Checkbox.Group` (and `Fieldset`) */
 const useCheckbox = (props) => {

package/dist/esm/components/form/Combobox/Combobox.js

@@ -15,7 +15,7 @@ import ComboboxNative from './internal/ComboboxNative.js';
 import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
-import { prefix, removePrefix } from './utilities.js';
+import { prefix, setReactInputValue, removePrefix } from './utilities.js';
 import { Box } from '../../Box/Box.js';
 import { Spinner } from '../../Spinner/Spinner.js';
 import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
@@ -27,6 +27,11 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     const listRef = useRef([]);
     const listId = useId();
     const [inputValue, setInputValue] = useState(rest.inputValue || '');
+    useEffect(() => {
+        if (typeof rest.inputValue === 'string') {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
     const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox({
         children,
         inputValue,
@@ -50,7 +55,8 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     useEffect(() => {
         if (value && value.length > 0 && !multiple) {
             const option = options[prefix(value[0])];
-            setInputValue(option?.label || '');
+            inputRef.current &&
+                setReactInputValue(inputRef.current, option?.label || '');
         }
     }, [multiple, value, options]);
     useEffect(() => {
@@ -70,7 +76,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         const { option, clear, remove } = args;
         if (clear) {
             setSelectedOptions({});
-            setInputValue('');
+            inputRef.current && setReactInputValue(inputRef.current, '');
             onValueChange?.([]);
             return;
         }
@@ -91,16 +97,17 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             else {
                 newSelectedOptions[prefix(option.value)] = option;
             }
-            setInputValue('');
+            inputRef.current && setReactInputValue(inputRef.current, '');
             inputRef.current?.focus();
         }
         else {
             /* clear newSelectedOptions */
-            Object.keys(newSelectedOptions).forEach((key) => {
+            for (const key of Object.keys(newSelectedOptions)) {
                 delete newSelectedOptions[key];
-            });
+            }
             newSelectedOptions[prefix(option.value)] = option;
-            setInputValue(option?.label || '');
+            inputRef.current &&
+                setReactInputValue(inputRef.current, option?.label || '');
             // move cursor to the end of the input
             setTimeout(() => {
                 inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);

package/dist/esm/components/form/Combobox/Custom.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
@@ -13,7 +13,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
     if (interactive && !id) {
         throw new Error('If ComboboxCustom is interactive, it must have an id');
     }
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    const Component = asChild ? Slot : 'div';
     const randomId = useId();
     const { activeIndex } = useComboboxId();
     const context = useContext(ComboboxContext);

package/dist/esm/components/form/Combobox/Option/Description.js

@@ -7,6 +7,5 @@ const ComboboxOptionDescription = forwardRef(({ children, className, ...rest },
     return (jsx("span", { className: clsx('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
-var ComboboxOptionDescription$1 = ComboboxOptionDescription;
 
-export { ComboboxOptionDescription$1 as default };
+export { ComboboxOptionDescription as default };

package/dist/esm/components/form/Combobox/internal/ComboboxChips.js

@@ -39,6 +39,5 @@ const ComboboxChips = () => {
         }) }));
 };
 ComboboxChips.displayName = 'ComboboxChips';
-var ComboboxChips$1 = ComboboxChips;
 
-export { ComboboxChips$1 as default };
+export { ComboboxChips as default };

package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js

@@ -29,6 +29,5 @@ const ComboboxClearButton = forwardRef((props, ref) => {
         }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 });
 ComboboxClearButton.displayName = 'ComboboxClearButton';
-var ComboboxClearButton$1 = ComboboxClearButton;
 
-export { ComboboxClearButton$1 as default };
+export { ComboboxClearButton as default };

package/dist/esm/components/form/Combobox/internal/ComboboxError.js

@@ -6,6 +6,5 @@ const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
-var ComboboxError$1 = ComboboxError;
 
-export { ComboboxError$1 as default };
+export { ComboboxError as default };

package/dist/esm/components/form/Combobox/internal/ComboboxInput.js

@@ -31,14 +31,14 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         setInputValue(value);
         setActiveIndex(0);
         // check if input value is the same as a label, if so, select it
-        Object.values(options).forEach((option) => {
+        for (const option of Object.values(options)) {
             if (option.label.toLowerCase() === value.toLowerCase()) {
                 /* if option is already selected, discard selecting it, since it would de-select */
                 if (selectedOptions[prefix(option.value)])
-                    return;
-                handleSelectOption({ option: option });
+                    continue;
+                handleSelectOption({ option });
             }
-        });
+        }
     };
     const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
@@ -76,6 +76,5 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
                                 } }) })] }), showClearButton && jsx(ComboboxClearButton, { ref: clearButtonRef }), jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
-var ComboboxInput$1 = ComboboxInput;
 
-export { ComboboxInput$1 as default };
+export { ComboboxInput as default };

package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js

@@ -9,6 +9,5 @@ const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFiel
     return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
-var ComboboxLabel$1 = ComboboxLabel;
 
-export { ComboboxLabel$1 as default };
+export { ComboboxLabel as default };

package/dist/esm/components/form/Combobox/internal/ComboboxNative.js

@@ -7,6 +7,5 @@ const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
     return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsx("option", { value: value }, value))) }));
 };
 ComboboxNative.displayName = 'ComboboxNative';
-var ComboboxNative$1 = ComboboxNative;
 
-export { ComboboxNative$1 as default };
+export { ComboboxNative as default };

package/dist/esm/components/form/Combobox/useCombobox.js

@@ -34,6 +34,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return result;
     }, [children]);
     const options = useMemo(() => {
+        const values = [];
         const allOptions = {};
         optionsChildren.map((child) => {
             const props = child.props;
@@ -51,6 +52,10 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 });
                 label = childrenLabel;
             }
+            if (values.includes(props.value)) {
+                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+            }
+            values.push(props.value);
             allOptions[prefix(String(props.value))] = {
                 value: String(props.value),
                 label,

package/dist/esm/components/form/Combobox/useFloatingCombobox.js

@@ -3,8 +3,8 @@ import { useFloating, useRole, useDismiss, useListNavigation, useInteractions }
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
-import { autoUpdate, flip, size } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { autoUpdate } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { flip, size, offset } from '../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const useFloatingCombobox = ({ listRef }) => {
     const [open, setOpen] = useState(false);

package/dist/esm/components/form/Combobox/utilities.js

@@ -24,5 +24,15 @@ const prefix = (value) => {
 const removePrefix = (value) => {
     return value.slice(INTERNAL_OPTION_PREFIX.length);
 };
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
 
-export { isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix };
+export { isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };

package/dist/esm/components/form/NativeSelect/NativeSelect.js

@@ -11,8 +11,8 @@ import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const NativeSelect = forwardRef((props, ref) => {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly = false, size = 'md', } = useNativeSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-native-select__wrapper', children: jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useNativeSelect(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-native-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
 });
 NativeSelect.displayName = 'NativeSelect';
 

package/dist/esm/components/form/NativeSelect/useNativeSelect.js

@@ -6,7 +6,7 @@ import { useFormField } from '../useFormField.js';
 /** Handles props for `NativeSelect` in context with `Fieldset` */
 const useNativeSelect = (props) => {
     const fieldset = useContext(FieldsetContext);
-    const { inputProps: selectProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
+    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
     return {
         ...rest,
         readOnly,
@@ -21,6 +21,24 @@ const useNativeSelect = (props) => {
                 }
                 props?.onClick?.(e);
             },
+            onKeyDown: (e) => {
+                if (readOnly) {
+                    if (e.key === 'Tab')
+                        return;
+                    e.preventDefault();
+                    return;
+                }
+                props?.onKeyDown?.(e);
+            },
+            onMouseDown: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    if (e.target instanceof HTMLElement)
+                        e.target.focus();
+                    return;
+                }
+                props?.onMouseDown?.(e);
+            },
             onChange: (e) => {
                 if (readOnly) {
                     e.preventDefault();

package/dist/esm/components/form/Radio/{Group/Group.js → RadioGroup.js}

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useId } from 'react';
-import { Fieldset } from '../../Fieldset/Fieldset.js';
+import { Fieldset } from '../Fieldset/Fieldset.js';
 
 const RadioGroupContext = createContext(null);
 const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
@@ -13,7 +13,7 @@ const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultVal
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsx("div", { className: clsx('ds-radio-group', inline && 'ds-radio-group--horizontal'), children: children }) }) }));
+            }, children: jsx("div", { className: clsx('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

package/dist/esm/components/form/Radio/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { Radio as Radio$1 } from './Radio.js';
-import { RadioGroup } from './Group/Group.js';
+import { RadioGroup } from './RadioGroup.js';
 
 /** `<input> element with `type="radio"` used for selecting one option */
 const Radio = Radio$1;

package/dist/esm/components/form/Radio/useRadio.js

@@ -1,7 +1,7 @@
 'use client';
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
-import { RadioGroupContext } from './Group/Group.js';
+import { RadioGroupContext } from './RadioGroup.js';
 
 /** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
 const useRadio = (props) => {

package/dist/esm/components/form/Switch/useSwitch.js

@@ -1,7 +1,7 @@
 'use client';
 import { useContext } from 'react';
+import { CheckboxGroupContext } from '../Checkbox/CheckboxGroup.js';
 import { useFormField } from '../useFormField.js';
-import { CheckboxGroupContext } from '../Checkbox/Group/Group.js';
 
 /** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
 const useSwitch = (props) => {

package/dist/esm/index.js

@@ -7,6 +7,13 @@ export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
 export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
 export { omit } from './utilities/omit/omit.js';
 export { Button } from './components/Button/Button.js';
+export { Badge } from './components/Badge/Badge.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { BreadcrumbsRoot } from './components/Breadcrumbs/BreadcrumbsRoot.js';
+export { BreadcrumbsNav } from './components/Breadcrumbs/BreadcrumbsNav.js';
+export { BreadcrumbsList } from './components/Breadcrumbs/BreadcrumbsList.js';
+export { BreadcrumbsItem } from './components/Breadcrumbs/BreadcrumbsItem.js';
+export { BreadcrumbsLink } from './components/Breadcrumbs/BreadcrumbsLink.js';
 export { HelpText } from './components/HelpText/HelpText.js';
 export { Spinner } from './components/Spinner/Spinner.js';
 export { Link } from './components/Link/Link.js';
@@ -43,9 +50,9 @@ export { PaginationNext, PaginationPrevious } from './components/Pagination/Pagi
 export { SkipLink } from './components/SkipLink/SkipLink.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 export { Checkbox } from './components/form/Checkbox/index.js';
-export { CheckboxGroup } from './components/form/Checkbox/Group/Group.js';
+export { CheckboxGroup } from './components/form/Checkbox/CheckboxGroup.js';
 export { Radio } from './components/form/Radio/index.js';
-export { RadioGroup } from './components/form/Radio/Group/Group.js';
+export { RadioGroup } from './components/form/Radio/RadioGroup.js';
 export { Fieldset } from './components/form/Fieldset/Fieldset.js';
 export { Switch } from './components/form/Switch/Switch.js';
 export { Textfield } from './components/form/Textfield/Textfield.js';
@@ -64,6 +71,7 @@ export { PopoverContent } from './components/Popover/PopoverContent.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Modal } from './components/Modal/index.js';
+export { ModalRoot } from './components/Modal/ModalRoot.js';
 export { ModalContent } from './components/Modal/ModaContent.js';
 export { ModalFooter } from './components/Modal/ModalFooter.js';
 export { ModalHeader } from './components/Modal/ModalHeader.js';

package/dist/esm/node_modules/@floating-ui/core/dist/floating-ui.core.js

@@ -1,5 +1,5 @@
 'use client';
-import { evaluate, getSide, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, getAlignment, getSideAxis, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getOppositeAxis, getAxisLength, min, max } from '../../utils/dist/floating-ui.utils.js';
+import { evaluate, getSide, getSideAxis, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getAlignment, getOppositeAxis, getAxisLength, min, max } from '../../utils/dist/floating-ui.utils.js';
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
@@ -186,9 +186,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -335,10 +336,12 @@ const flip = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -384,8 +387,17 @@ const flip = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -425,6 +437,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -607,16 +621,16 @@ const size = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
         availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
         availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
       if (noShift && !alignment) {