feat(segment, segment-button): update segment value property to accept numbers (#27222)

Issue number: resolves #27221

---------

## What is the current behavior?

The value property of the segment component in Ionic Framework currently
only accepts string values.

## What is the new behavior?

This pull request updates the "value" property of the segment component
to accept a union of string and number types. This allows for more
versatile data input in the segment component, particularly for users
who work with numerical data.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

N/A

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

@@ -6,6 +6,7 @@ import { addEventListener, removeEventListener, inheritAttributes } from '@utils
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
+import type { SegmentValue } from '../segment/segment-interface';
 
 import type { SegmentButtonLayout } from './segment-button-interface';
 
@@ -53,7 +54,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   /**
    * The value of the segment button.
    */
-  @Prop() value: string = 'ion-sb-' + ids++;
+  @Prop() value: SegmentValue = 'ion-sb-' + ids++;
   @Watch('value')
   valueChanged() {
     this.updateState();

core/src/components/segment/segment-interface.ts

@@ -1,7 +1,9 @@
 export type SegmentButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 
+export type SegmentValue = string | number;
+
 export interface SegmentChangeEventDetail {
-  value?: string;
+  value?: SegmentValue;
 }
 
 export interface SegmentCustomEvent extends CustomEvent {

core/src/components/segment/segment.tsx

@@ -9,7 +9,7 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 
-import type { SegmentChangeEventDetail } from './segment-interface';
+import type { SegmentChangeEventDetail, SegmentValue } from './segment-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -26,7 +26,7 @@ export class Segment implements ComponentInterface {
   private gesture?: Gesture;
 
   // Value before the segment is dragged
-  private valueBeforeGesture?: string;
+  private valueBeforeGesture?: SegmentValue;
 
   @Element() el!: HTMLIonSegmentElement;
 
@@ -76,10 +76,10 @@ export class Segment implements ComponentInterface {
   /**
    * the value of the segment.
    */
-  @Prop({ mutable: true }) value?: string;
+  @Prop({ mutable: true }) value?: SegmentValue;
 
   @Watch('value')
-  protected valueChanged(value: string | undefined) {
+  protected valueChanged(value: SegmentValue | undefined) {
     /**
      * `ionSelect` is emitted every time the value changes (internal or external changes).
      * Used by `ion-segment-button` to determine if the button should be checked.