@expressivecss/expressive 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -5,6 +5,310 @@ the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.17.0] - 2026-11-05
+
+This release adds Sass mixins and a few component options, and fixes form reset,
+teardown, keyboard, forced-colors and RTL behavior across components. It removes
+nothing, so there is no migration. One security fix: a questionnaire's review
+step no longer shows hidden inputs or passwords.
+
+### Added
+
+- ColorPicker takes an `i18n` option for its accessible names. The defaults are
+  the English names it always used.
+
+- The ExpressiveCSS skill offers four visual styles: Bold and Dramatic, Minimalist
+  and Clean, Brutalist and Neo-Brutalist, and Organic and Natural. Each one uses
+  documented attributes, classes and variants only. The skill asks, with a reason,
+  before adding token overrides and writes custom CSS only on request.
+
+- Autocomplete `maxResults` caps rendered suggestions when configured. The default
+  is `Infinity`, preserving the complete list. Search still checks the whole dataset.
+
+- Sass exposes `icon-size($size, $line-height)`, `btn-states($on, $base,
+  $hover-depth, $press-depth)`, `$button-toggle-colors` and `$expand-more`.
+  Components now share them in place of repeated sizing blocks, state rules,
+  toggle color tables and a duplicate chevron image.
+
+- Sass adds `selection-control()`, `selection-control-states()`, `header-bar()`,
+  `header-bar-headline()`, `text-action()`, `list-reset()`, `ellipsis()`,
+  `fill-parent()` and `print-hidden()`. `focus-ring()` and `focus-visible()`
+  take an `$offset`, and `chart()` takes optional parameters for the parts some
+  charts share: extra series colors, round and row-band plots, centred tooltips,
+  cursors, SVG lines and table legends. Charts without a grid no longer emit
+  grid rules that they then undid.
+
+### Fixed
+
+- A click on a Menu label, divider or gap no longer closes the menu or reports a
+  selection.
+
+- Number stepper buttons at `min` or `max` no longer fire `input` and `change`,
+  since the value did not change.
+
+- A password revealed in a form inside a shadow root is hidden again on submit
+  and reset, and an expanded bottom sheet in a shadow root goes back to partial
+  when it closes. The error summary and `.validate` styling still need the form
+  in the light DOM.
+
+- Lightbox closes on the Escape keydown and takes the key, so one press no longer
+  also closes a dialog around it.
+
+- In a date range, clicking a day before the start moves the start. The click
+  used to do nothing.
+
+- Carousel's `dragged` ends with the drag, so a later scroll no longer reports
+  `dragged: true`. A mouse click inside the carousel no longer pauses
+  auto-advance. Keyboard focus still does, as the option has always said.
+
+- HeatmapChart's tooltip stays on its cell when the chart changes size.
+
+- Autocomplete `selectOption()` and Chips duplicate checks compare ids as text,
+  so `'01'` is no longer the entry `1`. `1` and `'1'` still match.
+
+- Holding CommandPalette's shortcut toggles it once instead of flickering.
+
+- InputMask leaves a delete to the browser during an IME composition, or when
+  the event cannot be cancelled.
+
+- MapView ignores a tap on a draggable marker it skipped for a bad `data-lng-lat`,
+  which made the next tap on the map throw, and a cluster zoom that MapLibre
+  refuses no longer rejects unhandled.
+
+- AppBar reads the newest entry when an IntersectionObserver batch holds several,
+  and Confetti keeps its current overlay when a burst finishes on one the page
+  removed.
+
+- CurrencyInput no longer reads typed grouping as a decimal in a currency with
+  three decimals. Under `lang="en"` with `KWD`, `5,000` submitted 5 and now
+  submits 5000; `12,345,678` submitted 12345.678 and now submits 12345678.
+  `5.000` still reads 5 there.
+
+- A `.drag-handle` deeper in a bottom sheet, such as a data table's column resize
+  button or a sortable row's handle, no longer closes the sheet, resizes it or
+  starts a sheet drag. Only a handle that is a direct child of the sheet does.
+
+- HoverCard: when links share a card, moving the pointer or focus onto it no
+  longer hands it to another link, which made the card jump away.
+
+- Datepicker opens inside `minDate` and `maxDate`. With no starting date and
+  bounds that exclude today, it opened on today's month with no enabled day and
+  an empty year list. A default date outside the bounds moves to the nearest one.
+
+- Autocomplete follows a form reset. `selectedValues` kept the old choice after
+  the input cleared. It now returns to the starting selection, as the other
+  pickers do, closes the list and drops a waiting search, with no change event.
+
+- Charts, the ColorPicker area, Timepicker's digital fields, Chips, Autocomplete,
+  CommandPalette and the AppBar search field leave keys held with Alt, Ctrl or
+  Meta to the browser, so Alt+Left goes back instead of moving the chart cursor.
+  On an empty Chips input that includes Backspace, and on the AppBar search field
+  Enter. Shift still takes the ColorPicker's larger step.
+
+- CommandPalette leaves the arrow keys to an IME during composition. They moved
+  the active command while the user picked a candidate.
+
+- DataTables no longer pulls LineChart into a modular build. It shared one number
+  parser, which now lives in `core/utils`.
+
+- Forced colors: tooltips, snackbars, menus, dialogs and side and bottom
+  sheets get a CanvasText edge, so they no longer blend into the page. The
+  one-time code input keeps its cells and focus line, which were gradients
+  that forced colors dropped.
+
+- The file field's trigger shows a focus ring while its hidden file input
+  has keyboard focus, and a focused tree select row takes the shared ring
+  instead of only a faint state layer.
+
+- Carousel paging dots are 24px targets around the 8px dot, which meets WCAG
+  2.5.8. The dots now sit 24px apart instead of 16px.
+
+- In RTL, the switch handle starts on the right and slides left, and the
+  expanded time picker's AM and PM buttons share one border.
+
+- A modal navigation rail's scrim no longer dims the rail's own surface.
+
+- The map's fullscreen button stays hidden where fullscreen is unavailable.
+
+- The data table detail chevron and sort arrow and the mega menu chevron stop
+  animating under reduced motion, even when a page overrides the motion
+  duration tokens.
+
+- A form reset no longer leaves stale state behind. ColorPicker redraws its
+  controls, CharacterCounter recounts, `.validate` fields drop `invalid` and
+  `aria-invalid`, the error summary hides, auto-resizing textareas fit their
+  restored text, ImageCompare moves its divider back, and a data table's
+  select-all follows the restored rows. Datepicker, Slider, FormSelect and
+  RichTextEditor read the field's form when the reset fires, so a field moved
+  into a form after init follows its reset too.
+
+- A click on the icon of a disabled Datepicker month arrow no longer changes
+  the month.
+
+- A pie slice of nearly the whole total, such as 3,000,000 beside 1, is drawn
+  as a full circle. Its arc used to round to a zero-length path and vanish.
+
+- Line and scatter chart axes add significant digits when compact labels
+  would repeat, so ticks at 10,050 and 10,100 no longer both read "10.1K".
+
+- A moving Particles canvas repaints when it is resized, instead of showing a
+  blank frame on each resize step.
+
+- The search form in a plain top app bar shows a focus ring when its input
+  has keyboard focus.
+
+- `$expand-more` is `!default`, so `@use "expressive" with ($expand-more: …)`
+  configures it.
+
+- Particles paint at the pixel ratio their buffer was sized for, so dots no
+  longer draw scaled and offset after the page moves to a screen with another
+  ratio. A resize keeps the same dots, moved with the box, instead of
+  scattering a new set every time the canvas changes size.
+
+- Tooltip's `data-tooltip`, `data-tooltip-id` and `data-position` win over
+  init options from init on, as documented. Init used to let the options win
+  until the first open, so a tooltip could change side or text when it first
+  showed.
+
+- `Confetti.fire()` and an instance's `fire()` keep the default of an option
+  passed as `undefined`, as init does. `fire({ origin: undefined })` used to
+  throw.
+
+- InputMask formats the value a form reset restores inside a shadow root
+  too. It listened for `reset` on the document, which the event never
+  reaches from a shadow root. InputMask and CurrencyInput now share one
+  reset helper.
+
+- A snackbar that a `replace: true` snackbar cuts short fires `close` and
+  `closed` and runs its `completeCallback`, as a dismissed one does, and so
+  does one a re-render took out of the page. They used to end silently, so
+  code waiting on the callback never heard.
+
+- Carousel `destroy()` puts the authored `active` class back, removes the
+  `carousel-item` class from items it found without one, and drops the
+  `dragging` and `scrolling` classes of a drag or scroll it cut short.
+  Starting it again used to begin at the last item shown.
+
+- Chips `destroy()` leaves the markup as it was. It used to keep the
+  `chips`, `field` and `focus` classes, the input's `input` class,
+  placeholder and generated id, the label's `for`, and an input it had
+  created.
+
+- Menu `destroy()` puts back the attributes setup wrote, on the trigger,
+  the menu and its rows, and moves the menu back to where it was. A
+  destroyed trigger used to keep `aria-haspopup`, `aria-expanded` and
+  `aria-controls`, so it was still announced as a menu button.
+
+- A date or time picker with Ok and Cancel buttons, which a modal picker
+  always has, empties its input on Ok after Clear. Clear used to write the
+  empty value and fire `change` at once, so Cancel could not keep the old
+  value. Timepicker shows empty fields until Ok, and choosing a time after
+  Clear keeps that time.
+
+- Datepicker `onSelect` and `expressive:select` no longer fire when a click,
+  Enter or a form reset re-reads the date the input already shows. Only a
+  new date is a selection.
+
+- Datepicker `minDate` and `maxDate` bound the month arrows, the month and
+  year lists and PageUp/PageDown. The internal month and year bounds were
+  never set from them, so the calendar paged into months where every day
+  was disabled.
+
+- Autocomplete calls `onSearch` only once the text reaches `minLength`.
+  Shorter text used to reach it too, so a remote search fetched on the
+  first keystroke whatever `minLength` said. Text shorter than `minLength`
+  now aborts the running search and empties `menuItems`.
+
+- Clicking the tab that is already shown no longer fires `onShow` and
+  `expressive:change` again or re-runs the indicator animation. Swipeable
+  tabs and keyboard focus already skipped it.
+
+- RichTextEditor follows a form reset. The editor used to keep the typed
+  text while the reset textarea held its default, so the page showed one
+  thing and the form submitted another.
+
+- A date or time picker inside a shadow root finds its `dateRangeEndEl` and
+  `container` selectors there. It used to search only the document, so a
+  range end input in the same root was not found. Datepicker also stops
+  throwing when a `container` selector matches nothing and falls back to the
+  default placement, as Timepicker does.
+
+- Chips no longer throws from the constructor when `data` holds a chip with a
+  blank or null id. Starting data now gets the same checks as `addChip`, so
+  blank ids, duplicates and chips past `limit` are dropped.
+
+- Security: a questionnaire's review step no longer shows hidden inputs or
+  passwords. It listed a hidden token as an answer and printed a password in
+  plain text. A password now shows as a fixed-length mask, and a file input
+  shows its file names instead of the browser's fake path.
+
+- The mega menu and navigation rail panel chevrons stay visible in forced-colors
+  mode. They were drawn as masks and painted in Canvas, so they disappeared.
+
+- The menubar's expanded trigger insets its forced-colors outline by 2px, like
+  the other menus, instead of drawing it on the edge.
+
+- A modal date or time picker stays open when a drag that starts on the picker,
+  such as moving the clock hand, ends on the scrim. Only a press that starts and
+  ends on the scrim cancels it.
+
+- TransferList's move-all buttons no longer stall on long lists. Removing 2,000
+  rows took about 240 ms in Chromium and now takes about 26 ms.
+
+- Chips trims typed text, so Space then Enter adds no blank chip and `"a "` no
+  longer duplicates `"a"`. `addChip()` refuses a whitespace-only id.
+
+- `getInstance()`, `Snackbar.getInstance()` included, is typed to return
+  `undefined` before `init()` and after `destroy()`, and takes any `Element`. The AutoInit table is now type-checked,
+  and `src/ts/core` builds under strict TypeScript.
+
+- An option passed as `undefined`, at the top level or inside `i18n`, keeps its
+  default. A translation table missing Keypad's `tooShort` made every input in a
+  field with `minlength` throw.
+
+- Autocomplete hears a press on the list released outside it. Before, the
+  field kept treating the press as unfinished, missed being left, and late
+  search results reopened the list.
+
+- Autocomplete with no results announces "No results." even while it lists the
+  selected entries, and the list no longer shares the selection's array.
+
+- Charts whose table is removed draw nothing, where they kept drawing the old
+  data.
+
+- ShowMore without clamped text no longer throws from `destroy()` or `open()`,
+  so it can be initialized again.
+
+- AutoInit logs a component whose constructor throws and releases its element,
+  then carries on. Before, one bad element stopped every component after it in
+  the table and kept `watch` from starting.
+
+- Destroying an instance that a later `init` on the same element replaced no
+  longer unregisters the replacement.
+
+- Timepicker keeps the current time it puts in an emptied field inside
+  `minTime` and `maxTime`, and on the 12-hour clock sets AM or PM to match.
+
+- Data tables in a hidden tab panel, dialog or `<details>` keep their records.
+  Filtering and paging no longer hide every row until the next sync.
+
+- Treemap chart `update()` on a table with no rows no longer throws from its
+  resize observer, and `show()` does nothing on a chart with no rectangles.
+
+- Autocomplete images now use the same URL scheme allowlist as FormSelect.
+  Invalid URLs, `javascript:` URLs and non-image `data:` URLs are dropped.
+
+- Skills use valid YAML discovery metadata, concise triggers and host-neutral
+  delegation. The scored review honors explicit requests for fixes and loads its
+  report template separately. The docs skill catalogue parses YAML rather than
+  extracting scalar values with regular expressions.
+
+- Skill guidance now covers all twelve chart types, axis labels and in-place
+  updates, optional picker displays, shared behavior APIs, scroll areas, shapes,
+  glass, stacking and Sass references. Generated guides retain localization
+  definitions and events, and a catalogue-derived index maps public exports and
+  Sass partials to their guides.
+
 ## [0.16.0] - 2026-10-27
 
 This release removes the aliases kept for markup written before 0.8.0. See
@@ -3839,7 +4143,8 @@ 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.16.0...HEAD
+[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.17.0...HEAD
+[0.17.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.16.0...v0.17.0
 [0.16.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.15.0...v0.16.0
 [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

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.16.0` is under active development.
+> ExpressiveCSS version `0.17.0` is under active development.
 
 Documentation: [www.expressivecss.com](https://www.expressivecss.com)