[web-padawan]

Description

Part of #7669

• Added a toolbar above the pages with previous and next page buttons and a page number field
  • The page field goes to the entered page on Enter. A page that does not exist stays in the field, marks it invalid and shows "Enter 1–N" as the field error message
  • The buttons disable on the first and last page. They stay focusable when disabled, as with the accessibleDisabledButtons feature flag
  • The change and input events of the page field do not reach the application
• Added the toolbar-actions slot for application controls at the end of the toolbar, in DOM order
• Rendered the toolbar controls into the light DOM before a marker comment, so that application children added later keep their place
• Added the internal vaadin-pdf-viewer-button with an icon and a tooltip that shows its label
• Added the i18n property with I18nMixin, for the button tooltips (previousPage, nextPage) and the page error (pageError)
  • The element defines DEFAULT_I18N, and the mixins read the texts from __effectiveI18n. Later PRs add their own texts to it
• Added the toolbar and toolbar-group parts and the --vaadin-pdf-viewer-toolbar-background, -toolbar-gap and -toolbar-padding CSS properties
  • The page field width uses --vaadin-field-default-width, which an application can set on the field
  • The page field width follows the digit count of the page count, so that long page numbers fit
• The toolbar scrolls when it would leave less than 40% of the viewer for the pages, e.g. with large text, and wraps its groups on narrow viewers
  • In a viewer narrower than the page field, the toolbar background covers the controls that overflow
• Added unit tests for the toolbar and the button

Zoom and the header come in the next two PRs. The toolbar, its buttons and the page field have no role or accessible names yet. They come with their i18n texts in the accessibility PR.

Type of change

• Feature

How to test

1. Run yarn start and open dev/pdf-viewer.html
2. Click the next page button. The viewer scrolls to page 2 and the page field shows 2 / 2
3. Type 5 in the page field and press Enter. The field turns invalid and shows "Enter 1–2"
4. Tab through the toolbar. Each button shows its label as a tooltip, and the Approve button comes after the page field

Different from prototype

• Only the navigation and actions groups. The zoom controls (P3b) and the header with the collapse button (P3c) come later.
• DEFAULT_I18N has only the three texts that the toolbar uses. The prototype defined the texts of all features at once.
• The page field stays empty for a page that is not an integer, instead of passing it to vaadin-integer-field, which logs a warning.
• Disabled buttons stay focusable. The prototype moved keyboard focus to the page field when a focused button got disabled.
• The toolbar is a wrapping row with the navigation at the start and the actions at the end. The three-column grid returns with the zoom controls.
• No public CSS properties for the icons, as in other components with built-in icons, e.g. rich text editor and dashboard. Themes set the private --_icon property of the button.

Improvements over prototype

• The previous page button goes to the last page from a page above the page count.
• Double and triple clicks in the toolbar do not select the text of the page field.

Postponed

• On touch devices, the page buttons and the page field hide, as pages change by scrolling. This comes with the touch PR.
• A visual test of the page field with a four-digit page count comes with the visual tests PR.
• How applications set the width of the page field, e.g. a public CSS property, is decided with the Lumo and Aura styles.

Explainer

https://claude.ai/artifact/MZwhUiy2Hbw2kSsYF1rC5M

🤖 Generated with Claude Code

[github-actions]

Custom elements API

Compared #13281 (b7108ffe57) with 169d5f1523.

custom-elements.json impact: 1 added in 1 element

@@ vaadin-pdf-viewer (PdfViewer) @@
+  property i18n: PdfViewerI18n | undefined

web-types.json impact: 1 added in 1 element

@@ vaadin-pdf-viewer @@
+  property i18n: PdfViewerI18n | undefined

[vaadin-review-bot]

Reviewed the changes — left 1 comment.

	Finding
⚠️	Previous page button skips the last page when page is above pageCount

[vursen]

FIXED: Clicking a disabled button selects text in the number field:

Screen.Recording.2026-10-27.at.15.56.12.mov

[vursen]

The toolbar background doesn't cover the overflow area

[web-padawan]

Clicking a disabled control selects text

Fixed. Also added user-select: none for the toolbar, which we generally use for interactive controls.

[vursen]

The error looks akward when it's displayed under the field.

[web-padawan]

The error looks akward when it's displayed under the field.

Let's figure out how it should look like when adding Lumo / Aura.

[sonarqubecloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud