@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

package/dist/cjs/components/Tabs/Tabs.js

@@ -8,8 +8,8 @@ var react = require('react');
 const Context = react.createContext({});
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -20,7 +20,6 @@ const Context = react.createContext({});
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;

package/dist/cjs/components/Tabs/TabsList.js

@@ -8,13 +8,12 @@ var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 
 /**
  * The container for all `Tab` components.
+ *
  * @example
- * ```tsx
  * <Tabs.List>
  *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
  * </Tabs.List>
- * ```
  */
 const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
     const { value } = react.useContext(Tabs.Context);

package/dist/cjs/components/Tabs/TabsPanel.js

@@ -8,10 +8,9 @@ var Tabs = require('./Tabs.js');
 
 /**
  * A single content item in a Tabs component.
+ *
  * @example
- * ```tsx
  * <Tabs.Panel value='1'>content 1</Tabs.Panel>
- * ```
  */
 const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
     const { value: tabsValue } = react.useContext(Tabs.Context);

package/dist/cjs/components/Tabs/TabsTab.js

@@ -8,6 +8,7 @@ var Tabs = require('./Tabs.js');
 
 /**
  * A single item in a Tabs component.
+ *
  * @example
  * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  */

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

@@ -8,8 +8,8 @@ var TabsTab = require('./TabsTab.js');
 
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -20,7 +20,6 @@ var TabsTab = require('./TabsTab.js');
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 const Tabs = Object.assign(Tabs$1.Tabs, {
     List: TabsList.TabsList,

package/dist/cjs/components/Tag/Tag.js

@@ -6,9 +6,10 @@ var cl = require('clsx/lite');
 var react = require('react');
 
 /**
- * Use `Tag` to display a small piece of information.
+ * Use `Tag` to display categories or statuses.
+ *
  * @example
- * <Tag>Success</Tag>
+ * <Tag>Melk</Tag>
  */
 const Tag = react.forwardRef(function Tag({ className, ...rest }, ref) {
     return jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });

package/dist/cjs/components/Textarea/Textarea.js

@@ -5,12 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
-/** Textarea field
+/**
+ * Native HTML textarea element.
  *
  * @example
- * ```tsx
  * <Textarea />
- * ```
  */
 const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));

package/dist/cjs/components/Textfield/Textfield.js

@@ -4,11 +4,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var index = require('../Field/index.js');
+var Label = require('../Label/Label.js');
 var FieldDescription = require('../Field/FieldDescription.js');
 var FieldAffix = require('../Field/FieldAffix.js');
 var Textarea = require('../Textarea/Textarea.js');
 var Input = require('../Input/Input.js');
-var Label = require('../Label/Label.js');
 var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 
 /**
@@ -18,9 +18,7 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
  *
  * Rest props are passed to the `Input` or `Textarea` component.
  * @example
- * ```tsx
  * <Textfield label="Textfield label">
- * ```
  */
 const Textfield = react.forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
     return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label && jsxRuntime.jsx(Label.Label, { children: label }), !!description && jsxRuntime.jsx(FieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(FieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(Textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(Input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));

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

@@ -9,6 +9,7 @@ var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 const ToggleGroupContext = react.createContext({});
 /**
  * Display a group of buttons that can be toggled between.
+ *
  * @example
  * <ToggleGroup onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>

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

@@ -29,7 +29,6 @@ var Alert = require('./components/Alert/Alert.js');
 var Tag = require('./components/Tag/Tag.js');
 var index$5 = require('./components/Chip/index.js');
 var Chips = require('./components/Chip/Chips.js');
-var usePagination = require('./components/Pagination/usePagination.js');
 var index$6 = require('./components/Pagination/index.js');
 var PaginationList = require('./components/Pagination/PaginationList.js');
 var PaginationItem = require('./components/Pagination/PaginationItem.js');
@@ -59,10 +58,10 @@ var index$b = require('./components/Popover/index.js');
 var PopoverTriggerContext = require('./components/Popover/PopoverTriggerContext.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
-var index$c = require('./components/Modal/index.js');
-var ModalBlock = require('./components/Modal/ModalBlock.js');
-var ModalTriggerContext = require('./components/Modal/ModalTriggerContext.js');
-var ModalTrigger = require('./components/Modal/ModalTrigger.js');
+var index$c = require('./components/Dialog/index.js');
+var DialogBlock = require('./components/Dialog/DialogBlock.js');
+var DialogTriggerContext = require('./components/Dialog/DialogTriggerContext.js');
+var DialogTrigger = require('./components/Dialog/DialogTrigger.js');
 var index$d = require('./components/Dropdown/index.js');
 var DropdownTriggerContext = require('./components/Dropdown/DropdownTriggerContext.js');
 var DropdownList = require('./components/Dropdown/DropdownList.js');
@@ -90,14 +89,21 @@ 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 usePagination = require('./utilities/hooks/usePagination/usePagination.js');
 var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
 var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
 var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
@@ -136,7 +142,6 @@ exports.ChipButton = Chips.ChipButton;
 exports.ChipCheckbox = Chips.ChipCheckbox;
 exports.ChipRadio = Chips.ChipRadio;
 exports.ChipRemovable = Chips.ChipRemovable;
-exports.usePagination = usePagination.usePagination;
 exports.Pagination = index$6.Pagination;
 exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
@@ -167,10 +172,10 @@ exports.Popover = index$b.Popover;
 exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
-exports.Modal = index$c.Modal;
-exports.ModalBlock = ModalBlock.ModalBlock;
-exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
-exports.ModalTrigger = ModalTrigger.ModalTrigger;
+exports.Dialog = index$c.Dialog;
+exports.DialogBlock = DialogBlock.DialogBlock;
+exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
+exports.DialogTrigger = DialogTrigger.DialogTrigger;
 exports.Dropdown = index$d.Dropdown;
 exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
 exports.DropdownList = DropdownList.DropdownList;
@@ -198,14 +203,21 @@ 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.usePagination = usePagination.usePagination;
 exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
 exports.useRovingFocus = useRovingFocus.useRovingFocus;
 exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;

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/cjs/{components/Pagination → utilities/hooks/usePagination}/usePagination.js

@@ -14,8 +14,36 @@ const getSteps = (now, max, show) => {
         pages.splice(-2, 2, 0, max);
     return pages;
 };
-/** Hook to help manage pagination state */
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => react.useMemo(() => {
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
+const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => react.useMemo(() => {
     const hasNext = currentPage < totalPages;
     const hasPrev = currentPage !== 1;
     const handleClick = (page) => (event) => {
@@ -28,8 +56,17 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages,
     return {
         /** Number of steps */
         pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
+            /**
+             * Page number or "ellipsis" for the ellipsis item
+             */
             page: page || 'ellipsis',
+            /**
+             * Unique key for the item
+             */
             itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
+            /**
+             * Properties to spread on Pagination.Button
+             */
             buttonProps: (page
                 ? {
                     'aria-current': page === currentPage ? 'page' : undefined,

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,19 +7,15 @@ 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 }));
+const Badge = forwardRef(function Badge({ className, count, maxCount, 'data-variant': variant = 'base', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
 });
 
 export { Badge };

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

@@ -1,12 +1,13 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slottable, Slot } from '@radix-ui/react-slot';
+import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Spinner } from '../Spinner/Spinner.js';
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */
@@ -15,7 +16,7 @@ const Button = forwardRef(function Button({ asChild, className, children, icon =
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
         /* don't set type when we use `asChild` */
-        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', "data-size": 'sm' })) : (loading // Allow custom loading spinner
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
             ), jsx(Slottable, { children: children })] }));
 });
 

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>
@@ -14,7 +15,7 @@ import { forwardRef, useRef, useEffect } from 'react';
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = forwardRef(function Card({ asChild = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
+const Card = forwardRef(function Card({ asChild = false, 'data-variant': variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const cardRef = useRef(null);
     const mergedRefs = useMergeRefs([cardRef, ref]);
@@ -34,7 +35,7 @@ const Card = forwardRef(function Card({ asChild = false, 'data-color': color = '
         card?.addEventListener('click', handleClick);
         return () => card?.removeEventListener('click', handleClick);
     }, []);
-    return (jsx(Component, { className: cl(`ds-card`, className), "data-color": color, ref: mergedRefs, ...rest }));
+    return (jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 export { Card };

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

@@ -1,12 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slottable, Slot } from '@radix-ui/react-slot';
+import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Input } from '../Input/Input.js';
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */

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

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