Replace kolSelect with split button in pagination

packages/components/src/components/@shared/kol-menu.scss

@@ -0,0 +1,16 @@
+@mixin kol-menu-styles {
+	.menu {
+		&__listbox {
+			width: 100%;
+			padding: 0;
+			box-sizing: border-box;
+			display: grid;
+			list-style: none;
+			margin: 0;
+			overflow-y: auto;
+			overflow-x: hidden;
+			background-color: white;
+			max-height: rem(250);
+		}
+	}
+}

packages/components/src/components/@shared/kol-menu.tsx

@@ -0,0 +1,60 @@
+import type { FunctionalComponent } from '@stencil/core';
+import { h } from '@stencil/core';
+import type { JSX } from '@stencil/core/internal';
+import type { Option } from '../../schema';
+import clsx from 'clsx';
+// import { KolButtonTag } from '../../core/component-names';
+
+type KolMenuProps = {
+	options: Option<number>[];
+	focusedOptionIndex: number;
+	onItemClick: (event: Event, option: unknown) => void;
+	renderOption?: (option: Option<number>) => JSX.Element;
+	selectedValue?: number | string;
+};
+export const KolMenu: FunctionalComponent<KolMenuProps> = ({ options, onItemClick, renderOption, selectedValue }) => {
+	const listItems: (HTMLElement | undefined)[] = [];
+
+	function handleKeyDown(event: KeyboardEvent, index: number, option: unknown): void {
+		if (event.key === 'ArrowDown') {
+			const nextIndex = index + 1 < listItems.length ? index + 1 : 0;
+			listItems[nextIndex]?.focus();
+			event.preventDefault();
+		} else if (event.key === 'ArrowUp') {
+			const prevIndex = index - 1 >= 0 ? index - 1 : listItems.length - 1;
+			listItems[prevIndex]?.focus();
+			event.preventDefault();
+		} else if (event.key === 'Enter' || event.key === ' ') {
+			onItemClick(event, option);
+			event.preventDefault();
+		}
+	}
+	return (
+		<div class="menu">
+			<ul role="listbox" class={clsx('menu__listbox')}>
+				{options.length > 0 &&
+					options.map((option, index) => (
+						<li
+							ref={(el) => (listItems[index] = el)}
+							id={`option-${index}`}
+							key={index}
+							tabIndex={-1}
+							role="option"
+							class="menu__item"
+							aria-selected={selectedValue === option.value}
+							onKeyDown={(event) => handleKeyDown(event, index, option)}
+							onClick={(event) => onItemClick(event, option)}
+							onMouseOver={() => {
+								listItems[index]?.focus();
+							}}
+							onFocus={() => {
+								listItems[index]?.focus();
+							}}
+						>
+							{renderOption && renderOption(option)}
+						</li>
+					))}
+			</ul>
+		</div>
+	);
+};

packages/components/src/components/combobox/style.scss

@@ -13,10 +13,12 @@
 		&--disabled * {
 			cursor: not-allowed !important;
 		}
+
 		&--disabled {
 			opacity: 0.5;
 			outline: none;
 		}
+
 		&__group {
 			display: inline-flex;
 			align-items: center;
@@ -49,8 +51,6 @@
 		}
 
 		&__item {
-			cursor: pointer;
-
 			.combobox__listbox--cursor-hidden & {
 				cursor: none !important;
 			}

packages/components/src/components/pagination/shadow.tsx

@@ -27,7 +27,8 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
-import { KolButtonWcTag, KolSelectTag } from '../../core/component-names';
+import { KolButtonWcTag, KolIconTag, KolSplitButtonTag } from '../../core/component-names';
+import { KolMenu } from '../@shared/kol-menu';
 
 const leftDoubleArrowIcon = {
 	left: 'codicon codicon-debug-reverse-continue',
@@ -165,16 +166,21 @@ export class KolPagination implements PaginationAPI {
 					</ul>
 				</nav>
 				{this.state._pageSizeOptions?.length > 0 && (
-					<KolSelectTag
-						_hideLabel
-						_id={`pagination-size-${this.nonce}`}
-						_label={translate('kol-entries-per-site')}
-						_options={this.state._pageSizeOptions}
-						_on={{
-							onChange: this.onChangePageSize,
-						}}
-						_value={[this.state._pageSize]}
-					></KolSelectTag>
+					<KolSplitButtonTag class="split-button" _label={`${this.state._pageSize} ${translate('kol-entries-per-site')}`} _id={`pagination-size-${this.nonce}`}>
+						<KolMenu
+							options={this.state._pageSizeOptions}
+							selectedValue={this.state._pageSize}
+							onItemClick={(event, option: unknown) => {
+								this.onChangePageSize(event, (option as { value: string }).value);
+							}}
+							focusedOptionIndex={-1}
+							renderOption={(option: Option<number>) => (
+								<div class="item-label">
+									{option.label} {this.state._pageSize === option.value && <KolIconTag _icons="codicon codicon-check" _label=""></KolIconTag>}
+								</div>
+							)}
+						/>
+					</KolSplitButtonTag>
 				)}
 			</Host>
 		);
@@ -271,7 +277,6 @@ export class KolPagination implements PaginationAPI {
 	};
 
 	private onChangePageSize = (event: Event, value: unknown) => {
-		value = parseInt((value as string[])[0]);
 		if (typeof value === 'number' && value > 0 && this._pageSize !== value) {
 			this._pageSize = value;
 			const timeout = setTimeout(() => {

packages/components/src/components/pagination/style.scss

@@ -1,7 +1,10 @@
 @import '../@shared/mixins';
 @import '../style';
+@import '../@shared/kol-menu.scss';
 
 @layer kol-component {
+	@include kol-menu-styles;
+
 	:host {
 		align-items: center;
 		display: grid;
@@ -23,4 +26,10 @@
 	.separator:before {
 		content: '•••';
 	}
+
+	.item-label {
+		display: flex;
+		align-items: center;
+		gap: rem(8);
+	}
 }

packages/components/src/components/single-select/style.scss

@@ -45,6 +45,7 @@
 			&.highlighted {
 				background-color: #f0f0f0;
 			}
+
 			.single-select__listbox--cursor-hidden & {
 				cursor: none !important;
 			}

packages/components/src/components/split-button/style.scss

@@ -19,8 +19,13 @@
 	}
 
 	.kol-popover {
+		z-index: 1;
+		width: 100%;
+
 		.popover {
 			margin-top: rem(2);
+			width: 100%;
+			text-align: center;
 		}
 
 		.arrow {

packages/themes/bmf/src/components/pagination.scss

@@ -1,3 +1,8 @@
+@import '../mixins/rem';
+
+$option-height: rem(40);
+$visible-options: 5;
+
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
@@ -51,17 +56,20 @@
 				transition: outline-offset 0.2s linear;
 			}
 		}
+
 		&:active,
 		&:hover {
 			&:not(:disabled) .button-inner {
 				background-color: var(--color-ocean);
 				border-color: var(--color-ocean);
 				color: var(--color-white);
 			}
+
 			&:not(:disabled) .icon::part(icon)::before {
 				color: var(--color-white);
 			}
 		}
+
 		&:active .button-inner {
 			border-color: var(--color-white);
 			outline: none;
@@ -85,10 +93,40 @@
 		&:disabled {
 			opacity: 1;
 		}
+
 		.button-inner {
 			background-color: var(--color-ice);
 			border-color: var(--color-ice);
 			font-weight: 700;
 		}
 	}
+
+	.menu {
+		&__listbox {
+			border-style: solid;
+			border-width: 1px;
+			border-radius: var(--border-radius);
+			border-color: var(--color-grey);
+			max-height: calc($option-height * $visible-options + 2px);
+			overflow-y: auto;
+			overflow-x: hidden;
+		}
+
+		&__item {
+			height: $option-height;
+			padding: rem(10) rem(12);
+
+			.radio-label {
+				align-self: center;
+				padding-left: rem(1);
+			}
+
+			&:focus,
+			&.highlighted {
+				background: var(--color-ocean);
+				color: white;
+				outline: 0 !important;
+			}
+		}
+	}
 }

packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss

@@ -15,12 +15,6 @@
 			word-break: break-word;
 		}
 
-		:host > div,
-		.kol-table-stateless-wc > div {
-			overflow-x: auto;
-			overflow-y: hidden;
-		}
-
 		.table:has(.focus-element:focus) {
 			outline-color: var(--color-ocean);
 			outline-style: solid;

packages/themes/default/src/components/pagination.scss

@@ -1,9 +1,14 @@
 @import '../mixins/focus-outline';
+@import '../mixins/rem';
+
+$option-height: rem(40);
+$visible-options: 5;
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
+
 	.button:focus {
 		outline: none;
 	}
@@ -43,4 +48,33 @@
 		border-radius: var(--a11y-min-size);
 		border: 0;
 	}
+
+	.menu {
+		&__listbox {
+			border-style: solid;
+			border-width: 1px;
+			border-radius: var(--border-radius);
+			border-color: var(--color-subtle);
+			max-height: calc($option-height * $visible-options + 2px);
+			overflow-y: auto;
+			overflow-x: hidden;
+		}
+
+		&__item {
+			height: $option-height;
+			padding: rem(10) rem(12);
+
+			.radio-label {
+				align-self: center;
+				padding-left: rem(1);
+			}
+
+			&:focus,
+			&.highlighted {
+				background: var(--color-primary-variant);
+				color: var(--color-light);
+				outline: 0 !important;
+			}
+		}
+	}
 }

packages/themes/default/src/mixins/kol-table-stateless-wc.scss

@@ -10,12 +10,6 @@
 			word-break: break-word;
 		}
 
-		:host > div,
-		kol-table-stateless-wc > div {
-			overflow-x: auto;
-			overflow-y: hidden;
-		}
-
 		caption {
 			padding: rem(8);
 		}