@trismegisto/core 3.3.2 → 3.3.3

package/dist/core.css

@@ -5336,6 +5336,12 @@ hm-tab-bar,
     translate: 0 calc(-1 * var(--hm-space-sm));
   }
 }
+@keyframes hm-toast-stack-enter {
+  from {
+    opacity: 0;
+    translate: 0 calc(var(--hm-toast-direction) * -100%);
+  }
+}
 @keyframes hm-toast-countdown {
   from {
     transform: scaleX(1);
@@ -5346,17 +5352,75 @@ hm-tab-bar,
 }
 hm-toast-stack,
 .hm-toast-stack {
+  --hm-toast-direction: 1;
+  --hm-toast-peek: var(--hm-space-md);
+  --hm-toast-gap: var(--hm-space-sm);
   position: fixed;
   inset-block-start: var(--hm-space-md);
   inset-inline-end: var(--hm-space-md);
   z-index: var(--hm-z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--hm-space-sm);
+  display: block;
   inline-size: min(var(--hm-space-3xl) * 10, 100vw - 2 * var(--hm-space-md));
+  block-size: max(0px, var(--hm-toast-front-height, 0px) + (var(--hm-toast-count, 0) - 1) * var(--hm-toast-peek));
+}
+hm-toast-stack[data-position^=bottom],
+.hm-toast-stack[data-position^=bottom] {
+  --hm-toast-direction: -1;
+  inset-block: auto var(--hm-space-md);
+}
+hm-toast-stack[data-position$=start],
+.hm-toast-stack[data-position$=start] {
+  inset-inline: var(--hm-space-md) auto;
+}
+hm-toast-stack[data-position$=center],
+.hm-toast-stack[data-position$=center] {
+  inset-inline: 0;
+  margin-inline: auto;
+}
+hm-toast-stack > .hm-toast,
+.hm-toast-stack > .hm-toast {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: calc(var(--hm-toast-count, 1) - var(--hm-toast-index, 0));
+  translate: 0 calc(var(--hm-toast-direction) * var(--hm-toast-index, 0) * var(--hm-toast-peek));
+  scale: calc(1 - var(--hm-toast-index, 0) * 0.05);
+  transform-origin: 50% 100%;
+  transition: translate var(--hm-duration-relaxed) var(--hm-ease-decelerate), scale var(--hm-duration-relaxed) var(--hm-ease-decelerate), opacity var(--hm-duration-relaxed) var(--hm-ease-decelerate), visibility var(--hm-duration-relaxed);
+  animation-name: hm-toast-stack-enter;
+}
+hm-toast-stack > .hm-toast > *,
+.hm-toast-stack > .hm-toast > * {
+  transition: opacity var(--hm-duration-standard) var(--hm-ease-standard);
+}
+hm-toast-stack[data-position^=bottom] > .hm-toast,
+.hm-toast-stack[data-position^=bottom] > .hm-toast {
+  inset-block: auto 0;
+  transform-origin: 50% 0;
+}
+hm-toast-stack > .hm-toast[data-toast-state=behind],
+.hm-toast-stack > .hm-toast[data-toast-state=behind] {
+  block-size: var(--hm-toast-front-height, auto);
+}
+hm-toast-stack > .hm-toast[data-toast-state=behind] > *,
+.hm-toast-stack > .hm-toast[data-toast-state=behind] > * {
+  opacity: 0;
+}
+hm-toast-stack > .hm-toast[data-toast-state=hidden],
+.hm-toast-stack > .hm-toast[data-toast-state=hidden] {
+  visibility: hidden;
+  opacity: 0;
   pointer-events: none;
 }
 
+.hm-toast-stack--expanded {
+  block-size: max(0px, var(--hm-toast-visible-height, 0px) + (var(--hm-toast-count, 0) - 1) * var(--hm-toast-gap));
+}
+.hm-toast-stack--expanded > .hm-toast {
+  translate: 0 calc(var(--hm-toast-direction) * (var(--hm-toast-before, 0px) + var(--hm-toast-index, 0) * var(--hm-toast-gap)));
+  scale: 1;
+}
+
 hm-toast,
 .hm-toast {
   --hm-toast-tone: var(--hm-info);
@@ -5478,11 +5542,25 @@ hm-toast,
   :where(:root:not([data-motion])) .hm-toast {
     animation: none;
   }
+  :where(:root:not([data-motion])) .hm-toast-stack > .hm-toast {
+    animation: none;
+  }
+  :where(:root:not([data-motion])) .hm-toast-stack > .hm-toast,
+  :where(:root:not([data-motion])) .hm-toast-stack > .hm-toast > * {
+    transition: none;
+  }
 }
 :where(:root[data-motion=reduce]) hm-toast,
 :where(:root[data-motion=reduce]) .hm-toast {
   animation: none;
 }
+:where(:root[data-motion=reduce]) .hm-toast-stack > .hm-toast {
+  animation: none;
+}
+:where(:root[data-motion=reduce]) .hm-toast-stack > .hm-toast,
+:where(:root[data-motion=reduce]) .hm-toast-stack > .hm-toast > * {
+  transition: none;
+}
 
 @media (forced-colors: active) {
   .hm-toast__timer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trismegisto/core",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Hermes — CSS dos componentes (classes hm-*), independente de framework.",
   "sideEffects": true,