@tmorrow/cre8-wc 2.3.5 → 2.3.9

package/dist/assets/{popover.stories-DYYRKxPn.js → popover.stories-BAP5fYpV.js}

@@ -1,5 +1,5 @@
-import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from"./spread-Cc0YLoqh.js";import{w as C}from"./decorator-iVSD-Llo.js";import"./f-po-CDPxLfff.js";import"./button-BKkXnzpg.js";import{C as B,n}from"./cre8-element-D4jUl3yv.js";import{e as k}from"./query-BpjciUlk.js";import{o as P}from"./query-assigned-elements-43hYArgI.js";import"./heading-TaL9d36K.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-Bh0SnORx.js";import"./cre8-form-element-B-sJI1kh.js";import"./icon-BmyJ3psE.js";import"./loading-spinner-BcPlxdFy.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const S=A`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as T,A as O,b as i,o as c}from"./iframe-DDPT8KPE.js";import{s as C}from"./spread-B6c5bbZ0.js";import{w as B}from"./decorator-iVSD-Llo.js";import"./f-po-B5bw1GSj.js";import"./button-8X2Dk9iy.js";import{C as S,n}from"./cre8-element-D6gzFubi.js";import{e as P}from"./query-BpjciUlk.js";import{o as A}from"./query-assigned-elements-43hYArgI.js";import"./heading-zzuz3Lhl.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-D9Db4BBK.js";import"./cre8-form-element-vpi8SSNA.js";import"./icon-CxPUuckL.js";import"./loading-spinner-Cr5nQQHU.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const L=T`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as A,A as T,b as i,o as c}from"./iframe-DgoqrgRr.js";import{s as O}from
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -627,7 +626,7 @@ span.ripple {
   transform: translateX(var(--rtlTranslateX, -50%));
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   width: 16rem;
   z-index: 400;
   /* 1 */
@@ -635,7 +634,7 @@ span.ripple {
   border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
   border-radius: var(--cre8-border-radius-container);
   box-shadow: var(--cre8-shadow-default);
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
   /**
    * Focus state for popover panel
    */
@@ -770,8 +769,8 @@ span.ripple {
  */
 .cre8-c-popover__footer {
   display: flex;
-  gap: 1rem;
-}`;var L=Object.defineProperty,o=(d,e,t,s)=>{for(var a=void 0,w=d.length-1,z;w>=0;w--)(z=d[w])&&(a=z(e,t,a)||a);return a&&L(e,t,a),a};const _=class _ extends B{constructor(){super(...arguments),this.handleOnClickOutside=e=>{if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine panel context during click handler");const t=e.composedPath().includes(this.shadowRoot.host);e.target===document.querySelector("html")&&e.clientX>=document.documentElement.offsetWidth||this.isActive&&!t&&this._toggleActive()},this.removeActiveOnScroll=()=>{if(this.isActive&&!this.isVisibleOnScroll){const e=this._Cre8PopoverPanel.getBoundingClientRect();this._Cre8Popover.clientHeight+e.height+e.top<window.innerHeight&&this._toggleActive()}},this.removeActive=()=>{this.isActive&&this._toggleActive()}}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),globalThis.window.addEventListener("resize",this.removeActive),globalThis.window.addEventListener("scroll",this.removeActiveOnScroll),globalThis.window.addEventListener("orientationchange",this.removeActive),globalThis.document.addEventListener("mousedown",this.handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),globalThis.window.removeEventListener("resize",this.removeActive),globalThis.window.removeEventListener("scroll",this.removeActiveOnScroll),globalThis.window.removeEventListener("orientationchange",this.removeActive),globalThis.document.removeEventListener("mousedown",this.handleOnClickOutside,!1)}firstUpdated(){this.addAria()}addAria(){let e;this._Cre8PopoverTrigger[0].tagName==="CRE8-BUTTON"?(e=this._Cre8PopoverTrigger[0],e.buttonAriaExpanded=this.isActive?this.isActive:!1):(e=this._Cre8PopoverTrigger[0],e.setAttribute("aria-expanded",`${this.isActive?this.isActive:!1}`),e.setAttribute("type","button"))}dynamicPosition(){if(this.isDynamic&&this._Cre8PopoverPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8PopoverPanel.getBoundingClientRect();t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_toggleActive(){this.isActive=!this.isActive,this.addAria(),this.isActive?(requestAnimationFrame(()=>{this.dynamicPosition()}),this.dispatchWithLegacyAlias(new CustomEvent("popover-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("popover-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}_handleKeydown(e){e.key==="Escape"&&this.isActive===!0?this._toggleActive():e.key==="Tab"&&this._handleTabNavigation(e)}_handleTabNavigation(e){this.isActive&&this._navigateInsidePopover(e)}_navigateInsidePopover(e){const t=this._getFocusableElements();if(t.length===0){this._closePopoverAndFocusTrigger(e);return}const s=t[t.length-1];document.activeElement===s&&(this._closePopoverAndFocusTrigger(e),e.preventDefault())}_getFocusableElements(){return[...Array.from(this._Cre8PopoverFooter)]}_closePopoverAndFocusTrigger(e){this._toggleActive(),e.preventDefault()}render(){const e=this.componentClassNames("cre8-c-popover",{"cre8-c-popover--top":this.position==="top","cre8-c-popover--left":this.position==="left","cre8-c-popover--right":this.position==="right","cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return i`
+  gap: var(--cre8-spacing-16);
+}`;var E=Object.defineProperty,o=(d,e,t,s)=>{for(var a=void 0,w=d.length-1,k;w>=0;w--)(k=d[w])&&(a=k(e,t,a)||a);return a&&E(e,t,a),a};const _=class _ extends S{constructor(){super(...arguments),this.handleOnClickOutside=e=>{if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine panel context during click handler");const t=e.composedPath().includes(this.shadowRoot.host);e.target===document.querySelector("html")&&e.clientX>=document.documentElement.offsetWidth||this.isActive&&!t&&this._toggleActive()},this.removeActiveOnScroll=()=>{if(this.isActive&&!this.isVisibleOnScroll){const e=this._Cre8PopoverPanel.getBoundingClientRect();this._Cre8Popover.clientHeight+e.height+e.top<window.innerHeight&&this._toggleActive()}},this.removeActive=()=>{this.isActive&&this._toggleActive()}}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),globalThis.window.addEventListener("resize",this.removeActive),globalThis.window.addEventListener("scroll",this.removeActiveOnScroll),globalThis.window.addEventListener("orientationchange",this.removeActive),globalThis.document.addEventListener("mousedown",this.handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),globalThis.window.removeEventListener("resize",this.removeActive),globalThis.window.removeEventListener("scroll",this.removeActiveOnScroll),globalThis.window.removeEventListener("orientationchange",this.removeActive),globalThis.document.removeEventListener("mousedown",this.handleOnClickOutside,!1)}firstUpdated(){this.addAria()}addAria(){let e;this._Cre8PopoverTrigger[0].tagName==="CRE8-BUTTON"?(e=this._Cre8PopoverTrigger[0],e.buttonAriaExpanded=this.isActive?this.isActive:!1):(e=this._Cre8PopoverTrigger[0],e.setAttribute("aria-expanded",`${this.isActive?this.isActive:!1}`),e.setAttribute("type","button"))}dynamicPosition(){if(this.isDynamic&&this._Cre8PopoverPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8PopoverPanel.getBoundingClientRect();t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_toggleActive(){this.isActive=!this.isActive,this.addAria(),this.isActive?(requestAnimationFrame(()=>{this.dynamicPosition()}),this.dispatchWithLegacyAlias(new CustomEvent("popover-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("popover-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}_handleKeydown(e){e.key==="Escape"&&this.isActive===!0?this._toggleActive():e.key==="Tab"&&this._handleTabNavigation(e)}_handleTabNavigation(e){this.isActive&&this._navigateInsidePopover(e)}_navigateInsidePopover(e){const t=this._getFocusableElements();if(t.length===0){this._closePopoverAndFocusTrigger(e);return}const s=t[t.length-1];document.activeElement===s&&(this._closePopoverAndFocusTrigger(e),e.preventDefault())}_getFocusableElements(){return[...Array.from(this._Cre8PopoverFooter)]}_closePopoverAndFocusTrigger(e){this._toggleActive(),e.preventDefault()}render(){const e=this.componentClassNames("cre8-c-popover",{"cre8-c-popover--top":this.position==="top","cre8-c-popover--left":this.position==="left","cre8-c-popover--right":this.position==="right","cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return i`
       <div class="${e}">
         ${this.slotNotEmpty("trigger")&&i` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
         ${this.isActive?i`
@@ -788,15 +787,15 @@ span.ripple {
                   </div>
                 `}
               </div>
-            `:T}
+            `:O}
       </div>
-    `}};_.styles=[S];let r=_;o([n()],r.prototype,"heading");o([n()],r.prototype,"position");o([n({type:Boolean,reflect:!0})],r.prototype,"isVisibleOnScroll");o([n({type:Boolean,reflect:!0})],r.prototype,"isDynamic");o([n({type:Boolean,reflect:!0})],r.prototype,"isActiveDynamic");o([n({type:Boolean,reflect:!0})],r.prototype,"isActive");o([k(".cre8-c-popover")],r.prototype,"_Cre8Popover");o([k(".cre8-c-popover__panel")],r.prototype,"_Cre8PopoverPanel");o([P({slot:"trigger"})],r.prototype,"_Cre8PopoverTrigger");o([P({slot:"footer"})],r.prototype,"_Cre8PopoverFooter");customElements.get("cre8-popover")===void 0&&customElements.define("cre8-popover",r);const J={title:"cre8 Components/Popover",component:"cre8-popover",render:({heading:d,header:e,body:t,footer:s,...a})=>i`
-  <cre8-popover ${O(a)}>
+    `}};_.styles=[L];let r=_;o([n()],r.prototype,"heading");o([n()],r.prototype,"position");o([n({type:Boolean,reflect:!0})],r.prototype,"isVisibleOnScroll");o([n({type:Boolean,reflect:!0})],r.prototype,"isDynamic");o([n({type:Boolean,reflect:!0})],r.prototype,"isActiveDynamic");o([n({type:Boolean,reflect:!0})],r.prototype,"isActive");o([P(".cre8-c-popover")],r.prototype,"_Cre8Popover");o([P(".cre8-c-popover__panel")],r.prototype,"_Cre8PopoverPanel");o([A({slot:"trigger"})],r.prototype,"_Cre8PopoverTrigger");o([A({slot:"footer"})],r.prototype,"_Cre8PopoverFooter");customElements.get("cre8-popover")===void 0&&customElements.define("cre8-popover",r);const J={title:"cre8 Components/Popover",component:"cre8-popover",render:({heading:d,header:e,body:t,footer:s,...a})=>i`
+  <cre8-popover ${C(a)}>
     ${c(p(d,"f-po"))}
     ${c(p(e,"cre8-button","f-po"))}
     ${c(p(t,"f-po"))}
     ${c(p(s,"cre8-button","f-po"))}
-  </cre8-popover>`,parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["popover-open","popover-close"]}},decorators:[C],args:{body:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",heading:"Popover Heading",header:'<cre8-button slot="trigger" text="Open Popover" variant="primary"></cre8-button>'},argTypes:{isActive:{control:"boolean"},isActiveDynamic:{control:"boolean"},isDynamic:{control:"boolean"},isVisibleOnScroll:{control:"boolean"},position:{control:"text"},handleOnClickOutside:{table:{disable:!0}},removeActive:{table:{disable:!0}},removeActiveOnScroll:{table:{disable:!0}},isRTL:{table:{disable:!0}},close:{table:{disable:!0}},open:{table:{disable:!0}}}},m={args:{footer:'<cre8-button slot="footer" variant="tertiary" text="Button" size="sm" style="margin-left: auto"></cre8-button>'}},g={},u={args:{footer:'<cre8-button slot="footer" variant="primary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},h={args:{footer:'<cre8-button slot="footer" variant="secondary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},f={args:{position:"left"}},v={args:{position:"top"}},b={args:{position:"right"}},l=()=>i`
+  </cre8-popover>`,parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["popover-open","popover-close"]}},decorators:[B],args:{body:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",heading:"Popover Heading",header:'<cre8-button slot="trigger" text="Open Popover" variant="primary"></cre8-button>'},argTypes:{isActive:{control:"boolean"},isActiveDynamic:{control:"boolean"},isDynamic:{control:"boolean"},isVisibleOnScroll:{control:"boolean"},position:{control:"text"},handleOnClickOutside:{table:{disable:!0}},removeActive:{table:{disable:!0}},removeActiveOnScroll:{table:{disable:!0}},isRTL:{table:{disable:!0}},close:{table:{disable:!0}},open:{table:{disable:!0}}}},m={args:{footer:'<cre8-button slot="footer" variant="tertiary" text="Button" size="sm" style="margin-left: auto"></cre8-button>'}},g={},u={args:{footer:'<cre8-button slot="footer" variant="primary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},h={args:{footer:'<cre8-button slot="footer" variant="secondary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},f={args:{position:"left"}},v={args:{position:"top"}},b={args:{position:"right"}},l=()=>i`
   <div
     style="padding: 3rem; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; overflow: hidden;"
   >