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

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

@@ -1,15 +1,15 @@
 'use client';
-import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './chips.js';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips.js';
 
-const Chip = {
+const ChipComponent = {
     Button: ChipButton,
     Checkbox: ChipCheckbox,
     Radio: ChipRadio,
     Removable: ChipRemovable,
 };
-Chip.Button.displayName = 'Chip.Button';
-Chip.Checkbox.displayName = 'Chip.Checkbox';
-Chip.Radio.displayName = 'Chip.Radio';
-Chip.Removable.displayName = 'Chip.Removable';
+ChipComponent.Button.displayName = 'Chip.Button';
+ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
+ChipComponent.Radio.displayName = 'Chip.Radio';
+ChipComponent.Removable.displayName = 'Chip.Removable';
 
-export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };
+export { ChipComponent as Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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/details/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { Details as Details$1 } from './details.js';
+import { Details } from './details.js';
 import { DetailsContent } from './details-content.js';
 import { DetailsSummary } from './details-summary.js';
 
@@ -12,11 +12,11 @@ import { DetailsSummary } from './details-summary.js';
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = Object.assign(Details$1, {
+const DetailsComponent = Object.assign(Details, {
     Summary: DetailsSummary,
     Content: DetailsContent,
 });
-Details.Summary.displayName = 'Details.Summary';
-Details.Content.displayName = 'Details.Content';
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
 
-export { Details, DetailsContent, DetailsSummary };
+export { DetailsComponent as Details, DetailsContent, DetailsSummary };

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.
@@ -30,7 +30,7 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  *   Content
  * </Dialog>
  */
-const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+const Dialog = forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
     const contextRef = useContext(Context);
     const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? Slot : 'dialog';
@@ -40,7 +40,19 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
     useEffect(() => {
         const dialog = dialogRef.current;
         const handleClosedby = (event) => {
+            if (event.defaultPrevented)
+                return; // Skip if default action is prevented
             const { clientY: y, clientX: x, target } = event;
+            /* Check if clicked element or its closest parent has data-command='close' */
+            if (target instanceof Element && event.type === 'click') {
+                const closeElement = target.closest('[data-command="close"]');
+                if (closeElement)
+                    return dialog?.close();
+            }
+            // if the browser supports closedBy, we let the browser handle it
+            // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy
+            if (dialog && 'closedBy' in dialog)
+                return;
             if (event instanceof KeyboardEvent)
                 return (closedby === 'none' &&
                     event.key === 'Escape' &&
@@ -71,10 +83,11 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
     /* handle closing */
     useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.removeEventListener('close', handleClose);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 export { Dialog };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Dialog as Dialog$1 } from './dialog.js';
+import { Dialog } from './dialog.js';
 import { DialogBlock } from './dialog-block.js';
 import { DialogTrigger } from './dialog-trigger.js';
 import { DialogTriggerContext } from './dialog-trigger-context.js';
@@ -17,13 +17,13 @@ import { DialogTriggerContext } from './dialog-trigger-context.js';
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const Dialog = Object.assign(Dialog$1, {
+const DialogComponent = Object.assign(Dialog, {
     Block: DialogBlock,
     TriggerContext: DialogTriggerContext,
     Trigger: DialogTrigger,
 });
-Dialog.Block.displayName = 'Dialog.Block';
-Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
-Dialog.Trigger.displayName = 'Dialog.Trigger';
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
 
-export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };
+export { DialogComponent as Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

package/dist/esm/components/dropdown/dropdown-button.js

@@ -3,6 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../button/button.js';
 
+/**
+ * DropdownButton component, used to display a button in the DropdownItem.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownButton = forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
 });

package/dist/esm/components/dropdown/dropdown-heading.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Heading } from '../heading/heading.js';
 
+/**
+ * DropdownHeading component, used to display a heading in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownHeading>Heading</DropdownHeading>
+ * </Dropdown>
+ */
 const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
     return jsx(Heading, { ref: ref, ...rest });
 });

package/dist/esm/components/dropdown/dropdown-item.js

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * DropdownItem component, used to display an item in the Dropdown. Used within a DropdownList.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownItem = forwardRef(function DropdownItem({ className, ...rest }, ref) {
     return jsx("li", { ref: ref, ...rest });
 });

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

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * DropdownList component, used to display a list of items in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
     return jsx("ul", { ref: ref, ...rest });
 });

package/dist/esm/components/dropdown/dropdown-trigger-context.js

@@ -6,17 +6,17 @@ import { PopoverTriggerContext } from '../popover/popover-trigger-context.js';
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
  *
  * @example
- * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
  *  <Dropdown>
- *   <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
  *  </Dropdown>
- * </Dropdown.TriggerContext>
+ * </DropdownTriggerContext>
  */
 const DropdownTriggerContext = ({ children, }) => {
     return jsx(PopoverTriggerContext, { children: children });

package/dist/esm/components/dropdown/dropdown-trigger.js

@@ -3,6 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { PopoverTrigger } from '../popover/popover-trigger.js';
 
+/**
+ * DropdownTrigger component, used within a Dropdown.TriggerContext to open a Dropdown.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
 const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
     return jsx(PopoverTrigger, { ref: ref, ...rest });
 });

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

@@ -1,5 +1,5 @@
 'use client';
-import { Dropdown as Dropdown$1 } from './dropdown.js';
+import { Dropdown } from './dropdown.js';
 import { DropdownButton } from './dropdown-button.js';
 import { DropdownHeading } from './dropdown-heading.js';
 import { DropdownItem } from './dropdown-item.js';
@@ -10,7 +10,7 @@ import { DropdownTriggerContext } from './dropdown-trigger-context.js';
 /**
  * Dropdown component, used to display a list of options.
  *
- * @example
+ * @example with TriggerContext
  * <Dropdown.TriggerContext>
  *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
  *   <Dropdown placement='bottom-end'>
@@ -22,8 +22,19 @@ import { DropdownTriggerContext } from './dropdown-trigger-context.js';
  *     </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 = Object.assign(Dropdown$1, {
+const DropdownComponent = Object.assign(Dropdown, {
     TriggerContext: DropdownTriggerContext,
     Heading: DropdownHeading,
     List: DropdownList,
@@ -31,11 +42,11 @@ const Dropdown = Object.assign(Dropdown$1, {
     Button: DropdownButton,
     Trigger: DropdownTrigger,
 });
-Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
-Dropdown.List.displayName = 'Dropdown.List';
-Dropdown.Heading.displayName = 'Dropdown.Heading';
-Dropdown.Item.displayName = 'Dropdown.Item';
-Dropdown.Button.displayName = 'Dropdown.Button';
-Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+DropdownComponent.TriggerContext.displayName = 'Dropdown.TriggerContext';
+DropdownComponent.List.displayName = 'Dropdown.List';
+DropdownComponent.Heading.displayName = 'Dropdown.Heading';
+DropdownComponent.Item.displayName = 'Dropdown.Item';
+DropdownComponent.Button.displayName = 'Dropdown.Button';
+DropdownComponent.Trigger.displayName = 'Dropdown.Trigger';
 
-export { Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };
+export { DropdownComponent as Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };

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

@@ -4,6 +4,14 @@ import { forwardRef, useContext, useEffect } from 'react';
 import { Heading } from '../heading/heading.js';
 import { ErrorSummaryContext } from './error-summary.js';
 
+/**
+ * ErrorSummary heading component, used to display a heading for the error summary.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
+ * </ErrorSummary>
+ */
 const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
     const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
     useEffect(() => {

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

@@ -8,11 +8,11 @@ import { ListItem } from '../list/list-item.js';
  * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
  *
  * @example
- * <ErrorSummary.Item>
- *  <ErrorSummary.Link href="#">
+ * <ErrorSummaryItem>
+ *  <ErrorSummaryLink href="#">
  *    Link to error
- *  </ErrorSummary.Link>
- * </ErrorSummary.Item>
+ *  </ErrorSummaryLink>
+ * </ErrorSummaryItem>
  */
 const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
     return jsx(ListItem, { ref: ref, ...rest });

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

@@ -4,7 +4,14 @@ import { forwardRef } from 'react';
 import { Link } from '../link/link.js';
 
 /**
- * Link component used in ErrorSummary.
+ * ErrorSummary link component, used to link to a specific error. Used within an ErrorSummary.Item.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryItem>
+ *     <ErrorSummaryLink href='#'>Error 1</ErrorSummaryLink>
+ *   </ErrorSummaryItem>
+ * </ErrorSummary>
  */
 const ErrorSummaryLink = forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
     return jsx(Link, { ref: ref, "data-color": 'neutral', ...rest });

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

@@ -1,10 +1,25 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { List } from '../list/index.js';
+import { List as ListComponent } from '../list/index.js';
 
+/**
+ * ErrorSummary list component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <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 ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
-    return jsx(List.Unordered, { ...rest, ref: ref });
+    return jsx(ListComponent.Unordered, { ...rest, ref: ref });
 });
 
 export { ErrorSummaryList };

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/error-summary/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { ErrorSummary as ErrorSummary$1 } from './error-summary.js';
+import { ErrorSummary } from './error-summary.js';
 import { ErrorSummaryHeading } from './error-summary-heading.js';
 import { ErrorSummaryItem } from './error-summary-item.js';
 import { ErrorSummaryLink } from './error-summary-link.js';
@@ -21,15 +21,15 @@ import { ErrorSummaryList } from './error-summary-list.js';
  *   </ErrorSummary.List>
  * </ErrorSummary>
  */
-const ErrorSummary = Object.assign(ErrorSummary$1, {
+const ErrorSummaryComponent = Object.assign(ErrorSummary, {
     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';
+ErrorSummaryComponent.Item.displayName = 'ErrorSummary.Item';
+ErrorSummaryComponent.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummaryComponent.List.displayName = 'ErrorSummary.List';
+ErrorSummaryComponent.Link.displayName = 'ErrorSummary.Link';
 
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };
+export { ErrorSummaryComponent as ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

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

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

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

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

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

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

package/dist/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/field/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { Field as Field$1 } from './field.js';
+import { Field } from './field.js';
 import { FieldAffix, FieldAffixes } from './field-affix.js';
 import { FieldCounter } from './field-counter.js';
 import { FieldDescription } from './field-description.js';
@@ -15,15 +15,15 @@ import { FieldDescription } from './field-description.js';
  *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
-const Field = Object.assign(Field$1, {
+const FieldComponent = Object.assign(Field, {
     Description: FieldDescription,
     Affixes: FieldAffixes,
     Affix: FieldAffix,
     Counter: FieldCounter,
 });
-Field.Description.displayName = 'Field.Description';
-Field.Affixes.displayName = 'Field.Affixes';
-Field.Affix.displayName = 'Field.Affix';
-Field.Counter.displayName = 'Field.Counter';
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
 
-export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };
+export { FieldComponent as Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

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

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

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

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

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

@@ -1,5 +1,5 @@
 'use client';
-import { Fieldset as Fieldset$1 } from './fieldset.js';
+import { Fieldset } from './fieldset.js';
 import { FieldsetDescription } from './fieldset-description.js';
 import { FieldsetLegend } from './fieldset-legend.js';
 
@@ -18,11 +18,11 @@ import { FieldsetLegend } from './fieldset-legend.js';
  *   </Field>
  * </Fieldset>
  */
-const Fieldset = Object.assign(Fieldset$1, {
+const FieldsetComponent = Object.assign(Fieldset, {
     Legend: FieldsetLegend,
     Description: FieldsetDescription,
 });
-Fieldset.Legend.displayName = 'Fieldset.Legend';
-Fieldset.Description.displayName = 'Fieldset.Description';
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
 
-export { Fieldset, FieldsetDescription, FieldsetLegend };
+export { FieldsetComponent as Fieldset, FieldsetDescription, FieldsetLegend };