@danske/sapphire-css 26.2.0 → 26.3.1

package/components/contextualHelp/contextualHelp.module.css

@@ -33,3 +33,7 @@
 .sapphire-contextual-help__footer {
   padding-top: var(--sapphire-contextual-help-size-spacing-footer);
 }
+
+.sapphire-contextual-help--no-max-width {
+  max-width: initial;
+}

package/components/contextualHelp/contextualHelp.module.css.d.ts

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-contextual-help": string;
   readonly "sapphire-contextual-help__header": string;
   readonly "sapphire-contextual-help__footer": string;
+  readonly "sapphire-contextual-help--no-max-width": string;
 };
 export = styles;
 

package/components/textField/textField.module.css

@@ -1,8 +1,10 @@
 .sapphire-text-field {
   width: var(--sapphire-text-field-size-width-control);
-  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
+  outline: solid var(--sapphire-text-field-size-width-border)
     var(--sapphire-text-field-color-border-default);
+  outline-offset: calc(0px - var(--sapphire-text-field-size-width-border));
   box-sizing: border-box;
+  overflow-x: hidden;
   display: flex;
   align-items: center;
   border-radius: var(--sapphire-text-field-size-radius);
@@ -86,6 +88,7 @@
 .sapphire-text-field .sapphire-text-field__affix {
   color: var(--sapphire-text-field-color-affix);
   flex-shrink: 0;
+  z-index: 1;
 }
 
 .sapphire-text-field .sapphire-text-field__affix--icon {
@@ -172,7 +175,7 @@
 }
 
 .sapphire-text-field--error {
-  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
+  outline: solid var(--sapphire-text-field-size-width-border)
     var(--sapphire-text-field-color-border-error);
 }
 
@@ -181,6 +184,20 @@
  */
 .sapphire-text-field.is-focus,
 .sapphire-text-field:focus-within {
-  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-focus-ring)
+  outline: solid var(--sapphire-text-field-size-focus-ring)
     var(--sapphire-text-field-color-focus-ring);
+  outline-offset: calc(0px - var(--sapphire-text-field-size-focus-ring));
+}
+
+.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,
+.sapphire-text-field:focus-within .sapphire-text-field__input:autofill {
+  /* 
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
+  * Overriding background-color property of auto filled input is not possible, 
+  * so box-shadow is used here to achieve the same look.
+  * Fixes the state when the field is focused and the user is hovering 
+  * or focusing on the list of browser autofilling suggestions.
+  */
+  box-shadow: 0 0 0 var(--sapphire-text-field-size-height-field-l) inset
+    var(--sapphire-text-field-color-background) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "26.2.0",
+  "version": "26.3.1",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -68,5 +68,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^35.5.0"
   },
-  "gitHead": "d760160d715ac5516586f3256f47909f8e74aa46"
+  "gitHead": "f8d78b5edaeb9f6a671e67c5aa221090e1397973"
 }