@apliteni/apliteni-ui 0.41.3 → 0.41.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.41.3",
+  "version": "0.41.5",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -37,20 +37,16 @@ Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use
 
 `CommandPalette` renders the kit's `commandPalette()` markup, class for class, and imports the
 kit's ranking rather than repeating it — so a palette a server rendered and the same palette
-after a keystroke put the same row first. Three differences from the vanilla one. Two are
-because a React host already owns the state the wiring would: it has no Cmd+K binding, since
+after a keystroke put the same row first. Two differences from the vanilla one follow from
+the React host owning state: it has no Cmd+K binding, since
 `open` is the host's prop to set from whatever key it wants; and a destructive row names an
 `onConfirm` callback rather than the id of a confirm dialog, which is refused the same way — a
 `danger` row with neither renders disabled. `rank={false}` hands the query back through
 `onQueryChange` for a palette a server feeds.
 
-The third is not a design decision and is going: **one Escape closes a `Modal` and the palette
-under it.** The React palette and the React `Modal` each register their own listener on the
-document, and `inert` does not stop a document listener, so the question and the surface it was
-asked about close together. The vanilla pair does not do this — every kit overlay is on one
-stack there, and Escape closes the top one only. The React half joins that shared dialog stack
-when this branch is rebased onto the drawer branch, which is where `dialog.ts` lands; until then,
-open a `Modal` from a palette row knowing both will close.
+The React palette, Modal and Drawer share one dialog stack. Escape closes only the top
+one, so dismissing a confirmation leaves the palette open. Vanilla overlays use a separate
+stack; do not open a React dialog and a vanilla overlay over each other on the same page.
 
 `Pagination` renders the kit's `pagination()` markup, class for class, so its styles come from
 `@apliteni/apliteni-ui/css` rather than from this bundle. One deliberate difference: it takes no

package/src/assets/brand.js

@@ -1,7 +1,7 @@
 // Apliteni seedling brand mark + wordmark.
 // `p` prefixes gradient ids so multiple marks on one page never collide.
-
-export const seedling = (p = 'lg', size = 21) => `<svg viewBox="0 0 38 36" width="${size}" height="${Math.round(size * 36 / 38)}" aria-hidden="true"><defs><linearGradient id="${p}1" x1="1" x2="0" y1="0.248" y2="0.752"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient><linearGradient id="${p}2" x1="1" x2="0" y1="0.497" y2="0.503"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient></defs><g transform="translate(1 1)"><path d="M 23.115 33.95 C 22.982 34.379 23.862 31.827 24.095 30.048 C 25.239 21.404 23.879 13.04 15.283 6.191 C 11.018 2.783 5.476 0.988 0 1.235 C 1.974 1.647 3.17 3.705 3.484 5.697 C 3.8 7.673 3.468 9.697 3.7 11.69 C 4.165 15.691 6.953 19.264 10.57 21.108 C 13.84 22.771 17.689 23.1 21.306 22.359 C 21.306 22.359 17.772 13.501 11.234 10.801 C 11.234 10.801 20.062 13.451 22.617 21.981 C 24.31 27.694 23.115 33.951 23.115 33.951 Z" fill="url(#${p}1)"/><path d="M 24.509 17.09 C 24.495 17.045 24.478 17.002 24.459 16.959 C 25.322 13.469 28.425 10.109 30.582 9.089 C 28.392 9.171 24.708 12.546 23.562 14.621 C 22.857 13.042 21.972 11.551 20.924 10.175 C 24.84 6.026 33.851 6.026 35.527 0 C 36.157 3.886 36.157 9.632 34.532 13.221 C 32.988 16.613 29.752 21.454 25.355 20.878 C 25.181 19.594 24.898 18.327 24.509 17.091 Z" fill="url(#${p}2)"/></g></svg>`;
+import { esc, trustedAttr, safeUrl } from '../html.js';
+export const seedling = (p = 'lg', size = 21) => `<svg viewBox="0 0 38 36" width="${esc(size)}" height="${Math.round(size * 36 / 38)}" aria-hidden="true"><defs><linearGradient id="${esc(p)}1" x1="1" x2="0" y1="0.248" y2="0.752"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient><linearGradient id="${esc(p)}2" x1="1" x2="0" y1="0.497" y2="0.503"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient></defs><g transform="translate(1 1)"><path d="M 23.115 33.95 C 22.982 34.379 23.862 31.827 24.095 30.048 C 25.239 21.404 23.879 13.04 15.283 6.191 C 11.018 2.783 5.476 0.988 0 1.235 C 1.974 1.647 3.17 3.705 3.484 5.697 C 3.8 7.673 3.468 9.697 3.7 11.69 C 4.165 15.691 6.953 19.264 10.57 21.108 C 13.84 22.771 17.689 23.1 21.306 22.359 C 21.306 22.359 17.772 13.501 11.234 10.801 C 11.234 10.801 20.062 13.451 22.617 21.981 C 24.31 27.694 23.115 33.951 23.115 33.951 Z" fill="url(#${esc(p)}1)"/><path d="M 24.509 17.09 C 24.495 17.045 24.478 17.002 24.459 16.959 C 25.322 13.469 28.425 10.109 30.582 9.089 C 28.392 9.171 24.708 12.546 23.562 14.621 C 22.857 13.042 21.972 11.551 20.924 10.175 C 24.84 6.026 33.851 6.026 35.527 0 C 36.157 3.886 36.157 9.632 34.532 13.221 C 32.988 16.613 29.752 21.454 25.355 20.878 C 25.181 19.594 24.898 18.327 24.509 17.091 Z" fill="url(#${esc(p)}2)"/></g></svg>`;
 
 // The Apliteni mark — a rounded "sub-theme prism" of the four ready-made accents
 // (Nebula / Phoenix / Ocean / Emerald). This is the current mark used everywhere
@@ -9,10 +9,10 @@ export const seedling = (p = 'lg', size = 21) => `<svg viewBox="0 0 38 36" width
 // is kept only for backward compatibility. `p` prefixes the clip id so multiple
 // marks on one page never collide.
 export const prism = (p = 'pr', size = 26) =>
-  `<svg viewBox="0 0 32 32" width="${size}" height="${size}" aria-hidden="true"><defs><clipPath id="${p}"><rect x="1" y="1" width="30" height="30" rx="9"/></clipPath></defs><g clip-path="url(#${p})"><rect x="1" y="1" width="15" height="15" fill="#9b5dff"/><rect x="16" y="1" width="15" height="15" fill="#ff6a3d"/><rect x="1" y="16" width="15" height="15" fill="#3b9dff"/><rect x="16" y="16" width="15" height="15" fill="#16c98a"/></g></svg>`;
+  `<svg viewBox="0 0 32 32" width="${esc(size)}" height="${esc(size)}" aria-hidden="true"><defs><clipPath id="${esc(p)}"><rect x="1" y="1" width="30" height="30" rx="9"/></clipPath></defs><g clip-path="url(#${esc(p)})"><rect x="1" y="1" width="15" height="15" fill="#9b5dff"/><rect x="16" y="1" width="15" height="15" fill="#ff6a3d"/><rect x="1" y="16" width="15" height="15" fill="#3b9dff"/><rect x="16" y="16" width="15" height="15" fill="#16c98a"/></g></svg>`;
 
 // Brand lockup: the prism mark + product word. `word` defaults to "Strategy"
 // (the strategy portal). Uses the prism — the current Apliteni mark — not the
 // legacy seedling (still exported above for anything that needs it).
 export const brand = ({ p = 'lg', word = 'Strategy', size = 22, href = '/' } = {}) =>
-  `<a class="brand" href="${href}" aria-label="Apliteni ${word}">${prism(p, size)}<span>${word}</span></a>`;
+  `<a class="brand" href="${esc(safeUrl(href))}" aria-label="Apliteni ${trustedAttr(word)}">${prism(p, size)}<span>${word}</span></a>`;

package/src/assets/icons.js

@@ -8,7 +8,7 @@
 //
 // Naming, grouping and provenance, and the gates that hold them:
 // why: CONTRIBUTING.md#add-a-glyph
-
+import { esc } from '../html.js';
 const NAV = {
   chevronDown: '<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>',
   chevronUp: '<polyline points="18 15 12 9 6 15"/>',
@@ -134,7 +134,7 @@ export const iconCategories = [
 // purpose; a named graphic would let a caller hang a control's only accessible
 // name off a decorative glyph, which is what we just fixed.
 export const icon = (name, cls = '') =>
-  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"${cls ? ` class="${cls}"` : ''}>${ICONS[name] || ''}</svg>`;
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"${cls ? ` class="${esc(cls)}"` : ''}>${ICONS[name] || ''}</svg>`;
 
 export const iconNames = Object.keys(ICONS);
 

package/src/components/back.js

@@ -23,7 +23,7 @@ const BARE = 'Back';
 // C0 controls and spaces from the front and removes every tab, LF and CR wherever
 // they sit, so "java\tscript:" is still javascript:. The check reads the address the
 // same way (WHATWG URL Standard, basic URL parser).
-const SCRIPTED = /^javascript:/i;
+const SCRIPTED = /^(?:javascript|data|vbscript):/i;
 const LEADING = /^[\u0000-\u0020]+/;
 const TAB_OR_NEWLINE = /[\t\n\r]/g;
 

package/src/components/command-palette.js

@@ -10,7 +10,7 @@
 // why: docs/specification.md#the-command-palette
 import { esc, icon } from './index.js';
 import { OVERLAY_LAYER, adoptOverlay, popOverlay, pushOverlay, returnFocus, syncOverlays } from './overlay.js';
-
+import { safeUrl } from '../html.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 
 let _uid = 0;
@@ -204,12 +204,12 @@ function paletteItem(it, uid, index, active) {
     `class="${cx('ui-cmdk__item', it.danger && !disabled && 'is-danger', disabled && 'is-disabled', active && 'is-active')}"`,
     'role="option"',
     'tabindex="-1"',
-    `id="${uid}-o${index}"`,
+    `id="${esc(uid)}-o${esc(index)}"`,
     'data-cmdk-item',
-    `data-i="${index}"`,
+    `data-i="${esc(index)}"`,
     searchAttrs(it),
     it.id != null ? `data-id="${esc(it.id)}"` : '',
-    it.href && !disabled ? `data-href="${esc(it.href)}"` : '',
+    it.href && !disabled ? `data-href="${esc(safeUrl(it.href))}"` : '',
     it.confirm && !disabled ? `data-confirm-open="${esc(it.confirm)}"` : '',
     it.confirm && !disabled ? 'aria-haspopup="dialog"' : '',
     disabled ? 'aria-disabled="true"' : '',
@@ -260,10 +260,10 @@ export function commandPaletteList(groups = [], { uid = nextId(), from = 0 } = {
     if (!items.length) return '';
     const headId = g.label ? `${uid}-g${gi}` : null;
     const head = headId
-      ? `<div class="ui-cmdk__group-head" id="${headId}">${esc(g.label)}</div>` : '';
+      ? `<div class="ui-cmdk__group-head" id="${esc(headId)}">${esc(g.label)}</div>` : '';
     const rows = items.map((it) => paletteItem(it, uid, n, n++ === activeAt)).join('');
     return `<div class="ui-cmdk__group" role="group" data-cmdk-group data-i="${gi}"`
-      + `${headId ? ` aria-labelledby="${headId}"` : ''}>${head}${rows}</div>`;
+      + `${headId ? ` aria-labelledby="${esc(headId)}"` : ''}>${head}${rows}</div>`;
   }).join('');
 }
 

package/src/components/drawer.js

@@ -60,7 +60,7 @@ export function drawer({
   const footEl = footer ? `<footer class="ui-drawer__footer">${footer}</footer>` : '';
 
   const rootCls = cx('ui-drawer', `ui-drawer--${side}`, `ui-drawer--${size}`, (open || specimen) && 'is-open');
-  return `<div class="${rootCls}"${specimen ? '' : ' data-drawer'} data-drawer-side="${esc(side)}"`
+  return `<div class="${esc(rootCls)}"${specimen ? '' : ' data-drawer'} data-drawer-side="${esc(side)}"`
     + `${dismissible ? '' : ' data-drawer-static'}${id ? ` id="${esc(id)}"` : ''}>`
     + `<div class="ui-drawer__scrim" data-drawer-scrim></div>`
     + `<aside class="ui-drawer__panel" role="dialog"${specimen ? '' : ' aria-modal="true"'} ${nameAttr} tabindex="-1" data-drawer-panel>`

package/src/components/dropdown.js

@@ -13,7 +13,7 @@
 //   container.innerHTML = dropdown({ label: 'version:', value: '…', items });
 //   wireDropdown(container);   // or let wireTopbar() do it
 import { esc, icon } from './index.js';
-
+import { safeUrl } from '../html.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 
 // A trailing status badge. `badge` is the text shown, in the case it is written
@@ -24,7 +24,7 @@ function ddBadge(badge) {
   let tone = typeof badge === 'string' ? '' : (badge.tone || '');
   if (!tone) tone = /^live$/i.test(text) ? 'live'
     : /^(?:off|unset|disabled|archive|archived)$/i.test(text) ? 'state' : 'neutral';
-  return `<span class="${cx('ui-dropdown__badge', `is-${tone}`)}">${esc(text)}</span>`;
+  return `<span class="${esc(cx('ui-dropdown__badge', `is-${tone}`))}">${esc(text)}</span>`;
 }
 
 // One item row. `listbox` picks role=option (selectable) vs role=menuitem (action).
@@ -41,14 +41,14 @@ function ddItem(it, listbox, ext) {
   const badge = ddBadge(it.badge);
   const tick = listbox ? `<span class="ui-dropdown__tick" aria-hidden="true">${icon('check')}</span>` : '';
   const attrs = [
-    `class="${cx('ui-dropdown__item', selected && 'is-selected', disabled && 'is-disabled', it.danger && 'is-danger')}"`,
+    `class="${esc(cx('ui-dropdown__item', selected && 'is-selected', disabled && 'is-disabled', it.danger && 'is-danger'))}"`,
     'data-dd-item',
     `role="${role}"`,
     'tabindex="-1"',
     it.value != null ? `data-value="${esc(it.value)}"` : '',
     listbox ? `aria-selected="${selected ? 'true' : 'false'}"` : '',
     disabled ? 'aria-disabled="true"' : '',
-    asLink ? `href="${esc(it.href)}"` : '',
+    asLink ? `href="${esc(safeUrl(it.href))}"` : '',
     asLink && it.target ? `target="${esc(it.target)}"` : '',
     ext?.id ? `id="${esc(ext.id)}"` : '',
     ext?.hidden ? 'hidden' : '',
@@ -189,7 +189,7 @@ export function dropdown({
     : `${label ? `<span class="ui-dropdown__pre">${esc(label)}</span>` : ''}` +
       `<span class="ui-dropdown__value">${esc(cur != null ? cur : placeholder)}</span>`;
   const triggerAttrs = [
-    `class="${cx('ui-dropdown__trigger', triggerClass)}"`,
+    `class="${esc(cx('ui-dropdown__trigger', triggerClass))}"`,
     'type="button"',
     'data-dropdown-trigger',
     `aria-haspopup="${sx ? 'dialog' : listRole}"`,
@@ -200,7 +200,7 @@ export function dropdown({
   // `is-open` beside `open` because the descendant selector the panel normally
   // takes its open state from stops matching once wireDropdown() portals it.
   const panelAttrs = [
-    `class="${cx(
+    `class="${esc(cx(
       'ui-dropdown__panel',
       align === 'end' && 'is-end',
       direction === 'up' && 'is-up',
@@ -209,7 +209,7 @@ export function dropdown({
       portal && 'ui-dropdown__panel--portal',
       portal && open && 'is-open',
       panelClass,
-    )}"`,
+    ))}"`,
     'data-dropdown-panel',
     // With search the panel holds a field and a list, which a listbox may not.
     `role="${sx ? 'dialog' : listRole}"`,
@@ -227,7 +227,7 @@ export function dropdown({
     + (direction === 'auto' ? ' data-dropdown-direction="auto"' : '')
     + (portal ? ' data-dropdown-portal' : '');
 
-  return `<div class="${cx('ui-dropdown', open && 'open')}" ${ddAttrs}${id ? ` id="${esc(id)}"` : ''}>` +
+  return `<div class="${esc(cx('ui-dropdown', open && 'open'))}" ${ddAttrs}${id ? ` id="${esc(id)}"` : ''}>` +
     `<button ${triggerAttrs}>${trig}${chevron ? '<span class="ui-dropdown__chevron" aria-hidden="true"></span>' : ''}</button>` +
     `<div ${panelAttrs}>${header}`
       + `${sx ? ddSearchBody({ items, sections }, sx, name, scroll) : ddBody({ items, sections }, isSelect)}`

package/src/components/footer.js

@@ -7,7 +7,7 @@
 //   app  — compact, in-product (tight padding, surface background)
 import { brand as brandLockup } from '../assets/brand.js';
 import { esc } from './index.js';
-
+import { safeUrl } from '../html.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 
 // Minimal brand-glyph set for the optional social row. Feather-ish where generic,
@@ -23,13 +23,13 @@ const SOCIAL = {
 function socialLink({ label, href = '#', icon: ic = 'github' } = {}) {
   const glyph = SOCIAL[ic] || SOCIAL.github;
   const fill = ic === 'github' || ic === 'x' ? 'currentColor' : 'none';
-  return `<a class="ui-footer__social" href="${href}" aria-label="${esc(label || ic)}">` +
+  return `<a class="ui-footer__social" href="${esc(safeUrl(href))}" aria-label="${esc(label || ic)}">` +
     `<svg viewBox="0 0 24 24" fill="${fill}" aria-hidden="true">${glyph}</svg></a>`;
 }
 
 function linkList(links = []) {
   return `<ul class="ui-footer__links">${links.map(({ label, href = '#', target }) =>
-    `<li><a href="${href}"${target ? ` target="${target}" rel="noreferrer"` : ''}>${esc(label)}</a></li>`).join('')}</ul>`;
+    `<li><a href="${esc(safeUrl(href))}"${target ? ` target="${esc(target)}" rel="noreferrer"` : ''}>${esc(label)}</a></li>`).join('')}</ul>`;
 }
 
 // The column title is an h2: it names a top-level section of the page's end
@@ -47,7 +47,7 @@ function column({ title, links = [] } = {}) {
 function legalBar({ legal, legalLinks = [], switcher = '' } = {}) {
   const links = legalLinks.length
     ? `<nav class="ui-footer__legal-links" aria-label="Legal">` +
-      legalLinks.map(({ label, href = '#' }) => `<a href="${href}">${esc(label)}</a>`).join('') + `</nav>`
+      legalLinks.map(({ label, href = '#' }) => `<a href="${esc(safeUrl(href))}">${esc(label)}</a>`).join('') + `</nav>`
     : '';
   const sw = switcher ? `<div class="ui-footer__switcher">${switcher}</div>` : '';
   return `<div class="ui-footer__bar">` +
@@ -77,7 +77,7 @@ export function footer({
 
   // slim + app: a single legal row, no brand block or columns.
   if (variant === 'slim' || variant === 'app') {
-    return `<footer class="${cls}" role="contentinfo"><div class="ui-footer__in">` +
+    return `<footer class="${esc(cls)}" role="contentinfo"><div class="ui-footer__in">` +
       legalBar({ legal, legalLinks, switcher }) +
       `</div></footer>`;
   }
@@ -93,7 +93,7 @@ export function footer({
   const nav = columns.length
     ? `<nav class="ui-footer__nav" aria-label="Footer">${columns.map(column).join('')}</nav>` : '';
 
-  return `<footer class="${cls}" role="contentinfo"><div class="ui-footer__in">` +
+  return `<footer class="${esc(cls)}" role="contentinfo"><div class="ui-footer__in">` +
     `<div class="ui-footer__top">${brandBlock}${nav}</div>` +
     legalBar({ legal, legalLinks, switcher }) +
     `</div></footer>`;

package/src/components/index.js

@@ -3,9 +3,9 @@
 import { icon } from '../assets/icons.js';
 import { illo } from '../assets/illustrations.js';
 import { successCheck } from './success.js';
-const HTML_ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+import { esc, safeUrl } from '../html.js';
+export { esc } from '../html.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
-export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => HTML_ENTITIES[c]);
 // ---- Button --------------------------------------------------------------
 // `iconSvg` is a raw leading-icon SVG string (trusted markup, not escaped) for
 // branded glyphs the kit's icon set doesn't own — e.g. a Google "G". It takes
@@ -37,20 +37,20 @@ export function button({
   // Static busy ⇒ disabled; setButtonBusy wires focus-preserving activation guards.
   const name = String(label == null ? '' : label).trim() || ic || 'Button';
   const named = iconOnly ? ` aria-label="${esc(name)}" title="${esc(name)}"` : '';
-  const attrs = `class="${cls}"${disabled || busy ? ' disabled aria-disabled="true"' : ''}${busy ? ' aria-busy="true"' : ''}${disabled && busy ? ' data-btn-disabled' : ''}${named}`;
+  const attrs = `class="${esc(cls)}"${disabled || busy ? ' disabled aria-disabled="true"' : ''}${busy ? ' aria-busy="true"' : ''}${disabled && busy ? ' data-btn-disabled' : ''}${named}`;
   const control = href
-    ? `<a href="${href}" ${attrs}>${inner}</a>`
-    : `<button type="${type}" ${attrs}>${inner}</button>`;
+    ? `<a href="${esc(safeUrl(href))}" ${attrs}>${inner}</a>`
+    : `<button type="${esc(type)}" ${attrs}>${inner}</button>`;
   return busy ? `${control}<span class="ui-sr ui-btn__status" role="status" aria-live="polite"></span>` : control;
 }
 
 // ---- Badge / Pill --------------------------------------------------------
 export function badge(label, variant = 'neutral') {
   const v = variant === 'neutral' ? '' : `ui-badge--${variant}`;
-  return `<span class="${cx('ui-badge', v)}">${esc(label)}</span>`;
+  return `<span class="${esc(cx('ui-badge', v))}">${esc(label)}</span>`;
 }
 export function pill(label, variant) {
-  return `<span class="${cx('ui-pill', variant && `ui-pill--${variant}`)}">${esc(label)}</span>`;
+  return `<span class="${esc(cx('ui-pill', variant && `ui-pill--${variant}`))}">${esc(label)}</span>`;
 }
 export function statusDot(live = false) {
   return `<span class="${cx('ui-dot', live && 'is-live')}"></span>`;
@@ -66,7 +66,7 @@ export function card({ title, sub, body = '', variant, pad, icon: ic, level = 2
   const head = title
     ? `<${h} class="ui-card__title">${ic ? `<span class="ui-card__icon">${icon(ic)}</span>` : ''}${title}</${h}>${sub ? `<div class="ui-card__sub">${sub}</div>` : ''}`
     : '';
-  return `<div class="${cls}">${head}${body}</div>`;
+  return `<div class="${esc(cls)}">${head}${body}</div>`;
 }
 
 // ---- Segmented control ---------------------------------------------------
@@ -93,7 +93,7 @@ export function segmented({ options = [], active = 0, size, block, name = 'seg',
     return `<button type="button"${disabled || o.disabled ? ' disabled' : ''} aria-pressed="${on}" tabindex="${i === rove ? '0' : '-1'}"`
       + ` data-value="${esc(val)}"${on ? ' class="is-active"' : ''}>${esc(label)}</button>`;
   }).join('');
-  return `<div class="${cls}" role="toolbar" aria-label="${esc(ariaLabel)}" data-seg="${name}">${btns}</div>`;
+  return `<div class="${esc(cls)}" role="toolbar" aria-label="${esc(ariaLabel)}" data-seg="${esc(name)}">${btns}</div>`;
 }
 
 // ---- Accent picker -------------------------------------------------------
@@ -176,7 +176,7 @@ export function field({ label, hint, error, control = '', id, required = false }
     required: required || null,
   });
   const lab = label
-    ? `<label class="ui-field__label"${forId ? ` for="${forId}"` : ''}>${esc(label)}`
+    ? `<label class="ui-field__label"${forId ? ` for="${id ? esc(id) : forId}"` : ''}>${esc(label)}`
       + `${required ? '<span class="ui-field__req" aria-hidden="true">*</span>' : ''}</label>`
     : '';
   const foot = error
@@ -188,14 +188,14 @@ export function field({ label, hint, error, control = '', id, required = false }
 // `invalid` paints the control red AND says so in aria-invalid — the red on its
 // own is a state only a sighted user can read.
 export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, required, name, id, ariaLabel } = {}) {
-  const attrs = `${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}`
+  const attrs = `${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${esc(name)}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}`
     + `${invalid ? ' aria-invalid="true"' : ''}${required ? ' required' : ''}${disabled ? ' disabled' : ''}`;
-  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${attrs}>`;
+  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${esc(type)}" placeholder="${esc(placeholder)}" value="${esc(value)}"${attrs}>`;
   if (!ic) return el;
   return `<div class="ui-input-group"><span class="ui-input-group__icon">${icon(ic)}</span>${el}</div>`;
 }
 export function textarea({ placeholder = '', value = '', rows = 4, name, id, ariaLabel } = {}) {
-  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}>${esc(value)}</textarea>`;
+  return `<textarea class="ui-textarea" rows="${esc(rows)}" placeholder="${esc(placeholder)}"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${esc(name)}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}>${esc(value)}</textarea>`;
 }
 // Native <select>. Pass a `label` via field() or an `ariaLabel` for a bare one —
 // a select with neither has no accessible name.
@@ -206,20 +206,20 @@ export function select({ options = [], value, name, id, ariaLabel, disabled } =
     const sel = value != null && String(val) === String(value);
     return `<option value="${esc(val)}"${sel ? ' selected' : ''}>${esc(label)}</option>`;
   }).join('');
-  return `<select class="ui-select"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}>${opts}</select>`;
+  return `<select class="ui-select"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${esc(name)}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}>${opts}</select>`;
 }
 export function checkbox({ label, checked, type = 'checkbox', name } = {}) {
-  return `<label class="ui-check"><input type="${type}"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;
+  return `<label class="ui-check"><input type="${esc(type)}"${name ? ` name="${esc(name)}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;
 }
 // `label` becomes the input's accessible name (a bare switch has no visible text,
 // so it needs one). Defaults to "Toggle" so a control is never left unlabelled.
 export function switchToggle({ checked = false, disabled = false, name, label = 'Toggle' } = {}) {
-  return `<label class="ui-switch"><input type="checkbox"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} aria-label="${esc(label)}"><span class="ui-switch__track"></span></label>`;
+  return `<label class="ui-switch"><input type="checkbox"${name ? ` name="${esc(name)}"` : ''}${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} aria-label="${esc(label)}"><span class="ui-switch__track"></span></label>`;
 }
 
 // ---- Callout / toast / success ------------------------------------------
 export function callout({ variant, icon: ic = 'info', body } = {}) {
-  return `<div class="${cx('ui-callout', variant && `ui-callout--${variant}`)}"><span class="ui-callout__icon">${icon(ic)}</span><div>${body}</div></div>`;
+  return `<div class="${esc(cx('ui-callout', variant && `ui-callout--${variant}`))}"><span class="ui-callout__icon">${icon(ic)}</span><div>${body}</div></div>`;
 }
 // Default icon per status — overridable with `icon`. The circle family is not
 // decoration: a circled glyph is a STATE the system reports, a bare one is an
@@ -250,7 +250,7 @@ export function toast({
   const bodyHtml = compact || !body ? '' : `<div class="ui-toast__text">${esc(body)}</div>`;
   const dur = typeof timer === 'number' ? ` style="--toast-dur:${timer}s"` : '';
   const timerBar = timer ? '<span class="ui-toast__timer" data-toast-timer></span>' : '';
-  return `<div class="${cls}" role="status" aria-live="polite"${dur}>`
+  return `<div class="${esc(cls)}" role="status" aria-live="polite"${dur}>`
     + `<span class="ui-toast__icon">${icon(ic || TOAST_ICON[variant] || 'info')}</span>`
     + `<div class="ui-toast__body">${title ? `<div class="ui-toast__title">${esc(title)}</div>` : ''}${bodyHtml}</div>`
     + `${actBtn}${closeBtn}${timerBar}</div>`;

package/src/components/loading.js

@@ -28,7 +28,7 @@ export function skeleton({ lines = 3, width, height, radius, className = '' } =
   };
   const bars = Array.from({ length: n }, (_, i) =>
     `<span class="ui-skel__bar m-skeleton"${styleFor(i)}></span>`).join('');
-  return `<div class="${cx('ui-skel', className)}" aria-hidden="true">${bars}</div>`;
+  return `<div class="${esc(cx('ui-skel', className))}" aria-hidden="true">${bars}</div>`;
 }
 
 // A table's worth of skeleton — `rows` × `cols` of bar, laid out on a grid so
@@ -36,7 +36,7 @@ export function skeleton({ lines = 3, width, height, radius, className = '' } =
 // load a table are the common case, and hand-rolling this per screen is how
 // four slightly different loading tables get shipped.
 export function skeletonTable({ rows = 5, cols = 4, head = true } = {}) {
-  const row = (cls) => `<div class="${cls}">`
+  const row = (cls) => `<div class="${esc(cls)}">`
     + Array.from({ length: Math.max(1, cols | 0) }, () => '<span class="ui-skel__bar m-skeleton"></span>').join('')
     + '</div>';
   const body = Array.from({ length: Math.max(1, rows | 0) }, () => row('ui-skel__row')).join('');
@@ -56,7 +56,7 @@ export function busyRegion({
   body, lines = 3, className = '',
 } = {}) {
   const inner = body != null ? body : skeleton({ lines });
-  return `<div class="${cx('ui-busy', className)}" data-busy`
+  return `<div class="${esc(cx('ui-busy', className))}" data-busy`
     + ` data-busy-label="${esc(label)}" data-busy-ready="${esc(readyLabel)}"`
     + ` role="status" aria-live="polite" aria-busy="${busy ? 'true' : 'false'}">`
     + `<span class="ui-sr" data-busy-msg>${esc(busy ? label : readyLabel)}</span>`
@@ -119,7 +119,7 @@ export function deniedState({
   const actionsEl = actions.length
     ? `<div class="ui-denied__actions">${actions.map((a) => button({ size: 'md', ...a })).join('')}</div>`
     : '';
-  return `<div class="${cx('ui-denied', className)}">`
+  return `<div class="${esc(cx('ui-denied', className))}">`
     + `<div class="ui-denied__seal" aria-hidden="true">${icon(ic)}</div>`
     + `<div class="ui-denied__title">${esc(title)}</div>`
     + `${sub ? `<div class="ui-denied__sub">${esc(sub)}</div>` : ''}`

package/src/components/nav.js

@@ -8,7 +8,7 @@
 // is for). Only the collapsible sidebar groups need JS; wire with wireNav().
 import { esc, icon } from './index.js';
 import { playEntrance } from '../motion.js';
-
+import { safeUrl } from '../html.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 
 // Unique-per-render ids so a section heading can label its own list. Module
@@ -28,7 +28,7 @@ function navBadge(badge) {
   const text = badgeText(badge);
   if (!text) return '';
   const tone = typeof badge === 'object' && badge.tone ? badge.tone : 'neutral';
-  return `<span class="${cx('ui-nav__badge', `is-${tone}`)}">${esc(text)}</span>`;
+  return `<span class="${esc(cx('ui-nav__badge', `is-${tone}`))}">${esc(text)}</span>`;
 }
 
 // An item's accessible name. It is emitted at every width, not only when
@@ -59,7 +59,7 @@ function sideLeaf(it, active, { collapsed, sub, current = 'page' } = {}) {
   }
   const attrs = [
     `class="${cls}"`,
-    `href="${esc(it.href || '#' + (it.id ?? ''))}"`,
+    `href="${esc(safeUrl(it.href || '#' + (it.id ?? '')))}"`,
     it.target ? `target="${esc(it.target)}"` : '',
     on ? `aria-current="${current}"` : '',
     name.trim(),
@@ -140,13 +140,13 @@ export function navTabs({
     }
     const attrs = [
       `class="${cx('ui-nav__tab', on && 'is-active')}"`,
-      `href="${esc(it.href || '#' + (it.id ?? ''))}"`,
+      `href="${esc(safeUrl(it.href || '#' + (it.id ?? '')))}"`,
       it.target ? `target="${esc(it.target)}"` : '',
       on ? 'aria-current="page"' : '',
     ].filter(Boolean).join(' ');
     return `<a ${attrs}>${inner}</a>`;
   }).join('');
-  return `<nav class="${cx('ui-nav', 'ui-nav--tabs', `is-${variant}`)}"` +
+  return `<nav class="${esc(cx('ui-nav', 'ui-nav--tabs', `is-${variant}`))}"` +
     ` aria-label="${esc(ariaLabel)}"${id ? ` id="${esc(id)}"` : ''}>${tabs}</nav>`;
 }
 
@@ -161,7 +161,7 @@ export function breadcrumbs({ items = [], ariaLabel = 'Breadcrumb', id } = {}) {
     const inner = `${lead}${label}`;
     const isLast = i === last;
     const cell = (!isLast && it.href)
-      ? `<a class="ui-nav__crumb" href="${esc(it.href)}"${it.target ? ` target="${esc(it.target)}"` : ''}>${inner}</a>`
+      ? `<a class="ui-nav__crumb" href="${esc(safeUrl(it.href))}"${it.target ? ` target="${esc(it.target)}"` : ''}>${inner}</a>`
       : `<span class="${cx('ui-nav__crumb', isLast && 'is-current')}"${isLast ? ' aria-current="page"' : ''}>${inner}</span>`;
     return `<li class="ui-nav__crumb-item">${cell}</li>`;
   }).join('');

package/src/components/pagination.js

@@ -8,7 +8,7 @@
 // fetched. The component then knows no last page, so it draws Prev and Next and
 // nothing else — see `ui-pager--open` below.
 import { esc } from './index.js';
-
+import { safeUrl } from '../html.js';
 // The sizes a table offers, and the one it starts on. Named here so no call site
 // writes either number: both moved once already and would have moved in thirteen
 // files. MUI's DataGrid ships exactly this pair (default 100, options 25/50/100),
@@ -74,7 +74,7 @@ const fmt = (n) => n.toLocaleString('en-US');
 function control({ cls, page, label, href, disabled = false, current = false }) {
   const attrs = `class="${cls}" data-page="${page}"${current ? ' aria-current="page"' : ''}`;
   return href && !disabled
-    ? `<a href="${esc(href(page))}" ${attrs}>${esc(label)}</a>`
+    ? `<a href="${esc(safeUrl(href(page)))}" ${attrs}>${esc(label)}</a>`
     : `<button type="button" ${attrs}${disabled ? ' disabled aria-disabled="true"' : ''}>${esc(label)}</button>`;
 }
 

package/src/components/shell.js

@@ -10,7 +10,7 @@ import { backLink } from './back.js';
 import { prism } from '../assets/brand.js';
 import { ACCOUNT_NAV, toMenuTuple, initials } from './account-nav.js';
 import { paletteHotkey } from './command-palette.js';
-
+import { safeUrl } from '../html.js';
 // The one account navigation definition lives in account-nav.js because topbar.js needs
 // it too; re-exported here so the name docs/library.md publishes keeps working.
 export { ACCOUNT_NAV };
@@ -294,7 +294,7 @@ export function appShell(options = {}) {
   // the name is written out — the mark itself is aria-hidden. The banded layout's own
   // bar says no word, so there the rail keeps the lockup: that layout's head band IS
   // the product's mark. why: docs/specification.md#the-page-shell
-  const brand = compat ? '' : `<a class="ui-app__brand" href="${esc(brandHref)}" aria-label="${esc(word)}">`
+  const brand = compat ? '' : `<a class="ui-app__brand" href="${esc(safeUrl(brandHref))}" aria-label="${esc(word)}">`
     + `${prism(`appb-${++_shellUid}`, 24)}<span>${esc(word)}</span></a>`;
   // A <div>, not an <aside>: <aside> is the `complementary` landmark, and this holds the
   // page's primary navigation and the signed-in reader. The <nav> inside it is already

package/src/components/success.js

@@ -46,9 +46,9 @@ function confettiField() {
 // Optional auto-redirect countdown. Markup-only here (a conic ring sweeps and a
 // static number shows); wireSuccess() turns it into a live ticking counter.
 function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
-  return `<div class="ui-sx__count" data-sx-count style="--sx-secs:${seconds}s">
+  return `<div class="ui-sx__count" data-sx-count style="--sx-secs:${esc(seconds)}s">
   <span class="ui-sx__count-ring" aria-hidden="true"></span>
-  <span class="ui-sx__count-text">${esc(label)} in <b data-sx-num>${seconds}</b>s</span>
+  <span class="ui-sx__count-text">${esc(label)} in <b data-sx-num>${esc(seconds)}</b>s</span>
 </div>`;
 }
 
@@ -103,7 +103,7 @@ export function success({
     : '';
   const countEl = countdown ? countdownEl(countdown) : '';
 
-  return `<div class="${cls}" role="status" aria-live="polite">
+  return `<div class="${esc(cls)}" role="status" aria-live="polite">
   ${bd}
   ${confetti ? confettiField() : ''}
   <div class="ui-sx__inner">

package/src/components/table-values.js

@@ -1,5 +1,5 @@
 import { esc } from './index.js';
-
+import { safeUrl } from '../html.js';
 export function numericValue({ value, unit = '', missing = 'Not available' } = {}) {
   if (value == null || value === '') return `<span class="ui-value" aria-label="${esc(missing)}">—</span>`;
   return `<span class="ui-value">${esc(value)}${unit ? `<span class="ui-value__unit">${esc(unit)}</span>` : ''}</span>`;
@@ -13,8 +13,8 @@ export function deltaValue({ value, tone = 'neutral', basisId, missing = 'No ear
 
 export function rowIdentity({ symbol = '', name = '', logo, href } = {}) {
   const tag = href ? 'a' : 'span';
-  return `<${tag} class="ui-identity"${href ? ` href="${esc(href)}"` : ''}>`
-    + `<span class="ui-identity__logo" aria-hidden="true"><span>${esc(symbol.slice(0, 1))}</span>${logo ? `<img src="${esc(logo)}" alt="">` : ''}</span>`
+  return `<${tag} class="ui-identity"${href ? ` href="${esc(safeUrl(href))}"` : ''}>`
+    + `<span class="ui-identity__logo" aria-hidden="true"><span>${esc(symbol.slice(0, 1))}</span>${logo ? `<img src="${esc(safeUrl(logo, ''))}" alt="">` : ''}</span>`
     + `<span class="ui-identity__symbol">${esc(symbol)}</span><span class="ui-identity__name">${esc(name)}</span></${tag}>`;
 }
 

package/src/components/tabs.js

@@ -15,14 +15,14 @@
 // aria-selected, and aria-controls / aria-labelledby wiring. `name` must be unique
 // per tabs instance on a page (it seeds the tab/panel ids).
 import { playEntrance } from '../motion.js';
-
+import { esc } from '../html.js';
 export function tabs({ items = [], active = 0, name = 'tabs', ariaLabel = 'Tabs', className = '' } = {}) {
   const cls = ['ui-tabs', className].filter(Boolean).join(' ');
   const list = items
     .map((it, i) => {
       const on = i === active;
       return `<button type="button" class="ui-tabs__tab${on ? ' is-active' : ''}" role="tab"`
-        + ` id="${name}-tab-${i}" aria-controls="${name}-panel-${i}"`
+        + ` id="${esc(name)}-tab-${i}" aria-controls="${esc(name)}-panel-${i}"`
         + ` aria-selected="${on ? 'true' : 'false'}" tabindex="${on ? '0' : '-1'}">${it.label}</button>`;
     })
     .join('');
@@ -33,12 +33,12 @@ export function tabs({ items = [], active = 0, name = 'tabs', ariaLabel = 'Tabs'
       // focusable content of its own, and most panels here are plain text. Without
       // it a keyboard user reaches the tab strip and then cannot reach what it
       // switched to — Tab jumps straight past the panel to whatever follows.
-      return `<div class="ui-tabs__panel" role="tabpanel" id="${name}-panel-${i}"`
-        + ` aria-labelledby="${name}-tab-${i}" tabindex="0"${on ? '' : ' hidden'}>${it.panel || ''}</div>`;
+      return `<div class="ui-tabs__panel" role="tabpanel" id="${esc(name)}-panel-${i}"`
+        + ` aria-labelledby="${esc(name)}-tab-${i}" tabindex="0"${on ? '' : ' hidden'}>${it.panel || ''}</div>`;
     })
     .join('');
-  return `<div class="${cls}" data-tabs>`
-    + `<div class="ui-tabs__list" role="tablist" aria-label="${ariaLabel}">${list}</div>`
+  return `<div class="${esc(cls)}" data-tabs>`
+    + `<div class="ui-tabs__list" role="tablist" aria-label="${esc(ariaLabel)}">${list}</div>`
     + `<div class="ui-tabs__panels">${panels}</div>`
     + `</div>`;
 }

package/src/components/topbar.js

@@ -5,7 +5,7 @@ import { icon, sun, moon } from '../assets/icons.js';
 import { esc } from './index.js';
 import { wireDropdown } from './dropdown.js';
 import { accountMenuNav, initials, toMenuTuple } from './account-nav.js';
-
+import { trustedAttr, trustedUrl } from '../html.js';
 const THEME_KEY = 'apliteni-strategy-theme';
 
 // A stateful control in this kit reports the state it is IN, never the state a
@@ -60,7 +60,7 @@ export function versionSwitcher(versions = [], activeIdx = 0) {
 // `nav` mirrors the account sidebar, DERIVED from the one ACCOUNT_NAV definition
 // rather than restated: a second literal agreed with it by hand about the icon
 // and disagreed about the encoding, which is the drift #127 was filed about.
-// Every field below is interpolated raw, so what arrives has to arrive escaped.
+// Body slots below are trusted HTML; attribute copies retain encoded entities.
 //
 // `initials` is the avatar. A derived value has to be derived BEFORE the
 // escaping — `<Ada>` and `&lt;Ada&gt;` do not begin with the same character — so
@@ -84,13 +84,13 @@ export function accountMenu({
   const items = (Array.isArray(nav) ? nav : accountMenuNav())
     .map((n) => (Array.isArray(n) ? n : toMenuTuple(n)));
   const it = ([id, ic, label, href, target]) =>
-    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''} data-dd-item tabindex="-1"${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
+    `<a href="${trustedUrl(href || '#' + id)}"${target ? ` target="${trustedAttr(target)}"` : ''} data-dd-item tabindex="-1"${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
   // `on` so the menu is visible in Storybook / standalone use (no /auth/me gate).
   // Consumes the shared dropdown wiring via the generic [data-dropdown] hooks.
   return `<div class="acct on" data-dropdown>` +
     `<button class="avatar" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false" aria-label="Account">${ini}</button>` +
     `<div class="amenu" data-dropdown-panel role="menu">` +
-    `<div class="ahead"><span class="avatar">${ini}</span><span class="aw"><span class="anm">${name}</span><span class="aem" title="${email}">${email}</span></span></div>` +
+    `<div class="ahead"><span class="avatar">${ini}</span><span class="aw"><span class="anm">${name}</span><span class="aem" title="${trustedAttr(email)}">${email}</span></span></div>` +
     items.map(it).join('') +
     `<div class="asep"></div><a class="aout" href="#logout" data-dd-item tabindex="-1" role="menuitem">${icon('logout')}Sign out</a>` +
     `</div></div>`;

package/src/html.js

@@ -0,0 +1,23 @@
+// Shared HTML boundaries; public esc remains exported from components/index.js.
+const ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+export const esc = value => String(value == null ? '' : value).replace(/[&<>"]/g, c => ENTITIES[c]);
+
+// Legacy topbar/brand slots accept already escaped HTML. Preserve their entities.
+export const trustedAttr = value => String(value ?? '').replace(/[<>"]/g, c => ENTITIES[c]);
+
+// why: docs/specification.md#vanilla-html-boundaries
+export function safeUrl(value, fallback = '#') {
+  const raw = String(value ?? '');
+  const scheme = raw.replace(/[\t\n\r]/g, '').replace(/^[\u0000-\u0020]+/, '');
+  return /^(?:javascript|data|vbscript):/i.test(scheme) ? fallback : raw;
+}
+
+export function trustedUrl(value) {
+  // Legacy attributes are already HTML encoded, so check their decoded scheme.
+  const decoded = String(value ?? '').replace(/&#(x[\da-f]+|\d+);?|&(colon|Tab|NewLine);/gi, (match, number, name) => {
+    if (!number) return { colon: ':', tab: '\t', newline: '\n' }[name.toLowerCase()];
+    const code = number[0].toLowerCase() === 'x' ? parseInt(number.slice(1), 16) : Number(number);
+    return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '\ufffd';
+  });
+  return safeUrl(decoded) === '#' ? '#' : trustedAttr(value);
+}