feat: Pagination web component#11811
Open
lokesh wants to merge 17 commits intointernetarchive:masterfrom
Open
Conversation
…e and package.json; update package-lock.json to include lit dependencies.
…; include script for lit-components in footer
…nation display and enhance design documentation with examples.
Resolved conflicts: - Makefile: use upstream's vite-lit.config.mjs naming - lit/index.js: keep both OlPagination and OLReadMore components - footer.html: use upstream's script attribute ordering - package.json: use upstream's vite-lit.config.mjs naming - page-design.less: combine index.less import with upstream's typography styles
…l; update styles in page-design.less for improved clarity and presentation. Added event handling for page selection and refined example structure for better user experience.
…ng for improved clarity and user experience. Updated pagination and colors sections with better organization and additional examples. Introduced new styles for design pattern headers and examples.
…eaning up HTML structure for improved maintainability and clarity.
…ing the build process and eliminating legacy support code.
…i18n support for button text and add a new example for height-based truncation.
…syntax, and update design.html examples to improve styling and consistency for the ol-read-more component.
for more information, see https://pre-commit.ci
lokesh
commented
Feb 4, 2026
| // Import components to register them as custom elements | ||
| import './OLReadMore.js'; | ||
| // Export components (importing also registers them as custom elements) | ||
| export { OLReadMore } from './OLReadMore.js'; |
Collaborator
Author
There was a problem hiding this comment.
This code change does not impact the existing implementation of ol-read-more, but switching to doing an export makes future testing, tree-shaking, and other programmatic tasks easier.
…unctions for the ol-colors, ol-pagination, and ol-read-more components. This improves localization capabilities and consistency across examples.
for more information, see https://pre-commit.ci
lokesh
added
the
Theme: Design
…ml to streamline content and improve clarity.
for more information, see https://pre-commit.ci
…er width, and focus outline, enhancing consistency and maintainability.
…ly, border width, and focus outline, enhancing consistency and maintainability." This reverts commit dec1d12.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
<ol-pagination>web componentNote: This PR does not replace any usages of the existing pagination UI. That will be a follow-up.
Related issues:
Technical
Introduces new Lit web component with the following features:
Restructures design.html with interactive examples for component (event-based, URL-based, edge cases) and component (height-based, line-based, custom button text, background colors, small labels)
Testing
Visit URL /developers/design to see the new pagination component.
Screenshot
Existing pagination on the left, new on the right:
Old /developers/design on the left, and new on the right:
Stakeholders
@RayBB @mekarpeles @cdrini @jimchamp