@easemate/web-kit 0.5.1 → 0.5.3

package/build/index.cjs

@@ -34147,20 +34147,27 @@ var init_panel = __esm({
       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);
@@ -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,18 +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;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
     }
 
     @keyframes scroll-fade {
@@ -34345,6 +34345,7 @@ var init_panel = __esm({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -34372,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({
@@ -34514,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">
@@ -34557,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>
@@ -34652,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;
@@ -40742,7 +40757,6 @@ var _initProto20;
 var _Folder;
 _dec78 = Component({
   tag: "ease-folder",
-  shadowMode: "open",
   styles: `
     @property --top-fade {
       syntax: "<length>";
@@ -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);
@@ -40932,8 +40947,8 @@ var Folder = class extends (_HTMLElement24 = 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>