dwui 0.9.0: 13 new accessible components + full example webpage redesign#20
Merged
Conversation
Library (dwui 0.7.4 -> 0.9.0): - New components: switch, checkbox, progress, badge, tab_list, alert, accordion, tooltip, avatar, divider, breadcrumbs, skeleton, spinner - Button: Small/Medium/Large sizes and a low-emphasis Text variant - Accessibility across the board: label/input association, aria-invalid + role=alert validation, dialog semantics with focus management, roving tabindex tabs, focus-visible rings, semantic heading levels - Theme: success/warning color families with bg/border/text utilities, dwui-ring-* and dwui-text-primary-* maps, dwui keyframes (modal, spin, skeleton pulse, indeterminate progress) - Tests: 7 native unit tests + 26 wasm-bindgen browser tests (wasm-pack test --headless --firefox crates/dwui) Example webpage: complete redesign - "Forged at compile time" identity: candlelight amber on woodsmoke, Bricolage Grotesque / IBM Plex Sans / JetBrains Mono - New landing page: hero with live code card, stats strip, bento feature grid with live signal demos, component previews, CTA - Component gallery at #/components with light/dark theme toggle - Restyled docs layout, sticky blur nav, footer; responsive at mobile widths Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- example_box: preview frame with mono header bar and candlelight resize handle (aria-labelled separator) - code_widget: collapsible "view source" toggle with aria-expanded - example_table: bordered panel, mono headers, candlelight class column - Welcome page rewritten in the new design language (feature tiles, live dwui button, mono explore links); colors/flex/responsive/animations/ pseudoclass pages restyled; fixed bounce toggle label and stale #/dwui-examples links; dropped fixed card heights in the modal demo Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Owner
Author
|
Added a follow-up commit (1390e23) bringing the docs example pages in line with the redesign: new preview frames with mono header bars and amber resize handles, collapsible "view source" toggles, modernized tables, and a rewritten welcome page. All six docs pages verified visually against trunk serve. |
The overflow-hidden preview frame clipped the drag handle, which sat at right: -3% when the preview was at full width. Clamp it inside the frame with max(0.4rem, ...) and make it candlelight at rest so it is discoverable (the docs copy refers to "amber handles"). Verified by dragging in a scripted browser: preview shrinks 868px -> 520px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The workspace lockfile has resolved wasm-bindgen 0.2.105 since before this branch, but CI installed runner 0.2.100. The mismatch never surfaced because no crate had wasm tests until dwui's new browser suite produced the first real test artifact, which the older runner rejects (schema mismatch). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dominator's debug style verification panics when Chrome re-serializes the
border/background shorthands set via .style("border", "none") — Firefox
round-trips them unchanged, which is why local runs passed. Use the
bg-transparent/border-none utility classes instead.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- data_table!: themed table with sortable headers (aria-sort, controlled on_sort), rich Dom cells, optional clickable rows - virtual_scroll!: windowed list rendering only visible rows with aria-setsize/posinset, plus on_reach_end infinite loading with an aria-busy spinner row - date_picker!: calendar popup (role=dialog + role=grid) with month navigation, arrow/PageUp/PageDown/Home/End/Escape keyboard support, roving day focus, outside-click close, controlled CalendarDate value - CalendarDate: dependency-free civil date type (ISO-8601, day/month arithmetic, Sakamoto weekday), fully unit tested - Gallery: sortable pioneers table, 50k-row virtual scroll with simulated async infinite loading, start/end date pickers - Tests: 6 new native date-math tests (13 total) and 6 new browser tests (32 total) covering sorting, windowing, reach-end, and the calendar grid Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Owner
Author
|
Heavy components landed in 244564c: |
The site now respects the two-library boundary: - #/examples is a real dwind showcase: eight artifacts built purely from utility classes (responsive layout, gradients & palettes, type scale, glass & depth, transitions & transforms, bracket variants, a pricing-card composition, and custom dwgenerate! classes), each with view-source - Every dwui gallery section card gains a view-source toggle via the #[example_html] compile-time highlighter (16 toggles total) - New "Getting started" docs page leads the sidebar: install, one dwind example, one dwui example, clearly labelled per layer; the old generic welcome page is retired - The pseudoclass dwind docs page no longer demos with dwui components — rebuilt as a pure-utility is(.light) theming example - example_small.rs trimmed to the modal demo (now with source map) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Owner
Author
|
c19c7bb separates the two showcases: #/examples is now a pure-dwind utility showcase (8 artifacts — layout, gradients, typography, glass, motion, variants, composition, generators — each with view-source), every dwui gallery card gained a view-source toggle (16 total), a Getting Started page leads the docs, and the pseudoclass docs page no longer mixes dwui into dwind examples. CI green in 4m34s. |
A single shared IntersectionObserver tags sections with reveal-in as they enter the viewport; CSS cascades each section's children up with a 70ms stagger (springy cubic-bezier). Sections unobserve after revealing so the effect plays once. Under prefers-reduced-motion the reveal is forced visible with no transition. Verified live: header reveals on load, below-fold sections hold opacity 0 until scrolled to, transition observed mid-flight, delays 0/70/140/210/280ms. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Typography, Spacing, Sizing, Position & Layout, Grid, Borders & Rounding, Shadows & Rings, Filters & Effects, Transforms & Transitions, and Interactivity — each with a reference table of class patterns and a live example with view-source. The sidebar is reorganized into General, Layout, and Style sections, and the long-dead DocPage variants (Justify, Align, Border, Rounding, Color, Style) are replaced with real routed pages. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Owner
Author
|
Final two commits: b5bd9bb adds progressive scroll reveal to the dwind showcase (shared IntersectionObserver + staggered CSS cascade, reduced-motion safe), and b62a016 makes the docs exhaustive — ten new utility reference pages (Typography, Spacing, Sizing, Position, Grid, Borders, Shadows & Rings, Filters, Transforms & Transitions, Interactivity) with reference tables and live view-source examples, sidebar reorganized into General/Layout/Style. All CI green. |
"32 browser tests in ci" was process-bragging that drifts stale with every suite change, and "14 themeable palettes" conflated dwind's color palettes with dwui's theming. The strip now reads: 0 runtime css engine / 100% type-checked styles / 24 accessible components / 1 language, end to end. The a11y bento tile's test count is likewise made drift-proof. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dominator does inject dwind's precomputed rules into the CSSOM at runtime
(lazily, on first use), so "zero runtime css" overclaimed. The accurate
differentiator is the build side: there is no PostCSS/Tailwind-CLI/purge
step — cargo is the whole styling toolchain. Reworded the stat ("0 css
build pipeline"), hero kicker ("no node toolchain"), footer ("styles
compiled by rustc"), code-card status line, pricing bullet, and the meta
description accordingly.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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.
Summary
This PR turns dwui into a 21-component, accessibility-first library and completely redesigns the example webpage around it.
dwui 0.7.4 → 0.9.0
13 new components (all following the existing
#[component]macro conventions):switch!/checkbox!role=switch/checkbox,aria-checked, clickable associated labelsprogress!/spinner!aria-valuenow/min/max, indeterminate sweep,role=statusbadge!tab_list!alert!alertvsstatus), variant icons, dismissibleaccordion!aria-expanded/aria-controls, animated via CSS grid-rows, exclusive or multi-opentooltip!aria-describedbylinkage, 4 placementsavatar!divider!/breadcrumbs!/skeleton!aria-current=page, pulsing placeholdersAccessibility retrofits to existing components: label↔input association via generated ids, validation announced through
role=alert+aria-invalid/aria-describedby, modal dialog semantics with focus management and entrance animation,:focus-visiblerings everywhere, semantic heading levels (H1–H6), keyboard-operable list items,type=buttondefaults.Theme: new
success/warningcolor families (backward-compatible —ColorsCssVariables::newkeeps its signature,with_status_colorsfor overrides),dwui-ring-*anddwui-text-primary-*utility maps, shared keyframes. Buttons gainButtonSizeand aButtonType::Textvariant.Fixed along the way:
preventDefaultsilently failing in keyboard handlers (dominator registers listeners passive by default — now usesEventOptions::preventable()).Example webpage — full redesign
“Forged at compile time” identity: candlelight amber on woodsmoke, Bricolage Grotesque / IBM Plex Sans / JetBrains Mono, compiler-styled mono details.
#/— new landing page: hero with syntax-colored live code card, stats strip, bento feature grid with live signal demos, component previews, CTA#/components— full gallery of all 21 components with a working light/dark theme toggleTest plan
cargo test -p dwui— 7 native unit testswasm-pack test --headless --firefox crates/dwui— 26 browser tests (rendering, ARIA semantics, interactions)cargo check --workspacecleantrunk serve: accordion expand/collapse, tooltip on hover, tabs arrow-key navigation, modal open/Escape-close, theme toggle; screenshots inspected for home (desktop + 390px mobile), gallery (dark + light), and docs pages🤖 Generated with Claude Code