ExpressiveCSS v0.16.0

This release removes the aliases kept for markup written before 0.8.0. See
Removed and Migration below before upgrading.

Deprecated

• Chip sizing properties --padding, --font-size and --font-size-icon.
  Use --md-comp-chip-padding, --md-comp-chip-label-size and
  --md-comp-chip-icon-size instead. Each new property takes priority over
  its old counterpart. Old overrides on a chip remain supported as fallbacks,
  defaults are unchanged, and there is no removal date.

Added

• Native multiple-leaf TreeSelect through <select data-tree multiple>, with
  independent leaf toggles, an open popup and optional search retaining hidden
  choices. Native form submission includes all selected leaves and no branches.
  Branch defaults never propagate into leaf choices; reset and refresh retain
  native ownership. Selection and focus remain separate on the named tree.

• Opt-in single-leaf TreeSelect search through searchable: true. Matching leaf
  paths open without changing the native selection. Clearing or closing restores
  pre-query expansion, including through refresh and disabled-control recovery.
  Search reuses accessible popup controls, localization and lifecycle handling
  while retaining tree keyboard behavior and native leaf submission.

• Independent drop-zone file-count limits through data-max-files. Exact-count
  choices pass; too many files invalidate the complete retained selection with
  accessible count feedback and expressive:reject reason count. All selected
  files appear in independent rejection snapshots. Shared Forms handling keeps
  type/size precedence, application validity, deduplication and reset recovery.

• Optional per-file drop-zone byte limits through data-max-size, independent
  of type checking. Exact-limit files pass; one oversized file invalidates the
  whole retained selection with accessible feedback and expressive:reject
  reason size. Combined rules preserve type-first feedback and application
  custom validity. Constraint-aware deduplication, reset and shadow handling
  reuse the existing Forms path.

• Opt-in drop-zone type validation with data-validate-types, native form
  prevention and accessible error feedback. Extensions, exact MIME types and
  standard media wildcards match whole selections without filtering files.
  Browse and drop share validation; expressive:reject reports invalid choices.
  Recovery preserves application validity and supports open shadow roots.

• File reset cleanup now follows native form ownership, including external
  associated inputs, and runs after reset dispatch/default handling. Canceled
  resets preserve current file state; newer selections retain their feedback.

• Server-owned data table paging through silent validated DataTables.setPage
  state and cancelable expressive:page requests. Server responses retain
  every supplied record without local slicing, filtering or sorting. Local
  page and size controls now request before applying their default; cancel
  to preserve the accepted view. Null state restores local paging.

• Authored single-select page-size controls for local data tables. Changing
  size preserves an available page or clamps to the new last page, retaining
  selections and matching counts.

• Local data table paging through a fixed data-page-size and authored
  Previous/Next buttons. Paging follows filtering and sorting, keeps details
  with records, scopes select-all to the displayed page and preserves
  selections on other pages. Silent sync clamps the current page after row
  changes. Ordinary pagination links retain their navigation behavior.

• Server-owned data table filtering through cancelable expressive:filter
  requests with a trimmed, case-preserving query. Cancel synchronously to
  preserve the current view, then replace records and call
  Expressive.DataTables.sync(wrapper). Sync stays silent and preserves the
  application's server count; an uncanceled input resumes local filtering.

• Opt-in data table text filtering. A labelled search input with
  data-table-filter searches columns whose headers have data-filter.
  Record details stay together, author-hidden rows remain hidden, and an
  authored status output can announce the result count. Select-all now
  affects only enabled records visible in the current view; hidden records
  retain their selections. To include hidden records in a bulk operation,
  check them from script and call Expressive.DataTables.sync(wrapper);
  expressive:change continues reporting all selected records.

• Opt-in select filtering with FormSelect's searchable option. A
  separate popup search field filters grouped options while the native select
  retains its form value. Includes localized search and no-results text,
  keyboard navigation, query clearing on close and reset, and query-preserving
  refresh. On a multiple select, picks keep the popup open with the query and
  focus in place, and options the query hides stay selected and submitted.
  Default, tree and browser-default selects keep their behavior.

• Autocomplete option groups. An entry's group lists it under a labelled
  heading, and entries with the same group gather where the group first
  appears. Up and Down pass over headings, the announced result count leaves
  them out, and a click on one chooses nothing. Entries without a group keep
  their behavior.

• Disabled Autocomplete entries. An entry with disabled: true stays in the
  results, dimmed, and a click, Enter and selectOption() leave it
  unselected, or selected when the selected option or
  setMenuItems(items, selected) chose it. Up and Down skip it, and the
  announced result count leaves it out. Entries without the flag keep their
  behavior.

• Independent gap utilities. .gap-x-0 through .gap-x-6 set column gaps and
  .gap-y-0 through .gap-y-6 set row gaps on the existing rem spacing scale.
  Both support all four window-size prefixes and override the gap shorthand
  at the same breakpoint. Existing gap utilities retain their behavior.

• Responsive child sizing. .flex-1, .flex-none and .shrink-0 now take
  window-size prefixes. New .flex-initial and .shrink-1 classes restore
  content sizing and shrinking, with the same four prefixes.

• Responsive self-alignment. .self-start, .self-center, .self-end and
  .self-stretch take the medium:, expanded:, large: and
  extra-large: prefixes, and the new .self-auto returns a child to its
  parent's align-items. self-center expanded:self-auto centers a child
  until Expanded and then follows the parent. The unprefixed classes are
  unchanged.

• Responsive visual order. .order-first, .order-last and the new
  .order-none (order: 0) take the medium:, expanded:, large: and
  extra-large: prefixes. order-last expanded:order-none moves a child to
  the end until Expanded and then back to its source position. The classes
  change visual order only; Tab and reading order still follow the source.

• Show more. A .show-more holds text with a line-clamp-1, -2 or
  -3 class and a <button>; the button shows the full text, reads
  "Show less" while it is open (i18n.showLess or data-show-less) and
  sets aria-expanded and aria-controls. The button hides while the
  clamped text fits and comes back when a resize or a web font cuts it.
  New semantics rules require a <button type="button"> and clamped text.

• Treemap chart. A <figure class="treemap-chart"> draws each row of its
  table's first value column as a rectangle whose area is its share of the
  total, filling the plot in a squarified layout from the largest value
  down, mirrored in right-to-left pages. Each rectangle shows its name and
  cell when they fit, and rows with no positive value draw nothing. The plot
  is one Tab stop whose arrow keys step through the rectangles in table
  order, the tooltip adds each row's share, and it takes update() and
  data-watch like the other charts. A new semantics rule asks for a
  <figure> with a <table> and a <figcaption>.

• Hover card. A link with hover-card-trigger names a .popover with
  popover="hint" in aria-details, and once the pointer or keyboard
  focus has rested on the link for 500 ms, that card shows against it.
  The card stays while the pointer or focus is on the link or the card,
  and hides 300 ms after both are left, or at once on Escape with focus
  back on the link. A tap or click follows the link and shows no card.
  Two new semantics rules keep the trigger an <a href> whose
  aria-details names a [popover].

• Transfer list. A .transfer-list holds a .transfer-available and a
  .transfer-chosen list of checkbox rows with data-transfer buttons
  between them. add and remove move the checked rows, add-all and
  remove-all every row, and a row moved back returns to its original
  place. The form submits the chosen rows' values under the container's
  data-name, in the chosen list's order, and a form reset puts the rows
  back. Each move fires expressive:transfer with { rows, from, to }
  and is announced through TransferList.i18n.moved. Four new semantics
  rules ask for data-name, unnamed checkboxes, named lists and
  type="button" on the move buttons.

• Funnel chart. A <figure class="funnel-chart"> draws each table row as
  a stage, from the top down in table order, centered and as wide as its
  value against the largest one. The tooltip adds each stage's percentage
  of the first row, and further columns show in the tooltip. The plot is
  one Tab stop whose up and down arrows move between rows, and it takes
  update(), where stages move from their old widths, and data-watch
  like the other charts. A new semantics rule asks for a <figure> with a
  <table> and a <figcaption>.

• Sankey chart. A <figure class="sankey-chart"> draws each table row as
  a flow: the first column names the source node, the second the t...

MCP server v0.5.0

• Security: update the locked body-parser to 2.4.0, fast-uri to 3.1.9,
  and the qs override to 6.16.1 to resolve known dependency advisories.

• Security: quality_inspector skips every files entry outside
  projectRoot with the same reason before touching the disk. A missing
  path used to get "file does not exist", so a client could tell which host
  paths exist.

• Security: a nav or control that repeats one id in aria-labelledby no
  longer makes inspection walk the labelled element once per repeat. A
  snippet of about 136 KB used to block the server for seconds, and a larger
  one could run it out of memory. Each id now counts once, and only the
  first 32 are read.

• Security: version resolution reads crafted lockfiles in linear time. Blank
  lines inside a pnpm entry, or a long run of ( in a version, used to stall
  every project-scoped tool call for as long as minutes or hours.

• On Windows, a client projectRoot that is a network path (\\host\share)
  is refused before it is resolved, unless it sits under an allowed root.
  Resolving it would contact that host.

• rules_enforcer and the lint command flag the class names, color roles
  and markup paths that ExpressiveCSS 0.16.0 removes, and each finding names
  the replacement. The new rule IDs start with legacy-: material-icons,
  i-icon, visibility-alias, helper-class, renamed-component, picker-root,
  sheet-class, variant-alias, markup-path, carousel-flat, color-role,
  selector, datepicker-range and range-export. Class names match as whole
  tokens in class, JSX className, className={"…"} and template
  literals; legacy-selector covers CSS selectors and query strings.

• The three drag-handle rules select .drag-handle only; .handle is a
  removed name that legacy-sheet-class reports inside a bottom sheet.

• Static inspection no longer stalls the server on adversarial markup. An
  unclosed class value full of btn took 30 s to check and now takes about
  100 ms. Markup nested deeper than 256 elements stops early with
  markup nesting limit reached; 4,000 nested aria-hidden elements took
  20 s before.

• legacy-renamed-component no longer stalls on an unclosed tag that
  repeats class="range. A 500,000-character snippet blocked the server
  for about 10 s.

• Breaking: with EXPRESSIVECSS_MCP_ALLOWED_PROJECT_ROOTS unset, a client
  projectRoot must now sit inside the server's default root, from
  --project-root or the working directory. Before, any directory was
  accepted, so a prompt-injected call such as quality_inspector with
  projectRoot: "/" could report whether a file like ~/.ssh/id_rsa
  existed, with its size and SHA-256. A missing projectRoot is now an
  error instead of an unresolved result. To pass other projects, list
  them in EXPRESSIVECSS_MCP_ALLOWED_PROJECT_ROOTS.

• A client projectRoot resolves to the real path that passed the root
  check, so swapping a symlink after the check cannot redirect later reads.

• Reading a FIFO inside the project fails at once instead of hanging the call.

• quality_inspector stops its typecheck or test command when the call is
  cancelled or the client closes the session. Before, the command kept
  running after the server exited.

• The lint hook exits 2 when inspection throws, so a crash blocks the edit
  instead of letting the file through unlinted.

• Bundled framework guidance: ExpressiveCSS 0.16.0.

ExpressiveCSS v0.15.0

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.

MCP server v0.4.1

• The catalogue, guides and rules cover keypad and keyboard.
• Bundled framework guidance: ExpressiveCSS 0.15.0.

ExpressiveCSS v0.14.1

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.

Changes from 0.14.0

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.

ExpressiveCSS v0.14.0

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.

MCP server v0.4.0

• Command-output redaction no longer stalls the server on long token runs.
  160K characters of hex output took 6 s to redact; it now takes milliseconds.
• New EXPRESSIVECSS_MCP_ALLOWED_PROJECT_ROOTS setting limits which
  directories a caller can pass as projectRoot. It is unset by default, which
  keeps the current behavior.
• Calls with a projectRoot are 3 to 5 times faster. The server resolves the
  ExpressiveCSS version once per call and sizes file buffers to the file
  instead of the read limit.
• Tool results use compact JSON text, which is about a third smaller.
• The catalogue, guides and rules cover map, confetti and particles.
• Bundled framework guidance: ExpressiveCSS 0.14.1.

ExpressiveCSS v0.13.1

Fixed

• The capability roadmap's source links point at a commit on master. The
  0.13.0 links pointed at a pull request commit that no longer exists, which
  stopped the 0.13.0 release before it reached npm. 0.13.1 contains the
  0.13.0 changes below.

Changes from 0.13.0

Added

• .rich-text-editor turns a <textarea> into a Tiptap editor with a
  docked toolbar. The page installs Tiptap and passes its Editor class and
  extensions to RichTextEditor.init(); ExpressiveCSS does not bundle it.
  A toolbar button's data-command names a Tiptap command and
  data-attributes holds its JSON argument. Buttons are disabled when their
  command cannot run, and toggle commands set aria-pressed and .active.
  The textarea keeps the editor's HTML, so it submits with its form, and
  names the editable textbox.

• .marquee scrolls a row of logos, images or text without end. Write
  the items in two .marquee-content groups, the second marked
  aria-hidden="true". vertical, reverse and fade change the
  direction and edges, paused stops it, and hover or focus inside pauses
  it. Reduced motion stops the scroll and hides the copy. CSS only.

• <mark> highlights part of a text in the tertiary container colors,
  with no padding so a match inside a word keeps its spacing.
  ::highlight(mark) paints ranges registered with the CSS Custom
  Highlight API the same way.

• .message-scroller scrolls a conversation. While the reader is at the
  end it follows streamed replies, and scrolling up releases it. A message
  appended with data-scroll-anchor starts a turn and is scrolled to the
  top, leaving 64px of the previous message in view. Messages added above
  keep the reader's place. A transcript can open at its end, its start or
  its last turn, scrollToMessage(id) jumps to any message, and an optional
  .message-scroller-button scrolls to the latest message.

• form.questionnaire asks one question at a time. Each <fieldset> is a
  question with radio, checkbox or text answers, and footer buttons marked
  value="previous", "skip" and "next" move between them. The component
  adds a progress row, checks each question with the browser's validation
  (data-required asks for at least one checkbox), shows the question's
  .questionnaire-error, offers Skip on optional questions and leaves out
  disabled ones so pages can branch. The form submits normally, and without
  JavaScript every question shows at once.

• KPI component: article.kpi is a card for one key figure, with its
  label and value in a <dl>, a .kpi-trend chip that takes up, down
  and negative, an optional .kpi-icon, a .kpi-actions corner button,
  a sparkline chart, a progress bar and a .kpi-footer. A negative trend
  also turns the sparkline to the error color. CSS only.

• .countdown shows a whole number from 0 to 999 and rolls its digits up
  or down when --md-comp-countdown-value changes. The element's text is
  the value screen readers read. --md-comp-countdown-digits pads with
  leading zeros, and reduced motion turns the roll off. CSS only.

• .aura wraps one button, card or panel and runs a light around a ring
  just outside it, to mark the one thing a screen most needs the user to
  see. dual, rainbow and glow change the light, and tokens set its
  color, width, corners and speed. The ring is fully rounded around a
  button, stops turning under reduced motion and stays out of the
  accessibility tree.

• The agent skill gains an expressivecss-charts guide for building charts
  and chart dashboards. It covers choosing a chart for the question asked,
  table cells the charts can read, chart cards with stats, tokens,
  sparklines and redrawing. Its recipes cover a period switch, a KPI row,
  a donut with its total, a budget meter, a gauge, a heatmap and a
  dashboard section. The root skill routes chart work to it.

• .mixed-chart draws a <figure>'s data table as columns, lines and
  areas on one plot, chosen by each series header's class: column,
  area, or a line by default, with dashed lines. A series with end
  is drawn against a second scale, set by data-end-min and
  data-end-max, for values in other units. The tooltip, cursor points,
  legend and sparkline work as in the line chart.

• .radial-chart draws a <figure>'s data table as rings, one per row,
  filled clockwise from the top as a share of data-max (100 by default),
  with a legend, tracks, and a tooltip that follows the pointer across the
  rings or the arrow keys. gauge draws half circles, a <tfoot> row shows
  in the middle, and sparkline is a small chart. Ring width, gap and track
  color are tokens.

• .heatmap-chart draws a <figure>'s data table as a grid of cells shaded
  from the lowest value to the highest, with the row headers beside it, the
  column headers below and a scale naming the lowest and highest cells. A
  tooltip follows the pointer or the arrow keys from cell to cell. values
  writes each cell's text on it in black or white, whichever reads on the
  shade; data-label shortens or hides a header on the grid; data-min and
  data-max fix the scale.

• .radar-chart draws a <figure>'s data table as shapes on spokes from a
  shared middle, one spoke per row clockwise from the top and one shape per
  series, with each row's label past its spoke, a legend, and a tooltip that
  follows the pointer round the chart or the arrow keys. area fills the
  shapes, points marks each value, and sparkline is a small chart.

• .pie-chart draws a <figure>'s data table as slices of a whole,
  clockwise from the top, with a legend of each row's cell and share and a
  tooltip that follows the pointer round the pie or the arrow keys. donut
  cuts a hole and shows a <tfoot> total in it, values writes each share
  on its slice, and sparkline is a small pie. Further value columns show in
  the tooltip.

• .bar-chart draws a <figure>'s data table as horizontal bars from zero,
  with each row's label beside it, a legend, and a highlight band and tooltip
  that follow the pointer or the up and down arrows. The plot grows with its
  rows. stacked, split, track, values and sparkline vary it: values
  writes each cell from its bar's base, running past a short bar, and a
  stacked, split row on a track with data-max is a meter. It shares the column chart's runtime and markup, and
  the bars grow leftwards in a right-to-left page.

• Line, column and bar charts: a tap on a touch screen shows the tapped row
  instead of the first, keeps it when the finger lifts, and hides it when the
  page scrolls.

• .column-chart draws a <figure>'s data table as columns from zero, one
  group per row, with x labels, a legend, and a highlight band and tooltip that
  follow the pointer or the arrow keys. stacked, fade, track and
  sparkline vary it, and negative values hang below zero. It shares the line
  chart's runtime, markup and accessibility; the table stays as the text
  alternative and the no-JavaScript fallback.

• Line chart: stacked draws each series on the total of the ones before it
  and fills the band between them, from a zero baseline. The tooltip still
  shows each cell, and an empty cell breaks the series above it. The docs add chart card layouts with a period switch, a
  compact chart and a side sparkline.

• Message component: .message lays out one message in a conversation with an
  optional .message-avatar, .message-header and .message-footer around a
  .message-bubble. end moves a message to the sender's side,
  .message-group stacks consecutive messages and joins their corners, and
  .message-bubble.outlined holds attachments. CSS only.

• Accordion component: .accordion stacks native <details> items as joined
  tiles with a turning chevron. A shared name keeps one item open, and
  opening animates where the engine can transition to auto height. CSS only.

• Data table component: .data-table wraps a native <table> in a scrolling,
  outlined container with a sticky header row. numeric aligns number columns,
  dense shortens rows, aria-sort on a header draws its sort arrow, and a
  checked checkbox in the first cell selects the row. The page owns sorting.
  CSS only.

• Avatar component: .avatar shows a person as a circular image, initials or
  icon in small, default and large sizes. .avatar-group overlaps avatars
  with a surface ring. CSS only.

• Skeleton component: .skeleton draws placeholder boxes, text lines and
  circle shapes with a shimmer that stops under reduced motion. CSS only.

• Empty state component: .empty-state centers an icon or illustration, a
  heading, supporting text and an .empty-state-actions row. CSS only.

• Popover component: .popover styles a native [popover] panel opened by a
  popovertarget button and places it with CSS anchor positioning, below the
  button by default or with top, start and end, flipping to stay on
  screen. Use it for toggletips and small action panels. CSS only.

• Stepper component: ol.stepper numbers a fixed sequence of steps.
  aria-current="step", complete and invalid mark each step's state, and
  the complete and invalid states are spoken through translatable tokens.
  vertical stacks the steps and takes a .stepper-content panel. CSS only.

• Drop zone component: .drop-zone stretches a native file input over a large
  labelled target. The Forms behavior marks a drag with dragover and lists
  each chosen file's name and size in .drop-zone-files.

• Text fields take a trailing .icon-button.suffix as a clickable control.
  password-toggle on that button shows and hides the password and reports
  its state with aria-pressed. input.otp draws one native input as a row of
  one-time code cells.

• Menu contextMenu option, also set by data-context-menu on the trigger:
  the trigger is a region, and i...

MCP server v0.3.1

• Fix npx @expressivecss/mcp-server, which failed with "could not determine
  executable to run" from 0.2.0 onward because the package has two bins. A
  mcp-server bin now starts the server, so the documented client config works.
  The expressivecss-mcp bin is unchanged.
• The server and expressivecss-lint start about 0.3 s faster. jsdom now loads
  the first time a check inspects markup instead of at startup.
• The catalogue, guides and rules cover 29 more components: accordion, aura,
  avatar, the eight chart types, command palette, countdown, data table,
  drop zone, empty state, KPI, marquee, message, message scroller, popover,
  questionnaire, rating, rich text editor, skeleton, stat, stepper, timeline
  and tree.
• Bundled framework guidance: ExpressiveCSS 0.13.1.

ExpressiveCSS v0.13.0

Not published to npm. The release workflow stopped this version during validation. Use v0.13.1, which contains these changes.

Added

• .rich-text-editor turns a <textarea> into a Tiptap editor with a
  docked toolbar. The page installs Tiptap and passes its Editor class and
  extensions to RichTextEditor.init(); ExpressiveCSS does not bundle it.
  A toolbar button's data-command names a Tiptap command and
  data-attributes holds its JSON argument. Buttons are disabled when their
  command cannot run, and toggle commands set aria-pressed and .active.
  The textarea keeps the editor's HTML, so it submits with its form, and
  names the editable textbox.

• .marquee scrolls a row of logos, images or text without end. Write
  the items in two .marquee-content groups, the second marked
  aria-hidden="true". vertical, reverse and fade change the
  direction and edges, paused stops it, and hover or focus inside pauses
  it. Reduced motion stops the scroll and hides the copy. CSS only.

• <mark> highlights part of a text in the tertiary container colors,
  with no padding so a match inside a word keeps its spacing.
  ::highlight(mark) paints ranges registered with the CSS Custom
  Highlight API the same way.

• .message-scroller scrolls a conversation. While the reader is at the
  end it follows streamed replies, and scrolling up releases it. A message
  appended with data-scroll-anchor starts a turn and is scrolled to the
  top, leaving 64px of the previous message in view. Messages added above
  keep the reader's place. A transcript can open at its end, its start or
  its last turn, scrollToMessage(id) jumps to any message, and an optional
  .message-scroller-button scrolls to the latest message.

• form.questionnaire asks one question at a time. Each <fieldset> is a
  question with radio, checkbox or text answers, and footer buttons marked
  value="previous", "skip" and "next" move between them. The component
  adds a progress row, checks each question with the browser's validation
  (data-required asks for at least one checkbox), shows the question's
  .questionnaire-error, offers Skip on optional questions and leaves out
  disabled ones so pages can branch. The form submits normally, and without
  JavaScript every question shows at once.

• KPI component: article.kpi is a card for one key figure, with its
  label and value in a <dl>, a .kpi-trend chip that takes up, down
  and negative, an optional .kpi-icon, a .kpi-actions corner button,
  a sparkline chart, a progress bar and a .kpi-footer. A negative trend
  also turns the sparkline to the error color. CSS only.

• .countdown shows a whole number from 0 to 999 and rolls its digits up
  or down when --md-comp-countdown-value changes. The element's text is
  the value screen readers read. --md-comp-countdown-digits pads with
  leading zeros, and reduced motion turns the roll off. CSS only.

• .aura wraps one button, card or panel and runs a light around a ring
  just outside it, to mark the one thing a screen most needs the user to
  see. dual, rainbow and glow change the light, and tokens set its
  color, width, corners and speed. The ring is fully rounded around a
  button, stops turning under reduced motion and stays out of the
  accessibility tree.

• The agent skill gains an expressivecss-charts guide for building charts
  and chart dashboards. It covers choosing a chart for the question asked,
  table cells the charts can read, chart cards with stats, tokens,
  sparklines and redrawing. Its recipes cover a period switch, a KPI row,
  a donut with its total, a budget meter, a gauge, a heatmap and a
  dashboard section. The root skill routes chart work to it.

• .mixed-chart draws a <figure>'s data table as columns, lines and
  areas on one plot, chosen by each series header's class: column,
  area, or a line by default, with dashed lines. A series with end
  is drawn against a second scale, set by data-end-min and
  data-end-max, for values in other units. The tooltip, cursor points,
  legend and sparkline work as in the line chart.

• .radial-chart draws a <figure>'s data table as rings, one per row,
  filled clockwise from the top as a share of data-max (100 by default),
  with a legend, tracks, and a tooltip that follows the pointer across the
  rings or the arrow keys. gauge draws half circles, a <tfoot> row shows
  in the middle, and sparkline is a small chart. Ring width, gap and track
  color are tokens.

• .heatmap-chart draws a <figure>'s data table as a grid of cells shaded
  from the lowest value to the highest, with the row headers beside it, the
  column headers below and a scale naming the lowest and highest cells. A
  tooltip follows the pointer or the arrow keys from cell to cell. values
  writes each cell's text on it in black or white, whichever reads on the
  shade; data-label shortens or hides a header on the grid; data-min and
  data-max fix the scale.

• .radar-chart draws a <figure>'s data table as shapes on spokes from a
  shared middle, one spoke per row clockwise from the top and one shape per
  series, with each row's label past its spoke, a legend, and a tooltip that
  follows the pointer round the chart or the arrow keys. area fills the
  shapes, points marks each value, and sparkline is a small chart.

• .pie-chart draws a <figure>'s data table as slices of a whole,
  clockwise from the top, with a legend of each row's cell and share and a
  tooltip that follows the pointer round the pie or the arrow keys. donut
  cuts a hole and shows a <tfoot> total in it, values writes each share
  on its slice, and sparkline is a small pie. Further value columns show in
  the tooltip.

• .bar-chart draws a <figure>'s data table as horizontal bars from zero,
  with each row's label beside it, a legend, and a highlight band and tooltip
  that follow the pointer or the up and down arrows. The plot grows with its
  rows. stacked, split, track, values and sparkline vary it: values
  writes each cell from its bar's base, running past a short bar, and a
  stacked, split row on a track with data-max is a meter. It shares the column chart's runtime and markup, and
  the bars grow leftwards in a right-to-left page.

• Line, column and bar charts: a tap on a touch screen shows the tapped row
  instead of the first, keeps it when the finger lifts, and hides it when the
  page scrolls.

• .column-chart draws a <figure>'s data table as columns from zero, one
  group per row, with x labels, a legend, and a highlight band and tooltip that
  follow the pointer or the arrow keys. stacked, fade, track and
  sparkline vary it, and negative values hang below zero. It shares the line
  chart's runtime, markup and accessibility; the table stays as the text
  alternative and the no-JavaScript fallback.

• Line chart: stacked draws each series on the total of the ones before it
  and fills the band between them, from a zero baseline. The tooltip still
  shows each cell, and an empty cell breaks the series above it. The docs add chart card layouts with a period switch, a
  compact chart and a side sparkline.

• Message component: .message lays out one message in a conversation with an
  optional .message-avatar, .message-header and .message-footer around a
  .message-bubble. end moves a message to the sender's side,
  .message-group stacks consecutive messages and joins their corners, and
  .message-bubble.outlined holds attachments. CSS only.

• Accordion component: .accordion stacks native <details> items as joined
  tiles with a turning chevron. A shared name keeps one item open, and
  opening animates where the engine can transition to auto height. CSS only.

• Data table component: .data-table wraps a native <table> in a scrolling,
  outlined container with a sticky header row. numeric aligns number columns,
  dense shortens rows, aria-sort on a header draws its sort arrow, and a
  checked checkbox in the first cell selects the row. The page owns sorting.
  CSS only.

• Avatar component: .avatar shows a person as a circular image, initials or
  icon in small, default and large sizes. .avatar-group overlaps avatars
  with a surface ring. CSS only.

• Skeleton component: .skeleton draws placeholder boxes, text lines and
  circle shapes with a shimmer that stops under reduced motion. CSS only.

• Empty state component: .empty-state centers an icon or illustration, a
  heading, supporting text and an .empty-state-actions row. CSS only.

• Popover component: .popover styles a native [popover] panel opened by a
  popovertarget button and places it with CSS anchor positioning, below the
  button by default or with top, start and end, flipping to stay on
  screen. Use it for toggletips and small action panels. CSS only.

• Stepper component: ol.stepper numbers a fixed sequence of steps.
  aria-current="step", complete and invalid mark each step's state, and
  the complete and invalid states are spoken through translatable tokens.
  vertical stacks the steps and takes a .stepper-content panel. CSS only.

• Drop zone component: .drop-zone stretches a native file input over a large
  labelled target. The Forms behavior marks a drag with dragover and lists
  each chosen file's name and size in .drop-zone-files.

• Text fields take a trailing .icon-button.suffix as a clickable control.
  password-toggle on that button shows and hides the password and reports
  its state with aria-pressed. input.otp draws one native input as a row of
  one-time code cells.

• Menu contextMenu option, also set by data-context-menu on the trigger:
  the trigger is a region, and its menu opens at the pointer on right-click,
  long-press, the menu key or Shift+F10, f...