@easemate/web-kit 0.5.1 → 0.5.3

package/build/elements.cjs

@@ -9365,7 +9365,6 @@ var _initProto10;
 var _Folder;
 _dec30 = Component({
   tag: "ease-folder",
-  shadowMode: "open",
   styles: `
     @property --top-fade {
       syntax: "<length>";
@@ -9398,6 +9397,7 @@ _dec30 = Component({
     :host {
       display: block;
       width: 100%;
+      interpolate-size: allow-keywords;
     }
 
     [part="section"] {
@@ -9471,7 +9471,7 @@ _dec30 = 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);
@@ -9555,8 +9555,8 @@ var Folder = class extends (_HTMLElement12 = HTMLElement) {
             <ease-icon-chevron state=${this.open ? "up" : "down"}></ease-icon-chevron>
           </span>
         </div>
-        <div part="content" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : ""}>
-          <div part="body">
+        <div part="content">
+          <div part="body" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : ""}>
             <slot></slot>
           </div>
         </div>
@@ -23953,20 +23953,27 @@ _dec81 = Component({
   tag: "ease-panel",
   shadowMode: "open",
   styles: `
-    @property --top-fade {
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    @property --ease-panel-top-fade {
       syntax: "<length>";
       inherits: false;
       initial-value: 0px;
     }
 
-    @property --bottom-fade {
+    @property --ease-panel-bottom-fade {
       syntax: "<length>";
       inherits: false;
       initial-value: 0px;
     }
 
     [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);
@@ -24103,9 +24110,10 @@ _dec81 = Component({
 
     [part="content"] {
       display: block;
+      flex: 1 1 auto;
+      min-height: 0;
       width: 100%;
       box-sizing: border-box;
-      margin: auto;
       overflow: hidden;
     }
 
@@ -24114,18 +24122,10 @@ _dec81 = Component({
     }
 
     [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;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
     }
 
     @keyframes scroll-fade {
@@ -24151,6 +24151,7 @@ _dec81 = Component({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -24178,6 +24179,17 @@ _dec81 = Component({
       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;
+      }
     }
   `
 }), _dec124 = Prop({
@@ -24320,8 +24332,8 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
           </div>
         </div>
         <div part="content">
-          <div part="body" style=${this.maxHeight ? `max-height: ${this.maxHeight};` : ""}>
-            ${hasTabs ? this.#renderTabPanels() : import_lit_html42.html`<div part="items"><slot></slot></div>`}
+          <div part="body">
+            ${hasTabs ? this.#renderTabPanels() : import_lit_html42.html`<div part="items" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : import_lit_html42.nothing}><slot></slot></div>`}
           </div>
         </div>
         <div part="footer">
@@ -24363,7 +24375,7 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
             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_html42.nothing}>
               <slot name=${`tab-${tab.id}`}></slot>
             </div>
           </div>
@@ -24458,12 +24470,15 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
     } 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;