fix(item-option): add styling for slots other than icon-only (#17711)

styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪

closes #17737 fixes #17402

core/src/components/item-option/item-option.scss

@@ -38,6 +38,8 @@
   @include text-inherit();
   @include padding(0, .7em);
 
+  display: inline-block;
+
   position: relative;
 
   width: 100%;
@@ -51,13 +53,14 @@
 
   cursor: pointer;
   appearance: none;
+
+  box-sizing: border-box;
 }
 
 .button-inner {
   display: flex;
 
-  flex-direction: column;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -66,6 +69,29 @@
   height: 100%;
 }
 
+.horizontal-wrapper {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+}
+
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+::slotted([slot="start"]) {
+  @include margin(0, 5px, 0, 0);
+}
+
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, 5px);
+}
+
 ::slotted([slot="icon-only"]) {
   @include padding(0);
   @include margin(0, 10px);

core/src/components/item-option/item-option.tsx

@@ -80,12 +80,14 @@ export class ItemOption implements ComponentInterface {
         href={this.href}
       >
         <span class="button-inner">
-          <slot name="start"></slot>
-          <slot name="top" />
-          <slot name="icon-only" />
-          <slot></slot>
-          <slot name="bottom" />
-          <slot name="end"></slot>
+          <slot name="top"></slot>
+          <div class="horizontal-wrapper">
+            <slot name="start"></slot>
+            <slot name="icon-only"></slot>
+            <slot></slot>
+            <slot name="end"></slot>
+          </div>
+          <slot name="bottom"></slot>
         </span>
         {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </TagType>