Button: Add xl size

src/components/modus-wc-button/__snapshots__/modus-wc-button.spec.ts.snap

@@ -26,3 +26,12 @@ exports[`modus-wc-button should render with disabled attribute 1`] = `
   </button>
 </modus-wc-button>
 `;
+
+exports[`modus-wc-button should render with size xl 1`] = `
+<modus-wc-button size="xl">
+  <!---->
+  <button class="modus-wc-btn modus-wc-btn-filled modus-wc-btn-primary modus-wc-btn-xl" tabindex="0" type="button">
+    XL Button
+  </button>
+</modus-wc-button>
+`;

src/components/modus-wc-button/modus-wc-button.scss

@@ -11,6 +11,13 @@ modus-wc-button .modus-wc-btn-outline {
   @include btn-state-colors;
 }
 
+modus-wc-button
+  .modus-wc-btn-xl:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
+  font-size: var(--modus-wc-font-size-2xl);
+  padding-left: var(--modus-wc-spacing-2xl);
+  padding-right: var(--modus-wc-spacing-2xl);
+}
+
 modus-wc-button .modus-wc-btn-borderless {
   @include btn-state-colors;
 
@@ -53,6 +60,11 @@ modus-wc-button .modus-wc-btn-square.modus-wc-btn-lg {
   width: var(--modus-wc-size-lg);
 }
 
+modus-wc-button .modus-wc-btn-circle.modus-wc-btn-xl,
+modus-wc-button .modus-wc-btn-square.modus-wc-btn-xl {
+  width: var(--modus-wc-size-xl);
+}
+
 [data-theme='modus-classic-light'] modus-wc-button .modus-wc-btn,
 [data-theme='modus-classic-dark'] modus-wc-button .modus-wc-btn {
   --rounded-btn: var(--modus-wc-border-radius-md);
@@ -99,6 +111,14 @@ modus-wc-button .modus-wc-btn-square.modus-wc-btn-lg {
     }
   }
 
+  &.modus-wc-btn-xl {
+    font-size: var(--modus-wc-font-size-xl);
+
+    &:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
+      padding: var(--modus-wc-spacing-lg) var(--modus-wc-spacing-2xl);
+    }
+  }
+
   // Variants
   &.modus-wc-btn-borderless {
     background-color: transparent;

src/components/modus-wc-button/modus-wc-button.spec.ts

@@ -97,6 +97,16 @@ describe('modus-wc-button', () => {
     expect(clickSpy).toHaveBeenCalled();
   });
 
+  it('should render with size xl', async () => {
+    const page = await newSpecPage({
+      components: [ModusWcButton],
+      html: '<modus-wc-button size="xl">XL Button</modus-wc-button>',
+    });
+    const button = page.root?.querySelector('button');
+    expect(button?.classList.contains('modus-wc-btn-xl')).toBe(true);
+    expect(page.root).toMatchSnapshot();
+  });
+
   it('should not emit buttonClick event on key press when disabled', async () => {
     const page = await newSpecPage({
       components: [ModusWcButton],

src/components/modus-wc-button/modus-wc-button.stories.ts

@@ -12,7 +12,7 @@ interface ButtonArgs {
   'full-width': boolean;
   pressed: boolean;
   shape: 'circle' | 'ellipse' | 'rectangle' | 'square';
-  size: DaisySize;
+  size: DaisySize | 'xl';
   type: 'button' | 'submit' | 'reset';
   variant: 'borderless' | 'filled' | 'outlined';
 }
@@ -41,7 +41,7 @@ const meta: Meta<ButtonArgs> = {
     },
     size: {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
     type: {
       control: { type: 'select' },

src/components/modus-wc-button/modus-wc-button.tailwind.ts

@@ -14,7 +14,7 @@ export const convertPropsToClasses = ({
   fullWidth?: boolean;
   pressed?: boolean;
   shape?: 'circle' | 'ellipse' | 'rectangle' | 'square';
-  size?: DaisySize;
+  size?: DaisySize | 'xl';
   variant?: 'borderless' | 'filled' | 'outlined';
 }): string => {
   let classes = '';

src/components/modus-wc-button/modus-wc-button.tsx

@@ -49,7 +49,7 @@ export class ModusWcButton {
   @Prop() shape: 'circle' | 'ellipse' | 'rectangle' | 'square' = 'rectangle';
 
   /** The size of the button. */
-  @Prop() size: DaisySize = 'md';
+  @Prop() size: DaisySize | 'xl' = 'md';
 
   /** The type of the button. */
   @Prop() type: 'button' | 'submit' | 'reset' = 'button';

src/components/modus-wc-dropdown-menu/modus-wc-dropdown-menu.stories.ts

@@ -9,7 +9,7 @@ interface DropdownMenuArgs {
   'button-aria-label'?: string;
   'button-color'?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
   'button-shape'?: 'circle' | 'ellipse' | 'rectangle' | 'square';
-  'button-size'?: DaisySize;
+  'button-size'?: DaisySize | 'xl';
   'button-variant'?: 'borderless' | 'filled' | 'outlined';
   'custom-class'?: string;
   disabled?: boolean;
@@ -43,7 +43,7 @@ const meta: Meta<DropdownMenuArgs> = {
     },
     'button-size': {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
     'button-shape': {
       control: { type: 'select' },

src/components/modus-wc-dropdown-menu/modus-wc-dropdown-menu.tsx

@@ -49,7 +49,7 @@ export class ModusWcDropdownMenu {
     'rectangle';
 
   /** The size of the button. */
-  @Prop() buttonSize?: DaisySize = 'md';
+  @Prop() buttonSize?: DaisySize | 'xl' = 'md';
 
   /** The variant of the button. */
   @Prop() buttonVariant?: 'borderless' | 'filled' | 'outlined' = 'filled';

src/components/modus-wc-handle/modus-wc-handle.stories.ts

@@ -54,7 +54,7 @@ interface HandleArgs {
   'default-split'?: number;
   density?: 'compact' | 'comfortable' | 'relaxed';
   'button-color'?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-  'button-size'?: DaisySize;
+  'button-size'?: DaisySize | 'xl';
   'button-variant'?: 'borderless' | 'filled' | 'outlined';
   'left-target'?: string;
   orientation?: Orientation;
@@ -92,7 +92,7 @@ const meta: Meta<HandleArgs> = {
     },
     'button-size': {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
     },
     'button-color': {
       control: { type: 'select' },

src/components/modus-wc-handle/modus-wc-handle.tsx

@@ -48,7 +48,7 @@ export class ModusWcHandle {
   @Prop() defaultSplit?: number = 50;
 
   /** The size of the button. */
-  @Prop() buttonSize?: DaisySize = 'md';
+  @Prop() buttonSize?: DaisySize | 'xl' = 'md';
 
   /** The color of the button. */
   @Prop() buttonColor?: