@norges-domstoler/dds-components 0.0.0-dev-20260902084124 → 0.0.0-dev-20260902100140

package/dist/index.cjs

@@ -1127,51 +1127,10 @@ function handleElementWithBackdropUnmount(container) {
 //#region src/components/helpers/Backdrop/Backdrop.module.css
 var Backdrop_module_default = {
 	"backdrop": "dds-Backdrop-module__backdrop",
-	"drawer": "dds-Backdrop-module__drawer",
-	"modal": "dds-Backdrop-module__modal",
 	"backdrop--visible": "dds-Backdrop-module__backdrop--visible",
 	"backdrop--hidden": "dds-Backdrop-module__backdrop--hidden"
 };
 //#endregion
-//#region src/components/helpers/Backdrop/Backdrop.tsx
-/**
-* Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
-*
-* @component
-* @param {Object} props - Props for komponenten.
-* @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
-* @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
-* @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
-* @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
-* @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
-*
-* @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
-
-* @example
-* ```tsx
-* <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
-*   <ModalContent />
-* </Backdrop>
-* ```
-*/
-const Backdrop = ({ isMounted, zIndex, ...props }) => {
-	const isMountedCn = isMounted ? "visible" : "hidden";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn(Backdrop_module_default.backdrop, Backdrop_module_default[zIndex], Backdrop_module_default[`backdrop--${isMountedCn}`]),
-		...props
-	});
-};
-Backdrop.displayName = "Backdrop";
-//#endregion
-//#region src/components/helpers/Dropdown/DropdownItem.module.css
-var DropdownItem_module_default = {
-	"item": "dds-DropdownItem-module__item",
-	"default": "dds-DropdownItem-module__default",
-	"danger": "dds-DropdownItem-module__danger",
-	"item--interactive": "dds-DropdownItem-module__item--interactive",
-	"item--loading": "dds-DropdownItem-module__item--loading"
-};
-//#endregion
 //#region src/types/BaseComponentProps.ts
 function pruneUndefined(obj) {
 	return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
@@ -1294,31 +1253,6 @@ const isElevation = (value) => {
 	return typeof value === "string" && ELEVATIONS.includes(value);
 };
 //#endregion
-//#region src/components/Icon/Icon.tsx
-const getSize = (iconSize) => {
-	switch (iconSize) {
-		case "small": return "var(--dds-size-icon-small)";
-		case "medium": return "var(--dds-size-icon-medium)";
-		case "large": return "var(--dds-size-icon-large)";
-		case "component": return "var(--dds-size-icon-component)";
-		case "inherit": return "1em";
-		default: return "var(--dds-size-icon-medium)";
-	}
-};
-function Icon(props) {
-	const { id, iconSize = "medium", color = "currentcolor", icon, className, style, htmlProps, iconState, ...rest } = props;
-	const size = getSize(iconSize);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, {
-		...getBaseHTMLProps(id, className, style, htmlProps, rest),
-		height: size,
-		width: size,
-		fill: color,
-		"aria-hidden": htmlProps?.["aria-hidden"] ?? true,
-		...iconState ? { iconState } : {}
-	});
-}
-Icon.displayName = "Icon";
-//#endregion
 //#region src/components/layout/common/layout.module.css
 var layout_module_default = {
 	"dds-p": "dds-layout-module__dds-p",
@@ -1346,6 +1280,8 @@ var layout_module_default = {
 	"dds-display": "dds-layout-module__dds-display",
 	"dds-text-align": "dds-layout-module__dds-text-align",
 	"dds-word-break": "dds-layout-module__dds-word-break",
+	"dds-z-index": "dds-layout-module__dds-z-index",
+	"dds-flex": "dds-layout-module__dds-flex",
 	"dds-flex-dir": "dds-layout-module__dds-flex-dir",
 	"dds-gap": "dds-layout-module__dds-gap",
 	"dds-c-gap": "dds-layout-module__dds-c-gap",
@@ -1383,15 +1319,33 @@ const SPACING_SCALES = [
 	"x6",
 	"x10"
 ];
+const Z_INDEXES = [
+	"skiptocontent",
+	"modal-backdrop",
+	"drawer",
+	"drawer-backdrop",
+	"overflowmenu",
+	"popover",
+	"tooltip",
+	"dropdown",
+	"sticky",
+	"absolute-element"
+];
 //#endregion
 //#region src/components/layout/common/utils.tsx
 const TOKEN_PREFIX = "dds";
+const hasValue = (value) => {
+	return value !== void 0 && value !== null;
+};
 function isBreakpointObject(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 const isSpacingScale = (value) => {
 	return typeof value === "string" && SPACING_SCALES.includes(value);
 };
+const isZIndex = (value) => {
+	return typeof value === "string" && Z_INDEXES.includes(value);
+};
 const isRelativeGridColumn = (type) => {
 	return type === "all" || type === "firstHalf" || type === "secondHalf";
 };
@@ -1403,6 +1357,7 @@ function spacingPropToToken(value) {
 }
 const getSpacingToken = (v) => `var(--${TOKEN_PREFIX}-spacing-${spacingPropToToken(v)})`;
 const getColorToken = (v) => `var(--${TOKEN_PREFIX}-color-${v})`;
+const getZIndexToken = (v) => `var(--${TOKEN_PREFIX}-zindex-${v})`;
 const relativeGridColumnToken = (v, bp) => {
 	if (v === "all") return "1 / -1";
 	if (!bp) return "";
@@ -1412,6 +1367,7 @@ const getValue = (v, bp, invert) => {
 	let output;
 	if (isColor(v)) output = getColorToken(v);
 	else if (isSpacingScale(v)) output = getSpacingToken(v);
+	else if (isZIndex(v)) output = getZIndexToken(v);
 	else if (isRelativeGridColumn(v)) output = relativeGridColumnToken(v, bp);
 	else output = v;
 	return invert ? invertValue(output) : output;
@@ -1432,10 +1388,10 @@ function getCSSProperties(property, prefix, suffix, invert) {
 	return properties;
 }
 function getResponsiveCSSProperties(property, prefix, suffix, invert) {
-	if (!property) return;
+	if (property === void 0 || property === null) return;
 	const properties = {};
 	if (isBreakpointObject(property)) BREAKPOINTS.forEach((bp) => {
-		if (property[bp]) properties[buildCSSKey(prefix, suffix, bp)] = convertMultiValue(property[bp].toString(), bp, invert);
+		if (property[bp] !== void 0 && property[bp] !== null) properties[buildCSSKey(prefix, suffix, bp)] = convertMultiValue(property[bp].toString(), bp, invert);
 	});
 	else properties[buildCSSKey(prefix, suffix)] = convertMultiValue(property.toString(), void 0, invert);
 	return properties;
@@ -1490,7 +1446,7 @@ const ShowHide = ({ hideBelow, showBelow, className, style, htmlProps, id, as: C
 ShowHide.displayName = "ShowHide";
 //#endregion
 //#region src/components/layout/Box/Box.tsx
-const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, placeItems, justifyContent, flexWrap, flexBasis, flexFlow, wordBreak, htmlProps, ...rest }) => {
+const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flex, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, placeItems, justifyContent, flexWrap, flexBasis, flexFlow, wordBreak, zIndex, htmlProps, ...rest }) => {
 	const responsiveStyles = {
 		...getResponsiveCSSProperties(padding, "r", "p"),
 		...getResponsiveCSSProperties(paddingInline, "r", "p-i"),
@@ -1514,6 +1470,7 @@ const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margi
 		...getResponsiveCSSProperties(overflowY, "r", "o-y"),
 		...getResponsiveCSSProperties(display, "r", "display"),
 		...getResponsiveCSSProperties(textAlign, "r", "text-align"),
+		...getResponsiveCSSProperties(flex, "r", "flex"),
 		...getResponsiveCSSProperties(flexDirection, "r", "flex-dir"),
 		...getResponsiveCSSProperties(gap, "r", "gap"),
 		...getResponsiveCSSProperties(columnGap, "r", "c-gap"),
@@ -1526,9 +1483,10 @@ const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margi
 		...getResponsiveCSSProperties(flexWrap, "r", "wrap"),
 		...getResponsiveCSSProperties(flexBasis, "r", "basis"),
 		...getResponsiveCSSProperties(flexFlow, "r", "flow"),
-		...getResponsiveCSSProperties(wordBreak, "r", "word-break")
+		...getResponsiveCSSProperties(wordBreak, "r", "word-break"),
+		...getResponsiveCSSProperties(zIndex, "r", "z-index")
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowHide, { ...getBaseHTMLProps(id, cn(className, padding && layout_module_default["dds-p"], paddingInline && layout_module_default["dds-p-i"], paddingBlock && layout_module_default["dds-p-b"], margin && layout_module_default["dds-m"], marginInline && layout_module_default["dds-m-i"], marginBlock && layout_module_default["dds-m-b"], height && layout_module_default["dds-h"], maxHeight && layout_module_default["dds-max-h"], minHeight && layout_module_default["dds-min-h"], width && layout_module_default["dds-w"], maxWidth && layout_module_default["dds-max-w"], minWidth && layout_module_default["dds-min-w"], position && layout_module_default["dds-pos"], left && layout_module_default["dds-l"], right && layout_module_default["dds-r"], top && layout_module_default["dds-t"], bottom && layout_module_default["dds-b"], overflow && layout_module_default["dds-o"], overflowX && layout_module_default["dds-o-x"], overflowY && layout_module_default["dds-o-y"], display && layout_module_default["dds-display"], textAlign && layout_module_default["dds-text-align"], flexDirection && layout_module_default["dds-flex-dir"], gap && layout_module_default["dds-gap"], columnGap && layout_module_default["dds-c-gap"], rowGap && layout_module_default["dds-r-gap"], alignContent && layout_module_default["dds-a-c"], alignItems && layout_module_default["dds-a-i"], justifyContent && layout_module_default["dds-j-c"], justifyItems && layout_module_default["dds-j-i"], placeItems && layout_module_default["dds-pl-i"], flexWrap && layout_module_default["dds-wrap"], flexBasis && layout_module_default["dds-basis"], flexFlow && layout_module_default["dds-flow"], wordBreak && layout_module_default["dds-word-break"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowHide, { ...getBaseHTMLProps(id, cn(className, hasValue(padding) && layout_module_default["dds-p"], hasValue(paddingInline) && layout_module_default["dds-p-i"], hasValue(paddingBlock) && layout_module_default["dds-p-b"], hasValue(margin) && layout_module_default["dds-m"], hasValue(marginInline) && layout_module_default["dds-m-i"], hasValue(marginBlock) && layout_module_default["dds-m-b"], hasValue(height) && layout_module_default["dds-h"], hasValue(maxHeight) && layout_module_default["dds-max-h"], hasValue(minHeight) && layout_module_default["dds-min-h"], hasValue(width) && layout_module_default["dds-w"], hasValue(maxWidth) && layout_module_default["dds-max-w"], hasValue(minWidth) && layout_module_default["dds-min-w"], hasValue(position) && layout_module_default["dds-pos"], hasValue(left) && layout_module_default["dds-l"], hasValue(right) && layout_module_default["dds-r"], hasValue(top) && layout_module_default["dds-t"], hasValue(bottom) && layout_module_default["dds-b"], hasValue(overflow) && layout_module_default["dds-o"], hasValue(overflowX) && layout_module_default["dds-o-x"], hasValue(overflowY) && layout_module_default["dds-o-y"], hasValue(display) && layout_module_default["dds-display"], hasValue(textAlign) && layout_module_default["dds-text-align"], hasValue(flex) && layout_module_default["dds-flex"], hasValue(flexDirection) && layout_module_default["dds-flex-dir"], hasValue(gap) && layout_module_default["dds-gap"], hasValue(columnGap) && layout_module_default["dds-c-gap"], hasValue(rowGap) && layout_module_default["dds-r-gap"], hasValue(alignContent) && layout_module_default["dds-a-c"], hasValue(alignItems) && layout_module_default["dds-a-i"], hasValue(justifyContent) && layout_module_default["dds-j-c"], hasValue(justifyItems) && layout_module_default["dds-j-i"], hasValue(placeItems) && layout_module_default["dds-pl-i"], hasValue(flexWrap) && layout_module_default["dds-wrap"], hasValue(flexBasis) && layout_module_default["dds-basis"], hasValue(flexFlow) && layout_module_default["dds-flow"], hasValue(wordBreak) && layout_module_default["dds-word-break"], hasValue(zIndex) && layout_module_default["dds-z-index"]), {
 		...style,
 		...responsiveStyles
 	}, htmlProps, rest) });
@@ -1546,7 +1504,7 @@ const Bleed = ({ id, className, style, htmlProps, bleedMarginBlock, bleedMarginI
 		...getResponsiveCSSProperties(bleedMarginBlock, "r", "bleed-m-b", true),
 		...reflStyles
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, bleedMarginInline && layout_module_default["dds-bleed-m-i"], bleedMarginBlock && layout_module_default["dds-bleed-m-b"], bleedMarginInline && reflectivePadding && layout_module_default["dds-p-i"], bleedMarginBlock && reflectivePadding && layout_module_default["dds-p-b"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, hasValue(bleedMarginInline) && layout_module_default["dds-bleed-m-i"], hasValue(bleedMarginBlock) && layout_module_default["dds-bleed-m-b"], hasValue(bleedMarginInline) && reflectivePadding && layout_module_default["dds-p-i"], hasValue(bleedMarginBlock) && reflectivePadding && layout_module_default["dds-p-b"]), {
 		...style,
 		...responsiveStyles
 	}, htmlProps, rest) });
@@ -1622,7 +1580,7 @@ const Grid = ({ id, className, htmlProps, defaultPageLayout = true, display = "g
 		...getResponsiveCSSProperties(gridTemplateAreas, "r", "grid-template-areas")
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
-		...getBaseHTMLProps(id, cn(className, resolvedGridTemplateColumns && Grid_module_default["dds-grid-template-columns"], grid && Grid_module_default["dds-grid"], gridAutoColumns && Grid_module_default["dds-grid-auto-columns"], gridAutoFlow && Grid_module_default["dds-grid-auto-flow"], gridAutoRows && Grid_module_default["dds-grid-auto-rows"], gridTemplate && Grid_module_default["dds-grid-template"], gridTemplateRows && Grid_module_default["dds-grid-template-rows"], gridTemplateAreas && Grid_module_default["dds-grid-template-areas"]), {
+		...getBaseHTMLProps(id, cn(className, hasValue(resolvedGridTemplateColumns) && Grid_module_default["dds-grid-template-columns"], hasValue(grid) && Grid_module_default["dds-grid"], hasValue(gridAutoColumns) && Grid_module_default["dds-grid-auto-columns"], hasValue(gridAutoFlow) && Grid_module_default["dds-grid-auto-flow"], hasValue(gridAutoRows) && Grid_module_default["dds-grid-auto-rows"], hasValue(gridTemplate) && Grid_module_default["dds-grid-template"], hasValue(gridTemplateRows) && Grid_module_default["dds-grid-template-rows"], hasValue(gridTemplateAreas) && Grid_module_default["dds-grid-template-areas"]), {
 			...style,
 			...styleVariables
 		}, htmlProps, rest),
@@ -1642,7 +1600,7 @@ const GridChild = ({ id, className, htmlProps, style, gridRow, gridArea, justify
 		...getResponsiveCSSProperties(justifySelf, "r", "j-self"),
 		...getResponsiveCSSProperties(columnsOccupied, "r", "grid-column")
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, Grid_module_default["child-col-count"], gridRow && Grid_module_default["dds-grid-row"], gridArea && Grid_module_default["dds-grid-area"], justifySelf && Grid_module_default["dds-j-self"], columnsOccupied && Grid_module_default["dds-grid-column"], columnsOccupied === "firstHalf" && Grid_module_default["child--first-half"], columnsOccupied === "secondHalf" && Grid_module_default["child--second-half"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, Grid_module_default["child-col-count"], hasValue(gridRow) && Grid_module_default["dds-grid-row"], hasValue(gridArea) && Grid_module_default["dds-grid-area"], hasValue(justifySelf) && Grid_module_default["dds-j-self"], hasValue(columnsOccupied) && Grid_module_default["dds-grid-column"], columnsOccupied === "firstHalf" && Grid_module_default["child--first-half"], columnsOccupied === "secondHalf" && Grid_module_default["child--second-half"]), {
 		...style,
 		...styleVariables
 	}, htmlProps, rest) });
@@ -1701,6 +1659,80 @@ const HStack = ({ id, className, style, htmlProps, ...rest }) => {
 };
 HStack.displayName = "HStack";
 //#endregion
+//#region src/components/helpers/Backdrop/Backdrop.tsx
+/**
+* Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
+*
+* @component
+* @param {Object} props - Props for komponenten.
+* @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
+* @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
+* @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
+* @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
+* @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
+*
+* @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
+
+* @example
+* ```tsx
+* <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
+*   <ModalContent />
+* </Backdrop>
+* ```
+*/
+const Backdrop = ({ isMounted, zIndex, ...props }) => {
+	const isMountedCn = isMounted ? "visible" : "hidden";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		className: cn(Backdrop_module_default.backdrop, Backdrop_module_default[`backdrop--${isMountedCn}`]),
+		position: "fixed",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		overflowY: "auto",
+		zIndex: `${zIndex}-backdrop`,
+		...props
+	});
+};
+Backdrop.displayName = "Backdrop";
+//#endregion
+//#region src/components/helpers/Dropdown/DropdownItem.module.css
+var DropdownItem_module_default = {
+	"item": "dds-DropdownItem-module__item",
+	"default": "dds-DropdownItem-module__default",
+	"danger": "dds-DropdownItem-module__danger",
+	"item--interactive": "dds-DropdownItem-module__item--interactive",
+	"item--loading": "dds-DropdownItem-module__item--loading"
+};
+//#endregion
+//#region src/components/Icon/Icon.tsx
+const getSize = (iconSize) => {
+	switch (iconSize) {
+		case "small": return "var(--dds-size-icon-small)";
+		case "medium": return "var(--dds-size-icon-medium)";
+		case "large": return "var(--dds-size-icon-large)";
+		case "component": return "var(--dds-size-icon-component)";
+		case "inherit": return "1em";
+		default: return "var(--dds-size-icon-medium)";
+	}
+};
+function Icon(props) {
+	const { id, iconSize = "medium", color = "currentcolor", icon, className, style, htmlProps, iconState, ...rest } = props;
+	const size = getSize(iconSize);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, {
+		...getBaseHTMLProps(id, className, style, htmlProps, rest),
+		height: size,
+		width: size,
+		fill: color,
+		"aria-hidden": htmlProps?.["aria-hidden"] ?? true,
+		...iconState ? { iconState } : {}
+	});
+}
+Icon.displayName = "Icon";
+//#endregion
 //#region src/components/Spinner/Spinner.module.css
 var Spinner_module_default = {
 	"svg": "dds-Spinner-module__svg",
@@ -4590,7 +4622,8 @@ const OverflowMenu = ({ placement = "bottom-end", offset = 2, parentElement, por
 		role: "menu",
 		"aria-hidden": !isOpen,
 		elevation: "medium",
-		border: "border-default"
+		border: "border-default",
+		zIndex: "overflowmenu"
 	});
 	return portal && portalTarget ? (0, react_dom.createPortal)(menu, portalTarget) : menu;
 };
@@ -5924,6 +5957,7 @@ const CalendarPopoverContent = ({ children, className, smallScreenBreakpoint })
 		className: cn(DateInput_module_default.popover, className),
 		style: floatingStyles.floating,
 		...paperStyleProps,
+		zIndex: "popover",
 		children
 	})] });
 };
@@ -6903,6 +6937,7 @@ const Drawer = ({ children, header, placement = "right", parentElement, size = "
 		justifyContent: "flex-start",
 		padding: "var(--dds-drawer-container-padding)",
 		borderRadius: "0",
+		zIndex: "drawer",
 		...getBaseHTMLProps(drawerId, cn(className, Drawer_module_default.container, Drawer_module_default[`container--${placement}`], Drawer_module_default[`container--${placement}-${isOpenCn}`], focus_module_default["focusable--inset"]), style, htmlProps, rest),
 		elevation: "large",
 		"aria-labelledby": headerId,
@@ -7308,9 +7343,6 @@ const texts$17 = createTexts({ send: {
 	se: "Sádde"
 } });
 //#endregion
-//#region src/components/Tooltip/Tooltip.module.css
-var Tooltip_module_default = { "paper": "dds-Tooltip-module__paper" };
-//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100, style, onMouseLeave, onMouseOver, keepMounted = true, id, ref, className, htmlProps, ...rest }) => {
 	const generatedId = (0, react.useId)();
@@ -7395,7 +7427,8 @@ const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100,
 			style: { ...positionStyles.floating },
 			elevation: "small",
 			border: "border-subtle",
-			className: cn(Tooltip_module_default.paper, typographyStyles_module_default["body-short-medium"], utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`]),
+			zIndex: "tooltip",
+			className: cn(typographyStyles_module_default["body-short-medium"], utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`]),
 			children: text
 		}) : null]
 	});
@@ -11416,9 +11449,6 @@ const texts$7 = createTexts({
 const PopoverContext = (0, react.createContext)({});
 const usePopoverContext = () => (0, react.useContext)(PopoverContext);
 //#endregion
-//#region src/components/Popover/Popover.module.css
-var Popover_module_default = { "container": "dds-Popover-module__container" };
-//#endregion
 //#region src/components/Popover/Popover.tsx
 const Popover = ({ id, header, withCloseButton = true, onBlur, children, placement = "bottom", parentElement, portal = false, offset = 8, sizeProps = {}, returnFocusOnBlur = true, className, htmlProps = {}, anchorRef, isOpen: propIsOpen, onClose: propOnClose, style, ref, ...rest }) => {
 	const { refs, styles: positionStyles, isPositioned: localIsPositioned } = useFloatPosition(null, {
@@ -11473,7 +11503,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 	const hasTitle = !!header;
 	const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
 	const popover = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Paper, {
-		...getBaseHTMLProps(popoverId, cn(className, Popover_module_default.container, utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`], focus_module_default.focusable), {
+		...getBaseHTMLProps(popoverId, cn(className, utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`], focus_module_default.focusable), {
 			...style,
 			...floatStyling
 		}, htmlProps, rest),
@@ -11490,6 +11520,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 		role: "dialog",
 		elevation: "large",
 		border: "border-subtle",
+		zIndex: "popover",
 		children: [
 			header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
 				marginInline: "0 x2",
@@ -11792,7 +11823,7 @@ const ProgressBar = ({ label, tip, errorMessage, size = "medium", "aria-describe
 	* Verdi skal være mindre eller lik max når max finnes; og mindre eller lik 1 hvis ikke.
 	* Komponenten er "indeterminate" hvis value ikke er gyldig.
 	*/
-	const hasValidValue = !!value && value > 0 && (max !== void 0 && value <= max || max === void 0 && value <= 1);
+	const hasValidValue = value !== null && value !== void 0 && value >= 0 && (max !== void 0 && value <= max || max === void 0 && value <= 1);
 	const tipId = derivativeIdGenerator(uniqueId, "tip");
 	const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
 	const fillPrecentage = hasValidValue && value / (max ?? 1) * 100 + "%";
@@ -11825,8 +11856,8 @@ const ProgressBar = ({ label, tip, errorMessage, size = "medium", "aria-describe
 				className: cn(ProgressBar_module_default.progress),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
 					height: "100%",
-					width: isIndeterminate ? "25%" : fillPrecentage ? fillPrecentage : 0,
-					className: cn(ProgressBar_module_default.fill, isIndeterminate && ProgressBar_module_default["fill--indeterminate"], fillPrecentage === "100%" && ProgressBar_module_default["fill--done"], errorMessage && ProgressBar_module_default["fill--error"])
+					width: hasErrorMessage ? "100%" : isIndeterminate ? "25%" : fillPrecentage ? fillPrecentage : 0,
+					className: cn(ProgressBar_module_default.fill, isIndeterminate && ProgressBar_module_default["fill--indeterminate"], fillPrecentage === "100%" && ProgressBar_module_default["fill--done"], hasErrorMessage && ProgressBar_module_default["fill--error"])
 				})
 			}),
 			renderInputMessage({