Web Awesome 3.12.0 bindings #12

Merged
mph merged 32 commits from wip/webawesome-3.12.0 into main 2026-09-11 21:00:06 +00:00
Owner

Summary

Updates the Scalatags bindings from Web Awesome 3.2.1 to 3.12.0. The details are in CHANGELOG.md.

  • All 87 components have a binding. There are 25 new tags (11 free, 14 Pro). wa-page, wa-toast and wa-toast-item are free now.
  • Trait Attrs: 108 attributes are added. WA attributes whose Scala name collides with scalatags all have the suffix Attr (labelAttr, dataAttr, positionAttr, displayAttr, directionAttr, opacityAttr, canvasAttr, maskAttr, attrAttr). The standard HTML attributes that scalatags 0.13.1 does not provide are added too.
  • Breaking: clearable, hoist, keyframes, submenuOpen and autoWidth are removed, because they are not markup attributes in WA 3 or they are deprecated. opacity is now opacityAttr. The migration table is in CHANGELOG.md.
  • ConformanceTest: it checks the bindings against a committed snapshot of the WA Pro 3.12.0 custom-elements manifest (webawesome/jvm/test/resources/webawesome-manifest.tsv, made by scripts/manifest-snapshot.sh). The test checks four things. Every tag and attribute is bound, or is allowlisted with a reason. No binding is dead. No trait name is ambiguous with import scalatags.Text.all.*. CI needs no Pro token.
  • Scenario server: it has pages for all 87 components, and each page was checked in a browser with WA 3.12.0. The pre-existing scenario bugs are fixed (unknown slots, invalid values, x := "false" Booleans, attributes that do not exist).
  • Docs: README, llms.txt, COMPONENTS.md, a CONTRIBUTING section on WA upgrades, and a new CHANGELOG.md.
  • build.mill: 3.12.0-SNAPSHOT. The release commit and the v3.12.0 tag come after this PR.

Also in this branch:

  • The iw bootstrap script update (e775486, afc48b8). It had been committed on local main and not pushed. It is a superset of #10: the same Forgejo URL, plus iw update --help without side effects.
  • A merge of origin/main (#10, #11).
  • .claude/worktrees/ in .gitignore.

Known upstream issues in WA 3.12.0

These are in CHANGELOG.md and llms.txt, and the scenario pages state them: qr-code image-padding, the color-picker initial open, the otp-input flex clip and rejected character, the animated-image blank while it plays, the nested tree-item expanded, the data-grid flex column minWidth, and the Font Awesome Pro families.

Verification

  • ./mill __.compile __.test __.checkFormat __.fix --check passes: SmokeTest 7/7, ConformanceTest 12/12, JS tests.
  • Playwright browser review of all 79 scenario routes: 87/87 components clean (COMPONENTS.md).
  • Not in this PR: automated E2E tests (Michal: "not today").

🤖 Generated with Claude Code

https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE

## Summary Updates the Scalatags bindings from Web Awesome 3.2.1 to **3.12.0**. The details are in `CHANGELOG.md`. - **All 87 components have a binding.** There are 25 new tags (11 free, 14 Pro). `wa-page`, `wa-toast` and `wa-toast-item` are free now. - **Trait `Attrs`:** 108 attributes are added. WA attributes whose Scala name collides with scalatags `all` have the suffix `Attr` (`labelAttr`, `dataAttr`, `positionAttr`, `displayAttr`, `directionAttr`, `opacityAttr`, `canvasAttr`, `maskAttr`, `attrAttr`). The standard HTML attributes that scalatags 0.13.1 does not provide are added too. - **Breaking:** `clearable`, `hoist`, `keyframes`, `submenuOpen` and `autoWidth` are removed, because they are not markup attributes in WA 3 or they are deprecated. `opacity` is now `opacityAttr`. The migration table is in `CHANGELOG.md`. - **`ConformanceTest`:** it checks the bindings against a committed snapshot of the WA Pro 3.12.0 custom-elements manifest (`webawesome/jvm/test/resources/webawesome-manifest.tsv`, made by `scripts/manifest-snapshot.sh`). The test checks four things. Every tag and attribute is bound, or is allowlisted with a reason. No binding is dead. No trait name is ambiguous with `import scalatags.Text.all.*`. CI needs no Pro token. - **Scenario server:** it has pages for all 87 components, and each page was checked in a browser with WA 3.12.0. The pre-existing scenario bugs are fixed (unknown slots, invalid values, `x := "false"` Booleans, attributes that do not exist). - **Docs:** README, llms.txt, COMPONENTS.md, a CONTRIBUTING section on WA upgrades, and a new `CHANGELOG.md`. - `build.mill`: `3.12.0-SNAPSHOT`. The release commit and the `v3.12.0` tag come after this PR. Also in this branch: - The `iw` bootstrap script update (`e775486`, `afc48b8`). It had been committed on local `main` and not pushed. It is a superset of #10: the same Forgejo URL, plus `iw update --help` without side effects. - A merge of `origin/main` (#10, #11). - `.claude/worktrees/` in `.gitignore`. ## Known upstream issues in WA 3.12.0 These are in CHANGELOG.md and llms.txt, and the scenario pages state them: qr-code `image-padding`, the color-picker initial `open`, the otp-input flex clip and rejected character, the animated-image blank while it plays, the nested tree-item `expanded`, the data-grid flex column `minWidth`, and the Font Awesome Pro families. ## Verification - `./mill __.compile __.test __.checkFormat __.fix --check` passes: SmokeTest 7/7, ConformanceTest 12/12, JS tests. - Playwright browser review of all 79 scenario routes: 87/87 components clean (COMPONENTS.md). - Not in this PR: automated E2E tests (Michal: "not today"). 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
mph added 32 commits 2026-09-11 20:07:47 +00:00
Adds `iw update` command for re-downloading cached releases.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Add a manifest snapshot of the Pro 3.12.0 custom-elements.json as a test
resource (scripts/manifest-snapshot.sh regenerates it) and ConformanceTest,
which checks that every manifest tag has a binding, that no attr is dead,
that every manifest attribute is bound or allowlisted with a category and
reason, and that no trait member name is ambiguous with scalatags.Text.all.

Bindings:
- 25 tags (accordion, checkbox-group, charts, data grid, date and time
  inputs, markdown, otp-input, pagination, random-content, toast, video).
- 108 attrs, including the standard HTML attrs that scalatags lacks.
- Attrs whose plain name scalatags `all` uses get the suffix Attr
  (labelAttr, dataAttr, positionAttr, displayAttr, directionAttr,
  opacityAttr, canvasAttr, maskAttr, attrAttr); opacity becomes opacityAttr.
- Remove clearable, hoist, keyframes, submenuOpen and autoWidth, which no
  3.12.0 component takes as markup. tooltip moves to the Copy button section.
- wa-page is free: its section comment drops "(Pro)".

Scenarios change only where the removals break compilation: select uses
withClear, the submenu-open and tooltip hoist sections are gone, and the
icon auto-width section becomes a canvas section.

Version 3.12.0-SNAPSHOT.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Pages: input, checkbox, color-picker, number-input, radio (radio and
radio-group), select, option, combobox, slider, switch, textarea,
file-input and rating.

- Sizes use s/m/l, and every Sizes row shows xs and xl.
- Show the 3.12 attrs: customError, inputmode, enterkeyhint,
  autocapitalize, autocorrect, capture, allowCreate, withCount, resize,
  precision, defaultValue, and the slider withTooltip, tooltipPlacement,
  tooltipDistance, range, minValue, maxValue, withMarkers and
  indicatorOffset.
- Show slots: start/end, increment-icon/decrement-icon, label/hint,
  reference and dropzone. Show pill, filled-outlined, placement,
  grouped options, selected options, vertical and readonly sliders,
  disabled radio groups and required controls in a form.

Fix scenario bugs:
- wa-radio has no checked attribute (it is Lit state); the group value
  selects the radio.
- wa-slider has no tooltip attribute; use withTooltip.
- wa-file-input has no placeholder attribute.
- The textarea default is 4 rows, not 3.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Sizes use s/m/l, with xs/xl in the Sizes rows (button, button group,
dropdown, callout, tag); spinner and callout buttons use s/l.

Features:
- button: start/end decorations with withStart/withEnd; link buttons
  with href, target, rel and download.
- button-group: labelAttr on the toolbar groups.
- copy-button: tooltip full/copy/none; copy-icon, success-icon and
  error-icon slots; custom triggers in the default slot.
- dropdown: size on wa-dropdown as well as on the trigger.
- dropdown-item: link items with href, target, rel and download; a
  submenu item whose href is ignored.
- avatar: icon slot; loading="lazy" with labelAttr.
- badge: attention="bounce"; start/end slots.
- callout: size xs-xl; appearance filled-outlined.
- icon: canvas fixed/auto/square/roomy; all animation presets; variant;
  swapOpacity with the duotone family.
- progress-ring: value text in the default slot.

Scenario bugs fixed:
- copy-button: remove the Sizes and Variants sections (no such attrs).
- badge: sizes through font-size, not a size attr.
- avatar: sizes through --size, not a size attr.
- progress-ring: sizes through --size; remove the Indeterminate section
  (no such attr).
- callout: the action buttons go in the default slot (no footer slot).
- icon: flip x/y (not horizontal/vertical); family="brands" (not
  library); start/end slots in buttons and inputs (not prefix/suffix).
- dropdown: the default distance is 0 and the default placement is
  bottom-start, so the demo labels now say so.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
One route per chart tag: wa-chart, wa-bar-chart, wa-bubble-chart,
wa-doughnut-chart, wa-line-chart, wa-pie-chart, wa-polar-area-chart,
wa-radar-chart and wa-scatter-chart, with sidebar nav items after
Sparkline. Shared helpers render the JSON configuration through raw(),
lay charts out in a grid, and show the legend, colors, feature toggle
and axis sections. The wa-chart page also shows the type attribute,
the config and plugins properties, a mixed chart and the Chart.js
instance through inline module scripts.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Add routes and nav items for wa-checkbox-group, wa-toast with
wa-toast-item, wa-accordion with wa-accordion-item, wa-pagination,
wa-otp-input, wa-time-input, wa-known-date, wa-markdown and
wa-random-content. The pages use the trait attrs (labelAttr, maskAttr,
`case`, page, pageSize, total, items, locale, withNow, tabSize, ...).

The /pagination route takes an optional `current` query parameter, so
that the href-template link mode renders the requested page on the
server. Form demos show the submitted FormData in the page, because
cask rejects unknown query parameters on a plain GET submit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
- qr-code: set colors with CSS color/background-color instead of the
  deprecated fill/background attrs; show image, imageCoverage,
  imageBackground and imagePadding (the QR library ignores imagePadding).
- zoomable-frame: show srcdoc, withThemeSync with a same-origin src,
  sandbox, loading, referrerpolicy and allowfullscreen.
- scroller: show withoutScrollbar and withoutShadow.
- include: show a fragment include (src with #id) and a same-page
  template include (src="#id").
- carousel: show addSlide()/removeSlide().
- animated-image, relative-time: drop play="false"/sync="false", which
  turned the Boolean features on; fix the animated-image heading.
- mutation-observer, resize-observer: move the logs out of the unknown
  "mutated"/"resized" slots and out of the observed subtree; the
  char-data demo now changes the text node so a characterData record fires.
- animation: "spin" is not a Web Awesome animation name; use "flip".

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Pages: card, details, dialog, drawer, split-panel, tab, tree, popover,
popup, tooltip, page. Breadcrumb, breadcrumb-item and divider need no
change.

Fix scenario bugs:
- dialog/drawer: all dialogs and drawers opened at once. Each now has an
  id and opens from a data-dialog/data-drawer="open <id>" button, with
  data-*="close" buttons inside. The dialog header uses the label attr or
  the label slot (wa-dialog has no header slot).
- details: icon-placement "none" is not valid, and the default is end.
- tab, tree: icon-prefix is not a slot; icons go in the default slot.
- popup: "active" is static, not hover.
- page: main content goes in the default slot, not slot="content";
  navigation-placement is start/end and only sets the side of the mobile
  drawer; view and nav-open are state that the page sets, so the view
  and nav-open demos are replaced; disable-navigation-toggle is shown
  with a data-toggle-nav button, because the page recomputes it.
- tooltip: the default trigger is "hover focus".

Add demos: card header/footer actions, appearances and horizontal
actions; details name grouping, disabled and appearances; dialog and
drawer header actions with with-footer, drawer without header and light
dismiss; split-panel position-in-pixels, snap, disabled and divider slot;
tab active, start/end placement and without-scroll-controls; tree
leaf-multiple, selected and disabled; popup arrow placement/padding,
flip fallbacks, shift, auto-size, boundary and hover bridge; tooltip
show/hide delay, disabled, without arrow and open; page custom toggles,
all slots and the menu slot.

Size values small -> s on card, drawer and popover buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Add the /data-grid, /date-input, /date-picker and /video routes (the
video page also shows wa-video-playlist) and their nav items after
file-input. The data grid page sets data and columns in an inline
script and shows sorting, selection, pagination, search, column menus,
grouping, tree data, the empty/no-results/loading slots and server mode.
A /video/thumbnails.vtt route serves the timeline thumbnail cues.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
The scenario pages write labelAttr, dataAttr, positionAttr and the other
suffixed trait members instead of attr("..."), so they show the API that
users discover in code. The rendered HTML is the same.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
README, llms.txt and COMPONENTS.md list all 87 components (70 free,
17 Pro, 15 experimental) with their trait attrs, the Attr-suffix names
for attrs that collide with scalatags, the size and Boolean rules, and
notes for charts, data grid, markdown, toast, OTP input, QR code and
video. CONTRIBUTING.md explains how to regenerate the manifest snapshot
and what each ConformanceTest failure means.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Add a test that each trait attr name is the camel case of its html name
(or that plus Attr), and a test that each ScalatagsBuiltin allowlist
entry is an attr of scalatags.Text.all. Rename the Deprecated category,
close the manifest resource, and use `type` in the scenarios.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Scope the Layout CSS reset to plain HTML elements, so it does not remove
component :host padding. Fix broken images and icon names, add the
missing tree lazy-load handler and include script snippet, give sliders,
OTP inputs, date pickers, split panels, carousels, popups and sparklines
room to render, and make headings and labels match what each demo shows.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Card media demo gets a max width so the image fills the media slot.
Popup flip-fallback and auto-size boxes are 300px high so the anchors
show at load, and the flip-fallback and sync-width popups use popupBox.
Vertical carousel matches the upstream example (pagination only).
The xl date picker is 380px wide so the weekday headers fit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Widen the flip-fallback anchor margin so the preferred top placement
fits inside the scroll box and flips only near the scroll end. Reserve
space below the sync-width row so the popup does not overlap the next
heading.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Fill the COMPONENTS.md Review column: 51 components reviewed clean, the
others with a short note on what is still open. Document the upstream
color-picker open, otp-input flex clip and icon Pro kit limits in
llms.txt, name the button as the with-caret component, and use 3.12.0
in the README versioning example.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Slot real label and hint elements in the slider, number-input and
combobox SSR demos. Reserve room under the open dropdown, rename the
divider menu, and show the selected dropdown-item value. Stack the
callouts with a gap, expand the tree root, wrap the horizontal card
body in one element, and drop the no-effect text-align on the drawer
buttons. Give the neutral sparkline, the animated-image sizes, the long
weekday date picker and the server data grid page sizes values that
show the feature, and let the people grids grow to natural height.
State the upstream otp-input, animated-image and data-grid flex limits
on the pages and in llms.txt.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Give the open-by-default dropdown row enough height that its menu ends
above the next heading. State on the tree page and in llms.txt that a
nested item with expanded collapses at first render in Web Awesome
3.12.0.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
The demo row centres its items, so a taller row moved the trigger down
with it. Align this row to the top so the open menu ends inside the
reserved height.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
- Animated image sizes: scale the play control with --control-box-size
  and --icon-size on the small and medium hosts, and name the properties.
- Date picker sizes: widen the l picker to 360px and the xl picker to
  440px so that the month title stays on one line.
- Data grid: remove the 30rem height limit from the grouping grid so
  that all groups show, and widen the Salary column to 190 so that its
  values and header fit at size xl and with column menus.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
The Review column now tells library users that [x] means the scenario
page was checked in a browser with Web Awesome 3.12.0. Every component
is checked. The notes state only the known upstream or environment
limits of color-picker, otp-input, icon, tree-item, qr-code,
animated-image and data-grid.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Takes the Forgejo Maven publish workflow and the POM repository name from
#11. For iw, keeps this branch's bootstrap script: it has the same Forgejo
download URL as #10, and it also answers 'iw update --help' without acting.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
Add the changelog and slot SSR labels in the form scenarios
All checks were successful
CI / format (pull_request) Successful in 46s
CI / compile (pull_request) Successful in 57s
CI / lint (pull_request) Successful in 51s
CI / test (pull_request) Successful in 47s
94f36bd6ac
CHANGELOG.md records the 3.12.0 release: breaking changes with their
migration, the suffixed Attr names, new components and attributes, and
the known upstream issues in Web Awesome 3.12.0.

The SSR sections of the input, select, textarea and file-input pages set
with-label and with-hint but slotted no label or hint, so they showed
nothing that the attributes are for. They now slot rich label and hint
content, as the number-input page does.

.gitignore ignores .claude/worktrees/, where agent worktrees are created.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B4W95VNg8J3zinj28YSSRE
mph merged commit 83293ee207 into main 2026-09-11 21:00:06 +00:00
mph deleted branch wip/webawesome-3.12.0 2026-09-11 21:00:06 +00:00
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
iterative-works/scalatags-webawesome!12
No description provided.