@danske/sapphire-css 50.1.0 → 51.0.0

package/components/avatar/avatar.module.css

@@ -11,7 +11,7 @@
   white-space: nowrap;
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-medium);
-  font-size: var(--sapphire-semantic-size-font-body-md);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
   font-style: normal;
   text-transform: capitalize;
 
@@ -31,6 +31,7 @@
 
   color: var(--sapphire-semantic-color-foreground-on-decorative-neutral);
   background: var(--sapphire-semantic-color-background-decorative-neutral);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* Sizes */
@@ -39,14 +40,14 @@
   height: var(--sapphire-semantic-size-height-control-sm);
   width: var(--sapphire-semantic-size-height-control-sm);
   border-radius: var(--sapphire-semantic-size-height-control-sm);
-  font-size: var(--sapphire-semantic-size-font-body-sm);
+  font-size: var(--sapphire-semantic-size-font-body-xs);
 }
 
 .sapphire-avatar--lg {
   height: var(--sapphire-semantic-size-height-control-lg);
   width: var(--sapphire-semantic-size-height-control-lg);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
-  font-size: var(--sapphire-global-size-font-125);
+  font-size: var(--sapphire-semantic-size-font-body-md);
 }
 
 /* Colors and variants */

package/components/badge/badge.module.css

@@ -31,6 +31,7 @@
 
   color: var(--sapphire-semantic-color-foreground-on-decorative-neutral);
   background: var(--sapphire-semantic-color-background-decorative-neutral);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* Sizes */
@@ -49,6 +50,7 @@
 .sapphire-badge--secondary-positive {
   color: var(--sapphire-semantic-color-foreground-on-positive-subtle);
   background: var(--sapphire-semantic-color-background-positive-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-badge--primary-negative {
@@ -59,6 +61,7 @@
 .sapphire-badge--secondary-negative {
   color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
   background: var(--sapphire-semantic-color-background-negative-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-badge--primary-warning {
@@ -69,6 +72,7 @@
 .sapphire-badge--secondary-warning {
   color: var(--sapphire-semantic-color-foreground-on-warning-subtle);
   background: var(--sapphire-semantic-color-background-warning-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-badge--primary-informative {
@@ -79,6 +83,7 @@
 .sapphire-badge--secondary-informative {
   color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
   background: var(--sapphire-semantic-color-background-accent-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* decorative badges */

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

@@ -6,10 +6,26 @@
   justify-content: space-between;
   padding: var(--sapphire-semantic-size-spacing-md)
     var(--sapphire-semantic-size-spacing-xl);
-  /* the bg color here is a hack until the design of this changes */
   background: var(--sapphire-semantic-color-background-neutral-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
+
   position: sticky;
   top: 0;
   left: 0;
   z-index: 3;
 }
+
+/* Firefox: backdrop-filter doesn't work on sticky elements inside overflow containers */
+@supports (-moz-appearance: none) {
+  .sapphire-bulk-actions-bar {
+    background-color: var(--sapphire-semantic-color-background-surface);
+  }
+
+  .sapphire-bulk-actions-bar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--sapphire-semantic-color-background-neutral-subtle);
+  }
+}

package/components/button/button.module.css

@@ -158,6 +158,8 @@ a.sapphire-button {
     --sapphire-semantic-color-background-action-secondary-default
   );
   color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
+
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(
@@ -201,6 +203,7 @@ a.sapphire-button {
   ).is-hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-button--tertiary.is-focus,
@@ -216,6 +219,7 @@ a.sapphire-button {
   ):focus-visible:active {
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* ## text */
@@ -282,6 +286,7 @@ a.sapphire-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-secondary-default
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(
@@ -343,6 +348,7 @@ a.sapphire-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-tertiary-hover
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-button--danger-tertiary.is-focus,
@@ -366,6 +372,7 @@ a.sapphire-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-tertiary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* ## Danger text */

package/components/calendar/calendar.module.css

@@ -123,6 +123,10 @@
   margin-left: var(--sapphire-semantic-size-spacing-sm);
   padding-top: var(--sapphire-semantic-size-spacing-2xs);
   padding-left: var(--sapphire-semantic-size-spacing-lg);
+  padding-right: var(--sapphire-semantic-size-spacing-lg);
+}
+
+.sapphire-calendar__table-container--md .sapphire-calendar__custom-ranges {
   padding-right: var(--sapphire-semantic-size-spacing-4xs);
 }
 
@@ -227,6 +231,7 @@
   .sapphire-calendar__button-text {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-calendar__button:not(:disabled):not(.is-disabled).is-active
@@ -237,6 +242,7 @@
   .sapphire-calendar__button-text {
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-calendar__table[aria-readonly='true'] .sapphire-calendar__button {
@@ -255,6 +261,7 @@
   background: var(
     --sapphire-semantic-color-background-action-select-secondary-default
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
@@ -420,7 +427,7 @@
 
 .sapphire-calendar__table-container--md
   .sapphire-calendar__button.sapphire-calendar__button--current::after {
-  bottom: var(--sapphire-global-size-generic-10);
+  bottom: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(

package/components/dateField/dateField.module.css

@@ -46,6 +46,12 @@
     var(--sapphire-dateField-icon-size);
 }
 
+.sapphire-date-field--align-right.sapphire-date-field--no-calendar {
+  grid-template-columns:
+    var(--sapphire-dateField-icon-size)
+    auto;
+}
+
 .sapphire-date-field--no-calendar {
   padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
 }
@@ -56,6 +62,20 @@
     auto;
 }
 
+.sapphire-date-field--align-right.sapphire-date-field--no-clear-button {
+  grid-template-columns:
+    auto
+    var(--sapphire-dateField-icon-size);
+}
+
+.sapphire-date-field--align-right .sapphire-date-field__input {
+  grid-column: 2;
+}
+
+.sapphire-date-field--align-right > .sapphire-date-field__button:last-child {
+  grid-column: 3;
+}
+
 .sapphire-date-field--no-clear-button.sapphire-date-field--no-calendar {
   grid-template-columns: 1fr;
 }
@@ -66,7 +86,9 @@
 
 .sapphire-date-field__input-group {
   display: grid;
-  grid-template-columns: min-content var(--sapphire-dateField-icon-size) min-content;
+  grid-template-columns:
+    min-content var(--sapphire-dateField-icon-size)
+    min-content;
   align-items: center;
 }
 
@@ -79,6 +101,10 @@
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
+.sapphire-date-field__input--align-right {
+  justify-content: flex-end;
+}
+
 .sapphire-date-field__range-separator {
   color: var(--sapphire-semantic-color-foreground-secondary);
   text-align: center;

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

@@ -1,10 +1,13 @@
 declare const styles: {
   readonly "sapphire-date-field": string;
   readonly "sapphire-date-field--no-calendar": string;
+  readonly "sapphire-date-field--align-right": string;
   readonly "sapphire-date-field--no-clear-button": string;
+  readonly "sapphire-date-field__input": string;
+  readonly "sapphire-date-field__button": string;
   readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input-group": string;
-  readonly "sapphire-date-field__input": string;
+  readonly "sapphire-date-field__input--align-right": string;
   readonly "sapphire-date-field__range-separator": string;
   readonly "sapphire-date-field--md": string;
   readonly "is-disabled": string;
@@ -15,7 +18,6 @@ declare const styles: {
   readonly "sapphire-date-field--error": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
-  readonly "sapphire-date-field__button": string;
   readonly "sapphire-date-field__button--clear": string;
   readonly "sapphire-date-field__icon": string;
   readonly "is-active": string;

package/components/dropzone/dropzone.module.css

@@ -110,6 +110,7 @@
 
 .sapphire-dropzone--dropping {
   background: var(--sapphire-semantic-color-background-accent-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-dropzone.sapphire-dropzone--dropping::before {

package/components/iconButton/iconButton.module.css

@@ -115,6 +115,7 @@ a.sapphire-icon-button {
     --sapphire-semantic-color-background-action-secondary-default
   );
   color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(
@@ -158,6 +159,7 @@ a.sapphire-icon-button {
   ):not(.is-active).is-hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-icon-button--tertiary.is-focus,
@@ -173,6 +175,7 @@ a.sapphire-icon-button {
   ):focus-visible:active {
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* Danger */
@@ -214,6 +217,7 @@ a.sapphire-icon-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-secondary-default
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(
@@ -277,6 +281,7 @@ a.sapphire-icon-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-tertiary-hover
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-icon-button--danger-tertiary.is-focus,
@@ -302,6 +307,7 @@ a.sapphire-icon-button {
   color: var(
     --sapphire-semantic-color-foreground-action-on-danger-tertiary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /**

package/components/link/link.module.css

@@ -23,7 +23,6 @@
   color: var(--sapphire-semantic-color-foreground-action-link-default);
 
   text-decoration: underline;
-  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
 }
 
 /* Disabled state for all variants */

package/components/list/list.module.css

@@ -91,6 +91,7 @@ instead of being applied on the list item itself  */
   background: var(
     --sapphire-semantic-color-background-action-select-secondary-default
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-list--negative-margin-self {
@@ -167,6 +168,7 @@ instead of being applied on the list item itself  */
     [aria-disabled='true']
   ):not(:disabled):not(:active):not(:has(:focus-within)):hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),
@@ -176,6 +178,7 @@ instead of being applied on the list item itself  */
   background: var(
     --sapphire-semantic-color-background-action-select-secondary-hover
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /*
@@ -208,6 +211,7 @@ the contentRight button, when it triggers a menu, does not get the active state.
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-hover
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-list__item--selected:not(.is-disabled).is-active:not(
@@ -219,6 +223,7 @@ the contentRight button, when it triggers a menu, does not get the active state.
   background-color: var(
     --sapphire-semantic-color-background-action-select-secondary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-list__item[aria-disabled='true']

package/components/listbox/listbox.module.css

@@ -232,6 +232,7 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
   .sapphire-listbox__content {
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
@@ -243,6 +244,7 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
   background: var(
     --sapphire-semantic-color-background-action-danger-tertiary-hover
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
@@ -267,6 +269,7 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
 .sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content {
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled).is-active
@@ -274,6 +277,7 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
   background: var(
     --sapphire-semantic-color-background-action-danger-tertiary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled).is-active

package/components/modalLayout/modalLayout.module.css

@@ -123,20 +123,25 @@
   );
   padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-md);
   min-height: var(--sapphire-global-size-generic-100);
-  background-color: var(--sapphire-semantic-color-background-surface);
+  background: var(--sapphire-semantic-color-background-neutral-subtle);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   display: flex;
   align-items: center;
   position: sticky;
   top: 0;
 }
 
-/*
- * Fix for section semi-transparent background not looking good when scrolled.
- */
-.sapphire-modal-layout__section-title::before {
-  content: '';
-  background: var(--sapphire-semantic-color-background-neutral-subtle);
-  position: absolute;
-  inset: 0;
-  z-index: -1;
+/* Firefox: backdrop-filter doesn't work on sticky elements inside overflow containers */
+@supports (-moz-appearance: none) {
+  .sapphire-modal-layout__section-title {
+    background-color: var(--sapphire-semantic-color-background-surface);
+  }
+
+  .sapphire-modal-layout__section-title::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--sapphire-semantic-color-background-neutral-subtle);
+  }
 }

package/components/progressIndicator/progressIndicator.module.css

@@ -4,6 +4,7 @@
   width: 100%;
   overflow: hidden;
   background: var(--sapphire-semantic-color-background-progress-track);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   position: relative;
 }
 

package/components/segmentedControl/segmentedControl.module.css

@@ -20,6 +20,7 @@
   position: relative;
   height: 100%;
   background: var(--sapphire-semantic-color-background-segmented-control-track);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
   padding: var(--sapphire-global-size-static-5);
   box-sizing: border-box;

package/components/select/select.module.css

@@ -29,12 +29,12 @@
   border: none;
   background: var(--sapphire-semantic-color-background-field);
   width: 100%;
-  outline: 0;
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
   text-align: left;
   color: inherit;
   font-family: inherit;
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
-    var(--sapphire-semantic-color-border-field-default);
   border-radius: var(--sapphire-semantic-size-radius-md);
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
@@ -127,8 +127,9 @@
  * Error
  */
 .sapphire-select--error:not(.is-disabled) .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px 1px
+  outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-negative-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
 }
 
 /**
@@ -142,8 +143,9 @@
     .is-disabled
   ):not(.js-hover):hover
   .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
+  outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-hover);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
 }
 
 .sapphire-select:not(.is-disabled).is-hover .sapphire-select__icon-container,
@@ -156,13 +158,15 @@
  * Focus
  */
 .sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+  outline: solid var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-focus-ring);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+  outline: solid var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-border-negative-default);
+  outline-offset: calc(-1 * var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-select.is-disabled .sapphire-select__button {

package/components/sidebar/sidebar.module.css

@@ -82,6 +82,7 @@
   top: 0;
   left: 100%;
   height: 100%;
+  z-index: 10;
   border-right: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
 }

package/components/slider/slider.module.css

@@ -19,6 +19,7 @@
   display: block;
   position: absolute;
   background: var(--sapphire-semantic-color-background-progress-track);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   height: var(--sapphire-global-size-generic-10);
   border-radius: var(--sapphire-semantic-size-radius-sm);
   width: var(--sapphire-semantic-size-width-field);

package/components/switch/switch.module.css

@@ -80,11 +80,12 @@
  * knob track
  */
 .sapphire-switch-track {
-  background: var(--sapphire-semantic-color-background-switch-default);
   box-sizing: border-box;
   position: relative;
   width: var(--sapphire-global-size-generic-110);
-  transition: background var(--sapphire-semantic-time-motion-quick)
+  box-shadow: inset 0 0 0 var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-default);
+  transition: box-shadow var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-fade);
   height: var(--sapphire-semantic-size-height-control-xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-xs) / 2);
@@ -97,7 +98,8 @@
   .sapphire-switch-input:not(:disabled)
   ~ .sapphire-switch-track,
 .sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track {
-  background: var(--sapphire-semantic-color-background-switch-hover);
+  box-shadow: inset 0 0 0 var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-hover);
 }
 
 /* active (unchecked) */
@@ -107,12 +109,14 @@
 .sapphire-switch.is-active
   .sapphire-switch-input:not(:disabled)
   ~ .sapphire-switch-track {
-  background: var(--sapphire-semantic-color-background-switch-active);
+  box-shadow: inset 0 0 0 var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-active);
 }
 
-/* default (unchecked) */
+/* default (checked) */
 .sapphire-switch-input:checked ~ .sapphire-switch-track {
   background: var(--sapphire-semantic-color-background-action-select-default);
+  box-shadow: none;
 }
 
 /* hover (checked) */
@@ -123,6 +127,7 @@
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track {
   background: var(--sapphire-semantic-color-background-action-select-hover);
+  box-shadow: none;
 }
 
 /* active (checked) */
@@ -133,6 +138,7 @@
   .sapphire-switch-input:not(:disabled):checked
   ~ .sapphire-switch-track {
   background: var(--sapphire-semantic-color-background-action-select-active);
+  box-shadow: none;
 }
 
 /* disabled */
@@ -158,16 +164,41 @@
   height: 100%;
   aspect-ratio: 1/1;
   border-radius: 50%;
-  background: var(
-    --sapphire-semantic-color-foreground-action-on-select-default
-  );
+  background-color: var(--sapphire-semantic-color-border-field-default);
   background-clip: content-box;
   left: 0;
   transition: left var(--sapphire-semantic-time-motion-quick)
-    var(--sapphire-semantic-transitions-dynamic);
+      var(--sapphire-semantic-transitions-dynamic),
+    background-color var(--sapphire-semantic-time-motion-quick)
+      var(--sapphire-semantic-transitions-fade);
+}
+
+/* hover (unchecked) */
+.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track::after,
+.sapphire-switch:not(:active):not(.is-active).is-hover
+  .sapphire-switch-track::after {
+  background-color: var(--sapphire-semantic-color-border-field-hover);
 }
+
+/* active (unchecked) */
+.sapphire-switch:active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track::after,
+.sapphire-switch.is-active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track::after {
+  background-color: var(--sapphire-semantic-color-border-field-active);
+}
+
 .sapphire-switch-input:checked ~ .sapphire-switch-track::after {
   left: calc(100% - var(--sapphire-semantic-size-height-control-xs));
+
+  /* override hover and active states from unchecked state style */
+  background-color: var(
+    --sapphire-semantic-color-foreground-action-on-select-default
+  ) !important;
 }
 
 .sapphire-switch--md .sapphire-switch-track {

package/components/table/table.module.css

@@ -173,6 +173,7 @@
 
 .sapphire-table__headCell.sapphire-table__headCell--sortable {
   cursor: pointer;
+  user-select: none;
 }
 
 .sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
@@ -223,6 +224,7 @@
 }
 
 /* Overflow behaviour */
+/* @deprecated in favor of TruncateOverflow */
 .sapphire-table__cell--ellipsed,
 .sapphire-table__headCell_content--ellipsed,
 .sapphire-table__cell--ellipsed .sapphire-table__cell-contents {
@@ -261,6 +263,7 @@
   padding: var(--sapphire-table-cell-spacing-v)
     var(--sapphire-table-cell-spacing-h);
   box-sizing: content-box;
+  text-align: center;
 }
 .sapphire-table__head .sapphire-table__selectionCell {
   padding: var(--sapphire-semantic-size-spacing-2xs)
@@ -326,14 +329,23 @@ th.sapphire-table__selectionCell:first-child {
   );
 }
 
-.sapphire-table--interactive .sapphire-table__row--active {
+/* Applied only when the "action" on rows is disabled. If only selection is disabled, only the checkbox should be disabled */
+.sapphire-table__row.is-disabled:not(.sapphire-table__row--selected)
+  .sapphire-table__cell {
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
+.sapphire-table--interactive .sapphire-table__row--active,
+.sapphire-table__row--interactive.sapphire-table__row--active {
   --sapphire-table-row-bg-active: var(
     --sapphire-semantic-color-background-action-tertiary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-table--interactive
-  .sapphire-table__row--selected.sapphire-table__row--active {
+  .sapphire-table__row--selected.sapphire-table__row--active,
+.sapphire-table__row--interactive.sapphire-table__row--selected.sapphire-table__row--active {
   --sapphire-table-row-bg-active: var(
     /* using hover color for active here is intentional, and to avoid too many color changes when selecting rows */
       --sapphire-semantic-color-background-action-select-secondary-hover
@@ -344,6 +356,7 @@ th.sapphire-table__selectionCell:first-child {
   --sapphire-table-row-bg: var(
     --sapphire-semantic-color-background-action-select-secondary-default
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /**
@@ -361,16 +374,60 @@ th.sapphire-table__selectionCell:first-child {
 }
 
 .sapphire-table__row-expand-button {
-  display: inline-flex; /* for transform to take effect */
-  transition: transform var(--sapphire-semantic-transitions-dynamic)
-    var(--sapphire-semantic-time-motion-quick);
+  display: inline-flex;
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  margin-right: var(--sapphire-semantic-size-spacing-sm);
+}
+/* the following rule is not yet properly supported. When that's widely supported, we can remove the specific rules */
+.sapphire-table__row[aria-level] {
+  --sapphire-table-row-level: attr(aria-level, number);
+}
+.sapphire-table__row[aria-level='1'] {
+  --sapphire-table-row-level: 1;
+}
+.sapphire-table__row[aria-level='2'] {
+  --sapphire-table-row-level: 2;
+}
+.sapphire-table__row[aria-level='3'] {
+  --sapphire-table-row-level: 3;
+}
+.sapphire-table__row[aria-level='4'] {
+  --sapphire-table-row-level: 4;
+}
+.sapphire-table__row[aria-level='5'] {
+  --sapphire-table-row-level: 5;
 }
 
-.sapphire-table td:has(.sapphire-table__row-expand-button) {
-  width: 0; /* To prevent the cell from growing more than needed. only needed when td is used for cells */
+/* tree column renders expand/collapse icon and is indented based on row level */
+.sapphire-table__cell--tree {
+  /* the unit of indentation for nested rows. */
+  /* Important: this should match the width+margin-right of .sapphire-table__row-expand-button for expandable/non-expandable siblings to align. */
+  --sapphire-table-indent-unit: calc(
+    var(--sapphire-semantic-size-icon-md) +
+      var(--sapphire-semantic-size-spacing-sm)
+  );
+  --sapphire-table-cell-indent-count: calc(var(--sapphire-table-row-level) - 1);
+  padding-left: calc(
+    var(--sapphire-table-cell-spacing-h) +
+      calc(
+        var(--sapphire-table-cell-indent-count) *
+          var(--sapphire-table-indent-unit)
+      )
+  );
+}
+.sapphire-table__cell--tree:not(:has(.sapphire-table__row-expand-button)) {
+  --sapphire-table-cell-indent-count: var(--sapphire-table-row-level);
 }
 
-.sapphire-table__row--expanded .sapphire-table__row-expand-button {
+.sapphire-table__row-expand-button svg {
+  transition: transform var(--sapphire-semantic-transitions-dynamic)
+    var(--sapphire-semantic-time-motion-quick);
+}
+.sapphire-table__row-expand-button--expanded svg {
   transform: rotate(180deg);
 }
 
@@ -400,6 +457,7 @@ th.sapphire-table__selectionCell:first-child {
   );
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   cursor: pointer;
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-table--interactive
@@ -419,6 +477,7 @@ th.sapphire-table__selectionCell:first-child {
   --sapphire-table-row-bg: var(
     --sapphire-semantic-color-background-action-highlight
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 /* TODO remove tbody in v6 */
@@ -501,12 +560,12 @@ tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
   /* Making sure the button does not change the row height */
   margin-top: calc(-1 * var(--sapphire-semantic-size-spacing-2xs));
   margin-bottom: calc(-1 * var(--sapphire-semantic-size-spacing-2xs));
-  visibility: hidden;
+  opacity: 0;
   flex-shrink: 0;
 }
 
 .sapphire-table__row.is-hover .sapphire-table__edit-button,
 .sapphire-table__row:hover .sapphire-table__edit-button,
 .sapphire-table__row:focus-within .sapphire-table__edit-button {
-  visibility: visible;
+  opacity: 1;
 }

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

@@ -32,13 +32,16 @@ declare const styles: {
   readonly "sapphire-table__table--spacing-lg": string;
   readonly "sapphire-table__table--spacing-xl": string;
   readonly "sapphire-table__tfoot": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table--interactive": string;
   readonly "sapphire-table__row--active": string;
-  readonly "sapphire-table__row--selected": string;
+  readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--expanded": string;
   readonly "sapphire-table__row-expand-button": string;
+  readonly "sapphire-table__cell--tree": string;
+  readonly "sapphire-table__row-expand-button--expanded": string;
   readonly "sapphire-table--without-last-divider": string;
-  readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--highlighted": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;

package/components/tabs/tabs.module.css

@@ -171,6 +171,7 @@
     .is-active
   ):not(.sapphire-tabs__tab--active).is-hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(
@@ -178,11 +179,13 @@
   ):hover,
 .sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover {
   background: var(--sapphire-semantic-color-state-accent-subtle-hover);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active {
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(
@@ -190,6 +193,7 @@
   ):hover,
 .sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover {
   background: var(--sapphire-semantic-color-state-accent-subtle-active);
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tabs__tab.js-focus.is-focus,

package/components/tag/tag.module.css

@@ -81,12 +81,14 @@
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   cursor: pointer;
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tag--actionable.is-active {
   background: var(--sapphire-semantic-color-background-action-tertiary-active);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
   cursor: pointer;
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-tag:disabled,

package/components/truncate-overflow/truncate-overflow.module.css

@@ -0,0 +1,7 @@
+.sapphire-truncate-overflow {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}

package/components/truncate-overflow/truncate-overflow.module.css.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "50.1.0",
+  "version": "51.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -38,7 +38,8 @@
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
     "build:themes:esm": "tsc -p tsconfig.themes.json --module ES2020 --outDir build/themes/esm && tsc -p tsconfig.themes.json --module ES2020 --outDir themes",
     "build:themes:cjs": "tsc -p tsconfig.themes.json --module CommonJS --outDir build/themes/cjs && tsc -p tsconfig.themes.json --module CommonJS",
-    "prepare": "yarn run build"
+    "prepare": "yarn run build",
+    "postpublish": "node ../../../scripts/append-release-notes.js"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -46,7 +47,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.0.1",
+    "@danske/sapphire-react": "^5.17.2",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
@@ -67,7 +68,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.4.0"
+    "@danske/sapphire-design-tokens": "^42.5.0"
   },
-  "gitHead": "6e7cb3028dc134adc624e161700df8cb3bc3bfb7"
+  "gitHead": "4903f9d28140b74e3e42467f790174d7f977f15d"
 }