@danske/sapphire-css 32.1.1 → 32.2.0

package/components/accordion/accordion.module.css

@@ -29,6 +29,11 @@
   font-family: var(--sapphire-accordion-font-name);
   background-color: var(--sapphire-accordion-color-background-item);
   color: var(--sapphire-accordion-color-content);
+  box-shadow: 0 -1px 0 0 var(--sapphire-accordion-color-border);
+}
+
+/* Adds bottom border to the last accordion item as default */
+.sapphire-accordion__item:last-child {
   border-bottom: var(--sapphire-accordion-size-width-border) solid
     var(--sapphire-accordion-color-border);
 }
@@ -66,7 +71,7 @@
   width: 100%;
 }
 
-/* Hover header*/
+/* Hover header */
 
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(:active):not(.is-active):not(
@@ -88,7 +93,7 @@
   background-color: var(--sapphire-accordion-color-background-header-active);
 }
 
-/* Focus header*/
+/* Focus header */
 
 .sapphire-accordion__item-header:focus {
   outline: none;
@@ -105,15 +110,34 @@
   border-radius: var(--sapphire-accordion-size-radius);
 }
 
-/* Remove closed item's border if header is focused */
+/* Remove the top box-shadow border (divider) from: 
+- first item of the accordion
+- the focused item itself when the accordion is opened and header is focused
+- the accordion item that is immediately preceded by a closed focused item 
+- the focused item itself when the accordion is closed and header is focused
+*/
+.sapphire-accordion__item:first-child,
+.sapphire-accordion__item.sapphire-accordion__item--open:has(
+    .sapphire-accordion__item-header.is-focus
+  ),
 .sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
     .sapphire-accordion__item-header.is-focus,
     .sapphire-accordion__item-header:not(.js-focus):focus-visible
-  ) {
-  border: none;
+  )
+  + .sapphire-accordion__item {
+  box-shadow: none;
 }
 
-/* Header elements */
+/* Remove closed item's box-shadow & bottom border if header is focused 
+  The border-bottom removal is intended if the last accordion item is focused
+*/
+.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
+    .sapphire-accordion__item-header.is-focus,
+    .sapphire-accordion__item-header:not(.js-focus):focus-visible
+  ) {
+  box-shadow: none;
+  border-bottom: none;
+}
 
 .sapphire-accordion__item-heading {
   font-size: var(--sapphire-accordion-size-font-heading);
@@ -170,3 +194,12 @@
   padding-bottom: var(--sapphire-accordion-size-spacing-body-bottom);
   visibility: visible;
 }
+
+.sapphire-accordion--negative-margin-self {
+  margin-left: calc(
+    var(--sapphire-accordion-size-spacing-body-horizontal) * -1
+  );
+  width: calc(
+    100% + (var(--sapphire-accordion-size-spacing-body-horizontal) * 2)
+  );
+}

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

@@ -14,6 +14,7 @@ declare const styles: {
   readonly "sapphire-accordion__item-heading": string;
   readonly "sapphire-accordion__item-arrow": string;
   readonly "sapphire-accordion__item-content": string;
+  readonly "sapphire-accordion--negative-margin-self": string;
 };
 export = styles;
 

package/components/textField/textField.module.css

@@ -142,7 +142,7 @@
  * (this does not support a prefix/postfix)
  */
 .sapphire-text-field--multiline {
-  display: inline-block;
+  display: block;
   line-height: 0;
   height: unset;
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "32.1.1",
+  "version": "32.2.0",
   "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": "^40.0.1"
   },
-  "gitHead": "96f9ae692dc2cdc75d36dd92943cdf70a2b39b4c"
+  "gitHead": "fd750fe463ba6d4f8a15c35e6f660fd6e46d0ec7"
 }