@expressivecss/expressive 0.13.1 → 0.15.0

package/CHANGELOG.md

@@ -5,6 +5,193 @@ the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.15.0] - 2026-10-14
+
+### Added
+
+- The agent skill has a layout guide, `expressivecss-layout`. It covers
+  Material's layout principles, the five breakpoints with their grid
+  prefixes and Sass mixins, the canonical layout starting points,
+  right-to-left support, and where each Material layout term lives in
+  ExpressiveCSS. Its breakpoints reference lists the panes and components
+  for each breakpoint and walks through Material's five questions for the
+  next size: what to reveal, divide, resize, reposition or swap. Its
+  canonical layouts reference covers feed, list-detail and supporting pane
+  layouts, including list-detail behavior when the window crosses 840px and
+  a grid fallback for supporting content that must stack on narrow windows.
+  Its grids and spacing reference maps Material's 4, 8 and 12 column grids
+  onto the 12-track `.row`, rulers onto containers and pane margins, and
+  covers grouping, rhythm and opt-in density with 48px targets. The design
+  guide's scaffold reference now lists the recommended pane count for each
+  breakpoint, the 50% split-pane rule with a navigation rail, the
+  three-pane limit, drag-handle toggling and persistent resizing, and the
+  co-planar, floating and docked ways to show more than one pane.
+- The scroll area docs show `.scroll-area` on `<html>` for a themed page
+  scrollbar. A browser test covers page scrolling and theme colors.
+- `.keypad` and `.keyboard` are on-screen keys that type into the text
+  field named by `aria-controls`. A keypad is three columns of round keys for
+  PINs, codes and dial pads; a keyboard is rows of keys sized from a column
+  count, with an optional `.numbers` row of shorter digit keys that
+  `hidden` drops. Keys with a `value` type at the caret and fire `input`; `data-key`
+  keys handle Backspace, Enter and a one-shot Shift. Keys square their
+  corners on press, and a `wide` key spans two cells. A key inside the
+  field's `.field`, such as a trailing Backspace, works too. Browsers skip
+  `minlength` for scripted edits, so the docs give a minimum length as
+  `pattern`. `Keypad` is in `AutoInit()` and takes an `onKey` option.
+
+### Changed
+
+- The `expressivecss` skill is version 0.11.0. It adds the
+  `expressivecss-layout` guide and component guides for keypad and keyboard.
+
+### Fixed
+
+- Reference tables on the docs site scroll sideways inside their own box on
+  narrow windows. At 375px, 22 docs pages used to scroll the whole page
+  sideways, mostly because of tables with long token names and defaults.
+  Three pages still do, because their demos (the 12-column grid, the large
+  icon and the extra-large split button) are wider than a phone.
+
+- A snackbar dismissed by a swipe now slides off the side it was swiped
+  toward, starting from where the pointer let go. It used to jump to the
+  right at once, even after a swipe to the left, because the dismiss
+  transition replaced the transform transition before it could run.
+- Date picker days outside `minDate`/`maxDate`, weekends under
+  `disableWeekends`, days rejected by `disableDayFn`, and the adjacent-month
+  days from `showDaysInNextAndPreviousMonths` now use the M3 disabled text
+  color and ignore the pointer. The rule looked for the state class on the
+  day button, but the picker puts it on the cell, so these days looked
+  selectable.
+- A footer whose only child is a plain `<nav>` link column now gets the full
+  page footer styles. When the navigation bar arrived, only the first footer
+  rule was narrowed to a lone `.navigation-bar`. The grid, `.filled`, link
+  and legal bar rules still skipped any footer with a lone `<nav>`. Pane
+  footers use the same guard, so they keep their flex action row.
+- Map markers and the column, bar and mixed chart hover layers mix
+  `in oklab` like the rest of the framework. Each mix is with `transparent`,
+  so the rendered colors do not change.
+- The date picker's unused `.year-text` no longer sets `on-primary`, a
+  leftover from the removed primary header.
+- A `data-tooltip-id` that names no element now logs an error and shows the
+  `data-tooltip` text. A `.tabs` bar with no links logs an error, and
+  swipeable tabs whose links reach no panel act as normal tabs. Each of these
+  used to throw, which stopped `AutoInit()` before the components after it.
+- Reopening a date picker no longer re-reads a value it wrote itself. Without
+  a custom `parse`, `Date.parse` read a `dd/mm/yyyy` value of `05/10/2026` as
+  10 May and passed that to `onSelect`.
+- Space and Enter reach an autocomplete's text field while the list is
+  closed. The menu's trigger keys cancelled them, so a space typed after
+  Escape was lost and Enter could not submit the form. ArrowUp and ArrowDown
+  open the list with the current matches.
+- Autocomplete fires `change` and `onAutocomplete` only when the selection
+  changes, as documented, instead of after every search. `setMenuItems` no
+  longer replaces `options.data`, so the documented custom `onSearch` filter
+  keeps searching the full data set.
+- A chart cell such as `e5` or `1e400` is a gap. These passed the number
+  check but read as `NaN` or `Infinity`, so one such cell turned every point
+  in the chart into `NaN` and nothing was drawn.
+
+## [0.14.1] - 2026-10-11
+
+### Fixed
+
+- The capability roadmap's source links point at a commit on `master`. The
+  0.14.0 links pointed at a pull request commit that the squash merge left
+  off `master`, which stopped the 0.14.0 release before it reached npm. A
+  test now fails when the pinned commit is not an ancestor of the checkout.
+  0.14.1 contains the 0.14.0 changes below.
+
+## [0.14.0] - 2026-10-11
+
+### Added
+
+- The `expressivecss-review` agent skill reviews a page, template, fragment
+  or screenshot with five specialist subagents (theme and tokens, layout,
+  component markup, lifecycle and accessibility, framework rules). It reuses
+  the `expressivecss` guides, version resolver and `expressivecss-lint`, and
+  returns one report scored out of 100 with five 20-point sections. One or two
+  critical findings cap the score at 69, and three or more at 49.
+- `.map` is an interactive map built on MapLibre. The page installs
+  `maplibre-gl` and passes the module to `MapView.init()`; ExpressiveCSS does
+  not bundle it. `.map-marker` children sit at their `data-lng-lat`, can open
+  a `.map-popup` named by `aria-controls`, show a `.map-marker-label` and be
+  dragged with `data-draggable`. `.map-controls` buttons zoom, reset north,
+  locate the reader and go full screen. `addRoute()`, `addArcs()` and
+  `addClusters()` draw data in theme colors. The default OpenFreeMap style
+  follows the light or dark theme.
+- `.confetti` bursts theme-colored confetti. A button with the class bursts
+  from its center over the page when clicked, a `<canvas class="confetti">`
+  bursts inside its own box, and `Expressive.Confetti.fire(options)` bursts
+  over the page from script. Options cover the count, angle, spread, speed,
+  gravity, drift, colors, shapes and size. The page canvas draws above an
+  open modal dialog and lets clicks through. Nothing is drawn when the reader
+  prefers reduced motion.
+- `<canvas class="particles">` fills its positioned ancestor with drifting
+  dots in the theme's on-surface color that lean toward the pointer. Options
+  cover the count, size, color, drift and how far and how fast the dots
+  follow the pointer. The canvas lets clicks through, and under reduced
+  motion the dots are drawn once and stay still.
+
+### Changed
+
+- The docs site has a new shell. A rail holds the five catalogue groups from
+  840px, with the current group's pages beside it from 1200px. Below 1200px
+  the menu button opens the catalogue in a side sheet. Each page opens with a
+  breadcrumb, title, description and a "View as Markdown" link, and the table
+  of contents sits in a sticky column. Page content and URLs are unchanged.
+- The `expressivecss` skill is version 0.10.0. It adds guides for map,
+  confetti and particles. Its version resolver sizes file reads to the file
+  and reports a file that grows during a read as changed.
+
+### Fixed
+
+- Idle components no longer listen to the whole document. Carousel attaches
+  its pointer listeners while a mouse press is down, Tooltip listens for Escape
+  while open, and the docked date picker listens for outside clicks while
+  shown.
+- Calling `Forms.Init()`, `BottomSheets.Init()` or `SideSheets.Init()` again,
+  as a page that loads both the root and `/modular` entries can, no longer
+  adds a second set of document listeners.
+- `Menu.destroy()` no longer throws when the menu's target element is missing,
+  which used to leave its listeners attached.
+- `Utils.throttle` times calls with `performance.now()`, so a system clock
+  change cannot hold a call back.
+- More hot-path fixes:
+  - ScrollSpy skips the document-wide link lookup while the same section
+    stays current.
+  - MapView finds its zoom buttons once, not on every `move` event.
+  - PieChart reuses one percent formatter per legend instead of making one
+    per row.
+  - Snackbar measures its width once per swipe, not on every pointer move.
+  - Slider updates once per drag frame. Its `pointermove` update also ran
+    before the browser moved the value.
+  - The heatmap tooltip measures its cell before writing to the page.
+  - Datepicker checks each calendar row's markup once.
+- Less work on hot paths:
+  - Datepicker arrow keys inside the shown month move focus without
+    redrawing the grid.
+  - Autocomplete renders the result list once per keystroke while its menu is
+    open. It used to render the previous results first, and twice more with
+    `isMultiSelect`.
+  - Particles stop animating and tracking the pointer while the canvas is off
+    screen.
+  - Carousel reads all item positions before writing parallax offsets and works
+    out item sizes before setting them, so scrolling no longer forces a style
+    recalculation per item.
+  - Tabs throttle their window resize handling.
+  - `Utils.throttle` no longer stalls when the system clock moves backwards.
+- Autocomplete with `allowUnsafeHTML` highlights the typed text inside the
+  label's text only. It used to insert the highlight into the HTML string, so a
+  match inside an attribute value could close the attribute and turn the rest
+  of the sanitized label into markup.
+- Table-of-contents links are 48dp tall, the Material touch target, instead
+  of 32dp. `--md-comp-toc-item-height` sets a denser height.
+- In Firefox, a carousel that moved several items while its item sizes were
+  still changing could slide back to an earlier item after it had settled.
+  Firefox re-snapped the track to whichever item it had passed mid-move.
+  Snapping is now off while the carousel scrolls to an item and comes back
+  once the item is in place.
+
 ## [0.13.1] - 2026-10-08
 
 ### Fixed
@@ -222,6 +409,11 @@ the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Fixed
 
+- A checkbox label written as `<input type="checkbox"><span>…</span>` keeps
+  links and other inline elements in its text. The span was a flex box, so
+  each text run and link became a separate item: the spaces around a link
+  disappeared and the words split into columns. It now lays out as inline
+  text, and one line still sits centered in the 48px target.
 - A focused line, column, bar or pie chart no longer cancels Escape when its
   tooltip is already hidden, so a dialog or sheet around the chart can close.
   Pressing a chart's plot away from its marks focuses it without showing the
@@ -2147,7 +2339,10 @@ are no compatibility aliases.
 - `.tabs` nested in a header or app bar as a secondary row. `.tabs` is a
   standalone component; the `.tabs.transparent` app bar variant is gone with it.
 
-[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.13.1...HEAD
+[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.15.0...HEAD
+[0.15.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.14.1...v0.15.0
+[0.14.1]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.14.0...v0.14.1
+[0.14.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.13.1...v0.14.0
 [0.13.1]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.13.0...v0.13.1
 [0.13.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.12.0...v0.13.0
 [0.12.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.11.0...v0.12.0

package/README.md

@@ -4,7 +4,7 @@ ExpressiveCSS is a Material Design 3 front-end framework built with Sass and
 TypeScript. It provides theme tokens, layout and utility classes, styled form
 controls, and JavaScript components in browser, ES module, and CommonJS builds.
 
-> ExpressiveCSS version `0.13.1` is under active development.
+> ExpressiveCSS version `0.15.0` is under active development.
 
 Documentation: [www.expressivecss.com](https://www.expressivecss.com)
 
@@ -416,6 +416,7 @@ The documentation source lives in `docs/src/` and is published at
 | `docs/src` | Astro documentation and examples | Yes |
 | `mcp/expressivecss` | Independently versioned MCP package | Yes |
 | `skills/expressivecss` | Agent guidance and generated component references | Yes |
+| `skills/expressivecss-review` | Scored interface review that runs five specialist subagents | Yes |
 | `scripts`, `tests`, `visual` | Generators, verification, and test tooling | Source only |
 | `semantics.json`, `llm.md`, `m3-guidelines.md` | Markup rules, API reference, design guidance | Yes |
 | `SEMANTICS.md`, generated skill/MCP data | Derived files checked for drift | Yes |