@tonycodes-ui/mortar 0.11.0 → 0.13.0

package/src/application.tsx

@@ -13,6 +13,7 @@ import { AuthHeader, ProviderButtons, type SignInProvider } from "./auth.js";
 import { ArrowDown, ArrowUp, Check, SortArrows } from "./icons.js";
 import { headingTag, type HeadingLevel } from "./heading.js";
 import {
+  Flyout,
   LinkContent,
   NavGroups,
   NavTreeLinks,
@@ -21,7 +22,9 @@ import {
   cx,
   componentRoot,
   classedIntroSlots,
+  sectionTone,
   useDomId,
+  type FlyoutItem,
 } from "./internal.js";
 /**
  * A navigation link; `icon` replaces the default marker in the sidebar. With
@@ -189,11 +192,16 @@ export interface StackedShellProps {
   brand: string;
   logo?: ReactNode;
   homeHref?: string;
-  navigation: LinkItem[];
+  /** Top-level links, or labelled groups that open a dropdown panel. */
+  navigation: NavbarItem[];
   actions?: ReactNode;
   /** Page heading shown above the content, e.g. a PageHeading. */
   header?: ReactNode;
   width?: "md" | "lg" | "xl" | "full";
+  /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+  tone?: NavbarTone;
+  /** A second row of page tabs under the bar, rendered as a TabNav named by `label`. */
+  tabs?: ItemGroup<TabNavItem>;
   children: ReactNode;
   className?: string;
 }
@@ -206,6 +214,8 @@ export function StackedShell({
   actions,
   header,
   width = "lg",
+  tone,
+  tabs,
   children,
   className,
 }: StackedShellProps) {
@@ -224,7 +234,13 @@ export function StackedShell({
         homeHref={homeHref}
         items={navigation}
         actions={actions}
+        tone={tone}
       />
+      {tabs && (
+        <div className="m-stacked-tabs">
+          <TabNav label={tabs.label} items={tabs.items} />
+        </div>
+      )}
       <main id={contentId} tabIndex={-1} data-width={width}>
         {header && <div className="m-stacked-header">{header}</div>}
         {children}
@@ -232,13 +248,20 @@ export function StackedShell({
     </div>
   );
 }
+/** A labelled group of links that opens a dropdown panel from the bar. */
+export type NavbarGroup = ItemGroup<FlyoutItem>;
+/** A top-level link, or a group; a group holding the current page is marked current. */
+export type NavbarItem = LinkItem | NavbarGroup;
+export type NavbarTone = "default" | "inverse" | "accent";
 export interface NavbarProps {
   brand: string;
   logo?: ReactNode;
   homeHref?: string;
-  /** Top-level links; the navbar has no sub-menus. */
-  items: LinkItem[];
+  /** Top-level links, or labelled groups that open a dropdown panel. */
+  items: NavbarItem[];
   actions?: ReactNode;
+  /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+  tone?: NavbarTone;
   /** Accessible name of the navigation landmark. */
   label?: string;
   className?: string;
@@ -250,13 +273,19 @@ export function Navbar({
   homeHref = "/",
   items,
   actions,
+  tone,
   label = "Primary",
   className,
 }: NavbarProps) {
   const [open, setOpen] = useState(false);
   const id = useId();
+  const close = () => setOpen(false);
   return (
-    <header {...componentRoot("Navbar")} className={cx("m-navbar", className)}>
+    <header
+      {...componentRoot("Navbar")}
+      className={cx("m-navbar", className)}
+      data-tone={sectionTone(tone)}
+    >
       <KitLink className="m-brand" href={homeHref}>
         <BrandMark logo={logo} />
         {brand}
@@ -271,21 +300,30 @@ export function Navbar({
         Menu
       </Button>
       <nav id={id} aria-label={label} data-open={open || undefined}>
-        {items.map((item, index) => (
-          <KitLink
-            key={`${item.label}:${item.href}:${index}`}
-            href={item.href}
-            aria-current={item.current ? "page" : undefined}
-            onClick={() => setOpen(false)}
-          >
-            <LinkContent
-              prefix="nav"
-              icon={item.icon}
+        {items.map((item, index) =>
+          "items" in item ? (
+            <Flyout
+              key={`${item.label}:group:${index}`}
               label={item.label}
-              count={item.count}
+              items={item.items}
+              onNavigate={close}
             />
-          </KitLink>
-        ))}
+          ) : (
+            <KitLink
+              key={`${item.label}:${item.href}:${index}`}
+              href={item.href}
+              aria-current={item.current ? "page" : undefined}
+              onClick={close}
+            >
+              <LinkContent
+                prefix="nav"
+                icon={item.icon}
+                label={item.label}
+                count={item.count}
+              />
+            </KitLink>
+          ),
+        )}
       </nav>
       {actions && <div className="m-actions">{actions}</div>}
     </header>
@@ -689,6 +727,28 @@ export interface DataTableColumn<T> {
   width?: string;
   /** Clip long values to one line with an ellipsis. */
   truncate?: boolean;
+  /**
+   * How long the column stays as the table narrows (its own width, not the
+   * screen's): `medium` hides below 480px, `low` below 768px. The first
+   * column always shows. Hidden columns leave the accessibility tree too, so
+   * keep what people need in visible columns or on the detail page.
+   */
+  priority?: "high" | "medium" | "low";
+  /**
+   * `end` pins the column to the trailing edge while the table scrolls
+   * sideways, so a row-actions or status column stays reachable.
+   */
+  pin?: "end";
+}
+/** Responsive attributes shared by a column's `col`, header and cells. */
+function columnLayout<T>(col: DataTableColumn<T>, index: number) {
+  return {
+    "data-priority":
+      index > 0 && col.priority && col.priority !== "high"
+        ? col.priority
+        : undefined,
+    "data-pin": col.pin,
+  };
 }
 export interface DataTableProps<T extends { id: string }> {
   caption: string;
@@ -894,6 +954,7 @@ export function DataTable<T extends { id: string }>({
             <th
               scope="row"
               key={col.key}
+              {...columnLayout(col, index)}
               data-align={columnAlign(col.align)}
               data-truncate={col.truncate || undefined}
             >
@@ -908,6 +969,7 @@ export function DataTable<T extends { id: string }>({
           ) : (
             <td
               key={col.key}
+              {...columnLayout(col, index)}
               data-align={columnAlign(col.align)}
               data-truncate={col.truncate || undefined}
             >
@@ -926,6 +988,11 @@ export function DataTable<T extends { id: string }>({
       aria-label={caption}
       data-density={density === "default" ? undefined : density}
       data-striped={striped || undefined}
+      data-prioritised={
+        columns.some((col, index) => columnLayout(col, index)["data-priority"])
+          ? true
+          : undefined
+      }
     >
       {(toolbar || selectedIds.length > 0) && (
         <div className="m-table-toolbar">
@@ -977,9 +1044,10 @@ export function DataTable<T extends { id: string }>({
             {columns.some((col) => col.width) && (
               <colgroup>
                 {onSelectionChange && <col className="m-table-select-col" />}
-                {columns.map((col) => (
+                {columns.map((col, index) => (
                   <col
                     key={col.key}
+                    {...columnLayout(col, index)}
                     style={col.width ? { width: col.width } : undefined}
                   />
                 ))}
@@ -996,13 +1064,14 @@ export function DataTable<T extends { id: string }>({
                     />
                   </th>
                 )}
-                {columns.map((col) => {
+                {columns.map((col, index) => {
                   const direction =
                     sort?.key === col.key ? sort.direction : undefined;
                   return (
                     <th
                       key={col.key}
                       scope="col"
+                      {...columnLayout(col, index)}
                       data-align={columnAlign(col.align)}
                       aria-sort={col.sortable ? direction || "none" : undefined}
                     >

package/src/data.css

@@ -9,6 +9,7 @@
   /* One table base for DataTable, Table, PlanComparison and prose tables. Each sets
      its cell padding; DataTable and Table follow density through --m-row-pad. */
   .m-data-table {
+    container: m-data-table / inline-size;
     overflow: hidden;
     min-width: 0;
     --m-cell-pad-y: var(--m-row-pad);
@@ -255,9 +256,64 @@
   .m-data-table[data-density="compact"] .m-table-group th {
     padding-block: 4px;
   }
+  /* Pinned columns stay at the trailing edge while the table scrolls. Sticky
+     cells need an opaque background: the surface, or the row's own state.
+     Zero-specificity base, so stripes (after it) and hover and selection win. */
+  :where(.m-data-table) [data-pin="end"] {
+    position: sticky;
+    inset-inline-end: 0;
+    z-index: 2;
+    background-color: var(--m-surface);
+    box-shadow: inset 1px 0 0 var(--m-line);
+  }
+  :where(.m-data-table:dir(rtl)) [data-pin="end"] {
+    box-shadow: inset -1px 0 0 var(--m-line);
+  }
+  :where(
+      .m-data-table[data-striped]
+        tbody
+        tr:nth-child(even of :not(.m-table-group))
+    )
+    > [data-pin] {
+    background-color: var(--m-sunken);
+  }
+  .m-data-table thead th[data-pin] {
+    background-color: var(--m-paper);
+  }
+  .m-table-scroll[data-sticky] thead th[data-pin] {
+    z-index: 3;
+  }
+  /* (0,2,1): above the pinned stripe, below forced-colours selection (0,3,0).
+     :where(.m-data-table) does that for a selected cell. Hover also zeroes
+     [data-linked]; :hover alone would stay at (0,3,1) and keep HighlightText
+     on the author's background. */
+  :where(.m-data-table) tr:where([data-linked]):hover > [data-pin] {
+    background-color: var(--m-sunken);
+  }
+  :where(.m-data-table) tr[data-selected] > [data-pin] {
+    background-color: var(--m-selected);
+  }
+  /* Column priority follows the table's own width, so a table in a narrow
+     panel collapses as it would on a phone. */
+  @container m-data-table (max-width: 767px) {
+    .m-data-table [data-priority="low"] {
+      display: none;
+    }
+  }
+  @container m-data-table (max-width: 479px) {
+    .m-data-table [data-priority="medium"] {
+      display: none;
+    }
+  }
+  /* A table with column priorities is meant to fit, so truncated columns keep
+     shrinking on narrow screens, down to a readable floor. */
+  .m-data-table[data-prioritised] [data-truncate] .m-truncate {
+    min-width: 5rem;
+  }
   @media (max-width: 640px) {
-    /* Narrow screens scroll the table instead of collapsing truncated columns. */
-    .m-data-table [data-truncate] {
+    /* Narrow screens scroll the table instead of collapsing truncated columns,
+       unless it has column priorities (above). */
+    .m-data-table:not([data-prioritised]) [data-truncate] {
       max-width: none;
     }
     .m-truncate {

package/src/foundation.css

@@ -1128,9 +1128,13 @@
   }
 
   /* == SegmentedControl == */
+  /* Never wider than its container: long or many options scroll inside the
+     control, which keeps the selected option in view (inspection.tsx). */
   .m-segmented {
     display: inline-flex;
     width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
     background: var(--m-sunken);
     padding: 3px;
     gap: 2px;
@@ -1146,6 +1150,12 @@
     padding: 5px 10px;
     cursor: pointer;
     min-height: max(28px, var(--m-touch-target));
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  /* Inside the 3px padding, so the scroll container doesn't clip the ring. */
+  .m-segmented button:focus-visible {
+    outline-offset: 1px;
   }
   .m-segmented [aria-pressed="true"] {
     background: var(--m-surface);

package/src/illustration.tsx

@@ -0,0 +1,169 @@
+import { useRef, type CSSProperties } from "react";
+import { componentRoot, cx, useDomId, usePlayback } from "./internal.js";
+
+/** A point in the drawing, in the illustration's viewBox units. */
+export interface NetworkNode {
+  id: string;
+  x: number;
+  y: number;
+  /** Short text drawn under the node. */
+  label?: string;
+  /** accent: the brand's accent fill, to pick out a node. */
+  tone?: "default" | "accent";
+}
+/** A straight connection between two node ids. */
+export interface NetworkConnection {
+  from: string;
+  to: string;
+  /** Whether a signal travels from `from` to `to`. Default true. */
+  signal?: boolean;
+  /** Seconds for this signal to cross; defaults to the illustration's duration. */
+  duration?: number;
+  /** Seconds before this signal starts; defaults to an even stagger. */
+  delay?: number;
+}
+
+const NODE_RADIUS = 8;
+const SIGNAL_RADIUS = 4;
+
+/**
+ * A lightweight network drawing: nodes and connections supplied as data, with
+ * optional signals travelling along the connections. Decorative unless it has
+ * a label. The animation is illustrative: it never represents live activity.
+ */
+export function NetworkIllustration({
+  nodes,
+  connections,
+  width = 480,
+  height = 320,
+  label,
+  description,
+  motion = "auto",
+  duration = 3,
+  paused,
+  onPausedChange,
+  id,
+  className,
+}: {
+  nodes: NetworkNode[];
+  connections: NetworkConnection[];
+  /** Width of the viewBox; the drawing scales to its container. */
+  width?: number;
+  /** Height of the viewBox. */
+  height?: number;
+  /** Makes the drawing informative: an image with this accessible name. Omitted, it is decorative and hidden from assistive technology. */
+  label?: string;
+  /** With a label, a longer description of what the drawing shows. */
+  description?: string;
+  /** auto: signals travel where connections carry one, with a pause control. static: the same drawing without motion. */
+  motion?: "auto" | "static";
+  /** Seconds for a signal to cross a connection. */
+  duration?: number;
+  /** Whether the user has paused the animation; pass with onPausedChange to control it or share it between illustrations. */
+  paused?: boolean;
+  onPausedChange?: (paused: boolean) => void;
+  id?: string;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const titleId = useDomId("m-network-title");
+  const descId = useDomId("m-network-desc");
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const links = connections.flatMap((connection) => {
+    const from = byId.get(connection.from);
+    const to = byId.get(connection.to);
+    return from && to ? [{ ...connection, a: from, b: to }] : [];
+  });
+  const carriers = links.filter((link) => link.signal !== false);
+  const animated = motion === "auto" && carriers.length > 0;
+  const { reason, reduced, userPaused, toggle } = usePlayback(ref, {
+    paused,
+    onPausedChange,
+    enabled: animated,
+  });
+  const informative = Boolean(label);
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className={cx("m-network", className)}
+      {...componentRoot("NetworkIllustration")}
+      data-motion={motion === "static" ? "static" : undefined}
+      data-paused={animated ? (reason ?? undefined) : undefined}
+    >
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        {...(informative
+          ? {
+              role: "img",
+              "aria-labelledby": titleId,
+              "aria-describedby": description ? descId : undefined,
+            }
+          : { "aria-hidden": true, focusable: false })}
+      >
+        {informative && <title id={titleId}>{label}</title>}
+        {informative && description && <desc id={descId}>{description}</desc>}
+        {links.map((link, index) => (
+          <line
+            key={`${link.from}:${link.to}:${index}`}
+            className="m-network-link"
+            x1={link.a.x}
+            y1={link.a.y}
+            x2={link.b.x}
+            y2={link.b.y}
+          />
+        ))}
+        {animated &&
+          !reduced &&
+          carriers.map((link, index) => {
+            const time = link.duration ?? duration;
+            const delay = link.delay ?? -((index * time) / carriers.length);
+            return (
+              <circle
+                key={`${link.from}:${link.to}:${index}`}
+                className="m-network-signal"
+                r={SIGNAL_RADIUS}
+                style={
+                  {
+                    "--m-signal-from": `${link.a.x}px ${link.a.y}px`,
+                    "--m-signal-to": `${link.b.x}px ${link.b.y}px`,
+                    animationDuration: `${time}s`,
+                    animationDelay: delay ? `${delay}s` : undefined,
+                  } as CSSProperties
+                }
+              />
+            );
+          })}
+        {nodes.map((node) => (
+          <circle
+            key={node.id}
+            className="m-network-node"
+            cx={node.x}
+            cy={node.y}
+            r={NODE_RADIUS}
+            data-tone={node.tone === "accent" ? "accent" : undefined}
+          />
+        ))}
+        {nodes.map(
+          (node) =>
+            node.label && (
+              <text
+                key={node.id}
+                className="m-network-label"
+                x={node.x}
+                y={node.y + NODE_RADIUS + 16}
+                textAnchor="middle"
+              >
+                {node.label}
+              </text>
+            ),
+        )}
+      </svg>
+      {animated && !reduced && (
+        <button type="button" className="m-network-toggle" onClick={toggle}>
+          {userPaused ? "Play animation" : "Pause animation"}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -66,6 +66,9 @@ export type {
   TabNavItem,
   StackedShellProps,
   NavbarProps,
+  NavbarItem,
+  NavbarGroup,
+  NavbarTone,
   BreadcrumbsProps,
   TabNavProps,
   ProgressStepsProps,
@@ -94,6 +97,7 @@ export type {
 } from "./auth.js";
 export {
   MarketingHeader,
+  MarketingPage,
   Hero,
   FeatureGrid,
   FeatureSection,
@@ -228,3 +232,5 @@ export type {
 export { CommentComposer } from "./composer.js";
 export type { LinkItem, ItemGroup } from "./navigation.js";
 export type { HeadingLevel } from "./heading.js";
+export { NetworkIllustration } from "./illustration.js";
+export type { NetworkNode, NetworkConnection } from "./illustration.js";

package/src/inspection.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef } from "react";
 import { KitLink } from "./navigation.js";
 import { componentRoot, cx, useComponentName } from "./internal.js";
 export function SegmentedControl({
@@ -14,8 +15,22 @@ export function SegmentedControl({
   className?: string;
 }) {
   const name = useComponentName("SegmentedControl");
+  const group = useRef<HTMLDivElement>(null);
+  // When the options scroll (narrow screens), keep the selected one in view,
+  // on mount and on change. Only the control scrolls, never the page.
+  useLayoutEffect(() => {
+    const root = group.current;
+    const selected = root?.querySelector<HTMLElement>('[aria-pressed="true"]');
+    if (!root || !selected || root.scrollWidth <= root.clientWidth) return;
+    const outer = root.getBoundingClientRect();
+    const inner = selected.getBoundingClientRect();
+    if (inner.left < outer.left) root.scrollLeft -= outer.left - inner.left;
+    else if (inner.right > outer.right)
+      root.scrollLeft += inner.right - outer.right;
+  }, [value]);
   return (
     <div
+      ref={group}
       {...componentRoot(name)}
       className={cx("m-segmented", className)}
       role="group"