@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/cjs/components/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const BreadcrumbsItem = react.forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("li", { ref: ref, ...rest });
+});
+
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/cjs/components/breadcrumbs/breadcrumbs-link.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var link = require('../link/link.js');
+
+const BreadcrumbsLink = react.forwardRef(function BreadcrumbsLink(rest, ref) {
+    return (jsxRuntime.jsx(link.Link, { suppressHydrationWarning // Since <ds-breadcrumbs> adds aria-current="page"
+        : true, ref: ref, ...rest }));
+});
+
+exports.BreadcrumbsLink = BreadcrumbsLink;

package/dist/cjs/components/breadcrumbs/breadcrumbs-list.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const BreadcrumbsList = react.forwardRef(function BreadcrumbsList(rest, ref) {
+    return jsxRuntime.jsx("ol", { ref: ref, ...rest });
+});
+
+exports.BreadcrumbsList = BreadcrumbsList;

package/dist/cjs/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var cl = require('clsx/lite');
+var react = require('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 = react.forwardRef(({ className, ...rest }, ref) => (jsxRuntime.jsx("ds-breadcrumbs", { suppressHydrationWarning: true, class: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+
+exports.Breadcrumbs = Breadcrumbs;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var breadcrumbs = require('./breadcrumbs.js');
+var breadcrumbsItem = require('./breadcrumbs-item.js');
+var breadcrumbsLink = require('./breadcrumbs-link.js');
+var breadcrumbsList = require('./breadcrumbs-list.js');
+
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:'>
+ *  <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 BreadcrumbsComponent = Object.assign(breadcrumbs.Breadcrumbs, {
+    List: breadcrumbsList.BreadcrumbsList,
+    Item: breadcrumbsItem.BreadcrumbsItem,
+    Link: breadcrumbsLink.BreadcrumbsLink,
+});
+BreadcrumbsComponent.List.displayName = 'Breadcrumbs.List';
+BreadcrumbsComponent.Item.displayName = 'Breadcrumbs.Item';
+BreadcrumbsComponent.Link.displayName = 'Breadcrumbs.Link';
+
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
+exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
+exports.Breadcrumbs = BreadcrumbsComponent;

package/dist/cjs/components/button/button.js

@@ -0,0 +1,31 @@
+'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');
+var spinner = require('../spinner/spinner.js');
+
+/**
+ * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
+ */
+const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant, popoverTarget, popovertarget, commandfor, commandFor, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    const popoverVal = popoverTarget ?? popovertarget;
+    const popoverKey = react.version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    const commandForVal = commandFor ?? commandfor;
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxRuntime.jsxs(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup etc.
+        : true, "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, commandfor: commandForVal, "data-variant": variant, ref: ref, 
+        /* don't set type when we use `asChild` */
+        type: asChild ? undefined : 'button', [popoverKey]: popoverVal, ...rest, children: [loading === true ? (jsxRuntime.jsx(spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+            ), jsxRuntime.jsx(reactSlot.Slottable, { children: icon && loading ? null : children })] }));
+});
+
+exports.Button = Button;

package/dist/cjs/components/card/card-block.js

@@ -0,0 +1,14 @@
+'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');
+
+const CardBlock = react.forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
+});
+
+exports.CardBlock = CardBlock;

package/dist/cjs/components/card/card.js

@@ -0,0 +1,51 @@
+'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');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
+
+const ATTR_CLICKDELEGATE = 'data-clickdelegatefor';
+const SELECTOR_LINK = `:is(h1,h2,h3,h4,h5,h6) a`;
+const SELECTOR_SKIP = 'a,button,label,details,dialog,[role="button"],[popover],[contenteditable]';
+/**
+ * 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 = react.forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const cardRef = react.useRef(null);
+    const linkGeneratedId = react.useId();
+    const mergedRefs = useMergeRefs.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
+    react.useEffect(() => {
+        const card = cardRef.current;
+        const link = card?.querySelector(SELECTOR_LINK);
+        const skip = !link || link.parentElement?.closest(SELECTOR_SKIP); // Using parentElement as link variable will always match a selector
+        const id = link?.id;
+        if (card?.hasAttribute(ATTR_CLICKDELEGATE) || skip)
+            return; // Already delegated or skipped
+        link.id = id || linkGeneratedId;
+        card?.setAttribute(ATTR_CLICKDELEGATE, link.id);
+        return () => {
+            if (id && link)
+                link.id = id;
+            else
+                link?.removeAttribute('id');
+            card?.removeAttribute(ATTR_CLICKDELEGATE);
+        };
+    }, []);
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Card = Card;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var card = require('./card.js');
+var cardBlock = require('./card-block.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 CardComponent = Object.assign(card.Card, {
+    Block: cardBlock.CardBlock,
+});
+CardComponent.Block.displayName = 'Card.Block';
+
+exports.CardBlock = cardBlock.CardBlock;
+exports.Card = CardComponent;

package/dist/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../field/index.js');
+var input = require('../input/input.js');
+var label = require('../label/label.js');
+var validationMessage = require('../validation-message/validation-message.js');
+
+/**
+ * Checkbox used to select multiple options.
+ *
+ * @example
+ * <Checkbox label="I agree" value="agree" />
+ */
+const Checkbox = react.forwardRef(function Checkbox({ 'data-size': size, children, className, description, error, label: label$1, position, style, variant, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, "data-variant": variant, "data-position": position, className: className, style: style, children: [jsxRuntime.jsx(input.Input, { type: 'checkbox', ref: ref, ...rest }), !!label$1 && jsxRuntime.jsx(label.Label, { weight: 'regular', children: label$1 }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+});
+
+exports.Checkbox = Checkbox;

package/dist/cjs/components/chip/chips.js

@@ -0,0 +1,52 @@
+'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');
+var input = require('../input/input.js');
+
+/**
+ * Chip.Button used for interaction
+ *
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = react.forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = react.forwardRef(function ChipRemovable(props, ref) {
+    return jsxRuntime.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 = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsxRuntime.jsx(input.Input, { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.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 = react.forwardRef(function ChipRadio(props, ref) {
+    return jsxRuntime.jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+exports.ChipButton = ChipButton;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipRadio = ChipRadio;
+exports.ChipRemovable = ChipRemovable;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var chips = require('./chips.js');
+
+const ChipComponent = {
+    Button: chips.ChipButton,
+    Checkbox: chips.ChipCheckbox,
+    Radio: chips.ChipRadio,
+    Removable: chips.ChipRemovable,
+};
+ChipComponent.Button.displayName = 'Chip.Button';
+ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
+ChipComponent.Radio.displayName = 'Chip.Radio';
+ChipComponent.Removable.displayName = 'Chip.Removable';
+
+exports.ChipButton = chips.ChipButton;
+exports.ChipCheckbox = chips.ChipCheckbox;
+exports.ChipRadio = chips.ChipRadio;
+exports.ChipRemovable = chips.ChipRemovable;
+exports.Chip = ChipComponent;

package/dist/cjs/components/details/details-content.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Details content component, contains the content of the details item.
+ *
+ * @example
+ * <DetailsContent>Content</DetailsContent>
+ */
+const DetailsContent = react.forwardRef(function DetailsContent(rest, ref) {
+    return jsxRuntime.jsx("div", { ref: ref, ...rest });
+});
+
+exports.DetailsContent = DetailsContent;

package/dist/cjs/components/details/details-summary.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Details summary component, contains a the heading to toggle the content.
+ *
+ * @example
+ * <Details.Summary>Heading</Details.Summary>
+ */
+const DetailsSummary = react.forwardRef(function DetailsSummary(rest, ref) {
+    return (jsxRuntime.jsx("summary", { suppressHydrationWarning // Since <details> polyfill adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+exports.DetailsSummary = DetailsSummary;

package/dist/cjs/components/details/details.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, 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 = useMergeRefs.useMergeRefs([detailsRef, ref]);
+    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = react.useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
+    react.useEffect(() => {
+        const details = detailsRef.current;
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
+                return;
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
+        };
+        details?.addEventListener('toggle', handleToggle, true);
+        return () => details?.removeEventListener('toggle', handleToggle, true);
+    }, []);
+    return (jsxRuntime.jsx("details", { className: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Details = Details;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var details = require('./details.js');
+var detailsContent = require('./details-content.js');
+var detailsSummary = require('./details-summary.js');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const DetailsComponent = Object.assign(details.Details, {
+    Summary: detailsSummary.DetailsSummary,
+    Content: detailsContent.DetailsContent,
+});
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
+
+exports.DetailsContent = detailsContent.DetailsContent;
+exports.DetailsSummary = detailsSummary.DetailsSummary;
+exports.Details = DetailsComponent;

package/dist/cjs/components/dialog/dialog-block.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/dialog-trigger-context.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 = (rest) => {
+    const contextRef = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, ...rest });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+exports.Context = Context;
+exports.DialogTriggerContext = DialogTriggerContext;

package/dist/cjs/components/dialog/dialog-trigger.js

@@ -0,0 +1,34 @@
+'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('./dialog-trigger-context.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); // Using contextRef instead of command as this is instantly available and plays nice with tests
+    const Component = asChild ? reactSlot.Slot : button.Button;
+    const openDialog = () => {
+        /* check if element has `data-modal`, it it has, use `showModal` */
+        contextRef.current?.getAttribute('data-modal') === 'true'
+            ? contextRef.current?.showModal()
+            : contextRef.current?.show();
+    };
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup
+        : true, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;

package/dist/cjs/components/dialog/dialog.js

@@ -0,0 +1,78 @@
+'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');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
+var button = require('../button/button.js');
+var dialogTriggerContext = require('./dialog-trigger-context.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 command="show-modal" commandfor="my-dialog">Open Dialog</Button>
+ * <Dialog id="my-dialog">
+ *   Content
+ * </Dialog>
+ */
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', id, modal = true, onAnimationEnd, onClick, onClose, open, placement = 'center', ...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 = useMergeRefs.useMergeRefs([contextRef, ref, dialogRef]);
+    const autoId = react.useId();
+    const usedId = id ?? autoId;
+    // Toggle open based on prop
+    react.useEffect(() => {
+        if (open === undefined)
+            return; // Uncontrolled if open prop is not provided
+        const dialog = dialogRef.current;
+        if (dialog) {
+            if (open && !dialog.open)
+                dialog[modal ? 'showModal' : 'show']();
+            else
+                dialog.open = !!open; // Close with prop to prevent close event from firing
+        }
+    }, [open, modal]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), "data-placement": placement, "data-modal": modal, id: usedId, onClose: (event) => {
+            if (event.target !== event.currentTarget)
+                return; // Ignore close events from nested dialogs
+            onClose?.(event.nativeEvent); // Backward compatibility: expose native event
+        }, onClick: (event) => {
+            onClick?.(event);
+            const { currentTarget: dialog, target: el, defaultPrevented } = event;
+            const isClose = el?.closest?.('[data-command="close"]');
+            if (!defaultPrevented && isClose) {
+                dialog.close();
+                if (window.dsWarnings !== false)
+                    console.log('Designsystemet: data-command="close" is deprecated. Use command="close" and commandfor="DIALOG-ID" instead.');
+            }
+        }, onAnimationEnd: (event) => {
+            onAnimationEnd?.(event);
+            if (event.currentTarget !== event.target)
+                return; // Only run if event is from the dialog itself
+            const autofocus = event.currentTarget.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus(); // Handle autofocus on open
+        }, ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', command: 'close', commandfor: usedId })), children] }));
+});
+
+exports.Dialog = Dialog;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var dialog = require('./dialog.js');
+var dialogBlock = require('./dialog-block.js');
+var dialogTrigger = require('./dialog-trigger.js');
+var dialogTriggerContext = require('./dialog-trigger-context.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 DialogComponent = Object.assign(dialog.Dialog, {
+    Block: dialogBlock.DialogBlock,
+    TriggerContext: dialogTriggerContext.DialogTriggerContext,
+    Trigger: dialogTrigger.DialogTrigger,
+});
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
+
+exports.DialogBlock = dialogBlock.DialogBlock;
+exports.DialogTrigger = dialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = dialogTriggerContext.DialogTriggerContext;
+exports.Dialog = DialogComponent;