@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/RangeSliderTemplate.tsx

@@ -1,120 +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.startValue.toString()}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-start-value
-				editable={this.editableTooltip}
-				followRef={this._startHandle}
-				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
-			>
-			</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.endValue.toString()}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-end-value
-				editable={this.editableTooltip}
-				followRef={this._endHandle}
-				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+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/RatingIndicatorTemplate.tsx

@@ -1,8 +1,6 @@
 import type RatingIndicator from "./RatingIndicator.js";
 import type { Star } from "./RatingIndicator.js";
 import Icon from "./Icon.js";
-import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
-import unfavorite from "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 export default function RatingIndicatorTemplate(this: RatingIndicator) {
 	return (
@@ -37,38 +35,40 @@ function starLi(this: RatingIndicator, star: Star) {
 	if (star.selected) {
 		return (
 			<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.ratedIcon} />
 			</li>
 		);
 	} if (star.halfStar) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
-				<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
-				<div class="ui5-rating-indicator-half-icon-wrapper">
-					<Icon data-ui5-value={star.index} name={favorite} class="ui5-rating-indicator-half-icon" />
+				<div class="ui5-rating-indicator-half-icon-wrapper ui5-rating-indicator-half-icon-left">
+					<Icon data-ui5-value={star.index} name={this.ratedIcon} />
+				</div>
+				<div class="ui5-rating-indicator-half-icon-wrapper ui5-rating-indicator-half-icon-right">
+					<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
 				</div>
 			</li>
 		);
 	} if (this.readonly) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.ratedIcon} />
 			</li>
 		);
 	} if (this.disabled) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.ratedIcon} />
 			</li>
 		);
 	}
 	return (
 		<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-			<Icon data-ui5-value={star.index} name={unfavorite}/>
+			<Icon data-ui5-value={star.index} name={this.unratedIcon}/>
 		</li>
 	);
 }
 
 function halfStarIconName(this: RatingIndicator) {
-	return this.disabled || this.readonly ? favorite : unfavorite;
+	return this.disabled || this.readonly ? this.ratedIcon : this.unratedIcon;
 }

package/src/SelectTemplate.tsx

@@ -38,7 +38,6 @@ export default function SelectTemplate(this: Select) {
 					aria-expanded={this._isPickerOpen}
 					aria-roledescription={this._ariaRoleDescription}
 					onKeyDown={this._onkeydown}
-					onKeyPress={this._handleKeyboardNavigation}
 					onKeyUp={this._onkeyup}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}

package/src/SliderHandleTemplate.tsx

@@ -0,0 +1,21 @@
+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": 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"
+				slider-icon
+			></Icon>
+		</div>
+	);
+}

package/src/SliderScaleTemplate.tsx

@@ -0,0 +1,57 @@
+import type SliderScale from "./SliderScale.js";
+
+export default function SliderScaleTemplate(this: SliderScale) {
+	return (
+		<div class="ui5-slider-scale-root" part="inner">
+			{this._tickmarks.length > 0 && (
+				<div class="ui5-slider-scale-tickmarks-container">
+					{this._tickmarks.map(tick => (
+						<div
+							class={{
+								"ui5-slider-scale-tickmark": true,
+								"ui5-slider-scale-tickmark-in-range": tick.isInRange,
+							}}
+							style={{
+								insetInlineStart: `${this.orientation === "Horizontal" ? tick.position : "50"}%`,
+								bottom: `${this.orientation === "Vertical" ? tick.position : "auto"}%`
+							}}
+						>
+							{tick.label && tick.showLabel && (
+								<span class="ui5-slider-scale-tickmark-label">
+									{tick.label}
+								</span>
+							)}
+						</div>
+					))}
+				</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

@@ -1,73 +1,96 @@
-import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type Slider from "./Slider.js";
-import Icon from "./Icon.js";
-import SliderBaseTemplate from "./SliderBaseTemplate.js";
 import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
 
-export default function SliderTemplate(this: Slider) {
-	return SliderBaseTemplate.call(this, {
-		progressBar,
-		handles,
-	});
-}
+const _handlePosition = (min: number, max: number, value: number) => {
+	const range = max - min;
+	const position = ((value - min) / range) * 100;
+	return position;
+};
+
+const handle = (slider: Slider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.value);
 
-export function progressBar(this: Slider) {
 	return (
-		<div
-			class="ui5-slider-progress-container"
-			aria-hidden="true"
-			part="progress-container"
-		>
-			<div class="ui5-slider-progress"
-				style={this.styles.progress}
-				onFocusOut={this._onfocusout}
-				onFocusIn={this._onfocusin}
-				tabIndex={-1}
-				part="progress-bar"
-			></div>
-		</div>
+		<>
+			<SliderHandle
+				data-sap-focus-ref
+				value={slider.value}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider.disabled ? -1 : 0}
+				aria-orientation="horizontal"
+				part="handle"
+				exportparts="icon: handle-icon"
+				role="slider"
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.value}
+				aria-label={slider._ariaLabel}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
+
+			{tooltip(slider)}
+		</>
 	);
-}
+};
 
-export function handles(this: Slider) {
+const tooltip = (slider: Slider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipValue}
+		min={slider.min}
+		max={slider.max}
+		editable={slider.editableTooltip}
+		followRef={slider.shadowRoot?.querySelector("[ui5-slider-handle]") as HTMLElement}
+		valueState={slider.tooltipValueState}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+export default function SliderTemplate(this: Slider) {
 	return (
-		<div class="ui5-slider-handle-container" style={this.styles.handle} part="handle-container">
-			<div class="ui5-slider-handle"
-				onFocusOut={this._onfocusout}
-				onFocusIn={this._onfocusin}
+		<>
+			<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}
-				role="slider"
-				tabIndex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.value}
-				aria-label={this._ariaLabel}
-				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts={this._ariaKeyshortcuts}
-				aria-describedby={this._ariaDescribedByHandleText}
-				data-sap-focus-ref
-				part="handle"
-				id="handle1"
 			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					part="icon-slider"
-					slider-icon
-				></Icon>
-			</div>
+				<SliderScale
+					endValue={this.value}
+					min={this.min}
+					max={this.max}
+					step={this.step}
+					startValue={this.min}
+					showTickmarks={this.showTickmarks}
+					labelInterval={this.labelInterval}
+					onFocusOut={this._onfocusout}
+					onFocusIn={this._onfocusin}
+					part="scale"
+					exportparts="inner: scale-inner, progress: progress"
+				>
+					{handle(this)}
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipValue}
-				min={this.min}
-				max={this.max}
-				editable={this.editableTooltip}
-				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
-				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
-			>
-			</SliderTooltip>
-		</div>
+					{this.editableTooltip && <>
+						<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+					</>}
+				</SliderScale>
+			</div>
+		</>
 	);
 }

package/src/SliderTooltipTemplate.tsx

@@ -9,9 +9,10 @@ export default function SliderTooltipTemplate(this: SliderTooltip) {
 					value={this.value}
 					type="Number"
 					accessibleNameRef="ui5-slider-InputLabel"
-					onKeyDown={this._keydown}
 					onFocusIn={this._onInputFocusin}
 					onFocusOut={this._onInputFocusOut}
+					onKeyDown={this._onInputKeydown}
+					onInput={this._onInputInput}
 					tabIndex={-1}
 					data-sap-focus-ref
 					valueState={this.valueState}

package/src/SplitButtonTemplate.tsx

@@ -5,10 +5,10 @@ import Button from "./Button.js";
 export default function SplitButtonTemplate(this: SplitButton) {
 	return (
 		<div
-			role={this._hideArrowButton ? "button" : "group"}
+			role={this._hideArrowButton ? "presentation" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-labelledby={!this._hideArrowButton ? `${this._id}-invisibleTextDefault ${this._id}-invisibleText` : undefined}
 			aria-haspopup={this._computedAccessibilityAttributes?.root?.hasPopup}
 			aria-roledescription={this._computedAccessibilityAttributes?.root?.roleDescription}
 			aria-label={this._computedAccessibilityAttributes?.root?.title}

package/src/StepInputTemplate.tsx

@@ -13,6 +13,7 @@ export default function StepInputTemplate(this: StepInput) {
 			onKeyDown={this._onkeydown}
 			onFocusIn={this._onfocusin}
 			onFocusOut={this._onfocusout}
+			onWheel={this._onMouseWheel}
 		>
 			{/* Decrement Icon */}
 			{!this.readonly &&
@@ -50,6 +51,7 @@ export default function StepInputTemplate(this: StepInput) {
 				disabled={this.disabled}
 				required={this.required}
 				readonly={this.readonly}
+				onui5-_request-submit={this._onInputRequestSubmit}
 				valueState={this.valueState}
 				_inputAccInfo={this.accInfo}
 				_nativeInputAttributes={this.inputAttributes}

package/src/SwitchTemplate.tsx

@@ -20,10 +20,13 @@ export default function SwitchTemplate(this: Switch) {
 			aria-label={this.ariaLabelText}
 			aria-checked={this.checked}
 			aria-disabled={this.effectiveAriaDisabled}
+			aria-readonly={this.effectiveAriaReadonly}
 			aria-required={this.required}
+			aria-describedby={this.ariaDescribedBy}
 			onClick={this._onclick}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}
+			onFocusIn={this._onfocusin}
 			tabindex={this.effectiveTabIndex}
 			title={this.tooltip}
 		>
@@ -52,13 +55,15 @@ export default function SwitchTemplate(this: Switch) {
 									</>
 									:
 									<>
-										<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{this._textOn}</span>
-										<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{this._textOff}</span>
+										<span class="ui5-switch-text ui5-switch-text--on" part="text-on" aria-hidden={this._textAriaHidden}>{this._textOn}</span>
+										<span class="ui5-switch-text ui5-switch-text--off" part="text-off" aria-hidden={this._textAriaHidden}>{this._textOff}</span>
 									</>
 								}
 							</>
 						}
 
+						{this.readonly && <span class="ui5-switch-text ui5-switch-text--readonly" id={this.ariaDescribedBy} aria-hidden={this._textAriaHidden}>{this.ariaDescribedByText}</span>}
+
 						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>

package/src/TableGroupRowTemplate.tsx

@@ -0,0 +1,24 @@
+import TableCell from "./TableCell.js";
+import type TableGroupRow from "./TableGroupRow.js";
+
+export default function TableGroupRowTemplate(this: TableGroupRow) {
+	return (
+		<>
+			<TableCell id="group-cell"
+				aria-colindex={1}
+				aria-colspan={this._ariaColSpan}
+				data-excluded-from-navigation={true}
+			>
+				<slot></slot>
+			</TableCell>
+
+			{ this._renderDummyCell &&
+				<TableCell id="dummy-cell"
+					role="none"
+					aria-hidden={true}
+					data-excluded-from-navigation="nofocus"
+				></TableCell>
+			}
+		</>
+	);
+}