use-scroll-animate 7.8.0 → 7.9.0

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [7.9.0] - 2026-10-08
+
+### Added
+- **2 new components (7.9)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-command-palette>` — ⌘K command palette on the native `<dialog>` (top layer, Esc, focus returns): scales in, fuzzy filtering with highlighted letters, results stagger in, a highlight glides between rows (↑ / ↓ / Enter, hover, click), groups. Commands from child `<option value data-group data-keys>` or `setCommands([{ id, label, group, keys }])`; `hotkey` (default `mod+k`, `none`), `inline` (rendered open in the page, no dialog), `placeholder`, `label`; `show()`, `close()`, `toggle()`, `opened`; `usa:run` { id, label }, `usa:open`, `usa:close`. Helpers `fuzzyMatch()`, `keyLabels()`, `matchesKeys()`.
+  - `<usa-shortcut keys="mod+k">` — keyboard-shortcut hint as keycaps (⌘ / ⇧ / ⌥ on Apple platforms, Ctrl / Shift / Alt elsewhere) with an optional `label`; pressing the combination anywhere presses the caps one after another and fires `usa:trigger` (`for="id"` clicks that element, `listen="false"` only displays); `press()`.
+- **`npx usa-codemod-8`** (new bin) and **[docs/upgrading-8.md](./docs/upgrading-8.md)**.
+- `<usa-star-rating>` is now form-associated (`name` submits the value) and also fires a native `change`; `icon` accepts the old `<usa-rating>` characters (★ ♥).
+- Showcase: 2 new gallery cards with copyable code, live demos and live Store thumbnails; Animation Store 331 → 333 items.
+
+### Deprecated (removed in 8.0 — warns once in the console)
+- `<usa-rating>` / `defineRating()` → `<usa-star-rating>` / `defineStarRating()` (same `value`, `max`, `readonly`, `label`, `name`; `icon="♥"` → `icon="heart"`; `--usa-rating-on` → `--usa-star-on`). `npx usa-codemod-8 --write src` rewrites tags, icons and the CSS variable (manual report for `defineRating`, `createElement` and CSS selectors).
+
+### Accessibility
+- Palette: `combobox` input with `aria-activedescendant` over a `listbox` of `option`s (`aria-selected`), group headings are presentational, "No results" is shown as text. Shortcut: keycaps are one `role="img"` with a spoken label ("Command K" / "Control K"). Reduced motion: no scale, stagger, glide or key press.
+
 ## [7.8.0] - 2026-10-08
 
 ### Added

package/bin/usa-codemod-8.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+// motionary 7.x → 8.0 codemod.
+//   npx usa-codemod-8 [--write] [paths…]   (default: ./src; dry run without --write)
+// Rewrites (7.9 deprecations, removed in 8.0):
+//   1. <usa-rating …> → <usa-star-rating …> (value / max / readonly / label / name unchanged;
+//      icon="♥" → icon="heart", icon="★" → icon="star"; a variant="…" attribute is dropped).
+//   2. --usa-rating-on → --usa-star-on (CSS custom property).
+// Reported for a manual change:
+//   3. defineRating imports (use defineStarRating from motionary/components/widgets),
+//      document.createElement('usa-rating'), CSS selectors on usa-rating / .usa-rating-star.
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, extname } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const EXT = new Set(['.js', '.mjs', '.cjs', '.jsx', '.ts', '.tsx', '.mts', '.cts', '.vue', '.svelte', '.html', '.astro', '.md', '.mdx', '.css', '.scss']);
+export const TAGS = { 'usa-rating': 'usa-star-rating' };
+const ICONS = { '★': 'star', '☆': 'star', '♥': 'heart', '❤': 'heart', '❤️': 'heart' };
+
+/** Apply every rewrite to one file's source. Returns { code, changes, manual }. */
+export function transform(source) {
+  const changes = [];
+  const manual = [];
+  let code = source;
+  let n = 0;
+  code = code.replace(/<usa-rating(?=[\s>/])([^>]*)>/g, (_, attrs) => {
+    n++;
+    const a = attrs
+      .replace(/\sicon=(["'])(.*?)\1/g, (m, q, v) => (ICONS[v] ? ` icon=${q}${ICONS[v]}${q}` : m))
+      .replace(/\svariant=(["']).*?\1/g, '');
+    return `<usa-star-rating${a}>`;
+  });
+  const closes = (code.match(/<\/usa-rating>/g) || []).length;
+  code = code.replace(/<\/usa-rating>/g, '</usa-star-rating>');
+  if (n || closes) changes.push(`<usa-rating> → <usa-star-rating> (${Math.max(n, closes)}×)`);
+  const vars = (code.match(/--usa-rating-on\b/g) || []).length;
+  if (vars) {
+    code = code.replace(/--usa-rating-on\b/g, '--usa-star-on');
+    changes.push(`--usa-rating-on → --usa-star-on (${vars}×)`);
+  }
+  if (/createElement\((['"`])usa-rating\1\)/.test(code)) manual.push("document.createElement('usa-rating') — use 'usa-star-rating' (removed in 8.0)");
+  if (/(^|[\s,{}>+~])usa-rating(?=[\s.:#[{,>+~)]|$)|\.usa-rating-star\b/m.test(code.replace(/<\/?[a-z][^>]*>/g, ''))) manual.push('CSS selectors on usa-rating / .usa-rating-star — restyle <usa-star-rating> (.usa-star, --usa-star-on)');
+  if (/\bdefineRating\b/.test(code)) manual.push("defineRating() is removed in 8.0 — import { defineStarRating } from 'motionary/components/widgets'");
+  return { code, changes, manual };
+}
+
+function* walk(p) {
+  const st = statSync(p);
+  if (st.isDirectory()) {
+    for (const f of readdirSync(p)) if (!['node_modules', 'dist', '.git'].includes(f)) yield* walk(join(p, f));
+  } else if (EXT.has(extname(p))) yield p;
+}
+
+export function run(args) {
+  const write = args.includes('--write');
+  const paths = args.filter((a) => !a.startsWith('--'));
+  let files = 0;
+  let edits = 0;
+  let todo = 0;
+  for (const root of paths.length ? paths : ['src'])
+    for (const f of walk(root)) {
+      const src = readFileSync(f, 'utf8');
+      const { code, changes, manual } = transform(src);
+      if (!changes.length && !manual.length) continue;
+      files++;
+      edits += changes.length;
+      todo += manual.length;
+      console.log(`${f}${changes.map((c) => `\n  - ${c}`).join('')}${manual.map((c) => `\n  ! manual: ${c}`).join('')}`);
+      if (write && changes.length) writeFileSync(f, code);
+    }
+  console.log(`\n${files} file(s), ${edits} rewrite(s)${write ? ' applied' : ' (dry run — pass --write to apply)'}, ${todo} manual change(s).`);
+  return { files, edits, todo };
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] || '').href) run(process.argv.slice(2));

package/dist/components/angular.d.cts

@@ -1130,6 +1130,10 @@ interface UsaSliderElement extends UsaElement {
  * Attributes: `value` (0), `max` (5), `icon` (★), `readonly`, `label`
  * ("Rating"), `name` (form value), `variant`. Events: `change`, `usa:change` (`{ value }`).
  * Reduced motion: no pop.
+ *
+ * @deprecated 7.9 — removed in 8.0. Use `<usa-star-rating>` (6.4; same
+ * `value` / `max` / `readonly` / `label` / `name`, `icon="heart"` for ♥).
+ * `npx usa-codemod-8 --write src` rewrites the tags.
  */
 interface UsaRatingElement extends UsaElement {
     value: number;

package/dist/components/angular.d.ts

@@ -1130,6 +1130,10 @@ interface UsaSliderElement extends UsaElement {
  * Attributes: `value` (0), `max` (5), `icon` (★), `readonly`, `label`
  * ("Rating"), `name` (form value), `variant`. Events: `change`, `usa:change` (`{ value }`).
  * Reduced motion: no pop.
+ *
+ * @deprecated 7.9 — removed in 8.0. Use `<usa-star-rating>` (6.4; same
+ * `value` / `max` / `readonly` / `label` / `name`, `icon="heart"` for ♥).
+ * `npx usa-codemod-8 --write src` rewrites the tags.
  */
 interface UsaRatingElement extends UsaElement {
     value: number;

package/dist/components/lite.cjs

@@ -7025,6 +7025,7 @@ function defineRating(tag = 'usa-rating') {
                 this.sync();
             }
             mount() {
+                deprecate('usa-rating', '<usa-rating> is deprecated and removed in 8.0 — use <usa-star-rating> (same value / max / readonly / label / name; icon="heart"). Run `npx usa-codemod-8 --write src`.');
                 const max = this.num('max', 5);
                 this.innerHTML = Array.from({ length: max }, (_, i) => `<span class="usa-rating-star" data-i="${i + 1}" aria-hidden="true">${this.str('icon', '★')}</span>`).join('');
                 this.setAttribute('role', 'slider');