feat(segment-view): support disabled

core/src/components.d.ts

@@ -2719,6 +2719,10 @@ export namespace Components {
     interface IonSegmentContent {
     }
     interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled": boolean;
         "setContent": (id: string) => Promise<void>;
     }
     interface IonSelect {
@@ -7498,6 +7502,10 @@ declare namespace LocalJSX {
     interface IonSegmentContent {
     }
     interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled"?: boolean;
     }
     interface IonSelect {
         /**

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

@@ -20,3 +20,12 @@
 :host::-webkit-scrollbar {
   display: none;
 }
+
+:host(.segment-view-disabled) {
+  scroll-snap-type: none;
+
+  touch-action: none;
+  overflow-x: hidden;
+
+  opacity: 0.7;
+}

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, Method, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Method, Prop, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-segment-view',
@@ -9,6 +9,11 @@ import { Component, Element, Host, Listen, Method, h } from '@stencil/core';
 export class SegmentView implements ComponentInterface {
   @Element() el!: HTMLElement;
 
+  /**
+   * If `true`, the segment view cannot be interacted with.
+   */
+  @Prop() disabled = false;
+
   @Listen('scroll')
   handleScroll(ev: any) {
     const { scrollLeft, offsetWidth } = ev.target;
@@ -59,8 +64,14 @@ export class SegmentView implements ComponentInterface {
   }
 
   render() {
+    const { disabled } = this;
+
     return (
-      <Host>
+      <Host
+        class={{
+          'segment-view-disabled': disabled,
+        }}
+      >
         <slot></slot>
       </Host>
     );

core/src/components/segment-view/test/basic/index.html

@@ -55,6 +55,25 @@
           <ion-segment-content id="free">Free</ion-segment-content>
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
+
+        <ion-toolbar>
+          <ion-segment disabled color="danger">
+            <ion-segment-button content-id="bookmarks" value="Bookmarks">
+              <ion-label>Bookmarks</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="reading-list" value="Reading List">
+              <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="shared-links" value="Shared Links">
+              <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-segment-view disabled>
+          <ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
+          <ion-segment-content id="reading-list">Reading List</ion-segment-content>
+          <ion-segment-content id="shared-links">Shared Links</ion-segment-content>
+        </ion-segment-view>
       </ion-content>
 
       <ion-footer>

packages/angular/src/directives/proxies.ts

@@ -2027,6 +2027,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
+  inputs: ['disabled'],
   methods: ['setContent']
 })
 @Component({
@@ -2034,7 +2035,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['disabled'],
 })
 export class IonSegmentView {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -1865,6 +1865,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSegmentView,
+  inputs: ['disabled'],
   methods: ['setContent']
 })
 @Component({
@@ -1872,7 +1873,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['disabled'],
   standalone: true
 })
 export class IonSegmentView {

packages/vue/src/proxies.ts

@@ -758,7 +758,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
 export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent);
 
 
-export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView);
+export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
+  'disabled'
+]);
 
 
 export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSelect["value"]>('ion-select', defineIonSelect, [