@danske/sapphire-css 41.0.0 → 42.1.0

package/components/accordion/accordion.module.css

@@ -61,8 +61,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-semantic-size-spacing-sm)
-    var(--sapphire-semantic-size-spacing-md);
+  padding: var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-lg);
   border: none;
   background: inherit;
   font-family: inherit;
@@ -72,28 +74,6 @@
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
 }
 
-/* Hover header */
-
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(:active):not(.is-active):not(
-    .js-hover
-  ):hover,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
-  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
-}
-
-/* Active header */
-
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header.is-active,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:active,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(.js-focus):focus-visible:active {
-  background: var(--sapphire-semantic-color-background-action-tertiary-active);
-}
-
 /* Focus header */
 
 .sapphire-accordion__item-header:focus {
@@ -141,8 +121,6 @@
 }
 
 .sapphire-accordion__item-heading {
-  font-size: var(--sapphire-semantic-size-font-body-md);
-  font-weight: var(--sapphire-semantic-font-weight-default-medium);
   text-align: left;
   flex: 1;
   /* Wrap if title is long */
@@ -154,8 +132,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--sapphire-semantic-size-height-control-md);
-  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-xs);
+  height: var(--sapphire-semantic-size-height-control-xs);
   transition: transform var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-dynamic);
 }
@@ -177,12 +155,13 @@
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
   visibility: hidden;
-  transition: padding-top var(--sapphire-semantic-time-motion-quick)
-      var(--sapphire-semantic-transitions-dynamic),
+  opacity: 0;
+  transition: opacity var(--sapphire-semantic-time-fade-default)
+      var(--sapphire-semantic-transitions-fade),
     padding-bottom var(--sapphire-semantic-time-motion-quick)
       var(--sapphire-semantic-transitions-fade);
-  padding-right: var(--sapphire-semantic-size-spacing-md);
-  padding-left: var(--sapphire-semantic-size-spacing-md);
+  padding-right: var(--sapphire-semantic-size-spacing-lg);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
@@ -192,12 +171,12 @@
 .sapphire-accordion__item--open
   > .sapphire-accordion__item-content-wrapper
   > .sapphire-accordion__item-content {
-  padding-top: var(--sapphire-semantic-size-spacing-md);
-  padding-bottom: var(--sapphire-semantic-size-spacing-4xl);
+  opacity: 1;
+  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
   visibility: visible;
 }
 
 .sapphire-accordion--negative-margin-self {
-  margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
-  width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
+  margin-left: calc(var(--sapphire-semantic-size-spacing-lg) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-lg) * 2));
 }

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

@@ -5,11 +5,8 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "sapphire-accordion__item-header": string;
   readonly "sapphire-accordion__item-content-wrapper": string;
-  readonly "is-active": string;
-  readonly "js-hover": string;
-  readonly "is-hover": string;
-  readonly "js-focus": string;
   readonly "is-focus": string;
+  readonly "js-focus": string;
   readonly "sapphire-accordion__item--open": string;
   readonly "sapphire-accordion__item-heading": string;
   readonly "sapphire-accordion__item-arrow": string;

package/components/alert/alert.module.css

@@ -0,0 +1,68 @@
+.sapphire-alert {
+  box-sizing: border-box;
+  margin: 0;
+  display: grid;
+  column-gap: var(--sapphire-semantic-size-spacing-2xs);
+  row-gap: var(--sapphire-semantic-size-spacing-sm);
+  grid-template-columns: var(--sapphire-semantic-size-icon-sm) 1fr;
+  padding: var(--sapphire-semantic-size-spacing-md);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
+
+  color: var(--sapphire-semantic-color-foreground-primary);
+
+  /* Default variant "info" */
+  background-color: var(--sapphire-semantic-color-background-accent-subtle);
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-alert__icon {
+  grid-row: 1;
+  grid-column: 1;
+  color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
+  line-height: 0;
+  padding-top: var(--sapphire-semantic-size-spacing-4xs);
+}
+
+.sapphire-alert .sapphire-alert__title {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+}
+
+.sapphire-alert__content {
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+}
+
+.sapphire-alert--warning {
+  background-color: var(--sapphire-semantic-color-background-warning-subtle);
+}
+.sapphire-alert--warning .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-warning-subtle);
+}
+
+.sapphire-alert--negative {
+  background-color: var(--sapphire-semantic-color-background-negative-subtle);
+}
+.sapphire-alert--negative .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+}
+
+.sapphire-alert--positive {
+  background-color: var(--sapphire-semantic-color-background-positive-subtle);
+}
+.sapphire-alert--positive .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-positive-subtle);
+}

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

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "sapphire-alert": string;
+  readonly "sapphire-alert__icon": string;
+  readonly "sapphire-alert__title": string;
+  readonly "sapphire-alert__content": string;
+  readonly "sapphire-alert--warning": string;
+  readonly "sapphire-alert--negative": string;
+  readonly "sapphire-alert--positive": string;
+};
+export = styles;
+

package/components/button/button.module.css

@@ -170,7 +170,7 @@ a.sapphire-button {
   color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
 }
 
-/* ## Tertiary (undocumented) */
+/* ## Tertiary */
 .sapphire-button--tertiary {
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
@@ -215,12 +215,16 @@ a.sapphire-button {
 .sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
+  text-decoration: underline;
+  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
   color: var(--sapphire-semantic-color-foreground-action-link-hover);
 }
 
 .sapphire-button--text:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--text:not(:disabled):not(.is-disabled):active,
 .sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active {
+  text-decoration: underline;
+  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
   color: var(--sapphire-semantic-color-foreground-action-link-active);
 }
 

package/components/calendar/calendar.module.css

@@ -92,17 +92,17 @@
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child {
-  padding-right: var(--sapphire-semantic-size-spacing-2xs);
+  padding-right: var(--sapphire-semantic-size-spacing-xs);
   border-right: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child + td {
-  padding-left: var(--sapphire-semantic-size-spacing-2xs);
+  padding-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
 .sapphire-calendar__table-head-cell {
-  height: var(--sapphire-semantic-size-height-control-sm);
+  height: var(--sapphire-semantic-size-height-control-md);
   text-align: center;
   padding: 0;
 }
@@ -117,12 +117,12 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sapphire-semantic-size-spacing-md);
+  gap: var(--sapphire-semantic-size-spacing-sm);
   border-left: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
-  margin-left: var(--sapphire-semantic-size-spacing-md);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
   padding-top: var(--sapphire-semantic-size-spacing-2xs);
-  padding-left: var(--sapphire-semantic-size-spacing-xl);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
   padding-right: var(--sapphire-semantic-size-spacing-4xs);
 }
 
@@ -160,7 +160,7 @@
 }
 
 .sapphire-calendar__button .sapphire-calendar__button-text {
-  font-size: var(--sapphire-semantic-size-font-body-sm);
+  font-size: var(--sapphire-semantic-size-font-body-md);
   color: var(--sapphire-semantic-color-foreground-primary);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
@@ -176,6 +176,12 @@
   padding: 0 var(--sapphire-semantic-size-spacing-lg);
 }
 
+.sapphire-calendar__table-container--md
+  .sapphire-calendar__button
+  .sapphire-calendar__button-text {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+}
+
 .sapphire-calendar__header-title {
   font-weight: var(--sapphire-semantic-font-weight-default-medium);
   font-size: var(--sapphire-semantic-size-font-body-md);

package/components/dateField/dateField.module.css

@@ -33,8 +33,8 @@
     var(--sapphire-dateField-icon-size);
 
   height: var(--sapphire-semantic-size-height-control-lg);
-  border-radius: var(--sapphire-semantic-size-radius-sm);
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  border-radius: var(--sapphire-semantic-size-radius-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   border: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-field-default);
   background: var(--sapphire-semantic-color-background-field);
@@ -46,6 +46,10 @@
     var(--sapphire-dateField-icon-size);
 }
 
+.sapphire-date-field--no-calendar {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+}
+
 .sapphire-date-field--no-clear-button {
   grid-template-columns:
     var(--sapphire-dateField-icon-size)
@@ -56,14 +60,6 @@
   grid-template-columns: 1fr;
 }
 
-.sapphire-date-field--md {
-  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
-
-  height: var(--sapphire-semantic-size-height-control-md);
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
-  gap: var(--sapphire-semantic-size-spacing-xs);
-}
-
 .sapphire-date-field--range {
   width: var(--sapphire-global-size-generic-960);
 }
@@ -74,10 +70,6 @@
   align-items: center;
 }
 
-.sapphire-date-field--md .sapphire-date-field__input-group {
-  gap: var(--sapphire-semantic-size-spacing-4xs);
-}
-
 .sapphire-date-field__input {
   display: flex;
   align-items: center;
@@ -95,6 +87,22 @@
   content: '—';
 }
 
+/**
+ * Medium size
+ */
+.sapphire-date-field--md {
+  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
+
+  height: var(--sapphire-semantic-size-height-control-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
+  gap: var(--sapphire-semantic-size-spacing-xs);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+}
+
+.sapphire-date-field--md .sapphire-date-field__input-group {
+  gap: var(--sapphire-semantic-size-spacing-4xs);
+}
+
 .sapphire-date-field--md .sapphire-date-field__input {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }

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

@@ -2,11 +2,11 @@ declare const styles: {
   readonly "sapphire-date-field": string;
   readonly "sapphire-date-field--no-calendar": string;
   readonly "sapphire-date-field--no-clear-button": string;
-  readonly "sapphire-date-field--md": string;
   readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input-group": string;
   readonly "sapphire-date-field__input": string;
   readonly "sapphire-date-field__range-separator": string;
+  readonly "sapphire-date-field--md": string;
   readonly "sapphire-date-field__segment": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;

package/components/dialog/dialog.module.css

@@ -39,12 +39,19 @@
   animation-fill-mode: forwards;
 }
 
+.sapphire-dialog--padded {
+  padding: var(--sapphire-semantic-size-spacing-3xl)
+    var(--sapphire-semantic-size-spacing-3xl)
+    var(--sapphire-semantic-size-spacing-2xl)
+    var(--sapphire-semantic-size-spacing-3xl);
+}
+
 .sapphire-dialog--exiting {
   animation-name: fade-out;
 }
 
 .sapphire-dialog--xs {
-  width: var(--sapphire-global-size-generic-800);
+  width: var(--sapphire-global-size-generic-900);
 }
 
 .sapphire-dialog--sm {

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-dialog": string;
   readonly "fade-in": string;
+  readonly "sapphire-dialog--padded": string;
   readonly "sapphire-dialog--exiting": string;
   readonly "fade-out": string;
   readonly "sapphire-dialog--xs": string;

package/components/feedbackMessage/feedbackMessage.module.css

@@ -1,11 +1,15 @@
 .sapphire-feedback-message {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
   margin: auto;
   max-width: var(--sapphire-global-size-generic-1000);
-  gap: var(--sapphire-semantic-size-spacing-xl);
+}
+
+.sapphire-feedback-message__header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--sapphire-semantic-size-spacing-xl);
 }
 
 .sapphire-feedback-message__content {
@@ -13,5 +17,11 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--sapphire-semantic-size-spacing-md);
+  gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-feedback-message__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--sapphire-semantic-size-spacing-2xl);
 }

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

@@ -1,6 +1,8 @@
 declare const styles: {
   readonly "sapphire-feedback-message": string;
+  readonly "sapphire-feedback-message__header": string;
   readonly "sapphire-feedback-message__content": string;
+  readonly "sapphire-feedback-message__footer": string;
 };
 export = styles;
 

package/components/label/label.module.css

@@ -1,5 +1,5 @@
 .sapphire-label {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   min-height: var(--sapphire-semantic-size-height-control-xs);
   line-height: var(--sapphire-semantic-size-line-height-md);

package/components/link/link.module.css

@@ -19,10 +19,11 @@
   cursor: pointer;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 
-  text-decoration-skip-ink: none;
-
   outline: none;
   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

@@ -156,10 +156,10 @@ instead of being applied on the list item itself  */
 /*
  * Hover
  */
-.sapphire-list__item--interactive.is-hover:not(.is-active),
+.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),
 .sapphire-list__item--interactive:not(.js-hover):not(
     [aria-disabled='true']
-  ):not(:disabled):not(:active):hover {
+  ):not(:disabled):not(:active):not(:has(:hover)):hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
@@ -182,13 +182,12 @@ instead of being applied on the list item itself  */
 
 /* Active */
 
-.sapphire-list__item--interactive:not(.is-disabled).is-active,
+.sapphire-list__item--interactive:not(.is-disabled).is-active:not(
+    :has(.is-active)
+  ),
 .sapphire-list__item--interactive:not([aria-disabled='true']):not(
     :disabled
-  ):active,
-.sapphire-list__item--interactive:not([aria-disabled='true']):not(
-    :disabled
-  ):focus-visible:active {
+  ):not(:has(:active)):active {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-hover
   );

package/components/modalLayout/modalLayout.module.css

@@ -81,3 +81,36 @@
   border-top: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
 }
+
+.sapphire-modal-layout__section {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.sapphire-modal-layout__section-title {
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1
+  );
+  width: calc(
+    100% + (var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2)
+  );
+  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);
+  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;
+}

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

@@ -10,6 +10,8 @@ declare const styles: {
   readonly "sapphire-modal-layout__subheading": string;
   readonly "sapphire-modal-layout__body--scrolled": string;
   readonly "sapphire-modal-layout__body--scrollable": string;
+  readonly "sapphire-modal-layout__section": string;
+  readonly "sapphire-modal-layout__section-title": string;
 };
 export = styles;
 

package/components/progressIndicator/progressIndicator.module.css

@@ -0,0 +1,45 @@
+/* Progress bar Track styles */
+.sapphire-progress {
+  height: 3px;
+  width: 100%;
+  overflow: hidden;
+  background: var(--sapphire-semantic-color-background-progress-track);
+  position: relative;
+}
+
+.sapphire-progress:has(.sapphire-progress--segments) {
+  display: flex;
+}
+
+/* Progress bar Progress styles */
+.sapphire-progress--indicator {
+  height: 100%;
+  background: var(--sapphire-semantic-color-background-progress-fill);
+  transition: width var(--sapphire-semantic-time-motion-default)
+    var(--sapphire-semantic-transitions-dynamic);
+}
+
+/* Progress bar Segmented styles */
+.sapphire-progress--segments {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sapphire-progress--segments span {
+  flex: 1;
+  position: relative;
+}
+
+.sapphire-progress--segments span:not(:first-child)::before {
+  background: var(--sapphire-semantic-color-background-surface);
+  content: '';
+  display: block;
+  height: 100%;
+  width: 4px;
+}

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

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "sapphire-progress": string;
+  readonly "sapphire-progress--segments": string;
+  readonly "sapphire-progress--indicator": string;
+};
+export = styles;
+

package/components/select/select.module.css

@@ -24,7 +24,8 @@
   height: var(--sapphire-semantic-size-height-control-lg);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0
+    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
   border: none;
   background: var(--sapphire-semantic-color-background-field);
   width: 100%;
@@ -34,11 +35,12 @@
   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-sm);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-select--md .sapphire-select__button {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   height: var(--sapphire-semantic-size-height-control-md);
   padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   gap: var(--sapphire-semantic-size-spacing-xs);
@@ -88,6 +90,11 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
+.sapphire-select:not(.sapphire-select--md)
+  .sapphire-select__button:has(.sapphire-select__prefix) {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+}
+
 .sapphire-select--md .sapphire-select__prefix {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }

package/components/slider/slider.module.css

@@ -0,0 +1,64 @@
+.sapphire-slider {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-semantic-size-spacing-xs);
+  justify-content: center;
+  width: fit-content;
+}
+
+.sapphire-slider__track {
+  position: relative;
+  width: var(--sapphire-semantic-size-width-field);
+  height: var(--sapphire-semantic-size-height-control-2xs);
+  touch-action: none;
+}
+
+.sapphire-slider__track-remaining {
+  content: '';
+  display: block;
+  position: absolute;
+  background: var(--sapphire-semantic-color-background-progress-track);
+  height: var(--sapphire-global-size-generic-10);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  width: var(--sapphire-semantic-size-width-field);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sapphire-slider__track-fill {
+  position: absolute;
+  content: '';
+  display: block;
+  background: var(--sapphire-semantic-color-background-progress-fill);
+  height: var(--sapphire-global-size-generic-10);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sapphire-slider__thumb {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  cursor: grab;
+  width: var(--sapphire-semantic-size-height-control-2xs);
+  height: var(--sapphire-semantic-size-height-control-2xs);
+  border-radius: var(--sapphire-semantic-size-radius-xl);
+  background: var(--sapphire-semantic-color-background-progress-fill);
+  forced-color-adjust: none;
+}
+
+/* focused */
+.sapphire-slider__thumb.is-focus {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
+}
+
+/* disabled */
+.sapphire-slider__track[data-disabled='true'] {
+  opacity: var(--sapphire-semantic-opacity-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "sapphire-slider": string;
+  readonly "sapphire-slider__track": string;
+  readonly "sapphire-slider__track-remaining": string;
+  readonly "sapphire-slider__track-fill": string;
+  readonly "sapphire-slider__thumb": string;
+  readonly "is-focus": string;
+};
+export = styles;
+

package/components/table/table.module.css

@@ -167,9 +167,6 @@
     .js-hover
   ):hover
   .sapphire-table__headCell_container {
-  --sapphire-table-row-bg: var(
-    --sapphire-semantic-color-background-action-tertiary-hover
-  );
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   border-radius: var(--sapphire-semantic-size-radius-sm);
 }

package/components/tag/tag.module.css

@@ -8,9 +8,11 @@
 .sapphire-tag {
   display: inline-flex;
   height: var(--sapphire-semantic-size-height-control-sm);
-  padding: 0 var(--sapphire-semantic-size-spacing-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-md);
   align-items: center;
   border-radius: var(--sapphire-semantic-size-height-control-sm);
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-primary);
 
   /* typography */
   font-size: var(--sapphire-semantic-size-font-control-md);
@@ -19,11 +21,8 @@
   font-style: normal;
   text-decoration: none;
 
-  /* color default */
-  background: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
-  color: var(--sapphire-semantic-color-foreground-primary);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
   outline: none;
 
   /* transition */
@@ -69,12 +68,14 @@
 .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background: var(--sapphire-semantic-color-background-action-secondary-hover);
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   cursor: pointer;
 }
 
 .sapphire-tag--actionable.is-active {
-  background: var(--sapphire-semantic-color-background-action-secondary-active);
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
   cursor: pointer;
 }
 
@@ -95,12 +96,17 @@
 .sapphire-tag__error-icon {
   display: flex;
   align-items: center;
-  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+  color: var(--sapphire-semantic-color-foreground-negative);
 }
 
 /**
  * Button
  */
+
+.sapphire-tag:has(.sapphire-tag__button) {
+  padding-right: var(--sapphire-semantic-size-spacing-sm);
+}
+
 .sapphire-tag__button {
   box-sizing: border-box;
   display: inline-flex;
@@ -120,7 +126,7 @@
 
   /* style */
   background: transparent;
-  color: var(--sapphire-semantic-color-foreground-on-neutral-subtle);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
 }
 
 .sapphire-tag__button:focus {

package/components/text/text.module.css

@@ -22,6 +22,10 @@
   font-weight: var(--sapphire-semantic-font-weight-default-bold);
 }
 
+.sapphire-text--semibold {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+}
+
 .sapphire-text--underlined {
   text-decoration: underline;
 }
@@ -57,7 +61,7 @@
   margin-top: 0px;
   margin-bottom: 0px;
   line-height: var(--sapphire-global-size-line-height-sm);
-  letter-spacing: -1%;
+  letter-spacing: -0.01em;
 }
 
 .sapphire-text--heading-2xl {

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-text": string;
   readonly "sapphire-text--strong": string;
+  readonly "sapphire-text--semibold": string;
   readonly "sapphire-text--underlined": string;
   readonly "sapphire-text--secondary": string;
   readonly "sapphire-text--informative": string;

package/components/textField/textField.module.css

@@ -6,7 +6,7 @@
   overflow-x: hidden;
   display: flex;
   align-items: center;
-  border-radius: var(--sapphire-semantic-size-radius-sm);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   cursor: text;
   color: var(--sapphire-semantic-color-foreground-primary);
   background: var(--sapphire-semantic-color-background-field);
@@ -29,6 +29,7 @@
 }
 
 .sapphire-text-field--md {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   height: var(--sapphire-semantic-size-height-control-md);
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
@@ -95,7 +96,8 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
-  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  /* the margin below is "md" on purpose - only when there's a prefix/postfix */
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-text-field--md .sapphire-text-field__prefix {
@@ -115,7 +117,8 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
-  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  /* the margin below is "md" on purpose - only when there's a prefix/postfix */
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-text-field--md .sapphire-text-field__postfix {
@@ -224,7 +227,7 @@
   * or focusing on the list of browser autofilling suggestions.
   */
   box-shadow: 0 0 0 var(--sapphire-semantic-size-height-control-lg) inset
-    var(--sapphire-semantic-color-background-surface) !important;
+    var(--sapphire-semantic-color-background-field) !important;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "41.0.0",
+  "version": "42.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.1.1"
+    "@danske/sapphire-design-tokens": "^42.2.0"
   },
-  "gitHead": "4cb9fa793fcb43b74fe8b925c7810d9cd76ba1f9"
+  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
 }