feat(components): add missing button/a props to components that render them (#17883)

Adds the following properties to the components listed under them:

`rel`, `download`, `target`:
- anchor
- button
- card
- fab-button
- item-option
- item
- tab-button

`disabled`:
- back-button
- menu-button

`type`:
- back-button
- item-option
- menu-button
- segment-button

fixes #16848 closes #16889


Co-authored-by: bitflower <matthias.max@bitflower.net>

core/src/components/segment-button/readme.md

@@ -629,6 +629,7 @@ export default Example;
 | `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean`                                                                                               | `false`               |
 | `layout`   | `layout`   | Set the layout of the text and icon in the segment.          | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'`          |
 | `mode`     | `mode`     | The mode determines which platform styles to use.            | `"ios" \| "md"`                                                                                         | `undefined`           |
+| `type`     | `type`     | The type of the button.                                      | `"button" \| "reset" \| "submit"`                                                                       | `'button'`            |
 | `value`    | `value`    | The value of the segment button.                             | `string`                                                                                                | `'ion-sb-' + (ids++)` |
 
 

core/src/components/segment-button/segment-button.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
 import { Mode, SegmentButtonLayout } from '../../interface';
+import { ButtonInterface } from '../../utils/element-interface';
 
 let ids = 0;
 
@@ -12,7 +13,7 @@ let ids = 0;
   },
   shadow: true
 })
-export class SegmentButton implements ComponentInterface {
+export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   @Element() el!: HTMLElement;
 
@@ -36,6 +37,11 @@ export class SegmentButton implements ComponentInterface {
    */
   @Prop() layout?: SegmentButtonLayout = 'icon-top';
 
+  /**
+   * The type of the button.
+   */
+  @Prop() type: 'submit' | 'reset' | 'button' = 'button';
+
   /**
    * The value of the segment button.
    */
@@ -88,7 +94,7 @@ export class SegmentButton implements ComponentInterface {
   render() {
     return [
       <button
-        type="button"
+        type={this.type}
         aria-pressed={this.checked ? 'true' : null}
         class="button-native"
         disabled={this.disabled}