@danske/sapphire-css 45.0.0 → 46.0.0

package/components/bulk-actions-bar/bulk-actions-bar.module.css

@@ -0,0 +1,13 @@
+.sapphire-bulk-actions-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sapphire-semantic-size-spacing-sm)
+    var(--sapphire-semantic-size-spacing-md);
+  /* the bg color here is a hack until the design of this changes */
+  background: var(--sapphire-semantic-color-background-neutral-subtle);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}

package/components/bulk-actions-bar/bulk-actions-bar.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "sapphire-bulk-actions-bar": string;
+};
+export = styles;
+

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/components/table/table.module.css

@@ -452,23 +452,6 @@ tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
   );
 }
 
-/**
- * Selection actions. Optionally shown when a table uses multiple selection.
- */
-.sapphire-table__selection-action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-sm)
-    var(--sapphire-semantic-size-spacing-lg);
-  /* the bg color here is a hack until the design of this changes */
-  background: var(--sapphire-semantic-color-background-neutral-subtle);
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 3;
-}
-
 /**
  * Footer.
  * Normally used as a container for the pagination.
@@ -476,6 +459,7 @@ tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
 .sapphire-table__footer {
   position: relative;
   z-index: 2; /* Setting to two because body rows are positioned relative */
+  margin: var(--sapphire-semantic-size-spacing-sm) 0;
 }
 
 .sapphire-table__footer--sticky {

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

@@ -40,7 +40,6 @@ declare const styles: {
   readonly "sapphire-table--without-last-divider": string;
   readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--highlighted": string;
-  readonly "sapphire-table__selection-action-bar": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;
   readonly "sapphire-table__footer--virtualized": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "45.0.0",
+  "version": "46.0.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": "b745d009a1799e0912fcaeb52973104d566326c0"
 }