@danske/sapphire-css 49.0.0 → 49.1.0

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;

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/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/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": "49.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.3.0"
   },
-  "gitHead": "95e11ee77650ba6158811bcc5969bc7c7aaab530"
+  "gitHead": "88e11202ab17bb9830ba1f261d631ab24edf57d2"
 }