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

package/dist/index.js

@@ -11127,12 +11127,17 @@ var itemNumber = {
   size: "1.75rem",
   borderWidth: "2px",
   iconSize: "small",
-  active: {
+  activeIncomplete: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorNeutralsWhite,
-    backgroundColor: colors27.DdsColorInteractiveBase
+    backgroundColor: colors27.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors27.DdsColorInteractiveBase,
+      color: colors27.DdsColorNeutralsWhite,
+      backgroundColor: colors27.DdsColorInteractiveBase
+    }
   },
-  completed: {
+  activeCompleted: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorNeutralsWhite,
     backgroundColor: colors27.DdsColorInteractiveBase,
@@ -11142,7 +11147,17 @@ var itemNumber = {
       backgroundColor: colors27.DdsColorInteractiveDark
     }
   },
-  inactive: {
+  inactiveCompleted: {
+    borderColor: colors27.DdsColorInteractiveBase,
+    color: colors27.DdsColorNeutralsWhite,
+    backgroundColor: colors27.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors27.DdsColorInteractiveDark,
+      color: colors27.DdsColorNeutralsWhite,
+      backgroundColor: colors27.DdsColorInteractiveDark
+    }
+  },
+  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, "}`;