tosijs-ui 1.16.33 → 1.16.34

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 1.16.34
+
+Spinning icons keep spinning while the page is busy, which is the only time a loader is on
+screen. Nothing to change unless your CSS or script reaches inside a spin icon: see the last
+bullet.
+
+### Icons
+
+- **`spinN<Icon>` no longer freezes on a busy page** (board #3508). The rotation was started
+  with `el.animate()` on the `<svg>`, and WebKit animates an SVG transform on the main thread,
+  so on Safari and every iOS browser a loader stood still exactly while the page worked. It is
+  now a CSS animation on an HTML element around a static svg, which the browser can run off the
+  main thread.
+- **A spin icon turns as a clone and inside a shadow root.** The animation is in the markup
+  rather than started by script, so `cloneNode` and list templates keep it. The spinning
+  element is a `<tosi-icon-spin>`, which adds one shared stylesheet to the document or shadow
+  root it lands in, because a document-level `@keyframes` does not reach a shadow root in
+  Chromium or Firefox. Nothing is added inside the icon, so a button holding a spinner still
+  has its caption as its `textContent`.
+- **Spin icons hold still under `prefers-reduced-motion: reduce`**, as the live-example spinner
+  already did. Shipped in a patch on the maintainer's call: it is an accessibility default. The
+  rules are wrapped in `:where()`, so a rule of yours that names `tosi-icon-spin` overrides
+  them; for an icon inside a component's shadow root, that rule has to be in the shadow root.
+- **The DOM inside a spin icon changed.** It was `span.tosi-icon-composite > svg`; it is now
+  `span.tosi-icon-composite > tosi-icon-spin > svg`, with a span carrying the suffix transform
+  around `<tosi-icon-spin>` when the name has `s`/`x`/`y`/`r`/`f` suffixes
+  (`spin90Loader40s_30x`). That keeps an offset icon spinning about its own centre, as before,
+  and both hold the svg's size in a taller flex container so the icon does not orbit. Speed
+  and direction are the `--tosi-icon-spin-duration` and `--tosi-icon-spin-direction` custom
+  properties on `<tosi-icon-spin>`.
+
 ## 1.16.33
 
 Typing a link on a headset gets much shorter, and a mistyped code no longer sends you off to mint

package/dist/icons.js

@@ -438,6 +438,10 @@ that feed back into the resolution pipeline:
 - `spin<dps><Icon>` — continuous rotation at N°/second (e.g. `spin360Loader`)
 - `spin_<dps><Icon>` — counter-clockwise (e.g. `spin_180Star`)
 
+  The rotation is a CSS animation on an HTML wrapper, not on the `<svg>`, so the browser can
+  run it off the main thread and it keeps turning while the page is busy. Under
+  `prefers-reduced-motion: reduce` it does not turn.
+
 The overlay rules are just string rewrites — for example, `unFoo`
 becomes `slash25o$foo75s75o`. **Overlay icons should have a square
 viewBox** for best results on non-square base icons.
@@ -683,27 +687,89 @@ export const svg2DataUrl = (icon, fill, stroke, strokeWidth) => {
 };
 // Appends _ to names ending in digits to prevent suffix ambiguity
 const safeIconSuffix = (name) => /\d$/.test(name) ? name + '_' : name;
-// The rule list and how names match it live in icon-rules.ts, shared with iconSvg. Spin
-// animates, so its renderer is installed here.
+/*
+The rule list and how names match it live in icon-rules.ts, shared with iconSvg. Spin
+animates, so its renderer is installed here.
+
+The rotation is a CSS animation on an HTML span, never on the svg (board #3508). WebKit runs
+an animated transform on an SVG element on the main thread, whichever API starts it, so a
+loader froze exactly while the page was busy: the one time a loader is on screen. It was also
+started with `el.animate()`, which lives in script rather than in the markup, so a clone of
+the icon (a list template, `cloneNode`) stood still.
+
+The spinning element is a `<tosi-icon-spin>`, which on connecting adds one shared stylesheet
+to whatever root it lands in. A document-level `@keyframes` does not reach an icon in a shadow
+root in Chromium or Firefox (measured), and icons are drawn inside shadow-DOM components. A
+`<style>` carried inside each icon did reach, but its CSS became part of the `textContent` of
+every button holding a spinner, which is what `toHaveText` and caption matching read.
+
+The suffix transform (`spin90Loader40s_30x`) moves to a span OUTSIDE the rotation, so the
+icon still spins about its own centre, as it did when the rotation was appended to that
+transform, instead of orbiting the offset. Both are `align-self: flex-start` so they stay the
+svg's size: stretched by a taller flex container, the rotation's centre left the svg's and
+the icon orbited.
+
+Speed and direction are custom properties on the element, so the animation is a rule and
+`prefers-reduced-motion` can stop it, as it stops the live-example spinner. The rules are in
+`:where()`, so any rule of an adopter's that names `tosi-icon-spin` overrides them.
+*/
+const SPIN_CSS = '@keyframes tosi-icon-spin{to{transform:rotate(360deg)}}' +
+    ':where(tosi-icon-spin){animation:tosi-icon-spin var(--tosi-icon-spin-duration) linear ' +
+    'infinite var(--tosi-icon-spin-direction)}' +
+    '@media (prefers-reduced-motion:reduce){:where(tosi-icon-spin){animation:none}}';
+const spinStyled = new WeakSet();
+let spinSheet;
+function addSpinStyles(root) {
+    if (spinStyled.has(root))
+        return;
+    // A document or a shadow root; a detached subtree's root is neither and gets styled on
+    // connecting.
+    const isDocument = root.nodeType === Node.DOCUMENT_NODE;
+    if (!isDocument && !root.host)
+        return;
+    const target = root;
+    spinStyled.add(root);
+    try {
+        if (!spinSheet) {
+            spinSheet = new CSSStyleSheet();
+            spinSheet.replaceSync(SPIN_CSS);
+        }
+        target.adoptedStyleSheets = [...target.adoptedStyleSheets, spinSheet];
+    }
+    catch {
+        // No constructable stylesheets (Safari before 16.4): a <style> in the root, not the icon.
+        const style = document.createElement('style');
+        style.textContent = SPIN_CSS;
+        (isDocument ? target.head : target).append(style);
+    }
+}
+class TosiIconSpin extends HTMLElement {
+    connectedCallback() {
+        addSpinStyles(this.getRootNode());
+    }
+}
+if (globalThis.customElements && !customElements.get('tosi-icon-spin')) {
+    customElements.define('tosi-icon-spin', TosiIconSpin);
+}
+const spinBox = { display: 'inline-flex', alignSelf: 'flex-start' };
 spinRule.apply = (baseName, match, parts) => {
     const dps = match[1].replace('_', '-');
     const duration = 360 / Math.abs(parseFloat(dps));
     const direction = dps.startsWith('-') ? 'reverse' : 'normal';
     // Resolve baseName with suffixes intact — they apply to the icon
     const icon = resolveIcon(baseName, []);
-    const el = icon;
-    if (el.animate) {
-        const base = el.style.transform || '';
-        el.animate([
-            { transform: `${base} rotate(0deg)` },
-            { transform: `${base} rotate(360deg)` },
-        ], {
-            duration: duration * 1000,
-            iterations: Infinity,
-            direction,
-        });
+    const { transform, transformOrigin } = icon.style;
+    icon.style.transform = '';
+    icon.style.transformOrigin = '';
+    let spun = document.createElement('tosi-icon-spin');
+    Object.assign(spun.style, spinBox);
+    spun.style.setProperty('--tosi-icon-spin-duration', `${duration}s`);
+    spun.style.setProperty('--tosi-icon-spin-direction', direction);
+    spun.append(icon);
+    if (transform) {
+        spun = elements.span({ style: { ...spinBox, transform, transformOrigin } }, spun);
     }
-    return wrapIcon(baseName, parts, icon);
+    return wrapIcon(baseName, parts, spun);
 };
 let iconIdCounter = 0;
 function makeIcon(spec, parts) {