tosijs-ui 1.16.19 → 1.16.20

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 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 —

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

@@ -568,7 +568,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 +895,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);
 }