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

package/package-scripts.cjs

@@ -5,6 +5,7 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	standalone: false,
 	cssVariablesTarget: "host",
 	internal: {
 		cypress_code_coverage: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.3",
+  "version": "2.22.0-rc.5",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.3",
-    "@ui5/webcomponents-localization": "2.22.0-rc.3",
-    "@ui5/webcomponents-theming": "2.22.0-rc.3"
+    "@ui5/webcomponents-base": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.5",
+    "@ui5/webcomponents-localization": "2.22.0-rc.5",
+    "@ui5/webcomponents-theming": "2.22.0-rc.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.0-rc.3",
+    "@ui5/webcomponents-tools": "2.22.0-rc.5",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "38fe9415447d8f3d68eb801e4c0fab65295dca7f"
+  "gitHead": "f42d27cb7d91aad64df6bf51b3b4cc02d5972b2f"
 }

package/src/AvatarBadgeTemplate.tsx

@@ -8,8 +8,7 @@ export default function AvatarBadgeTemplate(this: AvatarBadge) {
 				<Icon
 					name={this.icon}
 					class="ui5-avatar-badge-icon"
-					accessibleName={this.effectiveAccessibleName}
-					showTooltip={true}
+					title={this.effectiveTooltip}
 					mode="Image"
 				></Icon>
 			)}

package/src/CalendarHeaderTemplate.tsx

@@ -56,6 +56,8 @@ function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean)
 			part="calendar-header-arrow-button"
 			role="button"
 			onMouseDown={this.onPrevButtonClick}
+			onKeyDown={this.onPrevButtonKeyDown}
+			onKeyUp={this.onPrevButtonKeyUp}
 			tabindex={this._previousButtonDisabled ? -1 : 0}
 			title={this.accInfo.tooltipPrevButton}
 			aria-label={this.accInfo.ariaLabelPrevButton}
@@ -162,6 +164,8 @@ function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isM
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				onKeyDown={this.onNextButtonKeyDown}
+				onKeyUp={this.onNextButtonKeyUp}
 				tabindex={this._nextButtonDisabled ? -1 : 0}
 				title={this.accInfo.tooltipNextButton}
 				aria-label={this.accInfo.ariaLabelNextButton}

package/src/ListItemBaseTemplate.tsx

@@ -1,7 +1,7 @@
 import type ListItemBase from "./ListItemBase.js";
-import type { AriaRole } from "@ui5/webcomponents-base/";
+import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
 
-export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: () => void }, injectedProps?: {
+export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
 	role?: AriaRole,
 	title?: string,
 }) {
@@ -21,7 +21,7 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{ listItemContent.call(this) }
+			{ listItemContent.call(this) as JSX.Element }
 		</li>
 	);
 }

package/src/MenuItemTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 import type MenuItem from "./MenuItem.js";
 import PopoverPlacement from "./types/PopoverPlacement.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -11,14 +12,29 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-const predefinedHooks: Partial<ListItemHooks> = {
-	listItemContent,
+export type MenuItemHooks = ListItemHooks & {
+	menuItemTextContent: JsxTemplate;
+}
+
+const predefinedHooks: Partial<MenuItemHooks> = {
 	iconBegin,
+	menuItemTextContent,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
+	if (!hooks?.listItemContent) {
+		currentHooks.listItemContent = function listItemContent(this: MenuItem) {
+			return (<>
+				{currentHooks.menuItemTextContent!.call(this)}
+
+				{rightContent.call(this)}
+				{checkmarkContent.call(this)}
+			</>);
+		};
+	}
+
 	return <>
 		{ListItemTemplate.call(this, currentHooks)}
 
@@ -26,13 +42,8 @@ export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListIte
 	</>;
 }
 
-function listItemContent(this: MenuItem) {
-	return (<>
-		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
-
-		{rightContent.call(this)}
-		{checkmarkContent.call(this)}
-	</>);
+function menuItemTextContent(this: MenuItem) {
+	return <>{this.text && <div class="ui5-menu-item-text">{this.text}</div>}</>;
 }
 
 function checkmarkContent(this: MenuItem) {

package/src/PanelTemplate.tsx

@@ -89,15 +89,22 @@ export default function PanelTemplate(this: Panel) {
 
 			{/* content area */}
 			<div
-				class="ui5-panel-content"
-				id={ `${this._id}-content` }
-				tabindex={ -1 }
+				class={{
+					"ui5-panel-content-wrapper": true,
+					"ui5-panel-content-focusable": this._contentFocusable,
+				}}
 				style={{
 					display: this._contentExpanded ? "block" : "none",
 				}}
-				part="content"
 			>
-				<slot></slot>
+				<div
+					class="ui5-panel-content"
+					id={ `${this._id}-content` }
+					tabindex={ this._contentTabIndex }
+					part="content"
+				>
+					<slot></slot>
+				</div>
 			</div>
 		</div>
 	</>);

package/src/RangeSliderTemplate.tsx

@@ -1,128 +1,161 @@
-import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type RangeSlider from "./RangeSlider.js";
-import Icon from "./Icon.js";
-import SliderBaseTemplate from "./SliderBaseTemplate.js";
 import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle, { SliderHandleType } from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
 
-export default function RangeSliderTemplate(this: RangeSlider) {
-	return SliderBaseTemplate.call(this, {
-		handlesAriaText,
-		progressBar,
-		handles,
-	});
-}
+const _handlePosition = (min: number, max: number, value: number) => {
+	const range = max - min;
+	const position = ((value - min) / range) * 100;
+	return position;
+};
 
-export function handlesAriaText(this: RangeSlider) {
-	return (<>
-		<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.startHandleText}</span>
-		<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.endHandleText}</span>
-	</>);
-}
+const startHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.startValue);
 
-export function progressBar(this: RangeSlider) {
 	return (
-		<div
-			class="ui5-slider-progress-container"
-			part="progress-container"
-		>
-			<div class="ui5-slider-progress"
-				part="progress-bar"
-				style={this.styles.progress}
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
-				role="slider"
-				tabIndex={this._tabIndex}
+		<>
+			<SliderHandle
+				value={slider.startValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.Start}
 				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this._ariaValueNow}
-				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
-				aria-label={this._ariaLabel}
-				aria-disabled={this._ariaDisabled}
-			></div>
-		</div>
-	);
-}
-
-export function handles(this: RangeSlider) {
-	return (<>
-		<div class="ui5-slider-handle-container" style={this.styles.startHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--start"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabindex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.startValue}
-				aria-labelledby={this._ariaLabelledByStartHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts={this._ariaKeyshortcuts}
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.startValue}
+				aria-label={slider._ariaLabelStartHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipStartValue}
-				valueState={this.tooltipStartValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-start-value
-				editable={this.editableTooltip}
-				followRef={this._startHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
-			>
-			</SliderTooltip>
-		</div>
-		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--end"
+			{startTooltip(slider)}
+		</>
+	);
+};
+
+const endHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.endValue);
+
+	return (
+		<>
+			<SliderHandle
+				value={slider.endValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.End}
+				aria-orientation="horizontal"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabIndex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.endValue}
-				aria-labelledby={this._ariaLabelledByEndHandleText}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.endValue}
+				aria-label={slider._ariaLabelEndHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
+
+			{endTooltip(slider)}
+		</>
+	);
+};
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipEndValue}
-				valueState={this.tooltipEndValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-end-value
-				editable={this.editableTooltip}
-				followRef={this._endHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
+const startTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipStartValue}
+		valueState={slider.tooltipStartValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-start-value
+		editable={slider.editableTooltip}
+		followRef={slider._startHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+const endTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipEndValue}
+		valueState={slider.tooltipEndValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-end-value
+		editable={slider.editableTooltip}
+		followRef={slider._endHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+export default function RangeSliderTemplate(this: RangeSlider) {
+	return (
+		<>
+			<div
+				class="ui5-slider-evo-root"
+				part="root-container"
+				onMouseDown={this._onmousedown}
+				onTouchStart={this._onmousedown}
+				onMouseOver={this._onmouseover}
+				onMouseOut={this._onmouseout}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
 			>
-			</SliderTooltip>
-		</div>
-	</>);
+				<SliderScale
+					startValue={this.startValue}
+					endValue={this.endValue}
+					min={this.min}
+					max={this.max}
+					step={this._effectiveStep}
+					showTickmarks={this.showTickmarks}
+					labelInterval={this.labelInterval}
+					progressTabIndex={this._tabIndex}
+					progressAriaValueNow={this._ariaValueNow}
+					progressAriaValueText={`From ${this.startValue} to ${this.endValue}`}
+					progressAriaLabel={this._ariaLabel}
+					progressAriaDisabled={this._ariaDisabled}
+					progressPressed={this.rangePressed}
+					progressFocused={this._progressFocused}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+					part="scale"
+					exportparts="inner: scale-inner, progress: progress-bar"
+				>
+					{startHandle(this)}
+					{endHandle(this)}
+
+					{this.editableTooltip && <>
+						<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+					</>}
+				</SliderScale>
+			</div>
+		</>
+	);
 }

package/src/SliderHandleTemplate.tsx

@@ -1,10 +1,16 @@
 import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import Icon from "./Icon.js";
 import type SliderHandle from "./SliderHandle.js";
+import { SliderHandleType } from "./SliderHandle.js";
 
 export default function SliderHandleTemplate(this: SliderHandle) {
 	return (
-		<div class="ui5-slider-handle-container">
+		<div class={{
+			"ui5-slider-handle-container": true,
+			"ui5-slider-handle": true,
+			"ui5-slider-handle--start": this.handleType === SliderHandleType.Start,
+			"ui5-slider-handle--end": this.handleType === SliderHandleType.End,
+		}}>
 			<Icon name={directionArrows}
 				mode="Decorative"
 				part="icon"

package/src/SliderScaleTemplate.tsx

@@ -25,7 +25,32 @@ export default function SliderScaleTemplate(this: SliderScale) {
 					))}
 				</div>
 			)}
-			<div class="ui5-slider-scale-progress" part="progress" style={this._progressStyle}></div>
+			<div
+				class={{
+					"ui5-slider-scale-progress": true,
+					"ui5-slider-progress": true,
+					"ui5-slider-progress--focused": this.progressFocused || this.progressPressed,
+				}}
+				part="progress"
+				style={this._progressStyle}
+				tabIndex={this.progressTabIndex}
+				role="slider"
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.progressAriaValueNow}
+				aria-valuetext={this.progressAriaValueText}
+				aria-label={this.progressAriaLabel}
+				aria-disabled={this.progressAriaDisabled}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
+			<div
+				class="ui5-slider-scale-progress-hover-area"
+				style={this._progressStyle}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
 			<slot></slot>
 		</div>
 	);

package/src/SliderTemplate.tsx

@@ -29,7 +29,6 @@ const handle = (slider: Slider) => {
 				aria-valuenow={slider.value}
 				aria-label={slider._ariaLabel}
 				aria-disabled={slider._ariaDisabled}
-				aria-keyshortcuts={slider._ariaKeyshortcuts}
 				aria-describedby={slider._ariaDescribedByHandleText}
 				style={{
 					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,

package/src/TableHeaderRowTemplate.tsx

@@ -54,13 +54,35 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="">
+				</TableHeaderCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					<div id="actions-cell-content">{this._i18nRowActions}</div>
 				</TableHeaderCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderNavigated &&
+				<TableHeaderCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+					role="none"
+				>
+					<div id="navigated"></div>
+				</TableHeaderCell>
+			}
+
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="nofocus">
+				</TableHeaderCell>
+			}
+
+			{ this._hasPopin &&
 				<TableHeaderCell id="popin-cell" aria-colindex={ariaColIndex++} data-excluded-from-navigation>
 					<div id="popin-cell-content">{this._i18nRowPopin}</div>
 				</TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -47,6 +47,12 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="">
+				</TableCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
@@ -80,7 +86,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				</TableCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="nofocus">
+				</TableCell>
+			}
+
+			{ this._hasPopin &&
 				<TableCell id="popin-cell"
 					data-ui5-table-popin-cell
 					aria-colindex={ariaColIndex++}

package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx

@@ -10,8 +10,14 @@ export default function DateTimeRangeTemplate(this: DynamicDateRange) {
 	const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
 
 	const getDateFromValue = (index = 0) => {
-		if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
-			return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+		const source = this.currentValue?.operator === currentOperator && this.currentValue.values?.length === 2
+			? this.currentValue
+			: this.value?.operator === currentOperator && this.value.values?.length === 2
+				? this.value
+				: undefined;
+
+		if (source) {
+			return this.getOption(source.operator)?.format(source)?.split("-")[index].trim();
 		}
 		return undefined;
 	};

package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx

@@ -8,7 +8,7 @@ import type FromDateTimeOption from "./FromDateTime.js";
 
 export default function FromDateTime(this: DynamicDateRange) {
 	const currentOption = this._currentOption as FromDateTimeOption;
-	const currentValue = this.value?.values ? this.value.values[0] as Date : undefined;
+	const currentValue = (this.currentValue?.values ?? this.value?.values)?.[0] as Date | undefined;
 	return (
 		<div class="ui5-dynamic-date-range-option-datetime-container">
 			<div class="ui5-dt-picker-header">

package/src/i18n/messagebundle.properties

@@ -478,10 +478,10 @@ PANEL_ICON=Expand/Collapse
 RANGE_SLIDER_ARIA_DESCRIPTION=Range
 
 #XACT: ARIA description for range slider start handle
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Left handle
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Minimum
 
 #XACT: ARIA description for range slider end handle
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Right handle
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Maximum
 
 #XBUT: Rating indicator tooltip text
 RATING_INDICATOR_TOOLTIP_TEXT=Rating

package/src/themes/Dialog.css

@@ -1,8 +1,8 @@
 @import "./InvisibleTextStyles.css";
 
 :host {
-	min-width: 20rem;
-	min-height: 6rem;
+	min-width: min(20rem, 90vw);
+	min-height: min(6rem, 90vh);
 	max-height: 94%;
 	max-width: 90%;
 	flex-direction: column;