@drivenets/design-system 0.9.0 → 0.10.0

package/src/components/ds-file-upload/components/file-upload/file-upload.types.ts

@@ -94,6 +94,7 @@ export interface FileUploadProps {
 	disabled?: boolean;
 	/**
 	 * Whether the file upload layout is compact (inline)
+	 * @default false
 	 */
 	compact?: boolean;
 }

package/src/components/ds-file-upload/ds-file-upload-api.types.ts

@@ -5,23 +5,65 @@ export type UploadFileStatus = 'pending' | 'uploading' | 'interrupted' | 'comple
 export type FileMetadata = Record<string, unknown>;
 
 export interface UploadedFile extends File {
+	/**
+	 * Stable identifier assigned by the uploader. Used to correlate progress
+	 * updates, retries, and deletions with this specific file.
+	 */
 	id: string;
+	/**
+	 * Current upload progress as a number between `0` and `1`.
+	 */
 	progress: number;
+	/**
+	 * Current lifecycle state of the upload.
+	 */
 	status: UploadFileStatus;
+	/**
+	 * Validation or upload errors associated with this file. Present when
+	 * `status` is `error` or when the file fails client-side validation.
+	 */
 	errors?: FileError[];
+	/**
+	 * Native `File` the user selected. Kept alongside so consumers can access
+	 * the original binary even after `UploadedFile` has been enriched.
+	 */
 	originalFile: File;
 }
 
 export interface FileUploadOptions {
+	/**
+	 * The file to upload.
+	 */
 	file: File;
+	/**
+	 * Stable identifier for this upload. Must match the `id` on the corresponding
+	 * `UploadedFile` so progress and cancellation are routed correctly.
+	 */
 	fileId: string;
+	/**
+	 * Optional custom metadata forwarded by the consumer (e.g., tags, parent ids).
+	 */
 	metadata?: FileMetadata;
+	/**
+	 * Called by the adapter with upload progress updates as a number between `0`
+	 * and `1`.
+	 */
 	onProgress?: (progress: number) => void;
+	/**
+	 * AbortSignal that fires when the consumer cancels the upload. Adapters should
+	 * observe this and abort any in-flight network request.
+	 */
 	signal?: AbortSignal;
 }
 
 export interface FileUploadResult {
+	/**
+	 * URL of the successfully uploaded file, returned by the backend.
+	 */
 	url: string;
+	/**
+	 * Optional metadata returned by the backend alongside the URL.
+	 */
 	metadata?: FileMetadata;
 }
 
@@ -33,7 +75,20 @@ export interface FileUploadResult {
  * - reject with FatalFileUploadError for permanent failures
  */
 export interface FileUploadAdapter {
+	/**
+	 * Uploads a single file. Resolve with `FileUploadResult` on success; reject
+	 * with `RetryableFileUploadError` for transient failures (will be retried) or
+	 * `FatalFileUploadError` for permanent failures (surfaces to the user).
+	 */
 	upload: (options: FileUploadOptions) => FileUploadResult | Promise<FileUploadResult>;
+	/**
+	 * Optional hook called when the user cancels an in-flight upload. Implementations
+	 * should abort any pending network work for the given `fileId`.
+	 */
 	cancel?: (fileId: string) => void | Promise<void>;
+	/**
+	 * Optional hook called when the user removes a previously uploaded file. Typically
+	 * issues a delete request to the backend so stored files can be cleaned up.
+	 */
 	delete?: (fileId: string) => void | Promise<void>;
 }

package/src/components/ds-form-control/ds-form-control.types.ts

@@ -22,6 +22,9 @@ export interface DsFormControlProps extends React.PropsWithChildren {
 	 */
 	required?: boolean;
 
+	/**
+	 * Optional render slots for customizing parts of the control.
+	 */
 	slots?: {
 		/**
 		 * Adornment to display at the end of the label

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

@@ -1,11 +1,17 @@
-import type React from 'react';
+import type { CSSProperties } from 'react';
 import classNames from 'classnames';
-import type { DsGridItemProps, DsGridProps } from './ds-grid.types';
 
-/**
- * Design system Grid component
- */
-export const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, className }) => {
+import type { DsGridBaseProps, DsGridItemBaseProps } from './ds-grid.types';
+
+export const DsGridBase = ({
+	children,
+	columns,
+	rows,
+	gutter,
+	margin,
+	className,
+	style,
+}: DsGridBaseProps) => {
 	const gridClass = classNames(
 		'ds-grid',
 		{
@@ -15,20 +21,31 @@ export const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, classNa
 		className,
 	);
 
-	return <div className={gridClass}>{children}</div>;
+	const cssVars: Record<string, string> = {};
+
+	if (gutter !== undefined) {
+		cssVars['--ds-grid-gutter'] = typeof gutter === 'number' ? `${String(gutter)}px` : gutter;
+	}
+
+	if (margin !== undefined) {
+		cssVars['--ds-grid-margin'] = typeof margin === 'number' ? `${String(margin)}px` : margin;
+	}
+
+	return (
+		<div className={gridClass} style={{ ...style, ...cssVars } as CSSProperties}>
+			{children}
+		</div>
+	);
 };
 
-/**
- * Design system GridItem component
- */
-export const DsGridItem: React.FC<DsGridItemProps> = ({
+export const DsGridItemBase = ({
 	children,
 	colSpan,
 	colStart,
 	rowSpan,
 	rowStart,
 	className,
-}) => {
+}: DsGridItemBaseProps) => {
 	const gridItemClass = classNames(
 		{
 			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,

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

@@ -1,9 +1,6 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
-export interface DsGridProps {
-	/**
-	 * The content to be rendered inside the grid
-	 */
+export interface DsGridBaseProps {
 	children: ReactNode;
 
 	/**
@@ -17,15 +14,24 @@ export interface DsGridProps {
 	columns?: 2 | 4 | 6 | 8 | 10 | 12;
 
 	/**
-	 * Custom class names to apply to the grid
+	 * Gap between grid cells.
+	 * A number is treated as px. A string is used as-is (e.g. `"1rem"`, `"var(--grid-gutter)"`).
+	 * CSS default (when omitted): `16px` — set by `$gutter` in `_grid-variables.scss`.
 	 */
-	className?: string;
-}
+	gutter?: number | string;
 
-export interface DsGridItemProps {
 	/**
-	 * The content to be rendered inside the grid item
+	 * Padding around the grid container.
+	 * A number is treated as px (uniform). A string is used as-is (e.g. `"16px 20px"`, `"var(--grid-margin)"`).
+	 * CSS default (when omitted): `16px 20px` — set by `$margin-y $margin-x` in `_grid-variables.scss`.
 	 */
+	margin?: number | string;
+
+	className?: string;
+	style?: CSSProperties;
+}
+
+export interface DsGridItemBaseProps {
 	children: ReactNode;
 
 	/**
@@ -48,8 +54,5 @@ export interface DsGridItemProps {
 	 */
 	rowStart?: number;
 
-	/**
-	 * Custom class names to apply to the grid item
-	 */
 	className?: string;
 }

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

@@ -1,2 +1,10 @@
-export * from './ds-grid';
-export * from './ds-grid.types';
+import type { ComponentProps } from 'react';
+
+import { withResponsiveProps } from '../../utils/responsive';
+import { DsGridBase, DsGridItemBase } from './ds-grid';
+
+export const DsGrid = withResponsiveProps(DsGridBase, ['gutter', 'margin']);
+export const DsGridItem = withResponsiveProps(DsGridItemBase, ['colSpan', 'rowSpan']);
+
+export type DsGridProps = ComponentProps<typeof DsGrid>;
+export type DsGridItemProps = ComponentProps<typeof DsGridItem>;

package/src/components/ds-icon/custom-icons/index.ts

@@ -50,6 +50,7 @@ import { SpecialMapView } from './special-map-view';
 
 // Misc icons
 import { SpecialHome } from './special-home';
+import { SpecialLeadingIcon } from './special-leading-icon';
 import { SpecialLego } from './special-lego';
 import { SpecialScheme } from './special-scheme';
 import { SpecialBook } from './special-book';
@@ -120,6 +121,7 @@ export const customIcons = {
 
 	// Misc
 	'special-home': SpecialHome,
+	'special-leading-icon': SpecialLeadingIcon,
 	'special-lego': SpecialLego,
 	'special-scheme': SpecialScheme,
 	'special-book': SpecialBook,

package/src/components/ds-icon/custom-icons/special-leading-icon.tsx

@@ -0,0 +1,11 @@
+import type { FC, SVGProps } from 'react';
+
+/** Leading / input-adjacent building icon from design (AR-58177). */
+export const SpecialLeadingIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 13" fill="none" {...props}>
+		<path
+			d="M7.2 4.81737H7.8C7.95913 4.81737 8.11174 4.75164 8.22426 4.63464C8.33679 4.51765 8.4 4.35896 8.4 4.1935C8.4 4.02804 8.33679 3.86936 8.22426 3.75237C8.11174 3.63537 7.95913 3.56964 7.8 3.56964H7.2C7.04087 3.56964 6.88826 3.63537 6.77574 3.75237C6.66321 3.86936 6.6 4.02804 6.6 4.1935C6.6 4.35896 6.66321 4.51765 6.77574 4.63464C6.88826 4.75164 7.04087 4.81737 7.2 4.81737ZM7.2 7.31283H7.8C7.95913 7.31283 8.11174 7.24711 8.22426 7.13011C8.33679 7.01311 8.4 6.85443 8.4 6.68897C8.4 6.52351 8.33679 6.36483 8.22426 6.24783C8.11174 6.13083 7.95913 6.0651 7.8 6.0651H7.2C7.04087 6.0651 6.88826 6.13083 6.77574 6.24783C6.66321 6.36483 6.6 6.52351 6.6 6.68897C6.6 6.85443 6.66321 7.01311 6.77574 7.13011C6.88826 7.24711 7.04087 7.31283 7.2 7.31283ZM4.2 4.81737H4.8C4.95913 4.81737 5.11174 4.75164 5.22426 4.63464C5.33679 4.51765 5.4 4.35896 5.4 4.1935C5.4 4.02804 5.33679 3.86936 5.22426 3.75237C5.11174 3.63537 4.95913 3.56964 4.8 3.56964H4.2C4.04087 3.56964 3.88826 3.63537 3.77574 3.75237C3.66321 3.86936 3.6 4.02804 3.6 4.1935C3.6 4.35896 3.66321 4.51765 3.77574 4.63464C3.88826 4.75164 4.04087 4.81737 4.2 4.81737ZM4.2 7.31283H4.8C4.95913 7.31283 5.11174 7.24711 5.22426 7.13011C5.33679 7.01311 5.4 6.85443 5.4 6.68897C5.4 6.52351 5.33679 6.36483 5.22426 6.24783C5.11174 6.13083 4.95913 6.0651 4.8 6.0651H4.2C4.04087 6.0651 3.88826 6.13083 3.77574 6.24783C3.66321 6.36483 3.6 6.52351 3.6 6.68897C3.6 6.85443 3.66321 7.01311 3.77574 7.13011C3.88826 7.24711 4.04087 7.31283 4.2 7.31283ZM11.4 11.264H10.8V1.13558C10.8 0.97012 10.7368 0.811436 10.6243 0.694439C10.5117 0.577441 10.3591 0.511713 10.2 0.511713H1.8C1.64087 0.511713 1.48826 0.577441 1.37574 0.694439C1.26321 0.811436 1.2 0.97012 1.2 1.13558V11.264H0.6C0.44087 11.264 0.288258 11.3297 0.175736 11.4467C0.0632141 11.5637 0 11.7224 0 11.8879C0 12.0533 0.0632141 12.212 0.175736 12.329C0.288258 12.446 0.44087 12.5117 0.6 12.5117H11.4C11.5591 12.5117 11.7117 12.446 11.8243 12.329C11.9368 12.212 12 12.0533 12 11.8879C12 11.7224 11.9368 11.5637 11.8243 11.4467C11.7117 11.3297 11.5591 11.264 11.4 11.264ZM6.6 12.5117H5.4V9.91228H6.6V12.5117ZM9.6 11.264H7.8V9.28841C7.8 9.12295 7.73679 8.96426 7.62426 8.84727C7.51174 8.73027 7.35913 8.66454 7.2 8.66454H4.8C4.64087 8.66454 4.48826 8.73027 4.37574 8.84727C4.26321 8.96426 4.2 9.12295 4.2 9.28841V11.264H2.4V1.75945H9.6V11.264Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

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

@@ -1,8 +1,12 @@
 import classNames from 'classnames';
 import styles from './ds-icon.module.scss';
-import type { DsIconProps } from './ds-icon.types';
+import { iconColors, type DsIconProps } from './ds-icon.types';
 import { customIcons, isCustomIcon } from './custom-icons';
 
+const iconColorSet = new Set<string>(iconColors);
+
+const resolveColor = (color: string): string => (iconColorSet.has(color) ? `var(--icon-${color})` : color);
+
 /**
  * Design system Icon component that renders Google Material Icons, custom SVG icons, or inline SVGs
  */
@@ -11,29 +15,31 @@ const DsIcon = ({
 	size = 'medium',
 	variant = 'outlined',
 	filled,
+	color,
 	className = '',
 	style = {},
 	...rest
 }: DsIconProps) => {
 	const iconClass = classNames(styles.icon, styles[size], { [styles.filled]: filled }, className);
+	const mergedStyle = color ? { color: resolveColor(color), ...style } : style;
 
 	// 1. SVG component passed directly
 	if (typeof icon === 'function') {
 		const SvgComponent = icon;
-		return <SvgComponent className={iconClass} style={style} {...rest} />;
+		return <SvgComponent className={iconClass} style={mergedStyle} {...rest} />;
 	}
 
 	// 2. Custom registered icon from custom-icons registry
 	if (isCustomIcon(icon)) {
 		const SvgComponent = customIcons[icon];
-		return <SvgComponent className={iconClass} style={style} {...rest} />;
+		return <SvgComponent className={iconClass} style={mergedStyle} {...rest} />;
 	}
 
 	// 3. Material Icon (font-based)
 	const variantClass = `material-symbols-${variant}`;
 
 	return (
-		<span className={classNames(iconClass, variantClass)} style={style} {...rest}>
+		<span className={classNames(iconClass, variantClass)} style={mergedStyle} {...rest}>
 			{icon}
 		</span>
 	);

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

@@ -7,6 +7,29 @@ export type IconSize = (typeof iconSizes)[number];
 export const iconVariants = ['outlined', 'rounded'] as const;
 export type IconVariant = (typeof iconVariants)[number];
 
+export const iconColors = [
+	'action',
+	'action-hover',
+	'action-secondary',
+	'disabled',
+	'error',
+	'execution',
+	'information-main',
+	'information-secondary',
+	'inverse',
+	'main',
+	'on-button',
+	'on-dark-disabled',
+	'pause',
+	'pending',
+	'secondary',
+	'success',
+	'success-light',
+	'warning',
+	'warning-light',
+] as const;
+export type IconColor = (typeof iconColors)[number];
+
 export type MaterialIconName = {
 	[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;
 }[keyof typeof materialIcons];
@@ -39,6 +62,13 @@ export interface DsIconProps {
 	 */
 	filled?: boolean;
 
+	/**
+	 * Icon color. Semantic names map to `--icon-*` tokens (e.g. `'error'` →
+	 * `var(--icon-error)`); raw CSS values (hex, rgb, hsl, CSS variables)
+	 * pass through unchanged. Omit to inherit from parent.
+	 */
+	color?: IconColor | (string & {});
+
 	/**
 	 * Additional CSS class names
 	 */

package/src/components/ds-key-value-pair/ds-key-value-pair.types.ts

@@ -4,15 +4,25 @@ export const dsKeyValuePairOrientations = ['vertical', 'horizontal'] as const;
 export type DsKeyValuePairOrientation = (typeof dsKeyValuePairOrientations)[number];
 
 export interface DsKeyValuePairProps {
+	/** Label rendered for the key side of the pair (left or top depending on `orientation`). */
 	keyLabel: ReactNode;
 
 	/** Shown when the editor is not active (read-only or not hovered). */
 	value?: ReactNode;
 
-	/** @default false */
+	/**
+	 * When `true`, the pair is rendered as a static display and the editor is never
+	 * revealed (even on hover/focus).
+	 * @default false
+	 */
 	readOnly?: boolean;
 
-	/** @default 'vertical' */
+	/**
+	 * Layout orientation:
+	 * - `vertical`: key stacked above value
+	 * - `horizontal`: key and value side-by-side
+	 * @default 'vertical'
+	 */
 	orientation?: DsKeyValuePairOrientation;
 
 	/** Editor content revealed on hover/focus when not read-only. */

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

@@ -13,6 +13,22 @@ export interface DsModalProps extends Pick<
 	DialogProps,
 	'modal' | 'closeOnEscape' | 'closeOnInteractOutside'
 > {
+	/**
+	 * Whether the modal traps focus and blocks interaction with the page behind the
+	 * backdrop. When `false`, users can continue interacting with the underlying page.
+	 * @default true
+	 */
+	modal?: DialogProps['modal'];
+	/**
+	 * Whether pressing the Escape key closes the modal.
+	 * @default true
+	 */
+	closeOnEscape?: DialogProps['closeOnEscape'];
+	/**
+	 * Whether clicking or focusing outside the modal closes it.
+	 * @default true
+	 */
+	closeOnInteractOutside?: DialogProps['closeOnInteractOutside'];
 	/**
 	 * Whether the modal is open
 	 */

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

@@ -5,21 +5,60 @@ import type { ResponsiveValue } from '../../utils/responsive';
 export type DsPanelVariant = 'docked' | 'floating';
 
 export type DsPanelBaseProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
+	/**
+	 * Visual treatment of the panel:
+	 * - `docked`: sits flush within the surrounding layout (default)
+	 * - `floating`: elevated card with shadow, detached from the layout
+	 * @default docked
+	 */
 	variant?: DsPanelVariant;
+	/**
+	 * Width of the panel in pixels when expanded.
+	 */
 	width?: number;
+	/**
+	 * Whether the panel edge can be dragged to resize its width.
+	 * @default false
+	 */
 	draggable?: boolean;
+	/**
+	 * Disable the default inner padding so the panel content can bleed to the edges.
+	 * @default false
+	 */
 	disablePadding?: boolean;
+	/**
+	 * Props forwarded to nested sub-components.
+	 */
 	slotProps?: {
+		/**
+		 * Props forwarded to the collapse/expand button shown on the panel edge.
+		 */
 		collapseButton?: DsPanelCollapseButtonProps;
 	};
+	/**
+	 * Called when the panel's open (expanded) state changes. Receives the next
+	 * boolean state.
+	 */
 	onOpenChange?: (open: boolean) => void;
 };
 
 export type DsPanelProps = Omit<DsPanelBaseProps, 'width'> & {
+	/**
+	 * Width of the panel when expanded. Accepts a single number (px) or a
+	 * `ResponsiveValue` to vary width by breakpoint.
+	 */
 	width?: ResponsiveValue<number>;
 };
 
 export type DsPanelCollapseButtonProps = {
+	/**
+	 * Called when the collapse button is clicked.
+	 */
 	onClick?: () => void;
+	/**
+	 * Whether the panel is currently collapsed. Drives the button's chevron
+	 * orientation and aria-label.
+	 * @default false
+	 */
 	collapsed?: boolean;
 };

package/src/components/ds-radio-group/ds-radio-group.module.scss

@@ -1,90 +1,99 @@
 @use '../../styles/typography';
 
+$radio-click-target: 20px;
+$radio-circle-size: 16px;
+$radio-dot-size: 8px;
+
 .radioGroupRoot {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--standard);
 }
 
 .radioItemContainer {
-	position: relative;
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: 4px;
+	column-gap: var(--3xs);
 	cursor: pointer;
-	padding-right: 1px;
-	border: 1px solid transparent;
-	border-radius: 4px;
+	border-radius: var(--4xs);
+
+	&:has(.labelInfo) {
+		align-items: flex-start;
+
+		.radioLabel {
+			padding-bottom: var(--4xs);
+			padding-right: var(--4xs);
+		}
+	}
 
 	&:has([data-disabled]) {
 		cursor: not-allowed;
 
+		.radioLabel {
+			color: var(--font-disabled);
+		}
+
 		.labelInfo {
-			color: var(--color-secondary-500-net-4);
+			color: var(--font-disabled);
 		}
 	}
 
-	&:has([data-state='checked']:focus-visible) {
-		border-radius: 4px;
-		border-color: var(--color-primary-700-net-1);
+	&:not(:has([data-disabled])):hover {
+		background-color: var(--background-secondary-hover);
 	}
 
-	&:has([data-state='unchecked']:focus-visible) {
-		border-color: var(--color-primary-800);
-	}
+	&:has([data-focus-visible]) {
+		position: relative;
+		background-color: var(--background-secondary-hover);
 
-	&:has(.labelInfo) {
-		margin-bottom: 4px;
+		&::after {
+			content: '';
+			position: absolute;
+			inset: calc(-1px - var(--4xs));
+			border: var(--4xs) solid var(--border-action-primary-hover);
+			border-radius: var(--3xs);
+			pointer-events: none;
+		}
 	}
 }
 
 .radioItem {
 	all: unset;
-	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2px solid transparent;
-	border-radius: 50%;
-	transition:
-		background-color 0.2s ease-in-out,
-		border-color 0.2s ease-in-out;
+	width: $radio-click-target;
+	height: $radio-click-target;
+	flex-shrink: 0;
 
 	.radioItemWrapper {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 16px;
-		width: 16px;
-		border: 2px solid var(--color-secondary-500-net-4);
-		padding: 2px;
+		height: $radio-circle-size;
+		width: $radio-circle-size;
+		border: 1.5px solid var(--border-contrast);
 		border-radius: 50%;
-		background: none;
+		background: var(--background);
+		transition: border-color 0.2s;
 	}
 
 	&[data-state='checked'],
 	[data-state='checked'] > & {
 		.radioItemWrapper {
-			border-color: var(--color-primary-700-default);
-		}
-
-		&:hover {
-			border-color: var(--color-primary-100);
+			border-color: var(--border-action-primary);
 		}
 	}
 
 	&[data-state='checked'][data-disabled],
 	[data-state='checked'][data-disabled] > & {
-		.radioIndicator {
-			background: var(--color-secondary-300);
+		.radioItemWrapper {
+			border-color: var(--border-disabled);
 		}
-	}
 
-	&[data-state='unchecked'],
-	[data-state='unchecked'] > & {
-		&:hover {
-			border-color: var(--color-secondary-100);
-			background-color: var(--color-secondary-100);
+		.radioIndicator {
+			background: var(--border-disabled);
 		}
 	}
 
@@ -92,20 +101,16 @@
 	[data-disabled] > & {
 		pointer-events: none;
 
-		& + label {
-			pointer-events: none;
-		}
-
 		.radioItemWrapper {
-			border-color: var(--color-secondary-300);
+			border-color: var(--border-disabled);
 		}
 	}
 }
 
 .radioIndicator {
-	width: 8px;
-	height: 8px;
-	background: var(--color-primary-700-default);
+	width: $radio-dot-size;
+	height: $radio-dot-size;
+	background: var(--background-primary);
 	border-radius: 50%;
 
 	&[data-part='indicator'] {
@@ -123,16 +128,13 @@
 }
 
 .radioLabel {
-	@include typography.body-sm-reg;
-	color: var(--color-secondary-800);
-	cursor: pointer;
+	@include typography.body-sm-md;
+	color: var(--font-main);
 }
 
 .labelInfo {
-	@include typography.body-xs-reg;
-	@include typography.ellipsis;
-	position: absolute;
-	color: var(--color-secondary-600-net-2);
-	cursor: pointer;
-	width: 100%;
+	color: var(--font-secondary);
+	flex-basis: 100%;
+	padding-left: calc($radio-click-target + var(--xs));
+	padding-right: var(--4xs);
 }