npm - @vertesia/ui - Versions diffs - 1.5.0-dev.20260714.072725Z → 1.5.0-dev.20260722.120446Z - Mend

@vertesia/ui 1.5.0-dev.20260714.072725Z → 1.5.0-dev.20260722.120446Z

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/llms.txt CHANGED Viewed

@@ -5,14 +5,14 @@
 ## Reference URLs
-- Visual style guide: https://docs-ui-style-shadcn.vertesia.dev
-- Markdown component guide: https://docs-ui-style-shadcn.vertesia.dev/components.md
-- LLM reference: https://docs-ui-style-shadcn.vertesia.dev/llms.txt
+- Visual style guide: https://design.vertesiahq.com
+- Markdown component guide: https://design.vertesiahq.com/components.md
+- LLM reference: https://design.vertesiahq.com/llms.txt
 # @vertesia/ui Component Reference
 > Markdown rendition of the Vertesia UI style guide for LLMs and text-first clients.
-> Visual style guide: https://docs-ui-style-shadcn.vertesia.dev
+> Visual style guide: https://design.vertesiahq.com
 Use this file when generating React UI for Vertesia apps or plugins. Prefer `@vertesia/ui`
 components over local duplicates, and use semantic color classes instead of hardcoded colors.
@@ -31,65 +31,65 @@ import { useUserSession } from '@vertesia/ui/session';
 ## Classes
-- [Semantic](https://docs-ui-style-shadcn.vertesia.dev/semantic)
-- [Background](https://docs-ui-style-shadcn.vertesia.dev/classes/background)
-- [Text](https://docs-ui-style-shadcn.vertesia.dev/classes/text)
-- [Border & Ring](https://docs-ui-style-shadcn.vertesia.dev/classes/border)
-- [Icons](https://docs-ui-style-shadcn.vertesia.dev/classes/icons)
+- [Semantic](https://design.vertesiahq.com/semantic)
+- [Background](https://design.vertesiahq.com/classes/background)
+- [Text](https://design.vertesiahq.com/classes/text)
+- [Border & Ring](https://design.vertesiahq.com/classes/border)
+- [Icons](https://design.vertesiahq.com/classes/icons)
 ## Components
-- [Heading](https://docs-ui-style-shadcn.vertesia.dev/components/heading)
-- [Buttons](https://docs-ui-style-shadcn.vertesia.dev/components/buttons)
-- [Badges](https://docs-ui-style-shadcn.vertesia.dev/components/badges)
-- [Dot Badges](https://docs-ui-style-shadcn.vertesia.dev/components/dotBadges)
-- [Message Box](https://docs-ui-style-shadcn.vertesia.dev/components/messageBox)
-- [Modal](https://docs-ui-style-shadcn.vertesia.dev/components/modal)
-- [Confirm Modal](https://docs-ui-style-shadcn.vertesia.dev/components/confirmModal)
-- [Delete Modal](https://docs-ui-style-shadcn.vertesia.dev/components/deleteModal)
-- [Filter](https://docs-ui-style-shadcn.vertesia.dev/components/filter)
-- [Tabs](https://docs-ui-style-shadcn.vertesia.dev/components/tabs)
-- [Tooltips](https://docs-ui-style-shadcn.vertesia.dev/components/tooltips)
-- [Switch](https://docs-ui-style-shadcn.vertesia.dev/components/switch)
-- [Side Panel](https://docs-ui-style-shadcn.vertesia.dev/components/sidePanel)
-- [SelectBox](https://docs-ui-style-shadcn.vertesia.dev/components/selectBox)
-- [Overlay](https://docs-ui-style-shadcn.vertesia.dev/components/overlay)
-- [Breadcrumbs](https://docs-ui-style-shadcn.vertesia.dev/components/breadcrumb)
-- [Monaco](https://docs-ui-style-shadcn.vertesia.dev/components/monaco)
-- [Card](https://docs-ui-style-shadcn.vertesia.dev/components/card)
-- [Checkbox](https://docs-ui-style-shadcn.vertesia.dev/components/checkbox)
-- [Collapsible](https://docs-ui-style-shadcn.vertesia.dev/components/collapsible)
-- [Command](https://docs-ui-style-shadcn.vertesia.dev/components/command)
-- [Dropdown](https://docs-ui-style-shadcn.vertesia.dev/components/dropdown)
-- [Label](https://docs-ui-style-shadcn.vertesia.dev/components/label)
-- [Panel](https://docs-ui-style-shadcn.vertesia.dev/components/panel)
-- [Popover](https://docs-ui-style-shadcn.vertesia.dev/components/popover)
-- [Radio Group](https://docs-ui-style-shadcn.vertesia.dev/components/radioGroup)
-- [Resizeable](https://docs-ui-style-shadcn.vertesia.dev/components/resizeable)
-- [Separator](https://docs-ui-style-shadcn.vertesia.dev/components/separator)
-- [Text](https://docs-ui-style-shadcn.vertesia.dev/components/text)
-- [Theme](https://docs-ui-style-shadcn.vertesia.dev/components/theme)
+- [Heading](https://design.vertesiahq.com/components/heading)
+- [Buttons](https://design.vertesiahq.com/components/buttons)
+- [Badges](https://design.vertesiahq.com/components/badges)
+- [Dot Badges](https://design.vertesiahq.com/components/dotBadges)
+- [Message Box](https://design.vertesiahq.com/components/messageBox)
+- [Modal](https://design.vertesiahq.com/components/modal)
+- [Confirm Modal](https://design.vertesiahq.com/components/confirmModal)
+- [Delete Modal](https://design.vertesiahq.com/components/deleteModal)
+- [Filter](https://design.vertesiahq.com/components/filter)
+- [Tabs](https://design.vertesiahq.com/components/tabs)
+- [Tooltips](https://design.vertesiahq.com/components/tooltips)
+- [Switch](https://design.vertesiahq.com/components/switch)
+- [Side Panel](https://design.vertesiahq.com/components/sidePanel)
+- [SelectBox](https://design.vertesiahq.com/components/selectBox)
+- [Overlay](https://design.vertesiahq.com/components/overlay)
+- [Breadcrumbs](https://design.vertesiahq.com/components/breadcrumb)
+- [Monaco](https://design.vertesiahq.com/components/monaco)
+- [Card](https://design.vertesiahq.com/components/card)
+- [Checkbox](https://design.vertesiahq.com/components/checkbox)
+- [Collapsible](https://design.vertesiahq.com/components/collapsible)
+- [Command](https://design.vertesiahq.com/components/command)
+- [Dropdown](https://design.vertesiahq.com/components/dropdown)
+- [Label](https://design.vertesiahq.com/components/label)
+- [Panel](https://design.vertesiahq.com/components/panel)
+- [Popover](https://design.vertesiahq.com/components/popover)
+- [Radio Group](https://design.vertesiahq.com/components/radioGroup)
+- [Resizeable](https://design.vertesiahq.com/components/resizeable)
+- [Separator](https://design.vertesiahq.com/components/separator)
+- [Text](https://design.vertesiahq.com/components/text)
+- [Theme](https://design.vertesiahq.com/components/theme)
 ## Layout & Structure
-- [Avatar](https://docs-ui-style-shadcn.vertesia.dev/components/avatar)
-- [Center](https://docs-ui-style-shadcn.vertesia.dev/components/center)
-- [Divider](https://docs-ui-style-shadcn.vertesia.dev/components/divider)
-- [Link](https://docs-ui-style-shadcn.vertesia.dev/components/link)
-- [Portal](https://docs-ui-style-shadcn.vertesia.dev/components/portal)
-- [Spinner](https://docs-ui-style-shadcn.vertesia.dev/components/spinner)
+- [Avatar](https://design.vertesiahq.com/components/avatar)
+- [Center](https://design.vertesiahq.com/components/center)
+- [Divider](https://design.vertesiahq.com/components/divider)
+- [Link](https://design.vertesiahq.com/components/link)
+- [Portal](https://design.vertesiahq.com/components/portal)
+- [Spinner](https://design.vertesiahq.com/components/spinner)
 ## Forms
-- [FormItem](https://docs-ui-style-shadcn.vertesia.dev/components/formItem)
-- [Inputs](https://docs-ui-style-shadcn.vertesia.dev/components/inputs)
-- [Textarea](https://docs-ui-style-shadcn.vertesia.dev/components/textarea)
-- [ComboBox](https://docs-ui-style-shadcn.vertesia.dev/components/comboBox)
-- [InputList](https://docs-ui-style-shadcn.vertesia.dev/components/inputList)
-- [MenuList](https://docs-ui-style-shadcn.vertesia.dev/components/menuList)
-- [NumberInput](https://docs-ui-style-shadcn.vertesia.dev/components/numberInput)
-- [SelectList](https://docs-ui-style-shadcn.vertesia.dev/components/selectList)
-- [TagsInput](https://docs-ui-style-shadcn.vertesia.dev/components/tagsInput)
+- [FormItem](https://design.vertesiahq.com/components/formItem)
+- [Inputs](https://design.vertesiahq.com/components/inputs)
+- [Textarea](https://design.vertesiahq.com/components/textarea)
+- [ComboBox](https://design.vertesiahq.com/components/comboBox)
+- [InputList](https://design.vertesiahq.com/components/inputList)
+- [MenuList](https://design.vertesiahq.com/components/menuList)
+- [NumberInput](https://design.vertesiahq.com/components/numberInput)
+- [SelectList](https://design.vertesiahq.com/components/selectList)
+- [TagsInput](https://design.vertesiahq.com/components/tagsInput)
 # Component Guidance
@@ -97,7 +97,7 @@ import { useUserSession } from '@vertesia/ui/session';
 Primary action primitive with Vertesia variants, loading state, disabled state, and tooltip support.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/buttons
+- Route: https://design.vertesiahq.com/components/buttons
 - Import path: `@vertesia/ui/core`
 - Exports: `Button`, `CopyButton`, `buttonVariants`
@@ -147,7 +147,7 @@ import { Button } from '@vertesia/ui/core';
 Single-line text input with a simplified value-based `onChange` callback.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/inputs
+- Route: https://design.vertesiahq.com/components/inputs
 - Import path: `@vertesia/ui/core`
 - Exports: `Input`
@@ -184,7 +184,7 @@ const [name, setName] = useState('');
 Multi-line text control using standard React textarea event handling.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/textarea
+- Route: https://design.vertesiahq.com/components/textarea
 - Import path: `@vertesia/ui/core`
 - Exports: `Textarea`
@@ -215,7 +215,7 @@ Multi-line text control using standard React textarea event handling.
 Field wrapper for labels, required indicators, and help tooltips.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/formItem
+- Route: https://design.vertesiahq.com/components/formItem
 - Import path: `@vertesia/ui/core`
 - Exports: `FormItem`
@@ -248,7 +248,7 @@ Field wrapper for labels, required indicators, and help tooltips.
 Accessible overlay dialog for focused tasks and forms.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/modal
+- Route: https://design.vertesiahq.com/components/modal
 - Import path: `@vertesia/ui/core`
 - Exports: `Modal`, `ModalTitle`, `ModalBody`, `ModalFooter`
@@ -293,7 +293,7 @@ Accessible overlay dialog for focused tasks and forms.
 Confirmation dialog for actions that need explicit user consent.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/confirmModal
+- Route: https://design.vertesiahq.com/components/confirmModal
 - Import path: `@vertesia/ui/core`
 - Exports: `ConfirmModal`
@@ -316,7 +316,7 @@ Confirmation dialog for actions that need explicit user consent.
 Delete-specific confirmation wrapper with async delete handling and toast feedback.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/deleteModal
+- Route: https://design.vertesiahq.com/components/deleteModal
 - Import path: `@vertesia/ui/core`
 - Exports: `DeleteModal`
@@ -342,7 +342,7 @@ Delete-specific confirmation wrapper with async delete handling and toast feedba
 Dropdown select for string or object options, with optional search, clear, and multi-select modes.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/selectBox
+- Route: https://design.vertesiahq.com/components/selectBox
 - Import path: `@vertesia/ui/core`
 - Exports: `SelectBox`
@@ -383,7 +383,7 @@ Dropdown select for string or object options, with optional search, clear, and m
 Tab container driven by an array of tab objects and companion bar/panel components.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/tabs
+- Route: https://design.vertesiahq.com/components/tabs
 - Import path: `@vertesia/ui/core`
 - Exports: `Tabs`, `TabsBar`, `TabsPanel`, `VTabs`, `VTabsBar`, `VTabsPanel`
@@ -408,7 +408,7 @@ Tab container driven by an array of tab objects and companion bar/panel componen
 Compact status and category labels.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/badges
+- Route: https://design.vertesiahq.com/components/badges
 - Import path: `@vertesia/ui/core`
 - Exports: `Badge`, `DotBadge`
@@ -425,7 +425,7 @@ Compact status and category labels.
 Semantic feedback box for success, attention, destructive, done, info, and muted messages.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/messageBox
+- Route: https://design.vertesiahq.com/components/messageBox
 - Import path: `@vertesia/ui/core`
 - Exports: `MessageBox`
@@ -437,7 +437,7 @@ Semantic feedback box for success, attention, destructive, done, info, and muted
 Choice controls for boolean values and mutually exclusive option sets.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/checkbox
+- Route: https://design.vertesiahq.com/components/checkbox
 - Import path: `@vertesia/ui/core`
 - Exports: `Checkbox`, `Switch`, `RadioGroup`, `RadioGroupItem`, `RadioGroupOption`
@@ -451,7 +451,7 @@ Choice controls for boolean values and mutually exclusive option sets.
 Overlay primitives for action menus, floating content, command palettes, and contextual help.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/dropdown
+- Route: https://design.vertesiahq.com/components/dropdown
 - Import path: `@vertesia/ui/core`
 - Exports: `Dropdown`, `MenuGroup`, `MenuItem`, `Popover`, `Command`, `VTooltip`, `Tooltip`
@@ -466,7 +466,7 @@ Overlay primitives for action menus, floating content, command palettes, and con
 Content containers for repeated items and framed tool surfaces.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/card
+- Route: https://design.vertesiahq.com/components/card
 - Import path: `@vertesia/ui/core`
 - Exports: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `Panel`
@@ -479,7 +479,7 @@ Content containers for repeated items and framed tool surfaces.
 Small primitives for display, separation, links, loading states, portals, and overlays.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/center
+- Route: https://design.vertesiahq.com/components/center
 - Import path: `@vertesia/ui/core`
 - Exports: `Avatar`, `SvgAvatar`, `Center`, `Divider`, `Link`, `Portal`, `Spinner`, `Separator`, `Overlay`
@@ -493,7 +493,7 @@ Small primitives for display, separation, links, loading states, portals, and ov
 Semantic Tailwind classes and approved lucide-react icon guidance for Vertesia apps.
-- Route: https://docs-ui-style-shadcn.vertesia.dev/semantic
+- Route: https://design.vertesiahq.com/semantic
 - Import path: `@vertesia/ui/core`
 - Exports: `ModeToggle`

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260714.072725Z",
+  "version": "1.5.0-dev.20260722.120446Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -21,27 +21,27 @@
     "hooks"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "@floating-ui/react": "^0.27.19",
+    "@floating-ui/dom": "^1.8.0",
+    "@floating-ui/react": "^0.27.20",
     "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-checkbox": "^1.3.6",
-    "@radix-ui/react-collapsible": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.18",
+    "@radix-ui/react-checkbox": "^1.3.7",
+    "@radix-ui/react-collapsible": "^1.1.16",
+    "@radix-ui/react-dialog": "^1.1.19",
     "@radix-ui/react-direction": "^1.1.2",
-    "@radix-ui/react-dismissable-layer": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.19",
+    "@radix-ui/react-dismissable-layer": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
     "@radix-ui/react-focus-guards": "^1.1.4",
-    "@radix-ui/react-focus-scope": "^1.1.11",
+    "@radix-ui/react-focus-scope": "^1.1.12",
     "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-popover": "^1.1.19",
     "@radix-ui/react-portal": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.4.2",
+    "@radix-ui/react-radio-group": "^1.4.3",
     "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slider": "^1.4.2",
+    "@radix-ui/react-slider": "^1.4.3",
     "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.2",
-    "@radix-ui/react-tabs": "^1.1.16",
-    "@radix-ui/react-tooltip": "^1.2.11",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -50,16 +50,16 @@
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.21",
     "debounce": "^3.0.0",
-    "dompurify": "^3.4.11",
-    "fast-xml-parser": "^5.9.3",
-    "fast-xml-validator": "^1.1.1",
-    "firebase": "^12.15.0",
+    "dompurify": "^3.4.12",
+    "fast-xml-parser": "^5.10.1",
+    "fast-xml-validator": "^1.2.0",
+    "firebase": "^12.16.0",
     "framer-motion": "^12.42.2",
-    "i18next": "^26.3.4",
+    "i18next": "^26.3.6",
     "jwt-decode": "^4.0.0",
     "katex": "^0.17.0",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.24.0",
     "mermaid": "^11.16.0",
     "monaco-editor": "^0.55.1",
     "motion": "^12.42.2",
@@ -69,12 +69,12 @@
     "react-date-picker": "^12.0.2",
     "react-dom": "19.2.7",
     "react-error-boundary": "^6.1.2",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.9",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
     "react-remove-scroll": "^2.7.2",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-resizable-panels": "^4.12.1",
+    "react-resizable-panels": "^4.12.2",
     "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
@@ -90,27 +90,27 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/common": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/client": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/json": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260714.072725Z"
+    "@vertesia/client": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/json": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/common": "1.5.0-dev.20260722.120446Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/hast": "^3.0.4",
+    "@types/hast": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.2",
+    "@types/node": "^24.13.3",
     "@types/papaparse": "^5.5.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "axe-core": "^4.12.1",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.64.2",
+    "i18next-cli": "^1.65.0",
     "jsdom": "^29.1.1",
-    "rolldown": "1.1.3",
+    "rolldown": "1.1.5",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0",
     "@vertesia/tsconfig": "0.1.0"
@@ -180,6 +180,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
+  "gitHead": "203c30e5a8ddc583ac9f1acce0f5445eb38a9551",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/__tests__/a11y.test.tsx CHANGED Viewed

@@ -53,6 +53,79 @@ describe('@vertesia/ui accessibility (axe)', () => {
         expect(await axe(container)).toHaveNoViolations();
     });
+    it('Button.title is forwarded to aria-label so icon-only buttons are labelled', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Refresh">
+                <span aria-hidden="true">↻</span>
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-label')).toBe('Refresh');
+        // The native title attribute is intentionally not forwarded — it would stack a second
+        // browser tooltip on top of the VTooltip that `title` already renders.
+        expect(button?.hasAttribute('title')).toBe(false);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('Button.title does NOT override the name of a button that shows text', async () => {
+        // WCAG 2.5.3 Label in Name: the accessible name must contain the visible label, so a
+        // tooltip must never replace it. Regression test for the Playwright failure where
+        // getByRole('button', { name: 'Installed' }) stopped matching.
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Show only installed apps">
+                Installed
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.hasAttribute('aria-label')).toBe(false);
+        expect(button?.textContent).toBe('Installed');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('Button.title does not override a nested text label either', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Open the definition editor">
+                <span aria-hidden="true">📄</span>
+                <span>Definition</span>
+            </Button>,
+        );
+        expect(container.querySelector('button')?.hasAttribute('aria-label')).toBe(false);
+    });
+    it('Button.alt keeps overriding the name of a text button (legacy behavior)', async () => {
+        // Unlike `title`, the deprecated `alt` overrides the accessible name even when text is
+        // present. Call sites such as <Button alt="Launch a new agent."><Rocket/> Run</Button>
+        // depend on this, so the WCAG 2.5.3 guard must NOT apply to `alt`.
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} alt="Launch a new agent.">
+                Run
+            </Button>,
+        );
+        expect(container.querySelector('button')?.getAttribute('aria-label')).toBe('Launch a new agent.');
+    });
+    it('Button.tooltipPlacement does not leak onto the DOM element', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Zoom in" tooltipPlacement="bottom">
+                <span aria-hidden="true">+</span>
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-label')).toBe('Zoom in');
+        expect(button?.hasAttribute('tooltipPlacement')).toBe(false);
+        expect(button?.hasAttribute('tooltipplacement')).toBe(false);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('an explicit aria-label wins over Button.title', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Refresh" aria-label="Reload the results">
+                <span aria-hidden="true">↻</span>
+            </Button>,
+        );
+        expect(container.querySelector('button')?.getAttribute('aria-label')).toBe('Reload the results');
+    });
     it('CopyButton has an accessible name via internal aria-label', async () => {
         const { container } = renderWithProviders(<CopyButton content="example value" />);
         const button = container.querySelector('button');

package/src/core/components/SidePanel.tsx CHANGED Viewed

@@ -149,7 +149,7 @@ export function SidePanel({
 function CloseButton({ onClose }: { onClose: () => void }) {
     return (
-        <Button alt="Close panel" variant="ghost" onClick={onClose}>
+        <Button title="Close panel" variant="ghost" onClick={onClose}>
             <X className="size-6" aria-hidden="true" />
         </Button>
     );

package/src/core/components/shadcn/button.tsx CHANGED Viewed

@@ -23,6 +23,22 @@ function useDeprecationWarning(propName: string, isUsed: boolean, message: strin
     }, [isUsed, message, propName]);
 }
+// Does this subtree contribute any text to the accessible name? Used to decide whether `title`
+// may supply that name. Icons (lucide elements) have no string children and return false, and
+// `aria-hidden` subtrees are skipped because they are excluded from the name computation.
+function hasVisibleText(node: React.ReactNode): boolean {
+    return React.Children.toArray(node).some((child) => {
+        if (typeof child === 'string') return child.trim().length > 0;
+        if (typeof child === 'number') return true;
+        if (React.isValidElement(child)) {
+            const props = child.props as { children?: React.ReactNode; 'aria-hidden'?: boolean | string };
+            if (props['aria-hidden'] === true || props['aria-hidden'] === 'true') return false;
+            return hasVisibleText(props.children);
+        }
+        return false;
+    });
+}
 const buttonVariants = cva(
     'hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
@@ -60,35 +76,66 @@ export interface ButtonProps
         VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     /**
-     * @deprecated Use `aria-label` for the accessible name and wrap in `<VTooltip>` for a visual tooltip.
-     * For backward compatibility, `alt` is forwarded to `aria-label` (when not set) AND still
-     * triggers the legacy VTooltip wrap. Slated for removal in the next major.
+     * @deprecated Use `title` instead. `alt` drives the same tooltip but, unlike `title`, it
+     * overrides the accessible name even when the button shows a text label — which usually
+     * violates WCAG 2.5.3 (Label in Name). That legacy behavior is preserved so existing call
+     * sites keep announcing what they always did. Slated for removal in the next major.
      */
     alt?: string;
+    /**
+     * Tooltip text. Renders a `<VTooltip>` around the button and doubles as the accessible name,
+     * so icon-only buttons need nothing else. Pass `aria-label` to override the name independently.
+     */
     title?: string;
+    /** Which side the `title` tooltip opens on. Defaults to `top`. */
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     isDisabled?: boolean;
     isLoading?: boolean;
 }
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     (
-        { className, variant, size, asChild = false, alt, isDisabled, isLoading, title, onClick, type, ...props },
+        {
+            className,
+            variant,
+            size,
+            asChild = false,
+            alt,
+            isDisabled,
+            isLoading,
+            title,
+            tooltipPlacement = 'top',
+            onClick,
+            type,
+            ...props
+        },
         ref,
     ) => {
         useDeprecationWarning(
             'Button.alt',
             alt !== undefined,
-            'use aria-label for the accessible name and wrap in <VTooltip> for a visual tooltip. ' +
-                '`alt` is forwarded to both for one release.',
+            'use `title` instead — it drives the same tooltip and the accessible name. ' +
+                '`alt` remains an alias for one release.',
         );
         const Comp = asChild ? Slot : 'button';
         // Default type="button" only when rendering an actual <button>. With asChild,
         // the rendered element may be an <a> or other tag where injecting `type` is wrong.
         const resolvedType = asChild ? type : (type ?? 'button');
-        // Back-fill aria-label from alt during the deprecation window so existing call
-        // sites keep their accessible name without code changes.
-        const ariaLabel = props['aria-label'] ?? alt;
+        // `title` (or its deprecated alias `alt`) drives the VTooltip below. `title` also back-fills
+        // the accessible name, so an icon-only <Button title="Refresh"> is labelled without any
+        // extra props or a manual <VTooltip> wrap at the call site.
+        //
+        // That back-fill is skipped when the button already shows text: turning
+        // <Button title="Show only installed apps">Installed</Button> into aria-label="Show only
+        // installed apps" would replace the visible name with the tooltip, which breaks WCAG 2.5.3
+        // (Label in Name) and makes the control unreachable by the label users actually see.
+        //
+        // `alt` deliberately does NOT get that treatment: it has always overridden the name
+        // unconditionally, and callers rely on that. Preserving it keeps every existing call site
+        // announcing exactly what it announced before, and confines the new rule to `title`.
+        const tooltip = title ?? alt;
+        const ariaLabel = props['aria-label'] ?? alt ?? (hasVisibleText(props.children) ? undefined : title);
         // asChild renders via Radix Slot, which requires exactly one React child.
         // Skip the loader wrap in that case — Slot would reject the multi-child array.
@@ -116,9 +163,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             </Comp>
         );
-        if (alt || title) {
+        // Note: the native `title` attribute is deliberately NOT forwarded to the DOM — it would
+        // stack a second, delayed browser tooltip on top of the VTooltip. `aria-label` above is
+        // what exposes the text to screen readers and to getByRole('button', { name }).
+        if (tooltip) {
             return (
-                <VTooltip description={alt || title} asChild className="cursor-pointer" size="xs" placement="top">
+                <VTooltip
+                    description={tooltip}
+                    asChild
+                    className="cursor-pointer"
+                    size="xs"
+                    placement={tooltipPlacement}
+                >
                     {buttonElement}
                 </VTooltip>
             );
@@ -190,7 +246,6 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
                 size={size || 'sm'}
                 onClick={handleCopy}
                 {...props}
-                aria-label={label}
                 title={label}
             >
                 {isCopied ? <Check className="text-success" /> : <CopyIcon className="size-4" />}

package/src/core/components/shadcn/modal/dialog.tsx CHANGED Viewed

@@ -88,7 +88,7 @@ export function Modal({
                             <DialogClose onClick={() => handleOpenChange(false)} asChild autoFocus={false}>
                                 <Button
                                     variant="outline"
-                                    alt="Close"
+                                    title="Close"
                                     className="data-[state=open]:bg-accent opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted-foreground transition-opacity disabled:pointer-events-none"
                                 >
                                     <X className="size-4" />