@norges-domstoler/dds-components 15.0.0 → 15.1.0

package/dist/index.d.mts

@@ -2360,7 +2360,7 @@ interface PopoverGroupProps {
     isOpen?: boolean;
     /** `id` til `<Popover />.` */
     popoverId?: string;
-    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` som det andre.  */
     children: ReactNode;
 }
 declare const PopoverGroup: {
@@ -2559,7 +2559,9 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
+    /** Custom element som vises for det valgte elementet. */
     customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
+    /** Custom element som vises i listen over alternativer. */
     customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type ForwardRefType<Option, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
@@ -2973,10 +2975,7 @@ type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     setFocus?: Dispatch<SetStateAction<number>>;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>>;
 declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "className" | "id"> & {
@@ -2990,10 +2989,7 @@ declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttribute
     setFocus?: Dispatch<SetStateAction<number>> | undefined;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number | undefined;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick"> & {
     children?: react.ReactNode;
@@ -3034,6 +3030,10 @@ type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false
@@ -3053,6 +3053,10 @@ declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTM
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean | undefined;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false

package/dist/index.d.ts

@@ -2360,7 +2360,7 @@ interface PopoverGroupProps {
     isOpen?: boolean;
     /** `id` til `<Popover />.` */
     popoverId?: string;
-    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` som det andre.  */
     children: ReactNode;
 }
 declare const PopoverGroup: {
@@ -2559,7 +2559,9 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
+    /** Custom element som vises for det valgte elementet. */
     customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
+    /** Custom element som vises i listen over alternativer. */
     customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type ForwardRefType<Option, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
@@ -2973,10 +2975,7 @@ type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     setFocus?: Dispatch<SetStateAction<number>>;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>>;
 declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "className" | "id"> & {
@@ -2990,10 +2989,7 @@ declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttribute
     setFocus?: Dispatch<SetStateAction<number>> | undefined;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number | undefined;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick"> & {
     children?: react.ReactNode;
@@ -3034,6 +3030,10 @@ type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false
@@ -3053,6 +3053,10 @@ declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTM
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean | undefined;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false

package/dist/index.js

@@ -5032,9 +5032,9 @@ var Bar = import_styled_components22.default.div.withConfig({
   color: ${navTokens3.color};
   background-color: ${navTokens3.backgroundColor};
   box-sizing: border-box;
-  z-index: 101;
+  z-index: 99;
 
-  position: fixed;
+  position: absolute;
   top: ${({ environmentBannerActive }) => environmentBannerActive ? import_development_utils.ENVIRONMENT_BANNER_HEIGHT : "0"};
   left: 0;
   right: 0;
@@ -9239,9 +9239,11 @@ var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
 var { border: border10, colors: colors23, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
 var bar = {
   backgroundColor: colors23.DdsColorNeutralsWhite,
-  itemGap: spacing24.SizesDdsSpacingX1,
+  itemGap: spacing24.SizesDdsSpacingX15,
   minHeight: "57px",
-  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`
+  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`,
+  paddingLeft: spacing24.SizesDdsSpacingX15,
+  paddingRight: spacing24.SizesDdsSpacingX15
 };
 var separator = {
   color: border10.BordersDdsBorderStyleLightStroke,
@@ -9264,6 +9266,8 @@ var Bar2 = import_styled_components61.default.div`
   align-items: center;
   min-height: ${bar2.minHeight};
   border-bottom: ${bar2.borderBottom};
+  padding-left: ${bar2.paddingLeft};
+  padding-right: ${bar2.paddingRight};
 
   ${({ $hasNavigation }) => $hasNavigation ? import_styled_components61.css`
           ${ContextMenuGroup} {
@@ -9440,7 +9444,7 @@ var InternalHeader = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }),
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
+        (hasContextMenu || navigation2 !== null) && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
         navigation2,
         hasContextMenu && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(ContextMenuGroup, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -9634,23 +9638,23 @@ var container9 = {
   },
   purpose: {
     info: {
-      borderColor: colors24.DdsColorInfoLighter,
+      borderColor: colors24.DdsColorInfoBase,
       backgroundColor: colors24.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors24.DdsColorWarningLighter,
+      borderColor: colors24.DdsColorWarningBase,
       backgroundColor: colors24.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors24.DdsColorDangerLighter,
+      borderColor: colors24.DdsColorDangerBase,
       backgroundColor: colors24.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors24.DdsColorSuccessLighter,
+      borderColor: colors24.DdsColorSuccessBase,
       backgroundColor: colors24.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors24.DdsColorPrimaryLighter,
+      borderColor: colors24.DdsColorPrimaryBase,
       backgroundColor: colors24.DdsColorPrimaryLightest
     },
     confidential: {
@@ -13703,49 +13707,93 @@ var typographyType5 = "bodySans01";
 var wrapper7 = {
   border: "1px solid",
   borderRadius: borderRadius10.RadiiDdsBorderRadius1Radius,
-  padding: `${spacing37.SizesDdsSpacingX0125} ${spacing37.SizesDdsSpacingX025}`,
+  padding: `${spacing37.SizesDdsSpacingX0125} ${spacing37.SizesDdsSpacingX05}`,
   icon: {
     padding: [
       spacing37.SizesDdsSpacingX0125,
-      spacing37.SizesDdsSpacingX025,
+      spacing37.SizesDdsSpacingX05,
       spacing37.SizesDdsSpacingX0125,
-      spacing37.SizesDdsSpacingX0125
+      spacing37.SizesDdsSpacingX025
     ].join(" "),
-    gap: spacing37.SizesDdsSpacingX0125,
+    gap: spacing37.SizesDdsSpacingX025,
     size: "small"
   },
   purpose: {
     default: {
-      backgroundColor: colors33.DdsColorNeutralsGray1,
-      borderColor: colors33.DdsColorNeutralsGray3,
-      icon: void 0
+      icon: void 0,
+      base: {
+        backgroundColor: colors33.DdsColorNeutralsGray1,
+        borderColor: colors33.DdsColorNeutralsGray3,
+        icon: void 0
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorNeutralsGray3,
+        borderColor: colors33.DdsColorNeutralsGray3,
+        icon: void 0
+      }
     },
     success: {
-      ...localMessageTokens.container.purpose.success,
-      icon: {
-        icon: CheckCircledIcon,
-        color: colors33.DdsColorSuccessDarkest
+      icon: CheckCircledIcon,
+      base: {
+        ...localMessageTokens.container.purpose.success,
+        icon: {
+          color: colors33.DdsColorSuccessDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorSuccessLight,
+        borderColor: colors33.DdsColorSuccessLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     danger: {
-      ...localMessageTokens.container.purpose.danger,
-      icon: {
-        icon: ErrorIcon,
-        color: colors33.DdsColorDangerDarkest
+      icon: ErrorIcon,
+      base: {
+        ...localMessageTokens.container.purpose.danger,
+        icon: {
+          color: colors33.DdsColorDangerDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorDangerLight,
+        borderColor: colors33.DdsColorDangerLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     warning: {
-      ...localMessageTokens.container.purpose.warning,
-      icon: {
-        icon: WarningIcon,
-        color: colors33.DdsColorWarningDarkest
+      icon: WarningIcon,
+      base: {
+        ...localMessageTokens.container.purpose.warning,
+        icon: {
+          color: colors33.DdsColorWarningDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorWarningLight,
+        borderColor: colors33.DdsColorWarningLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     info: {
-      ...localMessageTokens.container.purpose.info,
-      icon: {
-        icon: InfoIcon,
-        color: colors33.DdsColorInfoDarkest
+      icon: InfoIcon,
+      base: {
+        ...localMessageTokens.container.purpose.info,
+        icon: {
+          color: colors33.DdsColorInfoDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorInfoLight,
+        borderColor: colors33.DdsColorInfoLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     }
   }
@@ -13765,21 +13813,22 @@ var Wrapper7 = (0, import_styled_components94.default)(TextOverflowEllipsisWrapp
   border-radius: ${wrapper8.borderRadius};
   padding: ${({ $withIcon }) => $withIcon ? wrapper8.icon.padding : wrapper8.padding};
   ${getFontStyling(typographyType5)}
-  ${({ $purpose }) => import_styled_components94.css`
-    background-color: ${wrapper8.purpose[$purpose].backgroundColor};
-    border-color: ${wrapper8.purpose[$purpose].borderColor};
+  ${({ $purpose, $strong }) => import_styled_components94.css`
+    background-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].backgroundColor};
+    border-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].borderColor};
   `}
 `;
 var StyledIcon5 = (0, import_styled_components94.default)(Icon)`
-  color: ${({ $purpose }) => {
+  color: ${({ $purpose, $strong }) => {
   var _a;
-  return (_a = wrapper8.purpose[$purpose].icon) == null ? void 0 : _a.color;
+  return (_a = wrapper8.purpose[$purpose][$strong ? "strong" : "base"].icon) == null ? void 0 : _a.color;
 }};
 `;
 var Tag = (0, import_react114.forwardRef)((props, ref) => {
   const {
     text,
     purpose = "default",
+    strong,
     id,
     className,
     children,
@@ -13794,13 +13843,15 @@ var Tag = (0, import_react114.forwardRef)((props, ref) => {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       ref,
       $purpose: purpose,
+      $strong: strong,
       $withIcon: Boolean(withIcon && icon12),
       children: [
         withIcon && icon12 && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
           StyledIcon5,
           {
             $purpose: purpose,
-            icon: icon12.icon,
+            $strong: strong,
+            icon: icon12,
             iconSize: tagTokens.wrapper.icon.size
           }
         ),
@@ -14396,6 +14447,8 @@ var ToggleRadio = (0, import_react119.forwardRef)(
       name,
       onChange,
       checked,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       icon: icon12,
       label: label3,
       htmlProps,
@@ -14420,7 +14473,9 @@ var ToggleRadio = (0, import_react119.forwardRef)(
           name: name != null ? name : group4.name,
           onChange: handleChange,
           value,
-          checked: calculateChecked(value, group4, checked)
+          checked: calculateChecked(value, group4, checked),
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [