@florid-kit/components 2.1.3 → 2.1.4

package/index.js

@@ -4400,35 +4400,61 @@
       </div>
     </header>`}};k.styles=C`
     .o-header-simplify {
+      --header-simplify-height-default: 72px;
+      --header-simplify-height-scrolled: 60px;
+      --header-simplify-height-scrolled-mobile: 64px;
+
       display: flex;
       width: 100%;
-      padding: var(--spacing-xs, 6px) var(--spacing-s, 8px);
+      height: var(--header-simplify-height-default);
+      box-sizing: border-box;
+      padding: 0 var(--spacing-s, 8px);
       flex-direction: column;
       justify-content: center;
-      align-items: flex-start;
-      gap: var(--spacing-s, 8px);
+      align-items: stretch;
+      gap: 0;
       border-bottom: var(--border-s, 0.5px) solid
         var(--color-border-tertiary, #c3bdbe);
       background: var(--color-container-bg-white, #fffefe);
       border-radius: var(--radius-m, 4px);
+      transition:
+        height 0.2s ease,
+        box-shadow 0.4s linear,
+        border-color 0.2s ease,
+        padding 0.2s ease,
+        top 0.2s ease,
+        width 0.2s ease;
 
       @media (max-width: 767px) {
-        padding: var(--spacing-2-xs, 4px);
+        padding: 0 var(--spacing-2-xs, 4px);
         align-items: center;
       }
     }
 
     .o-header-simplify.is-scrolled {
+      height: var(--header-simplify-height-scrolled);
       border-bottom: none;
       box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
     }
 
+    @media (max-width: 767px) {
+      .o-header-simplify.is-scrolled {
+        height: var(--header-simplify-height-scrolled-mobile);
+      }
+    }
+
     .o-header-simplify.is-sticky {
       position: sticky;
       top: var(--header-simplify-sticky-top, 0);
       z-index: var(--header-simplify-sticky-z-index, 98);
       margin: auto;
-      transition: top 0.2s ease, width 0.2s ease;
+      transition:
+        height 0.2s ease,
+        box-shadow 0.4s linear,
+        border-color 0.2s ease,
+        padding 0.2s ease,
+        top 0.2s ease,
+        width 0.2s ease;
     }
 
     .o-header-simplify.is-sticky.is-scrolled {
@@ -4439,10 +4465,17 @@
     .o-header-simplify-container {
       display: flex;
       padding: var(--spacing-s, 8px) var(--spacing-2-xs, 4px);
+      height: 100%;
+      box-sizing: border-box;
       justify-content: space-between;
       align-items: center;
       align-self: stretch;
       border-radius: var(--radius-m, 4px);
+      transition: padding 0.2s ease;
+    }
+
+    .o-header-simplify.is-scrolled .o-header-simplify-container {
+      padding: var(--spacing-xs, 6px) var(--spacing-2-xs, 4px);
     }
 
     .o-header-simplify-container.no-back-button {

package/index.mjs

@@ -7398,35 +7398,61 @@ let k = class extends p {
 };
 k.styles = C`
     .o-header-simplify {
+      --header-simplify-height-default: 72px;
+      --header-simplify-height-scrolled: 60px;
+      --header-simplify-height-scrolled-mobile: 64px;
+
       display: flex;
       width: 100%;
-      padding: var(--spacing-xs, 6px) var(--spacing-s, 8px);
+      height: var(--header-simplify-height-default);
+      box-sizing: border-box;
+      padding: 0 var(--spacing-s, 8px);
       flex-direction: column;
       justify-content: center;
-      align-items: flex-start;
-      gap: var(--spacing-s, 8px);
+      align-items: stretch;
+      gap: 0;
       border-bottom: var(--border-s, 0.5px) solid
         var(--color-border-tertiary, #c3bdbe);
       background: var(--color-container-bg-white, #fffefe);
       border-radius: var(--radius-m, 4px);
+      transition:
+        height 0.2s ease,
+        box-shadow 0.4s linear,
+        border-color 0.2s ease,
+        padding 0.2s ease,
+        top 0.2s ease,
+        width 0.2s ease;
 
       @media (max-width: 767px) {
-        padding: var(--spacing-2-xs, 4px);
+        padding: 0 var(--spacing-2-xs, 4px);
         align-items: center;
       }
     }
 
     .o-header-simplify.is-scrolled {
+      height: var(--header-simplify-height-scrolled);
       border-bottom: none;
       box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
     }
 
+    @media (max-width: 767px) {
+      .o-header-simplify.is-scrolled {
+        height: var(--header-simplify-height-scrolled-mobile);
+      }
+    }
+
     .o-header-simplify.is-sticky {
       position: sticky;
       top: var(--header-simplify-sticky-top, 0);
       z-index: var(--header-simplify-sticky-z-index, 98);
       margin: auto;
-      transition: top 0.2s ease, width 0.2s ease;
+      transition:
+        height 0.2s ease,
+        box-shadow 0.4s linear,
+        border-color 0.2s ease,
+        padding 0.2s ease,
+        top 0.2s ease,
+        width 0.2s ease;
     }
 
     .o-header-simplify.is-sticky.is-scrolled {
@@ -7437,10 +7463,17 @@ k.styles = C`
     .o-header-simplify-container {
       display: flex;
       padding: var(--spacing-s, 8px) var(--spacing-2-xs, 4px);
+      height: 100%;
+      box-sizing: border-box;
       justify-content: space-between;
       align-items: center;
       align-self: stretch;
       border-radius: var(--radius-m, 4px);
+      transition: padding 0.2s ease;
+    }
+
+    .o-header-simplify.is-scrolled .o-header-simplify-container {
+      padding: var(--spacing-xs, 6px) var(--spacing-2-xs, 4px);
     }
 
     .o-header-simplify-container.no-back-button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florid-kit/components",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",