@digdir/designsystemet-react 0.100.52 → 0.101.0

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

@@ -16,7 +16,7 @@ var react = require('react');
  *   <Icon />
  * </Badge>
  */
-const Badge = react.forwardRef(function Badge({ className, count, maxCount, 'data-variant': variant = 'base', ...rest }, ref) {
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, 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 }));
 });
 

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

@@ -16,7 +16,7 @@ var Spinner = require('../Spinner/Spinner.js');
 const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'button';
     // 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, 
+    return (jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": 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' })) : (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-variant': variant = 'default', className, ...rest }, ref) {
+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 mergedRefs = react$1.useMergeRefs([cardRef, ref]);

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, 'data-variant': variant = 'default', onToggle, ...rest }, ref) {
+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 = react$1.useMergeRefs([detailsRef, ref]);

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

@@ -27,23 +27,29 @@ var Button = require('../Button/Button.js');
  *
  * ...
  *
- * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Button onClick={() => dialogRef.current?.showModal()}>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 Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...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
+    const showProp = modal ? 'showModal' : 'show';
+    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
     react.useEffect(() => {
         const dialog = dialogRef.current;
-        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+        const handleClosedby = (event) => {
+            const { clientY: y, clientX: x, target } = event;
+            if (event instanceof KeyboardEvent)
+                return (closedby === 'none' &&
+                    event.key === 'Escape' &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
             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) {
+            if (dialog && target === dialog && closedby === 'any') {
                 const { top, left, right, bottom } = dialog.getBoundingClientRect();
                 const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
                 if (!isInDialog)
@@ -56,19 +62,21 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
                 autofocus?.focus();
         };
         dialog?.addEventListener('animationend', handleAutoFocus);
-        dialog?.addEventListener('click', handleBackdropClick);
+        dialog?.addEventListener('click', handleClosedby);
+        dialog?.addEventListener('keydown', handleClosedby);
         return () => {
             dialog?.removeEventListener('animationend', handleAutoFocus);
-            dialog?.removeEventListener('click', handleBackdropClick);
+            dialog?.removeEventListener('click', handleClosedby);
+            dialog?.removeEventListener('keydown', handleClosedby);
         };
-    }, [backdropClose]);
+    }, [closedby]);
     /* 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] }));
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...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/DialogTrigger.js

@@ -21,7 +21,13 @@ var DialogTriggerContext = require('./DialogTriggerContext.js');
 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 }));
+    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, ...rest }));
 });
 
 exports.DialogTrigger = DialogTrigger;

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, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, 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]);

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

@@ -31,6 +31,7 @@ const Suggestion = react.forwardRef(function Suggestion({ className, filter = tr
         // Let <datalist> handle filtering if filter is true
         if (filter === true || !list)
             return;
+        console.log(list);
         // Handle custom filter
         if (filter !== false) {
             let index = 0;

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

@@ -33,15 +33,19 @@ const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label'
     };
     return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
 });
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
 const setReactInputValue = (input, value) => {
-    const previousValue = input.value;
-    input.value = value;
-    const tracker = input._valueTracker;
-    if (typeof tracker !== 'undefined') {
-        tracker.setValue(previousValue);
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
     }
-    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
-    input.dispatchEvent(new Event('change', { bubbles: true }));
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
 };
 
 exports.SuggestionClear = SuggestionClear;

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

@@ -14,7 +14,7 @@ import { forwardRef } from 'react';
  *   <Icon />
  * </Badge>
  */
-const Badge = forwardRef(function Badge({ className, count, maxCount, 'data-variant': variant = 'base', ...rest }, ref) {
+const Badge = forwardRef(function Badge({ className, count, maxCount, 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 }));
 });
 

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

@@ -14,7 +14,7 @@ import { Spinner } from '../Spinner/Spinner.js';
 const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
     // 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, 
+    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": 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' })) : (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-variant': variant = 'default', className, ...rest }, ref) {
+const Card = forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const cardRef = useRef(null);
     const mergedRefs = useMergeRefs([cardRef, ref]);

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, 'data-variant': variant = 'default', onToggle, ...rest }, ref) {
+const Details = forwardRef(function Details({ className, open, defaultOpen = false, 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]);

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

@@ -25,23 +25,29 @@ import { Button } from '../Button/Button.js';
  *
  * ...
  *
- * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Button onClick={() => dialogRef.current?.showModal()}>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 Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
     const contextRef = useContext(Context);
     const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? Slot : 'dialog';
     const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
-    useEffect(() => dialogRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    const showProp = modal ? 'showModal' : 'show';
+    useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
     useEffect(() => {
         const dialog = dialogRef.current;
-        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+        const handleClosedby = (event) => {
+            const { clientY: y, clientX: x, target } = event;
+            if (event instanceof KeyboardEvent)
+                return (closedby === 'none' &&
+                    event.key === 'Escape' &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
             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) {
+            if (dialog && target === dialog && closedby === 'any') {
                 const { top, left, right, bottom } = dialog.getBoundingClientRect();
                 const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
                 if (!isInDialog)
@@ -54,19 +60,21 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
                 autofocus?.focus();
         };
         dialog?.addEventListener('animationend', handleAutoFocus);
-        dialog?.addEventListener('click', handleBackdropClick);
+        dialog?.addEventListener('click', handleClosedby);
+        dialog?.addEventListener('keydown', handleClosedby);
         return () => {
             dialog?.removeEventListener('animationend', handleAutoFocus);
-            dialog?.removeEventListener('click', handleBackdropClick);
+            dialog?.removeEventListener('click', handleClosedby);
+            dialog?.removeEventListener('keydown', handleClosedby);
         };
-    }, [backdropClose]);
+    }, [closedby]);
     /* 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] }));
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
 });
 
 export { Dialog };

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

@@ -19,7 +19,13 @@ import { Context } from './DialogTriggerContext.js';
 const DialogTrigger = forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
     const contextRef = useContext(Context);
     const Component = asChild ? Slot : Button;
-    return (jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
+    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 (jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
 });
 
 export { DialogTrigger };

package/dist/esm/components/Popover/Popover.js

@@ -24,7 +24,7 @@ import { Context } from './PopoverTriggerContext.js';
  *   Content
  * </Popover>
  */
-const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);
     const mergedRefs = useMergeRefs([popoverRef, ref]);

package/dist/esm/components/Suggestion/Suggestion.js

@@ -29,6 +29,7 @@ const Suggestion = forwardRef(function Suggestion({ className, filter = true, as
         // Let <datalist> handle filtering if filter is true
         if (filter === true || !list)
             return;
+        console.log(list);
         // Handle custom filter
         if (filter !== false) {
             let index = 0;

package/dist/esm/components/Suggestion/SuggestionClear.js

@@ -31,15 +31,19 @@ const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': labe
     };
     return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
 });
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
 const setReactInputValue = (input, value) => {
-    const previousValue = input.value;
-    input.value = value;
-    const tracker = input._valueTracker;
-    if (typeof tracker !== 'undefined') {
-        tracker.setValue(previousValue);
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
     }
-    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
-    input.dispatchEvent(new Event('change', { bubbles: true }));
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
 };
 
 export { SuggestionClear, setReactInputValue };

package/dist/types/colors.d.ts

@@ -13,9 +13,12 @@ export interface MainAndSupportColors {
  * If {@link MainAndSupportColors} has been extended to include color names, return T,
  * otherwise return the arbitrary string type.
  */
-type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject ? string & {} : T;
-export type SeverityColors = 'info' | 'success' | 'warning' | 'danger';
-export type CustomColors = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
-export type Color = CustomColors | ColorWithFallback<SeverityColors>;
+type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject ? string : T;
+export type SeverityInfo = 'info';
+export type SeveritySuccess = 'success';
+export type SeverityWarning = 'warning';
+export type SeverityDanger = 'danger';
+export type SeverityColors = SeverityInfo | SeveritySuccess | SeverityWarning | SeverityDanger;
+export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
 export {};
 //# sourceMappingURL=colors.d.ts.map

package/dist/types/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,iBAAiB,EAAE,OAAO,MAAM,CAAC;AAC/C,KAAK,WAAW,GAAG;IAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEnD;;;;GAIG;AAGH,MAAM,WAAW,oBAAoB;CAAG;AAExC;;;GAGG;AACH,KAAK,iBAAiB,CAAC,CAAC,IAAI,oBAAoB,SAAS,WAAW,GAChE,MAAM,GAAG,EAAE,GACX,CAAC,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,SAAS,GAAG,MAAM,oBAAoB,CACvC,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,YAAY,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,iBAAiB,EAAE,OAAO,MAAM,CAAC;AAC/C,KAAK,WAAW,GAAG;IAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEnD;;;;GAIG;AAGH,MAAM,WAAW,oBAAoB;CAAG;AAExC;;;GAGG;AACH,KAAK,iBAAiB,CAAC,CAAC,IAAI,oBAAoB,SAAS,WAAW,GAChE,MAAM,GACN,CAAC,CAAC;AAEN,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAClC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,cAAc,GACtB,YAAY,GACZ,eAAe,GACf,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,MAAM,KAAK,GAAG,iBAAiB,CAAC,SAAS,GAAG,MAAM,oBAAoB,CAAC,CAAC"}

package/dist/types/components/Badge/Badge.d.ts

@@ -1,3 +1,4 @@
+import type { Color, SeverityColors } from '@digdir/designsystemet-react/colors';
 import { type HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
@@ -15,7 +16,11 @@ export type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElemen
      *
      * @default 'base'
      */
-    'data-variant'?: 'base' | 'tinted';
+    variant?: 'base' | 'tinted';
+    /**
+     * Change the color scheme of the badge
+     */
+    'data-color'?: Color | SeverityColors;
     children?: never;
 }>;
 /**
@@ -29,7 +34,7 @@ export type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElemen
  *   <Icon />
  * </Badge>
  */
-export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "children" | "data-variant" | "count" | "maxCount"> & {
+export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "data-color" | "children" | "variant" | "count" | "maxCount"> & {
     /**
      * The number to display in the badge
      */
@@ -43,7 +48,11 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps &
      *
      * @default 'base'
      */
-    'data-variant'?: "base" | "tinted";
+    variant?: "base" | "tinted";
+    /**
+     * Change the color scheme of the badge
+     */
+    'data-color'?: Color | SeverityColors;
     children?: never;
 } & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/types/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK;IA7Bd;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;;OAIG;qBACc,MAAM,GAAG,QAAQ;eACvB,KAAK;yCA8BlB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,KAAK,EACL,cAAc,EACf,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK;IAjCd;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;;OAIG;cACO,MAAM,GAAG,QAAQ;IAC3B;;OAEG;mBACY,KAAK,GAAG,cAAc;eAC1B,KAAK;yCA8BlB,CAAC"}

package/dist/types/components/Badge/index.d.ts

@@ -5,10 +5,11 @@ import { BadgePosition } from './BadgePosition';
  * @example without children
  * <Badge count={5} maxCount={10} />
  */
-declare const Badge: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "children" | "data-variant" | "count" | "maxCount"> & {
+declare const Badge: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "data-color" | "children" | "variant" | "count" | "maxCount"> & {
     count?: number;
     maxCount?: number;
-    'data-variant'?: "base" | "tinted";
+    variant?: "base" | "tinted";
+    'data-color'?: import("../../colors").Color | import("../../colors").SeverityColors;
     children?: never;
 } & React.RefAttributes<HTMLSpanElement>> & {
     Position: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {

package/dist/types/components/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;GAKG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;CAAuD,CAAC;AAInE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;GAKG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;CAAuD,CAAC;AAInE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/types/components/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import type { Color, SeverityDanger } from '@digdir/designsystemet-react/colors';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
@@ -7,6 +8,10 @@ export type ButtonProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLBut
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Change the color scheme of the button
+     */
+    'data-color'?: Color | SeverityDanger;
     /**
      * Toggle icon only styling, pass icon as children
      * @default false
@@ -36,12 +41,16 @@ export type ButtonProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLBut
  * @example
  * <Button>Click me</Button>
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "type" | "variant" | "icon" | "loading" | "asChild"> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "type" | "data-color" | "variant" | "icon" | "loading" | "asChild"> & {
     /**
      * Specify which variant to use
      * @default 'primary'
      */
     variant?: "primary" | "secondary" | "tertiary";
+    /**
+     * Change the color scheme of the button
+     */
+    'data-color'?: Color | SeverityDanger;
     /**
      * Toggle icon only styling, pass icon as children
      * @default false

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACxD,CACF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;IApCf;;;OAGG;cACO,SAAS,GAAG,WAAW,GAAG,UAAU;IAC9C;;;OAGG;WACI,OAAO;IACd;;;;;OAKG;cACO,OAAO,GAAG,SAAS;IAC7B;;;OAGG;cACO,OAAO;IACjB;;;OAGG;WACI,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;2CA+CzD,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,KAAK,EACL,cAAc,EACf,MAAM,qCAAqC,CAAC;AAI7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACxD,CACF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;IAxCf;;;OAGG;cACO,SAAS,GAAG,WAAW,GAAG,UAAU;IAC9C;;OAEG;mBACY,KAAK,GAAG,cAAc;IACrC;;;OAGG;WACI,OAAO;IACd;;;;;OAKG;cACO,OAAO,GAAG,SAAS;IAC7B;;;OAGG;cACO,OAAO;IACjB;;;OAGG;WACI,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;2CAgDzD,CAAC"}

package/dist/types/components/Card/Card.d.ts

@@ -7,7 +7,7 @@ export type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>
      *
      * @default 'default'
      */
-    'data-variant'?: 'default' | 'tinted';
+    variant?: 'default' | 'tinted';
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -26,13 +26,13 @@ export type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-export declare const Card: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "data-variant"> & {
+export declare const Card: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "variant" | "asChild"> & {
     /**
      * Change the background color of the card.
      *
      * @default 'default'
      */
-    'data-variant'?: "default" | "tinted";
+    variant?: "default" | "tinted";
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false

package/dist/types/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI;IA1Bb;;;;OAIG;qBACc,SAAS,GAAG,QAAQ;IACrC;;;OAGG;cACO,OAAO;IACjB,gEAAgE;cACtD,SAAS;wCAgDrB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI;IA1Bb;;;;OAIG;cACO,SAAS,GAAG,QAAQ;IAC9B;;;OAGG;cACO,OAAO;IACjB,gEAAgE;cACtD,SAAS;wCAgDrB,CAAC"}

package/dist/types/components/Card/index.d.ts

@@ -9,8 +9,8 @@ import { CardBlock } from './CardBlock';
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-declare const Card: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "data-variant"> & {
-    'data-variant'?: "default" | "tinted";
+declare const Card: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "children" | "variant" | "asChild"> & {
+    variant?: "default" | "tinted";
     asChild?: boolean;
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>> & {

package/dist/types/components/Details/Details.d.ts

@@ -8,7 +8,7 @@ export type DetailsProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDetailsE
      *
      * @default 'default'
      */
-    'data-variant'?: 'default' | 'tinted';
+    variant?: 'default' | 'tinted';
     /**
      * Controls open-state.
      *

package/dist/types/components/Details/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,EACjD;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,GACC,CACI;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,GACnD;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CACtD,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,yFA2CnB,CAAC"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,EACjD;IACE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,GACC,CACI;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,GACnD;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CACtD,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,yFA2CnB,CAAC"}

package/dist/types/components/Dialog/Dialog.d.ts

@@ -8,10 +8,23 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
      */
     closeButton?: string | false;
     /**
-     * Close on backdrop click.
-     * @default false
+     * Light dismiss behavior, allowing to close on backdrop click  by setting `closedby="any"`.
+     *
+     * @default 'closerequest'
+     */
+    closedby?: 'none' | 'closerequest' | 'any';
+    /**
+     * Toogle modal and non-modal dialog.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#creating_a_modal_dialog
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * @note Unlike standard html, where the open attribute always opens a non-modal dialog, Dialog's open prop uses the `modal` prop to determine whether the Dialog is modal or non-modal
      */
-    backdropClose?: boolean;
+    open?: boolean;
     /**
      * Callback that is called when the dialog is closed.
      */
@@ -40,22 +53,35 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
  *
  * ...
  *
- * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
  * <Dialog ref={dialogRef}>
  *   Content
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "onClose" | "closeButton" | "backdropClose"> & {
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "onClose" | "closeButton" | "closedby" | "modal"> & {
     /**
      * Screen reader label of close button. Set false to hide the close button.
      * @default 'Lukk dialogvindu'
      */
     closeButton?: string | false;
     /**
-     * Close on backdrop click.
-     * @default false
+     * Light dismiss behavior, allowing to close on backdrop click  by setting `closedby="any"`.
+     *
+     * @default 'closerequest'
+     */
+    closedby?: "none" | "closerequest" | "any";
+    /**
+     * Toogle modal and non-modal dialog.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#creating_a_modal_dialog
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * @note Unlike standard html, where the open attribute always opens a non-modal dialog, Dialog's open prop uses the `modal` prop to determine whether the Dialog is modal or non-modal
      */
-    backdropClose?: boolean;
+    open?: boolean;
     /**
      * Callback that is called when the dialog is closed.
      */

package/dist/types/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA7Cf;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;OAGG;oBACa,OAAO;IACvB;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CA+GpB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA1Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAoHpB,CAAC"}