feat(segment): adds scrollable and layout props and updates to follow the spec (#16273)

Adds the ability to apply a layout to the segment button in order to better match the Material Design spec, updates the design and UI to match the spec more, and separates the segment button styles back into the proper directory.

- moves the segment button css back into segment-button directory
- updates the design to match the MD spec better
- adds layout property to match MD spec
- adds custom properties for better styling
- allows for overscroll / scrolling tabs via scrollable attribute
- changes the indicator to a div - will need to animate it
- updates e2e tests and add spec test

fixes #16232 fixes #16081
references #14853

BREAKING CHANGES

Segment Button now requires the text to be wrapped in an `ion-label` element for improved styling.

*Old usage:*

 ```html
<ion-segment-button>
  Item One
</ion-segment-button>
```
 *New usage:*

 ```html
<ion-segment-button>
  <ion-label>Item One</ion-label>
</ion-segment-button>
```

Note: this will not technically break your app, but the styles may look wrong.

core/src/components/segment-button/segment-button.md.vars.scss

@@ -0,0 +1,79 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+/// @prop - Opacity of the segment button
+$segment-button-md-opacity:                           .6 !default;
+
+/// @prop - Text color of the segment button
+$segment-button-md-text-color:                        rgba(var(--ion-text-color-rgb, $text-color-rgb), $segment-button-md-opacity) !default;
+
+/// @prop - Background of the segment button
+$segment-button-md-background:                        none !default;
+
+/// @prop - Background of the hovered segment button
+$segment-button-md-background-hover:                  ion-color(primary, base, .04) !default;
+
+/// @prop - Background of the activated segment button
+$segment-button-md-background-activated:              ion-color(primary, base, .16) !default;
+
+/// @prop - Width of the bottom border on the segment button
+$segment-button-md-border-bottom-width:               2px !default;
+
+/// @prop - Color of the bottom border on the segment button
+$segment-button-md-border-bottom-color:               transparent !default;
+
+/// @prop - Text color of the activated segment button
+$segment-button-md-text-color-activated:              ion-color(primary, base) !default;
+
+/// @prop - Border color of the activated segment button
+$segment-button-md-border-bottom-color-activated:     ion-color(primary, base) !default;
+
+/// @prop - Opacity of the activated segment button
+$segment-button-md-opacity-activated:                 1 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-md-opacity-disabled:                  .3 !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-md-padding-top:                       0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-md-padding-end:                       16px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-md-padding-bottom:                    $segment-button-md-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-md-padding-start:                     $segment-button-md-padding-end !default;
+
+/// @prop - Minimum height of the segment button
+$segment-button-md-min-height:                        48px !default;
+
+/// @prop - Minimum width of the segment button
+$segment-button-md-min-width:                         90px !default;
+
+/// @prop - Maximum width of the segment button
+$segment-button-md-max-width:                         360px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-md-line-height:                       40px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-md-font-size:                         14px !default;
+
+/// @prop - Letter spacing of the segment button
+$segment-button-md-letter-spacing:                    .06em !default;
+
+/// @prop - Font weight of the segment button
+$segment-button-md-font-weight:                       500 !default;
+
+/// @prop - Transition of the segment button
+$segment-button-md-transition:                        color .15s linear 0s, opacity .15s linear 0s !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-md-icon-size:                         24px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-md-icon-line-height:                  $segment-button-md-line-height !default;