@drivenets/design-system 0.16.0 → 0.18.0

package/src/components/ds-slider/ds-slider.tsx

@@ -0,0 +1,118 @@
+import { Slider, type SliderValueChangeDetails } from '@ark-ui/react/slider';
+import classNames from 'classnames';
+import { useControlled } from '../../utils/use-controlled';
+import { DsTypography } from '../ds-typography';
+import type { DsSliderProps, DsSliderValue } from './ds-slider.types';
+import { toArray } from './ds-slider.utils';
+import styles from './ds-slider.module.scss';
+
+/**
+ * @summary Selects a numeric value or a numeric interval by dragging thumbs along a track.
+ *
+ * Use for picking a number or interval from a known continuous range where visual
+ * adjustment beats typing (filter ranges, thresholds, capacity limits). For exact
+ * numeric entry use DsNumberInput; for a few discrete options use DsSegmentGroup.
+ */
+const DsSlider = ({
+	ref,
+	className,
+	style,
+	label,
+	type = 'value',
+	size = 'medium',
+	min = 0,
+	max = 100,
+	step = 1,
+	value,
+	defaultValue,
+	name,
+	disabled = false,
+	thumbLabels,
+	formatValue = String,
+	onValueChange,
+	onValueChangeEnd,
+}: DsSliderProps) => {
+	const isRange = type === 'range';
+
+	const controlledValue = toArray(value);
+	const fallbackValue = isRange ? [min, max] : [min];
+
+	const toPublicValue = (next: number[]): DsSliderValue =>
+		isRange ? [next[0] ?? min, next[1] ?? max] : (next[0] ?? min);
+
+	const [values, setValues] = useControlled<number[]>(
+		controlledValue,
+		controlledValue !== undefined ? (next) => onValueChange?.(toPublicValue(next)) : undefined,
+		toArray(defaultValue) ?? fallbackValue,
+	);
+
+	const handleValueChange = (details: SliderValueChangeDetails) => {
+		setValues(details.value);
+
+		if (controlledValue === undefined) {
+			onValueChange?.(toPublicValue(details.value));
+		}
+	};
+
+	const valueText = isRange
+		? `${formatValue(values[0] ?? min)}-${formatValue(values[1] ?? max)}`
+		: formatValue(values[0] ?? min);
+
+	const textColor = disabled ? 'disabled' : 'main';
+
+	const thumbAriaLabels = isRange ? thumbLabels : label ? [label] : thumbLabels;
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.small]: size === 'small',
+			[styles.large]: size === 'large',
+		},
+		className,
+	);
+
+	return (
+		<Slider.Root
+			ref={ref}
+			className={rootClass}
+			style={style}
+			value={values}
+			min={min}
+			max={max}
+			step={step}
+			name={name}
+			disabled={disabled}
+			aria-label={thumbAriaLabels}
+			onValueChange={handleValueChange}
+			onValueChangeEnd={(details) => onValueChangeEnd?.(toPublicValue(details.value))}
+		>
+			<div className={styles.header}>
+				{label && (
+					<DsTypography variant="body-sm-md" color={textColor}>
+						{label}
+					</DsTypography>
+				)}
+
+				<DsTypography variant="body-sm-md" color={textColor} className={styles.valueText}>
+					{valueText}
+				</DsTypography>
+			</div>
+
+			<Slider.Control className={styles.control}>
+				<Slider.Track className={styles.track}>
+					<Slider.Range className={styles.range} />
+				</Slider.Track>
+
+				{values.map((_, index) => (
+					<Slider.Thumb key={index} index={index} className={styles.thumb}>
+						<Slider.HiddenInput />
+					</Slider.Thumb>
+				))}
+			</Slider.Control>
+		</Slider.Root>
+	);
+};
+
+DsSlider.displayName = 'DsSlider';
+
+export default DsSlider;

package/src/components/ds-slider/ds-slider.types.ts

@@ -0,0 +1,102 @@
+import type { CSSProperties, Ref } from 'react';
+
+export const sliderTypes = ['value', 'range'] as const;
+export type DsSliderType = (typeof sliderTypes)[number];
+
+export const sliderSizes = ['small', 'medium', 'large'] as const;
+export type DsSliderSize = (typeof sliderSizes)[number];
+
+/**
+ * Value for a `value` slider (single number) or a `range` slider ([min, max] tuple).
+ */
+export type DsSliderValue = number | [number, number];
+
+/**
+ * Props for the DsSlider component.
+ */
+export type DsSliderProps = {
+	/**
+	 * Forwarded ref for the slider root element.
+	 */
+	ref?: Ref<HTMLDivElement>;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	/**
+	 * Visible label rendered above the track. Becomes the accessible name of the control.
+	 */
+	label?: string;
+
+	/**
+	 * Selection mode: a single value or a `[min, max]` interval.
+	 * @default 'value'
+	 */
+	type?: DsSliderType;
+
+	/**
+	 * Drives thumb and track sizing together (S/M/L → 16/20/24px thumb, 2/4/8px track).
+	 * Accepts a responsive value (e.g. `{ md: 'small', lg: 'medium' }`).
+	 * @default 'medium'
+	 */
+	size?: DsSliderSize;
+
+	/**
+	 * Lowest selectable value.
+	 * @default 0
+	 */
+	min?: number;
+
+	/**
+	 * Highest selectable value.
+	 * @default 100
+	 */
+	max?: number;
+
+	/**
+	 * Granularity that the value snaps to. Must be greater than 0.
+	 * Accepts a responsive value (e.g. `{ md: 5, lg: 1 }`).
+	 * @default 1
+	 */
+	step?: number;
+
+	/**
+	 * Controlled value. A number for `type="value"`, a `[min, max]` tuple for `type="range"`.
+	 */
+	value?: DsSliderValue;
+
+	/**
+	 * Uncontrolled initial value. Defaults to `min` for `value` and `[min, max]` for `range`.
+	 */
+	defaultValue?: DsSliderValue;
+
+	/**
+	 * Form field name applied to the hidden inputs.
+	 */
+	name?: string;
+
+	disabled?: boolean;
+
+	/**
+	 * Accessible name per thumb. Required for `type="range"` (e.g. `['Minimum', 'Maximum']`).
+	 * Accepts a responsive value (e.g. `{ md: ['Min', 'Max'], lg: ['Minimum', 'Maximum'] }`).
+	 */
+	thumbLabels?: string[];
+
+	/**
+	 * Formats each number shown in the output above the track. Range values are joined with `-`.
+	 * @default String
+	 */
+	formatValue?: (value: number) => string;
+
+	/**
+	 * Called live while the value changes (drag or keyboard).
+	 */
+	onValueChange?: (value: DsSliderValue) => void;
+
+	/**
+	 * Called once an interaction settles (pointer released or key committed).
+	 */
+	onValueChangeEnd?: (value: DsSliderValue) => void;
+};

package/src/components/ds-slider/ds-slider.utils.ts

@@ -0,0 +1,14 @@
+import type { DsSliderValue } from './ds-slider.types';
+
+/**
+ * Normalizes the public value (a number or a `[min, max]` tuple) into the
+ * `number[]` shape Ark's slider works with. Returns `undefined` when no value
+ * is provided so controlled/uncontrolled detection stays intact.
+ */
+export const toArray = (value: DsSliderValue | undefined): number[] | undefined => {
+	if (value === undefined) {
+		return undefined;
+	}
+
+	return Array.isArray(value) ? value : [value];
+};

package/src/components/ds-slider/index.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { withResponsiveProps } from '../../utils/responsive';
+import DsSliderBase from './ds-slider';
+
+export const DsSlider = withResponsiveProps(DsSliderBase, ['size', 'step', 'thumbLabels']);
+
+DsSlider.displayName = 'DsSlider';
+
+export type DsSliderProps = ComponentProps<typeof DsSlider>;
+export type { DsSliderValue, DsSliderType, DsSliderSize } from './ds-slider.types';

package/src/components/ds-smart-tabs/ds-smart-tabs.tsx

@@ -86,7 +86,7 @@ const DsSmartTab: React.FC<DsSmartTabProps> = ({
 /**
  * Design system SmartTabs component
  */
-const DsSmartTabs = ({
+const DsSmartTabsRoot = ({
 	activeTab,
 	onTabClick,
 	className,
@@ -110,8 +110,9 @@ const DsSmartTabs = ({
 
 DsSmartTab.displayName = 'DsSmartTabs.Tab';
 
-DsSmartTabs.Tab = DsSmartTab;
-
-DsSmartTabs.displayName = 'DsSmartTabs';
+const DsSmartTabs = Object.assign(DsSmartTabsRoot, {
+	displayName: 'DsSmartTabs',
+	Tab: DsSmartTab,
+});
 
 export default DsSmartTabs;

package/src/components/ds-smart-tabs/figma/ds-smart-tabs-tab.figma.ts

@@ -0,0 +1,83 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15707-16204
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-smart-tabs
+// component=DsSmartTabs.Tab
+//
+// `Part_SmartTabV1` maps to `DsSmartTabs.Tab`, resolved inside the group's
+// `Smart tabs slot` (nestable). Each item = colored icon badge + label + count.
+//
+// Variant divergence — the Figma `state` axis (selected/unselected/hover/focus)
+// is mostly visual: selection is owned by `DsSmartTabs` (`activeTab`), and
+// hover/focus are driven by CSS. Only `disabled` maps to a `DsSmartTabs.Tab` prop.
+//
+// `color` is intentionally not emitted: it is a fixed semantic per-category value
+// (encoded in the nested badge's `category` variant, not a tab-level property) and
+// the category→color mapping is owned by the design system, so the developer sets
+// it explicitly. `value` is data, not derivable from Figma, so slugify the label
+// as a sensible default for the developer to confirm/replace.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	selected: 'selected',
+	unselected: 'unselected',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+// Label and count are plain text layers (not component properties): the first
+// text child is the label, the second is the right-aligned count.
+const texts = instance.children.filter((child): child is figma.TextHandle => child.type === 'TEXT');
+const label = texts[0]?.textContent.trim() || 'Label';
+const count = texts[1]?.textContent.trim() ?? '';
+
+const value = label
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, '-')
+	.replace(/^-+|-+$/g, '');
+
+// The badge glyph maps to `DsSmartTabs.Tab.icon` (an icon-name string). Prefer a
+// connected ds-icon's Code Connect id and fall back to the glyph layer name.
+const resolveIcon = (): string => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	const id = node?.codeConnectId();
+	if (id?.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id?.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+
+	return (node?.name ?? 'circle')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+// `content` is number|string and is not auto-formatted: emit a numeric literal for
+// a plain integer, otherwise keep the pre-formatted string (e.g. "1,273").
+const contentAttr = /^\d+$/.test(count) ? `content={${count}}` : `content="${count}"`;
+
+const attrs = [
+	`value="${value}"`,
+	`label="${label}"`,
+	`icon="${resolveIcon()}"`,
+	contentAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSmartTabs.Tab ${attrs} />`,
+	imports: ["import { DsSmartTabs } from '@drivenets/design-system';"],
+	id: 'ds-smart-tabs-tab',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-smart-tabs/figma/ds-smart-tabs.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34864-129238
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-smart-tabs
+// component=DsSmartTabs
+//
+// `DsSmartTabsV1` is the smart-tabs filter row. It maps to `DsSmartTabs`, whose
+// `Smart tabs slot` resolves each item via its own template (`DsSmartTabs.Tab`),
+// so added/removed tabs stay in sync.
+//
+// `activeTab` and `onTabClick` are the controlled selection pair. Figma models
+// only the row chrome — selection state is authored in code, so the snippet emits
+// identifier placeholders for the developer to wire to component state.
+import figma from 'figma';
+
+const tabs = figma.selectedInstance.getSlot('Smart tabs slot');
+
+export default {
+	example: figma.code`<DsSmartTabs activeTab={activeTab} onTabClick={setActiveTab}>
+	${tabs}
+</DsSmartTabs>`,
+	imports: ["import { DsSmartTabs } from '@drivenets/design-system';"],
+	id: 'ds-smart-tabs',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-spinner/ds-spinner.figma.ts

@@ -13,7 +13,7 @@ const size = instance.getEnum('Size', {
 
 export default {
 	example: figma.code`<DsSpinner size="${size}" />`,
-	imports: ["import { DsSpinner } from '@drivenets/design-system'"],
+	imports: ["import { DsSpinner } from '@drivenets/design-system';"],
 	id: 'ds-spinner',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-split-button/ds-split-button.figma.ts

@@ -89,7 +89,7 @@ const buttonProps = [
 
 export default {
 	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
-	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	imports: ["import { DsSplitButton } from '@drivenets/design-system';"],
 	id: 'ds-split-button',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-status-badge-v2/ds-status-badge-v2.figma.ts

@@ -35,7 +35,7 @@ export default {
 			: structure === 'text-only'
 				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
 				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
-	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system';"],
 	id: 'ds-status-badge-v2',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-stepper/ds-stepper.figma.ts

@@ -32,7 +32,7 @@ export default {
 	</DsStep>
 	{/* Add a <DsStep> per step */}
 </DsStepper>`,
-	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system'"],
+	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system';"],
 	id: 'ds-stepper',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss

@@ -3,11 +3,15 @@
 
 .groupHeaderCell {
 	@include typography.body-sm-md;
+	position: relative;
 	color: var(--font-main);
 	height: var(--ds-table-header-height);
 	padding: 0;
 	border-bottom: vars.$border-width solid var(--color-dap-gray-400);
-	border-left: vars.$group-border-width solid var(--border);
+
+	&:not(:first-child) {
+		border-left: vars.$group-border-width solid var(--border);
+	}
 }
 
 .groupHeaderContent {

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx

@@ -3,21 +3,27 @@ import { DsButtonV3 } from '../../../ds-button-v3';
 import { TableHead } from '../core-table';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { getGroupColumnSizeStyle } from '../../grouping';
+import { getResizableHeaderStyle } from '../../utils/column-size';
 import { defaultDsTableLocale } from '../../ds-table.types';
+import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';
 import styles from './ds-table-group-header-cell.module.scss';
 
 export const DsTableGroupHeaderCell = <TData, TValue>({
 	header,
 }: DsTableGroupHeaderCellProps<TData, TValue>) => {
-	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext<TData, TValue>();
+	const { collapsedColumnGroups, onToggleColumnGroup, locale, resizableColumns, resizeSizingReady } =
+		useDsTableContext<TData, TValue>();
 
 	const groupId = header.column.id;
 	const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
-	const groupStyle = getGroupColumnSizeStyle(visibleLeafColumns);
+	const groupStyle = resizeSizingReady
+		? getResizableHeaderStyle(header.id)
+		: getGroupColumnSizeStyle(visibleLeafColumns, {});
 
 	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
 	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const canResize = resizableColumns && !isCollapsed && header.column.getCanResize();
 
 	const mergedLocale = { ...defaultDsTableLocale, ...locale };
 	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
@@ -25,7 +31,12 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 	const handleToggle = () => onToggleColumnGroup?.(groupId);
 
 	return (
-		<TableHead className={styles.groupHeaderCell} style={groupStyle} colSpan={header.colSpan}>
+		<TableHead
+			data-column-id={groupId}
+			className={styles.groupHeaderCell}
+			style={groupStyle}
+			colSpan={header.colSpan}
+		>
 			<div className={styles.groupHeaderContent}>
 				<span className={styles.groupLabel}>
 					{flexRender(header.column.columnDef.header, header.getContext())}
@@ -43,6 +54,7 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 					/>
 				)}
 			</div>
+			{canResize && <DsTableResizeHandle header={header} />}
 		</TableHead>
 	);
 };

package/src/components/ds-table/components/ds-table-group-header-cell/index.ts

@@ -1,2 +1 @@
 export { DsTableGroupHeaderCell } from './ds-table-group-header-cell';
-export type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';

package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss

@@ -1,8 +1,9 @@
 @use '../../../../styles/typography';
 @use '../../styles/variables' as vars;
 
-.stickyHeader {
-	background-color: var(--background);
+.header {
+	background-color: var(--background-secondary);
+	overflow: hidden;
 }
 
 .virtualizedHeader {
@@ -28,6 +29,7 @@
 
 .headerCell {
 	@include typography.body-sm-md;
+	position: relative;
 	color: var(--font-main);
 	text-align: left;
 	padding: 0 var(--standard);
@@ -57,7 +59,7 @@
 	justify-content: center;
 }
 
-.groupStart {
+.groupStart:not(:first-child) {
 	border-left: vars.$group-border-width solid var(--border);
 }
 
@@ -69,6 +71,18 @@
 	height: 100%;
 }
 
+.headerLabelStack {
+	min-width: 0;
+	overflow: hidden;
+}
+
+.headerLabel {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .filterTriggerContainer {
 	display: inline-flex;
 	align-items: center;

package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx

@@ -6,21 +6,20 @@ import styles from './ds-table-header.module.scss';
 import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
 import type { DsTableHeaderProps } from './ds-table-header.types';
 import { useDsTableContext } from '../../context/ds-table-context';
-import { getColumnSizeStyle } from '../../utils/column-size';
+import { getHeaderCellSizeStyle, isExplicitColumnWidth } from '../../utils/column-size';
 import { SELECT_COLUMN_ID } from '../../utils/constants';
 import { DsStack } from '../../../ds-stack';
 import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
 import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
 import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
+import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
+	const { bordered, virtualized, resizableColumns, resizeSizingReady } = useDsTableContext<TData, unknown>();
 
 	return (
-		<TableHeader
-			className={classnames(stickyHeader && styles.stickyHeader, virtualized && styles.virtualizedHeader)}
-		>
+		<TableHeader className={classnames(styles.header, virtualized && styles.virtualizedHeader)}>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<TableRow
 					key={headerGroup.id}
@@ -31,12 +30,19 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					)}
 				>
 					{headerGroup.headers.map((header) => {
+						const columnSizing = table.getState().columnSizing;
+
 						if (header.isPlaceholder) {
 							return (
 								<TableHead
 									key={header.id}
 									className={styles.headerCell}
-									style={getColumnSizeStyle(header.getSize())}
+									style={getHeaderCellSizeStyle(
+										header.id,
+										header.getSize(),
+										isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}),
+										!!resizeSizingReady,
+									)}
 								/>
 							);
 						}
@@ -45,8 +51,14 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 							return <DsTableGroupHeaderCell key={header.id} header={header} />;
 						}
 
-						const headerStyle = getColumnSizeStyle(header.column.getSize());
+						const headerStyle = getHeaderCellSizeStyle(
+							header.id,
+							header.column.getSize(),
+							isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}),
+							!!resizeSizingReady,
+						);
 						const canSort = header.column.getCanSort();
+						const canResize = resizableColumns && header.column.getCanResize();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 						const isGroupStart = isFirstLeafColumnOfGroup(header.column);
 
@@ -58,6 +70,7 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 						return (
 							<TableHead
 								key={header.id}
+								data-column-id={header.column.id}
 								className={classnames(
 									styles.headerCell,
 									canSort && styles.sortableHeader,
@@ -70,8 +83,15 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 								style={headerStyle}
 							>
 								<div className={styles.headerSortContainer}>
-									<DsStack direction="column" justifyContent="center" width="100%">
-										{flexRender(header.column.columnDef.header, header.getContext())}
+									<DsStack
+										direction="column"
+										justifyContent="center"
+										width="100%"
+										className={styles.headerLabelStack}
+									>
+										<span className={styles.headerLabel}>
+											{flexRender(header.column.columnDef.header, header.getContext())}
+										</span>
 									</DsStack>
 									{canSort && (
 										<div className={styles.pageButtonIconContainer}>
@@ -106,6 +126,7 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 										</div>
 									)}
 								</div>
+								{canResize && <DsTableResizeHandle header={header} />}
 							</TableHead>
 						);
 					})}

package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.module.scss

@@ -0,0 +1,23 @@
+@use '../../styles/variables' as vars;
+
+.resizeHandle {
+	position: absolute;
+	top: 0;
+	// Overlay paints 2px from the cell right edge; center this hit target on that band.
+	right: vars.$resize-handle-hit-width * -0.5 + vars.$resize-divider-width * -0.5;
+	height: 100%;
+	width: vars.$resize-handle-hit-width;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	cursor: col-resize;
+	touch-action: none;
+	z-index: 1;
+
+	// Focusable for keyboard resize (WCAG 2.1.1). Negative offset keeps the ring
+	// clear of the scroll container's overflow clip on the last column.
+	&:focus-visible {
+		outline: vars.$resize-divider-width solid var(--border-action-primary);
+		outline-offset: -1px;
+	}
+}