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

package/dist/cjs/components/Badge/Badge.js

@@ -16,8 +16,8 @@ var react = require('react');
  *   <Icon />
  * </Badge>
  */
-const Badge = react.forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
-    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, 'data-variant': variant = 'base', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/Button/Button.js

@@ -18,7 +18,7 @@ const Button = react.forwardRef(function Button({ asChild, className, children,
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (jsxRuntime.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 ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true', "data-size": 'sm' })) : (loading // Allow custom loading spinner
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
             ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
 });
 

package/dist/cjs/components/Card/Card.js

@@ -17,7 +17,7 @@ var react = require('react');
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = react.forwardRef(function Card({ asChild = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
+const Card = react.forwardRef(function Card({ asChild = false, 'data-variant': variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const cardRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([cardRef, ref]);
@@ -37,7 +37,7 @@ const Card = react.forwardRef(function Card({ asChild = false, 'data-color': col
         card?.addEventListener('click', handleClick);
         return () => card?.removeEventListener('click', handleClick);
     }, []);
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-color": color, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 exports.Card = Card;

package/dist/cjs/components/Combobox/Combobox.js

@@ -47,7 +47,6 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
     });
     const formFieldProps = useFormField.useFormField({
         disabled,
-        readOnly,
         error,
         errorId,
         size,
@@ -133,7 +132,6 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
         open,
         interactiveChildren,
         setOpen,
-        setInputValue,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = reactVirtual.useVirtualizer({

package/dist/cjs/components/Details/Details.js

@@ -16,7 +16,7 @@ require('@u-elements/u-details');
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, 'data-variant': variant = 'default', onToggle, ...rest }, ref) {
     const detailsRef = react.useRef(null);
     const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
     const mergedRefs = react$1.useMergeRefs([detailsRef, ref]);
@@ -37,7 +37,7 @@ const Details = react.forwardRef(function Details({ className, open, defaultOpen
         details?.addEventListener('toggle', handleToggle, true);
         return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 exports.Details = Details;

package/dist/cjs/components/Dialog/Dialog.js

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+var Button = require('../Button/Button.js');
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? reactSlot.Slot : 'dialog';
+    const mergedRefs = react$1.useMergeRefs([contextRef, ref, dialogRef]);
+    react.useEffect(() => dialogRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    react.useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && backdropClose) {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleBackdropClick);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleBackdropClick);
+        };
+    }, [backdropClose]);
+    /* handle closing */
+    react.useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+exports.Dialog = Dialog;

package/dist/cjs/components/Dialog/DialogBlock.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+const DialogBlock = react.forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+exports.DialogBlock = DialogBlock;

package/dist/cjs/components/Dialog/DialogTrigger.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var Button = require('../Button/Button.js');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : Button.Button;
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;

package/dist/cjs/components/Dialog/DialogTriggerContext.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = react.createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+exports.Context = Context;
+exports.DialogTriggerContext = DialogTriggerContext;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var Dialog$1 = require('./Dialog.js');
+var DialogBlock = require('./DialogBlock.js');
+var DialogTrigger = require('./DialogTrigger.js');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1.Dialog, {
+    Block: DialogBlock.DialogBlock,
+    TriggerContext: DialogTriggerContext.DialogTriggerContext,
+    Trigger: DialogTrigger.DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+exports.DialogBlock = DialogBlock.DialogBlock;
+exports.DialogTrigger = DialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
+exports.Dialog = Dialog;

package/dist/cjs/components/Popover/Popover.js

@@ -26,7 +26,7 @@ var PopoverTriggerContext = require('./PopoverTriggerContext.js');
  *   Content
  * </Popover>
  */
-const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([popoverRef, ref]);
@@ -97,7 +97,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
     }, [id]);
     return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
         // @ts-ignore @types/react-dom does not understand popover yet
-        popover: 'manual', ref: mergedRefs, ...rest }));
+        popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',

package/dist/cjs/components/Suggestion/Suggestion.js

@@ -34,9 +34,8 @@ const Suggestion = react.forwardRef(function Suggestion({ className, filter = tr
         // Handle custom filter
         if (filter !== false) {
             let index = 0;
-            for (const option of list.children) {
-                // Skip <datalist> children that are not <option>
-                if ('value' in option)
+            for (const option of list.getElementsByTagName('u-option')) {
+                if (!option.hasAttribute('data-empty'))
                     option.disabled = !filter({
                         index: index++, // Increment index for each <option>
                         input,

package/dist/cjs/components/Suggestion/SuggestionEmpty.js

@@ -2,7 +2,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
 /**
@@ -15,9 +14,10 @@ var react = require('react');
  *   <Suggestion.Empty>Tomt</Suggestion.Empty>
  * </Suggestion.List>
  */
-const SuggestionEmpty = react.forwardRef(function SuggestionEmpty({ asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { "aria-disabled": 'true', ref: ref, role: 'option', tabIndex: 0, ...rest }));
+const SuggestionEmpty = react.forwardRef(function SuggestionEmpty(rest, ref) {
+    return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    jsxRuntime.jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
 });
 
 exports.SuggestionEmpty = SuggestionEmpty;

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');
@@ -104,6 +103,7 @@ var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEf
 var useMediaQuery = require('./utilities/hooks/useMediaQuery/useMediaQuery.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');
@@ -142,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;
@@ -173,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;
@@ -218,6 +217,7 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayou
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
 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/{components/Pagination → utilities/hooks/usePagination}/usePagination.js

@@ -43,7 +43,7 @@ const getSteps = (now, max, show) => {
  *   </Pagination.Item>
  * </Pagination>
  **/
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => react.useMemo(() => {
+const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => react.useMemo(() => {
     const hasNext = currentPage < totalPages;
     const hasPrev = currentPage !== 1;
     const handleClick = (page) => (event) => {
@@ -56,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/Badge/Badge.js

@@ -14,8 +14,8 @@ import { forwardRef } from 'react';
  *   <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/Button/Button.js

@@ -1,6 +1,6 @@
 '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';
@@ -16,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

@@ -15,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]);
@@ -35,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/Chip/Chips.js

@@ -1,6 +1,6 @@
 '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';

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,

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
@@ -45,7 +45,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     });
     const formFieldProps = useFormField({
         disabled,
-        readOnly,
         error,
         errorId,
         size,
@@ -131,7 +130,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         open,
         interactiveChildren,
         setOpen,
-        setInputValue,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = useVirtualizer({

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

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

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

@@ -1,5 +1,5 @@
 'use client';
-import { useFloating, autoUpdate, flip, size, offset, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
+import { useFloating, flip, size, offset, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';

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

@@ -14,7 +14,7 @@ import '@u-elements/u-details';
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
+const Details = forwardRef(function Details({ className, open, defaultOpen = false, 'data-variant': variant = 'default', 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]);
@@ -35,7 +35,7 @@ const Details = forwardRef(function Details({ className, open, defaultOpen = fal
         details?.addEventListener('toggle', handleToggle, true);
         return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    return (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
+    return (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 export { Details };

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsxs, 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, useContext, useRef, useEffect } from 'react';
+import { Context } from './DialogTriggerContext.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...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';
+    const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
+    useEffect(() => dialogRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && backdropClose) {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleBackdropClick);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleBackdropClick);
+        };
+    }, [backdropClose]);
+    /* handle closing */
+    useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, ...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] }));
+});
+
+export { Dialog };