@danske/sapphire-css 45.0.0 → 45.1.0

package/components/list/list.module.css

@@ -87,6 +87,12 @@ instead of being applied on the list item itself  */
   align-items: inherit;
 }
 
+.sapphire-list__item > .sapphire-list__item--selected {
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
+  );
+}
+
 .sapphire-list--negative-margin-self {
   margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
   width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
@@ -163,6 +169,15 @@ instead of being applied on the list item itself  */
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
+.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),
+.sapphire-list__item--selected:not(.js-hover):not([aria-disabled='true']):not(
+    :disabled
+  ):not(:active):not(:has(:hover)):hover {
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
+  );
+}
+
 /*
  * Focus
  */
@@ -193,6 +208,17 @@ instead of being applied on the list item itself  */
   );
 }
 
+.sapphire-list__item--selected:not(.is-disabled).is-active:not(
+    :has(.is-active)
+  ),
+.sapphire-list__item--selected:not([aria-disabled='true']):not(:disabled):not(
+    :has(:active)
+  ):active {
+  background-color: var(
+    --sapphire-semantic-color-background-action-select-secondary-active
+  );
+}
+
 .sapphire-list__item[aria-disabled='true']
   .sapphire-list__item--interactive:active,
 .sapphire-list__item--interactive:focus-visible {

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

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-list": string;
   readonly "sapphire-list__item": string;
   readonly "sapphire-list__item--interactive": string;
+  readonly "sapphire-list__item--selected": string;
   readonly "sapphire-list--negative-margin-self": string;
   readonly "is-focus": string;
   readonly "js-focus": string;

package/components/modalLayout/modalLayout.module.css

@@ -114,6 +114,7 @@
 }
 
 .sapphire-modal-layout__section-title {
+  z-index: 1; /* Only <legend> element appears above content by default when sticky, <header> needs this */
   margin-left: calc(
     var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "45.0.0",
+  "version": "45.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -69,5 +69,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "956d65c795c2bffc1e4cc153c7721e94c35827c9"
+  "gitHead": "fe060604b778104583e59507572af0dc0747afb4"
 }