@drivenets/design-system 0.16.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -41,14 +41,14 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-visually-hidden": "^1.2.5",
+    "@radix-ui/react-collapsible": "^1.1.17",
+    "@radix-ui/react-dialog": "^1.1.20",
+    "@radix-ui/react-dropdown-menu": "^2.1.21",
+    "@radix-ui/react-visually-hidden": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.2",
-    "@zag-js/react": "^1.41.2",
-    "@zag-js/steps": "^1.41.2",
+    "@tanstack/react-virtual": "^3.14.6",
+    "@zag-js/react": "^1.42.0",
+    "@zag-js/steps": "^1.42.0",
     "classnames": "^2.5.1",
     "csstype": "^3.2.3"
   },
@@ -61,25 +61,25 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@eslint/compat": "^2.1.0",
-    "@faker-js/faker": "^10.3.0",
-    "@figma/code-connect": "^1.4.8",
+    "@faker-js/faker": "^10.5.0",
+    "@figma/code-connect": "^1.4.9",
     "@github-ui/storybook-addon-performance-panel": "^1.1.4",
-    "@hookform/resolvers": "^5.4.0",
+    "@hookform/resolvers": "^5.4.2",
     "@rolldown/plugin-babel": "^0.2.3",
     "@storybook/addon-a11y": "^10.4.1",
     "@storybook/addon-docs": "^10.4.1",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
-    "@tanstack/react-query": "^5.100.14",
-    "@tanstack/react-router": "^1.170.8",
-    "@tsdown/css": "^0.22.12",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-router": "^1.170.18",
+    "@tsdown/css": "^0.22.14",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/serve-handler": "^6.1.4",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "babel-plugin-react-compiler": "^1.0.0",
@@ -87,27 +87,27 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.1",
+    "eslint-plugin-storybook": "^10.5.0",
     "mockdate": "^3.0.5",
-    "playwright": "^1.60.0",
-    "publint": "^0.3.21",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-hook-form": "^7.76.1",
+    "playwright": "^1.62.0",
+    "publint": "^0.3.22",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-hook-form": "^7.83.0",
     "remark-gfm": "^4.0.1",
     "sass-embedded": "^1.100.0",
     "serve-handler": "^6.1.7",
     "storybook": "^10.4.1",
-    "tsdown": "^0.22.12",
+    "tsdown": "^0.22.14",
     "typed-scss-modules": "^8.1.1",
     "typescript": "npm:@typescript/typescript6",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "8.0.14",
+    "vite": "8.1.5",
     "vitest": "^4.1.10",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
     "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.10"
+    "@drivenets/vite-plugin-design-system": "0.0.11"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

package/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15271-7357
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerGlobalV1` is the full-width bar pinned to the top of the viewport. It
+// maps to the same `DsAlertBanner` as the inline card but without `inline` (the
+// default `global` layout) and with no title. See `ds-alert-banner.figma.ts` for the
+// inline variant.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'info neutral': 'info-neutral',
+	'info blue': 'info-blue',
+	warning: 'warning',
+	error: 'error',
+	success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'info neutral': 'info',
+	'info blue': 'info',
+	warning: 'warning',
+	error: 'error',
+	success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} variant="${variant}" icon="${icon}"${closableAttr}>
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner-global',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-alert-banner/ds-alert-banner.figma.ts

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14850-7088
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerInlineV1` is the inline (bordered card) banner that sits in normal
+// document flow. It maps to the controlled `DsAlertBanner` with `inline`. The
+// full-width, top-of-viewport `DsAlertBannerGlobalV1` maps to the same component
+// without `inline` — see `ds-alert-banner-global.figma.ts`.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'Info Neutral': 'info-neutral',
+	'Info Blue': 'info-blue',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'Info Neutral': 'info',
+	'Info Blue': 'info',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showTitle = instance.getBoolean('Show Titles');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const titleLine = showTitle ? `\n\t<DsAlertBanner.Title>Title</DsAlertBanner.Title>` : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} inline variant="${variant}" icon="${icon}"${closableAttr}>${titleLine}
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-alert-banner/ds-alert-banner.tsx

@@ -12,7 +12,7 @@ import { DsTypography } from '../ds-typography';
  * severity variants, an optional icon, and an optional close button. Compose the
  * content with `DsAlertBanner.Title`, `DsAlertBanner.Body`, and `DsAlertBanner.Actions`.
  */
-const DsAlertBanner = ({
+const DsAlertBannerRoot = ({
 	open,
 	onOpenChange,
 	inline = false,
@@ -115,10 +115,11 @@ Title.displayName = 'DsAlertBanner.Title';
 Body.displayName = 'DsAlertBanner.Body';
 Actions.displayName = 'DsAlertBanner.Actions';
 
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
-
-DsAlertBanner.displayName = 'DsAlertBanner';
+const DsAlertBanner = Object.assign(DsAlertBannerRoot, {
+	displayName: 'DsAlertBanner',
+	Title,
+	Body,
+	Actions,
+});
 
 export default DsAlertBanner;

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

@@ -30,7 +30,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsAutocomplete ${attrs} />`,
-	imports: ["import { DsAutocomplete } from '@drivenets/design-system'"],
+	imports: ["import { DsAutocomplete } from '@drivenets/design-system';"],
 	id: 'ds-autocomplete',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -1,7 +1,6 @@
 @use '../../styles/shared/dropdown';
 @use '../../styles/shared/input';
 
-$autocomplete-input-height: 36px;
 $autocomplete-max-visible-items: 4;
 $autocomplete-item-height: 38px;
 $autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);
@@ -29,9 +28,21 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	gap: var(--3xs);
-	height: $autocomplete-input-height;
-	min-height: $autocomplete-input-height;
-	max-height: $autocomplete-input-height;
+	height: input.$input-text-height-default;
+	min-height: input.$input-text-height-default;
+	max-height: input.$input-text-height-default;
+
+	&.small {
+		height: input.$input-text-height-small;
+		min-height: input.$input-text-height-small;
+		max-height: input.$input-text-height-small;
+	}
+
+	&.large {
+		height: input.$input-text-height-large;
+		min-height: input.$input-text-height-large;
+		max-height: input.$input-text-height-large;
+	}
 
 	&[data-focus] {
 		border-color: var(--form-control-border-color, var(--border-action-primary)) !important;

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

@@ -12,6 +12,7 @@ export const DsAutocomplete = ({
 	id,
 	options = [],
 	loading = false,
+	size = 'default',
 	style,
 	className,
 	placeholder = 'Start typing to search...',
@@ -74,7 +75,13 @@ export const DsAutocomplete = ({
 			onOpenChange={handleOpenChange}
 			closeOnSelect
 		>
-			<Combobox.Control className={styles.control}>
+			<Combobox.Control
+				className={classNames(
+					styles.control,
+					size === 'small' && styles.small,
+					size === 'large' && styles.large,
+				)}
+			>
 				{startAdornment && <span className={styles.startAdornment}>{startAdornment}</span>}
 
 				<Combobox.Input className={styles.input} placeholder={placeholder} />
@@ -92,13 +99,13 @@ export const DsAutocomplete = ({
 										combobox.setInputValue('');
 									}}
 								>
-									<DsIcon icon="close" size="medium" />
+									<DsIcon icon="close" size={size === 'small' ? 'small' : 'medium'} />
 								</button>
 							)}
 
 							{showTrigger && (
 								<Combobox.Trigger className={styles.trigger} aria-label="Toggle dropdown">
-									<DsIcon icon="keyboard_arrow_down" size="medium" />
+									<DsIcon icon="keyboard_arrow_down" size={size === 'small' ? 'small' : 'medium'} />
 								</Combobox.Trigger>
 							)}
 						</div>

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

@@ -1,6 +1,9 @@
 import type React from 'react';
 import type { IconName } from '../ds-icon';
 
+export const autocompleteSizes = ['small', 'default', 'large'] as const;
+export type AutocompleteSize = (typeof autocompleteSizes)[number];
+
 export interface DsAutocompleteOption {
 	/**
 	 * Label to display in the autocomplete dropdown
@@ -31,6 +34,11 @@ export interface DsAutocompleteProps {
 	 * When true, a loading message is shown in the dropdown.
 	 */
 	loading?: boolean;
+	/**
+	 * The size of the autocomplete control
+	 * @default 'default'
+	 */
+	size?: AutocompleteSize;
 
 	/**
 	 * Additional styles to apply to the component

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

@@ -24,7 +24,7 @@ const type = instance.getEnum('Type', { Circle: 'circle', Rounded: 'rounded' })
 
 export default {
 	example: figma.code`<DsAvatar name="Full Name" size="${size}" type="${type}" />`,
-	imports: ["import { DsAvatar } from '@drivenets/design-system'"],
+	imports: ["import { DsAvatar } from '@drivenets/design-system';"],
 	id: 'ds-avatar',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-avatar-group/ds-avatar-group.figma.ts

@@ -21,7 +21,7 @@ const size =
 
 export default {
 	example: figma.code`<DsAvatarGroup avatars={[]} size="${size}" />`,
-	imports: ["import { DsAvatarGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsAvatarGroup } from '@drivenets/design-system';"],
 	id: 'ds-avatar-group',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsBreadcrumb items={[]} />`,
-	imports: ["import { DsBreadcrumb } from '@drivenets/design-system'"],
+	imports: ["import { DsBreadcrumb } from '@drivenets/design-system';"],
 	id: 'ds-breadcrumb',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -7,6 +7,7 @@ const instance = figma.selectedInstance;
 
 const variant = instance.getEnum('buttonType', {
 	primary: 'primary',
+	'primary-subtle': 'primary-subtle',
 	secondary: 'secondary',
 	tertiary: 'tertiary',
 });
@@ -86,14 +87,15 @@ const labelNode = instance.findText('Button', { traverseInstances: true });
 const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Button';
 
 const iconProp = icon ? figma.code` icon="${icon}"` : '';
+const disabledProp = disabled ? ' disabled' : '';
 
 export default {
 	example: iconOnly
-		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}${iconProp} aria-label="${label}" />`
+		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${iconProp} aria-label="${label}" />`
 		: showIcon && icon
-			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''} icon="${icon}">${label}</DsButtonV3>`
-			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}>${label}</DsButtonV3>`,
-	imports: ["import { DsButtonV3 } from '@drivenets/design-system'"],
+			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp} icon="${icon}">${label}</DsButtonV3>`
+			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}>${label}</DsButtonV3>`,
+	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
 	id: 'ds-button-v3',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-button-v3/ds-button-v3.module.scss

@@ -3,7 +3,8 @@
 $height-large: 40px;
 $height-medium: 36px;
 $height-small: 28px;
-$border-radius: 4px;
+$border-radius: var(--3xs);
+$border-radius-high-emphasis: var(--sm);
 $focus-ring-width: 2px;
 
 @mixin focus-ring($outer-color) {
@@ -34,6 +35,10 @@ $focus-ring-width: 2px;
 		cursor: not-allowed;
 	}
 
+	&[data-high-emphasis] {
+		border-radius: $border-radius-high-emphasis;
+	}
+
 	&[data-loading] {
 		cursor: default;
 		pointer-events: none;
@@ -126,6 +131,37 @@ $focus-ring-width: 2px;
 	}
 }
 
+.root[data-color='default'][data-variant='primary-subtle'] {
+	background-color: var(--background-primary-subtle);
+	color: var(--font-action);
+	border-color: var(--border-action-primary);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-primary-subtle-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-primary-subtle-active);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-action-primary));
+
+		background-color: var(--background-primary-subtle-hover);
+		border-color: var(--border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-primary-subtle-active);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-primary-subtle-disabled);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
+	}
+}
+
 .root[data-color='default'][data-variant='secondary'] {
 	background-color: var(--background-action-secondary);
 	color: var(--font-main);
@@ -228,19 +264,50 @@ $focus-ring-width: 2px;
 	}
 }
 
+.root[data-color='error'][data-variant='primary-subtle'] {
+	background-color: var(--background-error-subtle);
+	color: var(--font-error);
+	border-color: var(--border-error);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-error-subtle-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-error-subtle-active);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-error));
+
+		background-color: var(--background-error-subtle-hover);
+		border-color: var(--border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-error-subtle-active);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-error-subtle-disabled);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
+	}
+}
+
 .root[data-color='error'][data-variant='secondary'] {
 	background-color: var(--background-action-secondary);
 	color: var(--font-error);
-	border-color: var(--border-error);
+	border-color: var(--border-error-weak);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
 		background-color: var(--background-error-secondary-hover);
-		border-color: var(--border-error-hover);
+		border-color: var(--border-error-medium);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-error-secondary-selected);
-		border-color: var(--border-error-hover);
+		background-color: var(--background-error-secondary-active);
+		border-color: var(--border-error-medium);
 	}
 
 	&:focus-visible {
@@ -251,8 +318,8 @@ $focus-ring-width: 2px;
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-error-secondary-selected);
-		border-color: var(--border-error-hover);
+		background-color: var(--background-error-secondary-active);
+		border-color: var(--border-error-medium);
 	}
 
 	&:disabled:not([data-loading]) {
@@ -293,32 +360,32 @@ $focus-ring-width: 2px;
 }
 
 .root[data-color='light'][data-variant='primary'] {
-	background-color: var(--background-light-primary);
+	background-color: var(--background-light-subtle);
 	color: var(--font-on-action);
-	border-color: transparent;
+	border-color: var(--border-inverse);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-light-primary-hover);
+		background-color: var(--background-light-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-light-primary-selected);
+		background-color: var(--background-light-active);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--outline-inverse));
+		@include focus-ring(var(--border-action-primary));
 
-		background-color: var(--background-light-primary-hover);
-		border-color: var(--border-action-secondary);
+		background-color: var(--background-light-hover);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-light-primary-selected);
+		background-color: var(--background-light-active);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-light-disabled);
-		color: var(--font-light-disabled);
+		background-color: transparent;
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
 	}
 }
 

package/src/components/ds-button-v3/ds-button-v3.tsx

@@ -29,6 +29,7 @@ const DsButtonV3 = ({
 	variant = 'primary',
 	size = 'medium',
 	selected = false,
+	highEmphasis = false,
 	type = 'button',
 	...rest
 }: DsButtonV3BaseProps) => {
@@ -48,6 +49,7 @@ const DsButtonV3 = ({
 			data-variant={variant}
 			data-size={size}
 			data-selected={selected ? 'true' : undefined}
+			data-high-emphasis={highEmphasis ? 'true' : undefined}
 			data-icon-only={isIconOnly || undefined}
 			data-loading={loading && !disabled ? '' : undefined}
 			{...rest}

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

@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes, Ref } from 'react';
 import type { IconType } from '../ds-icon';
 import type { ResponsiveValue } from '../../utils/responsive';
 
-export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
+export const buttonV3Variants = ['primary', 'primary-subtle', 'secondary', 'tertiary'] as const;
 export type ButtonV3Variant = (typeof buttonV3Variants)[number];
 
 export const buttonV3Colors = ['default', 'error', 'light'] as const;
@@ -24,7 +24,8 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 
 	/**
 	 * Visual variant of the button:
-	 * - `primary` — filled, highest-emphasis action
+	 * - `primary` — highest-emphasis action; filled for `default`/`error`, subtle outline for `color="light"`
+	 * - `primary-subtle` — subtle-filled, colored border and text (emphasis outline); `default`/`error` only
 	 * - `secondary` — outlined, medium-emphasis action
 	 * - `tertiary` — borderless, low-emphasis action (text-like)
 	 * @default 'primary'
@@ -44,6 +45,14 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 	 */
 	selected?: boolean;
 
+	/**
+	 * Raises the corner radius for high-emphasis surfaces such as
+	 * Sign in, Landing, and NetGen. Purely a rounding change — does not affect
+	 * color or priority.
+	 * @default false
+	 */
+	highEmphasis?: boolean;
+
 	/**
 	 * Leading icon. When set without children, renders as icon-only (square) layout.
 	 */