@ui5/webcomponents 2.22.0-rc.2 → 2.22.0-rc.4

package/dist/MultiInputTemplate.js

@@ -20,7 +20,7 @@ export default function MultiInputTemplate() {
 }
 function preContent() {
     return (_jsxs(_Fragment, { children: [_jsx("span", { id: "hiddenText-nMore", class: "ui5-hidden-text", children: this._tokensCountText }), this.showValueHelpIcon &&
-                _jsx("span", { id: "hiddenText-value-help", class: "ui5-hidden-text", children: this._valueHelpText }), _jsx(Tokenizer, { class: "ui5-multi-input-tokenizer", opener: this.morePopoverOpener, popoverMinWidth: this._inputWidth, hidePopoverArrow: true, expanded: this.tokenizerExpanded, onKeyDown: this._onTokenizerKeydown, onTokenDelete: this.tokenDelete, onFocusOut: this._tokenizerFocusOut, onShowMoreItemsPress: this._showMoreItemsPress, children: this.tokens.map(token => _jsx("slot", { name: token._individualSlot })) })] }));
+                _jsx("span", { id: "hiddenText-value-help", class: "ui5-hidden-text", children: this._valueHelpText }), _jsx(Tokenizer, { class: "ui5-multi-input-tokenizer", opener: this.morePopoverOpener, popoverMinWidth: this._inputWidth, popoverTitle: this._headerTitleText, hidePopoverArrow: true, expanded: this.tokenizerExpanded, onKeyDown: this._onTokenizerKeydown, onTokenDelete: this.tokenDelete, onFocusOut: this._tokenizerFocusOut, onShowMoreItemsPress: this._showMoreItemsPress, children: this.tokens.map(token => _jsx("slot", { name: token._individualSlot })) })] }));
 }
 function postContent() {
     return (_jsx(_Fragment, { children: this.showValueHelpIcon &&

package/dist/MultiInputTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInputTemplate.js","sourceRoot":"","sources":["../src/MultiInputTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport multiSelectAll from \"@ui5/webcomponents-icons/dist/multiselect-all.js\";\nimport InputTemplate from \"./InputTemplate.js\";\nimport type MultiInput from \"./MultiInput.js\";\nimport type { MultiInputTokenDeleteEventDetail } from \"./MultiInput.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport List from \"./List.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport ListAccessibleRole from \"./types/ListAccessibleRole.js\";\nimport valueHelp from \"@ui5/webcomponents-icons/dist/value-help.js\";\n\nexport default function MultiInputTemplate(this: MultiInput) {\n\treturn [\n\t\tInputTemplate.call(this, {\n\t\t\tpreContent,\n\t\t\tpostContent,\n\t\t\tsuggestionsList: multiInputSuggestionsList,\n\t\t\tmobileHeader: multiInputMobileHeader,\n\t\t}),\n\t];\n}\n\nfunction preContent(this: MultiInput) {\n\treturn (\n\t\t<>\n\t\t\t<span id=\"hiddenText-nMore\" class=\"ui5-hidden-text\">{this._tokensCountText}</span>\n\n\t\t\t{this.showValueHelpIcon &&\n\t\t\t\t<span id=\"hiddenText-value-help\" class=\"ui5-hidden-text\">{this._valueHelpText}</span>\n\t\t\t}\n\t\t\t<Tokenizer\n\t\t\t\tclass=\"ui5-multi-input-tokenizer\"\n\t\t\t\topener={this.morePopoverOpener}\n\t\t\t\tpopoverMinWidth={this._inputWidth}\n\t\t\t\thidePopoverArrow={true}\n\t\t\t\texpanded={this.tokenizerExpanded}\n\t\t\t\tonKeyDown={this._onTokenizerKeydown}\n\t\t\t\tonTokenDelete={this.tokenDelete}\n\t\t\t\tonFocusOut={this._tokenizerFocusOut}\n\t\t\t\tonShowMoreItemsPress={this._showMoreItemsPress}\n\t\t\t>\n\t\t\t\t{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}\n\t\t\t</Tokenizer>\n\t\t</>\n\t);\n}\n\nfunction postContent(this: MultiInput) {\n\treturn (\n\t\t<>\n\t\t\t{this.showValueHelpIcon &&\n\t\t\t\t<Icon\n\t\t\t\t\tclass=\"inputIcon\"\n\t\t\t\t\tname={valueHelp}\n\t\t\t\t\taccessibleName={this.valueHelpLabel}\n\t\t\t\t\tonMouseUp={this.valueHelpMouseUp}\n\t\t\t\t\tonMouseDown={this.valueHelpMouseDown}\n\t\t\t\t\tonClick={this.valueHelpPress}\n\t\t\t\t/>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction multiInputSuggestionsList(this: MultiInput) {\n\tif (this._effectiveShowTokensInSuggestions) {\n\t\treturn (\n\t\t\t<List\n\t\t\t\tclass=\"ui5-tokenizer-list\"\n\t\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\t\tseparators={this.suggestionSeparators}\n\t\t\t\tselectionMode=\"Delete\"\n\t\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t\t\tonItemDelete={(e: any) => {\n\t\t\t\t\tconst listItem = e.detail.item;\n\t\t\t\t\tconst tokenId = listItem.getAttribute(\"data-ui5-token-ref-id\");\n\t\t\t\t\tconst token = this.tokens.find((t: any) => t._id === tokenId);\n\n\t\t\t\t\tif (token) {\n\t\t\t\t\t\tthis.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.tokens?.map((token: any, index: number) => (\n\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tclass=\"ui5-suggestion-token-item\"\n\t\t\t\t\t\tdata-ui5-token-ref-id={token._id}\n\t\t\t\t\t\twrappingType=\"Normal\"\n\t\t\t\t\t\ttext={token.text}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</List>\n\t\t);\n\t}\n\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n\nfunction multiInputMobileHeader(this: MultiInput) {\n\treturn (\n\t\t<ToggleButton\n\t\t\tclass=\"ui5-multi-input-mobile-dialog-button\"\n\t\t\tdesign=\"Transparent\"\n\t\t\ticon={multiSelectAll}\n\t\t\taccessibleName={this._filterButtonAccessibleName}\n\t\t\tdisabled={!this.tokens?.length}\n\t\t\tpressed={this._effectiveShowTokensInSuggestions}\n\t\t\tonClick={() => {\n\t\t\t\tthis._userToggledShowTokens = true;\n\t\t\t\tthis._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;\n\t\t\t}}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"file":"MultiInputTemplate.js","sourceRoot":"","sources":["../src/MultiInputTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAC9E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAG/C,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAC/D,OAAO,SAAS,MAAM,6CAA6C,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACzC,OAAO;QACN,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE;YACxB,UAAU;YACV,WAAW;YACX,eAAe,EAAE,yBAAyB;YAC1C,YAAY,EAAE,sBAAsB;SACpC,CAAC;KACF,CAAC;AACH,CAAC;AAED,SAAS,UAAU;IAClB,OAAO,CACN,8BACC,eAAM,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,gBAAgB,GAAQ,EAEjF,IAAI,CAAC,iBAAiB;gBACtB,eAAM,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAQ,EAEtF,KAAC,SAAS,IACT,KAAK,EAAC,2BAA2B,EACjC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,eAAe,EAAE,IAAI,CAAC,WAAW,EACjC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,gBAAgB,EAAE,IAAI,EACtB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,aAAa,EAAE,IAAI,CAAC,WAAW,EAC/B,UAAU,EAAE,IAAI,CAAC,kBAAkB,EACnC,oBAAoB,EAAE,IAAI,CAAC,mBAAmB,YAE5C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAAC,GAC3D,IACV,CACH,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,4BACE,IAAI,CAAC,iBAAiB;YACtB,KAAC,IAAI,IACJ,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,SAAS,EACf,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,WAAW,EAAE,IAAI,CAAC,kBAAkB,EACpC,OAAO,EAAE,IAAI,CAAC,cAAc,GAC3B,GAED,CACH,CAAC;AACH,CAAC;AAED,SAAS,yBAAyB;IACjC,IAAI,IAAI,CAAC,iCAAiC,EAAE,CAAC;QAC5C,OAAO,CACN,KAAC,IAAI,IACJ,KAAK,EAAC,oBAAoB,EAC1B,cAAc,EAAE,kBAAkB,CAAC,OAAO,EAC1C,UAAU,EAAE,IAAI,CAAC,oBAAoB,EACrC,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,WAAW,EAAE,IAAI,CAAC,0BAA0B,EAC5C,iBAAiB,EAAE,IAAI,CAAC,sBAAsB,EAC9C,YAAY,EAAE,CAAC,CAAM,EAAE,EAAE;gBACxB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;gBAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;gBAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC;gBAE9D,IAAI,KAAK,EAAE,CAAC;oBACX,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,EAAmD,CAAC,CAAC;gBACpG,CAAC;YACF,CAAC,YAEA,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAU,EAAE,KAAa,EAAE,EAAE,CAAC,CAChD,KAAC,gBAAgB,IAEhB,KAAK,EAAC,2BAA2B,2BACV,KAAK,CAAC,GAAG,EAChC,YAAY,EAAC,QAAQ,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,IAJX,KAAK,CAKT,CACF,CAAC,GACI,CACP,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,IAAI,IACJ,cAAc,EAAE,kBAAkB,CAAC,OAAO,EAC1C,UAAU,EAAE,IAAI,CAAC,oBAAoB,EACrC,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,WAAW,EAAE,IAAI,CAAC,0BAA0B,EAC5C,iBAAiB,EAAE,IAAI,CAAC,sBAAsB,YAE9C,gBAAa,GACP,CACP,CAAC;AACH,CAAC;AAED,SAAS,sBAAsB;IAC9B,OAAO,CACN,KAAC,YAAY,IACZ,KAAK,EAAC,sCAAsC,EAC5C,MAAM,EAAC,aAAa,EACpB,IAAI,EAAE,cAAc,EACpB,cAAc,EAAE,IAAI,CAAC,2BAA2B,EAChD,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAC9B,OAAO,EAAE,IAAI,CAAC,iCAAiC,EAC/C,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;YACnC,IAAI,CAAC,wBAAwB,GAAG,CAAC,IAAI,CAAC,iCAAiC,CAAC;QACzE,CAAC,GACA,CACF,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport multiSelectAll from \"@ui5/webcomponents-icons/dist/multiselect-all.js\";\nimport InputTemplate from \"./InputTemplate.js\";\nimport type MultiInput from \"./MultiInput.js\";\nimport type { MultiInputTokenDeleteEventDetail } from \"./MultiInput.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport List from \"./List.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport ListAccessibleRole from \"./types/ListAccessibleRole.js\";\nimport valueHelp from \"@ui5/webcomponents-icons/dist/value-help.js\";\n\nexport default function MultiInputTemplate(this: MultiInput) {\n\treturn [\n\t\tInputTemplate.call(this, {\n\t\t\tpreContent,\n\t\t\tpostContent,\n\t\t\tsuggestionsList: multiInputSuggestionsList,\n\t\t\tmobileHeader: multiInputMobileHeader,\n\t\t}),\n\t];\n}\n\nfunction preContent(this: MultiInput) {\n\treturn (\n\t\t<>\n\t\t\t<span id=\"hiddenText-nMore\" class=\"ui5-hidden-text\">{this._tokensCountText}</span>\n\n\t\t\t{this.showValueHelpIcon &&\n\t\t\t\t<span id=\"hiddenText-value-help\" class=\"ui5-hidden-text\">{this._valueHelpText}</span>\n\t\t\t}\n\t\t\t<Tokenizer\n\t\t\t\tclass=\"ui5-multi-input-tokenizer\"\n\t\t\t\topener={this.morePopoverOpener}\n\t\t\t\tpopoverMinWidth={this._inputWidth}\n\t\t\t\tpopoverTitle={this._headerTitleText}\n\t\t\t\thidePopoverArrow={true}\n\t\t\t\texpanded={this.tokenizerExpanded}\n\t\t\t\tonKeyDown={this._onTokenizerKeydown}\n\t\t\t\tonTokenDelete={this.tokenDelete}\n\t\t\t\tonFocusOut={this._tokenizerFocusOut}\n\t\t\t\tonShowMoreItemsPress={this._showMoreItemsPress}\n\t\t\t>\n\t\t\t\t{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}\n\t\t\t</Tokenizer>\n\t\t</>\n\t);\n}\n\nfunction postContent(this: MultiInput) {\n\treturn (\n\t\t<>\n\t\t\t{this.showValueHelpIcon &&\n\t\t\t\t<Icon\n\t\t\t\t\tclass=\"inputIcon\"\n\t\t\t\t\tname={valueHelp}\n\t\t\t\t\taccessibleName={this.valueHelpLabel}\n\t\t\t\t\tonMouseUp={this.valueHelpMouseUp}\n\t\t\t\t\tonMouseDown={this.valueHelpMouseDown}\n\t\t\t\t\tonClick={this.valueHelpPress}\n\t\t\t\t/>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction multiInputSuggestionsList(this: MultiInput) {\n\tif (this._effectiveShowTokensInSuggestions) {\n\t\treturn (\n\t\t\t<List\n\t\t\t\tclass=\"ui5-tokenizer-list\"\n\t\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\t\tseparators={this.suggestionSeparators}\n\t\t\t\tselectionMode=\"Delete\"\n\t\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t\t\tonItemDelete={(e: any) => {\n\t\t\t\t\tconst listItem = e.detail.item;\n\t\t\t\t\tconst tokenId = listItem.getAttribute(\"data-ui5-token-ref-id\");\n\t\t\t\t\tconst token = this.tokens.find((t: any) => t._id === tokenId);\n\n\t\t\t\t\tif (token) {\n\t\t\t\t\t\tthis.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.tokens?.map((token: any, index: number) => (\n\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tclass=\"ui5-suggestion-token-item\"\n\t\t\t\t\t\tdata-ui5-token-ref-id={token._id}\n\t\t\t\t\t\twrappingType=\"Normal\"\n\t\t\t\t\t\ttext={token.text}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</List>\n\t\t);\n\t}\n\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n\nfunction multiInputMobileHeader(this: MultiInput) {\n\treturn (\n\t\t<ToggleButton\n\t\t\tclass=\"ui5-multi-input-mobile-dialog-button\"\n\t\t\tdesign=\"Transparent\"\n\t\t\ticon={multiSelectAll}\n\t\t\taccessibleName={this._filterButtonAccessibleName}\n\t\t\tdisabled={!this.tokens?.length}\n\t\t\tpressed={this._effectiveShowTokensInSuggestions}\n\t\t\tonClick={() => {\n\t\t\t\tthis._userToggledShowTokens = true;\n\t\t\t\tthis._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;\n\t\t\t}}\n\t\t/>\n\t);\n}\n"]}

package/dist/RangeSlider.d.ts

@@ -85,6 +85,7 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     tooltipStartValueState: `${ValueState}`;
     tooltipEndValueState: `${ValueState}`;
     rangePressed: boolean;
+    _progressFocused: boolean;
     _isStartValueValid: boolean;
     _isEndValueValid: boolean;
     _startValue: number;
@@ -105,9 +106,17 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     _lastValidStartValue: string;
     _lastValidEndValue: string;
     _areInputValuesSwapped: boolean;
+    _onDocumentClickBound: (e: MouseEvent) => void;
     static i18nBundle: I18nBundle;
     get formFormattedValue(): FormData;
     constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    /**
+     * Handles document-level clicks to clear progress focus when clicking outside.
+     * @private
+     */
+    _onDocumentClick(e: MouseEvent): void;
     get _ariaDisabled(): true | undefined;
     get _ariaLabelledByText(): string;
     get _ariaHandlesText(): AriaHandlesText;
@@ -306,9 +315,18 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     get tickmarksObject(): boolean[];
     get _startHandle(): HTMLElement;
     get _endHandle(): HTMLElement;
-    get _progressBar(): HTMLElement;
+    get _progressBar(): HTMLElement | null;
     get _ariaLabelledByStartHandleText(): string;
     get _ariaLabelledByEndHandleText(): string;
+    /**
+     * @private
+     */
+    get _ariaLabelStartHandle(): string;
+    /**
+     * @private
+     */
+    get _ariaLabelEndHandle(): string;
+    _getAriaLabelHandle(handleDescription: string): string;
     get _ariaLabelledByInputText(): string;
     get _ariaDescribedByInputText(): string;
     get styles(): {

package/dist/RangeSlider.js

@@ -10,6 +10,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isEscape, isEnter, isHome, isEnd, isF2, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import SliderBase from "./SliderBase.js";
 import RangeSliderTemplate from "./RangeSliderTemplate.js";
 // Texts
@@ -80,7 +81,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      */
     set startValue(value) {
         this._startValue = value;
-        this.tooltipStartValue = value.toString();
+        this.tooltipStartValue = value?.toString() ?? "";
     }
     get startValue() {
         return this._startValue;
@@ -94,7 +95,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      */
     set endValue(value) {
         this._endValue = value;
-        this.tooltipEndValue = value.toString();
+        this.tooltipEndValue = value?.toString() ?? "";
     }
     get endValue() {
         return this._endValue;
@@ -115,6 +116,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this.tooltipStartValueState = "None";
         this.tooltipEndValueState = "None";
         this.rangePressed = false;
+        this._progressFocused = false;
         this._isStartValueValid = false;
         this._isEndValueValid = false;
         this._startValue = 0;
@@ -127,6 +129,25 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._stateStorage.endValue = undefined;
         this._lastValidStartValue = this.min.toString();
         this._lastValidEndValue = this.max.toString();
+        this._onDocumentClickBound = this._onDocumentClick.bind(this);
+    }
+    onEnterDOM() {
+        document.addEventListener("mousedown", this._onDocumentClickBound, true);
+    }
+    onExitDOM() {
+        document.removeEventListener("mousedown", this._onDocumentClickBound, true);
+    }
+    /**
+     * Handles document-level clicks to clear progress focus when clicking outside.
+     * @private
+     */
+    _onDocumentClick(e) {
+        const clickedInside = e.composedPath().includes(this);
+        if (!clickedInside) {
+            if (this._tooltipsOpen) {
+                this._tooltipsOpen = false;
+            }
+        }
     }
     get _ariaDisabled() {
         return this.disabled || undefined;
@@ -240,6 +261,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._setAffectedValue(undefined);
         this._startValueInitial = undefined;
         this._endValueInitial = undefined;
+        this._progressFocused = false;
         if (this.showTooltip && !e.relatedTarget?.hasAttribute("ui5-slider-tooltip")) {
             this._tooltipsOpen = false;
         }
@@ -265,7 +287,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._startValueAtBeginningOfAction = this.startValue;
         this._endValueAtBeginningOfAction = this.endValue;
         if (isEscape(e)) {
-            this.update(undefined, this._startValueInitial, this._endValueInitial);
+            if (this._startValueInitial !== undefined && this._endValueInitial !== undefined) {
+                this.update(undefined, this._startValueInitial, this._endValueInitial);
+            }
             return;
         }
         // Set the target of the interaction based on the focused inner element
@@ -288,14 +312,15 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         // Update a single value if one of the handles is focused or the range if not already at min or max
         const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
         if (affectedValue && !this._isPressInCurrentRange) {
             const propValue = this[affectedValue];
-            const newValue = ctor.clipValue(newValueOffset + propValue, min, max);
+            const newValue = Number(ctor.clipValue(newValueOffset + propValue, min, max).toFixed(stepPrecision));
             this.update(affectedValue, newValue, undefined);
         }
         else if ((newValueOffset < 0 && this.startValue > min) || (newValueOffset > 0 && this.endValue < max)) {
-            const newStartValue = ctor.clipValue(newValueOffset + this.startValue, min, max);
-            const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
+            const newStartValue = Number(ctor.clipValue(newValueOffset + this.startValue, min, max).toFixed(stepPrecision));
+            const newEndValue = Number(ctor.clipValue(newValueOffset + this.endValue, min, max).toFixed(stepPrecision));
             this.update(affectedValue, newStartValue, newEndValue);
         }
         this.tooltipStartValue = this.startValue.toString();
@@ -313,7 +338,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         if (this.shadowRoot.activeElement === this._endHandle) {
             this._setAffectedValue("endValue");
         }
-        if (this.shadowRoot.activeElement === this._progressBar) {
+        // Progress bar is inside SliderScale's shadow DOM, so check the nested activeElement
+        const sliderScale = this.shadowRoot.querySelector("[ui5-slider-scale]");
+        if (sliderScale?.shadowRoot?.activeElement === this._progressBar) {
             this._setAffectedValue(undefined);
         }
         this._setIsPressInCurrentRange(!this._valueAffected);
@@ -326,8 +353,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     _homeEndForSelectedRange(e, affectedValue, min, max) {
         const newValueOffset = this._handleActionKeyPressBase(e, affectedValue);
         const ctor = this.constructor;
-        const newStartValue = ctor.clipValue(newValueOffset + this.startValue, min, max);
-        const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        const newStartValue = Number(ctor.clipValue(newValueOffset + this.startValue, min, max).toFixed(stepPrecision));
+        const newEndValue = Number(ctor.clipValue(newValueOffset + this.endValue, min, max).toFixed(stepPrecision));
         this.update(undefined, newStartValue, newEndValue);
     }
     /**
@@ -370,12 +398,27 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         if (this.disabled || this._effectiveStep === 0 || e.target.hasAttribute("ui5-slider-tooltip")) {
             return;
         }
-        // Calculate the new value from the press position of the event
+        // Pre-calculate whether the press is in the current range before handleDownBase
+        // This is needed so focusInnerElement() knows where to focus
+        const ctor = this.constructor;
+        const pageX = ctor.getPageXValueFromEvent(e);
+        const tempValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
+        const isInRange = tempValue >= this.startValue && tempValue <= this.endValue;
+        const startHandle = this._startHandle;
+        const endHandle = this._endHandle;
+        const inStartHandle = startHandle && pageX >= startHandle.getBoundingClientRect().left && pageX <= startHandle.getBoundingClientRect().right;
+        const inEndHandle = endHandle && pageX >= endHandle.getBoundingClientRect().left && pageX <= endHandle.getBoundingClientRect().right;
         const newValue = this.handleDownBase(e);
-        // Determine the rest of the needed details from the start of the interaction.
+        if (isInRange && !inStartHandle && !inEndHandle) {
+            this._setIsPressInCurrentRange(true);
+            this._progressFocused = true;
+            this.rangePressed = true;
+        }
+        else {
+            this._progressFocused = false;
+            this.rangePressed = false;
+        }
         this._saveInteractionStartData(e, newValue);
-        this.rangePressed = this._isPressInCurrentRange;
-        // Do not yet update the RangeSlider if press is in range or over a handle.
         if (this._isPressInCurrentRange || this._handeIsPressed) {
             this._handeIsPressed = false;
             return;
@@ -393,7 +436,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @private
      */
     _saveInteractionStartData(e, newValue) {
-        const progressBarDom = this.shadowRoot.querySelector(".ui5-slider-progress").getBoundingClientRect();
+        const progressBarDom = this._progressBar?.getBoundingClientRect();
         // Save the state of the value properties on the start of the interaction
         this._startValueAtBeginningOfAction = this.startValue;
         this._endValueAtBeginningOfAction = this.endValue;
@@ -403,7 +446,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // Which element of the Range Slider is pressed and which value property to be modified on further interaction
         this._pressTargetAndAffectedValue(this._initialPageXPosition, newValue);
         // Use the progress bar to save the initial coordinates of the start-handle when the interaction begins.
-        this._initialStartHandlePageX = this.directionStart === "left" ? progressBarDom.left : progressBarDom.right;
+        if (progressBarDom) {
+            this._initialStartHandlePageX = this.directionStart === "left" ? progressBarDom.left : progressBarDom.right;
+        }
     }
     /**
      * Called when the user moves the slider
@@ -474,8 +519,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @private
      */
     _pressTargetAndAffectedValue(clientX, value) {
-        const startHandle = this.shadowRoot.querySelector(".ui5-slider-handle--start");
-        const endHandle = this.shadowRoot.querySelector(".ui5-slider-handle--end");
+        const startHandle = this._startHandle;
+        const endHandle = this._endHandle;
         // Check if the press point is in the bounds of any of the Range Slider handles
         const handleStartDomRect = startHandle.getBoundingClientRect();
         const handleEndDomRect = endHandle.getBoundingClientRect();
@@ -548,14 +593,14 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         const isReversed = this._areValuesReversed();
         const affectedValue = this._valueAffected;
         if (this._isPressInCurrentRange || !affectedValue) {
-            this._progressBar.focus();
+            this._progressBar?.focus();
         }
         if ((affectedValue === "startValue" && !isReversed) || (affectedValue === "endValue" && isReversed)) {
-            this._startHandle.focus();
+            this._startHandle?.focus();
             this.bringToFrontTooltip("start");
         }
         if ((affectedValue === "endValue" && !isReversed) || (affectedValue === "startValue" && isReversed)) {
-            this._endHandle.focus();
+            this._endHandle?.focus();
             this.bringToFrontTooltip("end");
         }
     }
@@ -583,7 +628,10 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // And the opposite - if the start handle reaches the beginning of the slider keep the initially selected range.
         const ctor = this.constructor;
         startValue = ctor.clipValue(startValue, min, max - selectedRange);
-        return [startValue, startValue + selectedRange];
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        const endValue = Number((startValue + selectedRange).toFixed(stepPrecision));
+        startValue = Number(startValue.toFixed(stepPrecision));
+        return [startValue, endValue];
     }
     /**
      * Computes the new value based on the difference of the current cursor location from the
@@ -670,6 +718,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         tooltip.followRef?.focus();
     }
     _onTooltipChange(e) {
+        // Skip if this is a focusout change event triggered by the swap focus change
+        if (this._areInputValuesSwapped) {
+            this._areInputValuesSwapped = false;
+            return;
+        }
         const tooltip = e.target;
         const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
         const inputValue = parseFloat(e.detail.value);
@@ -687,10 +740,12 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         const clampedValue = Math.min(this.max, Math.max(this.min, inputValue));
         if (isStart) {
+            this.tooltipStartValueState = ValueState.None;
             this.startValue = clampedValue;
             this._lastValidStartValue = clampedValue.toString();
         }
         else {
+            this.tooltipEndValueState = ValueState.None;
             this.endValue = clampedValue;
             this._lastValidEndValue = clampedValue.toString();
         }
@@ -729,10 +784,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
     }
     _onTooltipOpen() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        this.tooltipStartValue = this.startValue.toFixed(stepPrecision);
-        this.tooltipEndValue = this.endValue.toFixed(stepPrecision);
+        if (!this.startValue || !this.endValue) {
+            return;
+        }
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     _onTooltipInput(e) {
         const tooltip = e.target;
@@ -817,13 +873,14 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         return arr;
     }
     get _startHandle() {
-        return this.shadowRoot.querySelector(".ui5-slider-handle--start");
+        return this.shadowRoot.querySelector("[ui5-slider-handle][handle-type='Start']");
     }
     get _endHandle() {
-        return this.shadowRoot.querySelector(".ui5-slider-handle--end");
+        return this.shadowRoot.querySelector("[ui5-slider-handle][handle-type='End']");
     }
     get _progressBar() {
-        return this.shadowRoot.querySelector(".ui5-slider-progress");
+        const sliderScale = this.shadowRoot.querySelector("[ui5-slider-scale]");
+        return sliderScale?.shadowRoot?.querySelector(".ui5-slider-progress") ?? null;
     }
     get _ariaLabelledByStartHandleText() {
         return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-startHandleDesc"].join(" ").trim() : "ui5-slider-startHandleDesc";
@@ -831,6 +888,29 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     get _ariaLabelledByEndHandleText() {
         return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-endHandleDesc"].join(" ").trim() : "ui5-slider-endHandleDesc";
     }
+    /**
+     * @private
+     */
+    get _ariaLabelStartHandle() {
+        return this._getAriaLabelHandle(this._ariaHandlesText.startHandleText || "");
+    }
+    /**
+     * @private
+     */
+    get _ariaLabelEndHandle() {
+        return this._getAriaLabelHandle(this._ariaHandlesText.endHandleText || "");
+    }
+    _getAriaLabelHandle(handleDescription) {
+        const associatedLabelText = getAssociatedLabelForTexts(this);
+        const hasAccessibleName = !!this.accessibleName;
+        let labelText = hasAccessibleName
+            ? `${this.accessibleName} ${handleDescription}`
+            : handleDescription;
+        if (!hasAccessibleName && associatedLabelText) {
+            labelText = `${associatedLabelText} ${labelText}`;
+        }
+        return labelText;
+    }
     get _ariaLabelledByInputText() {
         return RangeSlider_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
     }
@@ -874,6 +954,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "rangePressed", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "_progressFocused", void 0);
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "_isStartValueValid", void 0);
@@ -889,7 +972,7 @@ RangeSlider = RangeSlider_1 = __decorate([
         languageAware: true,
         formAssociated: true,
         template: RangeSliderTemplate,
-        styles: [SliderBase.styles, rangeSliderStyles],
+        styles: [rangeSliderStyles],
     })
 ], RangeSlider);
 RangeSlider.define();