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

package/dist/CalendarHeaderTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeaderTemplate.js","sourceRoot":"","sources":["../src/CalendarHeaderTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,YAAY,MAAM,kDAAkD,CAAC;AAC5E,OAAO,aAAa,MAAM,mDAAmD,CAAC;AAc9E,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAiB,OAA+B;IAC7F,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,CAAC;IACvC,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC;IACzC,MAAM,MAAM,GAAG,OAAO,EAAE,MAAM,IAAI,IAAI,CAAC;IACvC,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,IAAI,KAAK,CAAC;IAEhD,MAAM,SAAS,GAAG,UAAU,EAAE,SAAS,IAAI,IAAI,CAAC,sBAAsB,CAAC;IACvE,MAAM,QAAQ,GAAG,UAAU,EAAE,QAAQ,IAAI,IAAI,CAAC,qBAAqB,CAAC;IACpE,MAAM,eAAe,GAAG,UAAU,EAAE,eAAe,IAAI,IAAI,CAAC,qBAAqB,CAAC;IAClF,MAAM,cAAc,GAAG,UAAU,EAAE,cAAc,IAAI,IAAI,CAAC,4BAA4B,CAAC;IAEvF,OAAO,CACN,eAAK,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,oBAAoB,aACpF,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,EAChD,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,SAAS,EAAE,SAAS,IAAI,EAAE;gBAC1B,QAAQ,EAAE,QAAQ,IAAI,EAAE;gBACxB,eAAe,EAAE,eAAe,IAAI,EAAE;gBACtC,cAAc,EAAE,cAAc,IAAI,EAAE;aACpC,CAAC,EACD,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,IACpD,CACN,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB,CAAiB,OAAgB,EAAE,UAAmB;IAC9E,IAAI,CAAC,OAAO,IAAI,UAAU,EAAE,CAAC;QAC5B,OAAO,cAAK,KAAK,EAAC,sBAAsB,GAAO,CAAC;IACjD,CAAC;IAED,OAAO,CACN,oDAEC,KAAK,EAAE;YACN,wBAAwB,EAAE,IAAI;YAC9B,iCAAiC,EAAE,IAAI,CAAC,uBAAuB;SAC/D,EACD,IAAI,EAAC,8BAA8B,EACnC,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,gBACzB,IAAI,CAAC,OAAO,CAAC,mBAAmB,sBAC1B,IAAI,CAAC,OAAO,CAAC,mBAAmB,uBAC/B,IAAI,CAAC,OAAO,CAAC,qBAAqB,YAErD,KAAC,IAAI,IAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,YAAY,GAAG,GACtD,CACN,CAAC;AACH,CAAC;AAED,SAAS,mBAAmB,CAE3B,UAKC;IAED,OAAO,CACN,eAAK,KAAK,EAAC,4BAA4B,aACtC,sDAEC,KAAK,EAAC,gDAAgD,EACtD,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAE,IAAI,CAAC,0BAA0B,EACvC,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,OAAO,CAAC,oBAAoB,sBAC3B,IAAI,CAAC,OAAO,CAAC,oBAAoB,EACnD,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,kBAAkB,uBACnB,IAAI,CAAC,OAAO,CAAC,sBAAsB,EACtD,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,IAAI,CAAC,kBAAkB,aAEhC,yBAAO,UAAU,CAAC,SAAS,GAAQ,EAClC,IAAI,CAAC,wBAAwB,IAAI,UAAU,CAAC,eAAe;wBAC3D,eAAM,KAAK,EAAC,2BAA2B,YAAE,UAAU,CAAC,eAAe,GAAQ,IAEvE,EAEN,qDAEC,KAAK,EAAC,gDAAgD,EACtD,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAE,IAAI,CAAC,yBAAyB,EACtC,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,OAAO,CAAC,mBAAmB,sBAC1B,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAClD,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,uBAClB,IAAI,CAAC,OAAO,CAAC,qBAAqB,aAErD,yBAAO,UAAU,CAAC,QAAQ,GAAQ,EACjC,IAAI,CAAC,wBAAwB,IAAI,UAAU,CAAC,cAAc;wBAC1D,eAAM,KAAK,EAAC,2BAA2B,YAAE,UAAU,CAAC,cAAc,GAAQ,IAEtE,EAEN,2DAEC,KAAK,EAAC,gDAAgD,EACtD,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAC3C,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,OAAO,CAAC,wBAAwB,sBAC/B,IAAI,CAAC,OAAO,CAAC,wBAAwB,EACvD,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,sBAAsB,uBACvB,IAAI,CAAC,OAAO,CAAC,0BAA0B,EAC1D,OAAO,EAAE,IAAI,CAAC,4BAA4B,EAC1C,SAAS,EAAE,IAAI,CAAC,wBAAwB,EACxC,OAAO,EAAE,IAAI,CAAC,sBAAsB,aAEpC,yBAAO,IAAI,CAAC,0BAA0B,GAAQ,EAC7C,IAAI,CAAC,wBAAwB;wBAC7B,eAAM,KAAK,EAAC,2BAA2B,YAAE,IAAI,CAAC,iCAAiC,GAAQ,IAEnF,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB,CAAiB,OAAgB,EAAE,MAAe,EAAE,UAAmB;IAC/F,uEAAuE;IACvE,4DAA4D;IAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,CAAC;IAC7D,MAAM,oBAAoB,GAAG,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC5E,MAAM,gBAAgB,GAAG,UAAU,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEvE,IAAI,oBAAoB,EAAE,CAAC;QAC1B,OAAO,CACN,oDAEC,KAAK,EAAE;gBACN,wBAAwB,EAAE,IAAI;gBAC9B,iCAAiC,EAAE,IAAI,CAAC,mBAAmB;aAC3D,EACD,IAAI,EAAC,8BAA8B,EACnC,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,gBACzB,IAAI,CAAC,OAAO,CAAC,mBAAmB,sBAC1B,IAAI,CAAC,OAAO,CAAC,mBAAmB,uBAC/B,IAAI,CAAC,OAAO,CAAC,qBAAqB,YAErD,KAAC,IAAI,IAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,aAAa,GAAG,GACvD,CACN,CAAC;IACH,CAAC;IAED,IAAI,gBAAgB,EAAE,CAAC;QACtB,OAAO,cAAK,KAAK,EAAC,sBAAsB,GAAO,CAAC;IACjD,CAAC;IAED,OAAO,IAAI,CAAC;AACb,CAAC","sourcesContent":["import type Calendar from \"./Calendar.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\ninterface CalendarHeaderOptions {\n\theaderText?: {\n\t\tmonthText: string;\n\t\tyearText: string;\n\t\tsecondMonthText?: string;\n\t\tsecondYearText?: string;\n\t};\n\tisFirst?: boolean;\n\tisLast?: boolean;\n\tisMultiple?: boolean;\n}\n\nexport default function CalendarHeaderTemplate(this: Calendar, options?: CalendarHeaderOptions) {\n\tconst headerText = options?.headerText;\n\tconst isFirst = options?.isFirst ?? true;\n\tconst isLast = options?.isLast ?? true;\n\tconst isMultiple = options?.isMultiple ?? false;\n\n\tconst monthText = headerText?.monthText ?? this._headerMonthButtonText;\n\tconst yearText = headerText?.yearText ?? this._headerYearButtonText;\n\tconst secondMonthText = headerText?.secondMonthText ?? this.secondMonthButtonText;\n\tconst secondYearText = headerText?.secondYearText ?? this._headerYearButtonTextSecType;\n\n\treturn (\n\t\t<div class={isMultiple ? \"ui5-calheader ui5-calheader-multiple\" : \"ui5-calheader-root\"}>\n\t\t\t{renderPrevButton.call(this, isFirst, isMultiple)}\n\t\t\t{renderMiddleButtons.call(this, {\n\t\t\t\tmonthText: monthText || \"\",\n\t\t\t\tyearText: yearText || \"\",\n\t\t\t\tsecondMonthText: secondMonthText || \"\",\n\t\t\t\tsecondYearText: secondYearText || \"\",\n\t\t\t})}\n\t\t\t{renderNextButton.call(this, isFirst, isLast, isMultiple)}\n\t\t</div>\n\t);\n}\n\nfunction renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean) {\n\tif (!isFirst && isMultiple) {\n\t\treturn <div class=\"ui5-calheader-spacer\"></div>;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-ui5-cal-header-btn-prev\n\t\t\tclass={{\n\t\t\t\t\"ui5-calheader-arrowbtn\": true,\n\t\t\t\t\"ui5-calheader-arrowbtn-disabled\": this._previousButtonDisabled,\n\t\t\t}}\n\t\t\tpart=\"calendar-header-arrow-button\"\n\t\t\trole=\"button\"\n\t\t\tonMouseDown={this.onPrevButtonClick}\n\t\t\ttabindex={this._previousButtonDisabled ? -1 : 0}\n\t\t\ttitle={this.accInfo.tooltipPrevButton}\n\t\t\taria-label={this.accInfo.ariaLabelPrevButton}\n\t\t\taria-description={this.accInfo.ariaLabelPrevButton}\n\t\t\taria-keyshortcuts={this.accInfo.keyShortcutPrevButton}\n\t\t>\n\t\t\t<Icon class=\"ui5-calheader-arrowicon\" name={slimArowLeft}/>\n\t\t</div>\n\t);\n}\n\nfunction renderMiddleButtons(\n\tthis: Calendar,\n\theaderText: {\n\t\tmonthText: string;\n\t\tyearText: string;\n\t\tsecondMonthText?: string;\n\t\tsecondYearText?: string;\n\t}\n) {\n\treturn (\n\t\t<div class=\"ui5-calheader-midcontainer\">\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-month\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderMonthButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelMonthButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelMonthButton}\n\t\t\t\ttitle={this.accInfo.tooltipMonthButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutMonthButton}\n\t\t\t\tonClick={this.onHeaderMonthButtonPress}\n\t\t\t\tonKeyDown={this.onMonthButtonKeyDown}\n\t\t\t\tonKeyUp={this.onMonthButtonKeyUp}\n\t\t\t>\n\t\t\t\t<span>{headerText.monthText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType && headerText.secondMonthText &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{headerText.secondMonthText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-year\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderYearButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelYearButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelYearButton}\n\t\t\t\tonClick={this.onHeaderYearButtonPress}\n\t\t\t\tonKeyDown={this.onYearButtonKeyDown}\n\t\t\t\tonKeyUp={this.onYearButtonKeyUp}\n\t\t\t\ttitle={this.accInfo.tooltipYearButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutYearButton}\n\t\t\t>\n\t\t\t\t<span>{headerText.yearText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType && headerText.secondYearText &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{headerText.secondYearText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-year-range\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderYearRangeButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelYearRangeButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelYearRangeButton}\n\t\t\t\ttitle={this.accInfo.tooltipYearRangeButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}\n\t\t\t\tonClick={this.onHeaderYearRangeButtonPress}\n\t\t\t\tonKeyDown={this.onYearRangeButtonKeyDown}\n\t\t\t\tonKeyUp={this.onYearRangeButtonKeyUp}\n\t\t\t>\n\t\t\t\t<span>{this._headerYearRangeButtonText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{this._headerYearRangeButtonTextSecType}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {\n\t// In portrait or compact mode, show next button only on first calendar\n\t// In landscape mode, show next button only on last calendar\n\tconst isVertical = this._portraitView || this._isCompactMode;\n\tconst shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);\n\tconst shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);\n\n\tif (shouldShowNextButton) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-next\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-calheader-arrowbtn\": true,\n\t\t\t\t\t\"ui5-calheader-arrowbtn-disabled\": this._nextButtonDisabled,\n\t\t\t\t}}\n\t\t\t\tpart=\"calendar-header-arrow-button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tonMouseDown={this.onNextButtonClick}\n\t\t\t\ttabindex={this._nextButtonDisabled ? -1 : 0}\n\t\t\t\ttitle={this.accInfo.tooltipNextButton}\n\t\t\t\taria-label={this.accInfo.ariaLabelNextButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelNextButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutNextButton}\n\t\t\t>\n\t\t\t\t<Icon class=\"ui5-calheader-arrowicon\" name={slimArowRight}/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (shouldShowSpacer) {\n\t\treturn <div class=\"ui5-calheader-spacer\"></div>;\n\t}\n\n\treturn null;\n}\n"]}
+{"version":3,"file":"CalendarHeaderTemplate.js","sourceRoot":"","sources":["../src/CalendarHeaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Calendar from \"./Calendar.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\ninterface CalendarHeaderOptions {\n\theaderText?: {\n\t\tmonthText: string;\n\t\tyearText: string;\n\t\tsecondMonthText?: string;\n\t\tsecondYearText?: string;\n\t};\n\tisFirst?: boolean;\n\tisLast?: boolean;\n\tisMultiple?: boolean;\n}\n\nexport default function CalendarHeaderTemplate(this: Calendar, options?: CalendarHeaderOptions) {\n\tconst headerText = options?.headerText;\n\tconst isFirst = options?.isFirst ?? true;\n\tconst isLast = options?.isLast ?? true;\n\tconst isMultiple = options?.isMultiple ?? false;\n\n\tconst monthText = headerText?.monthText ?? this._headerMonthButtonText;\n\tconst yearText = headerText?.yearText ?? this._headerYearButtonText;\n\tconst secondMonthText = headerText?.secondMonthText ?? this.secondMonthButtonText;\n\tconst secondYearText = headerText?.secondYearText ?? this._headerYearButtonTextSecType;\n\n\treturn (\n\t\t<div class={isMultiple ? \"ui5-calheader ui5-calheader-multiple\" : \"ui5-calheader-root\"}>\n\t\t\t{renderPrevButton.call(this, isFirst, isMultiple)}\n\t\t\t{renderMiddleButtons.call(this, {\n\t\t\t\tmonthText: monthText || \"\",\n\t\t\t\tyearText: yearText || \"\",\n\t\t\t\tsecondMonthText: secondMonthText || \"\",\n\t\t\t\tsecondYearText: secondYearText || \"\",\n\t\t\t})}\n\t\t\t{renderNextButton.call(this, isFirst, isLast, isMultiple)}\n\t\t</div>\n\t);\n}\n\nfunction renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean) {\n\tif (!isFirst && isMultiple) {\n\t\treturn <div class=\"ui5-calheader-spacer\"></div>;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-ui5-cal-header-btn-prev\n\t\t\tclass={{\n\t\t\t\t\"ui5-calheader-arrowbtn\": true,\n\t\t\t\t\"ui5-calheader-arrowbtn-disabled\": this._previousButtonDisabled,\n\t\t\t}}\n\t\t\tpart=\"calendar-header-arrow-button\"\n\t\t\trole=\"button\"\n\t\t\tonMouseDown={this.onPrevButtonClick}\n\t\t\tonKeyDown={this.onPrevButtonKeyDown}\n\t\t\tonKeyUp={this.onPrevButtonKeyUp}\n\t\t\ttabindex={this._previousButtonDisabled ? -1 : 0}\n\t\t\ttitle={this.accInfo.tooltipPrevButton}\n\t\t\taria-label={this.accInfo.ariaLabelPrevButton}\n\t\t\taria-description={this.accInfo.ariaLabelPrevButton}\n\t\t\taria-keyshortcuts={this.accInfo.keyShortcutPrevButton}\n\t\t>\n\t\t\t<Icon class=\"ui5-calheader-arrowicon\" name={slimArowLeft}/>\n\t\t</div>\n\t);\n}\n\nfunction renderMiddleButtons(\n\tthis: Calendar,\n\theaderText: {\n\t\tmonthText: string;\n\t\tyearText: string;\n\t\tsecondMonthText?: string;\n\t\tsecondYearText?: string;\n\t}\n) {\n\treturn (\n\t\t<div class=\"ui5-calheader-midcontainer\">\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-month\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderMonthButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelMonthButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelMonthButton}\n\t\t\t\ttitle={this.accInfo.tooltipMonthButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutMonthButton}\n\t\t\t\tonClick={this.onHeaderMonthButtonPress}\n\t\t\t\tonKeyDown={this.onMonthButtonKeyDown}\n\t\t\t\tonKeyUp={this.onMonthButtonKeyUp}\n\t\t\t>\n\t\t\t\t<span>{headerText.monthText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType && headerText.secondMonthText &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{headerText.secondMonthText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-year\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderYearButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelYearButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelYearButton}\n\t\t\t\tonClick={this.onHeaderYearButtonPress}\n\t\t\t\tonKeyDown={this.onYearButtonKeyDown}\n\t\t\t\tonKeyUp={this.onYearButtonKeyUp}\n\t\t\t\ttitle={this.accInfo.tooltipYearButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutYearButton}\n\t\t\t>\n\t\t\t\t<span>{headerText.yearText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType && headerText.secondYearText &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{headerText.secondYearText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-year-range\n\t\t\t\tclass=\"ui5-calheader-arrowbtn ui5-calheader-middlebtn\"\n\t\t\t\tpart=\"calendar-header-middle-button\"\n\t\t\t\thidden={this._isHeaderYearRangeButtonHidden}\n\t\t\t\ttabindex={0}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={this.accInfo.ariaLabelYearRangeButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelYearRangeButton}\n\t\t\t\ttitle={this.accInfo.tooltipYearRangeButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}\n\t\t\t\tonClick={this.onHeaderYearRangeButtonPress}\n\t\t\t\tonKeyDown={this.onYearRangeButtonKeyDown}\n\t\t\t\tonKeyUp={this.onYearRangeButtonKeyUp}\n\t\t\t>\n\t\t\t\t<span>{this._headerYearRangeButtonText}</span>\n\t\t\t\t{this.hasSecondaryCalendarType &&\n\t\t\t\t\t<span class=\"ui5-calheader-btn-sectext\">{this._headerYearRangeButtonTextSecType}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {\n\t// In portrait or compact mode, show next button only on first calendar\n\t// In landscape mode, show next button only on last calendar\n\tconst isVertical = this._portraitView || this._isCompactMode;\n\tconst shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);\n\tconst shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);\n\n\tif (shouldShowNextButton) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-ui5-cal-header-btn-next\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-calheader-arrowbtn\": true,\n\t\t\t\t\t\"ui5-calheader-arrowbtn-disabled\": this._nextButtonDisabled,\n\t\t\t\t}}\n\t\t\t\tpart=\"calendar-header-arrow-button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tonMouseDown={this.onNextButtonClick}\n\t\t\t\tonKeyDown={this.onNextButtonKeyDown}\n\t\t\t\tonKeyUp={this.onNextButtonKeyUp}\n\t\t\t\ttabindex={this._nextButtonDisabled ? -1 : 0}\n\t\t\t\ttitle={this.accInfo.tooltipNextButton}\n\t\t\t\taria-label={this.accInfo.ariaLabelNextButton}\n\t\t\t\taria-description={this.accInfo.ariaLabelNextButton}\n\t\t\t\taria-keyshortcuts={this.accInfo.keyShortcutNextButton}\n\t\t\t>\n\t\t\t\t<Icon class=\"ui5-calheader-arrowicon\" name={slimArowRight}/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (shouldShowSpacer) {\n\t\treturn <div class=\"ui5-calheader-spacer\"></div>;\n\t}\n\n\treturn null;\n}\n"]}

package/dist/ColorPaletteItem.d.ts

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IColorPaletteItem } from "./ColorPalette.js";
 type ColorPaletteItemNativeClickEventDetail = {
-    item: ColorPaletteItem;
     originalEvent: Event;
 };
 /**

package/dist/ColorPaletteItem.js

@@ -97,7 +97,6 @@ let ColorPaletteItem = ColorPaletteItem_1 = class ColorPaletteItem extends UI5El
         e.stopImmediatePropagation();
         // Fire semantic click event (CustomEvent that bubbles)
         const prevented = !this.fireDecoratorEvent("click", {
-            item: this,
             originalEvent: e,
         });
         if (prevented) {
@@ -143,7 +142,6 @@ ColorPaletteItem = ColorPaletteItem_1 = __decorate([
      *
      * **Note:** The event will not be fired if the `disabled` property is set to `true`.
      *
-     * @param {ColorPaletteItem} item The color palette item that was clicked.
      * @param {Event} originalEvent The original DOM event that triggered the click. Use this to access modifier keys (altKey, ctrlKey, metaKey, shiftKey) and other native event properties.
      * @since 2.22.0
      * @public

package/dist/ColorPaletteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPaletteItem.js","sourceRoot":"","sources":["../src/ColorPaletteItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IColorPaletteItem } from \"./ColorPalette.js\";\nimport ColorPaletteItemTemplate from \"./ColorPaletteItemTemplate.js\";\nimport {\n\tCOLORPALETTE_COLOR_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\n// Styles\nimport ColorPaletteItemCss from \"./generated/themes/ColorPaletteItem.css.js\";\n\ntype ColorPaletteItemNativeClickEventDetail = {\n\titem: ColorPaletteItem,\n\toriginalEvent: Event;\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.12\n * @implements { IColorPaletteItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-color-palette-item\",\n\trenderer: jsxRenderer,\n\tstyles: ColorPaletteItemCss,\n\ttemplate: ColorPaletteItemTemplate,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled` property is set to `true`.\n *\n * @param {ColorPaletteItem} item The color palette item that was clicked.\n * @param {Event} originalEvent The original DOM event that triggered the click. Use this to access modifier keys (altKey, ctrlKey, metaKey, shiftKey) and other native event properties.\n * @since 2.22.0\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass ColorPaletteItem extends UI5Element implements IColorPaletteItem {\n\teventDetails!: {\n\t\t\"click\": ColorPaletteItemNativeClickEventDetail,\n\t}\n\t/**\n\t * Defines the colour of the component.\n\t *\n\t * **Note:** The value should be a valid CSS color.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\"\n\n\t/**\n\t * Defines if the component is selected.\n\t *\n\t * **Note:** Only one item must be selected per <code>ui5-color-palette</code>.\n\t * If more than one item is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the tooltip of the component. When not set, the color value is used as the tooltip.\n\t *\n\t * @default undefined\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines the tab-index of the element, helper information for the ItemNavigation.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the index of the item inside of the ColorPalette.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tindex?: number;\n\n\t/**\n\t * Defines if the ColorPalette is on phone mode.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tonPhone = false;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\t_disabled = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._disabled = !this.value;\n\t\tthis.onPhone = isPhone();\n\n\t\t// since height is dynamically determined by padding-block-start\n\t\tconst itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom\n\t\tthis.style.setProperty(\"--_ui5_color_palette_item_height\", `${itemHeight}px`);\n\n\t\tthis.style.setProperty(\"--_ui5-color-palette-item-background-color\", `${this.value}`);\n\t}\n\n\tget colorLabel() {\n\t\treturn ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);\n\t}\n\n\tget getLabelText(): string {\n\t\treturn `${this.colorLabel} - ${this.index}: ${this.tooltip || this.value}`;\n\t}\n\n\tget classes() {\n\t\t// Remove after deleting the hbs template, it's added in the jsx template\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-cp-item\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\tif (this._disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\treturn;\n\t\t}\n\n\t\te.stopImmediatePropagation();\n\n\t\t// Fire semantic click event (CustomEvent that bubbles)\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", {\n\t\t\titem: this,\n\t\t\toriginalEvent: e,\n\t\t});\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\t}\n}\n\nColorPaletteItem.define();\n\nexport default ColorPaletteItem;\nexport type { ColorPaletteItemNativeClickEventDetail };\n"]}
+{"version":3,"file":"ColorPaletteItem.js","sourceRoot":"","sources":["../src/ColorPaletteItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IColorPaletteItem } from \"./ColorPalette.js\";\nimport ColorPaletteItemTemplate from \"./ColorPaletteItemTemplate.js\";\nimport {\n\tCOLORPALETTE_COLOR_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\n// Styles\nimport ColorPaletteItemCss from \"./generated/themes/ColorPaletteItem.css.js\";\n\ntype ColorPaletteItemNativeClickEventDetail = {\n\toriginalEvent: Event,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.12\n * @implements { IColorPaletteItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-color-palette-item\",\n\trenderer: jsxRenderer,\n\tstyles: ColorPaletteItemCss,\n\ttemplate: ColorPaletteItemTemplate,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled` property is set to `true`.\n *\n * @param {Event} originalEvent The original DOM event that triggered the click. Use this to access modifier keys (altKey, ctrlKey, metaKey, shiftKey) and other native event properties.\n * @since 2.22.0\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass ColorPaletteItem extends UI5Element implements IColorPaletteItem {\n\teventDetails!: {\n\t\t\"click\": ColorPaletteItemNativeClickEventDetail,\n\t}\n\t/**\n\t * Defines the colour of the component.\n\t *\n\t * **Note:** The value should be a valid CSS color.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\"\n\n\t/**\n\t * Defines if the component is selected.\n\t *\n\t * **Note:** Only one item must be selected per <code>ui5-color-palette</code>.\n\t * If more than one item is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the tooltip of the component. When not set, the color value is used as the tooltip.\n\t *\n\t * @default undefined\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines the tab-index of the element, helper information for the ItemNavigation.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the index of the item inside of the ColorPalette.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tindex?: number;\n\n\t/**\n\t * Defines if the ColorPalette is on phone mode.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tonPhone = false;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\t_disabled = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._disabled = !this.value;\n\t\tthis.onPhone = isPhone();\n\n\t\t// since height is dynamically determined by padding-block-start\n\t\tconst itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom\n\t\tthis.style.setProperty(\"--_ui5_color_palette_item_height\", `${itemHeight}px`);\n\n\t\tthis.style.setProperty(\"--_ui5-color-palette-item-background-color\", `${this.value}`);\n\t}\n\n\tget colorLabel() {\n\t\treturn ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);\n\t}\n\n\tget getLabelText(): string {\n\t\treturn `${this.colorLabel} - ${this.index}: ${this.tooltip || this.value}`;\n\t}\n\n\tget classes() {\n\t\t// Remove after deleting the hbs template, it's added in the jsx template\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-cp-item\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\tif (this._disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\treturn;\n\t\t}\n\n\t\te.stopImmediatePropagation();\n\n\t\t// Fire semantic click event (CustomEvent that bubbles)\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", {\n\t\t\toriginalEvent: e,\n\t\t});\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\t}\n}\n\nColorPaletteItem.define();\n\nexport default ColorPaletteItem;\nexport type { ColorPaletteItemNativeClickEventDetail };\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();