@danske/sapphire-css 27.1.1 → 28.0.1

package/components/list/list.module.css

@@ -92,10 +92,22 @@
 .sapphire-list__item:not(:has(.sapphire-list__item-content-wrapper)) {
   box-shadow: inset 0px -1px 0px 0px var(--sapphire-list-color-border-item-default);
 }
-.sapphire-list--without-last-divider
+/* For not virtualized list */
+.sapphire-list--without-last-divider:not(:has([role="presentation"]))
   .sapphire-list__item:last-child
   .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
-.sapphire-list--without-last-divider .sapphire-list__item:last-child,
+.sapphire-list--without-last-divider:not(:has([role="presentation"]))
+  .sapphire-list__item:last-child,
+/* For virtualized lists.
+ * This is admittedly a bad-looking selector. To keep in
+ * mind that a virtualized list adds one or more extra nesting with role
+ * presentation. */
+.sapphire-list--without-last-divider
+  [role="presentation"]:last-child > .sapphire-list__item
+  .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
+.sapphire-list--without-last-divider
+  [role="presentation"]:last-child > .sapphire-list__item,
+/* other */
 .sapphire-list__item:has(+ .sapphire-list__item
     > .sapphire-list__item-content-wrapper.is-focus)
   > .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),

package/components/toast/toast.module.css

@@ -1,12 +1,18 @@
-@keyframes fade-in-up {
+@keyframes fade-in {
   from {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) translateX(-50%) scale(0.9);
+    transform: translate3d(
+        0,
+        calc(var(--sapphire-toast-animation-direction, 1) * 100%),
+        0
+      )
+      translateX(var(--sapphire-toast-horizontal-transform)) scale(0.9);
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0) translateX(-50%) scale(1);
+    transform: translate3d(0, 0, 0)
+      translateX(var(--sapphire-toast-horizontal-transform)) scale(1);
   }
 }
 
@@ -21,17 +27,53 @@
 }
 
 .sapphire-toast-container {
+  pointer-events: none;
   position: fixed;
-  bottom: var(--sapphire-toast-size-offset);
+  margin: var(--sapphire-toast-size-offset);
+}
+
+/* Placement */
+.sapphire-toast-container--bottom {
+  --sapphire-toast-horizontal-transform: -50%;
+  bottom: 0;
   left: 50%;
 }
+.sapphire-toast-container--bottom-left {
+  --sapphire-toast-horizontal-transform: 0%;
+  bottom: 0;
+  left: 0;
+}
+.sapphire-toast-container--bottom-right {
+  --sapphire-toast-horizontal-transform: 0%;
+  bottom: 0;
+  right: 0;
+}
+.sapphire-toast-container--top {
+  --sapphire-toast-animation-direction: -1;
+  --sapphire-toast-horizontal-transform: -50%;
+  top: 0;
+  left: 50%;
+}
+.sapphire-toast-container--top-left {
+  --sapphire-toast-animation-direction: -1;
+  --sapphire-toast-horizontal-transform: 0%;
+  top: 0;
+  left: 0;
+}
+.sapphire-toast-container--top-right {
+  --sapphire-toast-animation-direction: -1;
+  --sapphire-toast-horizontal-transform: 0%;
+  top: 0;
+  right: 0;
+}
+/************************************************************/
 
 .sapphire-toast {
+  pointer-events: initial;
   position: absolute;
-  bottom: 0;
-
+  inset: inherit;
   /* absolute position & center */
-  transform: translateX(-50%);
+  transform: translateX(var(--sapphire-toast-horizontal-transform));
 
   /* let the text grow until max-width */
   width: max-content;
@@ -66,14 +108,14 @@
 }
 
 .sapphire-toast--entering {
-  animation-name: fade-in-up;
+  animation-name: fade-in;
 }
 
 /* This represents the toast which appears immediately after the current one
  * disappears */
 .sapphire-toast--queued {
   opacity: 0;
-  animation-name: fade-in-up;
+  animation-name: fade-in;
   animation-delay: var(--sapphire-toast-time-transition);
   animation-fill-mode: forwards;
 }

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

@@ -1,8 +1,14 @@
 declare const styles: {
   readonly "sapphire-toast-container": string;
+  readonly "sapphire-toast-container--bottom": string;
+  readonly "sapphire-toast-container--bottom-left": string;
+  readonly "sapphire-toast-container--bottom-right": string;
+  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-up": string;
+  readonly "fade-in": string;
   readonly "sapphire-toast--queued": string;
   readonly "sapphire-toast--exiting": string;
   readonly "fade-out": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "27.1.1",
+  "version": "28.0.1",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -68,5 +68,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^37.0.0"
   },
-  "gitHead": "cd122ead963e96cd3d285da62e66a53ca7bde597"
+  "gitHead": "1d251e9bee55e38ff1595ca53598d934474b1f1c"
 }