- Roadmap
- How releases are planned
- v1.1 — Forms & Input Essentials
- <cw-combobox>
- <cw-date-picker> and <cw-time-picker>
- <cw-pagination>
- Branding refresh
- v1.2 — Data Display
- <cw-data-table> and <cw-data-table-column>
- <cw-accordion> and <cw-accordion-item>
- <cw-avatar-group>
- <cw-stepper> and <cw-stepper-item>
- v1.3 — Navigation & Layout
- App layout primitives
- <cw-segmented-button>
- <cw-popover>
- Breadcrumb overflow
- v1.4 — Performance, Theming & Polish
- Virtualized rendering
- <cw-file-upload>
- Theming improvements
- Accessibility & RTL audit
- Beyond v1.4
Roadmap
Cordwainer Elements 1.0 launched as a hard fork of
Shoelace, with all 65 components renamed and re-themed under the cw- prefix. This page outlines what
we’re planning to build during the v1.x release line — new components, enhancements, and infrastructure work
— roughly in priority order.
This roadmap reflects current thinking, not a contract. Priorities can shift based on real-world usage, community feedback, and upstream changes to the web platform. If something here matters to you — or something’s missing — let us know via Issues.
How releases are planned
Each v1.x minor release is themed around a category of gaps in the current component set. Every new component that ships will, at minimum:
-
Be built on the same
CwElement/CwFormControlfoundations as existing components, with full TypeScript types - Ship with React, Vue, Angular, and Svelte wrapper support (see Frameworks)
- Be translated across all 29 supported locales
- Include a documentation page with live, editable examples
- Be reviewed against our Accessibility Commitment (keyboard support, ARIA, screen reader testing)
v1.1 — Forms & Input Essentials
The most-requested gaps in web component libraries are autocomplete/combobox, date and time selection, and pagination. These are foundational form/input pieces that a lot of real applications need before they can fully adopt the library.
<cw-combobox>
A filterable, searchable input that combines <cw-input> with a
<cw-popup>-based listbox:
- Type-ahead filtering of options as the user types
- Optional free-text entry vs. constrained-to-list selection
- Multi-select mode using
<cw-tag>chips for selected values - Support for asynchronous option loading (e.g., remote search)
<cw-date-picker> and <cw-time-picker>
Calendar- and clock-based pickers that integrate with the existing form-association internals shared by
<cw-input>, <cw-select>, etc.:
- Single date, date range, and time selection modes
- Min/max date constraints and disabled-date callbacks
-
Localized month/day names and date formats via
cw-localize, reusing the locale data already used by<cw-format-date> - Keyboard navigation (arrow keys, Page Up/Down for month, Home/End)
<cw-pagination>
A standalone page-navigation control for lists, search results, and (in v1.2) data tables:
- Configurable page size, sibling/boundary page counts, and ellipsis collapsing
- Works as a controlled component (emits page-change events; doesn’t own the data)
Branding refresh
The current logo is a placeholder from the fork. During v1.1, Matt Hand will design and roll out the new Cordwainer Elements identity — logo, favicon, docs header, and social preview images. (No engineering dependency on the rest of the v1.1 component work; can land independently.)
v1.2 — Data Display
With input essentials in place, the next gap is presenting structured data — the other component most commonly requested for libraries at this stage.
<cw-data-table> and <cw-data-table-column>
A slot/template-driven table component:
- Declarative column definitions with custom cell templates via slots
- Sortable columns (client-side initially; emits events so consumers can wire up server-side sorting)
- Row selection (single and multi, with a
<cw-checkbox>column) - Pairs with
<cw-pagination>from v1.1 - Virtualization for large datasets is deferred to v1.4 — v1.2 targets correctness and API shape first
<cw-accordion> and <cw-accordion-item>
A multi-panel collapsible group, distinct from the single-panel <cw-details>:
- Single-expand (“only one panel open”) and multi-expand modes
- Smooth expand/collapse animation using
@cordwainer/cw-animations - Same icon/slot conventions as
<cw-details>for consistency
<cw-avatar-group>
Stacked, overlapping avatars with an overflow ”+N” indicator, built on the existing
<cw-avatar>:
- Configurable max visible count and overlap amount
- Overflow indicator can be a
<cw-tooltip>-triggered list of remaining members
<cw-stepper> and <cw-stepper-item>
A step indicator for multi-step forms, checkouts, and onboarding flows:
- Linear and non-linear (jump-to-step) modes
- Visual states for completed, active, disabled, and error steps
- Orientation support (horizontal/vertical)
v1.3 — Navigation & Layout
By this point the component set covers most “leaf” UI needs. v1.3 focuses on the structural pieces used to assemble whole application shells.
App layout primitives
Lightweight, unopinionated layout helpers for building app shells — top navigation bar and side navigation
container components that compose with existing primitives (<cw-icon-button>,
<cw-dropdown>, <cw-avatar>, <cw-tree>).
<cw-segmented-button>
A single-select, mutually-exclusive button group — visually similar to
<cw-button-group> but behaves like <cw-radio-group> (single selection,
form-associated value).
<cw-popover>
A general-purpose popover built on the browser’s native
Popover API, complementing the existing <cw-popup> (low-level positioning primitive),
<cw-dropdown> (menu-focused), and <cw-tooltip> (hover hints):
- Anchor positioning reusing
@floating-ui/dom(already a dependency) - Light-dismiss behavior (click outside / Escape) for free
- Good fit for rich content like forms or previews that don’t belong in a tooltip or dropdown
Breadcrumb overflow
Enhance <cw-breadcrumb> to collapse long paths into an ellipsis with an overflow menu,
for deeply nested hierarchies (file systems, multi-level categories).
v1.4 — Performance, Theming & Polish
A consolidation release: make the v1.1–v1.3 additions production-ready at scale, and address longstanding theming gaps.
Virtualized rendering
Opt-in virtual scrolling for components that can hold large datasets:
<cw-select>(long option lists)<cw-tree>(large hierarchies)<cw-data-table>(the deferred item from v1.2)
<cw-file-upload>
A drag-and-drop file input with a styled dropzone, file list, and per-file progress using the existing
<cw-progress-bar>.
Theming improvements
-
Theme builder tooling/docs to make custom themes easier to author (today there’s only
light.css/dark.css/_utility.css) - Evaluate a high-contrast theme for accessibility
Accessibility & RTL audit
A focused pass across every component introduced in v1.1–v1.3: screen reader testing, keyboard navigation review, and right-to-left layout verification.
Beyond v1.4
Ideas that are on our radar but not yet scheduled into a specific release:
- Drag-and-drop sorting utilities (for
<cw-tree>, lists, and the new data table) - Lightweight data-visualization primitives (sparklines, simple charts)
- Additional framework integrations beyond React/Vue/Angular/Svelte (e.g., SolidJS, Qwik)
Have thoughts on sequencing, or a use case that needs something sooner? Open a work item — community input directly shapes how this roadmap evolves.