@getmicdrop/svelte-components 5.13.0 → 5.14.0

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -26,6 +26,7 @@
       taxPercentage: 0,
     },
     onPriceUpdate,
+    giftCardApplied = null, // { code, giftCardAmount, giftCardBalance, stripeAmount, paymentType, requiresStripe }
   } = $props();
 
   // Helper to get effective price for a ticket (handles donation tickets)
@@ -127,7 +128,22 @@
 
   let taxRate = $derived((venueServiceCharge.taxPercentage || 0) / 100);
   let taxes = $derived(subtotal > 0 ? subtotal * taxRate : 0);
-  let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
+
+  // Gift card derived values
+  let giftCardAmountDisplay = $derived(
+    giftCardApplied ? (giftCardApplied.giftCardAmount / 100).toFixed(2) : null
+  );
+  let giftCardRemainingBalance = $derived(
+    giftCardApplied ? ((giftCardApplied.giftCardBalance - giftCardApplied.giftCardAmount) / 100).toFixed(2) : null
+  );
+
+  // Total accounts for gift card deduction
+  let total = $derived(
+    Math.max(0, subtotal + fees + taxes
+      - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)
+      - (giftCardApplied ? giftCardApplied.giftCardAmount / 100 : 0)
+    )
+  );
 
   $effect(() => {
     onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
@@ -206,11 +222,33 @@
         <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
+        {#if giftCardApplied}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Gift Card Applied</span>
+            <span>-${giftCardAmountDisplay}</span>
+          </div>
+          {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
+            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+              <span>Gift card balance after order</span>
+              <span>${giftCardRemainingBalance}</span>
+            </div>
+          {/if}
+        {/if}
       </div>
 
-      <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
+      {#if giftCardApplied?.paymentType === 'gift_card_only'}
+        <div class="flex justify-between py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+          Fully covered by gift card
+        </p>
+      {:else}
+        <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+          <span>Total</span><span>${total.toFixed(2)}</span>
+        </div>
+      {/if}
     {/if}
 
     {#if totalQuantity > 0 && btnText === 'Place order'}
@@ -322,11 +360,33 @@
         <div class="flex justify-between">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
+        {#if giftCardApplied}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Gift Card Applied</span>
+            <span>-${giftCardAmountDisplay}</span>
+          </div>
+          {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
+            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+              <span>Gift card balance after order</span>
+              <span>${giftCardRemainingBalance}</span>
+            </div>
+          {/if}
+        {/if}
       </div>
 
-      <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
+      {#if giftCardApplied?.paymentType === 'gift_card_only'}
+        <div class="flex justify-between py-5 border-t border-gray-200 dark:border-gray-600">
+          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+          Fully covered by gift card
+        </p>
+      {:else}
+        <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
+          <span>Total</span><span>${total.toFixed(2)}</span>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts

@@ -18,6 +18,7 @@ declare const OrderSummary: import("svelte").Component<{
     elements?: any;
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
+    giftCardApplied?: any;
 }, {}, "">;
 type $$ComponentProps = {
     loading?: boolean;
@@ -34,5 +35,6 @@ type $$ComponentProps = {
     elements?: any;
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
+    giftCardApplied?: any;
 };
 //# sourceMappingURL=OrderSummary.svelte.d.ts.map

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAoVA;cApU+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoUnT;wBApUxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAgZA;cAhY+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;sBAAoB,GAAG;WAgY1U;wBAhYxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAA;CAAE"}

package/dist/primitives/Button/Button.spec.js

@@ -103,54 +103,56 @@ describe('Button Sizes', () => {
   test('Full width size', () => {
     const { button } = setupTest({ size: 'full' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
   });
 
   test('Full width on mobile, auto on desktop', () => {
     const { button } = setupTest({ size: 'full-md-auto' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('md:w-auto');
   });
 
   test('XL size', () => {
     const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('h-12');
     expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('py-3.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Large size', () => {
     const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Medium size (default)', () => {
     const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('h-10');
     expect(button).toHaveClass('px-4');
-    expect(button).toHaveClass('py-2.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Small size', () => {
     const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('h-9');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-2');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Extra small size', () => {
     const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('h-8');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-1.5');
     expect(button).toHaveClass('text-xs');
   });
 
   test('Half width size', () => {
     const { button } = setupTest({ size: 'half' });
     expect(button).toHaveClass('w-1/2');
+    expect(button).toHaveClass('h-10');
   });
 });
 

package/dist/primitives/Input/Input.svelte

@@ -342,7 +342,7 @@
     {:else}
       <div class="relative flex items-center w-full">
         {#if leftIcon}
-          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+          <div class="absolute left-3 inset-y-0 flex items-center text-gray-400 z-10 pointer-events-none">
             {@render leftIcon()}
           </div>
         {/if}

package/dist/tokens/__tests__/sizing.test.js

@@ -22,9 +22,8 @@ describe('sizing tokens', () => {
             expect(formInputSizes.md).toContain('h-10');
             expect(formInputSizes.lg).toContain('h-12');
         });
-        it('includes padding and text size classes', () => {
+        it('includes horizontal padding and text size classes', () => {
             for (const size of Object.values(formInputSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -39,14 +38,13 @@ describe('sizing tokens', () => {
             expect(formControlSizes).toHaveProperty('md');
             expect(formControlSizes).toHaveProperty('lg');
         });
-        it('does NOT include height classes (for flexible controls)', () => {
+        it('includes explicit height classes for toolbar alignment', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).not.toMatch(/h-\d/);
+                expect(size).toMatch(/h-\d+/);
             }
         });
         it('includes padding and text size classes', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -170,11 +168,11 @@ describe('sizing tokens', () => {
             expect(buttonSizes).toHaveProperty('full-md-auto');
             expect(buttonSizes).toHaveProperty('half');
         });
-        it('standard sizes include padding and text sizing', () => {
+        it('standard sizes include explicit height, padding and text sizing', () => {
             const standardSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
             for (const size of standardSizes) {
+                expect(buttonSizes[size]).toMatch(/h-\d+/);
                 expect(buttonSizes[size]).toMatch(/px-\d/);
-                expect(buttonSizes[size]).toMatch(/py-\d/);
                 expect(buttonSizes[size]).toMatch(/text-(xs|sm)/);
             }
         });

package/dist/tokens/sizing.d.ts

@@ -6,21 +6,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 declare const formInputSizes: {
-    readonly sm: "py-2 px-3 text-sm h-9";
-    readonly md: "py-2.5 px-4 text-sm h-10";
-    readonly lg: "py-3 px-4 text-base h-12";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly 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 declare const formControlSizes: {
-    readonly sm: "py-2 px-3 text-sm";
-    readonly md: "py-2.5 px-4 text-sm";
-    readonly lg: "py-3 px-4 text-base";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-4 text-base";
 };
 export type FormInputSize = keyof typeof formInputSizes;
 export type FormControlSize = keyof typeof formControlSizes;
@@ -63,18 +63,19 @@ export declare const skeletonSizes: {
 };
 export type SkeletonSize = keyof typeof skeletonSizes;
 /**
- * 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 declare const buttonSizes: {
-    readonly xs: "px-3 py-1.5 text-xs";
-    readonly sm: "px-3 py-2 text-sm";
-    readonly md: "px-4 py-2.5 text-sm";
-    readonly lg: "px-5 py-3 text-sm";
-    readonly xl: "px-6 py-3.5 text-sm";
-    readonly 'xl-medium': "w-full px-6 py-3.5 text-sm";
-    readonly full: "w-full px-5 py-3 text-sm";
-    readonly 'full-md-auto': "w-full px-5 py-3 text-sm md:w-auto";
-    readonly half: "w-1/2 px-4 py-2.5 text-sm";
+    readonly xs: "h-8 px-3 text-xs";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-11 px-5 text-sm";
+    readonly xl: "h-12 px-6 text-sm";
+    readonly 'xl-medium': "w-full h-12 px-6 text-sm";
+    readonly full: "w-full h-11 px-5 text-sm";
+    readonly 'full-md-auto': "w-full h-11 px-5 text-sm md:w-auto";
+    readonly half: "w-1/2 h-10 px-4 text-sm";
     readonly landing: "h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg";
 };
 /**

package/dist/tokens/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}

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.14.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",