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

package/dist/index.js

@@ -7392,7 +7392,21 @@ function useControllableState(props) {
 
 // src/components/FavStar/FavStar.tsx
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var TRANSITION_SPEED = "0.1s";
+var TRANSITION_SPEED = "0.2s";
+var StyledIcon3 = (0, import_styled_components47.default)(Icon)`
+  color: currentColor;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: ${({ $opacity = 1 }) => $opacity};
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity ${TRANSITION_SPEED},
+      transform ${TRANSITION_SPEED};
+  }
+`;
 var Container5 = import_styled_components47.default.label`
   position: relative;
   cursor: pointer;
@@ -7401,16 +7415,14 @@ var Container5 = import_styled_components47.default.label`
 
   &:has(${HiddenInput}:focus-visible) {
     ${focusVisible}
-    @media (prefers-reduced-motion: no-preference) {
-      transition: ${focusVisibleTransitionValue};
-    }
   }
 
   @media (prefers-reduced-motion: no-preference) {
     transition:
       ${TRANSITION_SPEED} color,
       ${TRANSITION_SPEED} background-color,
-      ${TRANSITION_SPEED} transform;
+      ${TRANSITION_SPEED} transform,
+      ${focusVisibleTransitionValue};
   }
 
   ${({ size: size2 }) => getVariantStyle(size2)}
@@ -7427,7 +7439,9 @@ var Container5 = import_styled_components47.default.label`
   }
 
   &:active {
-    transform: scale(0.75);
+    ${StyledIcon3} {
+      transform: scale(0.75);
+    }
   }
 `;
 function getVariantStyle(size2, variant) {
@@ -7437,16 +7451,6 @@ function getVariantStyle(size2, variant) {
     border-radius: ${favStarTokens(size2, variant).borderRadius};
   `;
 }
-var StyledIcon3 = (0, import_styled_components47.default)(Icon)`
-  color: currentColor;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transition: ${TRANSITION_SPEED} opacity;
-  opacity: ${({ $opacity = 1 }) => $opacity};
-`;
 var FavStar = (0, import_react55.forwardRef)(
   ({
     id,
@@ -11127,12 +11131,27 @@ 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
+    }
+  },
+  activeCompleted: {
+    borderColor: colors27.DdsColorInteractiveBase,
+    color: colors27.DdsColorNeutralsWhite,
+    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 +11161,7 @@ var itemNumber = {
       backgroundColor: colors27.DdsColorInteractiveDark
     }
   },
-  inactive: {
+  inactiveIncomplete: {
     borderColor: colors27.DdsColorInteractiveBase,
     color: colors27.DdsColorInteractiveBase,
     backgroundColor: colors27.DdsColorNeutralsWhite,
@@ -11160,20 +11179,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 +11261,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 +11273,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 +11291,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, "}`;