chore: sync next with main [AR-52648]

.changeset/chubby-items-itch.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+fix wrong border color of disabled `DsButtonV3`

.changeset/cool-results-show.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+fix styles of input based components in disabled state

.changeset/khaki-regions-beg.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+fix border-color of input based components in disabled state

.changeset/lemon-wings-travel.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/eslint-plugin-design-system': patch
+---
+
+Refine the MUI imports reporting range to reduce noise

.changeset/lucky-numbers-cheat.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Align clear button behavior across `DsDatePicker` and `DsTimePicker` components

.changeset/fix-dropdown-font-size.md → .changeset/pretty-chicken-shave.md

@@ -2,4 +2,4 @@
 '@drivenets/design-system': patch
 ---
 
-Fix font size in `DsDropdownMenu` item
+fix focus styles of `DsButtonV3`

.changeset/responsive-value-utility.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add responsive prop support at 1440px breakpoint with CSS-first styling and `useResponsiveValue` hook for JS conditional rendering

.changeset/silver-beds-post.md

@@ -0,0 +1,6 @@
+---
+'@drivenets/eslint-plugin-design-system': patch
+'@drivenets/vite-plugin-design-system': patch
+---
+
+Improve build process

.changeset/big-results-flash.md → .changeset/tidy-singers-travel.md

@@ -2,4 +2,4 @@
 '@drivenets/design-system': minor
 ---
 
-Add `DsDatePicker` component
+Add the `DsButtonV3` component

.changeset/stale-doors-admire.md → .changeset/wicked-wings-jog.md

@@ -2,4 +2,4 @@
 '@drivenets/design-system': patch
 ---
 
-Add aria role to `DsLoader`
+Improve build process

.cursor/rules/code-review.mdc

@@ -65,3 +65,8 @@ Before submitting a PR:
 - [ ] No cross-component internal imports
 - [ ] No unnecessary `useMemo`/`useCallback`
 - [ ] Check Ark UI for existing primitives before custom implementation
+- [ ] No `overflow: hidden` as a band-aid for layout bugs
+- [ ] No raw `<img>` — use DS components (e.g., `DsAvatar`) with fallback
+- [ ] No leftover code from abandoned implementation approaches
+- [ ] No `-webkit-*` without cross-browser fallback or `@supports` guard
+- [ ] AI-generated tests actually assert meaningful behavior (not duplicate/trivial)

.cursor/rules/react-patterns.mdc

@@ -130,3 +130,32 @@ const [inputValue, setInputValue] = useState('');
 </Combobox.Root>
 ```
 
+---
+
+## Common Pitfalls
+
+| Requirement                                  | Details                                                                          |
+| -------------------------------------------- | -------------------------------------------------------------------------------- |
+| **Don't spread native objects**              | `{...file}` strips the `File`/`Blob` prototype; use native APIs to copy         |
+| **Event propagation in composed components** | Child content in clickable containers (e.g., table rows) must stop propagation   |
+| **Validate, don't silently fallback**        | Input components should reject bad values, not silently swap in defaults         |
+
+```tsx
+// Bad - spreading loses File prototype methods
+const copy = { ...originalFile };
+
+// Good - preserve prototype
+const copy = new File([originalFile], originalFile.name, { type: originalFile.type });
+
+// Bad - expanded row content triggers parent onClick
+<tr onClick={onRowClick}>
+  <td>{expandedContent}</td>
+</tr>
+
+// Good - prevent propagation from child content
+<tr onClick={onRowClick}>
+  <td onClick={isExpandedContent ? (e) => e.stopPropagation() : undefined}>
+    {expandedContent}
+  </td>
+</tr>
+```

.cursor/rules/scss.mdc

@@ -46,6 +46,8 @@ globs: **/*.scss
 | **No `!important`**                          | Clean components never need it; if you think you do, refactor the selectors      |
 | **Standard transition duration**             | Use `0.2s` as the standard transition duration across components                 |
 | **Component-scoped variables**               | Keep component-specific CSS variables in the component file, not in `_root.scss` |
+| **No `overflow: hidden` as band-aid**        | Find and fix the root cause of overflow; hiding it masks real layout bugs        |
+| **No webkit-only without fallback**          | `-webkit-*` properties (e.g., scrollbar hiding) must include a cross-browser fallback or `@supports` |
 
 ---
 

.cursor/rules/standards.mdc

@@ -18,6 +18,8 @@ alwaysApply: true
 | **Single deprecation comment**               | In types file only, not on every export                                          |
 | **Value props first, callbacks last**        | Order: value/config props, then render/slot props, then callbacks                |
 | **`locale` prop for i18n**                   | Components with hardcoded text should accept a `locale` prop for overrides       |
+| **Domain-agnostic naming**                   | No product-specific terms in names or props (e.g., "Workflow", "Order")          |
+| **No use-case-specific props**               | Props like `layout="form"` bake in one consumer's use case; keep API composable  |
 
 ```typescript
 // Good - own props layer with null for clearable value

.cursor/rules/storybook.mdc

@@ -11,6 +11,31 @@ Interaction and regression coverage lives in **`*.browser.test.tsx`** next to th
 
 See `.cursor/rules/browser-tests.mdc` for patterns (a11y queries, `vi.fn()` spies, semantic assertions).
 
+**Scrutinize AI-generated tests** — AI tools produce tests that look real but assert nothing useful. Verify each test checks behavior unique to that story/scenario.
+
+```tsx
+// Red flag - AI slop: looks like a test but asserts nothing meaningful
+export const DifferentOrientation: Story = {
+  args: { orientation: 'vertical' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('group')).toBeInTheDocument(); // same as Default
+  },
+};
+
+// Good - actually verifies orientation-specific behavior
+export const Vertical: Story = {
+  args: { orientation: 'vertical' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputs = canvas.getAllByRole('textbox');
+    const firstRect = inputs[0].getBoundingClientRect();
+    const secondRect = inputs[1].getBoundingClientRect();
+    await expect(secondRect.top).toBeGreaterThan(firstRect.bottom);
+  },
+};
+```
+
 ---
 
 ## Date Mocking

.cursor/skills/pr-prep/SKILL.md

@@ -46,13 +46,34 @@ pnpm --filter @drivenets/design-system typecheck
 pnpm --filter @drivenets/design-system test <test-file> --run
 ```
 
-For new components or substantial interaction/behavior changes, confirm an updated `*.browser.test.tsx` exists under the component’s `__tests__/` when appropriate.
+For new components or substantial interaction/behavior changes, confirm an updated `*.browser.test.tsx` exists under the component's `__tests__/` when appropriate.
 
 ### Step 3: Review changed files against project rules
 
 For each changed file, apply the relevant cursor rules (`scss.mdc`, `react-patterns.mdc`, `storybook.mdc`, `standards.mdc`). Flag violations found in the diff.
 
-### Step 4: Check changeset
+### Step 4: Validate SCSS files
+
+For every `.module.scss` in the diff:
+
+1. Search for `!important` -- flag any occurrence.
+2. Search for hardcoded colors (hex values like `#xxx`) -- flag any not in a comment.
+3. Search for `:global` -- flag any occurrence.
+4. Search for `overflow: hidden` or `overflow: auto` -- flag for manual review (may be masking a layout bug).
+5. Search for `-webkit-` prefixed properties -- flag any without a standard CSS fallback or `@supports` guard (e.g., `-webkit-scrollbar` without `scrollbar-width: none`).
+
+### Step 5: Validate TypeScript files
+
+For every `.tsx` / `.ts` in the diff:
+
+1. Check for cross-component imports (importing from `../ds-other-component/`) -- flag as violation. Only allow main components imports, not utilities or subcomponents.
+2. Check for `forwardRef` usage -- flag as deprecated.
+3. Check for `vi.useFakeTimers` in story files -- should use `mockdate`.
+4. Check for raw `<img` tags in component `.tsx` files (not stories) -- should use `DsAvatar` or equivalent DS component with fallback.
+5. Check for spread of native objects (`{...file}`, `{...blob}`) -- flag as prototype loss risk.
+6. In `.stories.tsx` and `.browser.test.tsx` files, check for AI-generated test smell: assertions that only check `toBeTruthy()` / `toBeInTheDocument()` without testing behavior unique to that scenario -- flag as likely useless AI-generated test.
+
+### Step 6: Check changeset
 
 ```bash
 ls .changeset/*.md 2>/dev/null | grep -v README
@@ -62,7 +83,7 @@ ls .changeset/*.md 2>/dev/null | grep -v README
 - If a changeset exists, read it and verify the message is user-facing ("Add X to Y" or "Fix X in Y"), not implementation details.
 - Remind: use `skip changelog` label only for CI/test/docs changes, never for bug fixes.
 
-### Step 5: Output report
+### Step 7: Output report
 
 Present a pass/fail checklist:
 
@@ -74,9 +95,19 @@ PR Preparation Report
 [PASS/FAIL] Typecheck ............. {details}
 [PASS/FAIL] Tests ................. {details}
 [PASS/FAIL] Rule violations ....... {details}
-[PASS/FAIL] Changeset ............. {details}
-
-{N}/5 checks passed.
+[PASS/FAIL] No !important ........ {details}
+[PASS/FAIL] No hardcoded colors .. {details}
+[PASS/FAIL] No :global ........... {details}
+[PASS/FAIL] No cross-component ... {details}
+[PASS/FAIL] No forwardRef ........ {details}
+[PASS/FAIL] No overflow:hidden ... {details}
+[PASS/FAIL] No raw <img> ........ {details}
+[PASS/FAIL] No native spread .... {details}
+[PASS/FAIL] No webkit-only ..... {details}
+[PASS/FAIL] No AI test slop .... {details}
+[PASS/FAIL] Changeset ............ {details}
+
+{N}/15 checks passed.
 ```
 
 If all pass, the PR is ready for submission. If any fail, list the specific files and lines that need fixing.

.github/workflows/security.yml

@@ -44,12 +44,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
         with:
           category: '/language:${{matrix.language}}'

knip.json

@@ -3,7 +3,6 @@
 	"ignore": [
 		"**/*.scss",
 		"**/simple-file-upload-adapter.ts",
-		"**/mock-file-upload-adapter.ts",
 		"./packages/eslint-plugin-internal/src/rules/__tests__/fixtures/*.ts"
 	],
 	"ignoreExportsUsedInFile": {

package.json

@@ -57,7 +57,7 @@
 		"syncpack": "^14.0.0",
 		"turbo": "^2.8.14",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.56.1"
+		"typescript-eslint": "^8.57.2"
 	},
 	"pnpm": {
 		"overrides": {

packages/design-system/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @drivenets/design-system
 
+## 0.8.0
+
+### Minor Changes
+
+- 73e3010: Add `DsDatePicker` component
+- 1fa6a48: Deprecated `DsDateInput` component
+- 27151fc: Add `DsKeyValuePair` component
+- 5cd65b4: Add `DsTimePicker` component
+- ad3aad4: Add `DsDateRangePicker` component
+
+### Patch Changes
+
+- 0335e72: Capitalize only the first word in `DsStatusBadge`
+- 6dc2bbe: Fix font size in `DsDropdownMenu` item
+- 8aaa33b: Update dependencies
+- 56d993b: Fix table issues related to React Compiler
+- 8c56a53: Add `hideActionRequired` prop to `DsCommentBubble`
+- 7752e64: Add aria role to `DsLoader`
+- 5a59014: Remove ellipsis from `DsTooltip`
+  Add `slotProps` to `DsTooltip`
+- e6da4c4: Fix `DsAutocomplete` onValueChange trigger, fix clear button
+- 16f7361: Fix styles in `DsCommentBubble`
+- eef2a74: Use semantic HTML structure in `DsTable` empty view
+- ba7fb97: Fix File prototype loss in `DsFileUpload`
+
 ## 0.7.3
 
 ### Patch Changes

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@drivenets/design-system",
-	"version": "0.7.3",
+	"version": "0.8.0",
 	"license": "Apache-2.0",
 	"type": "module",
 	"types": "./dist/index.d.cts",
@@ -37,7 +37,9 @@
 	},
 	"scripts": {
 		"install:playwright": "pnpm exec playwright install chromium --with-deps",
-		"lint": "pnpm generate-scss-dts && eslint --max-warnings=0 .; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
+		"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",
 		"typecheck": "pnpm generate-scss-dts && tsc; 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",
@@ -85,13 +87,14 @@
 		"@eslint/compat": "^2.0.3",
 		"@faker-js/faker": "^10.3.0",
 		"@hookform/resolvers": "^5.2.2",
-		"@rolldown/plugin-babel": "^0.2.1",
+		"@rolldown/plugin-babel": "^0.2.2",
 		"@storybook/addon-a11y": "^10.2.19",
 		"@storybook/addon-docs": "^10.2.19",
 		"@storybook/addon-vitest": "^10.2.19",
 		"@storybook/react-vite": "^10.2.19",
 		"@tanstack/react-query": "^5.90.21",
 		"@tanstack/react-router": "^1.166.2",
+		"@tsdown/css": "^0.21.6",
 		"@types/eslint-plugin-jsx-a11y": "^6.10.1",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
@@ -106,20 +109,17 @@
 		"eslint-plugin-storybook": "^10.2.19",
 		"mockdate": "^3.0.5",
 		"playwright": "^1.58.2",
-		"postcss": "^8.5.8",
-		"postcss-modules": "^6.0.1",
 		"publint": "^0.3.18",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-hook-form": "^7.71.2",
-		"rollup-plugin-sass": "^1.15.3",
 		"sass-embedded": "^1.97.3",
 		"storybook": "^10.2.19",
-		"tsdown": "^0.21.0",
+		"tsdown": "^0.21.6",
 		"typed-scss-modules": "^8.1.1",
 		"typescript": "^5.9.3",
 		"typescript-plugin-css-modules": "^5.2.0",
-		"vite": "^8.0.0",
+		"vite": "8.0.5",
 		"vitest": "^4.1.0",
 		"vitest-browser-react": "^2.1.0",
 		"zod": "^4.3.6"

packages/design-system/rolldown/react-compiler-rolldown-plugin.ts

@@ -1,7 +1,8 @@
+import type { Rolldown } from 'tsdown';
 import babel from '@rolldown/plugin-babel';
 import { reactCompilerPreset } from '@vitejs/plugin-react';
 
-export function reactCompilerRolldownPlugin() {
+export function reactCompilerRolldownPlugin(): Promise<Rolldown.Plugin> {
 	return babel({
 		presets: [reactCompilerPreset()],
 		include: [/src\/.*\.tsx?/],