@easemate/web-kit 0.5.2 → 0.5.4

package/build/elements.cjs

@@ -4016,11 +4016,11 @@ _dec10 = Component({
         --ease-dropdown-panel-shadow,
         0 5px 20px 0 var(--color-black-15),
         0 1px 4px 0 var(--color-black-15),
-        0 0 0 1px var(--color-white-4) inset,
+        0 0 0 .5px var(--color-white-4) inset,
         0 1px 0 0 var(--color-white-4) inset
       );
       background-clip: padding-box;
-      border: 1px solid var(--ease-dropdown-panel-border-color, var(--color-gray-825));
+      border: .25px solid var(--ease-dropdown-panel-border-color, var(--color-gray-825));
       box-sizing: border-box;
       padding: var(--ease-dropdown-panel-padding, 4px);
     }
@@ -4038,7 +4038,7 @@ _dec10 = Component({
     }
 
     [part="content"] ::slotted(h4) {
-      margin: 4px 0 8px 0 !important;
+      margin: 4px 0 !important;
       font-size: var(--ease-dropdown-group-label-font-size, 11px);
       line-height: 1;
       padding: var(--ease-dropdown-group-label-padding, 0 8px);
@@ -8876,6 +8876,7 @@ _dec29 = Component({
 
     [part="field"] {
       scroll-snap-align: start;
+      scroll-margin-top: 8px;
       display: grid;
       grid-template-columns: var(--ease-field-label-width, 36%) auto;
       column-gap: var(--ease-field-column-gap, 12px);
@@ -9397,6 +9398,7 @@ _dec30 = Component({
     :host {
       display: block;
       width: 100%;
+      interpolate-size: allow-keywords;
     }
 
     [part="section"] {
@@ -9470,7 +9472,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);
@@ -23952,6 +23954,11 @@ _dec81 = Component({
   tag: "ease-panel",
   shadowMode: "open",
   styles: `
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
     @property --ease-panel-top-fade {
       syntax: "<length>";
       inherits: false;
@@ -23965,7 +23972,9 @@ _dec81 = Component({
     }
 
     [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);
@@ -24102,32 +24111,34 @@ _dec81 = Component({
 
     [part="content"] {
       display: block;
+      flex: 1 1 auto;
+      min-height: 0;
       width: 100%;
       box-sizing: border-box;
-      margin: auto;
-      overflow: hidden;
-    }
-
-    [part="content"][data-animating="true"] {
-      transition: height 200ms cubic-bezier(.25, 0, .5, 1);
-    }
-
-    [part="body"] {
-      width: 100%;
-      position: relative;
       overflow-y: auto;
+      overflow-x: hidden;
       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;
+      scroll-snap-type: y proximity;
       scrollbar-width: none;
-      max-height: calc(100dvh - 32px - var(--ease-panel-padding));
 
       &::-webkit-scrollbar {
         display: none;
       }
     }
 
+    [part="content"][data-animating="true"] {
+      transition: height 200ms cubic-bezier(.25, 0, .5, 1);
+    }
+
+    [part="body"] {
+      display: block;
+      height: 100%;
+      width: 100%;
+      position: relative;
+    }
+
     @keyframes scroll-fade {
       0% {
         --top-fade: 0px;
@@ -24151,6 +24162,7 @@ _dec81 = Component({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -24178,6 +24190,7 @@ _dec81 = Component({
       grid-gap: var(--ease-panel-gap);
       box-sizing: border-box;
       width: 100%;
+      max-height: 100%;
     }
   `
 }), _dec124 = Prop({
@@ -24320,8 +24333,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 +24376,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 +24471,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;