@solid-design-system/components 5.4.4 → 5.6.0

package/dist/chunks/{chunk.RJEVYRGU.js → chunk.2Z3PTZDF.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YR7FBXEK.js → chunk.4BSIESXO.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.POPZOOPO.js → chunk.6A4EY2BW.js}

@@ -1,12 +1,15 @@
+import {
+  SdCarouselItem
+} from "./chunk.BIWX4AXS.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
+import {
+  FadeController
+} from "./chunk.W2YDXTG5.js";
 import {
   ScrollController
 } from "./chunk.FNYEXUNK.js";
-import {
-  SdCarouselItem
-} from "./chunk.BNKXTELX.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -16,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";
@@ -49,6 +52,7 @@ var SdCarousel = class extends SolidElement {
     this.inverted = false;
     this.loop = false;
     this.autoplay = false;
+    this.fade = false;
     this.slidesPerPage = 1;
     this.slidesPerMove = 1;
     this.activeSlide = 0;
@@ -62,6 +66,7 @@ var SdCarousel = class extends SolidElement {
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
     this.localize = new LocalizeController(this);
     this.userInteracted = false;
+    this.fadeController = new FadeController(this);
     this.handleUserInteraction = () => {
       this.userInteracted = true;
     };
@@ -110,11 +115,18 @@ var SdCarousel = class extends SolidElement {
     this.intersectionObserver.disconnect();
     this.mutationObserver.disconnect();
     ["click", "keydown"].forEach((event) => this.removeEventListener(event, this.handleUserInteraction));
+    if (this.fade) {
+      this.fadeController.disable();
+    }
   }
-  firstUpdated() {
+  async firstUpdated() {
     this.initializeSlides();
     this.mutationObserver = new MutationObserver(this.handleSlotChange);
     this.mutationObserver.observe(this, { childList: true, subtree: false });
+    if (this.fade) {
+      await this.updateComplete;
+      this.fadeController.enable();
+    }
   }
   getPageCount(totalSlides, slidesPerPage, slidesPerMove) {
     return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 > 0 ? Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 : (
@@ -162,6 +174,9 @@ var SdCarousel = class extends SolidElement {
     }
   }
   handleScrollEnd() {
+    if (this.fade) {
+      return;
+    }
     const slides = this.getSlides();
     const entries = [...this.intersectionObserverEntries.values()];
     const firstIntersecting = entries.find((entry) => entry.isIntersecting);
@@ -206,6 +221,13 @@ var SdCarousel = class extends SolidElement {
       (_b = this.autoplayControls) == null ? void 0 : _b.setAttribute("aria-pressed", "true");
     }
   }
+  handleFadeChange() {
+    if (this.fade) {
+      this.fadeController.enable();
+    } else {
+      this.fadeController.disable();
+    }
+  }
   initializeSlides() {
     const slides = this.getSlides();
     const intersectionObserver = this.intersectionObserver;
@@ -219,7 +241,7 @@ var SdCarousel = class extends SolidElement {
         slide.remove();
       }
     });
-    if (this.loop) {
+    if (this.loop && !this.fade) {
       const slidesPerPage = this.slidesPerPage;
       const lastSlides = slides.slice(-slidesPerPage);
       const firstSlides = slides.slice(0, slidesPerPage);
@@ -237,13 +259,23 @@ var SdCarousel = class extends SolidElement {
     this.getSlides({ excludeClones: false }).forEach((slide) => {
       intersectionObserver.observe(slide);
     });
-    this.goToSlide(this.activeSlide, "auto");
+    if (this.fade) {
+      this.updateComplete.then(() => {
+        this.fadeController.enable();
+      });
+    }
+    if (!this.fade) {
+      this.goToSlide(this.activeSlide, "auto");
+    }
   }
   handleSlideChange() {
     const slides = this.getSlides();
     slides.forEach((slide, i) => {
       slide.classList.toggle("--is-active", i === this.activeSlide);
     });
+    if (this.fade) {
+      this.fadeController.updateActiveSlide(this.activeSlide);
+    }
     const newCurrentPage = this.getCurrentPage(slides.length, this.activeSlide, this.slidesPerPage, this.slidesPerMove);
     if (this.currentPage !== newCurrentPage) {
       this.currentPage = newCurrentPage;
@@ -264,6 +296,9 @@ var SdCarousel = class extends SolidElement {
     }
   }
   handleSlidesPerMoveChange() {
+    if (this.fade) {
+      return;
+    }
     const slides = this.getSlides({ excludeClones: false });
     const slidesPerMove = this.slidesPerMove;
     slides.forEach((slide, i) => {
@@ -287,6 +322,11 @@ var SdCarousel = class extends SolidElement {
    * @param behavior - The behavior used for scrolling.
    */
   previous(behavior = "smooth") {
+    if (this.fade) {
+      const previousIndex2 = this.loop ? (this.activeSlide - 1 + this.getSlides().length) % this.getSlides().length : Math.max(0, this.activeSlide - 1);
+      this.goToSlide(previousIndex2);
+      return;
+    }
     let previousIndex = this.activeSlide || this.activeSlide - this.slidesPerMove;
     let canSnap = false;
     while (!canSnap && previousIndex > 0) {
@@ -305,6 +345,11 @@ var SdCarousel = class extends SolidElement {
    * @param behavior - The behavior used for scrolling.
    */
   next(behavior = "smooth") {
+    if (this.fade) {
+      const nextIndex = this.loop ? (this.activeSlide + 1) % this.getSlides().length : Math.min(this.getSlides().length - 1, this.activeSlide + 1);
+      this.goToSlide(nextIndex);
+      return;
+    }
     if (this.currentPage + 1 <= this.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove)) {
       this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
     } else {
@@ -314,6 +359,10 @@ var SdCarousel = class extends SolidElement {
     }
   }
   nextTillFirst(behavior = "smooth") {
+    if (this.fade) {
+      this.goToSlide(0);
+      return;
+    }
     while (this.activeSlide !== 0) {
       this.goToSlide(this.activeSlide + 1, behavior);
     }
@@ -331,11 +380,14 @@ var SdCarousel = class extends SolidElement {
    * @param behavior - The behavior used for scrolling.
    */
   goToSlide(index, behavior = "smooth") {
-    const { slidesPerPage, loop, scrollContainer } = this;
+    const { slidesPerPage, loop, scrollContainer, fade } = this;
     const slides = this.getSlides();
     const slidesWithClones = this.getSlides({ excludeClones: false });
     const newActiveSlide = (index + slides.length) % slides.length;
     this.activeSlide = newActiveSlide;
+    if (fade) {
+      return;
+    }
     const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length + 1);
     const nextSlide = slidesWithClones[nextSlideIndex];
     const scrollContainerRect = scrollContainer.getBoundingClientRect();
@@ -368,11 +420,9 @@ var SdCarousel = class extends SolidElement {
     const nextEnabled = this.loop || currentPage < pagesCount;
     const isLtr = this.localize.dir() === "ltr";
     return html`<div part="base" class="${cx(`carousel h-full w-full`)}"><div id="scroll-container" part="scroll-container" class="${cx(
-      `carousel__slides mb-6
-            grid max-h-full w-full items-center justify-items-center overflow-auto`,
+      `carousel__slides mb-6 max-h-full w-full items-center justify-items-center`,
       this.inverted ? "focus-visible:focus-outline-inverted" : "focus-visible:focus-outline",
-      `overscroll-x-contain grid-flow-col auto-rows-[100%]
-            snap-x snap-mandatory overflow-y-hidden`
+      this.fade ? "relative overflow-hidden" : `grid overflow-auto overscroll-x-contain grid-flow-col auto-rows-[100%] snap-x snap-mandatory overflow-y-hidden`
     )}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${scrollController.scrolling ? "true" : "false"}" aria-label="${this.localize.term("carouselContainer", this.slides.length)}" aria-live="${this.autoplay ? "off" : "polite"}" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><slot></slot></div><div part="controls" class="${cx("w-full flex items-center justify-center relative")}"><div part="navigation" class="${cx("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!prevEnabled ? true : false}" class="${cx(
       "!mr-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
       !prevEnabled && "sd-interactive--disabled",
@@ -418,7 +468,7 @@ var SdCarousel = class extends SolidElement {
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
-  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
+  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{display:block;height:var(--carousel-height);overflow:hidden;position:relative}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -444,6 +494,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdCarousel.prototype, "fade", 2);
 __decorateClass([
   property({ type: Number, attribute: "slides-per-page", reflect: true })
 ], SdCarousel.prototype, "slidesPerPage", 2);
@@ -471,6 +524,9 @@ __decorateClass([
 __decorateClass([
   watch("pausedAutoplay")
 ], SdCarousel.prototype, "handlePausedAutoplay", 1);
+__decorateClass([
+  watch("fade", { waitUntilFirstUpdate: true })
+], SdCarousel.prototype, "handleFadeChange", 1);
 __decorateClass([
   watch("loop", { waitUntilFirstUpdate: true }),
   watch("slidesPerPage", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.ZFCSAN3P.js → chunk.6Q5PHGOX.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.OC7IH3HF.js";
+} from "./chunk.KQKYMBS7.js";
 import {
   requestIcon
 } from "./chunk.P52GZVKG.js";
@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JDURQSHD.js → chunk.7ASLASKF.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NJDUDBH3.js → chunk.7LIXWEBN.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BNHWLWIO.js → chunk.ABTFDUXB.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.OYISVPRT.js → chunk.ATBHSXHW.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.BNKXTELX.js → chunk.BIWX4AXS.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.QHFL2NPD.js → chunk.BZMDW7E4.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BMOZ4UCJ.js → chunk.CM5UUKM4.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VBUX2EMW.js → chunk.D23TODRF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AEC7OUIU.js → chunk.DWOWPIFO.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.X3F32DMB.js → chunk.EAFZSO6J.js}

@@ -1,3 +1,6 @@
+import {
+  uppercaseFirstLetter
+} from "./chunk.SF6AUNJF.js";
 import {
   Modal,
   getDeepActiveElement
@@ -25,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   animateTo,
   stopAnimations
@@ -37,13 +40,6 @@ import {
 // src/components/drawer/drawer.ts
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
-
-// src/internal/string.ts
-function uppercaseFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-// src/components/drawer/drawer.ts
 import cx from "classix";
 var SdDrawer = class extends SolidElement {
   constructor() {

package/dist/chunks/{chunk.MGZNYUU5.js → chunk.FIHROP3X.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   animateTo,
   parseDuration,

package/dist/chunks/{chunk.IAVZSNZM.js → chunk.FSL676RI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.O6ZCXYG7.js → chunk.GABDY4S6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EPTG3T3K.js → chunk.H3K5PQJU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MQHKJBMI.js → chunk.H3OKMVXK.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4L2ZJWMT.js → chunk.HIAESSS3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AQSNQIE2.js → chunk.HJN7RI3V.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ER5WL52L.js → chunk.IF3LSW7O.js}

@@ -1,3 +1,7 @@
+import {
+  kebabToCamelCase,
+  uppercaseFirstLetter
+} from "./chunk.SF6AUNJF.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -14,9 +18,10 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   animateTo,
+  shimKeyframesHeightAuto,
   stopAnimations
 } from "./chunk.HQWAKJBV.js";
 import {
@@ -74,7 +79,7 @@ var SdNotification = class extends SolidElement {
     super.disconnectedCallback();
   }
   firstUpdated() {
-    this.base.hidden = !this.open;
+    this.wrapper.hidden = !this.open;
   }
   startAutoHide() {
     clearTimeout(this.autoHideTimeout);
@@ -113,18 +118,42 @@ var SdNotification = class extends SolidElement {
       if (this.duration < Infinity) {
         this.startAutoHide();
       }
-      await stopAnimations(this.base);
-      this.base.hidden = false;
-      const { keyframes, options } = getAnimation(this, "notification.show", { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
+      await Promise.all([stopAnimations(this.base), stopAnimations(this.wrapper)]);
+      this.wrapper.hidden = false;
+      const baseAnimation = getAnimation(this, "notification.show", { dir: this.localize.dir() });
+      const wrapperAnimation = getAnimation(
+        this,
+        `notification.wrapper.show${uppercaseFirstLetter(kebabToCamelCase(this.toastStack))}`,
+        { dir: this.localize.dir() }
+      );
+      await Promise.all([
+        animateTo(
+          this.base,
+          shimKeyframesHeightAuto(baseAnimation.keyframes, this.base.scrollHeight),
+          baseAnimation.options
+        ),
+        animateTo(this.wrapper, wrapperAnimation.keyframes, wrapperAnimation.options)
+      ]);
       this.emit("sd-after-show");
     } else {
       this.emit("sd-hide");
       clearTimeout(this.autoHideTimeout);
-      await stopAnimations(this.base);
-      const { keyframes, options } = getAnimation(this, "notification.hide", { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
-      this.base.hidden = true;
+      await Promise.all([stopAnimations(this.base), stopAnimations(this.wrapper)]);
+      const baseAnimation = getAnimation(this, "notification.hide", { dir: this.localize.dir() });
+      const wrapperAnimation = getAnimation(
+        this,
+        `notification.wrapper.hide${uppercaseFirstLetter(kebabToCamelCase(this.toastStack))}`,
+        { dir: this.localize.dir() }
+      );
+      await Promise.all([
+        animateTo(
+          this.base,
+          shimKeyframesHeightAuto(baseAnimation.keyframes, this.base.scrollHeight),
+          baseAnimation.options
+        ),
+        animateTo(this.wrapper, wrapperAnimation.keyframes, wrapperAnimation.options)
+      ]);
+      this.wrapper.hidden = true;
       this.emit("sd-after-hide");
     }
   }
@@ -173,7 +202,7 @@ var SdNotification = class extends SolidElement {
     });
   }
   render() {
-    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2 focus-visible:focus-outline")}" id="notification" tabindex="0" role="alert" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><slot name="icon" part="icon" class="${cx(
+    return html`<div part="base" class="${cx("w-full flex items-stretch m-2 focus-visible:focus-outline")}" id="notification" tabindex="0" role="alert" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><div part="wrapper" class="${cx("w-full h-fit overflow-hidden flex items-stretch relative")}"><slot name="icon" part="icon" class="${cx(
       "min-w-min flex items-center px-3 justify-center",
       {
         info: "bg-info",
@@ -189,7 +218,7 @@ var SdNotification = class extends SolidElement {
     }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-icon></sd-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-icon></sd-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
 /**
@@ -202,6 +231,9 @@ SdNotification.styles = [
 __decorateClass([
   query('[part~="base"]')
 ], SdNotification.prototype, "base", 2);
+__decorateClass([
+  query('[part~="wrapper"]')
+], SdNotification.prototype, "wrapper", 2);
 __decorateClass([
   query('[part~="close-button"]')
 ], SdNotification.prototype, "close", 2);
@@ -234,17 +266,25 @@ SdNotification = __decorateClass([
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 0, height: 0 },
+    { opacity: 1, height: "auto" }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
 });
 setDefaultAnimation("notification.hide", {
   keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 1, height: "auto" },
+    { opacity: 0, height: 0 }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
+});
+setDefaultAnimation("notification.wrapper.showTopRight", {
+  keyframes: [{ bottom: "32px" }, { bottom: "0" }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
+});
+setDefaultAnimation("notification.wrapper.hideTopRight", {
+  keyframes: [{ bottom: "0" }, { bottom: "32px" }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
 });
 
 export {

package/dist/chunks/{chunk.DKMBAQNN.js → chunk.ISKBRYU2.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.E3L4D5JB.js → chunk.JBZMLWDZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TICMXROB.js → chunk.KTWITSMU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VYA3GCBI.js → chunk.KUULYGHN.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.BNHWLWIO.js";
+} from "./chunk.ABTFDUXB.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.I3TERPA7.js → chunk.MFEHVTR6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZKAEJF4D.js → chunk.MM3ZPOVU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.NM4SNSEF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";