tosijs-ui 1.16.19 → 1.16.21

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 1.16.21
+
+- **Expanding or collapsing a table row's detail no longer corrects `scrollTop` itself.**
+  tosijs 1.10.9's variable-height list keeps the row in place across the height change, so
+  `<tosi-table>` stopped measuring the row and nudging the scroll position up to three
+  times. closes board #3326
+- **tosijs peer floor raised to `^1.10.9`**, the release that anchors the list. On an older
+  tosijs the toggled row now jumps when its detail opens or closes; upgrade tosijs alongside
+  (`dist/iife.js` already bundles 1.10.9).
+- **The icons page points to [lucide](https://lucide.dev)** in its introduction and under
+  Icon Sources: a fork and expansion of Feather, and the place to start for more icons in
+  the same style.
+
+
+## 1.16.20
+
+- **A registered icon with style suffixes wins over a composition rule.** `checkCircle90r`
+  drew the `check` rule over a rotated `circle`; it is now `checkCircle` turned 90°, in the
+  renderer and in `iconSvg`. A rule still applies where the whole name is not a registered
+  icon with suffixes (`checkLock90r`). closes board #3295
+- **`defineIcons` warns when a new name it defines is also what a composition rule would
+  draw** ("icon checkFoo is also a composition rule's name; your definition wins"). Only a
+  name that reads as the rule's warns (`checkFoo`, not `checkbox` or `unlink`), and
+  overriding a name that already exists, a built-in such as `unlock` included, never does.
+- **A redirect to a missing icon names what was asked for.** `defineIcons({ myChevron:
+  'chevronDwon' })` warned "icon chevronDwon does not exist", naming only the target; it
+  now adds "(requested as myChevron)", through stacks too. closes board #3294
+- **Six live examples on the doc site showed nothing; a Playwright spec now fails on any
+  that does.**
+  - The table's Column Width section rendered an empty `<tosi-table>` (an `html` fence
+    meant as syntax). It is now a live before/after with a test.
+  - The router page's examples shared the page's one router, so the last to run blanked
+    the others. Basic Usage holds it on load and has links; Named Views routes when you
+    press its button, and a test checks the first example shows its route.
+  - Code meant to be read no longer runs as an empty example: the token-palette `css` on
+    highlight-block and highlight-styles, liveTheme's programmatic-control snippet, and the
+    migrating guide's setSchemaValidator lines are `:static`.
+
 ## 1.16.19
 
 - **`iconSvg()` resolves the built-in icons that rotate or flip another.** 27 built-in

package/dist/data-table.js

@@ -948,10 +948,38 @@ by adding the `noreorder` attribute to the `<tosi-table>`.
 
 Columns are laid out at the widths you give them, so a table whose columns add up to less
 than its container leaves a strip of blank space on the right. Add the `full-width-header`
-attribute and the leftover space goes to the last **unpinned** column instead:
+attribute (`fullWidthHeader: true` from the creator) and the leftover space goes to the last
+**unpinned** column instead. The same columns, without and with it:
 
-```html
-<tosi-table full-width-header></tosi-table>
+```js
+import { tosiTable } from 'tosijs-ui'
+
+const array = [
+  { id: 1, name: 'Ada', role: 'Analyst' },
+  { id: 2, name: 'Grace', role: 'Admiral' },
+  { id: 3, name: 'Margaret', role: 'Director' },
+]
+const columns = () => [
+  { prop: 'id', name: 'ID', width: 60 },
+  { prop: 'name', name: 'Name', width: 120 },
+  { prop: 'role', name: 'Role', width: 120 },
+]
+const style = { display: 'block', height: '150px' }
+preview.append(
+  tosiTable({ array, columns: columns(), style }),
+  tosiTable({ array, columns: columns(), style, fullWidthHeader: true })
+)
+```
+```test
+const roleWidth = (table) =>
+  [...table.querySelectorAll('.thead .th')].at(-1).getBoundingClientRect().width
+test('only the full-width table stretches its last column', async () => {
+  const [plain, full] = preview.querySelectorAll('tosi-table')
+  for (let i = 0; i < 100 && !full.querySelector('.thead .th'); i++) await waitMs(20)
+  expect(full.hasAttribute('full-width-header')).toBe(true)
+  expect(Math.round(roleWidth(plain))).toBe(120)
+  expect(roleWidth(full)).toBeGreaterThan(120)
+})
 ```
 
 Right-pinned columns are skipped because they sit against the right edge by definition —
@@ -1742,24 +1770,11 @@ export class TosiTable extends withAttributes({
             this._detailEls.delete(key);
         }
         const rowEl = this.stampedRow(raw);
-        const top = rowEl?.getBoundingClientRect().top;
         if (rowEl)
             this.syncDetail(rowEl, raw);
+        // The list anchors itself across a height change (tosijs 1.10.9), so the toggled row
+        // keeps its place without a scrollTop correction here.
         this.remeasureRows();
-        /*
-        Keep the toggled row where it was. A variable-height list places its rows by
-        interpolation, so a row that changes height moves every row, itself included, by an
-        amount that depends on how far down the list is scrolled.
-        */
-        if (top !== undefined && this._scrollArea) {
-            for (let i = 0; i < 3; i += 1) {
-                const now = this.stampedRow(raw)?.getBoundingClientRect().top;
-                if (now === undefined || Math.abs(now - top) < 1)
-                    break;
-                this._scrollArea.scrollTop += now - top;
-                this.remeasureRows();
-            }
-        }
         this.dispatchEvent(new CustomEvent(want ? 'rowexpand' : 'rowcollapse', {
             bubbles: true,
             detail: { row: raw, element: element?.firstElementChild ?? null },

package/dist/doc-system/highlight-styles.js

@@ -23,7 +23,7 @@ ensureHighlightStyles()
 Every colour is a `varDefault`, so retheme any single token type — in either mode —
 by setting its variable:
 
-```css
+```css:static
 :root { --token-keyword: rebeccapurple; }
 ```
 

package/dist/highlight-block.js

@@ -43,7 +43,7 @@ shipped failing WCAG AA on every token type.
 
 Every colour is a `varDefault`, so retheme one token type without touching the rest:
 
-```css
+```css:static
 :root { --token-keyword: rebeccapurple; }
 ```
 

package/dist/icon-svg.js

@@ -76,10 +76,9 @@ function resolve(asked, name, seen) {
         seen.add(key);
         return resolve(asked, value, seen);
     }
-    // The renderer's order for a name that is not registered: a stack, then a rule, then
-    // suffixes. So `checkCircle90r` is the `check` rule over `circle90r`, not `checkCircle`
-    // turned, and only a name no rule claims gets the transform.
-    const split = key.includes('$') || ruleDraws(key) ? null : splitSuffixes(key);
+    // The renderer's order for a name that is not registered: a stack, then suffixes on a
+    // registered icon (they win over a rule, #3295), then a rule.
+    const split = key.includes('$') ? null : splitSuffixes(key);
     if (split &&
         data[split.baseName] !== undefined &&
         split.tokens.every(isGeometry)) {

package/dist/icons.js

@@ -11,6 +11,11 @@
 e.g. `icons.chevronDown()` produces an `<svg>` element containing a downward-pointing chevron
 icon with the class `icon-chevron-down`.
 
+Most of the built-in icons come from [Feather](https://feathericons.com). If you want more
+icons in the same style, [lucide](https://lucide.dev) is a fork and expansion of Feather and a
+great place to start: its SVGs drop straight into `defineIcons()` (see
+[Need More Icons?](#need-more-icons)).
+
 ```js
 const  { tosi, elements } = tosijs
 import { icons, svgIcon, postNotification } from 'tosijs-ui'
@@ -202,8 +207,8 @@ probably be broken out as a standalone library to allow the use of whatever icon
 
 ### Need More Icons?
 
-[lucide](https://lucide.dev) is a fork of feather that maintains the style and adds a lot more
-options. Obviously it's completely compatible with this icon system and generously licensed. A
+[lucide](https://lucide.dev) is a fork and expansion of feather that maintains the style and
+adds a lot more options. Obviously it's completely compatible with this icon system and generously licensed. A
 good place to find more icons in a pinch.
 
 Concretely: lucide emits the same geometry feather does — `24×24` viewBox, `fill="none"`,
@@ -532,6 +537,7 @@ and render a `square` (in fact, `icons.square()`) as a fallback.
 
 Many of these icons are sourced from [Feather Icons](https://github.com/feathericons/feather), but
 all the icons have been processed to have integer coordinates in a `viewBox` typically scaled to 1024  &times; 1024.
+For more in the same style, [lucide](https://lucide.dev) is a fork and expansion of Feather.
 
 The corporate logos (Google, etc.) are from a variety of sources, in many cases ultimately from the
 organizations themselves. It's up to you to use them correctly.
@@ -568,7 +574,30 @@ import { splitSuffixes, suffixNumber } from './icon-suffixes.js';
 import { iconRules, spinRule, matchRule, canResolve } from './icon-rules.js';
 export { iconRules } from './icon-rules.js';
 export const defineIcons = (newIcons) => {
+    const data = iconData;
+    const isNew = Object.keys(newIcons).filter((name) => !data[name]);
     Object.assign(iconData, newIcons);
+    /*
+    A defined icon always wins over a composition rule that would produce the same name, but
+    the author may not know the rule exists. Say so once, here, where the name was chosen, and
+    only for a NEW name that reads as the rule's: `checkTestShadow`, not `checkbox` or `unlink`
+    (a lowercase run is a word, not a prefix plus an icon, so icon packs stay quiet).
+    Overriding a name that already existed, a built-in such as `unlock` or `checkCircle`
+    included, is a deliberate choice of that name and never warns, so neither does defining a
+    name a second time.
+    */
+    for (const name of isNew) {
+        const readsAsRule = iconRules.some((rule) => {
+            const matched = matchRule(rule, name);
+            if (matched == null || !canResolve(matched.baseName))
+                return false;
+            return (typeof rule.prefix !== 'string' ||
+                /[A-Z]/.test(name[rule.prefix.length]));
+        });
+        if (readsAsRule) {
+            console.warn(`icon ${name} is also a composition rule's name; your definition wins`);
+        }
+    }
 };
 // Raw-markup accessors live in ./icon-svg (DOM-free) and are re-exported here.
 export { iconSvg, iconNames } from './icon-svg.js';
@@ -872,19 +901,28 @@ export function resolveIcon(prop, parts) {
         });
         return wrapIcon(prop, parts, base, ...overlays);
     }
-    // Try composition (spin, un, check, etc.)
-    const composed = composeIcon(prop, parts);
-    if (composed)
-        return composed;
-    // Style suffixes — strip them, resolve the base, apply after
+    /*
+    Style suffixes on a registered icon win over a composition rule (#3295): `checkCircle90r`
+    is `checkCircle` turned, not the `check` rule over `circle90r`. A rule still applies
+    when its suffixes are on an icon that only the rule makes (`spin90Loader50o`).
+    */
     const parsed = parseStyleSuffixes(prop);
+    const native = parsed != null && iconData[parsed.baseName];
+    if (!native) {
+        const composed = composeIcon(prop, parts);
+        if (composed)
+            return composed;
+    }
     if (parsed) {
         const icon = resolveIcon(parsed.baseName, parts);
         Object.assign(icon.style, parsed.style);
         return icon;
     }
     if (prop) {
-        console.warn(`icon ${prop} does not exist`);
+        // Inside a redirect, also name what the caller asked for: a typo in a defineIcons
+        // target is otherwise reported under a name that appears nowhere in their code.
+        const via = expanding.size > 0 ? ` (requested as ${[...expanding].join(' → ')})` : '';
+        console.warn(`icon ${prop} does not exist${via}`);
     }
     return makeIcon(iconData.square, parts);
 }