diff --git a/.changeset/five-geese-serve.md b/.changeset/five-geese-serve.md
new file mode 100644
index 0000000000..8cb149d8fc
--- /dev/null
+++ b/.changeset/five-geese-serve.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding size for square variant of SfButton changed
diff --git a/.changeset/flat-radios-do.md b/.changeset/flat-radios-do.md
new file mode 100644
index 0000000000..361c16f666
--- /dev/null
+++ b/.changeset/flat-radios-do.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - removed flex classes from wrapper for slot in SfListItem
diff --git a/.changeset/fresh-emus-care.md b/.changeset/fresh-emus-care.md
new file mode 100644
index 0000000000..277858e08b
--- /dev/null
+++ b/.changeset/fresh-emus-care.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding left and right in SfSelect changed from 14px and 16px to 12px
diff --git a/.changeset/mighty-monkeys-occur.md b/.changeset/mighty-monkeys-occur.md
new file mode 100644
index 0000000000..6dec991b4c
--- /dev/null
+++ b/.changeset/mighty-monkeys-occur.md
@@ -0,0 +1,8 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+BREAKING CHANGE: Deprecated option `arrowKeysOn` from `useTrapFocus` is removed.
+This option was separated and replaced by two more specialised options `arrowKeysLeftRight` and `arrowKeysUpDown`.
+In order to migrate please one of those options or both.
diff --git a/apps/docs/components/hooks/useTrapFocus.md b/apps/docs/components/hooks/useTrapFocus.md
index 5d681c7be6..7be5b1f926 100644
--- a/apps/docs/components/hooks/useTrapFocus.md
+++ b/apps/docs/components/hooks/useTrapFocus.md
@@ -73,11 +73,6 @@ useTrapFocus(focusTrapElementRef)
 
 :::::: slot api
 
-<!-- TODO: remove arrowKeysOn before 3.0.0 release -->
-::: warning DEPRECATION
-Parameter `arrowKeysOn` will be deprecated since version 2.3 and removed in next major version.
-:::
-
 ## Parameters
 
 | Name      | Type                  | Default value | Description |
@@ -98,7 +93,6 @@ Parameter `arrowKeysOn` will be deprecated since version 2.3 and removed in next
 | activeState  | `boolean` | `true`              | Mount `useTrapFocus` when active is `true`  |
 <!-- end react -->
 | initialFocus    | `number | 'autofocus' | 'container'` | `0`       | index number of desired focus element on init, `autofocus` for first marked element with attribute `autofocus`, `container` so `refElement` would be initially focused, `false` for disabling this option  |
-| arrowKeysOn | `boolean`    | `false`      | (deprecated) Enable/Disable possibility of using keyboard arrows `left`/`right` for jumping through focusable elements              |
 | arrowKeysLeftRight | `boolean`    | `false`      | Enable/Disable possibility of using keyboard arrows `left | up`/`right | down` for jumping through focusable elements              |
 | arrowKeysUpDown | `boolean`    | `false`      | Enable/Disable possibility of using keyboard arrows `up`/`down` for jumping through focusable elements              |
 | initialFocusContainerFallback | `boolean`  | `false`     | Fallback for initial focus           |
diff --git a/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx b/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx
index 42df12a37f..4ec85d535b 100644
--- a/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx
+++ b/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx
@@ -39,7 +39,7 @@ export default function DeliveryOptions() {
           className="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
         >
           {name}
-          <span className="text-xs text-gray-500 break-words">{date}</span>
+          <span className="block text-xs text-gray-500 break-words">{date}</span>
         </SfListItem>
       ))}
     </div>
diff --git a/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx b/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx
index b81380cb1a..986bef3f15 100644
--- a/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx
+++ b/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx
@@ -5,11 +5,11 @@ import { SfListItem, SfCounter, SfIconChevronRight, SfIconTune } from '@storefro
 export default function ListItemSlots() {
   return (
     <SfListItem className="max-w-sm" slotPrefix={<SfIconTune />} slotSuffix={<SfIconChevronRight />}>
-      <div className="break-words">
+      <span className="break-words">
         Label
         <SfCounter className="ml-2">123</SfCounter>
-      </div>
-      <span className="text-xs break-words text-neutral-500">Secondary text</span>
+      </span>
+      <span className="block text-xs break-words text-neutral-500">Secondary text</span>
     </SfListItem>
   );
 }
diff --git a/apps/preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx b/apps/preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx
index b636eefb47..79bd53a593 100644
--- a/apps/preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx
+++ b/apps/preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx
@@ -42,7 +42,8 @@ export default function SelectDropdownDisabled() {
   const { refs, style: dropdownStyle } = useDropdown({ isOpen, onClose: close });
 
   useTrapFocus(refs.floating, {
-    arrowKeysOn: true,
+    arrowKeysLeftRight: true,
+    arrowKeysUpDown: true,
     activeState: isOpen,
     initialFocusContainerFallback: true,
   });
diff --git a/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue b/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue
index fd0f1efa78..446437f530 100644
--- a/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue
+++ b/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue
@@ -6,7 +6,7 @@
     class="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
   >
     {{ name }}
-    <span class="text-xs text-gray-500 break-words">{{ date }}</span>
+    <span class="block text-xs text-gray-500 break-words">{{ date }}</span>
     <template #prefix>
       <SfRadio v-model="radioModel" :value="name" name="delivery-options" />
     </template>
diff --git a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
index c84cbcc852..6f752303b2 100644
--- a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
+++ b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
@@ -548,7 +548,8 @@ const {
 });
 
 useTrapFocus(floatingRef as Ref<HTMLUListElement>, {
-  arrowKeysOn: true,
+  arrowKeysLeftRight: true,
+  arrowKeysUpDown: true,
   activeState: dropdownOpen,
   initialFocusContainerFallback: true,
 });
diff --git a/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue b/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue
index f39ac25a54..af411705aa 100644
--- a/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue
+++ b/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue
@@ -5,7 +5,7 @@
       Label
       <SfCounter class="ml-2">123</SfCounter>
     </span>
-    <span class="text-xs break-words text-neutral-500">Secondary text</span>
+    <span class="block text-xs break-words text-neutral-500">Secondary text</span>
     <template #suffix><SfIconChevronRight /></template>
   </SfListItem>
 </template>
diff --git a/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx b/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
index 92503048b5..179b2b2109 100644
--- a/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
+++ b/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
@@ -17,7 +17,7 @@ const getSizeClasses = (size: SfButtonProps['size'], square: SfButtonProps['squa
     case SfButtonSize.sm:
       return [square ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }
diff --git a/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx b/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
index bc423f0392..3139192b08 100644
--- a/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
+++ b/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
@@ -42,7 +42,7 @@ const SfListItem = polymorphicForwardRef<typeof defaultListItemTag, SfListItemPr
       {...attributes}
     >
       {slotPrefix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotPrefix}</span>}
-      <span className="flex flex-col w-full min-w-0">{children}</span>
+      <span className="w-full min-w-0">{children}</span>
       {slotSuffix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotSuffix}</span>}
     </Tag>
   );
diff --git a/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx b/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
index 2bc94059d0..4d0c779ad5 100644
--- a/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
+++ b/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
@@ -45,7 +45,7 @@ export default function SfSelect(props: SfSelectProps) {
         required={required}
         disabled={disabled}
         className={classNames(
-          'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+          'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
           {
             'py-1.5': size === SfSelectSize.sm,
             'py-2': size === SfSelectSize.base,
diff --git a/packages/sfui/frameworks/react/hooks/useTrapFocus/useTrapFocus.ts b/packages/sfui/frameworks/react/hooks/useTrapFocus/useTrapFocus.ts
index 86e4845524..c4f5368796 100644
--- a/packages/sfui/frameworks/react/hooks/useTrapFocus/useTrapFocus.ts
+++ b/packages/sfui/frameworks/react/hooks/useTrapFocus/useTrapFocus.ts
@@ -15,11 +15,6 @@ type UseTrapFocusOptions = TabbableOptions &
     activeState?: boolean;
     initialFocus?: number | `${InitialFocusType}` | false;
     initialFocusContainerFallback?: boolean;
-    /**
-     * Enabling both `left` | `up` | `right` | `down` arrow keys.
-     * @deprecated Since version 2.3. Use arrowKeysLeftRight or/and arrowKeysUpDown options instead.
-     */
-    arrowKeysOn?: boolean;
     arrowKeysLeftRight?: boolean;
     arrowKeysUpDown?: boolean;
   };
@@ -29,7 +24,6 @@ const defaultOptions = {
   activeState: true,
   initialFocus: 0,
   initialFocusContainerFallback: false,
-  arrowKeysOn: false,
   arrowKeysLeftRight: false,
   arrowKeysUpDown: false,
 };
@@ -41,7 +35,6 @@ export const useTrapFocus = (containerElementRef: RefObject<HTMLElement | null>,
     includeContainer,
     activeState,
     initialFocus,
-    arrowKeysOn,
     arrowKeysLeftRight,
     arrowKeysUpDown,
     initialFocusContainerFallback,
@@ -86,9 +79,6 @@ export const useTrapFocus = (containerElementRef: RefObject<HTMLElement | null>,
         arrowFocusGroupSelector && containerElementRef.current?.querySelector(arrowFocusGroupSelector);
       const additionalData = isAnyGroupElement ? { arrowFocusGroupSelector } : {};
 
-      if (arrowKeysOn && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) focusPreviousItem({ additionalData });
-      if (arrowKeysOn && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) focusNextItem({ additionalData });
-
       if (arrowKeysLeftRight && event.key === 'ArrowLeft') focusPreviousItem({ additionalData });
       if (arrowKeysLeftRight && event.key === 'ArrowRight') focusNextItem({ additionalData });
       if (arrowKeysUpDown && event.key === 'ArrowUp') focusPreviousItem({ additionalData });
diff --git a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
index 6cff5a0e95..759f0b1b6f 100644
--- a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
+++ b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
@@ -43,7 +43,7 @@ const sizeClasses = computed(() => {
     case SfButtonSize.sm:
       return [square.value ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square.value ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square.value ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square.value ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }
diff --git a/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue b/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
index 28f4138c32..8549b9c29f 100644
--- a/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
+++ b/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
@@ -44,7 +44,7 @@ defineProps({
     <span v-if="$slots.prefix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
       <slot name="prefix" />
     </span>
-    <span class="flex flex-col w-full min-w-0">
+    <span class="w-full min-w-0">
       <slot />
     </span>
     <span v-if="$slots.suffix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
diff --git a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
index 1d0b1d2a14..dcfa6b0218 100644
--- a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
+++ b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
@@ -73,7 +73,7 @@ const changedValue = (event: Event) => {
       :required="required"
       :disabled="disabled"
       :class="[
-        'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+        'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
         {
           'py-1.5': size === SfSelectSize.sm,
           'py-2': size === SfSelectSize.base,
diff --git a/packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts b/packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts
index 620804f1ff..546d1717af 100644
--- a/packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts
+++ b/packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts
@@ -16,11 +16,6 @@ type UseTrapFocusOptions = TabbableOptions &
     activeState?: Ref<boolean>;
     initialFocus?: number | `${InitialFocusType}` | false;
     initialFocusContainerFallback?: boolean;
-    /**
-     * Enabling both `left` | `up` | `right` | `down` arrow keys.
-     * @deprecated Since version 2.3. Use arrowKeysLeftRight or/and arrowKeysUpDown options instead.
-     */
-    arrowKeysOn?: boolean;
     arrowKeysLeftRight?: boolean;
     arrowKeysUpDown?: boolean;
   };
@@ -38,7 +33,6 @@ const defaultOptions = {
   activeState: ref(true),
   initialFocus: 0,
   initialFocusContainerFallback: false,
-  arrowKeysOn: false,
   arrowKeysLeftRight: false,
   arrowKeysUpDown: false,
 };
@@ -53,7 +47,6 @@ export const useTrapFocus = (
     includeContainer,
     activeState,
     initialFocus,
-    arrowKeysOn,
     arrowKeysLeftRight,
     arrowKeysUpDown,
     initialFocusContainerFallback,
@@ -101,9 +94,6 @@ export const useTrapFocus = (
     const isAnyGroupElement = arrowFocusGroupSelector && containerHTMLElement?.querySelector(arrowFocusGroupSelector);
     const additionalData = isAnyGroupElement ? { arrowFocusGroupSelector } : {};
 
-    if (arrowKeysOn && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) focusPreviousItem({ additionalData });
-    if (arrowKeysOn && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) focusNextItem({ additionalData });
-
     if (arrowKeysLeftRight && event.key === 'ArrowLeft') focusPreviousItem({ additionalData });
     if (arrowKeysLeftRight && event.key === 'ArrowRight') focusNextItem({ additionalData });
     if (arrowKeysUpDown && event.key === 'ArrowUp') focusPreviousItem({ additionalData });
diff --git a/packages/tests/components/SfButton/SfButton.PageObject.ts b/packages/tests/components/SfButton/SfButton.PageObject.ts
index bd2c930c02..ba96242ed3 100644
--- a/packages/tests/components/SfButton/SfButton.PageObject.ts
+++ b/packages/tests/components/SfButton/SfButton.PageObject.ts
@@ -11,8 +11,13 @@ export default class SfButtonBaseObject extends BasePage {
     return this;
   }
 
-  isSquare(value) {
+  hasClass(value: string) {
     this.container.should('have.class', value);
     return this;
   }
+
+  doesNotHaveType() {
+    this.container.should('not.have.attr', 'type');
+    return this;
+  }
 }
diff --git a/packages/tests/components/SfButton/SfButton.cy.tsx b/packages/tests/components/SfButton/SfButton.cy.tsx
index 34caafd638..efd4468851 100644
--- a/packages/tests/components/SfButton/SfButton.cy.tsx
+++ b/packages/tests/components/SfButton/SfButton.cy.tsx
@@ -22,15 +22,17 @@ describe('SfButton', () => {
     slotPrefix?: boolean;
     slotSuffix?: boolean;
     slotDefault?: boolean;
+    tag?: string;
   };
   const initializeComponent = ({
-    size = SfButtonSize.base,
-    variant = SfButtonVariant.primary,
+    size,
+    variant,
     disabled,
     square,
     slotPrefix,
     slotSuffix,
     slotDefault = true,
+    tag,
   }: InitializeComponentParams = {}) => {
     return mount({
       vue: {
@@ -46,6 +48,7 @@ describe('SfButton', () => {
           variant,
           disabled,
           square,
+          tag,
         },
         slots: {
           ...(slotPrefix && { prefix: '<SfIconCheckCircleVue/>' }),
@@ -61,6 +64,7 @@ describe('SfButton', () => {
           square={square}
           slotPrefix={slotPrefix && <SfIconCheckCircleReact />}
           slotSuffix={slotSuffix && <SfIconIndeterminateCheckBoxReact />}
+          as={tag}
         >
           {slotDefault ? slotDefaultContent : undefined}
         </SfButtonReact>
@@ -90,6 +94,24 @@ describe('SfButton', () => {
     });
   });
 
+  const squarePaddingsToSize = {
+    [SfButtonSize.sm]: 'p-1.5',
+    [SfButtonSize.lg]: 'p-3',
+    [SfButtonSize.base]: 'p-2',
+  };
+
+  describe('when prop square=true and size is set to ', () => {
+    Object.values(SfButtonSize).forEach((componentSize) => {
+      describe(`${componentSize}`, () => {
+        it(`should render correct square ${componentSize} size`, () => {
+          initializeComponent({ size: componentSize, square: true });
+
+          page().hasClass(squarePaddingsToSize[componentSize]).makeSnapshot();
+        });
+      });
+    });
+  });
+
   describe('when prop variant is set to ', () => {
     Object.values(SfButtonVariant).forEach((componentVariant) => {
       describe(`${componentVariant}`, () => {
@@ -100,69 +122,90 @@ describe('SfButton', () => {
         });
       });
     });
+  });
 
-    describe('when prop disabled=true', () => {
-      it(`should render as disabled`, () => {
-        initializeComponent({ disabled: true });
+  describe('when no size specified via props', () => {
+    it(`should init with SfButtonSize.base size`, () => {
+      initializeComponent();
 
-        page().isDisabled().makeSnapshot();
-      });
+      page().hasClass('py-2').hasClass('leading-6').hasClass('px-4').hasClass('gap-2').makeSnapshot();
     });
+  });
 
-    describe('when prop square=true', () => {
-      it(`should render as square button`, () => {
-        initializeComponent({ square: true, size: SfButtonSize.base });
+  describe('when no variant specified via props', () => {
+    it(`should init with SfButtonVariant.primary variant`, () => {
+      initializeComponent();
 
-        page().isSquare('p-2').makeSnapshot();
-      });
+      page()
+        .hasClass('bg-primary-700')
+        .hasClass('hover:bg-primary-800')
+        .hasClass('active:bg-primary-900')
+        .hasClass('disabled:bg-disabled-300')
+        .makeSnapshot();
     });
+  });
 
-    describe('when only prefix', () => {
-      it(`should render square button`, () => {
-        initializeComponent({ slotPrefix: true, slotDefault: false });
+  describe('when prop disabled=true', () => {
+    it(`should render as disabled`, () => {
+      initializeComponent({ disabled: true });
 
-        page().makeSnapshot();
-      });
+      page().isDisabled().makeSnapshot();
+    });
+  });
+
+  describe('when only prefix', () => {
+    it(`should render square button`, () => {
+      initializeComponent({ slotPrefix: true, slotDefault: false });
+
+      page().makeSnapshot();
     });
+  });
 
-    describe('when only suffix', () => {
-      it(`should render square button`, () => {
-        initializeComponent({ slotSuffix: true, slotDefault: false });
+  describe('when only suffix', () => {
+    it(`should render square button`, () => {
+      initializeComponent({ slotSuffix: true, slotDefault: false });
 
-        page().makeSnapshot();
-      });
+      page().makeSnapshot();
     });
+  });
 
-    describe('when suffix and prefix', () => {
-      it(`should render button with same gaps`, () => {
-        initializeComponent({ slotPrefix: true, slotSuffix: true, slotDefault: false });
+  describe('when suffix and prefix', () => {
+    it(`should render button with same gaps`, () => {
+      initializeComponent({ slotPrefix: true, slotSuffix: true, slotDefault: false });
 
-        page().makeSnapshot();
-      });
+      page().makeSnapshot();
     });
+  });
 
-    describe('when suffix, content and prefix', () => {
-      it(`should render button with same gaps`, () => {
-        initializeComponent({ slotPrefix: true, slotSuffix: true, slotDefault: true });
+  describe('when suffix, content and prefix', () => {
+    it(`should render button with same gaps`, () => {
+      initializeComponent({ slotPrefix: true, slotSuffix: true, slotDefault: true });
 
-        page().makeSnapshot();
-      });
+      page().makeSnapshot();
     });
+  });
 
-    describe('when prefix and content', () => {
-      it(`should render button with prefix and content with correct gaps`, () => {
-        initializeComponent({ slotPrefix: true, slotDefault: true });
+  describe('when prefix and content', () => {
+    it(`should render button with prefix and content with correct gaps`, () => {
+      initializeComponent({ slotPrefix: true, slotDefault: true });
 
-        page().makeSnapshot();
-      });
+      page().makeSnapshot();
     });
+  });
 
-    describe('when content and suffix', () => {
-      it(`should render button with content and suffix with correct gaps`, () => {
-        initializeComponent({ slotSuffix: true, slotDefault: true });
+  describe('when content and suffix', () => {
+    it(`should render button with content and suffix with correct gaps`, () => {
+      initializeComponent({ slotSuffix: true, slotDefault: true });
 
-        page().makeSnapshot();
-      });
+      page().makeSnapshot();
+    });
+  });
+
+  describe('when tag is different than button', () => {
+    it(`should render tag without type attribute`, () => {
+      initializeComponent({ tag: 'div' });
+
+      page().doesNotHaveType().makeSnapshot();
     });
   });
 });
diff --git a/packages/tests/components/SfListItem/SfListItem.PageObject.ts b/packages/tests/components/SfListItem/SfListItem.PageObject.ts
index 2557270aeb..b485e6946f 100644
--- a/packages/tests/components/SfListItem/SfListItem.PageObject.ts
+++ b/packages/tests/components/SfListItem/SfListItem.PageObject.ts
@@ -18,11 +18,21 @@ export default class SfListItemObject extends BasePage {
     return this;
   }
 
+  hasDisabledPrefix() {
+    this.container.children().first().should('have.class', 'text-disabled-500');
+    return this;
+  }
+
   hasSuffix() {
     this.container.children().last().should('have.class', 'text-neutral-500');
     return this;
   }
 
+  hasDisabledSuffix() {
+    this.container.children().last().should('have.class', 'text-disabled-500');
+    return this;
+  }
+
   isDisabled() {
     this.container.should('have.class', 'cursor-not-allowed pointer-events-none text-disabled-900');
     return this;
diff --git a/packages/tests/components/SfListItem/SfListItem.cy.tsx b/packages/tests/components/SfListItem/SfListItem.cy.tsx
index a264a64dc6..01bad5ddf7 100644
--- a/packages/tests/components/SfListItem/SfListItem.cy.tsx
+++ b/packages/tests/components/SfListItem/SfListItem.cy.tsx
@@ -111,16 +111,44 @@ describe('SfListItem', () => {
 
       page().hasPrefix().makeSnapshot();
     });
+
+    describe('when disabled=true', () => {
+      before(() => {
+        disabled = true;
+      });
+      afterEach(() => {
+        disabled = false;
+      });
+      it('should place text-disabled-500 class on prefix element', () => {
+        initializeComponent();
+
+        page().hasDisabledPrefix().makeSnapshot();
+      });
+    });
   });
 
   describe('when only suffix', () => {
-    before(() => (slotSuffix = true));
-    after(() => (slotSuffix = false));
+    beforeEach(() => (slotSuffix = true));
+    afterEach(() => (slotSuffix = false));
     it(`should render icon in suffix slot`, () => {
       initializeComponent();
 
       page().hasSuffix().makeSnapshot();
     });
+
+    describe('when disabled=true', () => {
+      before(() => {
+        disabled = true;
+      });
+      afterEach(() => {
+        disabled = false;
+      });
+      it('should place text-disabled-500 class on suffix element', () => {
+        initializeComponent();
+
+        page().hasDisabledSuffix().makeSnapshot();
+      });
+    });
   });
 
   describe('when component is clicked', () => {
diff --git a/packages/tests/components/SfModel/SfModal.PageObject.ts b/packages/tests/components/SfModal/SfModal.PageObject.ts
similarity index 100%
rename from packages/tests/components/SfModel/SfModal.PageObject.ts
rename to packages/tests/components/SfModal/SfModal.PageObject.ts
diff --git a/packages/tests/components/SfModel/SfModal.cy.tsx b/packages/tests/components/SfModal/SfModal.cy.tsx
similarity index 95%
rename from packages/tests/components/SfModel/SfModal.cy.tsx
rename to packages/tests/components/SfModal/SfModal.cy.tsx
index b00de434c5..7f6593bcb4 100644
--- a/packages/tests/components/SfModel/SfModal.cy.tsx
+++ b/packages/tests/components/SfModal/SfModal.cy.tsx
@@ -3,15 +3,15 @@ import React from 'react';
 import { ref } from 'vue';
 import type { Ref } from 'vue';
 import { mount, useComponent, Wrapper } from '../../utils/mount';
-import SfDialogBaseObject from './SfModal.PageObject';
+import SfModalBaseObject from './SfModal.PageObject';
 import { waitForRerender } from '../../utils/waitForRerender';
 
 const { vue: SfModalVue, react: SfModalReact } = useComponent('SfModal');
 
-describe('SfDialog', () => {
+describe('SfModal', () => {
   const dialogContent = 'this is some dialog content';
 
-  const page = () => new SfDialogBaseObject('modal');
+  const page = () => new SfModalBaseObject('modal');
 
   const initializeComponent = ({
     modelValue = ref(true),