@easemate/web-kit 0.5.2 → 0.5.3

package/build/react.cjs

@@ -15312,6 +15312,11 @@ var init_panel = __esm({
       tag: "ease-panel",
       shadowMode: "open",
       styles: `
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
     @property --ease-panel-top-fade {
       syntax: "<length>";
       inherits: false;
@@ -15325,7 +15330,9 @@ var init_panel = __esm({
     }
 
     [part="section"] {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      max-height: inherit;
       width: 100%;
       max-width: var(--ease-panel-max-width);
       border-radius: var(--ease-panel-radius);
@@ -15462,9 +15469,10 @@ var init_panel = __esm({
 
     [part="content"] {
       display: block;
+      flex: 1 1 auto;
+      min-height: 0;
       width: 100%;
       box-sizing: border-box;
-      margin: auto;
       overflow: hidden;
     }
 
@@ -15473,19 +15481,10 @@ var init_panel = __esm({
     }
 
     [part="body"] {
+      display: block;
+      height: 100%;
       width: 100%;
       position: relative;
-      overflow-y: auto;
-      mask-image: linear-gradient(to bottom, #0000, #ffff var(--top-fade) calc(100% - var(--bottom-fade)), #0000);
-      animation-name: scroll-fade;
-      animation-timeline: scroll(self y);
-      scroll-snap-type: y mandatory;
-      scrollbar-width: none;
-      max-height: calc(100dvh - 32px - var(--ease-panel-padding));
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
     }
 
     @keyframes scroll-fade {
@@ -15511,6 +15510,7 @@ var init_panel = __esm({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -15538,6 +15538,17 @@ var init_panel = __esm({
       grid-gap: var(--ease-panel-gap);
       box-sizing: border-box;
       width: 100%;
+      max-height: 100%;
+      overflow-y: auto;
+      mask-image: linear-gradient(to bottom, #0000, #ffff var(--top-fade) calc(100% - var(--bottom-fade)), #0000);
+      animation-name: scroll-fade;
+      animation-timeline: scroll(self y);
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
   `
     }), _dec121 = Prop({
@@ -15680,8 +15691,8 @@ var init_panel = __esm({
           </div>
         </div>
         <div part="content">
-          <div part="body" style=${this.maxHeight ? `max-height: ${this.maxHeight};` : ""}>
-            ${hasTabs ? this.#renderTabPanels() : import_lit_html22.html`<div part="items"><slot></slot></div>`}
+          <div part="body">
+            ${hasTabs ? this.#renderTabPanels() : import_lit_html22.html`<div part="items" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : import_lit_html22.nothing}><slot></slot></div>`}
           </div>
         </div>
         <div part="footer">
@@ -15723,7 +15734,7 @@ var init_panel = __esm({
             data-state=${index === this.activeTab ? "active" : "hidden"}
             data-index=${index}
           >
-            <div part="items">
+            <div part="items" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : import_lit_html22.nothing}>
               <slot name=${`tab-${tab.id}`}></slot>
             </div>
           </div>
@@ -15818,12 +15829,15 @@ var init_panel = __esm({
         } catch {
         }
         fromPanel.setAttribute("data-state", "hidden");
+        content.style.height = "auto";
         const previousToState = toPanel.getAttribute("data-state");
         toPanel.style.display = "block";
         toPanel.style.visibility = "hidden";
         toPanel.style.opacity = "0";
-        void toPanel.offsetHeight;
-        const endHeight = toPanel.getBoundingClientRect().height;
+        void content.offsetHeight;
+        const endHeight = content.getBoundingClientRect().height;
+        content.style.height = `${startHeight}px`;
+        void content.offsetHeight;
         if (startHeight !== endHeight) {
           content.setAttribute("data-animating", "true");
           void content.offsetHeight;