@taprootio/espalier 4.20.2 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# 6.0.0
+
+Espalier 6 removes `esp-video`'s unused streaming adapter, and pickers now show an item's new label when its text changes after it was selected.
+
+- **Breaking: `esp-video` no longer takes a streaming adapter.** The `adapter` property, `EspalierVideo.defaultAdapter`, and the `VideoAdapter` type are gone, along with the `"adapter"` value of `VideoSourceMode` (the `mode` in event details) and of `VideoErrorReason`. The element plays `src` where the browser can play `type`, and `fallback-src` otherwise; for a source every browser plays, set `type="video/mp4"`. Nothing else about the element changes: `type` still defaults to HLS, which Safari, iOS, and current Chrome play natively.
+- **Fixed: a picker kept showing an item's old label after its text changed.** A picker copies its `esp-picker-item` children and removes them from the page, so a template that rewrote an item in place (Lit's `map` reusing elements by position, for example, when a placeholder entry is replaced by loaded data) changed nothing the picker saw, and `esp-pick-one` kept showing the placeholder. An item's `text`, `icon`, and `styles` changes now reach its picker: `esp-pick-one` re-renders the selected label, and `esp-pick-some` the selected chip. The selection follows the item's `value` and no `esp-value-changed` fires. `esp-pick-some` chips now also follow the new item when the items are replaced outright. An item element the picker no longer lists, whose `value` was rewritten, or whose items the host has since replaced from code, is ignored.
+- **Fixed: a typeahead picker with `fetchItems` replaced the server's results when its items changed.** Picking in `esp-pick-some`, or any change to `pickerItems`, re-ran the local filter over the canonical items and swapped the remote results shown in the menu for them. The menu now keeps the server's results, with their selected marks updated, and a chip keeps the label of the remote result the visitor picked until the item with that value changes or first arrives. Clearing `fetchItems` while a query is typed shows the local matches at once, and a request still in flight from the cleared source no longer brings its results back, or empties the menu if it fails.
+
+# 5.0.0
+
+Espalier 5 removes the compatibility paths kept for older consumers, adds a native video player, `esp-video`, and makes form errors perceivable to assistive technology: form-item errors now mark, describe, and announce the field, `esp-input` accepts `step="any"`, and choice groups take their name from the form item. The "Migrating To Espalier 5" guide lists each replacement and the form behavior to check.
+
+- **Breaking: removed attributes, properties, and methods.** `esp-page`'s `fixed-menus` / `fixedMenus` (use `header-position="fixed"`), `esp-menu`'s `collapsed` (use `mode="drawer"` or `mode="vertical"`) and `toggleOpened()` (use `toggleDrawer()`), and the `calculatePhotoLayout` export with its `PhotoRow` type (use `calculateAlbumLayout`; with `maxImagesPerRow` its final short row stays partial instead of stretching, and a row clamped by `maxRowHeight` keeps the full width with wider cells for `object-fit: cover`).
+- **Breaking: removed CSS custom properties.** `--esp-page-max-width` (use `--esp-page-main-max-width`), `--esp-page-preview-min-main-width` (use `--esp-page-main-min-width`), `--esp-page-preview-width` (set `--esp-page-preview-min-width` and `--esp-page-preview-max-width`), and `--esp-page-flyout-width` (set `--esp-page-flyout-min-width` and `--esp-page-flyout-max-width`). Nothing forwards the old names.
+- **Breaking: runtime font links carry only their owner key.** `esp-root` and `esp-font-picker` no longer write `data-esp-font`, `data-esp-font-picker`, or `data-esp-font-picker-root` on Google Fonts links, and no longer clean up links that older bundles wrote with only those attributes. Select them with `link[data-esp-google-font-owner]`.
+- **Breaking: `espalier theme-check --expect` no longer recognizes fit tables written by 4.2.0 or earlier.** It reports them as not a fit-table suite; regenerate them with `--update-expect`.
+- **New: `esp-video`** (`@taprootio/espalier/video`). It wraps a native `<video>`, never an iframe or a third-party player, and owns the poster, the aspect ratio, captions, native controls, keyboard and screen-reader access, theming, and visible loading and error states. With the default `preload="none"`, a video with a poster costs exactly one image request until the visitor presses play.
+- **Attributes:** `src`, `type` (default `application/vnd.apple.mpegurl`; `video/mp4` plays a plain file), `poster`, `poster-alt`, `label`, `aspect-ratio` (default `16 / 9`), `preload` (`none`, `metadata`, or `auto`), `autoplay`, `muted`, `loop`, `playsinline`, `controls` (`native` or `none`), `defer-offscreen`, `fallback-src`, and `crossorigin`. Captions are `<track>` children; `srclang`, `label`, and `default` carry through, and with the default `preload` caption files load only after play intent.
+- **Streaming without a dependency.** Where the browser plays HLS natively (Safari, iOS, current Chrome) the element sets `src`. Elsewhere it calls the `adapter` property, or `EspalierVideo.defaultAdapter`, once per source on the first play intent: `(video, src) => teardown` or a promise of one. The element calls the teardown when the source changes, when it is disconnected, or before falling back. A rejected adapter fires `esp-video-error` and plays `fallback-src` if set, or shows the error state if not. The video guide includes a copy-ready hls.js adapter; Espalier still has no runtime dependencies.
+- **Autoplay is always muted.** While `autoplay` is set the video stays muted whatever `muted` says. Autoplay waits for `defer-offscreen` admission, does not start for visitors who prefer reduced motion, and leaves the play button in place when the browser blocks it.
+- **Events:** `esp-video-ready` (`{ src, mode, duration }`), `esp-video-play` (`{ src, mode, currentTime, autoplay }`, once playback actually starts), and `esp-video-error` (`{ src, mode, reason, message, fallback }`), all composed and bubbling, named in `ESP_EVENTS` and typed by `EspalierVideoEventMap`. The element records no analytics itself.
+- **Tokens:** `--esp-video-surface`, `--esp-video-border-radius`, `--esp-video-object-fit`, `--esp-video-accent`, `--esp-video-focus-outline`, `--esp-video-play-size`, `--esp-video-play-background`, `--esp-video-play-color`, `--esp-video-message-background`, and `--esp-video-message-color`.
+- `parseImageRatio` is still exported; it now lives in a module shared by `esp-image` and `esp-video`, so both validate aspect ratios identically. **Fixed:** removing the `ratio` or `compact-ratio` attribute from an `esp-image` banner made the parser throw on every later update; a removed value now falls back as an invalid one does.
+- **Fixed: `esp-form-item` errors were visible but not perceivable with assistive technology.** The error had no role, no live region, and no link to the field, and nothing set `aria-invalid`, so every form that binds `errorPool` or sets `error` told screen-reader users nothing. While an error shows, from `error`, the `errorPool`, or the control's own validation, the element that takes focus now has `aria-invalid="true"`, and the error joins its accessible description after the hint. That element is the native input inside `esp-input`, `esp-textarea`, `esp-date-picker`, and the pickers; the control inside `esp-checkbox`, `esp-radio-button`, `esp-switch`, and `esp-slider`; the group element of a radio-button or checkbox group; or a plain native field you slot directly. `aria-invalid` is removed when the error clears. A warning joins the description the same way, without `aria-invalid`. Nothing changes visually, and the required marker is unchanged. Removing the `error` or `warning` attribute now clears it; it used to throw and leave the badge stuck.
+- **New: errors are announced.** A new or changed error is announced once through a polite status message, prefixed with the field's label (for example "Email: Enter a valid email."). Re-renders that leave the error unchanged announce nothing, and neither does clearing it. The same error shown again after a clear is announced again. Warnings are not announced.
+- **Fixed: `esp-input` rejected `step="any"`.** `step` parsed `any` as `NaN`, and leaving it unset applied the native default step of `1`, which flags every decimal as a step mismatch, so decimal fields could not use `input-type="number"`. `step` now accepts `"any"` as an attribute or a property (`number | "any" | undefined`) and passes it to the native input. Numeric steps behave exactly as before.
+- **Fixed: `esp-radio-button-group` and `esp-checkbox-group` had no accessible name.** Inside an `esp-form-item`, the group's `radiogroup` or `group` element now takes the form item's `label` as its name, so the wrapper `role="group"` and `aria-labelledby` consumers added can be removed. It also takes the hint and error description and `aria-invalid` described above. The hint used to be attached to each radio button or checkbox and is now attached once, to the group.
+- **New: a choice clears its error.** When the visitor changes an `esp-radio-button-group`, `esp-checkbox-group`, `esp-checkbox`, `esp-switch`, or a picker (`esp-pick-one`, `esp-pick-some`, `esp-font-picker`, `esp-image-picker`), the wrapping form item clears an error it got from `error` or `errorPool`, since the change answers it (and a radio choice cannot be undone). A `required` checkbox or group raises its own error again when it is left empty, and an error that your own `esp-value-changed` listener on the control assigns for that change is kept. Text controls, the date picker, and the slider are unchanged: their error stays until you change it. Replacing a picker's `pickerItems` from code is not a visitor's change: `esp-pick-one` and `esp-pick-some` now sync the new selection quietly instead of emitting `esp-value-changed`, so a reloaded option list keeps its error, even while the menu is open.
+- **Fixed: a date or phone `esp-input` ignored a value set from code after the visitor typed in it**, including a value a host writes back from the `esp-value-changed` the visitor's blur emits (for example, normalizing a date on change). The field now shows any value it did not produce itself.
+- **Fixed: decimals could not be typed into an `esp-input` number field.** Typing the decimal point erased it, so "2.5" became "25", and editing a number ("2.5", Backspace, "7") or typing an exponent ("1e5") was mangled the same way. The input no longer writes the browser's interim value back over what the visitor is typing, while typing or while re-rendering.
+
 # 4.20.2
 
 Explore the range of Espalier themes directly in the Theming guide.