@norges-domstoler/dds-components 0.0.0-dev-20240402105918 → 0.0.0-dev-20240404104453

package/dist/index.js

@@ -3920,6 +3920,26 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       return import_styled_components15.css`
         background-color: ${appearances2[appearance].purpose[purpose].base.backgroundColor};
         border-color: ${appearances2[appearance].purpose[purpose].base.borderColor};
+      `;
+    case "ghost":
+      return import_styled_components15.css`
+        background-color: ${appearances2.ghost.base.backgroundColor};
+        border-color: ${appearances2.ghost.purpose[purpose].base.borderColor};
+      `;
+    case "borderless":
+      return import_styled_components15.css`
+        background-color: ${appearances2.borderless.base.backgroundColor};
+        border-color: ${appearances2.borderless.base.borderColor};
+        text-decoration: ${appearances2.borderless.base.textDecoration};
+        text-decoration-color: ${appearances2.borderless.base.textDecorationColor};
+      `;
+  }
+};
+var getAppearanceAndPurposeStateStyling = (appearance, purpose) => {
+  switch (appearance) {
+    case "filled":
+    case "rounded":
+      return import_styled_components15.css`
         &:hover {
           background-color: ${appearances2[appearance].purpose[purpose].hover.backgroundColor};
           border-color: ${appearances2[appearance].purpose[purpose].hover.borderColor};
@@ -3931,8 +3951,6 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       `;
     case "ghost":
       return import_styled_components15.css`
-        background-color: ${appearances2.ghost.base.backgroundColor};
-        border-color: ${appearances2.ghost.purpose[purpose].base.borderColor};
         &:hover {
           color: ${appearances2.ghost.purpose[purpose].hover.color};
           border-color: ${appearances2.ghost.purpose[purpose].hover.borderColor};
@@ -3946,10 +3964,6 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       `;
     case "borderless":
       return import_styled_components15.css`
-        background-color: ${appearances2.borderless.base.backgroundColor};
-        border-color: ${appearances2.borderless.base.borderColor};
-        text-decoration: ${appearances2.borderless.base.textDecoration};
-        text-decoration-color: ${appearances2.borderless.base.textDecorationColor};
         &:hover {
           color: ${appearances2.borderless.purpose[purpose].hover.color};
           text-decoration-color: ${appearances2.borderless.purpose[purpose].hover.textDecorationColor};
@@ -4004,8 +4018,9 @@ var ButtonWrapper = import_styled_components15.default.button.withConfig({
     color: ${appearances2[appearance].purpose[purpose].base.color};
     ${getAppearanceAndPurposeStyling(appearance, purpose)}
   `}
+  ${({ appearance, purpose, isLoading }) => !isLoading && getAppearanceAndPurposeStateStyling(appearance, purpose)}
 
-  ${({ hasIcon, hasLabel, appearance, purpose }) => hasIcon && !hasLabel && appearance === "borderless" && import_styled_components15.css`
+  ${({ hasIcon, hasLabel, appearance, purpose, isLoading }) => hasIcon && !hasLabel && !isLoading && appearance === "borderless" && import_styled_components15.css`
       &:hover {
         border-color: ${appearances2[appearance].purpose[purpose].icon.hover.borderColor};
         box-shadow: ${appearances2[appearance].purpose[purpose].icon.hover.boxShadow};
@@ -4015,7 +4030,7 @@ var ButtonWrapper = import_styled_components15.default.button.withConfig({
         box-shadow: ${appearances2[appearance].purpose[purpose].icon.active.boxShadow};
       }
     `}
-    ${({ hasIcon, hasLabel, size: size2 }) => hasIcon && hasLabel && import_styled_components15.css`
+  ${({ hasIcon, hasLabel, size: size2 }) => hasIcon && hasLabel && import_styled_components15.css`
       gap: ${sizes2[size2].textAndIcon.gap};
     `}
 
@@ -12373,7 +12388,7 @@ var Container13 = import_styled_components81.default.label`
     }
   }
 
-  &:focus-within {
+  input:enabled:focus-visible ~ ${CustomSelectionControl} {
     ${focusVisible}
     @media (prefers-reduced-motion: no-preference) {
       transition: ${focusVisibleTransitionValue};
@@ -12405,17 +12420,19 @@ var Container13 = import_styled_components81.default.label`
   }
 
   ${({ $error }) => $error && import_styled_components81.css`
-      &:hover input:enabled ~ ${CustomSelectionControl} {
+      &:hover
+        input:enabled:not(:focus-visible):not(:checked)
+        ~ ${CustomSelectionControl} {
         background-color: ${selectionControl2.hover.danger.backgroundColor};
         box-shadow: ${selectionControl2.hover.danger.boxShadow};
         border-color: ${selectionControl2.hover.danger.borderColor};
       }
-      input
+      input:not(:focus-visible)
         ~ ${CustomSelectionControl},
-        input:checked:enabled
+        input:checked:enabled:not(:focus-visible)
         ~ ${CustomSelectionControl},
         &:hover
-        input:checked:enabled
+        input:checked:enabled:not(:focus-visible)
         ~ ${CustomSelectionControl} {
         box-shadow: ${selectionControl2.danger.boxShadow};
         border-color: ${selectionControl2.danger.borderColor};