@norges-domstoler/dds-components 0.0.0-dev-20260924115410 → 0.0.0-dev-20260929100812

package/dist/index.cjs

@@ -1189,7 +1189,7 @@ const BORDER_RADII = [
 	"button",
 	"input",
 	"surface",
-	"chip",
+	"tag",
 	"rounded",
 	"0"
 ];
@@ -1621,7 +1621,7 @@ var Paper_module_default = {
 var surface_module_default = {
 	"border-radius--button": "dds-surface-module__border-radius--button",
 	"border-radius--surface": "dds-surface-module__border-radius--surface",
-	"border-radius--chip": "dds-surface-module__border-radius--chip",
+	"border-radius--tag": "dds-surface-module__border-radius--tag",
 	"border-radius--input": "dds-surface-module__border-radius--input",
 	"border-radius--rounded": "dds-surface-module__border-radius--rounded",
 	"border-radius--0": "dds-surface-module__border-radius--0"
@@ -1708,6 +1708,59 @@ var DropdownItem_module_default = {
 	"item--loading": "dds-DropdownItem-module__item--loading"
 };
 //#endregion
+//#region src/components/Badge/Badge.module.css
+var Badge_module_default = {
+	"container": "dds-Badge-module__container",
+	"notification": "dds-Badge-module__notification",
+	"action": "dds-Badge-module__action",
+	"neutral": "dds-Badge-module__neutral",
+	"subtle": "dds-Badge-module__subtle"
+};
+const Badge = ({ id, className, style, htmlProps, purpose = "notification", size = "medium", children, max = 9, showZero = false, ...rest }) => {
+	const hasChildren = !!children || showZero && children === 0;
+	const heightVariant = hasChildren ? "withChildren" : "noChildren";
+	const height = {
+		withChildren: {
+			xsmall: "18px",
+			small: "21px",
+			medium: "24px",
+			large: "27px"
+		},
+		noChildren: {
+			xsmall: "x0.5",
+			small: "x0.75",
+			medium: "x1",
+			large: "x1.5"
+		}
+	};
+	const color = {
+		notification: "text-on-notification",
+		action: "text-on-action",
+		neutral: "text-on-inverse",
+		subtle: "text-default"
+	};
+	const displayValue = hasChildren && max && children > max ? `${max}+` : children;
+	if (!(!showZero && children === 0 ? false : true)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: "span",
+		paddingInline: hasChildren ? "x0.25" : void 0,
+		minWidth: height[heightVariant][size],
+		maxWidth: "fit-content",
+		height: height[heightVariant][size],
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		...getBaseHTMLProps(id, cn(className, Badge_module_default.container, Badge_module_default[purpose], typographyStyles_module_default[`body-short-${size}`]), style, htmlProps, rest),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
+			as: "span",
+			typographyType: `body-short-${size}`,
+			color: color[purpose],
+			children: displayValue
+		})
+	});
+};
+Badge.displayName = "Badge";
+//#endregion
 //#region src/components/Icon/Icon.tsx
 const getSize = (iconSize) => {
 	switch (iconSize) {
@@ -1893,7 +1946,7 @@ var focus_module_default = {
 };
 //#endregion
 //#region src/components/helpers/Dropdown/DropdownItem.tsx
-const DropdownItem = ({ icon, className, children: propChildren, purpose = "default", loading, loadingTooltip, ...rest }) => {
+const DropdownItem = ({ icon, className, children: propChildren, purpose = "default", loading, loadingTooltip, badgeProps, ...rest }) => {
 	const itemCns = [
 		DropdownItem_module_default.item,
 		DropdownItem_module_default[purpose],
@@ -1931,7 +1984,13 @@ const DropdownItem = ({ icon, className, children: propChildren, purpose = "defa
 				icon,
 				className: cn(loading && utilStyles_module_default.invisible)
 			}),
-			children
+			children,
+			badgeProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+				as: Badge,
+				...badgeProps,
+				size: "small",
+				marginInline: "x0.25 0"
+			})
 		]
 	});
 };
@@ -4720,7 +4779,8 @@ var Button_module_default = {
 	"button--primary": "dds-Button-module__button--primary",
 	"button--secondary": "dds-Button-module__button--secondary",
 	"button--tertiary": "dds-Button-module__button--tertiary",
-	"button--danger": "dds-Button-module__button--danger"
+	"button--danger": "dds-Button-module__button--danger",
+	"badge": "dds-Button-module__badge"
 };
 //#endregion
 //#region src/components/ButtonGroup/ButtonGroup.context.tsx
@@ -4728,7 +4788,7 @@ const ButtonGroupContext = (0, react.createContext)({});
 const useButtonGroupContext = () => (0, react.useContext)(ButtonGroupContext);
 //#endregion
 //#region src/components/Button/Button.tsx
-const Button = ({ as: propAs, children, purpose = "primary", size: propSize = "medium", iconPosition = "left", loading, loadingTooltip, fullWidth = false, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }) => {
+const Button = ({ as: propAs, children, purpose = "primary", size: propSize = "medium", iconPosition = "left", loading, loadingTooltip, fullWidth = false, icon, iconState, onClick, onFocus, onBlur, badgeProps, id, ref, className, style, htmlProps, ...props }) => {
 	const { purpose: groupPurpose, size: groupSize } = useButtonGroupContext();
 	const { t } = useTranslation();
 	const spinnerTooltip = loadingTooltip ?? t(texts$28.saving);
@@ -4771,7 +4831,7 @@ const Button = ({ as: propAs, children, purpose = "primary", size: propSize = "m
 	const isDisabled = (restDisabled ?? htmlDisabled ?? loading) === true;
 	const as = propAs ? propAs : "button";
 	const aProps = as === "a" ? { rel: "noopener noreferrer" } : {};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ElementAs, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ElementAs, {
 		as,
 		ref,
 		...getBaseHTMLProps(id, buttonCn, style, htmlProps, restFinal),
@@ -4780,7 +4840,11 @@ const Button = ({ as: propAs, children, purpose = "primary", size: propSize = "m
 		onBlur,
 		disabled: isDisabled,
 		...aProps,
-		children: content
+		children: [content, badgeProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			...badgeProps,
+			size,
+			className: cn(Button_module_default.badge, badgeProps.className)
+		})]
 	});
 };
 Button.displayName = "Button";
@@ -5827,7 +5891,7 @@ const Chip = ({ children, onClose, id, className, style, htmlProps = {}, ...rest
 		maxWidth: "100%",
 		gap: "x0.125",
 		padding: "x0.25 0 x0.25 x0.5",
-		borderRadius: "chip",
+		borderRadius: "rounded",
 		border: "border-subtle",
 		background: "surface-subtle",
 		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default["body-short-medium"]), style, restHTMLprops, rest),
@@ -12762,7 +12826,8 @@ var Tabs_module_default = {
 	"tab--medium--column": "dds-Tabs-module__tab--medium--column",
 	"tab--small--column": "dds-Tabs-module__tab--small--column",
 	"tab--row": "dds-Tabs-module__tab--row",
-	"tab--column": "dds-Tabs-module__tab--column"
+	"tab--column": "dds-Tabs-module__tab--column",
+	"tab--column__badge": "dds-Tabs-module__tab--column__badge"
 };
 //#endregion
 //#region src/components/Tabs/TabWidthContext.tsx
@@ -12849,7 +12914,7 @@ const Tabs = ({ id, activeTab, onChange, tabContentDirection = "row", size = "sm
 Tabs.displayName = "Tabs";
 //#endregion
 //#region src/components/Tabs/Tab.tsx
-const Tab = ({ active = false, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps = {}, style, width = "1fr", ref, ...rest }) => {
+const Tab = ({ active = false, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps = {}, style, width = "1fr", ref, badgeProps, ...rest }) => {
 	useSetTabWidth(index, width);
 	const itemRef = (0, react.useRef)(null);
 	const combinedRef = useCombinedRef(ref, itemRef);
@@ -12873,6 +12938,32 @@ const Tab = ({ active = false, icon, children, focus, setFocus, index, onClick,
 		handleSelect();
 		onKeyDown?.(e);
 	};
+	const badgeSize = {
+		small: "xsmall",
+		medium: "small"
+	};
+	const hasIcon = !!icon;
+	const hasVerticalBadge = badgeProps && !!badgeProps?.children === false && tabContentDirection === "column" && hasIcon;
+	const hasHorizontalBadge = badgeProps && !hasVerticalBadge;
+	const content = hasHorizontalBadge && tabContentDirection === "row" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: Badge,
+		...badgeProps,
+		size: badgeSize[size]
+	})] }) : hasHorizontalBadge && tabContentDirection === "column" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+		gap: "x0.5",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+			as: Badge,
+			...badgeProps,
+			size: badgeSize[size]
+		})]
+	}) : hasVerticalBadge ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: Badge,
+		...badgeProps,
+		size: badgeSize[size],
+		className: cn(Tabs_module_default["tab--column__badge"], badgeProps?.className),
+		top: "x0.125",
+		right: "calc(50% - (var(--dds-size-icon-component) / 2 ))"
+	})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		...getBaseHTMLProps(id, cn(className, Tabs_module_default.tab, Tabs_module_default[`tab--${size}--${tabContentDirection}`], active && Tabs_module_default["tab--active"], Tabs_module_default[`tab--${tabContentDirection}`], typographyStyles_module_default[`body-short-${size}`], focus_module_default["focusable--inset"]), style, fixedHtmlProps, rest),
 		ref: combinedRef,
@@ -12884,7 +12975,7 @@ const Tab = ({ active = false, icon, children, focus, setFocus, index, onClick,
 		children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			icon,
 			iconSize: "component"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })]
+		}), content]
 	});
 };
 Tab.displayName = "Tab";
@@ -13355,6 +13446,7 @@ exports.BORDER_COLORS = BORDER_COLORS;
 exports.BORDER_RADII = BORDER_RADII;
 exports.BackLink = BackLink;
 exports.Backdrop = Backdrop;
+exports.Badge = Badge;
 exports.BarChartBoxedIcon = BarChartBoxedIcon;
 exports.BarChartIcon = BarChartIcon;
 exports.Bleed = Bleed;