@breadstone/mosaik-elements-foundation 0.0.135 → 0.0.136

package/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.d.ts

@@ -0,0 +1,36 @@
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IOrientableProps } from '../../../Behaviors/Orientable';
+import type { BannerGroupDismissBehavior } from '../../../Types/BannerGroupDismissBehavior';
+import type { BannerGroupStacking } from '../../../Types/BannerGroupStacking';
+/**
+ * Represents the `{@link IBannerGroupElementProps}` interface.
+ *
+ * @public
+ */
+export interface IBannerGroupElementProps extends IDisableableProps, IOrientableProps {
+    /**
+     * The current active (start) index.
+     */
+    index: number;
+    /**
+     * Enables looping when navigating beyond the first or last banner.
+     */
+    loop: boolean;
+    /**
+     * The maximum number of visible banners (1 = pager/carousel mode).
+     */
+    maxLength: number;
+    /**
+     * Defines how dismissed banners are handled.
+     */
+    dismissBehavior: BannerGroupDismissBehavior;
+    /**
+     * Defines how banners are stacked in pager/carousel mode.
+     */
+    stacking: BannerGroupStacking;
+    /**
+     * Whether the order of banners is reversed.
+     */
+    reverse: boolean;
+}
+//# sourceMappingURL=IBannerGroupElementProps.d.ts.map

package/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IBannerGroupElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAC5F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB,EAAE,gBAAgB;IAIjF;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,eAAe,EAAE,0BAA0B,CAAC;IAE5C;;OAEG;IACH,QAAQ,EAAE,mBAAmB,CAAC;IAE9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAGpB"}

package/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IBannerGroupElementProps.js.map

package/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IBannerGroupElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/BannerGroup/IBannerGroupElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function bannerGroupElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=BannerGroupElement.Cosmopolitan.d.ts.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CAqK/D"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Cosmopolitan.js

@@ -0,0 +1,179 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function bannerGroupElementCosmopolitanStyle() {
+    return css `
+:host {
+  --banner-group-font-family: unset;
+  --banner-group-font-letter-spacing: unset;
+  --banner-group-font-line-height: unset;
+  --banner-group-font-size: unset;
+  --banner-group-font-text-decoration: unset;
+  --banner-group-font-text-transform: unset;
+  --banner-group-font-weight: unset;
+  --banner-group-gap: unset;
+  --banner-group-padding-bottom: unset;
+  --banner-group-padding-left: unset;
+  --banner-group-padding-right: unset;
+  --banner-group-padding-top: unset;
+  --banner-group-transition-duration: unset;
+  --banner-group-transition-mode: unset;
+  --banner-group-transition-property: unset;
+  --banner-group-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  --banner-group-gap: 0px;
+  --banner-group-indicator-size: 8px;
+  --banner-group-indicator-gap: 8px;
+  --banner-group-depth-scale-step: .08;
+  --banner-group-depth-translate-step: 6;
+  --banner-group-depth-opacity-step: 0;
+  display: block;
+  position: relative;
+}
+
+:host [part="viewport"] {
+  gap: var(--banner-group-gap);
+  flex-direction: column;
+  display: flex;
+}
+
+:host([reverse]) [part="viewport"] {
+  flex-direction: column-reverse;
+}
+
+:host([orientation="horizontal"]) [part="viewport"] {
+  flex-direction: row;
+}
+
+:host ::slotted([hidden]) {
+  display: none !important;
+}
+
+:host([stacking="depth"]) [part="viewport"] {
+  align-items: center;
+  position: relative;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item) {
+  will-change: opacity, transform;
+  transition: opacity .22s, transform .32s cubic-bezier(.22, .61, .36, 1);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[hidden]) {
+  display: none !important;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-active="true"]) {
+  opacity: 1;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  opacity: 0;
+  transform: translate3d(0, 8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  transform: translate3d(8px, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  opacity: 0;
+  transform: translate3d(0, -8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  transform: translate3d(-8px, 0, 0);
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item) {
+  transform-origin: top;
+  pointer-events: none;
+  --_depth-offset: var(--banner-group-item-depth-offset, 0);
+  --_item-index: var(--banner-group-item-index, 0);
+  --_direction: 1;
+  --_translate-primary: calc(var(--banner-group-depth-translate-step) * var(--_depth-offset) * var(--_direction) * 1px);
+  --_scale: calc(1 - (var(--banner-group-depth-scale-step) * var(--_depth-offset)));
+  --_opacity: calc(1 - (var(--banner-group-depth-opacity-step) * var(--_depth-offset)));
+  z-index: calc(var(--banner-group-visible-count, 1)  - var(--_depth-offset));
+  transform: translateY(var(--_translate-primary)) scale(var(--_scale));
+  opacity: var(--_opacity);
+  transition: transform .16s, opacity .16s;
+  position: absolute;
+  inset: 0;
+}
+
+:host([stacking="depth"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: bottom;
+}
+
+:host([stacking="depth"][orientation="horizontal"]) ::slotted(.banner-group-item) {
+  transform: translateX(var(--_translate-primary)) scale(var(--_scale));
+}
+
+:host([stacking="depth"][orientation="horizontal"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: center;
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item[data-active="true"]) {
+  z-index: 1000;
+  pointer-events: auto;
+  position: relative;
+}
+
+:host([stacking="depth"]:hover) ::slotted(.banner-group-item) {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: auto;
+  position: static;
+  inset: auto;
+  transform: none;
+}
+
+:host([stacking="depth"][orientation="horizontal"]:hover) ::slotted(.banner-group-item) {
+  transform: none;
+}
+
+    `;
+}
+//# sourceMappingURL=BannerGroupElement.Cosmopolitan.js.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKT,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function bannerGroupElementJoyStyle(): CSSResult;
+//# sourceMappingURL=BannerGroupElement.Joy.d.ts.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAqKtD"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Joy.js

@@ -0,0 +1,179 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function bannerGroupElementJoyStyle() {
+    return css `
+:host {
+  --banner-group-font-family: unset;
+  --banner-group-font-letter-spacing: unset;
+  --banner-group-font-line-height: unset;
+  --banner-group-font-size: unset;
+  --banner-group-font-text-decoration: unset;
+  --banner-group-font-text-transform: unset;
+  --banner-group-font-weight: unset;
+  --banner-group-gap: unset;
+  --banner-group-padding-bottom: unset;
+  --banner-group-padding-left: unset;
+  --banner-group-padding-right: unset;
+  --banner-group-padding-top: unset;
+  --banner-group-transition-duration: unset;
+  --banner-group-transition-mode: unset;
+  --banner-group-transition-property: unset;
+  --banner-group-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  --banner-group-gap: 0px;
+  --banner-group-indicator-size: 8px;
+  --banner-group-indicator-gap: 8px;
+  --banner-group-depth-scale-step: .08;
+  --banner-group-depth-translate-step: 6;
+  --banner-group-depth-opacity-step: 0;
+  display: block;
+  position: relative;
+}
+
+:host [part="viewport"] {
+  gap: var(--banner-group-gap);
+  flex-direction: column;
+  display: flex;
+}
+
+:host([reverse]) [part="viewport"] {
+  flex-direction: column-reverse;
+}
+
+:host([orientation="horizontal"]) [part="viewport"] {
+  flex-direction: row;
+}
+
+:host ::slotted([hidden]) {
+  display: none !important;
+}
+
+:host([stacking="depth"]) [part="viewport"] {
+  align-items: center;
+  position: relative;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item) {
+  will-change: opacity, transform;
+  transition: opacity .22s, transform .32s cubic-bezier(.22, .61, .36, 1);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[hidden]) {
+  display: none !important;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-active="true"]) {
+  opacity: 1;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  opacity: 0;
+  transform: translate3d(0, 8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  transform: translate3d(8px, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  opacity: 0;
+  transform: translate3d(0, -8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  transform: translate3d(-8px, 0, 0);
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item) {
+  transform-origin: top;
+  pointer-events: none;
+  --_depth-offset: var(--banner-group-item-depth-offset, 0);
+  --_item-index: var(--banner-group-item-index, 0);
+  --_direction: 1;
+  --_translate-primary: calc(var(--banner-group-depth-translate-step) * var(--_depth-offset) * var(--_direction) * 1px);
+  --_scale: calc(1 - (var(--banner-group-depth-scale-step) * var(--_depth-offset)));
+  --_opacity: calc(1 - (var(--banner-group-depth-opacity-step) * var(--_depth-offset)));
+  z-index: calc(var(--banner-group-visible-count, 1)  - var(--_depth-offset));
+  transform: translateY(var(--_translate-primary)) scale(var(--_scale));
+  opacity: var(--_opacity);
+  transition: transform .16s, opacity .16s;
+  position: absolute;
+  inset: 0;
+}
+
+:host([stacking="depth"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: bottom;
+}
+
+:host([stacking="depth"][orientation="horizontal"]) ::slotted(.banner-group-item) {
+  transform: translateX(var(--_translate-primary)) scale(var(--_scale));
+}
+
+:host([stacking="depth"][orientation="horizontal"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: center;
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item[data-active="true"]) {
+  z-index: 1000;
+  pointer-events: auto;
+  position: relative;
+}
+
+:host([stacking="depth"]:hover) ::slotted(.banner-group-item) {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: auto;
+  position: static;
+  inset: auto;
+  transform: none;
+}
+
+:host([stacking="depth"][orientation="horizontal"]:hover) ::slotted(.banner-group-item) {
+  transform: none;
+}
+
+    `;
+}
+//# sourceMappingURL=BannerGroupElement.Joy.js.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKT,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function bannerGroupElementRetroStyle(): CSSResult;
+//# sourceMappingURL=BannerGroupElement.Retro.d.ts.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAqKxD"}

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.js

@@ -0,0 +1,179 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function bannerGroupElementRetroStyle() {
+    return css `
+:host {
+  --banner-group-font-family: unset;
+  --banner-group-font-letter-spacing: unset;
+  --banner-group-font-line-height: unset;
+  --banner-group-font-size: unset;
+  --banner-group-font-text-decoration: unset;
+  --banner-group-font-text-transform: unset;
+  --banner-group-font-weight: unset;
+  --banner-group-gap: unset;
+  --banner-group-padding-bottom: unset;
+  --banner-group-padding-left: unset;
+  --banner-group-padding-right: unset;
+  --banner-group-padding-top: unset;
+  --banner-group-transition-duration: unset;
+  --banner-group-transition-mode: unset;
+  --banner-group-transition-property: unset;
+  --banner-group-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  --banner-group-gap: 0px;
+  --banner-group-indicator-size: 8px;
+  --banner-group-indicator-gap: 8px;
+  --banner-group-depth-scale-step: .08;
+  --banner-group-depth-translate-step: 6;
+  --banner-group-depth-opacity-step: 0;
+  display: block;
+  position: relative;
+}
+
+:host [part="viewport"] {
+  gap: var(--banner-group-gap);
+  flex-direction: column;
+  display: flex;
+}
+
+:host([reverse]) [part="viewport"] {
+  flex-direction: column-reverse;
+}
+
+:host([orientation="horizontal"]) [part="viewport"] {
+  flex-direction: row;
+}
+
+:host ::slotted([hidden]) {
+  display: none !important;
+}
+
+:host([stacking="depth"]) [part="viewport"] {
+  align-items: center;
+  position: relative;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item) {
+  will-change: opacity, transform;
+  transition: opacity .22s, transform .32s cubic-bezier(.22, .61, .36, 1);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[hidden]) {
+  display: none !important;
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-active="true"]) {
+  opacity: 1;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  opacity: 0;
+  transform: translate3d(0, 8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item:not([data-active="true"]):not([data-leaving="true"])) {
+  transform: translate3d(8px, 0, 0);
+}
+
+:host(:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  opacity: 0;
+  transform: translate3d(0, -8px, 0);
+}
+
+:host([orientation="horizontal"]:not([stacking="depth"])) ::slotted(.banner-group-item[data-leaving="true"]) {
+  transform: translate3d(-8px, 0, 0);
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item) {
+  transform-origin: top;
+  pointer-events: none;
+  --_depth-offset: var(--banner-group-item-depth-offset, 0);
+  --_item-index: var(--banner-group-item-index, 0);
+  --_direction: 1;
+  --_translate-primary: calc(var(--banner-group-depth-translate-step) * var(--_depth-offset) * var(--_direction) * 1px);
+  --_scale: calc(1 - (var(--banner-group-depth-scale-step) * var(--_depth-offset)));
+  --_opacity: calc(1 - (var(--banner-group-depth-opacity-step) * var(--_depth-offset)));
+  z-index: calc(var(--banner-group-visible-count, 1)  - var(--_depth-offset));
+  transform: translateY(var(--_translate-primary)) scale(var(--_scale));
+  opacity: var(--_opacity);
+  transition: transform .16s, opacity .16s;
+  position: absolute;
+  inset: 0;
+}
+
+:host([stacking="depth"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: bottom;
+}
+
+:host([stacking="depth"][orientation="horizontal"]) ::slotted(.banner-group-item) {
+  transform: translateX(var(--_translate-primary)) scale(var(--_scale));
+}
+
+:host([stacking="depth"][orientation="horizontal"][reverse]) ::slotted(.banner-group-item) {
+  --_direction: -1;
+  transform-origin: center;
+}
+
+:host([stacking="depth"]) ::slotted(.banner-group-item[data-active="true"]) {
+  z-index: 1000;
+  pointer-events: auto;
+  position: relative;
+}
+
+:host([stacking="depth"]:hover) ::slotted(.banner-group-item) {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: auto;
+  position: static;
+  inset: auto;
+  transform: none;
+}
+
+:host([stacking="depth"][orientation="horizontal"]:hover) ::slotted(.banner-group-item) {
+  transform: none;
+}
+
+    `;
+}
+//# sourceMappingURL=BannerGroupElement.Retro.js.map

package/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/BannerGroup/Themes/BannerGroupElement.Retro.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Absolute/AbsoluteElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbsoluteElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Absolute/AbsoluteElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAOrE;;;;;;GAMG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAOhC;;OAEG;;IASH;;;;;;;;OAQG;IACH,WAA2B,EAAE,IAAI,MAAM,CAEtC;CAIJ;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}
+{"version":3,"file":"AbsoluteElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Absolute/AbsoluteElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAOrE;;;;;;GAMG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAOhC;;OAEG;;IASH;;;;;;;;OAQG;IACH,WAA2B,EAAE,IAAI,MAAM,CAEtC;CAIJ;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}

package/Controls/Components/Layouts/Absolute/AbsoluteItemElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbsoluteItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Absolute/AbsoluteItemElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAO7E;;;;;;GAMG;AACH,qBAUa,mBACT,SAAQ,wBACR,YAAW,yBAAyB;IAIpC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,IAAI,CAA+B;IAC3C,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,MAAM,CAA+B;IAM7C;;OAEG;;IAcH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE9C;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKlD;IAED;;;;;OAKG;IACH,IACW,GAAG,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE7C;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKjD;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAEhD;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKpD;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE/C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKnD;IAMD;;;;OAIG;IAEH,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQvF;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQtF;;;;OAIG;IAEH,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQzF;;;;OAIG;IAEH,SAAS,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;CAU3F;AAED;;GAEG;AACH,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}
+{"version":3,"file":"AbsoluteItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Absolute/AbsoluteItemElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAO7E;;;;;;GAMG;AACH,qBAUa,mBACT,SAAQ,wBACR,YAAW,yBAAyB;IAIpC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,IAAI,CAA+B;IAC3C,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,MAAM,CAA+B;IAM7C;;OAEG;;IAcH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE9C;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKlD;IAED;;;;;OAKG;IACH,IACW,GAAG,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE7C;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKjD;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAEhD;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKpD;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,SAAS,GAAG,IAAI,GAAG,SAAS,CAE/C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAKnD;IAMD;;;;OAIG;IAEH,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQvF;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQtF;;;;OAIG;IAEH,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAQzF;;;;OAIG;IAEH,SAAS,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;CAU3F;AAED;;GAEG;AACH,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/Types/BannerGroupDismissBehavior.d.ts

@@ -0,0 +1,7 @@
+export declare const BannerGroupDismissBehavior: {
+    readonly Remove: "remove";
+    readonly Hide: "hide";
+    readonly None: "none";
+};
+export type BannerGroupDismissBehavior = typeof BannerGroupDismissBehavior[keyof typeof BannerGroupDismissBehavior];
+//# sourceMappingURL=BannerGroupDismissBehavior.d.ts.map

package/Controls/Types/BannerGroupDismissBehavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupDismissBehavior.d.ts","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupDismissBehavior.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;CAI7B,CAAC;AAEX,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC,MAAM,OAAO,0BAA0B,CAAC,CAAC"}

package/Controls/Types/BannerGroupDismissBehavior.js

@@ -0,0 +1,6 @@
+export const BannerGroupDismissBehavior = {
+    Remove: 'remove',
+    Hide: 'hide',
+    None: 'none'
+};
+//# sourceMappingURL=BannerGroupDismissBehavior.js.map

package/Controls/Types/BannerGroupDismissBehavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupDismissBehavior.js","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupDismissBehavior.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACtC,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;CACN,CAAC"}