@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/SegmentedButtonItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButtonItemTemplate.js","sourceRoot":"","sources":["../src/SegmentedButtonItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,2BAA2B;IAClD,OAAO,CACN,cACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gCAAgC,mBACvB,IAAI,CAAC,QAAQ,kBACd,IAAI,CAAC,SAAS,mBACb,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,0BACN,IAAI,CAAC,eAAe,8BAE1C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC3D,IAAI,CAAC,aAAa,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,aAElB,IAAI,CAAC,IAAI;gBACT,KAAC,IAAI,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,eAAe,GAChC,EAEH,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAAE,KAAK,EAAC,gCAAgC,YACtE,wBACC,gBAAa,GACR,GACA,IACH,CACL,CAAC;AACH,CAAC","sourcesContent":["import type SegmentedButtonItem from \"./SegmentedButtonItem.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {\n\treturn (\n\t\t<li\n\t\t\trole=\"option\"\n\t\t\tclass=\"ui5-segmented-button-item-root\"\n\t\t\taria-posinset={this.posInSet}\n\t\t\taria-setsize={this.sizeOfSet}\n\t\t\taria-selected={this.selected}\n\t\t\taria-disabled={this.disabled}\n\t\t\taria-roledescription={this.ariaDescription}\n\t\t\tdata-sap-focus-ref\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\ttabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }\n\t\t\taria-label={this.ariaLabelText}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t{this.icon &&\n\t\t\t\t<Icon\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\tclass=\"ui5-segmented-button-item-icon\"\n\t\t\t\t\tname={this.icon}\n\t\t\t\t\tshowTooltip={this.showIconTooltip}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t<span id={`${this._id}-content`} class=\"ui5-segmented-button-item-text\">\n\t\t\t\t<bdi>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</bdi>\n\t\t\t</span>\n\t\t</li>\n\t);\n}\n"]}
+{"version":3,"file":"SegmentedButtonItemTemplate.js","sourceRoot":"","sources":["../src/SegmentedButtonItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,2BAA2B;IAClD,OAAO,CACN,cACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gCAAgC,mBACvB,IAAI,CAAC,QAAQ,kBACd,IAAI,CAAC,SAAS,mBACb,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,0BACN,IAAI,CAAC,eAAe,8BAE1C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC3D,IAAI,CAAC,aAAa,sBACZ,IAAI,CAAC,mBAAmB,EAC1C,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,aAE1C,IAAI,CAAC,IAAI;gBACT,KAAC,IAAI,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,eAAe,GAChC,EAEH,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAAE,KAAK,EAAC,gCAAgC,YACtE,wBACC,gBAAa,GACR,GACA,IACH,CACL,CAAC;AACH,CAAC","sourcesContent":["import type SegmentedButtonItem from \"./SegmentedButtonItem.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {\n\treturn (\n\t\t<li\n\t\t\trole=\"option\"\n\t\t\tclass=\"ui5-segmented-button-item-root\"\n\t\t\taria-posinset={this.posInSet}\n\t\t\taria-setsize={this.sizeOfSet}\n\t\t\taria-selected={this.selected}\n\t\t\taria-disabled={this.disabled}\n\t\t\taria-roledescription={this.ariaDescription}\n\t\t\tdata-sap-focus-ref\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\ttabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-description={this.ariaDescriptionText}\n\t\t\ttitle={this.tooltip || this.slotTextContent}\n\t\t>\n\t\t\t{this.icon &&\n\t\t\t\t<Icon\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\tclass=\"ui5-segmented-button-item-icon\"\n\t\t\t\t\tname={this.icon}\n\t\t\t\t\tshowTooltip={this.showIconTooltip}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t<span id={`${this._id}-content`} class=\"ui5-segmented-button-item-text\">\n\t\t\t\t<bdi>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</bdi>\n\t\t\t</span>\n\t\t</li>\n\t);\n}\n"]}

package/dist/SegmentedButtonTemplate.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
 export default function SegmentedButtonTemplate() {
-    return (_jsxs("ul", { role: "listbox", class: "ui5-segmented-button-root", onClick: this._onclick, onMouseDown: this._onmousedown, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onFocusIn: this._onfocusin, "aria-multiselectable": "true", "aria-describedby": `${this._id}-invisibleText`, "aria-roledescription": this.ariaDescription, "aria-label": this.accessibleName, children: [_jsx("slot", {}), _jsx("span", { id: `${this._id}-invisibleText`, class: "ui5-hidden-text", children: this.ariaDescribedBy })] }));
+    return (_jsx("ul", { role: "listbox", class: {
+            "ui5-segmented-button-root": true,
+            "ui5-segmented-button-root-equal-sized-items": !this.itemsFitContent,
+            "ui5-segmented-button-root-content-fit-items": this.itemsFitContent,
+        }, onClick: this._onclick, onMouseDown: this._onmousedown, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onFocusIn: this._onfocusin, "aria-multiselectable": this.selectionMode === "Multiple" ? "true" : "false", "aria-orientation": "horizontal", "aria-description": this.ariaDescriptionText, "aria-label": this.ariaLabelText, "aria-roledescription": this.ariaRoleDescription, children: _jsx("slot", {}) }));
 }
 //# sourceMappingURL=SegmentedButtonTemplate.js.map

package/dist/SegmentedButtonTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButtonTemplate.js","sourceRoot":"","sources":["../src/SegmentedButtonTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,cACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,0BACL,MAAM,sBACT,GAAG,IAAI,CAAC,GAAG,gBAAgB,0BACvB,IAAI,CAAC,eAAe,gBAC9B,IAAI,CAAC,cAAc,aAE/B,gBAAa,EACb,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAAE,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,eAAe,GAAQ,IACxF,CACL,CAAC;AACH,CAAC","sourcesContent":["import type SegmentedButton from \"./SegmentedButton.js\";\n\nexport default function SegmentedButtonTemplate(this: SegmentedButton) {\n\treturn (\n\t\t<ul\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"ui5-segmented-button-root\"\n\t\t\tonClick={this._onclick}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\taria-multiselectable=\"true\"\n\t\t\taria-describedby={`${this._id}-invisibleText`}\n\t\t\taria-roledescription={this.ariaDescription}\n\t\t\taria-label={this.accessibleName}\n\t\t>\n\t\t\t<slot></slot>\n\t\t\t<span id={`${this._id}-invisibleText`} class=\"ui5-hidden-text\">{this.ariaDescribedBy}</span>\n\t\t</ul>\n\t);\n}\n"]}
+{"version":3,"file":"SegmentedButtonTemplate.js","sourceRoot":"","sources":["../src/SegmentedButtonTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,aACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;YACN,2BAA2B,EAAE,IAAI;YACjC,6CAA6C,EAAE,CAAC,IAAI,CAAC,eAAe;YACpE,6CAA6C,EAAE,IAAI,CAAC,eAAe;SACnE,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,0BACJ,IAAI,CAAC,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBACzD,YAAY,sBACX,IAAI,CAAC,mBAAmB,gBAC9B,IAAI,CAAC,aAAa,0BACR,IAAI,CAAC,mBAAmB,YAE9C,gBAAa,GACT,CACL,CAAC;AACH,CAAC","sourcesContent":["import type SegmentedButton from \"./SegmentedButton.js\";\n\nexport default function SegmentedButtonTemplate(this: SegmentedButton) {\n\treturn (\n\t\t<ul\n\t\t\trole=\"listbox\"\n\t\t\tclass={{\n\t\t\t\t\"ui5-segmented-button-root\": true,\n\t\t\t\t\"ui5-segmented-button-root-equal-sized-items\": !this.itemsFitContent,\n\t\t\t\t\"ui5-segmented-button-root-content-fit-items\": this.itemsFitContent,\n\t\t\t}}\n\t\t\tonClick={this._onclick}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\taria-multiselectable={this.selectionMode === \"Multiple\" ? \"true\" : \"false\"}\n\t\t\taria-orientation=\"horizontal\"\n\t\t\taria-description={this.ariaDescriptionText}\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-roledescription={this.ariaRoleDescription}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</ul>\n\t);\n}\n"]}

package/dist/Select.d.ts

@@ -1,11 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import SelectTextSeparator from "./types/SelectTextSeparator.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
+import type { Timeout, AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -164,6 +166,20 @@ declare class Select extends UI5Element implements IFormInputElement {
      * @since 1.0.0-rc.15
      */
     accessibleNameRef?: string;
+    /**
+     * Defines the accessible description of the component.
+     * @default undefined
+     * @public
+     * @since 2.14.0
+     */
+    accessibleDescription?: string;
+    /**
+     * Receives id(or many ids) of the elements that describe the select.
+     * @default undefined
+     * @public
+     * @since 2.14.0
+     */
+    accessibleDescriptionRef?: string;
     /**
      * Defines the tooltip of the select.
      * @default undefined
@@ -171,6 +187,19 @@ declare class Select extends UI5Element implements IFormInputElement {
      * @since 2.8.0
      */
     tooltip?: string;
+    /**
+     * Defines the separator type for the two columns layout when Select is in read-only mode.
+     *
+     * @default "Dash"
+     * @public
+     * @since 2.16.0
+     */
+    textSeparator: `${SelectTextSeparator}`;
+    /**
+     * Constantly updated value of texts collected from the associated description texts
+     * @private
+     */
+    _associatedDescriptionRefTexts?: string;
     /**
      * @private
      */
@@ -204,7 +233,7 @@ declare class Select extends UI5Element implements IFormInputElement {
      * **Note:** Use the `ui5-option` component to define the desired options.
      * @public
      */
-    options: Array<IOption>;
+    options: DefaultSlot<IOption>;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
      *
@@ -217,7 +246,7 @@ declare class Select extends UI5Element implements IFormInputElement {
      * the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
      * @public
     */
-    valueStateMessage: Array<HTMLElement>;
+    valueStateMessage: Slot<HTMLElement>;
     /**
      * Defines the HTML element that will be displayed in the component input part,
      * representing the selected option.
@@ -230,11 +259,13 @@ declare class Select extends UI5Element implements IFormInputElement {
      * @public
      * @since 1.17.0
     */
-    label: Array<HTMLElement>;
+    label: Slot<HTMLElement>;
     get formValidityMessage(): string;
     get formValidity(): ValidityStateFlags;
     formElementAnchor(): Promise<HTMLElement | undefined>;
     get formFormattedValue(): string | null;
+    onEnterDOM(): void;
+    onExitDOM(): void;
     onBeforeRendering(): void;
     onAfterRendering(): void;
     /**
@@ -286,7 +317,17 @@ declare class Select extends UI5Element implements IFormInputElement {
      * @default undefined
      */
     get selectedOption(): IOption | undefined;
-    get text(): string | undefined;
+    /**
+     * Helper function to build display text with separator when additional text exists
+     * @param mainText - The main text content
+     * @param additionalText - The additional text (optional)
+     * @returns The combined text with separator if additionalText exists, otherwise just mainText
+     * @private
+     */
+    _buildDisplayText(mainText: string, additionalText?: string): string;
+    get text(): string;
+    get _effectiveTooltip(): string | undefined;
+    get _separatorSymbol(): string;
     _toggleRespPopover(): void;
     _onkeydown(e: KeyboardEvent): void;
     _handleKeyboardNavigation(e: KeyboardEvent): void;
@@ -337,6 +378,7 @@ declare class Select extends UI5Element implements IFormInputElement {
     get valueStateTypeText(): string;
     get hasValueState(): boolean;
     get valueStateTextId(): string | undefined;
+    get responsivePopoverId(): string;
     get isDisabled(): true | undefined;
     get _headerTitleText(): string;
     get _currentlySelectedOption(): IOption;
@@ -349,6 +391,7 @@ declare class Select extends UI5Element implements IFormInputElement {
     get classes(): {
         popoverValueState: {
             "ui5-valuestatemessage-root": boolean;
+            "ui5-valuestatemessage-header": boolean;
             "ui5-valuestatemessage--success": boolean;
             "ui5-valuestatemessage--error": boolean;
             "ui5-valuestatemessage--warning": boolean;
@@ -360,11 +403,12 @@ declare class Select extends UI5Element implements IFormInputElement {
     };
     get styles(): {
         popoverHeader: {
-            "max-width": string;
+            display: string;
         };
         responsivePopoverHeader: {
             display: string;
             width: string;
+            "max-width": string;
         };
         responsivePopover: {
             "min-width": string;
@@ -381,6 +425,19 @@ declare class Select extends UI5Element implements IFormInputElement {
     closeValueStatePopover(): void;
     toggleValueStatePopover(open: boolean): void;
     get selectedOptionIcon(): string | undefined;
+    get ariaDescriptionText(): string | undefined;
+    get ariaDescriptionTextId(): "" | "accessibleDescription";
+    get ariaDescribedByIds(): string | undefined;
+    get accessibilityInfo(): {
+        role: AriaRole;
+        type: string;
+        description: string;
+        label: string | undefined;
+        readonly: boolean;
+        required: boolean;
+        disabled: boolean;
+    };
+    _updateAssociatedLabelsTexts(): void;
     _getPopover(): Popover | null;
 }
 export default Select;

package/dist/Select.js

@@ -9,12 +9,13 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isSpace, isUp, isDown, isEnter, isEscape, isHome, isEnd, isShow, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, registerUI5Element, deregisterUI5Element, getAllAccessibleDescriptionRefTexts, getEffectiveAriaDescriptionText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import SelectTextSeparator from "./types/SelectTextSeparator.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -22,7 +23,6 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import List from "./List.js";
 import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, FORM_SELECTABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 import Label from "./Label.js";
@@ -128,6 +128,14 @@ let Select = Select_1 = class Select extends UI5Element {
          * @public
          */
         this.readonly = false;
+        /**
+         * Defines the separator type for the two columns layout when Select is in read-only mode.
+         *
+         * @default "Dash"
+         * @public
+         * @since 2.16.0
+         */
+        this.textSeparator = "Dash";
         /**
          * @private
          */
@@ -165,16 +173,22 @@ let Select = Select_1 = class Select extends UI5Element {
         }
         const selectedOption = this.selectedOption;
         if (selectedOption) {
-            if ("value" in selectedOption && selectedOption.value) {
+            if ("value" in selectedOption && selectedOption.value !== undefined) {
                 return selectedOption.value;
             }
             return selectedOption.hasAttribute("value") ? selectedOption.getAttribute("value") : selectedOption.textContent;
         }
         return "";
     }
+    onEnterDOM() {
+        registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
+    }
+    onExitDOM() {
+        deregisterUI5Element(this);
+    }
     onBeforeRendering() {
         this._applySelection();
-        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
     }
     onAfterRendering() {
         this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
@@ -267,7 +281,7 @@ let Select = Select_1 = class Select extends UI5Element {
         if (this._valueStorage !== undefined) {
             return this._valueStorage;
         }
-        return this.selectedOption?.value || this.selectedOption?.textContent || "";
+        return this.selectedOption?.value === undefined ? (this.selectedOption?.textContent || "") : this.selectedOption?.value;
     }
     get _selectedIndex() {
         return this.options.findIndex(option => option.selected);
@@ -280,8 +294,57 @@ let Select = Select_1 = class Select extends UI5Element {
     get selectedOption() {
         return this.options.find(option => option.selected);
     }
+    /**
+     * Helper function to build display text with separator when additional text exists
+     * @param mainText - The main text content
+     * @param additionalText - The additional text (optional)
+     * @returns The combined text with separator if additionalText exists, otherwise just mainText
+     * @private
+     */
+    _buildDisplayText(mainText, additionalText) {
+        if (!additionalText) {
+            return mainText;
+        }
+        return `${mainText} ${this._separatorSymbol} ${additionalText}`;
+    }
     get text() {
-        return this.selectedOption?.effectiveDisplayText;
+        const selectedOption = this.selectedOption;
+        if (!selectedOption) {
+            return "";
+        }
+        // Only show separator when readonly and there's additional text
+        if (this.readonly && selectedOption.additionalText) {
+            return this._buildDisplayText(selectedOption.effectiveDisplayText, selectedOption.additionalText);
+        }
+        return selectedOption.effectiveDisplayText;
+    }
+    get _effectiveTooltip() {
+        // User-defined tooltip takes precedence
+        if (this.tooltip) {
+            return this.tooltip;
+        }
+        // Provide default tooltip for readonly mode to show full content
+        if (this.readonly) {
+            const selectedOption = this.selectedOption;
+            if (!selectedOption) {
+                return undefined;
+            }
+            // Use textContent for tooltip to show actual text content, not display text
+            const mainText = selectedOption.textContent || "";
+            return this._buildDisplayText(mainText, selectedOption.additionalText);
+        }
+        return undefined;
+    }
+    get _separatorSymbol() {
+        switch (this.textSeparator) {
+            case SelectTextSeparator.Bullet:
+                return "·"; // Middle dot (U+00B7)
+            case SelectTextSeparator.VerticalLine:
+                return "|"; // Vertical line (U+007C)
+            case SelectTextSeparator.Dash:
+            default:
+                return "–"; // En dash (U+2013)
+        }
     }
     _toggleRespPopover() {
         if (this.disabled || this.readonly) {
@@ -469,13 +532,23 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     _changeSelectedItem(oldIndex, newIndex) {
         const options = this.options;
+        // Normalize: first navigation with Up when nothing selected -> last item
+        if (oldIndex === -1 && newIndex < 0 && options.length) {
+            newIndex = options.length - 1;
+        }
+        // Abort on invalid target
+        if (newIndex < 0 || newIndex >= options.length) {
+            return;
+        }
         const previousOption = options[oldIndex];
         const nextOption = options[newIndex];
         if (previousOption === nextOption) {
             return;
         }
-        previousOption.selected = false;
-        previousOption.focused = false;
+        if (previousOption) {
+            previousOption.selected = false;
+            previousOption.focused = false;
+        }
         nextOption.selected = true;
         nextOption.focused = true;
         if (this._valueStorage !== undefined) {
@@ -507,6 +580,11 @@ let Select = Select_1 = class Select extends UI5Element {
     _applyFocusToSelectedItem() {
         this.options.forEach(option => {
             option.focused = option.selected;
+            if (option.focused && isPhone()) {
+                // on phone, the popover opens full screen (dialog)
+                // move focus to option to read out dialog header
+                option.focus();
+            }
         });
     }
     _afterClose() {
@@ -574,6 +652,9 @@ let Select = Select_1 = class Select extends UI5Element {
     get valueStateTextId() {
         return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
     }
+    get responsivePopoverId() {
+        return `${this._id}-popover`;
+    }
     get isDisabled() {
         return this.disabled || undefined;
     }
@@ -607,6 +688,7 @@ let Select = Select_1 = class Select extends UI5Element {
         return {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
+                "ui5-valuestatemessage-header": !this._isPhone,
                 "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
                 "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
                 "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
@@ -620,11 +702,12 @@ let Select = Select_1 = class Select extends UI5Element {
     get styles() {
         return {
             popoverHeader: {
-                "max-width": `${this.offsetWidth}px`,
+                "display": "block",
             },
             responsivePopoverHeader: {
                 "display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
                 "width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+                "max-width": "100%",
             },
             responsivePopover: {
                 "min-width": `${this.offsetWidth}px`,
@@ -632,7 +715,7 @@ let Select = Select_1 = class Select extends UI5Element {
         };
     }
     get ariaLabelText() {
-        return getEffectiveAriaLabelText(this);
+        return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
     }
     get shouldDisplayDefaultValueStateMessage() {
         return !this.valueStateMessage.length && this.hasValueStateText;
@@ -680,6 +763,30 @@ let Select = Select_1 = class Select extends UI5Element {
     get selectedOptionIcon() {
         return this.selectedOption && this.selectedOption.icon;
     }
+    get ariaDescriptionText() {
+        return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this);
+    }
+    get ariaDescriptionTextId() {
+        return this.ariaDescriptionText ? "accessibleDescription" : "";
+    }
+    get ariaDescribedByIds() {
+        const ids = [this.valueStateTextId, this.ariaDescriptionTextId].filter(Boolean);
+        return ids.length ? ids.join(" ") : undefined;
+    }
+    get accessibilityInfo() {
+        return {
+            role: "combobox",
+            type: this._ariaRoleDescription,
+            description: this.text,
+            label: this.ariaLabelText,
+            readonly: this.readonly,
+            required: this.required,
+            disabled: this.disabled,
+        };
+    }
+    _updateAssociatedLabelsTexts() {
+        this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
+    }
     _getPopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
     }
@@ -708,9 +815,21 @@ __decorate([
 __decorate([
     property()
 ], Select.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], Select.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], Select.prototype, "accessibleDescriptionRef", void 0);
 __decorate([
     property()
 ], Select.prototype, "tooltip", void 0);
+__decorate([
+    property()
+], Select.prototype, "textSeparator", void 0);
+__decorate([
+    property({ type: String, noAttribute: true })
+], Select.prototype, "_associatedDescriptionRefTexts", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Select.prototype, "_iconPressed", void 0);