@apliteni/apliteni-ui 0.37.0 → 0.38.0

package/README.md

@@ -105,6 +105,10 @@ import { tokensCss, topbarCss, cssText } from '@apliteni/apliteni-ui/inline';
 // …inline tokensCss + topbarCss into the <style> you serve.
 ```
 
+`cssText` includes every sheet. When selecting individual sheets from `styles`,
+`successPanel()` needs both `styles.callout` (panel layout) and `styles.success`
+(shared glowing check and reduced-motion styles), after `tokensCss` and `baseCss`.
+
 ## React components (stateful surfaces)
 
 `DataTable`, `Pagination`, `Modal`, `Button`, `Badge`, `Card` and `Icon` — same `.ui-*` classes,

package/package.json

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

package/react/dist/index.d.ts

@@ -162,6 +162,12 @@ type PagerProps = {
 type DataTableProps<T> = {
     columns: Column<T>[];
     rows: T[];
+    dense?: boolean;
+    density?: 'default' | 'dense' | 'compact';
+    stickyHeader?: boolean;
+    pinnedIdentity?: boolean;
+    scrollLabel?: string;
+    empty?: ReactNode;
     pageSize?: number;
     pageSizes?: readonly number[] | null;
     onPageSizeChange?: (size: number) => void;
@@ -185,7 +191,7 @@ type DataTableProps<T> = {
 declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
 declare function DataTable<T extends {
     name: string;
-}>({ columns, rows, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
+}>({ columns, rows, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
 
 type PaginationProps = {
     page?: number;
@@ -363,7 +369,63 @@ type BackLinkProps<T extends ElementType = 'a'> = BackLinkOwnProps & {
  */
 declare function BackLink<T extends ElementType = 'a'>({ href, label, as, className, ...rest }: BackLinkProps<T>): react.JSX.Element | null;
 
+type NumericValueProps = {
+    value?: string | number | null;
+    unit?: string;
+    missing?: string;
+};
+type DeltaValueProps = {
+    value?: string | null;
+    tone?: 'success' | 'danger' | 'neutral';
+    basisId?: string;
+    missing?: string;
+};
+declare function NumericValue(props: NumericValueProps): react.JSX.Element;
+declare function DeltaValue(props: DeltaValueProps): react.JSX.Element;
+type RowIdentityProps = {
+    symbol: string;
+    name: string;
+    logo?: string;
+    href?: string;
+};
+declare function RowIdentity({ symbol, name, logo, href }: RowIdentityProps): react.JSX.Element;
+
+type SegmentOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SegmentedProps = {
+    options: SegmentOption[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    appearance?: 'pill' | 'underline';
+    disabled?: boolean;
+};
+declare function Segmented({ options, value, onChange, label, appearance, disabled }: SegmentedProps): react.JSX.Element;
+
+type Filter = {
+    id: string;
+    label: string;
+    value: string;
+    items: DropdownEntry[];
+    disabled?: boolean;
+    open?: boolean;
+};
+type FilterBarProps = {
+    filters: Filter[];
+    label?: string;
+    clearLabel?: string;
+    disabled?: boolean;
+    busy?: boolean;
+    onRemove: (id: string) => void;
+    onClear: () => void;
+    onChange: (id: string, value: string | undefined) => void;
+};
+declare function FilterBar(props: FilterBarProps): 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, Denied, type DeniedProps, Drawer, type DrawerProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, Icon, Modal, type ModalProps, PAGE_SIZES, Pagination, type PaginationProps, 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, 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 };

package/react/dist/index.js

@@ -842,6 +842,12 @@ function sortTableRows(rows, sort) {
 function DataTable({
   columns,
   rows,
+  dense = false,
+  density,
+  stickyHeader = false,
+  pinnedIdentity = false,
+  scrollLabel = "Table",
+  empty = "No rows",
   pageSize,
   pageSizes = null,
   onPageSizeChange,
@@ -896,54 +902,66 @@ function DataTable({
   const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsxs8(
-      "table",
+    /* @__PURE__ */ jsx10(
+      "div",
       {
-        className: "ui-table ui-table--hover ui-table--zebra",
-        "aria-busy": loading || void 0,
-        children: [
-          /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx10("th", { scope: "col", children: /* @__PURE__ */ jsx10(
-              "input",
-              {
-                type: "checkbox",
-                checked: pageAllOn,
-                "aria-label": "Select all rows on this page",
-                onChange: () => onTogglePage(slice.map((r) => r.name))
-              }
-            ) }) : null,
-            columns.map((c) => (
-              // The sort control is a real <button> inside the header cell. It used to be
-              // role="button" ON the <th>, which threw away the columnheader role and put
-              // aria-sort on a role that forbids it.
-              /* @__PURE__ */ jsx10(
-                "th",
-                {
-                  scope: "col",
-                  className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
-                  "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                  children: c.sortable ? /* @__PURE__ */ jsxs8("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                    c.label,
-                    /* @__PURE__ */ jsx10("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
-                  ] }) : c.label
-                },
-                c.key
-              )
-            ))
-          ] }) }),
-          /* @__PURE__ */ jsx10("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs8("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx10("td", { children: /* @__PURE__ */ jsx10(
-              "input",
-              {
-                type: "checkbox",
-                checked: selected.has(r.name),
-                "aria-label": `Select ${r.name}`,
-                onChange: () => onToggle(r.name)
-              }
-            ) }) : null,
-            columns.map((c) => /* @__PURE__ */ jsx10("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
-          ] }, r.name)) })
-        ]
+        className: stickyHeader || pinnedIdentity ? "ui-table-scroll" : void 0,
+        role: stickyHeader || pinnedIdentity ? "region" : void 0,
+        "aria-label": stickyHeader || pinnedIdentity ? scrollLabel : void 0,
+        tabIndex: stickyHeader || pinnedIdentity ? 0 : void 0,
+        children: /* @__PURE__ */ jsxs8(
+          "table",
+          {
+            className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
+            "aria-busy": loading || void 0,
+            children: [
+              /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
+                selectable ? /* @__PURE__ */ jsx10("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx10(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: pageAllOn,
+                    "aria-label": "Select all rows on this page",
+                    onChange: () => onTogglePage(slice.map((r) => r.name))
+                  }
+                ) }) : null,
+                columns.map((c, columnIndex) => (
+                  // The sort control is a real <button> inside the header cell. It used to be
+                  // role="button" ON the <th>, which threw away the columnheader role and put
+                  // aria-sort on a role that forbids it.
+                  /* @__PURE__ */ jsx10(
+                    "th",
+                    {
+                      scope: "col",
+                      className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
+                      "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
+                      children: c.sortable ? /* @__PURE__ */ jsxs8("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                        c.label,
+                        /* @__PURE__ */ jsx10("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
+                      ] }) : c.label
+                    },
+                    c.key
+                  )
+                ))
+              ] }) }),
+              /* @__PURE__ */ jsxs8("tbody", { children: [
+                !slice.length && /* @__PURE__ */ jsx10("tr", { children: /* @__PURE__ */ jsx10("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+                slice.map((r) => /* @__PURE__ */ jsxs8("tr", { children: [
+                  selectable ? /* @__PURE__ */ jsx10("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx10(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: selected.has(r.name),
+                      "aria-label": `Select ${r.name}`,
+                      onChange: () => onToggle(r.name)
+                    }
+                  ) }) : null,
+                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx10("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+                ] }, r.name))
+              ] })
+            ]
+          }
+        )
       }
     ),
     pager ? /* @__PURE__ */ jsx10(
@@ -1470,6 +1488,96 @@ function BackLink({
   );
 }
 
+// src/TableValues.tsx
+import { numericValue, deltaValue } from "@apliteni/apliteni-ui";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function NumericValue(props) {
+  return /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
+}
+function DeltaValue(props) {
+  return /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
+}
+function RowIdentity({ symbol, name, logo, href }) {
+  const Tag = href ? "a" : "span";
+  return /* @__PURE__ */ jsxs12(Tag, { className: "ui-identity", href, children: [
+    /* @__PURE__ */ jsxs12("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx14("span", { children: symbol.slice(0, 1) }),
+      logo && /* @__PURE__ */ jsx14("img", { src: logo, alt: "", onLoad: (e) => {
+        e.currentTarget.hidden = false;
+      }, onError: (e) => {
+        e.currentTarget.hidden = true;
+      } })
+    ] }),
+    /* @__PURE__ */ jsx14("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx14("span", { className: "ui-identity__name", children: name })
+  ] });
+}
+
+// src/Segmented.tsx
+import { segmentedNextIndex } from "@apliteni/apliteni-ui";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
+  const enabled = options.filter((o) => !o.disabled);
+  const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
+  return /* @__PURE__ */ jsx15("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx15(
+    "button",
+    {
+      type: "button",
+      "data-value": option.value,
+      disabled: disabled || option.disabled,
+      className: value === option.value ? "is-active" : void 0,
+      "aria-pressed": value === option.value,
+      tabIndex: option.value === tabValue ? 0 : -1,
+      onClick: () => onChange(option.value),
+      onKeyDown: (e) => {
+        const next = segmentedNextIndex(e.key, enabled.indexOf(option), enabled.length);
+        if (next == null) return;
+        e.preventDefault();
+        const buttons = [...e.currentTarget.parentElement.querySelectorAll("button:not(:disabled)")];
+        buttons[next]?.focus();
+        onChange(enabled[next].value);
+      },
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+// src/FilterBar.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef7 } from "react";
+import { filterBar, initFilterBar } from "@apliteni/apliteni-ui";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function FilterBar(props) {
+  const host = useRef7(null);
+  const latest = useRef7(props);
+  latest.current = props;
+  const controller = useRef7(null);
+  const initial = useRef7({ __html: filterBar(props) });
+  useLayoutEffect2(() => {
+    const el = host.current;
+    controller.current = initFilterBar(el, latest.current);
+    const remove = (e) => latest.current.onRemove(e.detail.id);
+    const clear = () => latest.current.onClear();
+    const change = (e) => {
+      const { id, value } = e.detail;
+      latest.current.onChange(id, value);
+    };
+    el.addEventListener("ui-filter-remove", remove);
+    el.addEventListener("ui-filter-clear", clear);
+    el.addEventListener("ui-filter-change", change);
+    return () => {
+      controller.current?.destroy();
+      el.removeEventListener("ui-filter-remove", remove);
+      el.removeEventListener("ui-filter-clear", clear);
+      el.removeEventListener("ui-filter-change", change);
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    controller.current?.update(props);
+  }, [props.filters, props.label, props.clearLabel, props.disabled, props.busy]);
+  return /* @__PURE__ */ jsx16("div", { ref: host, dangerouslySetInnerHTML: initial.current });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1482,13 +1590,18 @@ export {
   CommandPalette,
   DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
+  DeltaValue,
   Denied,
   Drawer,
   Dropdown,
+  FilterBar,
   Icon,
   Modal,
+  NumericValue,
   PAGE_SIZES,
   Pagination,
+  RowIdentity,
+  Segmented,
   Skeleton,
   SkeletonTable,
   StatBand,

package/src/components/filter-bar.js

@@ -0,0 +1,56 @@
+import { button, esc } from './index.js';
+import { dropdown, wireDropdown } from './dropdown.js';
+
+export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all filters', disabled = false, busy = false } = {}) {
+  return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
+    + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
+    + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
+      + `<legend class="ui-filter-bar__legend">${esc(filter.label)}</legend>`
+      + dropdown({ label: filter.label, value: filter.value, items: filter.items || [], variant: 'select', ariaLabel: `${filter.label}: ${filter.value}`, open: !!filter.open && !disabled && !busy && !filter.disabled })
+      + `<button type="button" class="ui-filter-bar__remove" data-filter-remove aria-label="${esc(`Remove ${filter.label} filter`)}">×</button></fieldset>`).join('')
+    + `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost', disabled: !filters.length })}</span></fieldset>`;
+}
+
+// The host stays mounted; update() restores the action's focus after controlled removal.
+export function initFilterBar(host, options = {}) {
+  let current = options;
+  const focusKey = () => {
+    const active = host.ownerDocument.activeElement;
+    if (!host.contains(active)) return null;
+    const chip = active.closest('[data-filter-id]');
+    return { id: chip?.dataset.filterId, remove: active.hasAttribute('data-filter-remove'),
+      index: [...host.querySelectorAll('[data-filter-id]')].indexOf(chip) };
+  };
+  const wire = () => wireDropdown(host);
+  const update = next => {
+    const focus = focusKey();
+    current = next;
+    host.innerHTML = filterBar(next); wire();
+    if (!focus) return;
+    const chips = [...host.querySelectorAll('[data-filter-id]')].filter(c => !c.disabled);
+    const same = chips.find(c => c.dataset.filterId === focus.id);
+    const target = same || chips[Math.min(Math.max(focus.index, 0), chips.length - 1)];
+    const control = target?.querySelector(same && focus.remove ? '[data-filter-remove]' : '[data-dropdown-trigger]')
+      || host.querySelector('[data-filter-clear] button');
+    if (control && !control.disabled && !control.closest('fieldset:disabled')) control.focus();
+    else { const bar = host.querySelector('[data-filter-bar]'); bar.tabIndex = -1; bar.focus(); }
+  };
+  const emit = (type, detail) => host.dispatchEvent(new host.ownerDocument.defaultView.CustomEvent(type, { bubbles: true, detail }));
+  const click = e => {
+    if (e.target.closest('fieldset:disabled')) return;
+    const chip = e.target.closest('[data-filter-id]');
+    if (e.target.closest('[data-filter-remove]')) emit('ui-filter-remove', { id: chip.dataset.filterId });
+    else if (e.target.closest('[data-filter-clear] button')) emit('ui-filter-clear', {});
+    else if (e.target.closest('[data-dd-item]')) {
+      const item = e.target.closest('[data-dd-item]');
+      if (item.getAttribute('aria-disabled') !== 'true') {
+        const id = chip?.dataset.filterId, value = item.dataset.value;
+        // Dropdown completes its own close/focus before the consumer replaces the markup.
+        queueMicrotask(() => emit('ui-filter-change', { id, value }));
+      }
+    }
+  };
+  if (!host.querySelector('[data-filter-bar]')) host.innerHTML = filterBar(current);
+  host.addEventListener('click', click, true); wire();
+  return { update, destroy: () => host.removeEventListener('click', click, true) };
+}

package/src/components/index.js

@@ -2,10 +2,10 @@
 // viz/ server-render idiom so the portal can adopt them with no framework.
 import { icon } from '../assets/icons.js';
 import { illo } from '../assets/illustrations.js';
+import { successCheck } from './success.js';
 const HTML_ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
 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
@@ -80,16 +80,16 @@ export function card({ title, sub, body = '', variant, pad, icon: ic, level = 2
 // `ariaLabel` names the strip. `name` seeds data-seg and is deliberately
 // not an accessible name — it is an identifier, not prose, defaulting to
 // "Options" so a strip is never left unlabelled.
-export function segmented({ options = [], active = 0, size, block, name = 'seg', ariaLabel = 'Options' } = {}) {
-  const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
+export function segmented({ options = [], active = 0, size, block, name = 'seg', ariaLabel = 'Options', appearance, disabled = false } = {}) {
+  const cls = cx('ui-seg', appearance === 'underline' && 'ui-seg--underline', size && `ui-seg--${size}`, block && 'ui-seg--block');
   // Exactly one option holds the Tab stop. If `active` points nowhere (nothing
   // selected yet) the first option holds it, so the strip is never unreachable.
-  const rove = active >= 0 && active < options.length ? active : 0;
+  const rove = active >= 0 && active < options.length && !options[active]?.disabled ? active : options.findIndex(o => !o.disabled);
   const btns = options.map((o, i) => {
     const label = typeof o === 'string' ? o : o.label;
     const val = typeof o === 'string' ? o : (o.value ?? o.label);
     const on = i === active;
-    return `<button type="button" aria-pressed="${on}" tabindex="${i === rove ? '0' : '-1'}"`
+    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>`;
@@ -261,9 +261,9 @@ export function toast({
 // The kit also publishes success() from components/success.js, which is the same
 // idea at page size: layouts, a backdrop, follow-up buttons and an auto-redirect
 // countdown. Pick by how much of the screen the confirmation owns. The two share
-// no CSS, so changing one never moves the other.
+// the glowing check; their layout and content remain independent.
 export function successPanel({ title = 'Done', sub = '' } = {}) {
-  return `<div class="ui-success"><div class="ui-success__check">${icon('check')}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
+  return `<div class="ui-success"><div class="ui-success__check">${successCheck()}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
 }
 
 // ---- Empty state ---------------------------------------------------------

package/src/components/segmented.js

@@ -0,0 +1,40 @@
+export function segmentedNextIndex(key, index, length) {
+  if (!length) return null;
+  if (key === 'ArrowRight' || key === 'ArrowDown') return (index + 1) % length;
+  if (key === 'ArrowLeft' || key === 'ArrowUp') return (index - 1 + length) % length;
+  if (key === 'Home') return 0;
+  if (key === 'End') return length - 1;
+  return null;
+}
+
+export function initSegmented(root = document) {
+  const cleanups = [];
+  root.querySelectorAll('[data-seg]').forEach(group => {
+    if (group.__segWired) return;
+    group.__segWired = true;
+    const buttons = () => [...group.querySelectorAll('button')].filter(b => !b.disabled);
+    const pick = button => {
+      group.querySelectorAll('button').forEach(b => {
+        const active = b === button;
+        b.setAttribute('aria-pressed', String(active));
+        b.classList.toggle('is-active', active);
+        b.tabIndex = active ? 0 : -1;
+      });
+      group.dispatchEvent(new group.ownerDocument.defaultView.CustomEvent('ui-segment-change', {
+        bubbles: true, detail: { value: button.dataset.value },
+      }));
+    };
+    const click = e => { const b = e.target.closest('button'); if (buttons().includes(b)) pick(b); };
+    const keydown = e => {
+      const list = buttons();
+      const index = list.indexOf(e.target);
+      if (index < 0) return;
+      const next = segmentedNextIndex(e.key, index, list.length);
+      if (next == null) return;
+      e.preventDefault(); list[next].focus(); pick(list[next]);
+    };
+    group.addEventListener('click', click); group.addEventListener('keydown', keydown);
+    cleanups.push(() => { group.removeEventListener('click', click); group.removeEventListener('keydown', keydown); delete group.__segWired; });
+  });
+  return () => cleanups.forEach(fn => fn());
+}

package/src/components/success.js

@@ -60,8 +60,8 @@ function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
 // For a confirmation that stays inside the page the user is already on, the kit
 // publishes successPanel() from components/index.js — a check, a title and one
 // line of sub, and nothing to configure. Pick by how much of the screen the
-// confirmation owns. The two share no CSS (.ui-sx here, .ui-success there), so
-// changing one never moves the other.
+// confirmation owns. The two share the glowing check, while their layout
+// and content remain independent.
 export function success({
   layout = 'hero',          // 'hero' | 'split' | 'compact'
   level,                    // heading level of the title; see the note below

package/src/components/table-values.js

@@ -0,0 +1,32 @@
+import { esc } from './index.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>`;
+}
+
+export function deltaValue({ value, tone = 'neutral', basisId, missing = 'No earlier figure' } = {}) {
+  const present = value != null && value !== '';
+  const judged = present && ['success', 'danger'].includes(tone) && !/^[+−-]?0(?:[.,]0+)?%?$/.test(String(value).replace(/\s/g, ''));
+  return `<span class="ui-delta${judged ? ` ui-delta--${tone}` : ''}"${basisId ? ` aria-describedby="${esc(basisId)}"` : ''}>${esc(present ? value : missing)}</span>`;
+}
+
+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>`
+    + `<span class="ui-identity__symbol">${esc(symbol)}</span><span class="ui-identity__name">${esc(name)}</span></${tag}>`;
+}
+
+const initializedImages = new WeakSet();
+
+// Images keep their fallback underneath; no inline handlers in server-rendered markup.
+export function initRowIdentity(root = document) {
+  root.querySelectorAll('.ui-identity__logo img').forEach(img => {
+    if (img.complete && !img.naturalWidth) img.hidden = true;
+    if (initializedImages.has(img)) return;
+    initializedImages.add(img);
+    img.addEventListener('error', () => { img.hidden = true; });
+    img.addEventListener('load', () => { img.hidden = false; });
+  });
+}

package/src/index.css

@@ -32,6 +32,7 @@
 @import "./styles/confirm.css";
 @import "./styles/command-palette.css";
 @import "./styles/table.css";
+@import "./styles/filter-bar.css";
 @import "./styles/pagination.css";
 @import "./styles/stat.css";
 @import "./styles/empty.css";

package/src/index.js

@@ -21,3 +21,7 @@ export * from './components/stat.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';
+
+export * from './components/table-values.js';
+export * from './components/segmented.js';
+export * from './components/filter-bar.js';

package/src/inline.js

@@ -25,7 +25,7 @@ export const baseCss = read('styles/base.css');
 // Canonical topbar (same class names the portal already uses).
 export const topbarCss = read('styles/topbar.css');
 
-// Individual component stylesheets, addressable by name.
+// Individual sheets; successPanel() needs both styles.callout and styles.success.
 export const styles = {
   base: baseCss,
   reducedMotion: read('styles/reduced-motion.css'),
@@ -45,6 +45,7 @@ export const styles = {
   confirm: read('styles/confirm.css'),
   commandPalette: read('styles/command-palette.css'),
   table: read('styles/table.css'),
+  filterBar: read('styles/filter-bar.css'),
   pagination: read('styles/pagination.css'),
   stat: read('styles/stat.css'),
   empty: read('styles/empty.css'),
@@ -79,6 +80,7 @@ export const cssText = [
   styles.confirm,
   styles.commandPalette,
   styles.table,
+  styles.filterBar,
   styles.pagination,
   styles.stat,
   styles.empty,

package/src/styles/callout.css

@@ -181,14 +181,10 @@
   background: var(--glow-green); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
 }
 .ui-success__check {
+  --sx-green: var(--chip-success-ink);
   width: 48px; height: 48px;
-  border-radius: 50%;
-  background: var(--green);
-  color: var(--signal-contrast);
-  display: grid;
-  place-items: center;
   margin: 0 auto 14px;
 }
-.ui-success__check svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
+.ui-success__check .ui-sx__check { width: 100%; height: 100%; }
 .ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; }
 .ui-success__sub { color: var(--text); font-size: var(--text-base); }

package/src/styles/filter-bar.css

@@ -0,0 +1,10 @@
+.ui-filter-bar { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
+.ui-filter-bar__legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
+.ui-filter-bar__chip { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1); margin: 0; min-width: 0; }
+.ui-filter-bar__chip .ui-dropdown__trigger { border: 0; background: transparent; padding: var(--space-1) var(--space-2); }
+.ui-filter-bar__remove { border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; font-size: var(--text-lg); padding: 0; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); cursor: pointer; }
+.ui-filter-bar__remove:focus-visible,
+.ui-filter-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
+
+.ui-filter-bar .ui-dropdown__pre, .ui-filter-bar .ui-dropdown__value { color: inherit; }

package/src/styles/segmented.css

@@ -55,3 +55,10 @@
   box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch, var(--accent));
 }
 .ui-accent-picker button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+
+.ui-seg--underline { background: transparent; --ring-gap: inherit; border-radius: 0; border-bottom: 1px solid var(--border); padding: var(--space-1); overflow: auto; max-width: 100%; }
+.ui-seg--underline button { border-radius: var(--radius-xs); border-bottom: 2px solid transparent; padding: var(--space-3); white-space: nowrap; }
+.ui-seg--underline button.is-active,
+.ui-seg--underline button[aria-pressed="true"] { background: transparent; border-bottom-color: var(--accent); }
+.ui-seg button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }

package/src/styles/success.css

@@ -11,11 +11,13 @@
  *   the foot. Markup comes from success() in components/index (re-exported).
  * ========================================================================== */
 
-.ui-sx {
-  --sx-green: var(--green);
+.ui-sx, .ui-success__check {
   --sx-tint: color-mix(in srgb, var(--green) 18%, transparent);
   --sx-track: color-mix(in srgb, var(--green) 32%, transparent);
+}
 
+.ui-sx {
+  --sx-green: var(--green);
   position: relative;
   overflow: hidden;
   border-radius: 20px;

package/src/styles/table.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Table — .ui-table  (borderless-body, hairline rows, muted head)
+ * Table — .ui-table  (hairline rows, opaque base surface)
  * Row modifiers: .is-dead (revoked/struck), right-aligned .ui-table__act
  * ========================================================================== */
 
@@ -26,7 +26,7 @@
 }
 .ui-table tr:last-child td { border-bottom: 0; }
 .ui-table td.ui-table__title { color: var(--strong); font-weight: var(--weight-medium); width: 99%; white-space: normal; }
-.ui-table th:last-child,
+.ui-table th:last-child { padding-right: 0; }
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
 .ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
 .ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
@@ -50,7 +50,7 @@
 
 /* Data-table modifiers, composable: .ui-table--dense --zebra --hover.
  *   --dense  --space-3 across, --space-2 down — one step in from the base table
- *   --zebra  row striping; 2px header rule; the hover tint out-ranks the stripe
+ *   --zebra  legacy spacing and 2px header rule; the base-surface rule below removes stripes
  * Cell helpers: .ui-table__num (right, tabular), .ui-table__code.
  * why: docs/specification.md#spacing-and-rhythm
  * held by: stories/table-rhythm.test.js */
@@ -83,3 +83,45 @@
 
 /* The empty state (.ui-empty) — shown when a table/list has no rows — now
    lives in styles/empty.css as a standalone component (illustration support). */
+
+/* White in light, base canvas in dark; never a grey or tinted data surface. */
+.ui-table { background: var(--table-bg); --ring-gap: var(--table-bg); }
+.ui-table--zebra tbody tr:nth-child(even) td,
+.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
+.ui-table--zebra tbody tr:hover td,
+.ui-table--zebra.ui-table--hover tbody tr:hover td {
+  background: var(--table-bg); --ring-gap: var(--table-bg);
+}
+.ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
+.ui-table td.ui-table__num { text-align: right; }
+.ui-table--compact td { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); line-height: var(--leading-snug); height: 33px; }
+.ui-table--compact th { padding: var(--space-2) var(--space-3); }
+.ui-table-scroll { overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1); }
+.ui-table-scroll:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-table--sticky { border-collapse: separate; border-spacing: 0; }
+.ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--table-bg); --ring-gap: var(--table-bg); padding-top: var(--space-2); }
+.ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection { position: sticky; left: 0; z-index: var(--z-base); background: var(--table-bg); --ring-gap: var(--table-bg); border-right: 1px solid var(--border); }
+.ui-table--pinned thead .ui-table__identity, .ui-table--pinned thead .ui-table__selection { z-index: calc(var(--z-sticky) + 1); }
+.ui-value, .ui-delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.ui-value__unit { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text); }
+.ui-delta--success { color: var(--chip-success-ink); }
+.ui-delta--danger { color: var(--chip-danger-ink); }
+.ui-identity { min-height: 24px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; }
+.ui-identity__symbol { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
+.ui-identity__name { white-space: normal; max-width: var(--panel-sm); }
+.ui-identity__logo { width: 24px; height: 24px; flex: 0 0 24px; position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--text-xs); }
+.ui-identity__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.ui-identity__logo img[hidden] { display: none; /* motion: still — a failed resource is replaced without animating the error. */ }
+a.ui-identity:hover { text-decoration: underline; }
+.ui-identity:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+@media (max-width: 720px) {
+  .ui-table--pinned .ui-table__identity { width: 1%; }
+  .ui-table--pinned .ui-identity__logo { display: none; }
+  .ui-table--pinned .ui-identity__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .ui-table--pinned .ui-identity { max-width: var(--panel-sm); }
+}
+
+/* One width reserves the selection track and offsets the adjacent identity. */
+.ui-table--pinned { --ui-table-selection-width: var(--space-12); }
+.ui-table--pinned .ui-table__selection { box-sizing: border-box; width: var(--ui-table-selection-width); min-width: var(--ui-table-selection-width); max-width: var(--ui-table-selection-width); padding-inline: 0; text-align: center; }
+.ui-table--pinned .ui-table__selection + .ui-table__identity { left: var(--ui-table-selection-width); }

package/src/tokens/tokens.css

@@ -138,6 +138,7 @@
      below the floating step; the floating step itself adds --elev-drop under its inner
      line and nothing else in the kit does. why: docs/specification.md#elevation */
   --bg: #0e0d14;
+  --table-bg: var(--bg);
   --surface-2: #161520;     /* SUNKEN — fields, tracks, disabled, code */
   --surface: #211e2d;       /* the card */
   --bg-elevated: #2a2639;   /* FLOATING — menus, panels, drawer, modal, toasts */
@@ -284,6 +285,7 @@
      white a card already was, so light moves DOWN and keeps white for the top step.
      why: docs/specification.md#elevation */
   --bg: #eef0f5;
+  --table-bg: #ffffff;
   --surface-2: #e3e6ee;     /* SUNKEN — fields, tracks, disabled, code */
   --surface: #f8f9fc;       /* the card */
   --bg-elevated: #ffffff;   /* FLOATING — menus, panels, drawer, modal, toasts */
@@ -430,6 +432,9 @@
 .ui-snippet,
 .ui-snippet--reveal,
 .ui-sx,
+.ui-table,
+.ui-table--sticky thead th,
+.ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
 .ui-table--zebra tbody tr:nth-child(even) td,
 .ui-table--zebra tbody tr:hover td,