@getmicdrop/svelte-components 5.13.0 → 5.15.0

package/dist/tokens/sizing.js

@@ -9,21 +9,21 @@
 // =============================================================================
 /**
  * Form input sizes - for Input component with fixed heights
- * Provides consistent height, padding, and text sizing for text inputs.
+ * Uses explicit heights for consistent toolbar alignment.
  */
 export const formInputSizes = {
-    sm: 'py-2 px-3 text-sm h-9',
-    md: 'py-2.5 px-4 text-sm h-10',
-    lg: 'py-3 px-4 text-base h-12',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-12 px-4 text-base',
 };
 /**
- * Form control sizes - for Select and other form controls without fixed heights
- * Provides consistent padding and text sizing.
+ * Form control sizes - for Select and other form controls
+ * Uses explicit heights to match buttons and inputs for toolbar alignment.
  */
 export const formControlSizes = {
-    sm: 'py-2 px-3 text-sm',
-    md: 'py-2.5 px-4 text-sm',
-    lg: 'py-3 px-4 text-base',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-12 px-4 text-base',
 };
 // =============================================================================
 // ICON/SPINNER SIZES
@@ -76,18 +76,19 @@ export const skeletonSizes = {
 // BUTTON SIZES
 // =============================================================================
 /**
- * Standard button sizes - padding and text sizing.
+ * Standard button sizes - padding, text sizing, and explicit heights for consistency.
+ * All toolbar elements (buttons, inputs, selects) should align at the same height.
  */
 export const buttonSizes = {
-    xs: 'px-3 py-1.5 text-xs',
-    sm: 'px-3 py-2 text-sm',
-    md: 'px-4 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-sm',
-    xl: 'px-6 py-3.5 text-sm',
-    'xl-medium': 'w-full px-6 py-3.5 text-sm',
-    full: 'w-full px-5 py-3 text-sm',
-    'full-md-auto': 'w-full px-5 py-3 text-sm md:w-auto',
-    half: 'w-1/2 px-4 py-2.5 text-sm',
+    xs: 'h-8 px-3 text-xs',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-11 px-5 text-sm',
+    xl: 'h-12 px-6 text-sm',
+    'xl-medium': 'w-full h-12 px-6 text-sm',
+    full: 'w-full h-11 px-5 text-sm',
+    'full-md-auto': 'w-full h-11 px-5 text-sm md:w-auto',
+    half: 'w-1/2 h-10 px-4 text-sm',
     // Landing page hero buttons - taller with larger text
     landing: 'h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",