@norges-domstoler/dds-components 24.3.1 → 24.4.0

package/dist/index.css

@@ -4274,6 +4274,26 @@
   cursor: not-allowed;
   position: relative;
 }
+.dds-Badge-module__container {
+  border-radius: var(--dds-border-radius-rounded);
+  box-sizing: border-box;
+}
+
+.dds-Badge-module__notification {
+  background-color: var(--dds-color-surface-notification);
+}
+
+.dds-Badge-module__action {
+  background-color: var(--dds-color-surface-action-resting);
+}
+
+.dds-Badge-module__neutral {
+  background-color: var(--dds-color-surface-inverse-default);
+}
+
+.dds-Badge-module__subtle {
+  background-color: var(--dds-color-surface-medium);
+}
 .dds-Spinner-module__svg {
   display: block;
 }
@@ -4769,6 +4789,13 @@
     color: var(--dds-color-text-on-action);
   }
 }
+
+.dds-Button-module__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
 .dds-OverflowMenu-module__container {
   box-sizing: border-box;
 }
@@ -7100,6 +7127,7 @@ input[data-indeterminate='true'] ~ .dds-SelectionControl-module__selection-contr
 }
 
 .dds-Tabs-module__tab {
+  position: relative;
   border: none;
   -webkit-user-select: text;
           user-select: text;
@@ -7161,6 +7189,11 @@ input[data-indeterminate='true'] ~ .dds-SelectionControl-module__selection-contr
   box-shadow: inset 0px -2px 0px 0px var(--dds-color-surface-action-selected);
   cursor: default;
 }
+
+.dds-Tabs-module__tab--column__badge {
+  position: absolute;
+  transform: translateX(50%);
+}
 .dds-Tag-module__container {
   border: 1px solid;
   display: inline-flex;

package/dist/index.d.cts

@@ -314,6 +314,47 @@ export type ExtractStrict<T, U extends T> = U;
 export type Nullable<T> = T | null;
 export type Callback<T> = (e: T) => void;
 //#endregion
+//#region src/components/Badge/Badge.d.ts
+declare const BADGE_PURPOSES: readonly ["notification", "action", "neutral", "subtle"];
+declare const BADGE_SIZES: ["xsmall", "small", "medium", "large"];
+type BadgePurpose = (typeof BADGE_PURPOSES)[number];
+type BadgeSize = (typeof BADGE_SIZES)[number];
+type BadgeProps = BaseComponentProps<HTMLElement, {
+  /**
+   * Formål med komponenten. Påvirker styling.
+   * @default 'notification'
+   */
+  purpose?: BadgePurpose;
+  /**
+   * Størrelse.
+   * @default 'medium'
+   */
+  size?: BadgeSize;
+  /**
+   * Barn. Støtter kun tall.
+   */
+  children?: number;
+  /**
+   * Maksimalt tall som kan vises. legger på `'+'` dersom tallet overstiger maksverdien. Kan bli deaktivert.
+   * @default 9
+   */
+  max?: number;
+  /**
+   * Om komponenten skal vise tallet selv om det er 0.
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * HTML `aria-label` attributt.
+   */
+  'aria-label'?: string;
+}>;
+type BadgeInComponentProps = Omit<BadgeProps, 'size'>;
+export declare const Badge: {
+  ({ id, className, style, htmlProps, purpose, size, children, max, showZero, ...rest }: BadgeProps): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
 //#region src/components/Icon/utils/types.d.ts
 type SvgProps = {
   title?: string;
@@ -365,6 +406,8 @@ type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'>
   iconState?: IconStatesOf<I>;
   /**Knapp med full bredde. */
   fullWidth?: boolean;
+  /**Props for `<Badge>` som vises på knappen. */
+  badgeProps?: Omit<BadgeProps, 'size'>;
 } & PickedHTMLAttributes$3>;
 declare namespace index_d_exports$1 {
   export { AdvancedPseudos, AtRule, AtRules, DataType, Fallback, Globals, HtmlAttributes, ObsoleteProperties, ObsoletePropertiesFallback, ObsoletePropertiesHyphen, ObsoletePropertiesHyphenFallback, Properties, PropertiesFallback, PropertiesHyphen, PropertiesHyphenFallback, Property, PropertyValue, Pseudos, SimplePseudos, StandardLonghandProperties, StandardLonghandPropertiesFallback, StandardLonghandPropertiesHyphen, StandardLonghandPropertiesHyphenFallback, StandardProperties, StandardPropertiesFallback, StandardPropertiesHyphen, StandardPropertiesHyphenFallback, StandardShorthandProperties, StandardShorthandPropertiesFallback, StandardShorthandPropertiesHyphen, StandardShorthandPropertiesHyphenFallback, SvgAttributes, SvgProperties, SvgPropertiesFallback, SvgPropertiesHyphen, SvgPropertiesHyphenFallback, VendorLonghandProperties, VendorLonghandPropertiesFallback, VendorLonghandPropertiesHyphen, VendorLonghandPropertiesHyphenFallback, VendorProperties, VendorPropertiesFallback, VendorPropertiesHyphen, VendorPropertiesHyphenFallback, VendorShorthandProperties, VendorShorthandPropertiesFallback, VendorShorthandPropertiesHyphen, VendorShorthandPropertiesHyphenFallback };
@@ -20736,7 +20779,7 @@ export declare namespace Icon {
 //#endregion
 //#region src/components/Button/Button.d.ts
 export declare const Button: {
-  <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size: propSize, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): import("react").JSX.Element;
+  <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size: propSize, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, badgeProps, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -20822,10 +20865,11 @@ export interface DropdownItemCustomProps<T extends DropdownItemT = 'span'> {
   /**Bestemmer farger basert på formål.
    * @default "default"
    */
+  badgeProps?: BadgeInComponentProps;
   purpose?: 'default' | 'danger';
 }
 export type DropdownItemProps<T extends DropdownItemT = 'span'> = DropdownItemCustomProps<T> & DropdownItemButtonProps & (T extends typeof StylelessButton ? StylelessButtonProps : ComponentPropsWithRef<T>);
-export declare const DropdownItem: <T extends DropdownItemT = "span">({ icon, className, children: propChildren, purpose, loading, loadingTooltip, ...rest }: DropdownItemProps<T>) => import("react").JSX.Element;
+export declare const DropdownItem: <T extends DropdownItemT = "span">({ icon, className, children: propChildren, purpose, loading, loadingTooltip, badgeProps, ...rest }: DropdownItemProps<T>) => import("react").JSX.Element;
 //#endregion
 //#region src/components/helpers/Dropdown/DropdownHeader.d.ts
 type DropdownHeaderProps = ComponentPropsWithRef<'h2'>;
@@ -27046,9 +27090,10 @@ export type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
    * @default "1fr"
    */
   width?: Properties['width'];
+  badgeProps?: BadgeInComponentProps;
 } & PickedAttributes>;
 export declare const Tab: {
-  ({ active, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps, style, width, ref, ...rest }: TabProps): import("react").JSX.Element;
+  ({ active, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps, style, width, ref, badgeProps, ...rest }: TabProps): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -27261,5 +27306,5 @@ export declare const VisuallyHidden: {
   displayName: string;
 };
 //#endregion
-export { Bleed$1 as Bleed, type BleedProps, type Breakpoint, type ButtonProps, type ButtonPurpose, type ButtonSize, type CalendarProps, type CardProps, type CardSelectableProps, type DatePickerProps, type DdsTheme, type DrawerPlacement, type DrawerProps, type DrawerSize, type ErrorSummaryItemProps, type ErrorSummaryProps, type FavStarProps, type GlobalMessageProps, type GlobalMessagePurpose, type IconPosition, type IconProps, type IconSize, type InlineEditInputProps, type InlineEditSelectProps, type InlineEditTextAreaProps, type NewsPopoverProps, type ParagraphProps, type PhoneInputProps, type ProgressBarProps, type ProgressBarSize, type Purpose, type RadioButtonProps, type RadioValue, type ResponsiveProps, type ResponsiveStackProps, Search, type SearchAutocompleteWrapperProps, type SearchData, type SearchProps, type SearchSuggestionsProps, type Size$1 as Size, type SortOrder, type SpacingScale, type SvgIcon, type SvgProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, type TabsProps, type TagAppearance, type TagProps, type TagPurpose, type TimePickerProps, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, type ToggleButtonProps, type ToggleProps, type ToggleSize, type WeightedSearchData, type ZIndex, index_d_exports as icons };
+export { type BadgeInComponentProps, type BadgeProps, type BadgePurpose, type BadgeSize, Bleed$1 as Bleed, type BleedProps, type Breakpoint, type ButtonProps, type ButtonPurpose, type ButtonSize, type CalendarProps, type CardProps, type CardSelectableProps, type DatePickerProps, type DdsTheme, type DrawerPlacement, type DrawerProps, type DrawerSize, type ErrorSummaryItemProps, type ErrorSummaryProps, type FavStarProps, type GlobalMessageProps, type GlobalMessagePurpose, type IconPosition, type IconProps, type IconSize, type InlineEditInputProps, type InlineEditSelectProps, type InlineEditTextAreaProps, type NewsPopoverProps, type ParagraphProps, type PhoneInputProps, type ProgressBarProps, type ProgressBarSize, type Purpose, type RadioButtonProps, type RadioValue, type ResponsiveProps, type ResponsiveStackProps, Search, type SearchAutocompleteWrapperProps, type SearchData, type SearchProps, type SearchSuggestionsProps, type Size$1 as Size, type SortOrder, type SpacingScale, type SvgIcon, type SvgProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, type TabsProps, type TagAppearance, type TagProps, type TagPurpose, type TimePickerProps, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, type ToggleButtonProps, type ToggleProps, type ToggleSize, type WeightedSearchData, type ZIndex, index_d_exports as icons };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -313,6 +313,47 @@ export type ExtractStrict<T, U extends T> = U;
 export type Nullable<T> = T | null;
 export type Callback<T> = (e: T) => void;
 //#endregion
+//#region src/components/Badge/Badge.d.ts
+declare const BADGE_PURPOSES: readonly ["notification", "action", "neutral", "subtle"];
+declare const BADGE_SIZES: ["xsmall", "small", "medium", "large"];
+type BadgePurpose = (typeof BADGE_PURPOSES)[number];
+type BadgeSize = (typeof BADGE_SIZES)[number];
+type BadgeProps = BaseComponentProps<HTMLElement, {
+  /**
+   * Formål med komponenten. Påvirker styling.
+   * @default 'notification'
+   */
+  purpose?: BadgePurpose;
+  /**
+   * Størrelse.
+   * @default 'medium'
+   */
+  size?: BadgeSize;
+  /**
+   * Barn. Støtter kun tall.
+   */
+  children?: number;
+  /**
+   * Maksimalt tall som kan vises. legger på `'+'` dersom tallet overstiger maksverdien. Kan bli deaktivert.
+   * @default 9
+   */
+  max?: number;
+  /**
+   * Om komponenten skal vise tallet selv om det er 0.
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * HTML `aria-label` attributt.
+   */
+  'aria-label'?: string;
+}>;
+type BadgeInComponentProps = Omit<BadgeProps, 'size'>;
+export declare const Badge: {
+  ({ id, className, style, htmlProps, purpose, size, children, max, showZero, ...rest }: BadgeProps): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
 //#region src/components/Icon/utils/types.d.ts
 type SvgProps = {
   title?: string;
@@ -364,6 +405,8 @@ type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'>
   iconState?: IconStatesOf<I>;
   /**Knapp med full bredde. */
   fullWidth?: boolean;
+  /**Props for `<Badge>` som vises på knappen. */
+  badgeProps?: Omit<BadgeProps, 'size'>;
 } & PickedHTMLAttributes$3>;
 declare namespace index_d_exports$1 {
   export { AdvancedPseudos, AtRule, AtRules, DataType, Fallback, Globals, HtmlAttributes, ObsoleteProperties, ObsoletePropertiesFallback, ObsoletePropertiesHyphen, ObsoletePropertiesHyphenFallback, Properties, PropertiesFallback, PropertiesHyphen, PropertiesHyphenFallback, Property, PropertyValue, Pseudos, SimplePseudos, StandardLonghandProperties, StandardLonghandPropertiesFallback, StandardLonghandPropertiesHyphen, StandardLonghandPropertiesHyphenFallback, StandardProperties, StandardPropertiesFallback, StandardPropertiesHyphen, StandardPropertiesHyphenFallback, StandardShorthandProperties, StandardShorthandPropertiesFallback, StandardShorthandPropertiesHyphen, StandardShorthandPropertiesHyphenFallback, SvgAttributes, SvgProperties, SvgPropertiesFallback, SvgPropertiesHyphen, SvgPropertiesHyphenFallback, VendorLonghandProperties, VendorLonghandPropertiesFallback, VendorLonghandPropertiesHyphen, VendorLonghandPropertiesHyphenFallback, VendorProperties, VendorPropertiesFallback, VendorPropertiesHyphen, VendorPropertiesHyphenFallback, VendorShorthandProperties, VendorShorthandPropertiesFallback, VendorShorthandPropertiesHyphen, VendorShorthandPropertiesHyphenFallback };
@@ -20735,7 +20778,7 @@ export declare namespace Icon {
 //#endregion
 //#region src/components/Button/Button.d.ts
 export declare const Button: {
-  <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size: propSize, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): import("react").JSX.Element;
+  <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size: propSize, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, badgeProps, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -20821,10 +20864,11 @@ export interface DropdownItemCustomProps<T extends DropdownItemT = 'span'> {
   /**Bestemmer farger basert på formål.
    * @default "default"
    */
+  badgeProps?: BadgeInComponentProps;
   purpose?: 'default' | 'danger';
 }
 export type DropdownItemProps<T extends DropdownItemT = 'span'> = DropdownItemCustomProps<T> & DropdownItemButtonProps & (T extends typeof StylelessButton ? StylelessButtonProps : ComponentPropsWithRef<T>);
-export declare const DropdownItem: <T extends DropdownItemT = "span">({ icon, className, children: propChildren, purpose, loading, loadingTooltip, ...rest }: DropdownItemProps<T>) => import("react").JSX.Element;
+export declare const DropdownItem: <T extends DropdownItemT = "span">({ icon, className, children: propChildren, purpose, loading, loadingTooltip, badgeProps, ...rest }: DropdownItemProps<T>) => import("react").JSX.Element;
 //#endregion
 //#region src/components/helpers/Dropdown/DropdownHeader.d.ts
 type DropdownHeaderProps = ComponentPropsWithRef<'h2'>;
@@ -27045,9 +27089,10 @@ export type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
    * @default "1fr"
    */
   width?: Properties['width'];
+  badgeProps?: BadgeInComponentProps;
 } & PickedAttributes>;
 export declare const Tab: {
-  ({ active, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps, style, width, ref, ...rest }: TabProps): import("react").JSX.Element;
+  ({ active, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps, style, width, ref, badgeProps, ...rest }: TabProps): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -27260,5 +27305,5 @@ export declare const VisuallyHidden: {
   displayName: string;
 };
 //#endregion
-export { Bleed$1 as Bleed, type BleedProps, type Breakpoint, type ButtonProps, type ButtonPurpose, type ButtonSize, type CalendarProps, type CardProps, type CardSelectableProps, type DatePickerProps, type DdsTheme, type DrawerPlacement, type DrawerProps, type DrawerSize, type ErrorSummaryItemProps, type ErrorSummaryProps, type FavStarProps, type GlobalMessageProps, type GlobalMessagePurpose, type IconPosition, type IconProps, type IconSize, type InlineEditInputProps, type InlineEditSelectProps, type InlineEditTextAreaProps, type NewsPopoverProps, type ParagraphProps, type PhoneInputProps, type ProgressBarProps, type ProgressBarSize, type Purpose, type RadioButtonProps, type RadioValue, type ResponsiveProps, type ResponsiveStackProps, Search, type SearchAutocompleteWrapperProps, type SearchData, type SearchProps, type SearchSuggestionsProps, type Size$1 as Size, type SortOrder, type SpacingScale, type SvgIcon, type SvgProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, type TabsProps, type TagAppearance, type TagProps, type TagPurpose, type TimePickerProps, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, type ToggleButtonProps, type ToggleProps, type ToggleSize, type WeightedSearchData, type ZIndex, index_d_exports as icons };
+export { type BadgeInComponentProps, type BadgeProps, type BadgePurpose, type BadgeSize, Bleed$1 as Bleed, type BleedProps, type Breakpoint, type ButtonProps, type ButtonPurpose, type ButtonSize, type CalendarProps, type CardProps, type CardSelectableProps, type DatePickerProps, type DdsTheme, type DrawerPlacement, type DrawerProps, type DrawerSize, type ErrorSummaryItemProps, type ErrorSummaryProps, type FavStarProps, type GlobalMessageProps, type GlobalMessagePurpose, type IconPosition, type IconProps, type IconSize, type InlineEditInputProps, type InlineEditSelectProps, type InlineEditTextAreaProps, type NewsPopoverProps, type ParagraphProps, type PhoneInputProps, type ProgressBarProps, type ProgressBarSize, type Purpose, type RadioButtonProps, type RadioValue, type ResponsiveProps, type ResponsiveStackProps, Search, type SearchAutocompleteWrapperProps, type SearchData, type SearchProps, type SearchSuggestionsProps, type Size$1 as Size, type SortOrder, type SpacingScale, type SvgIcon, type SvgProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, type TabsProps, type TagAppearance, type TagProps, type TagPurpose, type TimePickerProps, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, type ToggleButtonProps, type ToggleProps, type ToggleSize, type WeightedSearchData, type ZIndex, index_d_exports as icons };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1675,6 +1675,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__ */ 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__ */ 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) {
@@ -1860,7 +1913,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],
@@ -1898,7 +1951,13 @@ const DropdownItem = ({ icon, className, children: propChildren, purpose = "defa
 				icon,
 				className: cn(loading && utilStyles_module_default.invisible)
 			}),
-			children
+			children,
+			badgeProps && /* @__PURE__ */ jsx(Box, {
+				as: Badge,
+				...badgeProps,
+				size: "small",
+				marginInline: "x0.25 0"
+			})
 		]
 	});
 };
@@ -4687,7 +4746,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
@@ -4695,7 +4755,7 @@ const ButtonGroupContext = createContext({});
 const useButtonGroupContext = () => 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);
@@ -4738,7 +4798,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__ */ jsx(ElementAs, {
+	return /* @__PURE__ */ jsxs(ElementAs, {
 		as,
 		ref,
 		...getBaseHTMLProps(id, buttonCn, style, htmlProps, restFinal),
@@ -4747,7 +4807,11 @@ const Button = ({ as: propAs, children, purpose = "primary", size: propSize = "m
 		onBlur,
 		disabled: isDisabled,
 		...aProps,
-		children: content
+		children: [content, badgeProps && /* @__PURE__ */ jsx(Badge, {
+			...badgeProps,
+			size,
+			className: cn(Button_module_default.badge, badgeProps.className)
+		})]
 	});
 };
 Button.displayName = "Button";
@@ -12729,7 +12793,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
@@ -12816,7 +12881,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 = useRef(null);
 	const combinedRef = useCombinedRef(ref, itemRef);
@@ -12840,6 +12905,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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(Box, {
+		as: Badge,
+		...badgeProps,
+		size: badgeSize[size]
+	})] }) : hasHorizontalBadge && tabContentDirection === "column" ? /* @__PURE__ */ jsxs(HStack, {
+		gap: "x0.5",
+		children: [children, /* @__PURE__ */ jsx(Box, {
+			as: Badge,
+			...badgeProps,
+			size: badgeSize[size]
+		})]
+	}) : hasVerticalBadge ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ 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__ */ jsx("span", { children });
 	return /* @__PURE__ */ 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,
@@ -12851,7 +12942,7 @@ const Tab = ({ active = false, icon, children, focus, setFocus, index, onClick,
 		children: [icon && /* @__PURE__ */ jsx(Icon, {
 			icon,
 			iconSize: "component"
-		}), /* @__PURE__ */ jsx("span", { children })]
+		}), content]
 	});
 };
 Tab.displayName = "Tab";
@@ -13302,6 +13393,6 @@ const ToggleButtonGroup = (props) => {
 };
 ToggleButtonGroup.displayName = "ToggleButtonGroup";
 //#endregion
-export { Accordion, AccordionBody, AccordionContextProvider, AccordionHeader, AddTabButton, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDownIcon, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, Backdrop, BarChartBoxedIcon, BarChartIcon, Bleed, BlockIcon, BookIcon, Box, Breadcrumb, Breadcrumbs, BriefcaseIcon, BuildIcon, BuildingIcon, Button, ButtonGroup, Calendar, CalendarIcon, CalendarMonthIcon, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, Caption, Card, CardExpandable, CardExpandableBody, CardExpandableHeader, CardSelectable, CardSelectableGroup, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, CircleFilledIcon, CircleIcon, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CommentIcon, Contrast, CookieBanner, CookieBannerCheckbox, CopyIcon, CourtIcon, DETAIL_LIST_SIZES, DatePicker, DateRangeIcon, DdsProvider, DeathsIcon, DescriptionList, DescriptionListDesc, DescriptionListGroup, DescriptionListTerm, DesktopIcon, DesktopMobileIcon, DetailList, DetailListDesc, DetailListRow, DetailListTerm, Divider, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, DropdownHeader, DropdownItem, ELEVATIONS, EditAltIcon, EditIcon, ElementAs, EmptyContent, ErrorIcon, ErrorSummary, ErrorSummaryItem, ExclaimIcon, ExpandIcon, FacebookIcon, FamilyIcon, FavStar, Feedback, FeedbackIcon, Fieldset, FieldsetGroup, FileAddIcon, FileIcon, FileShieldedIcon, FileSignedIcon, FileTextIcon, FileUploader, FilterIcon, FilterListIcon, FindInPageIcon, FlagFilledIcon, FlagIcon, FlickrIcon, FloppyDiskIcon, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, FooterList, FooterListGroup, FooterListHeader, FooterLogo, FooterSocialsGroup, FooterSocialsList, FormSummary, FormSummaryEditButton, FormSummaryEmptyValue, FormSummaryError, FormSummaryField, FormSummaryFields, FormSummaryHeader, FormSummaryHeading, FormSummaryLabel, FormSummaryValue, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, Grid, GridChild, GroupIcon, GuardianIcon, HStack, Heading, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassEmptyIcon, Icon, ImageIcon, InfoIcon, InlineButton, InlineEditInput, InlineEditSelect, InlineEditTextArea, InputMessage, InstagramIcon, InternalHeader, JordskifterettIcon, JordskiftesakIcon, KeyIcon, L_MESSAGE_PURPOSES, Label, LagmannsrettIcon, LanguageIcon, Legend, LineChartIcon, Link, LinkIcon, LinkOffIcon, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, LocalMessage, LocationIcon, LocationOffIcon, LockFilledIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MapIcon, MenuIcon, MinusCircledIcon, MinusIcon, Modal, ModalActions, ModalBody, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NewsPopover, NotarialIcon, NotebookPenIcon, NotificationsIcon, NotificationsOffIcon, OnlineMeetingIcon, OpenExternalIcon, OverflowMenu, OverflowMenuButton, OverflowMenuDivider, OverflowMenuGroup, OverflowMenuLink, OverflowMenuList, OverflowMenuListHeader, OverflowMenuSpan, OverflowMenuToggle, Pagination, PaletteIcon, PanelLeftIcon, Paper, PaperPlaneIcon, Paragraph, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, PinIcon, PlusCircledIcon, PlusIcon, Popover, PopoverGroup, PowerOfAttorneyIcon, PrintIcon, ProgressBar, ProgressTracker, ProgressTrackerItem, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, RowsIcon, ScaleIcon, ScreenSize, Search, SearchAutocompleteWrapper, SearchIcon, SearchSuggestions, SectionIcon, Select, SettingsIcon, ShowHide, Skeleton, SkipToContent, SmsIcon, Spinner, SplitButton, StarFilledIcon, StarHalfFilledIcon, StarIcon, StickyNoteIcon, StylelessButton, StylelessList, StylelessOList, SunHalfFilledIcon, SunIcon, SupportIcon, SyncIcon, TG_BODY_LONG_TYPES, TG_BODY_SHORT_TYPES, TG_BODY_TYPES, TG_HEADING_TYPES, TG_LEAD_TYPES, Tab, TabList, TabPanel, TabPanels, Table, Body as TableBody, Cell as TableCell, Foot as TableFoot, Head as TableHead, Row as TableRow, SortCell as TableSortCell, TableWrapper, Tabs, Tag, TextArea, TextInput, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, TingrettIcon, TipIcon, Toggle, ToggleBar, ToggleButton, ToggleButtonGroup, ToggleRadio, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, VStack, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, WarningIcon, WebexIcon, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, createPurposes, createSelectOptions, createSizes, dateValueToNativeDate, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, icons_exports as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, useAccordion, useAccordionContext, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize };
+export { Accordion, AccordionBody, AccordionContextProvider, AccordionHeader, AddTabButton, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDownIcon, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, Backdrop, Badge, BarChartBoxedIcon, BarChartIcon, Bleed, BlockIcon, BookIcon, Box, Breadcrumb, Breadcrumbs, BriefcaseIcon, BuildIcon, BuildingIcon, Button, ButtonGroup, Calendar, CalendarIcon, CalendarMonthIcon, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, Caption, Card, CardExpandable, CardExpandableBody, CardExpandableHeader, CardSelectable, CardSelectableGroup, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, CircleFilledIcon, CircleIcon, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CommentIcon, Contrast, CookieBanner, CookieBannerCheckbox, CopyIcon, CourtIcon, DETAIL_LIST_SIZES, DatePicker, DateRangeIcon, DdsProvider, DeathsIcon, DescriptionList, DescriptionListDesc, DescriptionListGroup, DescriptionListTerm, DesktopIcon, DesktopMobileIcon, DetailList, DetailListDesc, DetailListRow, DetailListTerm, Divider, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, DropdownHeader, DropdownItem, ELEVATIONS, EditAltIcon, EditIcon, ElementAs, EmptyContent, ErrorIcon, ErrorSummary, ErrorSummaryItem, ExclaimIcon, ExpandIcon, FacebookIcon, FamilyIcon, FavStar, Feedback, FeedbackIcon, Fieldset, FieldsetGroup, FileAddIcon, FileIcon, FileShieldedIcon, FileSignedIcon, FileTextIcon, FileUploader, FilterIcon, FilterListIcon, FindInPageIcon, FlagFilledIcon, FlagIcon, FlickrIcon, FloppyDiskIcon, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, FooterList, FooterListGroup, FooterListHeader, FooterLogo, FooterSocialsGroup, FooterSocialsList, FormSummary, FormSummaryEditButton, FormSummaryEmptyValue, FormSummaryError, FormSummaryField, FormSummaryFields, FormSummaryHeader, FormSummaryHeading, FormSummaryLabel, FormSummaryValue, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, Grid, GridChild, GroupIcon, GuardianIcon, HStack, Heading, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassEmptyIcon, Icon, ImageIcon, InfoIcon, InlineButton, InlineEditInput, InlineEditSelect, InlineEditTextArea, InputMessage, InstagramIcon, InternalHeader, JordskifterettIcon, JordskiftesakIcon, KeyIcon, L_MESSAGE_PURPOSES, Label, LagmannsrettIcon, LanguageIcon, Legend, LineChartIcon, Link, LinkIcon, LinkOffIcon, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, LocalMessage, LocationIcon, LocationOffIcon, LockFilledIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MapIcon, MenuIcon, MinusCircledIcon, MinusIcon, Modal, ModalActions, ModalBody, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NewsPopover, NotarialIcon, NotebookPenIcon, NotificationsIcon, NotificationsOffIcon, OnlineMeetingIcon, OpenExternalIcon, OverflowMenu, OverflowMenuButton, OverflowMenuDivider, OverflowMenuGroup, OverflowMenuLink, OverflowMenuList, OverflowMenuListHeader, OverflowMenuSpan, OverflowMenuToggle, Pagination, PaletteIcon, PanelLeftIcon, Paper, PaperPlaneIcon, Paragraph, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, PinIcon, PlusCircledIcon, PlusIcon, Popover, PopoverGroup, PowerOfAttorneyIcon, PrintIcon, ProgressBar, ProgressTracker, ProgressTrackerItem, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, RowsIcon, ScaleIcon, ScreenSize, Search, SearchAutocompleteWrapper, SearchIcon, SearchSuggestions, SectionIcon, Select, SettingsIcon, ShowHide, Skeleton, SkipToContent, SmsIcon, Spinner, SplitButton, StarFilledIcon, StarHalfFilledIcon, StarIcon, StickyNoteIcon, StylelessButton, StylelessList, StylelessOList, SunHalfFilledIcon, SunIcon, SupportIcon, SyncIcon, TG_BODY_LONG_TYPES, TG_BODY_SHORT_TYPES, TG_BODY_TYPES, TG_HEADING_TYPES, TG_LEAD_TYPES, Tab, TabList, TabPanel, TabPanels, Table, Body as TableBody, Cell as TableCell, Foot as TableFoot, Head as TableHead, Row as TableRow, SortCell as TableSortCell, TableWrapper, Tabs, Tag, TextArea, TextInput, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, TingrettIcon, TipIcon, Toggle, ToggleBar, ToggleButton, ToggleButtonGroup, ToggleRadio, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, VStack, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, WarningIcon, WebexIcon, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, createPurposes, createSelectOptions, createSizes, dateValueToNativeDate, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, icons_exports as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, useAccordion, useAccordionContext, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize };
 
 //# sourceMappingURL=index.mjs.map