feat(segment-content): add disabled prop and hide the content

core/api.txt

@@ -1608,6 +1608,7 @@ ion-segment-button,part,indicator-background
 ion-segment-button,part,native
 
 ion-segment-content,shadow
+ion-segment-content,prop,disabled,boolean,false,false,false
 
 ion-segment-view,shadow
 ion-segment-view,prop,disabled,boolean,false,false,false

core/src/components.d.ts

@@ -2717,6 +2717,10 @@ export namespace Components {
         "value": SegmentValue;
     }
     interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled": boolean;
     }
     interface IonSegmentView {
         /**
@@ -7505,6 +7509,10 @@ declare namespace LocalJSX {
         "value"?: SegmentValue;
     }
     interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled"?: boolean;
     }
     interface IonSegmentView {
         /**

core/src/components/segment-content/segment-content.scss

@@ -8,3 +8,7 @@
 
   width: 100%;
 }
+
+:host(.segment-content-disabled) {
+  display: none;
+}

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-segment-content',
@@ -7,9 +7,20 @@ import { Component, Host, h } from '@stencil/core';
   shadow: true,
 })
 export class SegmentContent implements ComponentInterface {
+  /**
+   * If `true`, the segment content will not be displayed.
+   */
+  @Prop() disabled = false;
+
   render() {
+    const { disabled } = this;
+
     return (
-      <Host>
+      <Host
+        class={{
+          'segment-content-disabled': disabled,
+        }}
+      >
         <slot></slot>
       </Host>
     );