@drivenets/design-system 0.9.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -41,13 +41,10 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
@@ -79,10 +76,10 @@
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260331.1",
+    "@typescript/native-preview": "7.0.0-dev.20260426.1",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.5",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -95,27 +92,29 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
+    "remark-gfm": "^4.0.1",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.19",
-    "tsdown": "^0.21.6",
+    "tsdown": "^0.21.10",
     "typed-scss-modules": "^8.1.1",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "8.0.5",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.5",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.3.6",
     "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.7"
+    "@drivenets/vite-plugin-design-system": "0.0.8"
   },
   "scripts": {
+    "start": "storybook dev -p 6006",
     "install:playwright": "pnpm exec playwright install chromium --with-deps",
     "lint": "pnpm generate-scss-dts && eslint --max-warnings=0 ${ESLINT_ARGS-} .; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "//": "ESLINT_ARGS is used to pass arguments to eslint. We're using it so we don't need to duplicate the lint script.",
     "lint:fix": "ESLINT_ARGS=--fix pnpm lint",
+    "lint:build": "publint && attw --pack",
     "typecheck": "pnpm generate-scss-dts && tsgo; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
-    "storybook": "storybook dev -p 6006",
     "test": "vitest --project=\"!requires-build\"",
     "test:coverage": "pnpm test --coverage",
     "test:unit": "vitest --project=unit",
@@ -123,7 +122,6 @@
     "test:requires-build": "vitest --project=requires-build",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",
-    "build:storybook": "storybook build",
-    "build:lint": "publint && attw --pack"
+    "build:storybook": "storybook build"
   }
 }

package/src/components/ds-alert-banner/ds-alert-banner.module.scss

@@ -10,11 +10,11 @@
 			'icon description close'
 			'icon actions close';
 		align-items: start;
-		padding: var(--spacing-standard);
+		padding: var(--standard);
 		border-radius: 4px;
 		border: 1px solid;
-		column-gap: var(--spacing-xs);
-		row-gap: var(--spacing-4xs);
+		column-gap: var(--xs);
+		row-gap: var(--4xs);
 
 		&:not(:has(.title)) {
 			align-items: center;
@@ -24,8 +24,8 @@
 	&.global {
 		display: flex;
 		align-items: center;
-		padding: var(--spacing-sm) var(--spacing-standard);
-		gap: var(--spacing-2xs);
+		padding: var(--sm) var(--standard);
+		gap: var(--2xs);
 		border-bottom: 2px solid;
 
 		.title {
@@ -48,69 +48,69 @@
 
 	.title {
 		grid-area: title;
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	.description {
 		grid-area: description;
-		color: var(--color-font-secondary);
-		margin-top: var(--spacing-4xs);
+		color: var(--font-secondary);
+		margin-top: var(--4xs);
 	}
 
 	.actions {
 		grid-area: actions;
 		display: inline-flex;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	.closeButton {
 		grid-area: close;
 		display: flex;
-		color: var(--color-background-action);
+		color: var(--background-action);
 	}
 
 	&.infoNeutral {
-		background-color: var(--color-background-secondary);
-		border-color: var(--color-border);
+		background-color: var(--background-secondary);
+		border-color: var(--border);
 
 		.icon {
-			color: var(--color-icon-secondary);
+			color: var(--icon-action-secondary);
 		}
 	}
 
 	&.infoBlue {
-		background-color: var(--color-background-info);
-		border-color: var(--color-border-action-primary);
+		background-color: var(--background-info);
+		border-color: var(--border-action-primary);
 
 		.icon {
-			color: var(--color-icon-primary);
+			color: var(--icon-action);
 		}
 	}
 
 	&.warning {
-		background-color: var(--color-background-warning);
-		border-color: var(--color-background-warning-strong);
+		background-color: var(--background-warning);
+		border-color: var(--background-warning-strong);
 
 		.icon {
-			color: var(--color-icon-warning);
+			color: var(--icon-warning);
 		}
 	}
 
 	&.error {
-		background-color: var(--color-background-danger-weak);
-		border-color: var(--color-border-danger-strong);
+		background-color: var(--background-error-secondary-hover);
+		border-color: var(--border-error);
 
 		.icon {
-			color: var(--color-icon-danger);
+			color: var(--icon-error);
 		}
 	}
 
 	&.success {
-		background-color: var(--color-background-success);
-		border-color: var(--color-border-success);
+		background-color: var(--background-success);
+		border-color: var(--border-success);
 
 		.icon {
-			color: var(--color-icon-success);
+			color: var(--icon-success);
 		}
 	}
 }

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

@@ -28,17 +28,17 @@ $autocomplete-opacity-visible: 1;
 	@include input.input-container-states;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	height: $autocomplete-input-height;
 	min-height: $autocomplete-input-height;
 	max-height: $autocomplete-input-height;
 
 	&[data-focus] {
-		border-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;
+		border-color: var(--form-control-border-color, var(--border-action-primary)) !important;
 	}
 
 	&[data-invalid] {
-		border-color: var(--color-background-danger-strong);
+		border-color: var(--background-error);
 	}
 }
 
@@ -49,7 +49,7 @@ $autocomplete-opacity-visible: 1;
 	outline: none;
 
 	&::placeholder {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 }
 
@@ -57,14 +57,14 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-background-action);
+	color: var(--background-action);
 	flex-shrink: 0;
 }
 
 .iconContainer {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	flex-shrink: 0;
 }
 
@@ -76,7 +76,7 @@ $autocomplete-opacity-visible: 1;
 	transition: opacity $autocomplete-animation-duration ease;
 
 	&:hover {
-		color: var(--color-background-action-hover);
+		color: var(--background-action-hover);
 	}
 }
 
@@ -90,7 +90,7 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 	transition:
 		transform $autocomplete-animation-duration ease-in-out,
 		background-color $autocomplete-animation-duration ease,
@@ -104,14 +104,14 @@ $autocomplete-opacity-visible: 1;
 	height: $autocomplete-trigger-size;
 
 	&:hover {
-		color: var(--color-background-deselected-hover);
-		background: var(--color-background-action-hover-weak);
+		color: var(--background-deselected-hover);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-state='open'] {
 		transform: rotate($autocomplete-rotation-open);
-		color: var(--color-background-deselected-hover);
-		background: var(--color-background-action-hover-weak);
+		color: var(--background-deselected-hover);
+		background: var(--background-action-hover-weak);
 	}
 
 	&:focus-visible {
@@ -121,8 +121,8 @@ $autocomplete-opacity-visible: 1;
 }
 
 .control[data-focus] .trigger {
-	color: var(--color-background-deselected-hover);
-	background: var(--color-background-action-hover-weak);
+	color: var(--background-deselected-hover);
+	background: var(--background-action-hover-weak);
 }
 
 .positioner {
@@ -158,17 +158,17 @@ $autocomplete-opacity-visible: 1;
 	@include dropdown.dropdown-item;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: $autocomplete-item-height;
 	min-height: $autocomplete-item-height;
 
 	&[data-highlighted] {
-		background: var(--color-background-secondary-selected-weak);
+		background: var(--background-secondary-selected-weak);
 	}
 }
 
 .itemIcon {
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -181,8 +181,8 @@ $autocomplete-opacity-visible: 1;
 	white-space: nowrap;
 
 	mark {
-		background-color: var(--color-data-yellow);
-		color: var(--color-font-main);
+		background-color: var(--color-dap-data-yellow);
+		color: var(--font-main);
 		font-weight: var(--font-weight-medium);
 		padding: 0;
 		border-radius: $autocomplete-highlight-border-radius;
@@ -191,31 +191,31 @@ $autocomplete-opacity-visible: 1;
 
 .noMatches,
 .loading {
-	padding: var(--spacing-xs);
-	color: var(--color-font-disabled);
+	padding: var(--xs);
+	color: var(--font-disabled);
 	text-align: center;
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 }
 
 .disabled {
 	.control {
-		color: var(--color-background-deselected);
-		border-color: var(--color-border-disabled);
+		color: var(--background-deselected);
+		border-color: var(--border-disabled);
 		cursor: not-allowed;
 
 		.input {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 			cursor: not-allowed;
 		}
 
 		.trigger {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 			cursor: not-allowed;
 			background: transparent;
 
 			&:hover {
 				background: transparent;
-				color: var(--color-background-disable);
+				color: var(--background-disable);
 			}
 		}
 	}
@@ -223,11 +223,11 @@ $autocomplete-opacity-visible: 1;
 
 .invalid {
 	.control {
-		border-color: var(--color-background-danger-strong);
+		border-color: var(--background-error);
 
 		&:hover,
 		&[data-focus] {
-			border-color: var(--color-background-danger-strong) !important;
+			border-color: var(--background-error) !important;
 		}
 	}
 }

package/src/components/ds-avatar/_mixins.scss

@@ -5,9 +5,9 @@ $avatar-size-md: 48px;
 $avatar-size-lg: 80px;
 $avatar-size-xl: 144px;
 
-$avatar-border-width: var(--spacing-4xs);
-$avatar-border-radius-small: var(--spacing-3xs);
-$avatar-border-radius-large: var(--spacing-xs);
+$avatar-border-width: var(--4xs);
+$avatar-border-radius-small: var(--3xs);
+$avatar-border-radius-large: var(--xs);
 $avatar-overlap-xsm: -4px;
 $avatar-overlap-sm: -6px;
 $avatar-overlap-default: -8px;
@@ -28,18 +28,18 @@ $avatar-overlap-default: -8px;
 	}
 
 	&.regular {
-		@include avatar-size($avatar-size-regular, var(--font-size-xs));
+		@include avatar-size($avatar-size-regular, var(--body-font-size-xs));
 	}
 
 	&.md {
-		@include avatar-size($avatar-size-md, var(--font-size-md));
+		@include avatar-size($avatar-size-md, var(--body-font-size-md));
 	}
 
 	&.lg {
-		@include avatar-size($avatar-size-lg, var(--font-size-2xl));
+		@include avatar-size($avatar-size-lg, var(--heading-font-size-2xl));
 	}
 
 	&.xl {
-		@include avatar-size($avatar-size-xl, var(--font-size-3xl));
+		@include avatar-size($avatar-size-xl, var(--heading-font-size-3xl));
 	}
 }

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

@@ -6,8 +6,8 @@
 	justify-content: center;
 	position: relative;
 	overflow: hidden;
-	background-color: var(--color-background-deselected);
-	color: var(--color-font-on-action);
+	background-color: var(--background-deselected);
+	color: var(--font-on-action);
 	flex-shrink: 0;
 	user-select: none;
 

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

@@ -5,7 +5,7 @@
 	align-items: center;
 
 	.avatarItem {
-		border: $avatar-border-width solid var(--color-background);
+		border: $avatar-border-width solid var(--background);
 
 		&:not(:first-child) {
 			margin-left: $avatar-overlap-default;
@@ -24,9 +24,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: var(--color-background);
-		color: var(--color-font-action);
-		border: $avatar-border-width solid var(--color-background);
+		background-color: var(--background);
+		color: var(--font-action);
+		border: $avatar-border-width solid var(--background);
 		margin-left: $avatar-overlap-default;
 		font-weight: var(--font-weight-medium);
 		z-index: 1;
@@ -64,7 +64,7 @@
 	.tooltipList {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-3xs);
-		padding: var(--spacing-3xs) 0;
+		gap: var(--3xs);
+		padding: var(--3xs) 0;
 	}
 }

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

@@ -2,32 +2,32 @@
 
 @mixin breadcrumb-item {
 	@include typography.body-sm-reg;
-	color: var(--color-background-action);
+	color: var(--background-action);
 	text-decoration: none;
 	outline: none;
-	padding: var(--exo-spacing-2x-small) var(--spacing-sm);
-	gap: var(--exo-spacing-2x-small);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--3xs) var(--sm);
+	gap: var(--3xs);
+	border-radius: var(--3xs);
 	display: flex;
 	align-items: center;
 
 	&:hover {
-		color: var(--color-background-selected);
-		background: var(--color-background-action-tertiary);
+		color: var(--background-primary);
+		background: var(--background-action-tertiary-hover);
 	}
 
 	&:active {
-		color: var(--color-background-selected-hover);
-		background: var(--color-background-action-secondary-hover);
+		color: var(--background-primary-hover);
+		background: var(--background-action-secondary-hover);
 	}
 
 	&:focus {
-		outline: 2px solid var(--color-background-selected);
+		outline: 2px solid var(--background-primary);
 		outline-offset: 0;
 	}
 
 	&:disabled {
-		color: var(--color-background-disable);
+		color: var(--background-disable);
 	}
 }
 
@@ -53,7 +53,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		width: var(--icon-width-small);
 		height: var(--icon-width-small);
 	}
@@ -82,18 +82,18 @@
 }
 
 .icon {
-	margin-right: var(--exo-spacing-2x-small);
+	margin-right: var(--3xs);
 	display: flex;
 	align-items: center;
 }
 
 .dropdownIcon {
-	margin-left: var(--exo-spacing-2x-small);
+	margin-left: var(--3xs);
 	display: flex;
 	align-items: center;
 }
 
 .itemLabel {
 	@include typography.ellipsis;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }

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

@@ -2,31 +2,65 @@ import type { IconType } from '../ds-icon';
 
 export type DsBreadcrumbItem =
 	| {
+			/**
+			 * Renders the item as a direct navigation link to `href`.
+			 */
 			type: 'link';
+			/**
+			 * Visible text for the breadcrumb segment
+			 */
 			label: string;
+			/**
+			 * Destination URL navigated to when the segment is clicked
+			 */
 			href: string;
+			/**
+			 * Optional icon rendered before the label
+			 */
 			icon?: IconType;
 	  }
 	| {
+			/**
+			 * Renders the item as a dropdown trigger that reveals sibling destinations.
+			 */
 			type: 'dropdown';
+			/**
+			 * Visible text for the dropdown trigger
+			 */
 			label: string;
-			options: { label: string; href: string }[];
+			/**
+			 * Sibling destinations shown in the dropdown. Each option navigates to its
+			 * `href` when selected.
+			 */
+			options: {
+				/**
+				 * Visible text for the dropdown option
+				 */
+				label: string;
+				/**
+				 * Destination URL navigated to when the option is selected
+				 */
+				href: string;
+			}[];
+			/**
+			 * Optional icon rendered before the label
+			 */
 			icon?: IconType;
 	  };
 
 export interface DsBreadcrumbProps {
 	/**
-	 * The items to be displayed in the breadcrumb
+	 * Ordered breadcrumb segments rendered left-to-right. The last item is typically
+	 * the current page.
 	 */
 	items: DsBreadcrumbItem[];
 	/**
-	 * The event handler to be called when an option is selected
-	 *
-	 * @param href
+	 * Called when the user activates any link segment or picks a destination from a
+	 * dropdown segment. Receives the selected `href`.
 	 */
 	onSelect?: (href: string) => void;
 	/**
-	 * Additional CSS class name to be applied to the breadcrumb
+	 * Additional CSS class name applied to the breadcrumb root
 	 */
 	className?: string;
 }

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

@@ -2,5 +2,16 @@ import type { DsButtonProps as DsButtonLegacyProps } from './versions/ds-button-
 import type { DsButtonProps as DsButtonNewProps } from './versions/ds-button-new/ds-button-new.types';
 
 export type DsButtonUnifiedProps =
-	| (DsButtonLegacyProps & { design?: undefined | 'legacy' })
-	| (DsButtonNewProps & { design: 'v1.2' });
+	| (DsButtonLegacyProps & {
+			/**
+			 * Selects the legacy button implementation. Accepts `DsButtonLegacyProps`.
+			 * Omit or pass `'legacy'` to opt into this branch.
+			 */
+			design?: undefined | 'legacy';
+	  })
+	| (DsButtonNewProps & {
+			/**
+			 * Selects the new (v1.2) button implementation. Accepts `DsButtonNewProps`.
+			 */
+			design: 'v1.2';
+	  });

package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss

@@ -1,22 +1,22 @@
 @use '../../../../styles/typography';
 
-$color-primary-default: var(--action-cta1);
-$color-primary-hover: var(--action-hover-light);
-$color-primary-active: var(--action-active-light);
-$color-primary-disabled: var(--action-disabled);
-
-$color-secondary-default: var(--action-cta3);
-$color-secondary-hover: var(--neutral-4);
-$color-secondary-disabled: var(--action-disabled);
-
-$color-error-default: var(--system-status-error);
-$color-error-hover: var(--utility-error);
-$color-error-active: var(--utility-error);
-$color-error-disabled: var(--action-disabled);
-
-$color-white: var(--white);
-$color-neutral-6: var(--utility-disabled);
-$color-neutral-4: var(--neutral-4);
+$color-primary-default: var(--color-dap-blue-600);
+$color-primary-hover: var(--background-active-status);
+$color-primary-active: var(--color-dap-purple-200);
+$color-primary-disabled: var(--color-dap-gray-400);
+
+$color-secondary-default: var(--color-dap-brand-300);
+$color-secondary-hover: var(--color-dap-gray-500);
+$color-secondary-disabled: var(--color-dap-gray-400);
+
+$color-error-default: var(--background-error);
+$color-error-hover: var(--color-dap-red-100);
+$color-error-active: var(--color-dap-red-100);
+$color-error-disabled: var(--color-dap-gray-400);
+
+$color-white: var(--color-dap-gray-050);
+$color-neutral-6: var(--color-dap-gray-200);
+$color-neutral-4: var(--color-dap-gray-500);
 
 @mixin button-filled($background, $hover, $active, $disabled) {
 	background: $background;