@drivenets/design-system 0.9.1 → 0.11.0

package/src/components/ds-date-input/ds-date-input.module.scss

@@ -6,10 +6,10 @@
 	@include input.input-container-states;
 	max-height: input.$input-text-height-default;
 	justify-content: space-between;
-	padding: var(--spacing-xs) var(--spacing-sm);
-	gap: var(--spacing-3xs);
+	padding: var(--xs) var(--sm);
+	gap: var(--3xs);
 
-	border-color: var(--form-control-border-color, var(--color-border));
+	border-color: var(--form-control-border-color, var(--border));
 
 	&:hover:not(.disabled) {
 		border-color: var(--form-control-border-color, var(--color-border-hover));
@@ -20,23 +20,23 @@
 	}
 
 	&.disabled {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		color: var(--background-deselected);
+		background: var(--background-secondary);
+		border-color: var(--border-disabled);
 		cursor: not-allowed;
 
 		.input {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 
 		.dateInputButton {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 			cursor: not-allowed;
 		}
 	}
 
 	&.readOnly {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 		cursor: default;
 	}
 }
@@ -57,11 +57,11 @@
 	transition: color 0.2s ease;
 
 	&:hover:not(:disabled) {
-		color: var(--color-background-action-hover);
+		color: var(--background-action-hover);
 	}
 
 	&:disabled {
-		color: var(--color-background-disable);
+		color: var(--background-disable);
 		cursor: not-allowed;
 	}
 }
@@ -72,7 +72,7 @@
 
 .content {
 	@include dropdown.dropdown-content;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	min-width: fit-content;
 }
 
@@ -80,7 +80,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--xs);
 }
 
 .viewTrigger {
@@ -91,9 +91,9 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs) var(--spacing-xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-main);
+	padding: var(--2xs) var(--xs);
+	border-radius: var(--2xs);
+	color: var(--font-main);
 	transition: background-color 0.2s;
 
 	&:hover {
@@ -109,14 +109,14 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	border-radius: var(--2xs);
+	color: var(--font-secondary);
 	transition: all 0.2s;
 
 	&:hover {
 		background: var(--color-background-hover);
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	&:disabled {
@@ -128,7 +128,7 @@
 .calendarView {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .table {
@@ -137,28 +137,28 @@
 
 	.tableBody .tableRow .tableCellTrigger:focus-visible {
 		.tableCellTriggerValue {
-			outline: 2px solid var(--color-background-action-hover);
-			border-radius: var(--spacing-2xs);
+			outline: 2px solid var(--background-action-hover);
+			border-radius: var(--2xs);
 			border-width: 0;
 		}
 	}
 }
 
 .tableHead {
-	border-bottom: 1px solid var(--color-border);
+	border-bottom: 1px solid var(--border);
 }
 
 .tableHeader {
 	text-align: center;
-	padding: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	color: var(--font-secondary);
 	font-weight: var(--font-weight-medium);
 }
 
 .tableRow {
 	&:first-child {
 		.tableCellTrigger {
-			margin-top: var(--spacing-xs);
+			margin-top: var(--xs);
 		}
 	}
 }
@@ -176,38 +176,38 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--spacing-xl);
-		height: var(--spacing-xl);
-		margin: var(--spacing-3xs);
-		color: var(--color-font-main);
-		border-radius: var(--spacing-xs);
+		width: var(--xl);
+		height: var(--xl);
+		margin: var(--3xs);
+		color: var(--font-main);
+		border-radius: var(--xs);
 	}
 
 	&:hover:not([data-disabled], [data-selected], [data-in-range], [data-in-hover-range])
 		.tableCellTriggerValue {
-		outline: 1px solid var(--color-border);
-		background: var(--color-background-action-hover-weak);
+		outline: 1px solid var(--border);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-outside-range] .tableCellTriggerValue {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[data-selected] .tableCellTriggerValue {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&[data-in-range]:not([data-selected]) {
 		position: relative;
 
 		.tableCellTriggerValue {
-			background: var(--color-background-action-secondary-hover);
+			background: var(--background-action-secondary-hover);
 		}
 	}
 
 	&[data-today]:not([data-selected], [data-in-range]):hover .tableCellTriggerValue {
-		border-radius: var(--spacing-xs);
+		border-radius: var(--xs);
 	}
 
 	&[data-today]:not([data-selected]) .tableCellTriggerValue {
@@ -218,7 +218,7 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background-brand);
+			border-bottom: 1px solid var(--background-brand);
 		}
 	}
 
@@ -230,12 +230,12 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background);
+			border-bottom: 1px solid var(--background);
 		}
 	}
 
 	&[data-disabled] .tableCellTriggerValue {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		cursor: not-allowed;
 		opacity: 0.5;
 	}

package/src/components/ds-date-input/ds-date-input.types.ts

@@ -63,6 +63,29 @@ type DsDateInputBaseProps = Pick<
 	DatePickerRootProps,
 	'disabled' | 'readOnly' | 'id' | 'open' | 'name' | 'style'
 > & {
+	/**
+	 * Unique identifier for the input field
+	 */
+	id?: string;
+	/**
+	 * HTML name attribute for the input field, used in form submissions
+	 */
+	name?: string;
+	/**
+	 * Whether the input is disabled and cannot be interacted with
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the input is read-only. The field is focusable but the value cannot
+	 * be changed.
+	 * @default false
+	 */
+	readOnly?: boolean;
+	/**
+	 * Whether the calendar popover is open (controlled). Pair with `onOpenChange`.
+	 */
+	open?: boolean;
 	/**
 	 * Callback when the open state changes
 	 * @param open - Whether the calendar is open

package/src/components/ds-date-picker/components/calendar-table.module.scss

@@ -4,8 +4,8 @@
 
 	.tableBody .tableRow .tableCellTrigger:focus-visible {
 		.tableCellTrigger {
-			outline: 2px solid var(--color-background-action-hover);
-			border-radius: var(--spacing-2xs);
+			outline: 2px solid var(--background-action-hover);
+			border-radius: var(--2xs);
 			border-width: 0;
 		}
 	}
@@ -13,15 +13,15 @@
 
 .tableHeader {
 	text-align: center;
-	padding: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	color: var(--font-secondary);
 	font-weight: var(--font-weight-medium);
 }
 
 .tableRow {
 	&:first-child {
 		.tableCellTrigger {
-			margin-top: var(--spacing-xs);
+			margin-top: var(--xs);
 		}
 	}
 }
@@ -34,26 +34,26 @@
 	user-select: none;
 	-webkit-tap-highlight-color: transparent;
 	outline: none;
-	border-radius: var(--spacing-xs);
-	color: var(--color-font-main);
-	margin: var(--spacing-3xs);
+	border-radius: var(--xs);
+	color: var(--font-main);
+	margin: var(--3xs);
 
 	&:hover:not([data-disabled], [data-selected]) {
-		outline: 1px solid var(--color-border);
-		background: var(--color-background-action-hover-weak);
+		outline: 1px solid var(--border);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-outside-range] {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[data-selected] {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&[data-today]:not([data-selected]):hover {
-		border-radius: var(--spacing-xs);
+		border-radius: var(--xs);
 	}
 
 	&[data-today]:not([data-selected]) {
@@ -64,7 +64,7 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background-brand);
+			border-bottom: 1px solid var(--background-brand);
 		}
 	}
 
@@ -76,12 +76,12 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background);
+			border-bottom: 1px solid var(--background);
 		}
 	}
 
 	&[data-disabled] {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		cursor: not-allowed;
 		opacity: 0.5;
 	}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: var(--spacing-sm);
+	margin-bottom: var(--sm);
 }
 
 .viewTrigger {
@@ -13,9 +13,9 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs) var(--spacing-xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-main);
+	padding: var(--2xs) var(--xs);
+	border-radius: var(--2xs);
+	color: var(--font-main);
 	transition: background-color 0.2s;
 
 	&:hover {
@@ -31,14 +31,14 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	border-radius: var(--2xs);
+	color: var(--font-secondary);
 	transition: all 0.2s;
 
 	&:hover {
 		background: var(--color-background-hover);
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	&:disabled {

package/src/components/ds-date-picker/components/day-view/day-view.module.scss

@@ -3,7 +3,7 @@ $trigger-size: 32px;
 .dayView {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .trigger {

package/src/components/ds-date-picker/ds-date-picker.module.scss

@@ -20,7 +20,7 @@
 
 .content {
 	@include dropdown.dropdown-content;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	min-width: fit-content;
 }
 

package/src/components/ds-date-picker/ds-date-picker.tsx

@@ -31,6 +31,7 @@ const DsDatePicker = ({
 	slotProps,
 	onChange,
 	onOpenChange,
+	onBlur,
 	value: _value,
 	defaultValue: _defaultValue,
 	min: _min,
@@ -97,6 +98,8 @@ const DsDatePicker = ({
 		} else {
 			resetInput();
 		}
+
+		onBlur?.();
 	};
 
 	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;

package/src/components/ds-date-picker/ds-date-picker.types.ts

@@ -3,13 +3,28 @@ import type { DsTextInputProps } from '../ds-text-input';
 import type { DsTimePickerProps } from '../ds-time-picker';
 
 export interface DsDatePickerLocale {
+	/**
+	 * aria-label for the button that opens the calendar popover
+	 */
 	openCalendarLabel?: string;
+	/**
+	 * aria-label for the button that reveals the time picker when `withTime` is set
+	 */
 	timeTriggerLabel?: string;
+	/**
+	 * aria-label for the clear button
+	 */
 	clearLabel?: string;
 }
 
 export interface DsDatePickerSlotProps {
+	/**
+	 * Props forwarded to the underlying `DsTextInput` that displays the selected date.
+	 */
 	input?: DsTextInputProps;
+	/**
+	 * Props forwarded to the nested `DsTimePicker` rendered when `withTime` is set.
+	 */
 	timePicker?: DsTimePickerProps;
 }
 
@@ -40,6 +55,11 @@ export interface DsDatePickerProps extends Pick<
 	 */
 	onOpenChange?: (open: boolean) => void;
 
+	/**
+	 * Callback when the input is blurred
+	 */
+	onBlur?: () => void;
+
 	/**
 	 * Minimum allowed datetime as Date object
 	 */

package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss

@@ -1,6 +1,6 @@
 .root {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .horizontal {

package/src/components/ds-date-range-picker/ds-date-range-picker.types.ts

@@ -7,15 +7,31 @@ export const dateRangePickerOrientations = ['horizontal', 'vertical'] as const;
 export type DateRangePickerOrientation = (typeof dateRangePickerOrientations)[number];
 
 export interface DsDateRangePickerLocale {
+	/**
+	 * Label shown on the "Clear all" button.
+	 */
 	clearAllLabel?: string;
 }
 
 export type DateRangeFormControlSlotProps = Partial<Omit<DsFormControlProps, 'children'>>;
 
 export interface DsDateRangePickerSlotProps {
+	/**
+	 * Props forwarded to the start-date `DsDatePicker`.
+	 */
 	startDatePicker?: DsDatePickerProps;
+	/**
+	 * Props forwarded to the end-date `DsDatePicker`.
+	 */
 	endDatePicker?: DsDatePickerProps;
+	/**
+	 * Props forwarded to the `DsFormControl` wrapping the start-date picker
+	 * (e.g., to set a label or helper text).
+	 */
 	startDateFormControl?: DateRangeFormControlSlotProps;
+	/**
+	 * Props forwarded to the `DsFormControl` wrapping the end-date picker.
+	 */
 	endDateFormControl?: DateRangeFormControlSlotProps;
 }
 
@@ -71,10 +87,22 @@ export interface DsDateRangePickerProps {
 	 */
 	closeOnSelect?: boolean;
 
+	/**
+	 * Whether both pickers are disabled.
+	 * @default false
+	 */
 	disabled?: boolean;
 
+	/**
+	 * Whether both pickers are read-only. Inputs are focusable but values cannot
+	 * be changed.
+	 * @default false
+	 */
 	readOnly?: boolean;
 
+	/**
+	 * Additional CSS class name applied to the range picker wrapper.
+	 */
 	className?: string;
 
 	/**

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

@@ -14,7 +14,7 @@
 	--_shadow-size: 18px;
 	--_shadow-y-offset: 6px;
 
-	background: var(--white, #fff);
+	background: var(--color-dap-gray-050, #fff);
 	border-radius: 8px;
 	box-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(4, 69, 204, 0.3);
 	padding: 12px;
@@ -34,12 +34,12 @@
 .title {
 	@include typography.p-base;
 	@include typography.medium;
-	color: var(--neutral-1);
+	color: var(--color-dap-gray-700);
 }
 
 .description {
 	@include typography.p-base;
-	color: var(--neutral-3);
+	color: var(--color-dap-gray-500);
 	margin-bottom: 16px;
 }
 

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

@@ -40,7 +40,16 @@ export interface DsDialogProps {
 	/**
 	 * Custom fixed position (e.g., { top: number, left: number })
 	 */
-	customPosition?: { top: number; left: number };
+	customPosition?: {
+		/**
+		 * Distance in pixels from the top of the viewport.
+		 */
+		top: number;
+		/**
+		 * Distance in pixels from the left of the viewport.
+		 */
+		left: number;
+	};
 	/**
 	 * If true, show modal overlay and center dialog (default: true)
 	 */

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

@@ -5,7 +5,7 @@
 	padding: 0;
 	color: transparent;
 
-	background-color: var(--color-border-secondary);
+	background-color: var(--border-secondary);
 	flex-shrink: 0;
 }
 

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

@@ -47,7 +47,7 @@
 	display: block;
 	top: 0;
 	bottom: 0;
-	background: var(--color-background);
+	background: var(--background);
 	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
 	z-index: 1200;
 	pointer-events: auto;
@@ -167,29 +167,29 @@
 	align-items: center;
 	justify-content: space-between;
 	flex-wrap: wrap;
-	border-bottom: 1px solid var(--color-border);
-	padding: var(--spacing-sm) var(--spacing-standard);
-	gap: var(--spacing-3xs);
+	border-bottom: 1px solid var(--border);
+	padding: var(--sm) var(--standard);
+	gap: var(--3xs);
 }
 
 .title {
 	margin: 0;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .closeTrigger {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-icon-secondary);
+	color: var(--icon-action-secondary);
 }
 
 .toolbar {
 	display: flex;
 	align-items: center;
-	border-bottom: 1px solid var(--color-border);
-	padding: var(--spacing-sm) var(--spacing-standard);
-	gap: var(--spacing-3xs);
+	border-bottom: 1px solid var(--border);
+	padding: var(--sm) var(--standard);
+	gap: var(--3xs);
 }
 
 .body {
@@ -200,13 +200,13 @@
 .footer {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-standard);
-	border-top: 1px solid var(--color-border);
+	padding: var(--standard);
+	border-top: 1px solid var(--border);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	margin-left: auto;
 }