@danske/sapphire-css 48.0.1 → 49.1.0

package/components/accordion/accordion.module.css

@@ -146,6 +146,10 @@
 .sapphire-accordion__item-content-wrapper {
   display: grid;
   grid-template-rows: 0fr;
+}
+
+/* React sets height as css variable for transition, Angular does not */
+.sapphire-accordion__item-content-wrapper--with-transition {
   transition: grid-template-rows var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-dynamic);
 }
@@ -158,10 +162,8 @@
   opacity: 0;
   transition: opacity var(--sapphire-semantic-time-fade-default)
       var(--sapphire-semantic-transitions-fade),
-    padding-bottom var(--sapphire-semantic-time-motion-quick)
+    height var(--sapphire-semantic-time-motion-quick)
       var(--sapphire-semantic-transitions-fade);
-  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 {
@@ -172,7 +174,6 @@
   > .sapphire-accordion__item-content-wrapper
   > .sapphire-accordion__item-content {
   opacity: 1;
-  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
   visibility: visible;
 }
 
@@ -180,3 +181,9 @@
   margin-left: calc(var(--sapphire-semantic-size-spacing-lg) * -1);
   width: calc(100% + (var(--sapphire-semantic-size-spacing-lg) * 2));
 }
+
+.sapphire-accordion__item-content-inner {
+  padding-right: var(--sapphire-semantic-size-spacing-lg);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
+  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
+}

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

@@ -10,8 +10,10 @@ declare const styles: {
   readonly "sapphire-accordion__item--open": string;
   readonly "sapphire-accordion__item-heading": string;
   readonly "sapphire-accordion__item-arrow": string;
+  readonly "sapphire-accordion__item-content-wrapper--with-transition": string;
   readonly "sapphire-accordion__item-content": string;
   readonly "sapphire-accordion--negative-margin-self": string;
+  readonly "sapphire-accordion__item-content-inner": string;
 };
 export = styles;
 

package/components/breadcrumbs/breadcrumbs.module.css

@@ -12,10 +12,6 @@
   white-space: nowrap;
 }
 
-.sapphire-breadcrumbs__item * {
-  max-width: var(--sapphire-global-size-generic-480);
-}
-
 .sapphire-breadcrumbs__item--static {
   /* typography */
   font-family: var(--sapphire-semantic-font-name-default);
@@ -28,10 +24,13 @@
   padding: 0 var(--sapphire-global-size-generic-50);
   height: var(--sapphire-semantic-size-height-control-md);
   min-width: var(--sapphire-global-size-generic-100);
-  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   align-content: center;
+
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-md));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sapphire-breadcrumbs .sapphire-breadcrumbs__item:last-child {
@@ -53,6 +52,7 @@
   padding: 0 var(--sapphire-semantic-size-spacing-md);
   font-size: var(--sapphire-semantic-size-font-control-sm);
   border-radius: var(--sapphire-semantic-size-height-control-sm);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-sm));
 }
 
 .sapphire-breadcrumbs.sapphire-breadcrumbs--lg
@@ -70,6 +70,7 @@
   padding: 0 var(--sapphire-semantic-size-spacing-xl);
   font-size: var(--sapphire-semantic-size-font-control-lg);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-lg));
 }
 
 /**

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

@@ -38,8 +38,9 @@
   padding: 0 var(--sapphire-semantic-size-spacing-md);
   height: var(--sapphire-semantic-size-height-control-md);
   min-width: var(--sapphire-global-size-generic-200);
-  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
-  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+  width: fit-content;
+  max-width: 100%;
+  flex-shrink: 1;
 
   /* shape */
   border-radius: var(--sapphire-semantic-size-height-control-md);
@@ -56,9 +57,8 @@
 }
 
 .sapphire-button__content {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
+  text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
@@ -68,6 +68,20 @@
   margin: 0;
   width: 100%;
   padding: 0 var(--sapphire-semantic-size-spacing-xs);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-md));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sapphire-button--stretch,
+.sapphire-button--stretch-left-align {
+  max-width: 100%;
+  min-width: fit-content;
+  flex-grow: 1;
+}
+
+.sapphire-button--stretch-left-align .sapphire-button__content {
+  text-align: start;
 }
 
 a.sapphire-button {
@@ -491,6 +505,9 @@ a.sapphire-button {
   padding: 0;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 }
+.sapphire-button--lg .sapphire-button__content {
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-lg));
+}
 
 /**
  * SMALL
@@ -510,4 +527,5 @@ a.sapphire-button {
 
 .sapphire-button--sm .sapphire-button__content {
   padding: 0 var(--sapphire-semantic-size-spacing-2xs);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-sm));
 }

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

@@ -1,6 +1,8 @@
 declare const styles: {
   readonly "sapphire-button": string;
   readonly "sapphire-button__content": string;
+  readonly "sapphire-button--stretch": string;
+  readonly "sapphire-button--stretch-left-align": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;

package/components/buttonGroup/buttonGroup.module.css

@@ -51,6 +51,11 @@
   flex-wrap: nowrap;
 }
 
+.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-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/list/list.module.css

@@ -165,14 +165,14 @@ instead of being applied on the list item itself  */
 .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):not(:has(:hover)):hover {
+  ):not(:disabled):not(:active):not(:has(:focus-within)):hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 .sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),
 .sapphire-list__item--selected:not(.js-hover):not([aria-disabled='true']):not(
     :disabled
-  ):not(:active):not(:has(:hover)):hover {
+  ):not(:active):not(:has(:focus-within)):hover {
   background: var(
     --sapphire-semantic-color-background-action-select-secondary-hover
   );
@@ -197,12 +197,14 @@ instead of being applied on the list item itself  */
 
 /* Active */
 
+/* The 2 instances of button[aria-expanded='true'] below is a hack to accomodate the scenario where 
+the contentRight button, when it triggers a menu, does not get the active state. */
 .sapphire-list__item--interactive:not(.is-disabled).is-active:not(
     :has(.is-active)
   ),
 .sapphire-list__item--interactive:not([aria-disabled='true']):not(
     :disabled
-  ):not(:has(:active)):active {
+  ):not(:has(:focus-within, button[aria-expanded='true'])):active {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-hover
   );
@@ -212,7 +214,7 @@ instead of being applied on the list item itself  */
     :has(.is-active)
   ),
 .sapphire-list__item--selected:not([aria-disabled='true']):not(:disabled):not(
-    :has(:active)
+    :has(:focus-within, button[aria-expanded='true'])
   ):active {
   background-color: var(
     --sapphire-semantic-color-background-action-select-secondary-active

package/components/listbox/listbox.module.css

@@ -199,7 +199,9 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
     );
 }
 
-.sapphire-listbox__separator {
+.sapphire-listbox__separator,
+.sapphire-listbox__separator.sapphire-listbox__separator {
+  width: auto;
   height: var(--sapphire-semantic-size-border-sm);
   background: var(--sapphire-semantic-color-border-secondary);
   margin: var(--sapphire-listbox-items-gap)

package/components/panel/panel.module.css

@@ -12,6 +12,10 @@
   background: var(--sapphire-semantic-color-background-popover);
 }
 
+.sapphire-panel--left {
+  transform: translateX(-100%);
+}
+
 .sapphire-panel--visible {
   transform: translateX(0%);
 }

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-panel": string;
+  readonly "sapphire-panel--left": string;
   readonly "sapphire-panel--visible": string;
   readonly "sapphire-panel--sm": string;
 };

package/components/passwordField/passwordField.module.css

@@ -0,0 +1,67 @@
+.sapphire-password-field__button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  /* In Safari buttons get a 2px border
+   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+   */
+  margin: 0;
+  padding: 0;
+  /* height: var(--sapphire-dateField-icon-size);
+  width: var(--sapphire-dateField-icon-size); */
+  background: transparent;
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  cursor: pointer;
+
+  /* shape */
+  border-radius: var(--sapphire-semantic-size-radius-xs);
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition for color */
+  transition-property: color;
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
+}
+
+/**
+ * Hover 
+ */
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+
+/**
+ * Active
+  */
+.sapphire-password-field__button:not(:disabled):not(.is-disabled).is-active,
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):active,
+.sapphire-password-field__button:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+/**
+ * Focus
+ */
+.sapphire-password-field__button.is-focus,
+.sapphire-password-field__button:not(.js-focus):focus-visible {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+}
+/**
+ * Disabled
+ */
+.sapphire-password-field__button:disabled,
+.sapphire-password-field__button.is-disabled {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "sapphire-password-field__button": string;
+  readonly "is-disabled": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+};
+export = styles;
+

package/components/separator/separator.module.css

@@ -0,0 +1,14 @@
+.sapphire-separator {
+  height: 1px;
+  background-color: var(--sapphire-semantic-color-border-secondary);
+  border: none;
+  width: 100%;
+}
+
+.sapphire-separator[aria-orientation='vertical'] {
+  width: 1px;
+  height: auto;
+  min-height: 100%;
+  flex-direction: column;
+  align-self: stretch;
+}

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

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

package/components/sidebar/sidebar.module.css

@@ -0,0 +1,204 @@
+@keyframes slide-in {
+  0% {
+    transform: translate(-7%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translate(0%);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-7%);
+    opacity: 0;
+    display: none;
+  }
+}
+
+.sapphire-sidebar {
+  box-sizing: border-box;
+  /* the secondary sidebar is relative to this */
+  position: relative;
+  font-family: var(--sapphire-semantic-font-name-default);
+
+  --sapphire-sidebar-spacing-horizontal: var(
+    --sapphire-semantic-size-spacing-md
+  );
+
+  /* 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;
+
+  display: flex;
+  flex-direction: column;
+
+  /**
+   * Normally the background and foreground belong to the `surface`
+   * but the sidebar is a little bit special. Part of what a sidebar is, is
+   * that it has the surface background color. Similar to popovers.
+   */
+  background: var(--sapphire-semantic-color-background-surface);
+  padding-left: var(--sapphire-sidebar-spacing-horizontal);
+  padding-right: var(--sapphire-sidebar-spacing-horizontal);
+
+  min-width: var(--sapphire-global-size-generic-600);
+  max-width: fit-content;
+  height: 100%;
+}
+
+/**
+ * Applied on secondary sidebar for transition
+ */
+.sapphire-sidebar--slide-in {
+  animation: slide-in var(--sapphire-semantic-time-fade-default)
+    var(--sapphire-semantic-transitions-dynamic);
+}
+
+.sapphire-sidebar--slide-out {
+  animation: slide-out var(--sapphire-semantic-time-fade-default)
+    var(--sapphire-semantic-transitions-dynamic) forwards;
+}
+
+.sapphire-sidebar__secondary-container {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  border-right: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-secondary);
+}
+
+/* Header */
+.sapphire-sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+
+  padding-top: var(--sapphire-semantic-size-spacing-xl);
+  padding-bottom: var(--sapphire-semantic-size-spacing-xl);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
+
+  /**
+   * Need a min height to avoid moving the heading in case it contains a
+   * regular icon button, like it will always do in the secondary heading
+   */
+  box-sizing: content-box;
+  min-height: var(--sapphire-semantic-size-height-control-md);
+}
+
+/* Body (main content) */
+.sapphire-sidebar__body {
+  flex-grow: 1;
+  overflow: auto;
+  margin-left: calc(-1 * var(--sapphire-sidebar-spacing-horizontal));
+  margin-right: calc(-1 * var(--sapphire-sidebar-spacing-horizontal));
+  padding-left: var(--sapphire-sidebar-spacing-horizontal);
+  padding-right: var(--sapphire-sidebar-spacing-horizontal);
+}
+
+/* Modifier for when list has scrolled. Needs JS control. */
+.sapphire-sidebar__body--scrolled {
+  border-top: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-secondary);
+}
+
+/* Nav list (usually a <ul> or <ol>) */
+.sapphire-sidebar__nav-list {
+  --sapphire-sidebar-item-gap: var(--sapphire-semantic-size-spacing-3xs);
+  --sapphire-sidebar-spacing-separator-horizontal: var(
+    --sapphire-semantic-size-spacing-3xs
+  );
+
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-sidebar-item-gap);
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--sapphire-semantic-size-spacing-xs);
+  padding-bottom: var(--sapphire-semantic-size-spacing-xl);
+}
+
+.sapphire-sidebar__nav-item {
+  display: flex;
+}
+
+/**
+ * Custom increase of clickable area of the button
+ */
+.sapphire-sidebar__nav-item > [role='button'] {
+  position: relative;
+}
+
+.sapphire-sidebar__nav-item > [role='button']::before {
+  content: '';
+  position: absolute;
+  top: calc(-1 * (var(--sapphire-sidebar-item-gap) / 2));
+  bottom: calc(-1 * (var(--sapphire-sidebar-item-gap) / 2));
+  left: 0;
+  right: 0;
+  background: transparent;
+}
+
+/* Sections */
+.sapphire-sidebar__separator {
+  height: var(--sapphire-semantic-size-border-sm);
+  background: var(--sapphire-semantic-color-border-secondary);
+  margin: var(--sapphire-semantic-size-spacing-3xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-lg) -
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    );
+}
+
+.sapphire-sidebar__nav-list > .sapphire-sidebar__separator:first-child {
+  display: none;
+}
+
+.sapphire-sidebar__section {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-sidebar-item-gap);
+}
+
+.sapphire-sidebar__section-header {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  padding: calc(
+      var(--sapphire-semantic-size-spacing-md) -
+        var(--sapphire-sidebar-item-gap)
+    )
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    )
+    var(--sapphire-semantic-size-spacing-2xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    );
+}

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

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly "sapphire-sidebar": string;
+  readonly "sapphire-sidebar--slide-in": string;
+  readonly "slide-in": string;
+  readonly "sapphire-sidebar--slide-out": string;
+  readonly "slide-out": string;
+  readonly "sapphire-sidebar__secondary-container": string;
+  readonly "sapphire-sidebar__header": string;
+  readonly "sapphire-sidebar__body": string;
+  readonly "sapphire-sidebar__body--scrolled": string;
+  readonly "sapphire-sidebar__nav-list": string;
+  readonly "sapphire-sidebar__nav-item": string;
+  readonly "sapphire-sidebar__separator": string;
+  readonly "sapphire-sidebar__section": string;
+  readonly "sapphire-sidebar__section-header": 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

@@ -225,6 +225,16 @@
   outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
+/**
+ * Focus override in the case of password visibility toggle being focused. 
+ (sapphire-password-field__button)
+ */
+.sapphire-text-field:has(button:focus) {
+  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));
+}
+
 .sapphire-text-field.is-focus .sapphire-text-field__input:autofill,
 .sapphire-text-field:focus-within .sapphire-text-field__input:autofill {
   /*

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": "48.0.1",
+  "version": "49.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -36,8 +36,8 @@
     "build:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
-    "build:themes:esm": "tsc --module ES2020 --outDir build/themes/esm && tsc --module ES2020 --outDir themes",
-    "build:themes:cjs": "tsc --module CommonJS --outDir build/themes/cjs && tsc --module CommonJS",
+    "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"
   },
   "devDependencies": {
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.2.1"
+    "@danske/sapphire-design-tokens": "^42.3.0"
   },
-  "gitHead": "62297801a42339d31b5099ad337f29fc5ebd7391"
+  "gitHead": "88e11202ab17bb9830ba1f261d631ab24edf57d2"
 }