@ionic/core 8.8.4-dev.11776178970.14763043 → 8.8.4-dev.11776186452.1cc0af05

package/dist/types/components/select/select-interface.d.ts

@@ -1,3 +1,6 @@
+import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
+import type { AlertInput } from '../alert/alert-interface';
+import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
 export type SelectInterface = 'action-sheet' | 'popover' | 'alert' | 'modal';
 export type SelectCompareFn = (currentValue: any, compareValue: any) => boolean;
 export interface SelectChangeEventDetail<T = any> {
@@ -7,3 +10,21 @@ export interface SelectCustomEvent<T = any> extends CustomEvent {
     detail: SelectChangeEventDetail<T>;
     target: HTMLIonSelectElement;
 }
+export interface SelectActionSheetButton extends Omit<ActionSheetButton, 'text'> {
+    text?: string | HTMLElement;
+    startContent?: HTMLElement;
+    endContent?: HTMLElement;
+    description?: string;
+}
+export interface SelectAlertInput extends Omit<AlertInput, 'label'> {
+    label?: string | HTMLElement;
+    startContent?: HTMLElement;
+    endContent?: HTMLElement;
+    description?: string;
+}
+export interface SelectOverlayOption extends Omit<SelectPopoverOption, 'text'> {
+    text?: string | HTMLElement;
+    startContent?: HTMLElement;
+    endContent?: HTMLElement;
+    description?: string;
+}

package/dist/types/components/select/select.d.ts

@@ -33,6 +33,7 @@ export declare class Select implements ComponentInterface {
     private notchSpacerEl;
     private validationObserver?;
     private notchController?;
+    private customHTMLEnabled;
     el: HTMLIonSelectElement;
     isExpanded: boolean;
     /**
@@ -250,6 +251,12 @@ export declare class Select implements ComponentInterface {
      * was passed.
      */
     private get labelText();
+    /**
+     * Returns the text to display in the select based on the selected value.
+     *
+     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+     */
     private getText;
     private setFocus;
     private emitStyle;

package/dist/types/components/select-option/select-option.d.ts

@@ -14,5 +14,9 @@ export declare class SelectOption implements ComponentInterface {
      * The text value of the option.
      */
     value?: any | null;
+    /**
+     * Text that is placed underneath the option text to provide additional details about the option.
+     */
+    description?: string;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -3813,6 +3813,10 @@ export namespace Components {
         "options": SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -9751,6 +9755,10 @@ declare namespace LocalJSX {
         "options"?: SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -11068,6 +11076,7 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
+        "description": string;
     }
     interface IonSelectPopoverAttributes {
         "header": string;

package/dist/types/utils/select-option-render.d.ts

@@ -0,0 +1,26 @@
+interface RichContentOption {
+    /** Unique identifier for stable virtual DOM keys across re-renders. */
+    id: string;
+    /** The main label for the option as a string or an HTMLElement. */
+    label?: string | HTMLElement;
+    /** Content to display at the start of the option. */
+    startContent?: HTMLElement;
+    /** Content to display at the end of the option. */
+    endContent?: HTMLElement;
+    /** A description for the option. */
+    description?: string;
+}
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Uses span elements because this content may render within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ */
+export declare const renderOptionLabel: (option: RichContentOption, className: string) => HTMLElement;
+export {};