add segmentViewId to link segment w/ segment-view

core/src/components.d.ts

@@ -2676,6 +2676,7 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
+        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */
@@ -7491,6 +7492,7 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
+        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */

core/src/components/segment/segment.tsx

@@ -33,6 +33,8 @@ export class Segment implements ComponentInterface {
 
   @State() activated = false;
 
+  @Prop() segmentViewId?: string;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -153,7 +155,10 @@ export class Segment implements ComponentInterface {
   connectedCallback() {
     this.emitStyle();
 
-    this.segmentViewEl = this.getSegmentView();
+    const segmentViewEl = this.getSegmentView();
+    if (segmentViewEl) {
+      this.segmentViewEl = segmentViewEl;
+    }
 
     if (this.segmentViewEl) {
       this.getButtons().forEach((ref) => (ref.hasIndicator = false));
@@ -370,6 +375,14 @@ export class Segment implements ComponentInterface {
   }
 
   private getSegmentView() {
+    if (this.segmentViewId) {
+      const segmentView = document.getElementById(this.segmentViewId);
+
+      if (segmentView && segmentView.tagName === 'ION-SEGMENT-VIEW') {
+        return segmentView as HTMLIonSegmentViewElement;
+      }
+    }
+
     const buttons = this.getButtons();
     // Get the first button with a contentId
     const firstContentId = buttons.find((button: HTMLIonSegmentButtonElement) => button.contentId);
@@ -540,7 +553,7 @@ export class Segment implements ComponentInterface {
     }
 
     const content = document.getElementById(button.contentId);
-    const segmentView = content?.closest('ion-segment-view');
+    const segmentView = this.segmentViewEl ?? content?.closest('ion-segment-view');
 
     if (segmentView) {
       segmentView.setContent(button.contentId, smoothScroll);

packages/angular/src/directives/proxies.ts

@@ -1952,14 +1952,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
   selector: 'ion-segment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value'],
 })
 export class IonSegment {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -732,6 +732,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
 
 
 export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonSegment["value"]>('ion-segment', defineIonSegment, [
+  'segmentViewId',
   'color',
   'disabled',
   'scrollable',