@danske/sapphire-css 49.1.0 → 50.2.1

package/components/amount/amount.module.css

@@ -0,0 +1,6 @@
+.sapphire-amount {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--sapphire-semantic-size-spacing-3xs);
+}

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

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

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

@@ -80,6 +80,11 @@
   flex-grow: 1;
 }
 
+.sapphire-button--stretch:not(:has(.sapphire-button__icon)),
+.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)) {
+  padding: 0 var(--sapphire-semantic-size-spacing-xs);
+}
+
 .sapphire-button--stretch-left-align .sapphire-button__content {
   text-align: start;
 }
@@ -153,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(
@@ -196,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,
@@ -211,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 */
@@ -277,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(
@@ -338,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,
@@ -361,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/button/button.module.css.d.ts

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-button__content": string;
   readonly "sapphire-button--stretch": string;
   readonly "sapphire-button--stretch-left-align": string;
+  readonly "sapphire-button__icon": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
@@ -21,7 +22,6 @@ declare const styles: {
   readonly "sapphire-button--danger-text": string;
   readonly "sapphire-button--selected": string;
   readonly "sapphire-button--unselected": string;
-  readonly "sapphire-button__icon": string;
   readonly "sapphire-button--lg": string;
   readonly "sapphire-button--sm": string;
 };

package/components/buttonGroup/buttonGroup.module.css

@@ -56,6 +56,10 @@
   width: auto !important;
 }
 
+.sapphire-button-group--stretch.sapphire-button-group--vertical > * {
+  width: auto !important;
+}
+
 .sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(
     > *:nth-child(3)
   ) {

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/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

@@ -73,6 +73,7 @@
   line-height: 0;
   width: var(--sapphire-semantic-size-icon-md);
   height: var(--sapphire-semantic-size-icon-md);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-select--md .sapphire-select__icon-container {
@@ -145,6 +146,12 @@
     var(--sapphire-semantic-color-border-field-hover);
 }
 
+.sapphire-select:not(.is-disabled).is-hover .sapphire-select__icon-container,
+.sapphire-select:not(.is-disabled):not(.js-hover):hover
+  .sapphire-select__icon-container {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+
 /**
  * Focus
  */
@@ -162,3 +169,10 @@
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
+
+/**
+* Open state
+*/
+.sapphire-select--open .sapphire-select__icon-container {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}

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

@@ -13,6 +13,7 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
+  readonly "sapphire-select--open": string;
 };
 export = styles;
 

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

@@ -330,6 +330,7 @@ th.sapphire-table__selectionCell:first-child {
   --sapphire-table-row-bg-active: var(
     --sapphire-semantic-color-background-action-tertiary-active
   );
+  backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
 }
 
 .sapphire-table--interactive
@@ -344,6 +345,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);
 }
 
 /**
@@ -400,6 +402,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 +422,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 */

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

@@ -162,8 +162,7 @@
   );
 }
 
-.sapphire-text-field--md
-  .sapphire-text-field--multiline
+.sapphire-text-field--md.sapphire-text-field--multiline
   .sapphire-text-field__input {
   padding: var(--sapphire-semantic-size-spacing-control-vertical-md)
     var(--sapphire-semantic-size-spacing-control-horizontal-md);
@@ -180,6 +179,15 @@
   resize: vertical;
 }
 
+.sapphire-text-field--multiline.sapphire-text-field--resizable
+  .sapphire-text-field__input::-webkit-resizer {
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.81501 0.184985C8.06166 0.431632 8.06166 0.831526 7.81501 1.07817L1.07817 7.81501C0.831526 8.06166 0.431632 8.06166 0.184985 7.81501C-0.0616617 7.56837 -0.0616617 7.16847 0.184985 6.92183L6.92183 0.184985C7.16847 -0.0616617 7.56837 -0.0616617 7.81501 0.184985ZM7.81501 4.39551C8.06166 4.64216 8.06166 5.04205 7.81501 5.2887L5.2887 7.81501C5.04205 8.06166 4.64216 8.06166 4.39551 7.81501C4.14886 7.56837 4.14886 7.16847 4.39551 6.92183L6.92183 4.39551C7.16847 4.14886 7.56837 4.14886 7.81501 4.39551Z' fill='%23002346' fill-opacity='0.64'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--sapphire-semantic-size-spacing-3xs) bottom
+    var(--sapphire-semantic-size-spacing-3xs);
+}
+
 .sapphire-text-field__counter {
   color: var(--sapphire-semantic-color-foreground-secondary);
   margin-left: auto;
@@ -197,7 +205,8 @@
 /**
  * Disabled
  */
-.sapphire-text-field:has([disabled]) {
+.sapphire-text-field:has(input[disabled]),
+.sapphire-text-field:has(textarea[disabled]) {
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
@@ -205,12 +214,14 @@
 /**
  * Hover
  */
-.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
-    .is-focus
-  ):not(:focus-within).is-hover,
-.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
-    .is-focus
-  ):not(:focus-within):not(.js-hover):hover {
+.sapphire-text-field:not(:has(input[disabled])):not(
+    :has(textarea[disabled])
+  ):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,
+.sapphire-text-field:not(:has(input[disabled])):not(
+    :has(textarea[disabled])
+  ):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(
+    .js-hover
+  ):hover {
   outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-hover);
 }
@@ -255,14 +266,14 @@
  */
 .sapphire-text-field__stepper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-items: stretch;
-  padding: var(--sapphire-semantic-size-spacing-4xs)
+  padding: var(--sapphire-semantic-size-spacing-sm)
     calc(
-      var(--sapphire-semantic-size-spacing-4xs) +
+      var(--sapphire-semantic-size-spacing-sm) +
         var(--sapphire-semantic-size-border-sm)
     );
-  gap: var(--sapphire-semantic-size-spacing-4xs);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-text-field:has(.sapphire-text-field__stepper)
@@ -301,24 +312,20 @@
   cursor: pointer;
 
   /* color */
-  background: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
+  background: none;
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-text-field__stepper-button:not(:active):not(.is-active):not(
     .js-hover
   ):hover,
 .sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
-  background: var(--sapphire-semantic-color-background-action-secondary-hover);
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-text-field__stepper-button.is-active,
 .sapphire-text-field__stepper-button:active {
-  background: var(--sapphire-semantic-color-background-action-secondary-active);
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-text-field--md.sapphire-text-field__stepper-button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "49.1.0",
+  "version": "50.2.1",
   "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",
@@ -67,7 +68,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.3.0"
+    "@danske/sapphire-design-tokens": "^42.5.0"
   },
-  "gitHead": "88e11202ab17bb9830ba1f261d631ab24edf57d2"
+  "gitHead": "468518f32524d0aa811f5d273a5c4d4a6b1dcf62"
 }