@digdir/designsystemet-react 1.9.0 → 1.11.0

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useReducer, createContext, useContext } from 'react';
+import { createContext, useContext, useReducer } from 'react';
 
 const ComboboxIdContext = createContext({
     activeIndex: 0,

package/dist/esm/components/Combobox/Option/useComboboxOption.js

@@ -1,10 +1,12 @@
 'use client';
 import { useMergeRefs } from '@floating-ui/react';
 import { useId, useContext, useMemo, useEffect } from 'react';
+import { useDebounceCallback } from '../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '../../../utilities/roving-focus/roving-focus-item.js';
+import '../../../utilities/roving-focus/roving-focus-root.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
-import { useDebounceCallback } from '../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 
 const useComboboxOption = ({ id, ref, value, }) => {
     const generatedId = useId();

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

@@ -1,6 +1,9 @@
 'use client';
-import { useComboboxId } from './ComboboxIdContext.js';
 import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import 'react';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
+import { useComboboxId } from './ComboboxIdContext.js';
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = useComboboxId();

package/dist/esm/components/avatar/avatar.js

@@ -20,11 +20,12 @@ import { forwardRef, Fragment } from 'react';
  *  <Icon />
  * </Avatar>
  */
-const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
+    const OuterComponent = asChild ? Slot : 'span';
     const useSlot = children && typeof children !== 'string';
     const textChild = children && typeof children === 'string';
     const Component = useSlot ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
+    return (jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
 });
 
 export { Avatar };

package/dist/esm/components/avatar-stack/avatar-stack.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, Children } from 'react';
+
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
+    const style = {
+        ...(rest.style || {}),
+        '--dsc-avatar-stack-gap': gap !== undefined ? `${gap}` : undefined,
+        '--dsc-avatar-stack-size': avatarSize ? `${avatarSize}` : undefined,
+        '--dsc-avatar-stack-overlap': overlap !== undefined ? `${overlap}` : undefined,
+        '--dsc-avatar-count': expandable === 'fixed' ? Children.count(children) : undefined,
+    };
+    return (jsx("figure", { tabIndex: rest.tabIndex !== undefined ? rest.tabIndex : expandable ? 0 : -1, ref: ref, className: cl(`ds-avatar-stack`, className), style: style, "data-expandable": expandable, "data-suffix": suffix, ...rest, children: children }));
+});
+
+export { EXPERIMENTAL_AvatarStack };

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

@@ -1,5 +1,5 @@
 'use client';
-import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './chips.js';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips.js';
 
 const ChipComponent = {
     Button: ChipButton,

package/dist/esm/components/details/details.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
-import '@u-elements/u-details';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@u-elements/u-details';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.

package/dist/esm/components/dialog/dialog.js

@@ -3,9 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { Button } from '../button/button.js';
 import { Context } from './dialog-trigger-context.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * Dialog component, used to display a dialog dialog.

package/dist/esm/components/error-summary/error-summary.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useId, useState } from 'react';
+import { createContext, forwardRef, useId, useState } from 'react';
 
 const ErrorSummaryContext = createContext({
     headingId: 'heading',

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

@@ -1,10 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 import { Paragraph } from '../paragraph/paragraph.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
 import { isInputLike } from './field-observer.js';
-import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 /**

package/dist/esm/components/field/field.js

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
-import { fieldObserver } from './field-observer.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { fieldObserver } from './field-observer.js';
 
 /**
  * Field component, used to wrap a form field.

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

@@ -1,6 +1,6 @@
 'use client';
 import { ListItem } from './list-item.js';
-import { ListUnordered, ListOrdered } from './lists.js';
+import { ListOrdered, ListUnordered } from './lists.js';
 
 const ListComponent = {
     Item: ListItem,

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

@@ -4,8 +4,8 @@ import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/d
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import { Context } from './popover-trigger-context.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './popover-trigger-context.js';
 
 /**
  * Popover component, used to display content in a popover over an element.

package/dist/esm/components/skeleton/skeleton.js

@@ -3,8 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.

package/dist/esm/components/spinner/spinner.js

@@ -2,8 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Spinner component used for indicating busy or indeterminate loading.

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
-import { autoUpdate, computePosition } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
 import { SuggestionContext } from './suggestion.js';
 
 /**
@@ -16,7 +16,7 @@ import { SuggestionContext } from './suggestion.js';
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
     const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
     // Position with floating-ui
@@ -28,9 +28,22 @@ const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forsl
                 computePosition(trigger, list, {
                     placement: 'bottom',
                     strategy: 'fixed',
-                    middleware: [triggerWidth],
-                }).then(({ x, y }) => {
-                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px + var(--dsc-suggestion-list-gap))`;
+                    middleware: [
+                        ...(autoPlacement
+                            ? [
+                                flip({
+                                    fallbackAxisSideDirection: 'start',
+                                    fallbackPlacements: ['top'],
+                                }),
+                                shift(),
+                            ]
+                            : []),
+                        undefined,
+                        triggerWidth,
+                    ],
+                }).then(({ x, y, placement }) => {
+                    const varOperator = placement.startsWith('top') ? '-' : '+';
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
                 });
             });
         }

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

@@ -1,10 +1,10 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
-import { Chip as ChipComponent } from '../chip/index.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Chip as ChipComponent } from '../chip/index.js';
 
 const text = (el) => el.textContent?.trim() || '';
 const sanitizeItems = (values = []) => typeof values === 'string'
@@ -31,10 +31,14 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
     const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
     const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     const onSelectedChangeRef = useRef(onSelectedChange);
+    const selectedItemsRef = useRef(selectedItems);
     // Keep the ref updated with the latest callback
     useEffect(() => {
         onSelectedChangeRef.current = onSelectedChange;
     }, [onSelectedChange]);
+    useEffect(() => {
+        selectedItemsRef.current = selectedItems;
+    }, [selectedItems]);
     /**
      * Listerners and handling of adding/removing
      */
@@ -44,15 +48,14 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            const nextItem = nextItems(data, selectedItems, multiple);
-            if (isControlled)
-                onSelectedChangeRef.current?.(nextItem);
-            else
+            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+            onSelectedChangeRef.current?.(nextItem || null);
+            if (!isControlled)
                 setDefaultItems(sanitizeItems(nextItem));
         };
         combobox?.addEventListener('comboboxbeforeselect', beforeChange);
         return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
-    }, [selectedItems, isControlled]);
+    }, [isControlled]);
     // Before match event listener
     useEffect(() => {
         const combobox = uComboboxRef.current;

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 import { Context } from './tabs.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * The container for all `Tab` components.

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
-import { Context } from './tabs.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './tabs.js';
 
 /**
  * A single content item in a Tabs component.

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useRef, useState } from 'react';
+import { createContext, forwardRef, useRef, useState } from 'react';
 
 const Context = createContext({});
 /**

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useId, useState, createContext } from 'react';
+import { createContext, forwardRef, useId, useState } from 'react';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 
 const ToggleGroupContext = createContext({});

package/dist/esm/index.js

@@ -1,106 +1,108 @@
 'use client';
+export { Alert } from './components/alert/alert.js';
+export { Avatar } from './components/avatar/avatar.js';
+export { EXPERIMENTAL_AvatarStack } from './components/avatar-stack/avatar-stack.js';
+export { Badge } from './components/badge/index.js';
+export { Breadcrumbs } from './components/breadcrumbs/index.js';
+export { Button } from './components/button/button.js';
+export { Combobox } from './components/Combobox/index.js';
+export { Card } from './components/card/index.js';
+export { Checkbox } from './components/checkbox/checkbox.js';
+export { Chip } from './components/chip/index.js';
+export { Details } from './components/details/index.js';
+export { Dialog } from './components/dialog/index.js';
+export { Divider } from './components/divider/divider.js';
+export { Dropdown } from './components/dropdown/index.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export { Field } from './components/field/index.js';
+export { Fieldset } from './components/fieldset/index.js';
+export { Heading } from './components/heading/heading.js';
+export { Input } from './components/input/input.js';
+export { Label } from './components/label/label.js';
+export { Link } from './components/link/link.js';
+export { List } from './components/list/index.js';
+export { Pagination } from './components/pagination/index.js';
+export { Paragraph } from './components/paragraph/paragraph.js';
+export { Popover } from './components/popover/index.js';
+export { Radio } from './components/radio/radio.js';
+export { Search } from './components/search/index.js';
+export { Select } from './components/select/index.js';
+export { Skeleton } from './components/skeleton/skeleton.js';
+export { SkipLink } from './components/skip-link/skip-link.js';
+export { Spinner } from './components/spinner/spinner.js';
+export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
+export { Switch } from './components/switch/switch.js';
+export { Table } from './components/table/index.js';
+export { Tabs } from './components/tabs/index.js';
+export { Tag } from './components/tag/tag.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Textfield } from './components/textfield/textfield.js';
+export { ToggleGroup } from './components/toggle-group/index.js';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { ValidationMessage } from './components/validation-message/validation-message.js';
 export { omit } from './components/Combobox/omit/omit.js';
-export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
-export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
-export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
 export { useDebounceCallback } from './utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 export { useIsomorphicLayoutEffect } from './utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
 export { useMediaQuery } from './utilities/hooks/deprecated/use-media-query/use-media-query.js';
+export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
+import 'react';
 export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
 export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
 export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
-export { Alert } from './components/alert/alert.js';
-export { Avatar } from './components/avatar/avatar.js';
-export { Badge } from './components/badge/index.js';
+export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
 export { BadgePosition } from './components/badge/badge-position.js';
-export { Breadcrumbs } from './components/breadcrumbs/index.js';
 export { BreadcrumbsItem } from './components/breadcrumbs/breadcrumbs-item.js';
 export { BreadcrumbsLink } from './components/breadcrumbs/breadcrumbs-link.js';
 export { BreadcrumbsList } from './components/breadcrumbs/breadcrumbs-list.js';
-export { Button } from './components/button/button.js';
-export { Combobox } from './components/Combobox/index.js';
 export { ComboboxEmpty } from './components/Combobox/Empty.js';
 export { ComboboxOption } from './components/Combobox/Option/Option.js';
-export { Card } from './components/card/index.js';
 export { CardBlock } from './components/card/card-block.js';
-export { Checkbox } from './components/checkbox/checkbox.js';
-export { Chip } from './components/chip/index.js';
 export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/chip/chips.js';
-export { Details } from './components/details/index.js';
 export { DetailsContent } from './components/details/details-content.js';
 export { DetailsSummary } from './components/details/details-summary.js';
-export { Dialog } from './components/dialog/index.js';
 export { DialogBlock } from './components/dialog/dialog-block.js';
 export { DialogTrigger } from './components/dialog/dialog-trigger.js';
 export { DialogTriggerContext } from './components/dialog/dialog-trigger-context.js';
-export { Divider } from './components/divider/divider.js';
-export { Dropdown } from './components/dropdown/index.js';
 export { DropdownButton } from './components/dropdown/dropdown-button.js';
 export { DropdownHeading } from './components/dropdown/dropdown-heading.js';
 export { DropdownItem } from './components/dropdown/dropdown-item.js';
 export { DropdownList } from './components/dropdown/dropdown-list.js';
 export { DropdownTrigger } from './components/dropdown/dropdown-trigger.js';
 export { DropdownTriggerContext } from './components/dropdown/dropdown-trigger-context.js';
-export { ErrorSummary } from './components/error-summary/index.js';
 export { ErrorSummaryHeading } from './components/error-summary/error-summary-heading.js';
 export { ErrorSummaryItem } from './components/error-summary/error-summary-item.js';
 export { ErrorSummaryLink } from './components/error-summary/error-summary-link.js';
 export { ErrorSummaryList } from './components/error-summary/error-summary-list.js';
-export { Field } from './components/field/index.js';
 export { FieldAffix, FieldAffixes } from './components/field/field-affix.js';
 export { FieldCounter } from './components/field/field-counter.js';
 export { FieldDescription } from './components/field/field-description.js';
-export { Fieldset } from './components/fieldset/index.js';
 export { FieldsetDescription } from './components/fieldset/fieldset-description.js';
 export { FieldsetLegend } from './components/fieldset/fieldset-legend.js';
-export { Heading } from './components/heading/heading.js';
-export { Input } from './components/input/input.js';
-export { Label } from './components/label/label.js';
-export { Link } from './components/link/link.js';
-export { List } from './components/list/index.js';
 export { ListItem } from './components/list/list-item.js';
 export { ListOrdered, ListUnordered } from './components/list/lists.js';
-export { Pagination } from './components/pagination/index.js';
 export { PaginationButton } from './components/pagination/pagination-button.js';
 export { PaginationItem } from './components/pagination/pagination-item.js';
 export { PaginationList } from './components/pagination/pagination-list.js';
-export { Paragraph } from './components/paragraph/paragraph.js';
-export { Popover } from './components/popover/index.js';
 export { PopoverTrigger } from './components/popover/popover-trigger.js';
 export { PopoverTriggerContext } from './components/popover/popover-trigger-context.js';
-export { Radio } from './components/radio/radio.js';
-export { Search } from './components/search/index.js';
 export { SearchButton } from './components/search/search-button.js';
 export { SearchClear } from './components/search/search-clear.js';
 export { SearchInput } from './components/search/search-input.js';
-export { Select } from './components/select/index.js';
 export { SelectOptgroup } from './components/select/select-optgroup.js';
 export { SelectOption } from './components/select/select-option.js';
-export { Skeleton } from './components/skeleton/skeleton.js';
-export { SkipLink } from './components/skip-link/skip-link.js';
-export { Spinner } from './components/spinner/spinner.js';
-export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
 export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/suggestion/suggestion-clear.js';
 export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/suggestion/suggestion-empty.js';
 export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/suggestion/suggestion-input.js';
 export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/suggestion/suggestion-list.js';
 export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/suggestion/suggestion-option.js';
-export { Switch } from './components/switch/switch.js';
-export { Table } from './components/table/index.js';
 export { TableBody } from './components/table/table-body.js';
 export { TableCell } from './components/table/table-cell.js';
 export { TableFoot } from './components/table/table-foot.js';
 export { TableHead } from './components/table/table-head.js';
 export { TableHeaderCell } from './components/table/table-header-cell.js';
 export { TableRow } from './components/table/table-row.js';
-export { Tabs } from './components/tabs/index.js';
 export { TabsList } from './components/tabs/tabs-list.js';
 export { TabsPanel } from './components/tabs/tabs-panel.js';
 export { TabsTab } from './components/tabs/tabs-tab.js';
-export { Tag } from './components/tag/tag.js';
-export { Textarea } from './components/textarea/textarea.js';
-export { Textfield } from './components/textfield/textfield.js';
-export { ToggleGroup } from './components/toggle-group/index.js';
 export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
-export { Tooltip } from './components/tooltip/tooltip.js';
-export { ValidationMessage } from './components/validation-message/validation-message.js';

package/dist/esm/utilities/roving-focus/roving-focus-item.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { useRovingFocus } from './use-roving-focus.js';
 import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
+import { useRovingFocus } from './use-roving-focus.js';
 
 /** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {

package/dist/esm/utilities/roving-focus/roving-focus-root.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useState, useRef, useEffect, createContext } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
 
 const RovingFocusContext = createContext({

package/dist/types/components/avatar/avatar.d.ts

@@ -26,6 +26,11 @@ export type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanEleme
      * Initials to display inside the avatar.
      */
     initials?: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
     /**
      * Image, icon or initials to display inside the avatar.
      *

package/dist/types/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG;IAAE,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,yGA8BjB,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG;IAAE,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,yGAgCjB,CAAC"}

package/dist/types/components/avatar-stack/avatar-stack.d.ts

@@ -0,0 +1,70 @@
+import type { HTMLAttributes } from 'react';
+export type AvatarStackProps = {
+    /**
+     *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+     *  @default 2px
+     */
+    gap?: string;
+    /**
+     *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+     *  @default 'var(--ds-size-12)'
+     */
+    avatarSize?: string;
+    /**
+     *  A number which represents the percentage value of how much avatars should overlap.
+     *  @default 50
+     */
+    overlap?: number;
+    /**
+     *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+     */
+    suffix?: string;
+    /**
+     *  Expand on hover to show full avatars.
+     *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+     *  @default undefined
+     */
+    expandable?: 'fixed' | true;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+export declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponent<{
+    /**
+     *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+     *  @default 2px
+     */
+    gap?: string;
+    /**
+     *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+     *  @default 'var(--ds-size-12)'
+     */
+    avatarSize?: string;
+    /**
+     *  A number which represents the percentage value of how much avatars should overlap.
+     *  @default 50
+     */
+    overlap?: number;
+    /**
+     *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+     */
+    suffix?: string;
+    /**
+     *  Expand on hover to show full avatars.
+     *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+     *  @default undefined
+     */
+    expandable?: "fixed" | true;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=avatar-stack.d.ts.map

package/dist/types/components/avatar-stack/avatar-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-stack.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-stack/avatar-stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,wBAAwB;IAzCnC;;;OAGG;UACG,MAAM;IACZ;;;OAGG;iBACU,MAAM;IACnB;;;OAGG;cACO,MAAM;IAChB;;OAEG;aACM,MAAM;IACf;;;;OAIG;iBACU,OAAO,GAAG,IAAI;mFAyD3B,CAAC"}

package/dist/types/components/badge/badge-position.d.ts

@@ -24,7 +24,7 @@ export type BadgePositionProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSp
  *  <Element />
  * </BadgePosition>
  */
-export declare const BadgePosition: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {
+export declare const BadgePosition: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "overlap" | "placement"> & {
     /**
      * The placement of the badge
      *