@easemate/web-kit 0.5.2 → 0.5.4

package/build/react.cjs

@@ -4904,11 +4904,11 @@ var init_dropdown = __esm({
         --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);
     }
@@ -4926,7 +4926,7 @@ var init_dropdown = __esm({
     }
 
     [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);
@@ -14817,6 +14817,7 @@ var init_field = __esm({
 
     [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);
@@ -15312,6 +15313,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 +15331,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,32 +15470,34 @@ 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;
-    }
-
-    [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;
@@ -15511,6 +15521,7 @@ var init_panel = __esm({
 
     [part="tab-panel"][data-state="active"] {
       display: block;
+      height: 100%;
       pointer-events: auto;
     }
 
@@ -15538,6 +15549,7 @@ var init_panel = __esm({
       grid-gap: var(--ease-panel-gap);
       box-sizing: border-box;
       width: 100%;
+      max-height: 100%;
     }
   `
     }), _dec121 = Prop({
@@ -15680,8 +15692,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 +15735,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 +15830,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;