@breadstone/mosaik-elements-foundation 0.1.50 → 0.1.52

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.js

@@ -15,7 +15,9 @@ export function sheetElementJoyStyle() {
 :host {
   --sheet-background-color: var(--joy-scheme-background);
   --sheet-border-color: var(--joy-scheme-highlight);
+  --sheet-border-radius: 24px;
   --sheet-border-width: 2px;
+  --sheet-edge-offset: 0px;
   --sheet-font-family: var(--joy-font-family);
   --sheet-font-letter-spacing: var(--joy-typography-button-letter-spacing);
   --sheet-font-line-height: var(--joy-typography-button-line-height);
@@ -25,6 +27,12 @@ export function sheetElementJoyStyle() {
   --sheet-font-weight: var(--joy-typography-button-font-weight);
   --sheet-foreground-color: var(--joy-scheme-foreground);
   --sheet-gap: var(--joy-layout-space);
+  --sheet-handle-background-color: var(--joy-scheme-highlight);
+  --sheet-handle-border-radius: 999px;
+  --sheet-handle-height: 5px;
+  --sheet-handle-margin: 12px;
+  --sheet-handle-width: 44px;
+  --sheet-max-width: 414px;
   --sheet-padding-bottom: var(--joy-layout-space);
   --sheet-padding-left: calc(var(--joy-layout-space) * 2);
   --sheet-padding-right: calc(var(--joy-layout-space) * 2);
@@ -35,11 +43,17 @@ export function sheetElementJoyStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
+  --sheet-snap-indicator-active-background-color: var(--joy-scheme-foreground);
+  --sheet-snap-indicator-background-color: color-mix(in srgb, var(--joy-scheme-foreground) 28%, transparent);
+  --sheet-snap-indicator-border-radius: 999px;
+  --sheet-snap-indicator-gap: 4px;
+  --sheet-snap-indicator-size: 6px;
   --sheet-transition-duration: var(--mosaik-duration-short);
   --sheet-transition-mode: ease;
   --sheet-transition-property: transform, opacity, visibility;
   --sheet-translate: none;
   --sheet-translate-y: 100vh;
+  --sheet-z-index: 2147480000;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -68,7 +82,32 @@ export function sheetElementJoyStyle() {
   display: none !important;
 }
 
+:host {
+  width: 100%;
+  height: 100%;
+  z-index: var(--sheet-z-index);
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+:host [part="backdrop"] {
+  pointer-events: all;
+}
+
 :host [part="root"] {
+  box-sizing: border-box;
+  pointer-events: all;
+  width: 100%;
+  max-width: min(100% - var(--sheet-edge-offset) * 2, var(--sheet-max-width));
+  height: var(--sheet-resolved-height);
+  max-height: calc(100dvh - env(safe-area-inset-top));
+  padding-bottom: env(safe-area-inset-bottom);
+  visibility: hidden;
+  opacity: 0;
+  touch-action: none;
+  will-change: transform;
+  contain: layout paint;
   font-family: var(--sheet-font-family);
   font-size: var(--sheet-font-size);
   line-height: var(--sheet-font-line-height);
@@ -77,70 +116,100 @@ export function sheetElementJoyStyle() {
   -webkit-text-decoration: var(--sheet-font-text-decoration);
   text-decoration: var(--sheet-font-text-decoration);
   text-transform: var(--sheet-font-text-transform);
-  background-color: var(--sheet-background-color);
-  border-color: var(--sheet-border-color);
   color: var(--sheet-foreground-color);
-  opacity: 0;
-  visibility: hidden;
-  z-index: 2147483001;
-  filter: drop-shadow(0 5px 15px #0000004d);
-  border-radius: 15px 15px 0 0;
-  grid-template-columns: 1fr;
-  width: 100%;
-  max-width: 414px;
-  min-height: 90px;
-  margin: 0 auto;
-  padding-bottom: 35px;
-  font-size: 15px;
-  transition: top .5s ease-in-out, opacity .8s ease-in-out, max-height .35s ease-in-out;
+  background-color: var(--sheet-background-color);
+  border: var(--sheet-border-width) solid var(--sheet-border-color);
+  border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
+  box-shadow: var(--sheet-shadow);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  margin-inline: auto;
   display: grid;
-  position: fixed;
-  inset: 0 0 auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: hidden;
-  transform: translateY(100vh);
+}
+
+:host [part="root"][data-animate] {
+  transition-property: var(--sheet-transition-property);
+  transition-duration: var(--sheet-transition-duration);
+  transition-timing-function: var(--sheet-transition-mode);
 }
 
 :host [part="root"] [part="heading"] {
+  flex: none;
   position: relative;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"] {
-  box-sizing: border-box;
+:host [part="root"] [part="handle"] {
+  box-sizing: content-box;
+  width: var(--sheet-handle-width);
+  height: var(--sheet-handle-height);
+  margin: var(--sheet-handle-margin) auto;
+  border-radius: var(--sheet-handle-border-radius);
+  background: var(--sheet-handle-background-color);
   cursor: grab;
-  width: 100%;
-  height: 30px;
-  padding-top: 8px;
+  touch-action: none;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:active {
+:host [part="root"] [part="handle"]:active {
   cursor: grabbing;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:before {
-  background: var(--sheet-border-color);
-  content: "";
-  border-radius: 3px;
-  width: 40px;
-  height: 5px;
-  margin: 0 auto;
-  display: block;
+:host [part="root"] [part="body"] {
+  min-height: 0;
+  overflow: hidden;
 }
 
-:host [part="root"] [part="heading"]:after {
-  content: "";
-  height: calc(var(--sheet-border-width) / 2);
-  background-color: var(--sheet-border-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+:host [part="root"] [part="body"] slot[name="content"]::slotted(mosaik-sheet-content) {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="snap-indicator"] {
+  justify-content: center;
+  gap: var(--sheet-snap-indicator-gap);
+  padding-bottom: var(--sheet-snap-indicator-gap);
+  display: flex;
+}
+
+:host [part="root"] [part="snap-indicator-item"] {
+  width: var(--sheet-snap-indicator-size);
+  height: var(--sheet-snap-indicator-size);
+  border-radius: var(--sheet-snap-indicator-border-radius);
+  background: var(--sheet-snap-indicator-background-color);
+  transition: background-color var(--sheet-transition-duration) var(--sheet-transition-mode);
+}
+
+:host [part="root"] [part="snap-indicator-item"][data-active="true"] {
+  background: var(--sheet-snap-indicator-active-background-color);
+}
+
+:host([position="top"]) [part="root"] {
+  padding-top: env(safe-area-inset-top);
+  border-radius: 0 0 var(--sheet-border-radius) var(--sheet-border-radius);
+  max-height: calc(100dvh - env(safe-area-inset-bottom));
+  padding-bottom: 0;
+  top: 0;
+  bottom: auto;
 }
 
 :host([is-open]) [part="root"] {
-  opacity: 1;
   visibility: visible;
-  top: 12px;
-  transform: translateY(calc(100vh - 74px));
+  opacity: 1;
+}
+
+:host([data-state="closed"]) [part="root"] {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [part="root"][data-animate] {
+    transition: none;
+  }
 }
 
     `;

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyMT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAsIpD"}
+{"version":3,"file":"SheetElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CA2MpD"}

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.js

@@ -15,7 +15,9 @@ export function sheetElementMemphisStyle() {
 :host {
   --sheet-background-color: var(--memphis-scheme-background);
   --sheet-border-color: var(--memphis-scheme-contrast);
+  --sheet-border-radius: var(--memphis-layout-radius);
   --sheet-border-width: var(--memphis-layout-thickness);
+  --sheet-edge-offset: 0px;
   --sheet-font-family: var(--memphis-typography-button-font-family);
   --sheet-font-letter-spacing: var(--memphis-typography-button-letter-spacing);
   --sheet-font-line-height: var(--memphis-typography-button-line-height);
@@ -25,6 +27,12 @@ export function sheetElementMemphisStyle() {
   --sheet-font-weight: var(--memphis-typography-button-font-weight);
   --sheet-foreground-color: var(--memphis-scheme-foreground);
   --sheet-gap: var(--memphis-layout-space);
+  --sheet-handle-background-color: var(--memphis-scheme-contrast);
+  --sheet-handle-border-radius: 999px;
+  --sheet-handle-height: 5px;
+  --sheet-handle-margin: 12px;
+  --sheet-handle-width: 44px;
+  --sheet-max-width: 414px;
   --sheet-padding-bottom: calc(var(--memphis-layout-space) * 1.5);
   --sheet-padding-left: calc(var(--memphis-layout-space) * 2);
   --sheet-padding-right: calc(var(--memphis-layout-space) * 2);
@@ -35,11 +43,17 @@ export function sheetElementMemphisStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
+  --sheet-snap-indicator-active-background-color: var(--memphis-scheme-foreground);
+  --sheet-snap-indicator-background-color: color-mix(in srgb, var(--memphis-scheme-foreground) 28%, transparent);
+  --sheet-snap-indicator-border-radius: 999px;
+  --sheet-snap-indicator-gap: 4px;
+  --sheet-snap-indicator-size: 6px;
   --sheet-transition-duration: var(--mosaik-duration-short);
   --sheet-transition-mode: ease;
   --sheet-transition-property: transform, opacity, visibility;
   --sheet-translate: none;
   --sheet-translate-y: 100vh;
+  --sheet-z-index: 2147480000;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -68,7 +82,32 @@ export function sheetElementMemphisStyle() {
   display: none !important;
 }
 
+:host {
+  width: 100%;
+  height: 100%;
+  z-index: var(--sheet-z-index);
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+:host [part="backdrop"] {
+  pointer-events: all;
+}
+
 :host [part="root"] {
+  box-sizing: border-box;
+  pointer-events: all;
+  width: 100%;
+  max-width: min(100% - var(--sheet-edge-offset) * 2, var(--sheet-max-width));
+  height: var(--sheet-resolved-height);
+  max-height: calc(100dvh - env(safe-area-inset-top));
+  padding-bottom: env(safe-area-inset-bottom);
+  visibility: hidden;
+  opacity: 0;
+  touch-action: none;
+  will-change: transform;
+  contain: layout paint;
   font-family: var(--sheet-font-family);
   font-size: var(--sheet-font-size);
   line-height: var(--sheet-font-line-height);
@@ -77,70 +116,100 @@ export function sheetElementMemphisStyle() {
   -webkit-text-decoration: var(--sheet-font-text-decoration);
   text-decoration: var(--sheet-font-text-decoration);
   text-transform: var(--sheet-font-text-transform);
-  background-color: var(--sheet-background-color);
-  border-color: var(--sheet-border-color);
   color: var(--sheet-foreground-color);
-  opacity: 0;
-  visibility: hidden;
-  z-index: 2147483001;
-  filter: drop-shadow(0 5px 15px #0000004d);
-  border-radius: 15px 15px 0 0;
-  grid-template-columns: 1fr;
-  width: 100%;
-  max-width: 414px;
-  min-height: 90px;
-  margin: 0 auto;
-  padding-bottom: 35px;
-  font-size: 15px;
-  transition: top .5s ease-in-out, opacity .8s ease-in-out, max-height .35s ease-in-out;
+  background-color: var(--sheet-background-color);
+  border: var(--sheet-border-width) solid var(--sheet-border-color);
+  border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
+  box-shadow: var(--sheet-shadow);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  margin-inline: auto;
   display: grid;
-  position: fixed;
-  inset: 0 0 auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: hidden;
-  transform: translateY(100vh);
+}
+
+:host [part="root"][data-animate] {
+  transition-property: var(--sheet-transition-property);
+  transition-duration: var(--sheet-transition-duration);
+  transition-timing-function: var(--sheet-transition-mode);
 }
 
 :host [part="root"] [part="heading"] {
+  flex: none;
   position: relative;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"] {
-  box-sizing: border-box;
+:host [part="root"] [part="handle"] {
+  box-sizing: content-box;
+  width: var(--sheet-handle-width);
+  height: var(--sheet-handle-height);
+  margin: var(--sheet-handle-margin) auto;
+  border-radius: var(--sheet-handle-border-radius);
+  background: var(--sheet-handle-background-color);
   cursor: grab;
-  width: 100%;
-  height: 30px;
-  padding-top: 8px;
+  touch-action: none;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:active {
+:host [part="root"] [part="handle"]:active {
   cursor: grabbing;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:before {
-  background: var(--sheet-border-color);
-  content: "";
-  border-radius: 3px;
-  width: 40px;
-  height: 5px;
-  margin: 0 auto;
-  display: block;
+:host [part="root"] [part="body"] {
+  min-height: 0;
+  overflow: hidden;
 }
 
-:host [part="root"] [part="heading"]:after {
-  content: "";
-  height: calc(var(--sheet-border-width) / 2);
-  background-color: var(--sheet-border-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+:host [part="root"] [part="body"] slot[name="content"]::slotted(mosaik-sheet-content) {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="snap-indicator"] {
+  justify-content: center;
+  gap: var(--sheet-snap-indicator-gap);
+  padding-bottom: var(--sheet-snap-indicator-gap);
+  display: flex;
+}
+
+:host [part="root"] [part="snap-indicator-item"] {
+  width: var(--sheet-snap-indicator-size);
+  height: var(--sheet-snap-indicator-size);
+  border-radius: var(--sheet-snap-indicator-border-radius);
+  background: var(--sheet-snap-indicator-background-color);
+  transition: background-color var(--sheet-transition-duration) var(--sheet-transition-mode);
+}
+
+:host [part="root"] [part="snap-indicator-item"][data-active="true"] {
+  background: var(--sheet-snap-indicator-active-background-color);
+}
+
+:host([position="top"]) [part="root"] {
+  padding-top: env(safe-area-inset-top);
+  border-radius: 0 0 var(--sheet-border-radius) var(--sheet-border-radius);
+  max-height: calc(100dvh - env(safe-area-inset-bottom));
+  padding-bottom: 0;
+  top: 0;
+  bottom: auto;
 }
 
 :host([is-open]) [part="root"] {
-  opacity: 1;
   visibility: visible;
-  top: 12px;
-  transform: translateY(calc(100vh - 74px));
+  opacity: 1;
+}
+
+:host([data-state="closed"]) [part="root"] {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [part="root"][data-animate] {
+    transition: none;
+  }
 }
 
     `;

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyMT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CAoEhE"}
+{"version":3,"file":"ToastActionsElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CA4EhE"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.js

@@ -73,8 +73,16 @@ export function toastActionsElementCosmopolitanStyle() {
   position: relative;
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--toast-actions-gap);
+:host [part="prefix"], :host [part="content"], :host [part="suffix"] {
+  align-items: center;
+  gap: var(--toast-actions-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="content"] {
+  flex: 1;
+  justify-content: flex-end;
 }
 
     `;

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkET,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToastActionsElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAoEvD"}
+{"version":3,"file":"ToastActionsElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CA4EvD"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.js

@@ -73,8 +73,16 @@ export function toastActionsElementJoyStyle() {
   position: relative;
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--toast-actions-gap);
+:host [part="prefix"], :host [part="content"], :host [part="suffix"] {
+  align-items: center;
+  gap: var(--toast-actions-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="content"] {
+  flex: 1;
+  justify-content: flex-end;
 }
 
     `;

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkET,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToastActionsElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAoE3D"}
+{"version":3,"file":"ToastActionsElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CA4E3D"}

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.js

@@ -73,8 +73,16 @@ export function toastActionsElementMemphisStyle() {
   position: relative;
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--toast-actions-gap);
+:host [part="prefix"], :host [part="content"], :host [part="suffix"] {
+  align-items: center;
+  gap: var(--toast-actions-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="content"] {
+  flex: 1;
+  justify-content: flex-end;
 }
 
     `;

package/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkET,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToastActionsElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastActionsElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Toast/ToastActionsElement.d.ts

@@ -17,7 +17,9 @@ declare const ToastActionsElement_base: (abstract new (...args: Array<any>) => i
  * @slot prefix - The prefix slot.
  * @slot suffix - The suffix slot.
  *
- * @csspart innerStack - The innerStack part.
+ * @csspart prefix - The container for actions placed before the main action group.
+ * @csspart content - The container for the main action group.
+ * @csspart suffix - The container for actions placed after the main action group.
  *
  * @cssprop {String} --toast-actions-font-family - The actions font family CSS custom property.
  * @cssprop {String} --toast-actions-font-letter-spacing - The actions font letter spacing CSS custom property.
@@ -42,8 +44,6 @@ declare const ToastActionsElement_base: (abstract new (...args: Array<any>) => i
  * @cssprop {String} --toast-actions-transition-property - The actions transition property CSS custom property.
  * @cssprop {String} --toast-actions-translate - The actions translate CSS custom property.
  *
- * @dependency mosaik-stack - The Stack element.
- *
  * @example
  * Toast actions with two buttons:
  * ```html

package/Controls/Components/Overlays/Toast/ToastActionsElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAQ7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAea,mBACT,SAAQ,wBACR,YAAW,yBAAyB,EAAE,UAAU;IAIhD;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;EAEE;AACF,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}
+{"version":3,"file":"ToastActionsElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAO7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAYa,mBACT,SAAQ,wBACR,YAAW,yBAAyB,EAAE,UAAU;IAIhD;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;EAEE;AACF,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}

package/Controls/Components/Overlays/Toast/ToastActionsElement.js

@@ -9,14 +9,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Slottable } from '../../../Behaviors/Slottable';
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { CustomElement } from '../../Abstracts/CustomElement';
-import { StackElement } from '../../Layouts/Stack/StackElement';
 import { toastActionsElementTemplate } from './ToastActionsElementTemplate';
+import { toastActionsElementCosmopolitanStyle } from './Themes/ToastActionsElement.Cosmopolitan';
 import { toastActionsElementJoyStyle } from './Themes/ToastActionsElement.Joy';
 import { toastActionsElementMemphisStyle } from './Themes/ToastActionsElement.Memphis';
-import { toastActionsElementCosmopolitanStyle } from './Themes/ToastActionsElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
  * ToastActions - Container for action buttons within a toast.
@@ -33,7 +32,9 @@ import { Themeable } from '../../../Behaviors/Themeable';
  * @slot prefix - The prefix slot.
  * @slot suffix - The suffix slot.
  *
- * @csspart innerStack - The innerStack part.
+ * @csspart prefix - The container for actions placed before the main action group.
+ * @csspart content - The container for the main action group.
+ * @csspart suffix - The container for actions placed after the main action group.
  *
  * @cssprop {String} --toast-actions-font-family - The actions font family CSS custom property.
  * @cssprop {String} --toast-actions-font-letter-spacing - The actions font letter spacing CSS custom property.
@@ -58,8 +59,6 @@ import { Themeable } from '../../../Behaviors/Themeable';
  * @cssprop {String} --toast-actions-transition-property - The actions transition property CSS custom property.
  * @cssprop {String} --toast-actions-translate - The actions translate CSS custom property.
  *
- * @dependency mosaik-stack - The Stack element.
- *
  * @example
  * Toast actions with two buttons:
  * ```html
@@ -104,10 +103,7 @@ ToastActionsElement = __decorate([
         },
         host: {
             slot: 'actions'
-        },
-        imports: [
-            StackElement
-        ]
+        }
     }),
     __metadata("design:paramtypes", [])
 ], ToastActionsElement);

package/Controls/Components/Overlays/Toast/ToastActionsElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAgBI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAG3C,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;IACZ,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;CAIJ,CAAA;AA/BY,mBAAmB;IAf/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,SAAS;SAClB;QACD,OAAO,EAAE;YACL,YAAY;SACf;KACJ,CAAC;;GACW,mBAAmB,CA+B/B"}
+{"version":3,"file":"ToastActionsElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAaI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAG3C,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;IACZ,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;CAIJ,CAAA;AA/BY,mBAAmB;IAZ/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,SAAS;SAClB;KACJ,CAAC;;GACW,mBAAmB,CA+B/B"}

package/Controls/Components/Overlays/Toast/ToastActionsElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastActionsElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuB/F"}
+{"version":3,"file":"ToastActionsElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Toast/ToastActionsElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAY/F"}