@norges-domstoler/dds-components 0.0.0-dev-20240220131547 → 0.0.0-dev-20240223095453

package/dist/index.d.mts

@@ -3030,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
@@ -3049,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

@@ -3030,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
@@ -3049,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

@@ -9638,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: {
@@ -11127,12 +11127,27 @@ var itemNumber = {
   size: "1.75rem",
   borderWidth: "2px",
   iconSize: "small",
-  active: {
+  activeIncomplete: {
+    borderColor: colors27.DdsColorInteractiveBase,
+    color: colors27.DdsColorNeutralsWhite,
+    backgroundColor: colors27.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors27.DdsColorInteractiveBase,
+      color: colors27.DdsColorNeutralsWhite,
+      backgroundColor: colors27.DdsColorInteractiveBase
+    }
+  },
+  activeCompleted: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorNeutralsWhite,
-    backgroundColor: colors27.DdsColorInteractiveBase
+    backgroundColor: colors27.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors27.DdsColorInteractiveDark,
+      color: colors27.DdsColorNeutralsWhite,
+      backgroundColor: colors27.DdsColorInteractiveDark
+    }
   },
-  completed: {
+  inactiveCompleted: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorNeutralsWhite,
     backgroundColor: colors27.DdsColorInteractiveBase,
@@ -11142,7 +11157,7 @@ var itemNumber = {
       backgroundColor: colors27.DdsColorInteractiveDark
     }
   },
-  inactive: {
+  inactiveIncomplete: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorInteractiveBase,
     backgroundColor: colors27.DdsColorNeutralsWhite,
@@ -11160,20 +11175,41 @@ var itemNumber = {
 };
 var itemText = {
   textDecoration: "underline",
-  active: {
-    color: colors27.DdsColorNeutralsGray9,
-    textDecorationColor: colors27.DdsColorNeutralsGray9
+  activeCompleted: {
+    color: colors27.DdsColorInteractiveBase,
+    textDecorationColor: "transparent",
+    hover: {
+      color: colors27.DdsColorInteractiveBase,
+      textDecorationColor: "transparent"
+    }
   },
-  inactive: {
-    color: colors27.DdsColorNeutralsGray7,
+  activeIncomplete: {
+    color: colors27.DdsColorInteractiveBase,
     textDecorationColor: "transparent",
     hover: {
-      textDecorationColor: colors27.DdsColorNeutralsGray7
+      color: colors27.DdsColorInteractiveBase,
+      textDecorationColor: "transparent"
+    }
+  },
+  inactiveIncomplete: {
+    color: colors27.DdsColorNeutralsGray7,
+    textDecorationColor: colors27.DdsColorNeutralsGray7,
+    hover: {
+      color: colors27.DdsColorInteractiveBase,
+      textDecorationColor: colors27.DdsColorInteractiveBase
+    }
+  },
+  inactiveCompleted: {
+    color: colors27.DdsColorNeutralsGray7,
+    textDecorationColor: colors27.DdsColorNeutralsGray7,
+    hover: {
+      color: colors27.DdsColorInteractiveBase,
+      textDecorationColor: colors27.DdsColorInteractiveBase
     }
   },
   disabled: {
     color: colors27.DdsColorNeutralsGray6,
-    textDecoration: "none"
+    textDecorationColor: "transparent"
   }
 };
 var progressTrackerTokens = {
@@ -11221,40 +11257,11 @@ var ItemNumber = import_styled_components73.default.div`
   ${getFontStyling(typographyTypes4.number)}
   font-weight: 600;
 
-  ${({ $state: state }) => {
-  switch (state) {
-    case "activeIncomplete":
-      return import_styled_components73.css`
-          border-color: ${itemNumber2.active.borderColor};
-          color: ${itemNumber2.active.color};
-          background-color: ${itemNumber2.active.backgroundColor};
-        `;
-    case "activeCompleted":
-      return import_styled_components73.css`
-          border-color: ${itemNumber2.completed.borderColor};
-          color: ${itemNumber2.completed.color};
-          background-color: ${itemNumber2.completed.backgroundColor};
-        `;
-    case "inactiveCompleted":
-      return import_styled_components73.css`
-          border-color: ${itemNumber2.completed.borderColor};
-          color: ${itemNumber2.completed.color};
-          background-color: ${itemNumber2.completed.backgroundColor};
-        `;
-    case "inactiveIncomplete":
-      return import_styled_components73.css`
-          border-color: ${itemNumber2.inactive.borderColor};
-          color: ${itemNumber2.inactive.color};
-          background-color: ${itemNumber2.inactive.backgroundColor};
-        `;
-    case "disabled":
-      return import_styled_components73.css`
-          border-color: ${itemNumber2.disabled.borderColor};
-          color: ${itemNumber2.disabled.color};
-          background-color: ${itemNumber2.disabled.backgroundColor};
-        `;
-  }
-}}
+  ${({ $state: state }) => state && import_styled_components73.css`
+      border-color: ${itemNumber2[state].borderColor};
+      color: ${itemNumber2[state].color};
+      background-color: ${itemNumber2[state].backgroundColor};
+    `}
 `;
 var ItemText = import_styled_components73.default.div`
   ${getFontStyling(typographyTypes4.label)}
@@ -11262,27 +11269,10 @@ var ItemText = import_styled_components73.default.div`
   text-decoration: ${itemText2.textDecoration};
   transition: text-decoration-color 0.2s;
 
-  ${({ $state: state }) => {
-  switch (state) {
-    case "activeCompleted":
-    case "activeIncomplete":
-      return import_styled_components73.css`
-          color: ${itemText2.active.color};
-          text-decoration-color: ${itemText2.active.textDecorationColor};
-        `;
-    case "inactiveCompleted":
-    case "inactiveIncomplete":
-      return import_styled_components73.css`
-          color: ${itemText2.inactive.color};
-          text-decoration-color: ${itemText2.inactive.textDecorationColor};
-        `;
-    case "disabled":
-      return import_styled_components73.css`
-          color: ${itemText2.disabled.color};
-          text-decoration: ${itemText2.disabled.textDecoration};
-        `;
-  }
-}};
+  ${({ $state: state }) => state && import_styled_components73.css`
+      color: ${itemText2[state].color};
+      text-decoration-color: ${itemText2[state].textDecorationColor};
+    `};
 `;
 var ItemContentWrapper = import_styled_components73.default.button`
   background: none;
@@ -11297,12 +11287,21 @@ var ItemContentWrapper = import_styled_components73.default.button`
   gap: ${itemContentWrapper2.gap};
   transition: ${focusVisibleTransitionValue};
 
-  :focus-visible {
+  &:focus-visible,
+  &.focus-visible {
     ${focusVisible}
   }
 
   ${({ $state: state }) => state !== "disabled" && import_styled_components73.css`
       cursor: pointer;
+      &:hover > ${ItemText} {
+        color: ${itemText2[state].hover.color};
+        text-decoration-color: ${itemText2[state].hover.textDecorationColor};
+      }
+      &:hover > ${ItemNumber} {
+        background-color: ${itemNumber2[state].hover.backgroundColor};
+        border-color: ${itemNumber2[state].hover.borderColor};
+      }
     `}
 `;
 var getVisuallyHiddenText = (active, completed, index) => `${index + 1}, ${active ? "" : "Trinn, "}${completed ? "Ferdig, " : "Ikke ferdig, "}`;
@@ -13707,49 +13706,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
+        }
       }
     }
   }
@@ -13769,21 +13812,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,
@@ -13798,13 +13842,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
           }
         ),