@digdir/designsystemet-react 1.0.0-next.46 → 1.0.0-next.48

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

@@ -6,17 +6,17 @@ var ToggleGroupItem = require('./ToggleGroupItem.js');
 
 /**
  * Display a group of buttons that can be toggled between.
+ *
  * @example
- * ```tsx
  * <ToggleGroup 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 = ToggleGroup$1.ToggleGroup;
-ToggleGroup.Item = ToggleGroupItem.ToggleGroupItem;
+const ToggleGroup = Object.assign(ToggleGroup$1.ToggleGroup, {
+    Item: ToggleGroupItem.ToggleGroupItem,
+});
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -10,6 +10,7 @@ var react$1 = require('@floating-ui/react');
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
  * @example
  * <Tooltip content='This is a tooltip'>
  *  <button>Hover me</button>
@@ -82,10 +83,13 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
         console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, popovertarget: id ?? randomTooltipId, 
-                // We set this to not close on click, since it should always show on hover
-                // @ts-ignore @types/react-dom does not understand popovertargetaction yet
-                popovertargetaction: 'show', onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+    const popoverProps = {
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [react.version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
                 // @ts-ignore @types/react-dom does not understand popover yet
                 popover: 'manual', ...rest, children: content })] }));
 });

package/dist/cjs/components/ValidationMessage/ValidationMessage.js

@@ -6,7 +6,12 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-/** Use `ValidationMessage` to display validation text */
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
 const ValidationMessage = react.forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'p';
     return (jsxRuntime.jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));

package/dist/cjs/index.js

@@ -90,12 +90,18 @@ var index$i = require('./components/ErrorSummary/index.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
+var ErrorSummaryLink = require('./components/ErrorSummary/ErrorSummaryLink.js');
+var index$j = require('./components/Suggestion/index.js');
+var SuggestionList = require('./components/Suggestion/SuggestionList.js');
+var SuggestionInput = require('./components/Suggestion/SuggestionInput.js');
+var SuggestionEmpty = require('./components/Suggestion/SuggestionEmpty.js');
+var SuggestionOption = require('./components/Suggestion/SuggestionOption.js');
+var SuggestionClear = require('./components/Suggestion/SuggestionClear.js');
 var omit = require('./utilities/omit/omit.js');
 var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
 var useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 var useMediaQuery = require('./utilities/hooks/useMediaQuery/useMediaQuery.js');
-var usePrevious = require('./utilities/hooks/usePrevious/usePrevious.js');
 var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
 var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
@@ -198,12 +204,18 @@ exports.ErrorSummary = index$i.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
+exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
+exports.EXPERIMENTAL_Suggestion = index$j.EXPERIMENTAL_Suggestion;
+exports.EXPERIMENTAL_SuggestionList = SuggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
+exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
 exports.omit = omit.omit;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
-exports.usePrevious = usePrevious.usePrevious;
 exports.useRadioGroup = useRadioGroup.useRadioGroup;
 exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
 exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -23,7 +23,7 @@ const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation =
     const [focusableValue, setFocusableValue] = react.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
     const elements = react.useRef(new Map());
-    const myRef = react.useRef();
+    const myRef = react.useRef(null);
     const refs = react$1.useMergeRefs([ref, myRef]);
     const getOrderedItems = () => {
         if (!myRef.current)

package/dist/esm/components/Alert/Alert.js

@@ -5,8 +5,9 @@ import { forwardRef } from 'react';
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
  * @example
- * <Alert color='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
     return (jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));

package/dist/esm/components/Badge/Badge.js

@@ -7,16 +7,12 @@ import { forwardRef } from 'react';
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
- * ```jsx
- * <Badge color='accent' count={5} />
- * ```
+ * <Badge count={5} maxCount={10} />
  *
  * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
  * </Badge>
- * ```
  */
 const Badge = forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
     return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));

package/dist/esm/components/Badge/BadgePosition.js

@@ -3,6 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
 const BadgePosition = forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
     return (jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
 });

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

@@ -2,6 +2,12 @@
 import { Badge as Badge$1 } from './Badge.js';
 import { BadgePosition } from './BadgePosition.js';
 
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
 const Badge = Object.assign(Badge$1, { Position: BadgePosition });
 Badge.Position.displayName = 'Badge.Position';
 

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -3,6 +3,24 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
 const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 export { Breadcrumbs };

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

@@ -5,17 +5,22 @@ import { BreadcrumbsLink } from './BreadcrumbsLink.js';
 import { BreadcrumbsList } from './BreadcrumbsList.js';
 
 /**
- * Breadcrumbs are used to visualize the current page path.
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
  * @example
- * <Breadcrumbs aria-label="You are here:">
- *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
  *  <Breadcrumbs.List>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
  *  </Breadcrumbs.List>
- * <Breadcrumbs>
+ * </Breadcrumbs>
  */
 const Breadcrumbs = Object.assign(Breadcrumbs$1, {
     List: BreadcrumbsList,

package/dist/esm/components/Button/Button.js

@@ -7,6 +7,7 @@ import { Spinner } from '../Spinner/Spinner.js';
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */

package/dist/esm/components/Card/Card.js

@@ -7,6 +7,7 @@ import { forwardRef, useRef, useEffect } from 'react';
 
 /**
  * Card component to present content in a structured way.
+ *
  * @example
  * <Card>
  *  <Card.Block>Header</Card.Block>

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

@@ -2,6 +2,16 @@
 import { Card as Card$1 } from './Card.js';
 import { CardBlock } from './CardBlock.js';
 
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
 const Card = Object.assign(Card$1, {
     Block: CardBlock,
 });

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

@@ -8,11 +8,12 @@ import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 
 /**
  * Checkbox used to select multiple options.
+ *
  * @example
  * <Checkbox label="I agree" value="agree" />
  */
-const Checkbox = forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
+const Checkbox = forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Checkbox };

package/dist/esm/components/Chip/Chips.js

@@ -7,6 +7,7 @@ import { Input } from '../Input/Input.js';
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */

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

@@ -16,10 +16,13 @@ import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
+import { Spinner } from '../Spinner/Spinner.js';
 import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 import { omit } from '../../utilities/omit/omit.js';
-import { Spinner } from '../Spinner/Spinner.js';
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
     const portalRef = useRef(null);
@@ -176,7 +179,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

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

@@ -6,8 +6,8 @@ import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { omit } from '../../utilities/omit/omit.js';
 import { Label } from '../Label/Label.js';
+import { omit } from '../../utilities/omit/omit.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

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

@@ -3,6 +3,9 @@ import { Combobox as Combobox$1 } from './Combobox.js';
 import { ComboboxEmpty } from './Empty.js';
 import { ComboboxOption } from './Option/Option.js';
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;
 Combobox.Empty = ComboboxEmpty;

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

@@ -23,7 +23,7 @@ const ComboboxChips = () => {
                             option: selectedOptions[value],
                             remove: true,
                         });
-                        inputRef.current?.focus();
+                        inputRef?.current?.focus();
                     }
                 }, onClick: () => {
                     if (readOnly)

package/dist/esm/components/Details/Details.js

@@ -7,10 +7,11 @@ import '@u-elements/u-details';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {

package/dist/esm/components/Details/DetailsContent.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */

package/dist/esm/components/Details/DetailsSummary.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */

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

@@ -4,11 +4,12 @@ import { DetailsContent } from './DetailsContent.js';
 import { DetailsSummary } from './DetailsSummary.js';
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(Details$1, {

package/dist/esm/components/Divider/Divider.js

@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
 const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is

package/dist/esm/components/Dropdown/Dropdown.js

@@ -4,6 +4,33 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Popover } from '../Popover/index.js';
 
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
 const Dropdown = forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
     return (jsx(Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });

package/dist/esm/components/Dropdown/DropdownTriggerContext.js

@@ -5,13 +5,16 @@ import { PopoverTriggerContext } from '../Popover/PopoverTriggerContext.js';
 
 /**
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
  * @example
  * <Dropdown.TriggerContext>
  *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
  *  <Dropdown>
  *   <Dropdown.Heading>Heading</Dropdown.Heading>
  *    <Dropdown.List>
- *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>

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

@@ -8,17 +8,19 @@ import { DropdownTrigger } from './DropdownTrigger.js';
 import { DropdownTriggerContext } from './DropdownTriggerContext.js';
 
 /**
+ * Dropdown component, used to display a list of options.
+ *
  * @example
  * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
- *  <Dropdown>
- *    <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button 1</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
- *  </Dropdown>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
  * </Dropdown.TriggerContext>
  */
 const Dropdown = Object.assign(Dropdown$1, {

package/dist/esm/components/ErrorSummary/ErrorSummary.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { createContext, forwardRef, useId, useState } from 'react';
 
@@ -7,10 +8,27 @@ const ErrorSummaryContext = createContext({
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ErrorSummary = forwardRef(function ErrorSummary({ className, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = forwardRef(function ErrorSummary({ asChild, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
     const randomId = useId();
     const [headingId, setHeadingId] = useState(randomId);
-    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+    const Component = asChild ? Slot : 'div';
+    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
 });
 
 export { ErrorSummary, ErrorSummaryContext };

package/dist/esm/components/ErrorSummary/ErrorSummaryItem.js

@@ -1,11 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { List } from '../List/index.js';
-import { Link } from '../Link/Link.js';
+import '../List/index.js';
+import { ListItem } from '../List/ListItem.js';
 
-const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
-    return (jsx(List.Item, { ...rest, ref: ref, children: jsx(Link, { href: href, asChild: asChild, children: children }) }));
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
+const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsx(ListItem, { ref: ref, ...rest });
 });
 
 export { ErrorSummaryItem };

package/dist/esm/components/ErrorSummary/ErrorSummaryLink.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../Link/Link.js';
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsx(Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+export { ErrorSummaryLink };

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

@@ -2,24 +2,34 @@
 import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
+import { ErrorSummaryLink } from './ErrorSummaryLink.js';
 import { ErrorSummaryList } from './ErrorSummaryList.js';
 
 /**
+ * ErrorSummary component, used to display a list of errors.
+ *
  * @example
  * <ErrorSummary>
- *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
- *  <ErrorSummary.List>
- *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
- *  </ErrorSummary.List>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
  * </ErrorSummary>
  */
 const ErrorSummary = Object.assign(ErrorSummary$1, {
     Heading: ErrorSummaryHeading,
     Item: ErrorSummaryItem,
     List: ErrorSummaryList,
+    Link: ErrorSummaryLink,
 });
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList };
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };