@easemate/web-kit 0.5.2 → 0.5.3

package/build/index.cjs

@@ -34147,6 +34147,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;
@@ -34160,7 +34165,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);
@@ -34297,9 +34304,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;
     }
 
@@ -34308,19 +34316,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 {
@@ -34346,6 +34345,7 @@ var init_panel = __esm({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -34373,6 +34373,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;
+      }
     }
   `
     }), _dec146 = Prop({
@@ -34515,8 +34526,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_html56.html`<div part="items"><slot></slot></div>`}
+          <div part="body">
+            ${hasTabs ? this.#renderTabPanels() : import_lit_html56.html`<div part="items" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : import_lit_html56.nothing}><slot></slot></div>`}
           </div>
         </div>
         <div part="footer">
@@ -34558,7 +34569,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_html56.nothing}>
               <slot name=${`tab-${tab.id}`}></slot>
             </div>
           </div>
@@ -34653,12 +34664,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;
@@ -40775,6 +40789,7 @@ _dec78 = Component({
     :host {
       display: block;
       width: 100%;
+      interpolate-size: allow-keywords;
     }
 
     [part="section"] {
@@ -40848,7 +40863,7 @@ _dec78 = Component({
       grid-gap: var(--ease-folder-gap);
       padding: var(--ease-folder-padding);
       overflow-y: auto;
-      overscroll-behavior: contain;
+      overscroll-behavior: none;
       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);