@apliteni/apliteni-ui 0.41.4 → 0.42.0

package/package.json

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

package/react/README.md

@@ -73,8 +73,7 @@ focus is already back on the opener and the dialog takes no clicks.
 A panel that slides in from an edge of the screen over a scrim. It renders the vanilla
 `drawer()` markup, class for class, so it looks and moves like the kit's drawer, and like
 `Pagination` its styles come from `@apliteni/apliteni-ui/css` rather than from this bundle.
-Group what goes inside it the way `drawerSection()` does — a heading over a `<dl>` of label
-and value rows — rather than in cards; the rules are on Guidelines / Drawers.
+Group its contents with `DrawerSection` and `KeyValueList`; see Guidelines / Drawers.
 
 ```tsx
 <Drawer open={open} title="Transaction" onClose={() => setOpen(false)}
@@ -292,3 +291,32 @@ Clearing the page-jump box, or typing into it and then pressing a step, does not
 page.
 
 `pageSize` defaults to `DEFAULT_PAGE_SIZE` (100). **Breaking:** it used to default to 4.
+
+## KeyValueList and DrawerSection
+
+KeyValueList displays one record’s facts with labels beside their values. Pass rows
+with a label and a React value. Set `columns={2}` to show two label-value pairs on
+each line. Null and undefined values are displayed as an em dash. Boolean values
+are displayed as `false` or `true`, zero remains visible, and strings are preserved.
+Set `redacted` on a row to display “Hidden” with an eye-off icon without rendering
+the value. Below 560px, each label appears above its value, and the layout
+changes to one column.
+
+DrawerSection groups content under a heading and adds a hairline between adjacent
+sections. Its `headingLevel` defaults to 3. Import both the kit CSS and the React
+CSS. Use a table for figures that readers need to compare down a column.
+
+```tsx
+import { DrawerSection, KeyValueList } from '@apliteni/apliteni-ui/react';
+import '@apliteni/apliteni-ui/css';
+import '@apliteni/apliteni-ui/react/css';
+
+<DrawerSection title="Transaction">
+  <KeyValueList rows={[
+    { label: 'Reference', value: <a href="/invoices/1001">INV-1001</a> },
+    { label: 'Amount', value: '€ 1,240.00' },
+    { label: 'Account', redacted: true },
+    { label: 'Note' },
+  ]} />
+</DrawerSection>
+```

package/react/dist/index.css

@@ -114,3 +114,31 @@
     transition: none;
   }
 }
+
+/* src/KeyValueList.css */
+.ui-drawer__rows.ui-kv {
+  grid-template-columns: calc(var(--space-6) * 5) minmax(0, 1fr);
+}
+.ui-drawer__rows.ui-kv--two-columns {
+  grid-template-columns: repeat(2, calc(var(--space-6) * 5) minmax(0, 1fr));
+}
+.ui-kv__hidden {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--text);
+}
+.ui-kv__hidden svg {
+  width: var(--space-4);
+  height: var(--space-4);
+  stroke-width: 2.25;
+}
+@media (max-width: 560px) {
+  .ui-drawer__rows.ui-kv {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--space-3);
+  }
+  .ui-kv > .ui-drawer__row {
+    display: block;
+  }
+}

package/react/dist/index.d.ts

@@ -425,7 +425,23 @@ type FilterBarProps = {
 };
 declare function FilterBar(props: FilterBarProps): react.JSX.Element;
 
+type KeyValueRow = {
+    label: string;
+    value?: ReactNode;
+    redacted?: boolean;
+};
+type KeyValueListProps = Omit<ComponentPropsWithoutRef<'dl'>, 'children'> & {
+    rows: readonly KeyValueRow[];
+    columns?: 1 | 2;
+};
+declare function KeyValueList({ rows, columns, className, ...rest }: KeyValueListProps): react.JSX.Element;
+type DrawerSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    title?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+declare function DrawerSection({ title, headingLevel, className, children, ...rest }: DrawerSectionProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };

package/react/dist/index.js

@@ -1685,6 +1685,30 @@ function FilterBar(props) {
   return /* @__PURE__ */ jsx16("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
+// src/KeyValueList.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function detail({ value, redacted }) {
+  if (redacted) return /* @__PURE__ */ jsxs13("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx17(Icon, { name: "eyeOff" }),
+    "Hidden"
+  ] });
+  if (value == null) return "\u2014";
+  return typeof value === "boolean" ? String(value) : value;
+}
+function KeyValueList({ rows, columns = 1, className, ...rest }) {
+  return /* @__PURE__ */ jsx17("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs13("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx17("dt", { children: row.label }),
+    /* @__PURE__ */ jsx17("dd", { children: detail(row) })
+  ] }, index)) });
+}
+function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs13("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx17(Heading, { className: "ui-drawer__section-title", children: title }),
+    children
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1700,9 +1724,11 @@ export {
   DeltaValue,
   Denied,
   Drawer,
+  DrawerSection,
   Dropdown,
   FilterBar,
   Icon,
+  KeyValueList,
   Modal,
   NumericValue,
   PAGE_SIZES,

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);
+}