@digdir/designsystemet-react 1.0.0-next.34 → 1.0.0-next.35

package/dist/cjs/components/form/Switch/Switch.js

@@ -6,14 +6,14 @@ var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
 var useSwitch = require('./useSwitch.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
 var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.js');
+var Label = require('../../Label/Label.js');
 
 const Switch = react.forwardRef((props, ref) => {
     const { children, description, position = 'left', className, ...rest } = props;
     const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch.useSwitch(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, ...(inputProps.disabled && { 'aria-disabled': true }), children: jsxRuntime.jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
 });
 Switch.displayName = 'Switch';
 

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

@@ -7,10 +7,10 @@ var cl = require('clsx/lite');
 var react = require('react');
 var CharacterCounter = require('../CharacterCounter.js');
 var useTextarea = require('./useTextarea.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
 /** Textarea field
  *

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

@@ -7,10 +7,10 @@ var cl = require('clsx/lite');
 var react = require('react');
 var CharacterCounter = require('../CharacterCounter.js');
 var useTextfield = require('./useTextfield.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
 /** Text input field
  *

package/dist/cjs/components/loaders/Skeleton/Skeleton.js

@@ -8,11 +8,13 @@ var cl = require('clsx/lite');
 var react = require('react');
 var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
-const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
+const Skeleton = react.forwardRef(function Skeleton({ asChild, className, children, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'span';
+    const isText = variant === 'text';
+    const childrenText = isText && '-'.repeat(Number(width) || 1); // s followed by a ­ makes the most average character length
     const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
     const mergedRefs = react$1.useMergeRefs([animationRef, ref]);
-    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: { width, height, ...style }, ...rest }));
+    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest, children: children || childrenText }));
 });
 
 exports.Skeleton = Skeleton;

package/dist/cjs/index.js

@@ -21,11 +21,10 @@ var Link = require('./components/Link/Link.js');
 var index$1 = require('./components/List/index.js');
 var Lists = require('./components/List/Lists.js');
 var ListItem = require('./components/List/ListItem.js');
-var Paragraph = require('./components/Typography/Paragraph/Paragraph.js');
-var Heading = require('./components/Typography/Heading/Heading.js');
-var Ingress = require('./components/Typography/Ingress/Ingress.js');
-var Label = require('./components/Typography/Label/Label.js');
-var ValidationMessage = require('./components/Typography/ValidationMessage/ValidationMessage.js');
+var Label = require('./components/Label/Label.js');
+var Heading = require('./components/Heading/Heading.js');
+var Paragraph = require('./components/Paragraph/Paragraph.js');
+var ValidationMessage = require('./components/ValidationMessage/ValidationMessage.js');
 var index$2 = require('./components/Accordion/index.js');
 var AccordionItem = require('./components/Accordion/AccordionItem.js');
 var AccordionContent = require('./components/Accordion/AccordionContent.js');
@@ -36,17 +35,12 @@ var SelectOptgroup = require('./components/form/Select/SelectOptgroup.js');
 var Alert = require('./components/Alert/Alert.js');
 var Tag = require('./components/Tag/Tag.js');
 var index$4 = require('./components/Chip/index.js');
-var Group = require('./components/Chip/Group/Group.js');
-var Removable = require('./components/Chip/Removable/Removable.js');
-var Toggle = require('./components/Chip/Toggle/Toggle.js');
+var Chips = require('./components/Chip/Chips.js');
 var usePagination = require('./components/Pagination/usePagination.js');
 var index$5 = require('./components/Pagination/index.js');
-var PaginationRoot = require('./components/Pagination/PaginationRoot.js');
 var PaginationList = require('./components/Pagination/PaginationList.js');
 var PaginationItem = require('./components/Pagination/PaginationItem.js');
 var PaginationButton = require('./components/Pagination/PaginationButton.js');
-var PaginationEllipsis = require('./components/Pagination/PaginationEllipsis.js');
-var PaginationNextPrev = require('./components/Pagination/PaginationNextPrev.js');
 var SkipLink = require('./components/SkipLink/SkipLink.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
 var index$6 = require('./components/form/Checkbox/index.js');
@@ -68,12 +62,9 @@ var PopoverContext = require('./components/Popover/PopoverContext.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
 var index$b = require('./components/Modal/index.js');
-var ModalRoot = require('./components/Modal/ModalRoot.js');
-var ModaContent = require('./components/Modal/ModaContent.js');
-var ModalFooter = require('./components/Modal/ModalFooter.js');
-var ModalHeader = require('./components/Modal/ModalHeader.js');
+var ModalBlock = require('./components/Modal/ModalBlock.js');
+var ModalContext = require('./components/Modal/ModalContext.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
-var ModalDialog = require('./components/Modal/ModalDialog.js');
 var index$c = require('./components/Dropdown/index.js');
 var DropdownContext = require('./components/Dropdown/DropdownContext.js');
 var DropdownList = require('./components/Dropdown/DropdownList.js');
@@ -82,10 +73,7 @@ var DropdownItem = require('./components/Dropdown/DropdownItem.js');
 var DropdownTrigger = require('./components/Dropdown/DropdownTrigger.js');
 var Search = require('./components/form/Search/Search.js');
 var index$d = require('./components/Card/index.js');
-var CardHeader = require('./components/Card/CardHeader.js');
-var CardContent = require('./components/Card/CardContent.js');
-var CardFooter = require('./components/Card/CardFooter.js');
-var CardMedia = require('./components/Card/CardMedia.js');
+var CardBlock = require('./components/Card/CardBlock.js');
 var index$e = require('./components/form/Combobox/index.js');
 var Option = require('./components/form/Combobox/Option/Option.js');
 var Empty = require('./components/form/Combobox/Empty.js');
@@ -125,10 +113,9 @@ exports.List = index$1.List;
 exports.ListOrdered = Lists.ListOrdered;
 exports.ListUnordered = Lists.ListUnordered;
 exports.ListItem = ListItem.ListItem;
-exports.Paragraph = Paragraph.Paragraph;
-exports.Heading = Heading.Heading;
-exports.Ingress = Ingress.Ingress;
 exports.Label = Label.Label;
+exports.Heading = Heading.Heading;
+exports.Paragraph = Paragraph.Paragraph;
 exports.ValidationMessage = ValidationMessage.ValidationMessage;
 exports.Accordion = index$2.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
@@ -140,18 +127,15 @@ exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
 exports.Alert = Alert.Alert;
 exports.Tag = Tag.Tag;
 exports.Chip = index$4.Chip;
-exports.ChipGroup = Group.Group;
-exports.ChipRemovable = Removable.RemovableChip;
-exports.ChipToggle = Toggle.ToggleChip;
+exports.ChipButton = Chips.ChipButton;
+exports.ChipCheckbox = Chips.ChipCheckbox;
+exports.ChipRadio = Chips.ChipRadio;
+exports.ChipRemovable = Chips.ChipRemovable;
 exports.usePagination = usePagination.usePagination;
 exports.Pagination = index$5.Pagination;
-exports.PaginationRoot = PaginationRoot.PaginationRoot;
 exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
-exports.PaginationNext = PaginationNextPrev.PaginationNext;
-exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Checkbox = index$6.Checkbox;
@@ -173,12 +157,9 @@ exports.PopoverContext = PopoverContext.PopoverContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
 exports.Modal = index$b.Modal;
-exports.ModalRoot = ModalRoot.ModalRoot;
-exports.ModalContent = ModaContent.ModalContent;
-exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ModalHeader = ModalHeader.ModalHeader;
+exports.ModalBlock = ModalBlock.ModalBlock;
+exports.ModalContext = ModalContext.ModalContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
-exports.ModalDialog = ModalDialog.ModalDialog;
 exports.Dropdown = index$c.Dropdown;
 exports.DropdownContext = DropdownContext.DropdownContext;
 exports.DropdownList = DropdownList.DropdownList;
@@ -187,10 +168,7 @@ exports.DropdownItem = DropdownItem.DropdownItem;
 exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
 exports.Search = Search.Search;
 exports.Card = index$d.Card;
-exports.CardHeader = CardHeader.CardHeader;
-exports.CardContent = CardContent.CardContent;
-exports.CardFooter = CardFooter.CardFooter;
-exports.CardMedia = CardMedia.CardMedia;
+exports.CardBlock = CardBlock.CardBlock;
 exports.Combobox = index$e.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;

package/dist/esm/components/Accordion/AccordionContent.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Accordion content component, contains the content of the accordion item.
@@ -9,7 +8,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <AccordionContent>Content</AccordionContent>
  */
 const AccordionContent = forwardRef(function AccordionContent(rest, ref) {
-    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, ...rest }) }));
+    return jsx("div", { ref: ref, ...rest });
 });
 
 export { AccordionContent };

package/dist/esm/components/Accordion/AccordionHeading.js

@@ -1,17 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
- * Accordion header component, contains a button to toggle the content.
+ * Accordion heading component, contains a button to toggle the content.
  * @example
- * <AccordionHeader>Header</AccordionHeader>
+ * <AccordionHeading>Heading</AccordionHeading>
  */
 const AccordionHeading = forwardRef(function AccordionHeading({ className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("u-summary", { class: cl('ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
-            className), ref: ref, ...rest }) }));
+    /* Set `className` as `class` so react is happy */
+    return jsx("u-summary", { ref: ref, class: className, ...rest });
 });
 
 export { AccordionHeading };

package/dist/esm/components/Accordion/AccordionItem.js

@@ -2,75 +2,39 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
-import { forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import '@u-elements/u-details';
 
 /**
- * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * Accordion item component, contains `Accordion.Heading` and `Accordion.Content` components.
  * @example
  * <AccordionItem>
- *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionHeading>Header</AccordionHeading>
  *  <AccordionContent>Content</AccordionContent>
  * </AccordionItem>
  */
-const AccordionItem = forwardRef(function AccordionItem({ className, open, defaultOpen = false, onFound, ...rest }, ref) {
-    const [internalOpen, setInternalOpen] = useState(open ?? defaultOpen);
-    const initialOpen = useRef(internalOpen); // Allow rendering initial open state on server, but animate in browser
-    const controlledOpen = useRef(internalOpen); // Using ref so we can access it inside useEffect without unbinding/binding event listeners
+const AccordionItem = forwardRef(function AccordionItem({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
     const detailsRef = useRef(null);
+    const initialOpen = useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
     const mergedRefs = useMergeRefs([detailsRef, ref]);
-    controlledOpen.current = open ?? internalOpen; // Update controlledOpen on prop change
-    // Control state with a useEffect to animate on prop change and prevent native <details> toggle
+    const onToggleRef = useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
     useEffect(() => {
         const details = detailsRef.current;
-        const summary = details?.querySelector(':scope > :is(summary,u-summary)');
-        const handleSummaryClick = (event) => {
-            event?.preventDefault(); // Prevent native <details> toggle so we can animate
-            setInternalOpen((open) => !open);
-        };
-        const handleToggle = () => {
-            if (!details || details.open === controlledOpen.current)
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
                 return;
-            onFound?.();
-            setInternalOpen(details?.open || false);
-            window.requestAnimationFrame(() => {
-                details.open = controlledOpen.current;
-            }); // Let onFound run before correcting state
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
         };
         details?.addEventListener('toggle', handleToggle, true);
-        summary?.addEventListener('click', handleSummaryClick);
-        return () => {
-            details?.removeEventListener('toggle', handleToggle, true);
-            summary?.removeEventListener('click', handleSummaryClick);
-        };
+        return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    useEffect(() => {
-        animateHeight(detailsRef.current, controlledOpen.current);
-    }, [controlledOpen.current]);
-    return (jsx("u-details", { class: cl('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
+    return (jsx("u-details", { class: cl('ds-accordion__item', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
 });
-const animateHeight = (details, open) => {
-    const content = details?.querySelector(':scope > :not(summary, u-summary)');
-    const hasContent = content instanceof HTMLElement;
-    const hasAnimate = details && 'animate' in details;
-    const hasReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    details?.setAttribute('data-chevron-open', `${open}`); // Make flip on click
-    if (hasReducedMotion || !hasAnimate || !hasContent) {
-        if (details)
-            details.open = open;
-    }
-    else if (details.open !== open) {
-        details.open = true;
-        const opened = `${content.scrollHeight}px`;
-        content.style.overflow = 'clip'; // Clip content while animating
-        content.animate({
-            height: [open ? '0px' : opened, open ? opened : '0px'],
-            paddingBlock: [open ? '0px' : '', open ? '' : '0px'],
-        }, { duration: 400, easing: 'ease-in-out' }).onfinish = () => {
-            content.style.removeProperty('overflow'); // Restore overlow
-            details.open = open;
-        };
-    }
-};
 
 export { AccordionItem };

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

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
@@ -10,7 +9,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }));
 });
 
 export { Alert };

package/dist/esm/components/Avatar/Avatar.js

@@ -4,12 +4,6 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, Fragment } from 'react';
 
-const fontSizeMap = {
-    xs: 'ds-paragraph--xs',
-    sm: 'ds-heading--2xs',
-    md: 'ds-heading--sm',
-    lg: 'ds-heading--md',
-};
 /**
  * Avatars are used to represent people or entities.
  *
@@ -28,7 +22,7 @@ const fontSizeMap = {
  */
 const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
     const Component = children && typeof children !== 'string' ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: cl('ds-avatar', fontSizeMap[size], className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
 });
 
 export { Avatar };

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

@@ -2,13 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const paragraphSizeMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-};
 /**
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
@@ -25,7 +19,7 @@ const paragraphSizeMap = {
  * ```
  */
 const Badge = forwardRef(function Badge({ className, color = 'accent', count, maxCount, overlap = 'rectangle', placement = 'top-right', size = 'md', ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsx("span", { className: cl('ds-badge', className), "data-color": color, "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, "data-size": size, ref: ref, ...rest }) }));
+    return (jsx("span", { className: cl('ds-badge', className), "data-color": color, "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, "data-size": size, ref: ref, ...rest }));
 });
 
 export { Badge };

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

@@ -2,8 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsx(Paragraph, { asChild: true, size: size, children: jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest }) })));
+const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest })));
 
 export { Breadcrumbs };

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

@@ -1,9 +1,8 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 import { Spinner } from '../loaders/Spinner/Spinner.js';
 
 /**
@@ -15,8 +14,10 @@ const Button = forwardRef(function Button({ asChild, className, children, color
     const Component = asChild ? Slot : 'button';
     const spinnerColor = color === 'accent' ? color : 'neutral';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, ...(asChild ? { asChild: true } : { type: 'button' }), ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
-                ), jsx(Slottable, { children: children })] }) }));
+    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "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', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+            ), jsx(Slottable, { children: children })] }));
 });
 
 export { Button };

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

@@ -1,22 +1,40 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 
 /**
  * Card component to present content in a structured way.
  * @example
  * <Card>
- *  <Card.Header>Header</Card.Header>
- *  <Card.Content>Content</Card.Content>
- *  <Card.Footer>Footer</Card.Footer>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
+const Card = forwardRef(function Card({ asChild = false, color = 'neutral', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: cl(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
+    const cardRef = useRef(null);
+    const mergedRefs = useMergeRefs([cardRef, ref]);
+    // Forward click on card to heading links for better accessibility
+    // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
+    useEffect(() => {
+        const card = cardRef.current;
+        const handleClick = ({ ctrlKey, metaKey, target }) => {
+            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
+            if (!link || link?.contains(target))
+                return; // Let links handle their own clicks
+            if (ctrlKey || metaKey)
+                window.open(link.href, '', 'noreferrer');
+            else
+                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+        };
+        card?.addEventListener('click', handleClick);
+        return () => card?.removeEventListener('click', handleClick);
+    }, []);
+    return (jsx(Component, { className: cl(`ds-card`, className), "data-color": color, ref: mergedRefs, ...rest }));
 });
-Card.displayName = 'Card';
 
 export { Card };

package/dist/esm/components/Card/{CardMedia.js → CardBlock.js}

@@ -4,10 +4,9 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
+const CardBlock = forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { className: cl(`ds-card__media`, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
 });
-CardMedia.displayName = 'CardMedia';
 
-export { CardMedia };
+export { CardBlock };

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

@@ -1,18 +1,10 @@
 'use client';
 import { Card as Card$1 } from './Card.js';
-import { CardContent } from './CardContent.js';
-import { CardFooter } from './CardFooter.js';
-import { CardHeader } from './CardHeader.js';
-import { CardMedia } from './CardMedia.js';
+import { CardBlock } from './CardBlock.js';
 
-const Card = Card$1;
-Card.Header = CardHeader;
-Card.Content = CardContent;
-Card.Footer = CardFooter;
-Card.Media = CardMedia;
-Card.Header.displayName = 'Card.Header';
-Card.Content.displayName = 'Card.Content';
-Card.Footer.displayName = 'Card.Footer';
-Card.Media.displayName = 'Card.Media';
+const Card = Object.assign(Card$1, {
+    Block: CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
 
-export { Card, CardContent, CardFooter, CardHeader, CardMedia };
+export { Card, CardBlock };

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

@@ -0,0 +1,45 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Chip.Button used for interaction
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = forwardRef(function ChipButton({ asChild, className, size, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    return (jsx(Component, { className: cl('ds-chip', className), "data-size": size, type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
+    return jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+});
+/**
+ * Chip.Checkbox used for multiselection
+ * @example
+ * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+ * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+ */
+const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, size, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? Slot : 'label';
+    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, ref: ref, children: [jsx("input", { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
+});
+/**
+ * Chip.Radio used for single selection
+ * @example
+ * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+ * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+ */
+const ChipRadio = forwardRef(function ChipRadio(props, ref) {
+    return jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,15 +1,15 @@
 'use client';
-import { Group } from './Group/Group.js';
-import { RemovableChip } from './Removable/Removable.js';
-import { ToggleChip } from './Toggle/Toggle.js';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './Chips.js';
 
 const Chip = {
-    Group: Group,
-    Removable: RemovableChip,
-    Toggle: ToggleChip,
+    Button: ChipButton,
+    Checkbox: ChipCheckbox,
+    Radio: ChipRadio,
+    Removable: ChipRemovable,
 };
-Chip.Group.displayName = 'Chip.Group';
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
 Chip.Removable.displayName = 'Chip.Removable';
-Chip.Toggle.displayName = 'Chip.Toggle';
 
-export { Chip, Group as ChipGroup, RemovableChip as ChipRemovable, ToggleChip as ChipToggle };
+export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,13 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useContext } from 'react';
-import { DropdownCtx } from './Dropdown.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import { forwardRef } from 'react';
 
-const DropdownHeading = forwardRef(function DropdownHeading({ children, className, ...rest }, ref) {
-    const { size } = useContext(DropdownCtx);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest, children: children }) }));
+const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return (jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest }));
 });
 
 export { DropdownHeading };

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
 import { ErrorSummaryContext } from './ErrorSummary.js';
-import { Heading } from '../Typography/Heading/Heading.js';
+import { Heading } from '../Heading/Heading.js';
 
 const HEADING_SIZE_MAP = {
     sm: '2xs',
@@ -15,7 +15,7 @@ const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className,
         if (id && headingId !== id)
             setHeadingId(id);
     }, [headingId, id, setHeadingId]);
-    return (jsx(Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+    return (jsx(Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], ref: ref, ...rest }));
 });
 
 export { ErrorSummaryHeading };