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

package/dist/esm/components/field/field.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ds-field';
+    const fieldRef = useRef(null);
+    const mergedRefs = useMergeRefs([fieldRef, ref]);
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-field', className) }
+            : { class: cl('ds-field', className) }), suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+export { Field };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Field } from './field.js';
+import { FieldAffix, FieldAffixes } from './field-affix.js';
+import { FieldCounter } from './field-counter.js';
+import { FieldDescription } from './field-description.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const FieldComponent = Object.assign(Field, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
+
+export { FieldComponent as Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/fieldset/fieldset-description.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Paragraph } from '../paragraph/paragraph.js';
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
+    return (jsx(Paragraph, { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+export { FieldsetDescription };

package/dist/esm/components/fieldset/fieldset-legend.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Label } from '../label/label.js';
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+ */
+const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsx(Label, { asChild: true, children: jsx("legend", { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+            : true, ref: ref, ...rest }) }));
+});
+
+export { FieldsetLegend };

package/dist/esm/components/fieldset/fieldset.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsx("fieldset", { className: cl('ds-fieldset', className), suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+export { Fieldset };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Fieldset } from './fieldset.js';
+import { FieldsetDescription } from './fieldset-description.js';
+import { FieldsetLegend } from './fieldset-legend.js';
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const FieldsetComponent = Object.assign(Fieldset, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
+
+export { FieldsetComponent as Fieldset, FieldsetDescription, FieldsetLegend };

package/dist/esm/components/heading/heading.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : `h${level}`;
+    return (jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
+});
+
+export { Heading };

package/dist/esm/components/input/input.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+export { Input };

package/dist/esm/components/label/label.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = forwardRef(function Label({ className, weight, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'label';
+    return (jsx(Component, { ref: ref, className: cl('ds-label', className), suppressHydrationWarning // Since <ds-field> will add for attribute dynamically
+        : true, "data-weight": weight, ...rest }));
+});
+
+export { Label };

package/dist/esm/components/link/link.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
+const Link = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'a';
+    return (jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
+});
+Link.displayName = 'Link';
+
+export { Link };

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

@@ -0,0 +1,14 @@
+'use client';
+import { ListItem } from './list-item.js';
+import { ListOrdered, ListUnordered } from './lists.js';
+
+const ListComponent = {
+    Item: ListItem,
+    Ordered: ListOrdered,
+    Unordered: ListUnordered,
+};
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
+
+export { ListComponent as List, ListItem, ListOrdered, ListUnordered };

package/dist/esm/components/list/list-item.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
+const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { ListItem };

package/dist/esm/components/list/lists.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : tagName;
+    return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
+ */
+const ListUnordered = forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
+});
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
+ */
+const ListOrdered = forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
+});
+
+export { ListOrdered, ListUnordered };

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

@@ -0,0 +1,34 @@
+'use client';
+import { Pagination } from './pagination.js';
+import { PaginationButton } from './pagination-button.js';
+import { PaginationItem } from './pagination-item.js';
+import { PaginationList } from './pagination-list.js';
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationComponent = Object.assign(Pagination, {
+    List: PaginationList,
+    Item: PaginationItem,
+    Button: PaginationButton,
+});
+PaginationComponent.List.displayName = 'Pagination.List';
+PaginationComponent.Item.displayName = 'Pagination.Item';
+PaginationComponent.Button.displayName = 'Pagination.Button';
+
+export { PaginationComponent as Pagination, PaginationButton, PaginationItem, PaginationList };

package/dist/esm/components/pagination/pagination-button.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <PaginationItem>
+ *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ * </PaginationItem>
+ */
+const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
+    return jsx(Button, { ref: ref, ...rest });
+});
+
+export { PaginationButton };

package/dist/esm/components/pagination/pagination-item.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
+ */
+const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ref: ref, ...rest });
+});
+
+export { PaginationItem };

package/dist/esm/components/pagination/pagination-list.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
+ * </Pagination>
+ */
+const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ul';
+    return jsx(Component, { ref: ref, ...rest });
+});
+
+export { PaginationList };

package/dist/esm/components/pagination/pagination.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ds-pagination';
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-pagination', className) }
+            : { class: cl('ds-pagination', className) }), suppressHydrationWarning // Since ds-pagination will change aria-label and role after hydration
+        : true, ref: ref, ...rest }));
+});
+
+export { Pagination };

package/dist/esm/components/paragraph/paragraph.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+const Paragraph = forwardRef(function Paragraph({ className, asChild, variant = 'default', ...rest }, ref) {
+    const Component = asChild ? Slot : 'p';
+    return (jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
+});
+
+export { Paragraph };

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

@@ -0,0 +1,24 @@
+'use client';
+import { Popover } from './popover.js';
+import { PopoverTrigger } from './popover-trigger.js';
+import { PopoverTriggerContext } from './popover-trigger-context.js';
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverComponent = Object.assign(Popover, {
+    TriggerContext: PopoverTriggerContext,
+    Trigger: PopoverTrigger,
+});
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
+
+export { PopoverComponent as Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger-context.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useId, useState } from 'react';
+
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTriggerContext = ({ children, }) => {
+    const randomPopoverId = useId();
+    const [popoverId, setPopoverId] = useState(randomPopoverId);
+    return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+const Context = createContext({});
+
+export { Context, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useContext, version } from 'react';
+import { Button } from '../button/button.js';
+import { Context } from './popover-trigger-context.js';
+
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ *
+ * @example inline
+ * <PopoverTriggerContext>
+ *   <Paragraph>
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
+    const { popoverId } = useContext(Context);
+    const Component = asChild ? Slot : inline ? 'button' : Button;
+    const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
+    const popoverKey = version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    return (jsx(Component, { ref: ref, "data-popover": inline ? 'inline' : undefined, [popoverKey]: popoverVal, ...rest }));
+});
+
+export { PopoverTrigger };

package/dist/esm/components/popover/popover.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import '@digdir/designsystemet-web';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './popover-trigger-context.js';
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+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]);
+    const { popoverId, setPopoverId } = useContext(Context);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = `[popovertarget="${popover?.id}"],[commandfor="${popover?.id}"]`;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(trigger);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger)
+                event.preventDefault(); // Prevent native Popover API
+            if (controlledOpen && (isTrigger || isOutside)) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+            else if (!controlledOpen && isTrigger) {
+                setInternalOpen(true);
+                onOpen?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key === 'Escape' && controlledOpen && isTopLayer(popover)) {
+                event.preventDefault(); // Prevent closing fullscreen in Safari
+                document.querySelector(trigger)?.focus?.(); // Move focus back to trigger since `popover="manual"` doesn't do this
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        popover?.togglePopover?.(controlledOpen);
+        if (controlledOpen) {
+            const options = { detail: document.querySelector(trigger) };
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
+        }
+        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Update context with id
+    useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+        : true, ...rest }));
+});
+// NOTE: This is not able to check if the popover is the most recently added #topLayer,
+// so we need another method in time, or remove the controlled popover="manual" in a v2
+const isTopLayer = (checkElement) => {
+    if (!checkElement)
+        return false;
+    const { x, y, width, height } = checkElement.getBoundingClientRect();
+    const topElement = document.elementFromPoint(x + width / 2, y + height / 2);
+    // If the element on top is on browser #top-layer but not same as provided element, then provided element is not on top
+    for (let el = topElement; el; el = el.parentElement) {
+        if (checkElement === el)
+            return true; // If the topElement is same as provided element, it's on top
+        if (el instanceof HTMLDialogElement && el.open)
+            return false; // Check for open dialog
+        if (el.classList.contains(':popover-open'))
+            return false; // Polyfill support
+        if (el.matches(':popover-open'))
+            return false; // Native support
+    }
+    return false;
+};
+
+export { Popover };