@drivenets/design-system 0.18.0 → 0.19.0

package/src/components/ds-table/utils/column-size.unit.test.ts

@@ -13,8 +13,13 @@ import {
 	getResizableColumnStyle,
 	getResizableHeaderStyle,
 	getResizeOriginSize,
+	getUtilityColumnSizing,
+	growFillLeavesToContainer,
 	isExplicitColumnWidth,
 	omitBuiltinColumnSizing,
+	resolveUtilityColumnWidth,
+	shiftColumnTrack,
+	withUtilityColumnSizing,
 } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
@@ -179,6 +184,115 @@ describe('collectMissingLeafSizing', () => {
 	it('returns an empty map when every measured id already has a sizing entry', () => {
 		expect(collectMissingLeafSizing({ a: 100 }, { a: 90 })).toEqual({});
 	});
+
+	it('reconciles independent rounding so seeded widths match the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 500.6, b: 500.6 }, {});
+
+		expect(next).toEqual({ a: 501, b: 500 });
+	});
+
+	it('absorbs rounding drift into missing ids and leaves existing widths unchanged', () => {
+		expect(collectMissingLeafSizing({ a: 500.6, b: 500.6 }, { b: 501 }, 1001)).toEqual({ a: 500 });
+	});
+
+	it('does not snap seeded widths to the container when measured columns overflow it', () => {
+		expect(collectMissingLeafSizing({ a: 1000, b: 1000 }, {}, 1116)).toEqual({ a: 1000, b: 1000 });
+	});
+
+	it('snaps a 1px measured overflow to the container width', () => {
+		const next = collectMissingLeafSizing({ a: 558.5, b: 558.5 }, {}, 1116);
+		const total = Object.values(next).reduce((sum, width) => sum + width, 0);
+
+		expect(total).toBe(1116);
+	});
+
+	it('distributes container underflow across fill leaves by their measured share', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200 }, {}, 1200, ['a', 'b']);
+
+		expect(next).toEqual({ a: 600, b: 600 });
+	});
+
+	it('grows only fill leaves when the container is wider than the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200, c: 200 }, {}, 1200, ['b', 'c']);
+
+		expect(next).toEqual({ a: 200, b: 500, c: 500 });
+	});
+});
+
+describe('growFillLeavesToContainer', () => {
+	it('moves leftover space onto uncapped fill leaves after a sibling hits maxSize', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['a', 'b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next.a).toBe(280);
+		expect(next.b).toBeGreaterThan(360);
+		expect(next.c).toBeGreaterThan(360);
+		expect((next.a ?? 0) + (next.b ?? 0) + (next.c ?? 0)).toBe(1200);
+	});
+
+	it('does not grow an explicit leaf when filling leftover space', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next).toEqual({ a: 280, b: 460, c: 460 });
+	});
+});
+
+describe('shiftColumnTrack', () => {
+	const bounds = [
+		{ id: 'a', columnDef: {} },
+		{ id: 'b', columnDef: {} },
+	];
+
+	it('returns the same map when delta is 0', () => {
+		const sizing = { a: 200, b: 200 };
+
+		expect(shiftColumnTrack(sizing, ['a', 'b'], 0, bounds)).toBe(sizing);
+	});
+
+	it('shrinks from the last leaf when the spacer appears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 500 }, ['a', 'b'], -10, bounds);
+
+		expect(next.a).toBe(500);
+		expect(next.b).toBe(490);
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(990);
+	});
+
+	it('grows leaves when the spacer disappears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 490 }, ['a', 'b'], 10, bounds);
+
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(1000);
+	});
+
+	it('does not shrink a leaf below minSize', () => {
+		const next = shiftColumnTrack({ a: 200, b: 52 }, ['a', 'b'], -10, [
+			{ id: 'a', columnDef: {} },
+			{ id: 'b', columnDef: { minSize: 52 } },
+		]);
+
+		expect(next.b).toBe(52);
+		expect(next.a).toBe(190);
+	});
 });
 
 describe('omitBuiltinColumnSizing', () => {
@@ -211,3 +325,46 @@ describe('omitBuiltinColumnSizing', () => {
 		expect(next).not.toBe(sizing);
 	});
 });
+
+describe('resolveUtilityColumnWidth', () => {
+	it('returns the fallback when the width is omitted, non-finite, or not positive', () => {
+		expect(resolveUtilityColumnWidth(undefined, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(0, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(-8, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.NaN, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.POSITIVE_INFINITY, 36)).toBe(36);
+	});
+
+	it('returns a positive finite width as-is', () => {
+		expect(resolveUtilityColumnWidth(48, 36)).toBe(48);
+		expect(resolveUtilityColumnWidth(1, 36)).toBe(1);
+	});
+});
+
+describe('withUtilityColumnSizing', () => {
+	it('strips inbound utility ids and overlays the authored widths', () => {
+		expect(
+			withUtilityColumnSizing(
+				{ [SELECT_COLUMN_ID]: 80, firstName: 200 },
+				{ [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 },
+			),
+		).toEqual({ firstName: 200, [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 });
+	});
+});
+
+describe('getUtilityColumnSizing', () => {
+	it('collects size entries for injected utility leaves only', () => {
+		expect(
+			getUtilityColumnSizing([
+				{ id: REORDER_COLUMN_ID, size: 80 },
+				{ id: EXPANDER_COLUMN_ID, size: 40 },
+				{ id: SELECT_COLUMN_ID, size: 48 },
+				{ id: 'firstName', size: 200 },
+			]),
+		).toEqual({
+			[REORDER_COLUMN_ID]: 80,
+			[EXPANDER_COLUMN_ID]: 40,
+			[SELECT_COLUMN_ID]: 48,
+		});
+	});
+});

package/src/components/ds-table/utils/constants.ts

@@ -1,8 +1,3 @@
-/**
- * Default text for empty table state
- */
-export const EMPTY_TABLE_STATE_TEXT = 'No results.';
-
 /**
  * Column id used for the synthetic expander column injected when `expandable` is set.
  */
@@ -55,6 +50,19 @@ export const SKELETON_ROW_COUNT = 5;
  */
 export const RESIZE_MIN_COLUMN_WIDTH = 52;
 
+/**
+ * Pixel width of the full-height resize overlay divider. Must match
+ * `$resize-divider-width` in `styles/_variables.scss`.
+ */
+export const RESIZE_DIVIDER_WIDTH = 2;
+
+/**
+ * Rest width of the header **Scrollbar spacer** when the body overflows
+ * vertically. Must match `$scrollbar-default-size` in `styles/_scrollbars.scss`.
+ * Hover (12px) is intentionally not tracked.
+ */
+export const SCROLLBAR_SPACER_WIDTH = 10;
+
 /**
  * Width change (in px) applied per Arrow key press when a resize handle is
  * focused.

package/src/components/ds-table/utils/table-columns.tsx

@@ -3,6 +3,7 @@ import { DsSkeletonText } from '../../ds-skeleton';
 import { DsTableHeaderSelectableCell } from '../components/ds-table-header-selectable-cell';
 import { DsTableRowExpandableCell } from '../components/ds-table-row-expandable-cell';
 import { DsTableRowSelectableCell } from '../components/ds-table-row-selectable-cell';
+import { resolveUtilityColumnWidth } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
 	EXPANDER_COLUMN_WIDTH,
@@ -19,6 +20,9 @@ export type GetAugmentedColumnsOptions = {
 	reorderable: boolean;
 	virtualized: boolean;
 	showSelectAllCheckbox: boolean;
+	selectableColumnWidth?: number;
+	expandableColumnWidth?: number;
+	reorderableColumnWidth?: number;
 };
 
 const EXPLICIT_SIZE_META = { hasExplicitSize: true } as const;
@@ -41,6 +45,13 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
 		return { ...column, meta: { ...column.meta, ...EXPLICIT_SIZE_META } };
 	});
 
+/** Pin min/max so the table-wide resize `minSize` cannot stretch this column. */
+const pinUtilityColumnSize = (width: number) => ({
+	size: width,
+	minSize: width,
+	maxSize: width,
+});
+
 /**
  * Prepends the builtin select / expander / reorder columns when those features
  * are on. Reorder is omitted for virtualized tables. Unshift order yields
@@ -48,19 +59,24 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
  */
 export const getAugmentedColumns = <TData, TValue>(
 	columns: ColumnDef<TData, TValue>[],
-	{ selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }: GetAugmentedColumnsOptions,
+	{
+		selectable,
+		expandable,
+		reorderable,
+		virtualized,
+		showSelectAllCheckbox,
+		selectableColumnWidth,
+		expandableColumnWidth,
+		reorderableColumnWidth,
+	}: GetAugmentedColumnsOptions,
 ): ColumnDef<TData, TValue>[] => {
 	const augmentedColumns: ColumnDef<TData, TValue>[] = stampExplicitSize(columns);
 
 	if (selectable) {
+		const width = resolveUtilityColumnWidth(selectableColumnWidth, SELECT_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: SELECT_COLUMN_ID,
-			size: SELECT_COLUMN_WIDTH,
-			// Pin min/max to the fixed width: `enableResizing: false` blocks the
-			// handle but not the table-wide resize `minSize`, which would otherwise
-			// stretch this column.
-			minSize: SELECT_COLUMN_WIDTH,
-			maxSize: SELECT_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -70,11 +86,10 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (expandable) {
+		const width = resolveUtilityColumnWidth(expandableColumnWidth, EXPANDER_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: EXPANDER_COLUMN_ID,
-			size: EXPANDER_COLUMN_WIDTH,
-			minSize: EXPANDER_COLUMN_WIDTH,
-			maxSize: EXPANDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -84,13 +99,12 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (reorderable && !virtualized) {
+		const width = resolveUtilityColumnWidth(reorderableColumnWidth, REORDER_COLUMN_WIDTH);
 		// Cell is rendered inline by DsTableRow when it encounters REORDER_COLUMN_ID,
 		// since the drag handle needs row-level useSortable state.
 		augmentedColumns.unshift({
 			id: REORDER_COLUMN_ID,
-			size: REORDER_COLUMN_WIDTH,
-			minSize: REORDER_COLUMN_WIDTH,
-			maxSize: REORDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,

package/src/components/ds-table/utils/table-columns.unit.test.ts

@@ -100,6 +100,50 @@ describe('getAugmentedColumns', () => {
 		}
 	});
 
+	it('pins custom utility column widths and ignores them when the feature is off', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 48,
+			expandableColumnWidth: 40,
+			reorderableColumnWidth: 80,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.minSize).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.maxSize).toBe(48);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.minSize).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.maxSize).toBe(40);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.minSize).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.maxSize).toBe(80);
+
+		expect(
+			columnIds(getAugmentedColumns([nameColumn], { ...noFeatures, selectableColumnWidth: 48 })),
+		).toEqual(['name']);
+	});
+
+	it('falls back to the default width when the custom width is invalid', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 0,
+			expandableColumnWidth: Number.NaN,
+			reorderableColumnWidth: -10,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(SELECT_COLUMN_WIDTH);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(EXPANDER_COLUMN_WIDTH);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(REORDER_COLUMN_WIDTH);
+	});
+
 	it('stamps hasExplicitSize on authored leaves and builtins, not on unsized leaves', () => {
 		const columns = getAugmentedColumns(
 			[

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -1,61 +1,33 @@
 .container {
 	display: flex;
-	flex-direction: column;
+	align-items: flex-start;
 	gap: var(--xs);
 	padding: var(--xs) var(--standard);
 	background: var(--background-secondary-hover);
 	border: 1px solid var(--outline-weak);
 	border-radius: var(--3xs);
 	overflow: hidden;
-
-	&.expanded {
-		max-height: none;
-	}
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	gap: var(--xs);
-	flex-shrink: 0;
-}
-
-.headerActions {
-	display: flex;
-	align-items: center;
-	gap: var(--xs);
-	flex-shrink: 0;
-	margin-left: auto;
 }
 
 .tagsArea {
 	display: flex;
 	align-items: center;
-	width: 100%;
+	flex: 1;
+	min-width: 0;
 	gap: var(--xs);
 	flex-wrap: wrap;
 }
 
-.label {
-	color: var(--font-secondary);
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-
-.itemCheckbox {
+.actions {
 	display: flex;
 	align-items: center;
-}
-
-.ghostButtonContent {
-	// TODO: remove once migrated 1.2 button to the ghost with transparent bg
-	background: transparent !important;
+	gap: var(--xs);
+	flex-shrink: 0;
 }
 
 .actionButton {
-	padding: 0;
 	flex-shrink: 0;
+	white-space: nowrap;
 }
 
 .measurementContainer {

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -4,17 +4,12 @@ import classNames from 'classnames';
 import styles from './ds-tag-filter.module.scss';
 import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
 import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
-import { DsTypography } from '../ds-typography';
 import { DsTag, type DsTagProps } from '../ds-tag';
-import { DsButton } from '../ds-button';
+import { DsButtonV3 } from '../ds-button-v3';
 import { DsIcon } from '../ds-icon';
 
 /**
  * Design system TagFilter component
- *
- * A component for displaying active filters as tags with overflow handling.
- * Non-tag elements (label, expand/collapse, clear) sit in a header row.
- * Tags occupy the full width below, wrapping as needed.
  */
 const DsTagFilter = ({
 	items,
@@ -27,22 +22,17 @@ const DsTagFilter = ({
 	onExpand,
 }: DsTagFilterProps) => {
 	const [expanded, setExpanded] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
+	const tagsAreaRef = useRef<HTMLDivElement>(null);
 	const measurementRef = useRef<HTMLDivElement>(null);
 
 	const { visibleTagCount, hasOverflow } = useTagOverflowCalculation({
-		containerRef,
+		tagsAreaRef,
 		measurementRef,
 		totalItems: items.length,
 		expanded,
 	});
 
-	const {
-		label = 'Filtered by:',
-		clearButton = 'Clear all filters',
-		showMore = 'Show more',
-		showLess = 'Show less',
-	} = locale;
+	const { clearButton = 'Clear all filters', showMore = 'Show more', showLess = 'Show less' } = locale;
 
 	const visibleTags = expanded ? items : items.slice(0, visibleTagCount);
 	const hiddenCount = items.length - visibleTagCount;
@@ -79,54 +69,41 @@ const DsTagFilter = ({
 		</div>
 	);
 
+	const toggleLabel = expanded ? showLess : showMore;
+
 	return (
 		<>
-			<div
-				ref={containerRef}
-				className={classNames(styles.container, expanded && styles.expanded, className)}
-				style={style}
-			>
-				<div className={styles.header}>
-					{label && (
-						<DsTypography variant="body-sm-reg" className={styles.label}>
-							{label}
-						</DsTypography>
-					)}
+			<div className={classNames(styles.container, className)} style={style}>
+				<div ref={tagsAreaRef} className={styles.tagsArea} aria-live="polite">
+					{visibleTags.map((item) => renderTag(item))}
+				</div>
 
-					<div className={styles.headerActions}>
-						{hasOverflow && (
-							<DsButton
-								design="v1.2"
-								buttonType="tertiary"
-								variant="ghost"
-								className={styles.actionButton}
-								contentClassName={styles.ghostButtonContent}
-								size="small"
-								onClick={handleExpandToggle}
-							>
-								<DsIcon icon={expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
-								{expanded ? showLess : `${showMore} (${String(hiddenCount)})`}
-							</DsButton>
-						)}
+				<div className={styles.actions}>
+					{hasOverflow && (
+						<DsButtonV3
+							variant="tertiary"
+							size="small"
+							className={styles.actionButton}
+							aria-expanded={expanded}
+							onClick={handleExpandToggle}
+						>
+							{`${toggleLabel} (${String(hiddenCount)})`}
+							<DsIcon icon={expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} size="tiny" aria-hidden />
+						</DsButtonV3>
+					)}
 
-						{onClearAll && (
-							<DsButton
-								design="v1.2"
-								buttonType="tertiary"
-								variant="ghost"
-								className={styles.actionButton}
-								contentClassName={styles.ghostButtonContent}
-								size="small"
-								onClick={onClearAll}
-							>
-								<DsIcon icon="close" />
-								{clearButton}
-							</DsButton>
-						)}
-					</div>
+					{onClearAll && (
+						<DsButtonV3
+							variant="tertiary"
+							size="small"
+							icon="close"
+							className={styles.actionButton}
+							onClick={onClearAll}
+						>
+							{clearButton}
+						</DsButtonV3>
+					)}
 				</div>
-
-				<div className={styles.tagsArea}>{visibleTags.map((item) => renderTag(item))}</div>
 			</div>
 			{createPortal(measurementContainer, document.body)}
 		</>

package/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -40,7 +40,8 @@ export interface DsTagFilterProps {
 	 */
 	locale?: {
 		/**
-		 * Heading label shown above the tag list (e.g., "Filters").
+		 * @deprecated No longer rendered. Retained for backwards compatibility;
+		 * Will be removed in the future.
 		 */
 		label?: string;
 		/**

package/src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts

@@ -2,7 +2,7 @@ import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
 import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';
 
 interface UseTagOverflowCalculationOptions {
-	containerRef: RefObject<HTMLDivElement | null>;
+	tagsAreaRef: RefObject<HTMLDivElement | null>;
 	measurementRef: RefObject<HTMLDivElement | null>;
 	totalItems: number;
 	expanded: boolean;
@@ -14,13 +14,10 @@ interface UseTagOverflowCalculationResult {
 }
 
 /**
- * Custom hook to calculate how many tags fit in the available container width.
- *
- * Tags occupy the full container width. Non-tag elements (label, clear button,
- * expand control) live in a separate header row and don't affect the calculation.
+ * Custom hook to calculate how many tags fit on the first row of the tags-area.
  */
 export const useTagOverflowCalculation = ({
-	containerRef,
+	tagsAreaRef,
 	measurementRef,
 	totalItems,
 	expanded,
@@ -31,11 +28,11 @@ export const useTagOverflowCalculation = ({
 	});
 
 	const calculateLayout = useCallback(() => {
-		if (!containerRef.current || !measurementRef.current) {
+		if (!tagsAreaRef.current || !measurementRef.current) {
 			return;
 		}
 
-		const container = containerRef.current;
+		const tagsArea = tagsAreaRef.current;
 		const measurementContainer = measurementRef.current;
 
 		const { tagWidths, gap } = getElementMeasurements(measurementContainer);
@@ -45,13 +42,13 @@ export const useTagOverflowCalculation = ({
 			return;
 		}
 
-		const containerWidth = getContainerAvailableWidth(container);
+		const availableWidth = getContainerAvailableWidth(tagsArea);
 
-		const { count } = fitTagsInRow(tagWidths, containerWidth, gap);
+		const { count } = fitTagsInRow(tagWidths, availableWidth, gap);
 		const hasOverflow = count < tagWidths.length;
 
 		setState({ visibleTagCount: count, hasOverflow });
-	}, [containerRef, measurementRef]);
+	}, [tagsAreaRef, measurementRef]);
 
 	useLayoutEffect(() => {
 		const rafId = requestAnimationFrame(() => {
@@ -64,21 +61,19 @@ export const useTagOverflowCalculation = ({
 			});
 		});
 
-		if (containerRef.current) {
-			resizeObserver.observe(containerRef.current);
+		if (tagsAreaRef.current) {
+			resizeObserver.observe(tagsAreaRef.current);
 		}
 
 		return () => {
 			cancelAnimationFrame(rafId);
 			resizeObserver.disconnect();
 		};
-	}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);
+	}, [tagsAreaRef, measurementRef, totalItems, expanded, calculateLayout]);
 
+	// While expanded, keep hasOverflow true so a width edge case can't hide the collapse control.
 	if (expanded) {
-		return {
-			visibleTagCount: totalItems,
-			hasOverflow: true,
-		};
+		return { ...state, hasOverflow: true };
 	}
 
 	return state;

package/src/components/ds-toggle/ds-toggle.module.scss

@@ -144,6 +144,24 @@
 		pointer-events: none;
 	}
 
+	// Overlay the native input over the control so `getByRole('checkbox')` clicks
+	// land on a real interactive surface. Ark applies `visuallyHiddenStyle` inline
+	// (1x1, clipped, off-screen) which Playwright refuses to click; `!important`
+	// is required to beat inline-style specificity.
+	.hiddenInput {
+		position: absolute !important;
+		inset-block-start: 0 !important;
+		inset-inline-start: 0 !important;
+		width: calc(var(--switch-track-width) + var(--thumb-gap) * 2) !important;
+		height: calc(var(--thumb-size) + var(--thumb-gap) * 2) !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		clip: auto !important;
+		overflow: visible !important;
+		opacity: 0 !important;
+		cursor: pointer !important;
+	}
+
 	.iconCheck {
 		left: var(--icon-spacing);
 	}