@tonycodes-ui/mortar 0.12.0 → 0.13.0

package/src/application.css

@@ -264,6 +264,20 @@
   .m-stacked-shell > main:focus {
     outline: none;
   }
+  /* A second row of page tabs under the bar; the row draws the full-width rule. */
+  .m-stacked-tabs {
+    padding: 0 24px;
+    border-bottom: 1px solid var(--m-line);
+    background: var(--m-surface);
+  }
+  .m-stacked-tabs .m-tab-nav ul {
+    border-bottom: 0;
+  }
+  @media (max-width: 900px) {
+    .m-stacked-tabs {
+      padding: 0 16px;
+    }
+  }
 
   /* == Navbar == */
   .m-navbar {
@@ -274,6 +288,39 @@
     padding: 0 24px;
     border-bottom: 1px solid var(--m-line);
     background: var(--m-surface);
+    color: var(--m-ink);
+  }
+  /* Accent bar: the brand's accent fill, remapped like the accent bands
+     (marketing.css): on-accent text, links and focus, inverted primary
+     actions and outlined secondary ones. --m-sunken uses --m-accent-wash, the
+     same direction as an accent button's hover, so a selected row or hover
+     moves the fill away from the on-accent text. A mix towards --m-on-accent
+     drops that text below 4.5:1. Panels open in a portal and keep the page's
+     colours. Inverse needs nothing here: [data-tone="inverse"] remaps every
+     token (tokens.css). */
+  .m-navbar[data-tone="accent"] {
+    background-color: var(--m-accent);
+    background-image: var(--m-accent-fill);
+    --m-ink: var(--m-on-accent);
+    --m-secondary: var(--m-on-accent);
+    --m-muted: var(--m-on-accent);
+    --m-link: var(--m-on-accent);
+    --m-focus: var(--m-on-accent);
+    --m-line: color-mix(in oklab, var(--m-on-accent) 35%, transparent);
+    --m-line-strong: var(--m-on-accent);
+    --m-primary: var(--m-on-accent);
+    --m-primary-hover: var(--m-on-accent);
+    --m-primary-active: var(--m-on-accent);
+    --m-on-primary: var(--m-accent);
+    --m-surface: transparent;
+    --m-sunken: color-mix(
+      in oklab,
+      var(--m-accent-wash, transparent) 14%,
+      transparent
+    );
+  }
+  .m-navbar[data-tone="accent"] .m-button-primary:hover {
+    box-shadow: inset 0 0 0 2px var(--m-accent);
   }
   .m-navbar > .m-brand {
     display: inline-flex;
@@ -316,6 +363,27 @@
     font-weight: var(--m-weight-semibold);
     box-shadow: inset 0 -2px 0 var(--m-primary);
   }
+  /* A group's trigger looks like the links beside it; its panel is the
+     shared flyout (marketing.css). */
+  .m-navbar > nav > .m-flyout {
+    display: flex;
+  }
+  .m-navbar .m-flyout-trigger {
+    padding: 0 10px;
+    color: var(--m-secondary);
+    font-size: var(--m-font-size);
+    font-weight: var(--m-weight-medium);
+    box-shadow: inset 0 -2px 0 transparent;
+  }
+  .m-navbar .m-flyout-trigger:hover {
+    color: var(--m-ink);
+    box-shadow: inset 0 -2px 0 var(--m-line-strong);
+  }
+  .m-navbar .m-flyout[data-current] > .m-flyout-trigger {
+    color: var(--m-ink);
+    font-weight: var(--m-weight-semibold);
+    box-shadow: inset 0 -2px 0 var(--m-primary);
+  }
   @media (max-width: 900px) {
     .m-navbar {
       flex-wrap: wrap;
@@ -362,6 +430,25 @@
       box-shadow: inset 3px 0 0 var(--m-primary);
       background: var(--m-sunken);
     }
+    .m-navbar > nav > .m-flyout {
+      display: block;
+    }
+    .m-navbar .m-flyout-trigger {
+      width: 100%;
+      min-height: 44px;
+      justify-content: space-between;
+      padding: 0 12px;
+      border-radius: var(--m-radius);
+      box-shadow: none;
+    }
+    .m-navbar .m-flyout-trigger:hover {
+      box-shadow: none;
+      background: var(--m-sunken);
+    }
+    .m-navbar .m-flyout[data-current] > .m-flyout-trigger {
+      box-shadow: inset 3px 0 0 var(--m-primary);
+      background: var(--m-sunken);
+    }
   }
 
   /* == Breadcrumbs == */
@@ -549,14 +636,21 @@
     --m-tone: var(--m-secondary);
   }
   @media (max-width: 560px) {
+    /* Two metrics a row, but a value too wide for half a row takes a row of
+       its own instead of being clipped; a value wider than the whole row
+       wraps. */
     .m-metrics {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      display: flex;
+      flex-wrap: wrap;
     }
     .m-metrics > div {
+      flex: 1 1 40%;
+      max-width: 100%;
       border-bottom: 1px solid var(--m-line);
     }
     .m-metrics dd {
       font-size: 24px;
+      overflow-wrap: break-word;
     }
   }
 

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/index.ts

@@ -66,6 +66,9 @@ export type {
   TabNavItem,
   StackedShellProps,
   NavbarProps,
+  NavbarItem,
+  NavbarGroup,
+  NavbarTone,
   BreadcrumbsProps,
   TabNavProps,
   ProgressStepsProps,

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"

package/src/internal.tsx

@@ -14,8 +14,17 @@ import {
   cloneElement,
   isValidElement,
 } from "react";
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
-import { KitLink, type ItemGroup } from "./navigation.js";
+import {
+  CloseButton,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+} from "@headlessui/react";
+import { KitLink, type ItemGroup, type LinkItem } from "./navigation.js";
+import { ChevronDown } from "./icons.js";
 import { ActionLink, Button, type LinkAction } from "./primitives.js";
 import { headingTag, type HeadingLevel } from "./heading.js";
 
@@ -698,3 +707,85 @@ export function focusAfterRemoval(element: HTMLElement) {
     }
   });
 }
+
+/** An item in a flyout panel; `current` marks the page you are on. */
+export type FlyoutItem = Pick<
+  LinkItem,
+  "label" | "href" | "description" | "icon" | "current"
+>;
+/**
+ * A labelled group of links in a header that opens an anchored panel
+ * (MarketingHeader and Navbar). The group is marked current when one of its
+ * items is the current page.
+ */
+export function Flyout({
+  label,
+  items,
+  footer = [],
+  layout = "list",
+  onNavigate,
+}: {
+  label: string;
+  items: FlyoutItem[];
+  footer?: LinkAction[];
+  layout?: "list" | "columns" | "full";
+  onNavigate: () => void;
+}) {
+  const dataLayout = layout === "list" ? undefined : layout;
+  const current = items.some((item) => item.current);
+  return (
+    <Popover
+      className="m-flyout"
+      data-current={current || undefined}
+      data-layout={dataLayout}
+    >
+      <PopoverButton className="m-flyout-trigger">
+        {label}
+        <ChevronDown />
+      </PopoverButton>
+      {/* Anchored panels render in a portal, so headers inside clipped containers never cut them off. */}
+      <PopoverPanel
+        anchor="bottom"
+        className="m-flyout-panel"
+        data-layout={dataLayout}
+      >
+        <ul>
+          {items.map((item, index) => (
+            <li key={`${item.label}:${item.href}:${index}`}>
+              <CloseButton
+                as={KitLink}
+                href={item.href}
+                aria-current={item.current ? "page" : undefined}
+                onClick={onNavigate}
+              >
+                {item.icon && (
+                  <span className="m-flyout-icon" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                )}
+                <span className="m-flyout-text">
+                  <strong>{item.label}</strong>
+                  {item.description && <span>{item.description}</span>}
+                </span>
+              </CloseButton>
+            </li>
+          ))}
+        </ul>
+        {footer.length > 0 && (
+          <div className="m-flyout-footer">
+            {footer.map((link, index) => (
+              <CloseButton
+                as={KitLink}
+                key={`${link.label}:${link.href}:${index}`}
+                href={link.href}
+                onClick={onNavigate}
+              >
+                {link.label}
+              </CloseButton>
+            ))}
+          </div>
+        )}
+      </PopoverPanel>
+    </Popover>
+  );
+}