@drivenets/design-system 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.9.1",
+  "version": "0.10.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-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-v3/ds-button-v3.module.scss

@@ -1,4 +1,3 @@
-@use '../../styles/root_updated';
 @use '../../styles/shared/button' as button;
 
 $height-large: 40px;
@@ -98,294 +97,294 @@ $focus-ring-width: 2px;
 }
 
 .root[data-color='default'][data-variant='primary'] {
-	background-color: var(--background-background-primary);
-	color: var(--font-font-on-action);
+	background-color: var(--background-primary);
+	color: var(--font-on-action);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-primary-hover);
+		background-color: var(--background-primary-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-primary-selected);
+		background-color: var(--background-primary-selected);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-action-primary));
+		@include focus-ring(var(--border-action-primary));
 
-		background-color: var(--background-background-primary-hover);
-		border-color: var(--border-border-inverse);
+		background-color: var(--background-primary-hover);
+		border-color: var(--border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-primary-selected);
+		background-color: var(--background-primary-selected);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-background-disable);
-		color: var(--font-font-on-action);
+		background-color: var(--background-disable);
+		color: var(--font-on-action);
 	}
 }
 
 .root[data-color='default'][data-variant='secondary'] {
-	background-color: var(--background-background-action-secondary);
-	color: var(--font-font-main);
-	border-color: var(--border-border);
+	background-color: var(--background-action-secondary);
+	color: var(--font-main);
+	border-color: var(--border);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-secondary-hover);
-		color: var(--font-font-action-secondary);
-		border-color: var(--border-border-secondary-hover);
+		background-color: var(--background-secondary-hover);
+		color: var(--font-action-secondary);
+		border-color: var(--border-secondary-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-action-secondary-hover);
-		color: var(--font-font-action-secondary);
-		border-color: var(--border-border-secondary-hover);
+		background-color: var(--background-action-secondary-hover);
+		color: var(--font-action-secondary);
+		border-color: var(--border-secondary-hover);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-action-primary-hover));
+		@include focus-ring(var(--border-action-primary-hover));
 
-		background-color: var(--background-background-secondary-hover);
-		border-color: var(--border-border-inverse);
-		color: var(--font-font-action-secondary);
+		background-color: var(--background-secondary-hover);
+		border-color: var(--border-inverse);
+		color: var(--font-action-secondary);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-action-secondary-hover);
-		color: var(--font-font-action-secondary);
-		border-color: var(--border-border-secondary-hover);
+		background-color: var(--background-action-secondary-hover);
+		color: var(--font-action-secondary);
+		border-color: var(--border-secondary-hover);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-background-action-secondary);
-		color: var(--font-font-disabled);
-		border-color: var(--border-border-disabled);
+		background-color: var(--background-action-secondary);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
 	}
 }
 
 .root[data-color='default'][data-variant='tertiary'] {
 	background-color: transparent;
-	color: var(--font-font-main);
+	color: var(--font-main);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-secondary-hover);
-		color: var(--font-font-action-secondary);
+		background-color: var(--background-secondary-hover);
+		color: var(--font-action-secondary);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-action-secondary-hover);
-		color: var(--font-font-action-secondary);
+		background-color: var(--background-action-secondary-hover);
+		color: var(--font-action-secondary);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-action-primary-hover));
+		@include focus-ring(var(--border-action-primary-hover));
 
-		background-color: var(--background-background-secondary-hover);
-		border-color: var(--border-border-inverse);
-		color: var(--font-font-action-secondary);
+		background-color: var(--background-secondary-hover);
+		border-color: var(--border-inverse);
+		color: var(--font-action-secondary);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-action-secondary-hover);
-		color: var(--font-font-action-secondary);
+		background-color: var(--background-action-secondary-hover);
+		color: var(--font-action-secondary);
 	}
 
 	&:disabled:not([data-loading]) {
 		background-color: transparent;
-		color: var(--font-font-disabled);
+		color: var(--font-disabled);
 	}
 }
 
 .root[data-color='error'][data-variant='primary'] {
-	background-color: var(--background-background-error);
-	color: var(--font-font-on-action);
+	background-color: var(--background-error);
+	color: var(--font-on-action);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-error-hover);
+		background-color: var(--background-error-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-error-selected);
+		background-color: var(--background-error-selected);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-error));
+		@include focus-ring(var(--border-error));
 
-		background-color: var(--background-background-error-hover);
-		border-color: var(--border-border-inverse);
+		background-color: var(--background-error-hover);
+		border-color: var(--border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-error-selected);
+		background-color: var(--background-error-selected);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-background-disable);
-		color: var(--font-font-on-action);
+		background-color: var(--background-disable);
+		color: var(--font-on-action);
 	}
 }
 
 .root[data-color='error'][data-variant='secondary'] {
-	background-color: var(--background-background-action-secondary);
-	color: var(--font-font-error);
-	border-color: var(--border-border-error);
+	background-color: var(--background-action-secondary);
+	color: var(--font-error);
+	border-color: var(--border-error);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-error-secondary-hover);
-		border-color: var(--border-border-error-hover);
+		background-color: var(--background-error-secondary-hover);
+		border-color: var(--border-error-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-error-secondary-selected);
-		border-color: var(--border-border-error-hover);
+		background-color: var(--background-error-secondary-selected);
+		border-color: var(--border-error-hover);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-error));
+		@include focus-ring(var(--border-error));
 
-		background-color: var(--background-background-error-secondary-hover);
-		border-color: var(--border-border-inverse);
+		background-color: var(--background-error-secondary-hover);
+		border-color: var(--border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-error-secondary-selected);
-		border-color: var(--border-border-error-hover);
+		background-color: var(--background-error-secondary-selected);
+		border-color: var(--border-error-hover);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-background-action-secondary);
-		color: var(--font-font-disabled);
-		border-color: var(--border-border-disabled);
+		background-color: var(--background-action-secondary);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
 	}
 }
 
 .root[data-color='error'][data-variant='tertiary'] {
 	background-color: transparent;
-	color: var(--font-font-error);
+	color: var(--font-error);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-error-secondary-hover);
+		background-color: var(--background-error-secondary-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-error-secondary-selected);
+		background-color: var(--background-error-secondary-selected);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-error));
+		@include focus-ring(var(--border-error));
 
-		background-color: var(--background-background-error-secondary-hover);
-		border-color: var(--border-border-inverse);
+		background-color: var(--background-error-secondary-hover);
+		border-color: var(--border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-error-secondary-selected);
+		background-color: var(--background-error-secondary-selected);
 	}
 
 	&:disabled:not([data-loading]) {
 		background-color: transparent;
-		color: var(--font-font-disabled);
+		color: var(--font-disabled);
 	}
 }
 
 .root[data-color='light'][data-variant='primary'] {
-	background-color: var(--background-background-ondark-primary);
-	color: var(--font-font-on-action);
+	background-color: var(--background-ondark-primary);
+	color: var(--font-on-action);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-ondark-primary-hover);
+		background-color: var(--background-ondark-primary-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-ondark-primary-selected);
+		background-color: var(--background-ondark-primary-selected);
 	}
 
 	&:focus-visible {
 		@include focus-ring(var(--outline-outline-inverse));
 
-		background-color: var(--background-background-ondark-primary-hover);
-		border-color: var(--border-border-action-secondary);
+		background-color: var(--background-ondark-primary-hover);
+		border-color: var(--border-action-secondary);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-ondark-primary-selected);
+		background-color: var(--background-ondark-primary-selected);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-background-ondark-disabled);
-		color: var(--font-font-disabled);
+		background-color: var(--background-ondark-disabled);
+		color: var(--font-disabled);
 	}
 }
 
 .root[data-color='light'][data-variant='secondary'] {
 	background-color: transparent;
-	color: var(--font-font-on-action);
-	border-color: var(--border-border-ondark-secondary);
+	color: var(--font-on-action);
+	border-color: var(--border-ondark-secondary);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-ondark-secondary-hover);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-hover);
+		color: var(--font-on-action);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-ondark-secondary-selected);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-selected);
+		color: var(--font-on-action);
 	}
 
 	&:focus-visible {
 		@include focus-ring(var(--outline-outline-inverse));
 
-		background-color: var(--background-background-ondark-secondary-hover);
-		border-color: var(--border-border-action-secondary);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-hover);
+		border-color: var(--border-action-secondary);
+		color: var(--font-on-action);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-ondark-secondary-selected);
+		background-color: var(--background-ondark-secondary-selected);
 	}
 
 	&:disabled:not([data-loading]) {
 		background-color: transparent;
-		color: var(--font-font-ondark-disabled);
-		border-color: var(--background-background-ondark-disabled);
+		color: var(--font-ondark-disabled);
+		border-color: var(--background-ondark-disabled);
 	}
 }
 
 .root[data-color='light'][data-variant='tertiary'] {
 	background-color: transparent;
-	color: var(--font-font-on-action);
+	color: var(--font-on-action);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-ondark-secondary-hover);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-hover);
+		color: var(--font-on-action);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-ondark-secondary-selected);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-selected);
+		color: var(--font-on-action);
 	}
 
 	&:focus-visible {
 		@include focus-ring(var(--outline-outline-inverse));
 
-		background-color: var(--background-background-ondark-secondary-hover);
-		border-color: var(--border-border-action-secondary);
-		color: var(--font-font-on-action);
+		background-color: var(--background-ondark-secondary-hover);
+		border-color: var(--border-action-secondary);
+		color: var(--font-on-action);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-ondark-secondary-selected);
+		background-color: var(--background-ondark-secondary-selected);
 	}
 
 	&:disabled:not([data-loading]) {
 		background-color: transparent;
-		color: var(--font-font-ondark-disabled);
+		color: var(--font-ondark-disabled);
 	}
 }

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

@@ -23,16 +23,23 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 	color?: ButtonV3Color;
 
 	/**
+	 * Visual variant of the button:
+	 * - `primary` — filled, highest-emphasis action
+	 * - `secondary` — outlined, medium-emphasis action
+	 * - `tertiary` — borderless, low-emphasis action (text-like)
 	 * @default 'primary'
 	 */
 	variant?: ButtonV3Variant;
 
 	/**
+	 * Size of the button. Controls height, padding, font size, and icon size.
 	 * @default 'medium'
 	 */
 	size?: ButtonV3Size;
 
 	/**
+	 * Whether the button is in a selected/pressed state. Used for toggle buttons
+	 * and segmented controls.
 	 * @default false
 	 */
 	selected?: boolean;

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

@@ -37,7 +37,9 @@ export interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {
 	highlightSelected?: boolean;
 
 	/**
-	 * Disabled state - prevents interaction
+	 * Whether the card is disabled. Prevents selection and click interactions and
+	 * visually dims the card.
+	 * @default false
 	 */
 	disabled?: boolean;
 }