@danske/sapphire-css 49.0.0 → 50.1.0

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/bulk-actions-bar/bulk-actions-bar.module.css

@@ -1,9 +1,11 @@
 .sapphire-bulk-actions-bar {
   display: flex;
+  min-height: var(--sapphire-global-size-generic-180);
+  box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  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-xl);
   /* the bg color here is a hack until the design of this changes */
   background: var(--sapphire-semantic-color-background-neutral-subtle);
   position: sticky;

package/components/button/button.module.css

@@ -58,6 +58,7 @@
 
 .sapphire-button__content {
   align-items: center;
+  text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
@@ -79,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;
 }

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

@@ -1,7 +1,7 @@
 .sapphire-field-group {
   display: flex;
   flex-wrap: wrap;
-  column-gap: var(--sapphire-semantic-size-spacing-lg);
+  column-gap: var(--sapphire-semantic-size-spacing-xl);
   row-gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
@@ -14,5 +14,5 @@
 }
 
 .sapphire-field-group--md {
-  row-gap: var(--sapphire-semantic-size-spacing-2xs);
+  row-gap: var(--sapphire-semantic-size-spacing-xs);
 }

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

@@ -479,3 +479,34 @@ tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
   right: 0;
   left: 0;
 }
+
+/**
+ * Editable cell
+ */
+.sapphire-table__cell-container--editable {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sapphire-semantic-size-spacing-md);
+}
+
+.sapphire-table__edit-cell-popover {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-table__edit-button {
+  /* 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;
+  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;
+}

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

@@ -43,6 +43,9 @@ declare const styles: {
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;
   readonly "sapphire-table__footer--virtualized": string;
+  readonly "sapphire-table__cell-container--editable": string;
+  readonly "sapphire-table__edit-cell-popover": string;
+  readonly "sapphire-table__edit-button": string;
 };
 export = styles;
 

package/components/tag/tag.module.css

@@ -8,6 +8,7 @@
 .sapphire-tag {
   display: inline-flex;
   height: var(--sapphire-semantic-size-height-control-sm);
+  max-width: calc(var(--sapphire-semantic-size-height-control-sm) * 10);
   padding: 0 var(--sapphire-semantic-size-spacing-md);
   align-items: center;
   border-radius: var(--sapphire-semantic-size-height-control-sm);
@@ -59,6 +60,15 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sapphire-semantic-size-spacing-xs);
+  min-width: 0;
+  flex: 1;
+}
+
+.sapphire-tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 
 /* Actionable */
@@ -97,6 +107,7 @@
   display: flex;
   align-items: center;
   color: var(--sapphire-semantic-color-foreground-negative);
+  flex-shrink: 0;
 }
 
 /**
@@ -117,6 +128,7 @@
   margin: 0;
   padding: 0;
   background: transparent;
+  flex-shrink: 0;
 
   /* transition */
   transition-property: color;

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

@@ -4,6 +4,7 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-tag__content": string;
+  readonly "sapphire-tag__label": string;
   readonly "sapphire-tag--actionable": string;
   readonly "is-disabled": string;
   readonly "is-active": string;

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

@@ -1,106 +1,193 @@
-@keyframes fade-in {
+@keyframes slide-in {
   from {
-    opacity: 0;
     transform: translate3d(
         0,
-        calc(var(--sapphire-toast-animation-direction, 1) * 100%),
+        /* NOTE: 1rem is hardcoded since sapphire variables are not accessible
+           at html::view-transition-* pseudo-elements. Can be improved when scoped
+           view transitions are implemented: https://developer.chrome.com/blog/scoped-view-transitions-feedback
+        */
+          calc(var(--sapphire-toast-animation-direction, 1) * 100% + 1rem),
         0
       )
-      translateX(var(--sapphire-toast-horizontal-transform)) scale(0.9);
+      scale(0.9);
   }
+}
 
+@keyframes slide-out {
   to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0)
-      translateX(var(--sapphire-toast-horizontal-transform)) scale(1);
+    opacity: 0;
+    transform: translate3d(
+        0,
+        calc(var(--sapphire-toast-animation-direction, 1) * 100% + 1rem),
+        0
+      )
+      scale(0.9);
   }
 }
 
-@keyframes fade-out {
-  from {
-    opacity: 1;
+::view-transition-group(.sapphire-toast-view-transition--reverse) {
+  --sapphire-toast-animation-direction: -1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  ::view-transition-group(.sapphire-toast-view-transition) {
+    /* NOTE: the values are hardcoded since sapphire variables are not accessible
+     at html::view-transition-* pseudo-elements. Can be improved when scoped
+     view transitions are implemented: https://developer.chrome.com/blog/scoped-view-transitions-feedback
+  */
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0, 0, 0, 1);
   }
 
-  to {
-    opacity: 0;
+  /*
+ * animation customization
+ * the default view transition animation works fine
+ * for all state changes except for two cases that we need to customize:
+ * 1. a new toast should be added with a slide-in animation
+ * 2. the first toast should be removed with a slide-out animation
+ */
+  ::view-transition-new(.sapphire-toast-view-transition):only-child {
+    animation-name: slide-in;
+  }
+  ::view-transition-old(.sapphire-toast-view-transition):only-child {
+    animation-name: slide-out;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Avoid view transition for individual toast when user prefers reduced motion */
+  .sapphire-toast {
+    view-transition-name: none !important;
   }
 }
 
 .sapphire-toast-container {
   pointer-events: none;
   position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--sapphire-semantic-size-spacing-md));
 }
 
 /* Placement */
 .sapphire-toast-container--bottom {
-  --sapphire-toast-horizontal-transform: -50%;
-  bottom: 0;
-  left: 50%;
-  margin-bottom: var(--sapphire-semantic-size-spacing-md);
+  bottom: var(--sapphire-semantic-size-spacing-md);
+  left: 0;
 }
 
 .sapphire-toast-container--bottom-left {
-  --sapphire-toast-horizontal-transform: 0%;
-  bottom: 0;
-  left: 0;
-  margin-bottom: var(--sapphire-semantic-size-spacing-md);
-  margin-left: var(--sapphire-semantic-size-spacing-md);
+  bottom: var(--sapphire-semantic-size-spacing-md);
+  left: var(--sapphire-semantic-size-spacing-md);
+  align-items: flex-start;
 }
 
 .sapphire-toast-container--bottom-right {
-  --sapphire-toast-horizontal-transform: 0%;
-  bottom: 0;
-  right: 0;
-  margin-bottom: var(--sapphire-semantic-size-spacing-md);
-  margin-right: var(--sapphire-semantic-size-spacing-md);
+  bottom: var(--sapphire-semantic-size-spacing-md);
+  right: var(--sapphire-semantic-size-spacing-md);
+  align-items: flex-end;
 }
 
 .sapphire-toast-container--top {
-  --sapphire-toast-animation-direction: -1;
-  --sapphire-toast-horizontal-transform: -50%;
-  top: 0;
-  left: 50%;
-  margin-top: var(--sapphire-semantic-size-spacing-md);
+  top: var(--sapphire-semantic-size-spacing-md);
+  left: 0;
 }
 
 .sapphire-toast-container--top-left {
-  --sapphire-toast-animation-direction: -1;
-  --sapphire-toast-horizontal-transform: 0%;
-  top: 0;
-  left: 0;
-  margin-top: var(--sapphire-semantic-size-spacing-md);
-  margin-left: var(--sapphire-semantic-size-spacing-md);
+  top: var(--sapphire-semantic-size-spacing-md);
+  left: var(--sapphire-semantic-size-spacing-md);
+  align-items: flex-start;
 }
 
 .sapphire-toast-container--top-right {
-  --sapphire-toast-animation-direction: -1;
-  --sapphire-toast-horizontal-transform: 0%;
+  top: var(--sapphire-semantic-size-spacing-md);
+  right: var(--sapphire-semantic-size-spacing-md);
+  align-items: flex-end;
+}
+
+.sapphire-toast-container--top:has(.sapphire-toast-list--expanded),
+.sapphire-toast-container--top-left:has(.sapphire-toast-list--expanded),
+.sapphire-toast-container--top-right:has(.sapphire-toast-list--expanded) {
   top: 0;
-  right: 0;
-  margin-top: var(--sapphire-semantic-size-spacing-md);
-  margin-right: var(--sapphire-semantic-size-spacing-md);
+}
+
+.sapphire-toast-container--bottom:has(.sapphire-toast-list--expanded),
+.sapphire-toast-container--bottom-left:has(.sapphire-toast-list--expanded),
+.sapphire-toast-container--bottom-right:has(.sapphire-toast-list--expanded) {
+  bottom: 0;
+}
+
+.sapphire-toast-list {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+
+  padding: 0;
+  margin: 0;
+  transition: perspective-origin var(--sapphire-semantic-time-motion-default)
+    var(--sapphire-semantic-transitions-dynamic);
+}
+
+.sapphire-toast-list--expanded {
+  overflow-y: auto;
+  overflow-x: visible;
+  padding: var(--sapphire-semantic-size-spacing-md)
+    calc(var(--sapphire-semantic-size-focus-ring) * 2);
+  margin: 0 calc(var(--sapphire-semantic-size-focus-ring) * -2);
+}
+
+.sapphire-toast-list--collapsed {
+  perspective: calc(
+    var(--sapphire-semantic-size-spacing-sm) * 2 +
+      var(--sapphire-global-size-generic-140)
+  );
+  --sapphire-origin-y: 200%;
+  perspective-origin: center calc(-1 * var(--sapphire-origin-y));
+}
+
+.sapphire-toast-list--collapsed.js-hover.is-hover:has(> :nth-child(2)),
+.sapphire-toast-list--collapsed:not(.js-hover):hover:has(> :nth-child(2)) {
+  --sapphire-origin-y: 280%;
+}
+
+.sapphire-toast-container--top .sapphire-toast-list,
+.sapphire-toast-container--top-left .sapphire-toast-list,
+.sapphire-toast-container--top-right .sapphire-toast-list {
+  perspective-origin: center calc(100% + var(--sapphire-origin-y));
+  flex-direction: column;
+}
+
+.sapphire-toast-list:has(> :nth-child(2)) .sapphire-toast,
+.sapphire-toast-list:has(> :nth-child(2)) .sapphire-toast {
+  cursor: pointer;
+}
+
+/* when the view transition is active, we want to delay the transition of the toast list
+   to make sure hover effects are not triggered */
+:root:active-view-transition .sapphire-toast-list {
+  transition-delay: 2s;
 }
 
 /************************************************************/
 
 .sapphire-toast {
   pointer-events: initial;
-  position: absolute;
+  position: relative;
   inset: inherit;
-  /* absolute position & center */
-  transform: translateX(var(--sapphire-toast-horizontal-transform));
 
-  /* let the text grow until max-width */
-  width: max-content;
+  width: min(
+    var(--sapphire-global-size-generic-850),
+    calc(100vw - 2 * var(--sapphire-semantic-size-spacing-md))
+  );
+  flex-shrink: 0;
 
   overflow: hidden;
-  max-width: var(--sapphire-global-size-generic-1400);
-  min-width: var(--sapphire-global-size-generic-750);
   border-radius: var(--sapphire-semantic-size-radius-lg);
-  animation-duration: var(--sapphire-semantic-time-motion-default);
-
-  animation-timing-function: var(--sapphire-semantic-transitions-fade);
-
   /* if implemented as focusable, we don't want the outline because this is not
      * an an interactive element in itself */
   outline: none;
@@ -120,22 +207,54 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-toast--entering {
-  animation-name: fade-in;
+/* focus */
+.sapphire-toast:not(.js-focus):focus-visible,
+.sapphire-toast.is-focus {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
-/* This represents the toast which appears immediately after the current one
- * disappears */
-.sapphire-toast--queued {
-  opacity: 0;
-  animation-name: fade-in;
-  animation-delay: var(--sapphire-semantic-time-motion-default);
-  animation-fill-mode: forwards;
+.sapphire-toast.sapphire-toast--stacked {
+  /* Position absolute is needed for the correct container sizing */
+  /* stylelint-disable csstools/value-no-unknown-custom-properties */
+  position: absolute;
+  /* when stacked, toasts after the third one should not be visible.
+  They are still expected to be rendered so that the view transition
+  works as expected without needing any special style */
+  --sapphire-toast-position-index: min(var(--sapphire-toast-index, 0), 2);
+
+  translate: 0 0
+    calc(
+      var(--sapphire-toast-position-index) *
+        var(--sapphire-semantic-size-spacing-xs) * -1
+    );
+  max-height: var(--sapphire-global-size-generic-140);
 }
 
-.sapphire-toast--exiting {
-  animation-name: fade-out;
-  animation-fill-mode: forwards;
+.sapphire-toast-container--bottom .sapphire-toast.sapphire-toast--stacked,
+.sapphire-toast-container--bottom-left .sapphire-toast.sapphire-toast--stacked,
+.sapphire-toast-container--bottom-right
+  .sapphire-toast.sapphire-toast--stacked {
+  top: 0;
+}
+
+.sapphire-toast-container--top .sapphire-toast.sapphire-toast--stacked,
+.sapphire-toast-container--top-left .sapphire-toast.sapphire-toast--stacked,
+.sapphire-toast-container--top-right .sapphire-toast.sapphire-toast--stacked {
+  bottom: 0;
+}
+
+.sapphire-toast--stacked .sapphire-toast__text-content {
+  visibility: hidden;
+}
+
+.sapphire-toast--stacked::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--sapphire-semantic-color-background-surface);
+  opacity: calc(var(--sapphire-toast-index) * 0.2);
 }
 
 .sapphire-toast__content {
@@ -160,6 +279,7 @@
   flex: 1;
   justify-content: center;
   padding: var(--sapphire-semantic-size-spacing-2xs);
+  overflow: hidden;
 }
 
 .sapphire-toast__text-content > :nth-child(1 of :not(:only-child)) {

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

@@ -1,4 +1,9 @@
 declare const styles: {
+  readonly "sapphire-toast-view-transition--reverse": string;
+  readonly "sapphire-toast-view-transition": string;
+  readonly "slide-in": string;
+  readonly "slide-out": string;
+  readonly "sapphire-toast": string;
   readonly "sapphire-toast-container": string;
   readonly "sapphire-toast-container--bottom": string;
   readonly "sapphire-toast-container--bottom-left": string;
@@ -6,14 +11,16 @@ declare const styles: {
   readonly "sapphire-toast-container--top": string;
   readonly "sapphire-toast-container--top-left": string;
   readonly "sapphire-toast-container--top-right": string;
-  readonly "sapphire-toast": string;
-  readonly "sapphire-toast--entering": string;
-  readonly "fade-in": string;
-  readonly "sapphire-toast--queued": string;
-  readonly "sapphire-toast--exiting": string;
-  readonly "fade-out": string;
-  readonly "sapphire-toast__content": string;
+  readonly "sapphire-toast-list--expanded": string;
+  readonly "sapphire-toast-list": string;
+  readonly "sapphire-toast-list--collapsed": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "js-focus": string;
+  readonly "is-focus": string;
+  readonly "sapphire-toast--stacked": string;
   readonly "sapphire-toast__text-content": string;
+  readonly "sapphire-toast__content": string;
   readonly "sapphire-toast__content--success": string;
   readonly "sapphire-toast__content--error": string;
   readonly "sapphire-toast__title--with-icon": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "49.0.0",
+  "version": "50.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.2.1"
+    "@danske/sapphire-design-tokens": "^42.4.0"
   },
-  "gitHead": "95e11ee77650ba6158811bcc5969bc7c7aaab530"
+  "gitHead": "6e7cb3028dc134adc624e161700df8cb3bc3bfb7"
 }