@godxjp/ui 33.20.0 → 33.21.0

package/dist/components/layout/index.d.ts

@@ -55,5 +55,11 @@ export { AspectRatio } from "./aspect-ratio.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
 export { useAppShellNavigationMode } from "./app-shell.js";
+export { EditorialAuth, EditorialAuthCard, EditorialEmptyPanel, EditorialFootnote, EditorialMetaBar, EditorialStats, EditorialTextButton, EditorialToggleGroup, EditorialToolbar, HoldingCard, HoldingCardAction, HoldingGrid, SettingsLayout, SettingsPanel, ThemePicker, } from "./editorial-account.js";
+export type { EditorialAuthCardProp, EditorialAuthCardProps, EditorialAuthProp, EditorialAuthProps, EditorialEmptyPanelProp, EditorialEmptyPanelProps, EditorialFootnoteProp, EditorialFootnoteProps, EditorialMetaBarProp, EditorialMetaBarProps, EditorialStatsItemProp, EditorialStatsProp, EditorialStatsProps, EditorialTextButtonProp, EditorialTextButtonProps, EditorialToggleGroupItemProp, EditorialToggleGroupProp, EditorialToggleGroupProps, EditorialToolbarProp, EditorialToolbarProps, HoldingCardActionProp, HoldingCardProp, HoldingCardProps, HoldingGridProp, HoldingGridProps, HoldingViewProp, SettingsLayoutProp, SettingsLayoutProps, SettingsPanelProp, SettingsPanelProps, ThemePickerOptionProp, ThemePickerPreviewProp, ThemePickerProp, ThemePickerProps, } from "./editorial-account.js";
 export { Affix } from "./affix.js";
 export type { AffixProp, AffixProps, AffixTargetProp } from "./affix.js";
+export { CatalogDetail, CatalogDetailSection, CatalogDetailTag, EditorialFilterField, EditorialFilterPanel, EditorialPrompt, PriceSummary, } from "./editorial-catalog.js";
+export type { CatalogDetailProp, CatalogDetailProps, CatalogDetailSectionProp, CatalogDetailSectionProps, CatalogDetailTagProp, EditorialPromptProp, EditorialPromptProps, PriceSummaryProp, PriceSummaryProps, EditorialFilterFieldProp, EditorialFilterFieldProps, EditorialFilterPanelProp, EditorialFilterPanelProps, } from "./editorial-catalog.js";
+export { CardShowcase, CatalogCard, CatalogCardTag, EditorialArticle, EditorialArticleSection, EditorialBanner, EditorialBreadcrumb, EditorialCard, EditorialFilterBar, EditorialFooter, EditorialHero, EditorialMasthead, EditorialMastheadAction, EditorialMastheadLink, EditorialNote, EditorialPageHeader, EditorialPanel, EditorialPillNav, EditorialPillNavItem, EditorialSearch, EditorialSection, EditorialSectionHead, EditorialTextLink, Eyebrow, } from "./editorial.js";
+export type { CardShowcaseProp, CardShowcaseProps, CatalogCardProp, CatalogCardProps, CatalogCardTagProp, EditorialBannerProp, EditorialBannerProps, EditorialArticleProp, EditorialArticleProps, EditorialArticleSectionProp, EditorialNoteProp, EditorialPanelProp, EditorialPanelProps, EditorialBreadcrumbProp, EditorialBreadcrumbProps, EditorialCardProp, EditorialCardProps, EditorialHeroProp, EditorialHeroProps, EditorialPageHeaderProp, EditorialPageHeaderProps, EditorialPillNavItemProp, EditorialPillNavProp, EditorialPillNavProps, EditorialSearchProp, EditorialSearchProps, EditorialSearchSuggestionFooterProp, EditorialSearchSuggestionGroupProp, EditorialSearchSuggestionProp, EditorialSectionHeadProp, EditorialSectionHeadProps, EditorialSectionProp, EditorialSectionProps, EditorialTextLinkProp, EyebrowProp, EyebrowProps, EditorialFilterBarProp, EditorialFooterProp, EditorialMastheadActionProp, EditorialMastheadLinkProp, EditorialMastheadProp, } from "./editorial.js";

package/dist/components/layout/index.js

@@ -26,7 +26,59 @@ import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
 import { useAppShellNavigationMode } from "./app-shell.js";
+import {
+  EditorialAuth,
+  EditorialAuthCard,
+  EditorialEmptyPanel,
+  EditorialFootnote,
+  EditorialMetaBar,
+  EditorialStats,
+  EditorialTextButton,
+  EditorialToggleGroup,
+  EditorialToolbar,
+  HoldingCard,
+  HoldingCardAction,
+  HoldingGrid,
+  SettingsLayout,
+  SettingsPanel,
+  ThemePicker
+} from "./editorial-account.js";
 import { Affix } from "./affix.js";
+import {
+  CatalogDetail,
+  CatalogDetailSection,
+  CatalogDetailTag,
+  EditorialFilterField,
+  EditorialFilterPanel,
+  EditorialPrompt,
+  PriceSummary
+} from "./editorial-catalog.js";
+import {
+  CardShowcase,
+  CatalogCard,
+  CatalogCardTag,
+  EditorialArticle,
+  EditorialArticleSection,
+  EditorialBanner,
+  EditorialBreadcrumb,
+  EditorialCard,
+  EditorialFilterBar,
+  EditorialFooter,
+  EditorialHero,
+  EditorialMasthead,
+  EditorialMastheadAction,
+  EditorialMastheadLink,
+  EditorialNote,
+  EditorialPageHeader,
+  EditorialPanel,
+  EditorialPillNav,
+  EditorialPillNavItem,
+  EditorialSearch,
+  EditorialSection,
+  EditorialSectionHead,
+  EditorialTextLink,
+  Eyebrow
+} from "./editorial.js";
 export {
   AccountChip,
   Affix,
@@ -39,25 +91,71 @@ export {
   AuthIdentity,
   AuthStack,
   Breadcrumb,
+  CardShowcase,
+  CatalogCard,
+  CatalogCardTag,
+  CatalogDetail,
+  CatalogDetailSection,
+  CatalogDetailTag,
   CenteredShell,
+  EditorialArticle,
+  EditorialArticleSection,
+  EditorialAuth,
+  EditorialAuthCard,
+  EditorialBanner,
+  EditorialBreadcrumb,
+  EditorialCard,
+  EditorialEmptyPanel,
+  EditorialFilterBar,
+  EditorialFilterField,
+  EditorialFilterPanel,
+  EditorialFooter,
+  EditorialFootnote,
+  EditorialHero,
+  EditorialMasthead,
+  EditorialMastheadAction,
+  EditorialMastheadLink,
+  EditorialMetaBar,
+  EditorialNote,
+  EditorialPageHeader,
+  EditorialPanel,
+  EditorialPillNav,
+  EditorialPillNavItem,
+  EditorialPrompt,
+  EditorialSearch,
+  EditorialSection,
+  EditorialSectionHead,
+  EditorialStats,
+  EditorialTextButton,
+  EditorialTextLink,
+  EditorialToggleGroup,
+  EditorialToolbar,
   ErrorSurface,
+  Eyebrow,
   Flex,
+  HoldingCard,
+  HoldingCardAction,
+  HoldingGrid,
   MasterDetail,
   MobileShell,
   NavList,
   OrgSwitcher,
   PageContainer,
+  PriceSummary,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   ResponsiveGrid,
   Separator,
   ServiceRolePanel,
+  SettingsLayout,
+  SettingsPanel,
   Sidebar,
   SidebarHeader,
   SidebarItem,
   SidebarSection,
   SplitPane,
+  ThemePicker,
   Topbar,
   TopbarItem,
   TopbarSearch,

package/dist/components/layout/mobile-shell.d.ts

@@ -1,5 +1,7 @@
 import type { MobileShellProp } from "../../props/components/layout.prop.js";
 export type { MobileShellProp, MobileShellProp as MobileShellProps, } from "../../props/components/layout.prop.js";
+/** Shared internal navigation surface; both shells use the same tiling and current-page styles. */
+export declare const ShellTabBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
 /**
  * MobileShell — the HANDHELD app shell: a status band, an app bar, ONE scroll region,
  * a sticky action bar and a bottom tab bar, in that fixed order.

package/dist/components/layout/mobile-shell.js

@@ -1,9 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
+const ShellTabBar = forwardRef(
+  function ShellTabBar2({ className, "aria-label": label, ...props }, ref) {
+    const { t } = useTranslation();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ...props,
+        ref,
+        className: cn("ui-mobile-shell-tabbar", className),
+        "aria-label": label ?? t("layout.sidebar.ariaLabel")
+      }
+    );
+  }
+);
 function MobileShell({
   statusBar,
   header,
@@ -44,19 +58,12 @@ function MobileShell({
           }
         ),
         actions !== void 0 && /* @__PURE__ */ jsx("footer", { ref: actionsRef, className: "ui-mobile-shell-actions", children: actions }),
-        tabBar !== void 0 && /* @__PURE__ */ jsx(
-          "nav",
-          {
-            ref: tabBarRef,
-            className: "ui-mobile-shell-tabbar",
-            "aria-label": t("layout.sidebar.ariaLabel"),
-            children: tabBar
-          }
-        )
+        tabBar !== void 0 && /* @__PURE__ */ jsx(ShellTabBar, { ref: tabBarRef, children: tabBar })
       ]
     }
   );
 }
 export {
-  MobileShell
+  MobileShell,
+  ShellTabBar
 };

package/dist/components/layout/responsive-grid.js

@@ -4,6 +4,12 @@ import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
   "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
 };
+const TOKEN_PRESETS = /* @__PURE__ */ new Set([
+  "catalog",
+  "trio",
+  "lead",
+  "panels"
+]);
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
@@ -40,12 +46,14 @@ function ResponsiveGrid({
   className,
   children
 }) {
-  const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
+  const tokenPreset = preset !== void 0 && TOKEN_PRESETS.has(preset) ? preset : void 0;
+  const resolved = (preset && RESPONSIVE_GRID_PRESET_COLUMNS[preset]) ?? resolveColumns(columns);
   return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("ui-responsive-grid", className),
       "data-gap": gap,
+      "data-preset": tokenPreset,
       "data-flow": flow === "columns" ? "columns" : void 0,
       "data-align": align,
       "data-dense": dense && flow !== "columns" ? "" : void 0,

package/dist/components/layout/topbar-item.d.ts

@@ -12,6 +12,7 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     hideBelow?: import("../../props/index.js").BreakpointProp;
+    hideFrom?: import("../../props/index.js").BreakpointProp;
     icon?: React.ReactNode;
     iconHideFrom?: import("../../props/index.js").BreakpointProp;
     labelHideBelow?: import("../../props/index.js").BreakpointProp;

package/dist/components/layout/topbar-item.js

@@ -7,6 +7,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
   className,
   type,
   hideBelow,
+  hideFrom,
   icon,
   iconHideFrom,
   labelHideBelow,
@@ -62,6 +63,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
       "data-truncate": truncate ? "true" : void 0,
       title: truncate && typeof label === "string" ? label : void 0,
       "data-hide-below": hideBelow,
+      "data-hide-from": hideFrom,
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
       ...props,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.20.0",
+  "version": "33.21.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/lib/toast-clearance.js

@@ -14,7 +14,7 @@ function useToastStickyBarClearance(refs, enabled) {
     };
     publish();
     const observer = new ResizeObserver(publish);
-    for (const el of elements) observer.observe(el);
+    for (const el of elements) observer.observe(el, { box: "border-box" });
     return () => {
       observer.disconnect();
       html.style.removeProperty(TOAST_STICKY_BAR_PROPERTY);

package/dist/props/components/data-entry.prop.d.ts

@@ -360,6 +360,15 @@ export type NumberInputProp = FieldA11yProps & {
     prefix?: React.ReactNode;
     /** Trailing affix inside the field (e.g. `%`). */
     suffix?: React.ReactNode;
+    /**
+     * How the field takes its inline space, as `Select` and the pickers mean it (gh#1448).
+     * `full` (default) fills the line; `auto` is sized to the widest value the bounds allow (the
+     * formatted `min` / `max`, 6 characters when unbounded) plus the steppers — a quantity stepper in
+     * a `ListRow` trailing slot, outside any `FormField` `controlWidth`; `bounded` holds
+     * `--control-bounded-width`. Measured in a consumer deck builder: a 0–99 stepper took 215px at
+     * 1440px and, at 390px, pushed every row's trailing cluster onto its own line.
+     */
+    width?: ControlWidthProp;
     /** Form field name — the visible input submits its value natively. */
     name?: NameProp;
     id?: IdProp;

package/dist/props/components/editorial-account.prop.d.ts

@@ -0,0 +1,249 @@
+/** Editorial account family prop types (gh#1439) — @see components/layout/editorial-account.tsx */
+import type { ReactNode } from "react";
+import type { ClassNameProp } from "../vocabulary/index.js";
+/** One choice of an EditorialToggleGroup. `label` is the visible text (text variant) and the
+ * accessible name of the button in both variants. */
+export type EditorialToggleGroupItemProp = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+/**
+ * @see EditorialToggleGroup — a named `role="group"` of `aria-pressed` buttons, one pressed at a
+ * time: `variant="text"` for a filter ("All · Cards · Sealed"), `variant="icon"` for a framed
+ * icon-only switch (grid / list view). Geometry: `--editorial-toggle-group-*`.
+ */
+export type EditorialToggleGroupProp = {
+    "aria-label": string;
+    items: EditorialToggleGroupItemProp[];
+    value: string;
+    onValueChange: (value: string) => void;
+    /** `text` (default) shows the labels; `icon` shows only the icons, the label is the name. */
+    variant?: "text" | "icon";
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialMetaBar — a hairline-ruled strip under a page header: a start cluster (a glyph and
+ * a line, e.g. "Your private collection") and an end slot (a badge). Stacks on a phone (tokens).
+ */
+export type EditorialMetaBarProp = {
+    /** Leading glyph, drawn in the primary tone. */
+    icon?: ReactNode;
+    start: ReactNode;
+    end?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialEmptyPanel — a centred panel for a signed-out or an empty state. `variant="guest"`
+ * draws a decorative three-card stack above the copy; `variant="empty"` is dashed, with a round
+ * icon medallion.
+ */
+export type EditorialEmptyPanelProp = {
+    variant?: "guest" | "empty";
+    /** A kicker (an `Eyebrow`) above the title. */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** Heading level of the title. Default `2`. */
+    level?: 2 | 3;
+    description?: ReactNode;
+    /** Buttons, centred in a wrapping row. */
+    actions?: ReactNode;
+    /** The medallion glyph of `variant="empty"`. */
+    icon?: ReactNode;
+    className?: ClassNameProp;
+};
+/** One tile of an EditorialStats strip. */
+export type EditorialStatsItemProp = {
+    label: ReactNode;
+    value: ReactNode;
+    /** A small unit after the figure ("items"). */
+    unit?: ReactNode;
+    /** A short line under the figure. */
+    note?: ReactNode;
+};
+/**
+ * @see EditorialStats — a strip of figure tiles on unequal tracks; the first tile is the lead
+ * (emphasised; on a phone it spans the row with its figure beside the label).
+ */
+export type EditorialStatsProp = {
+    items: EditorialStatsItemProp[];
+    /** Accessible name of the strip (a list). */
+    "aria-label"?: string;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialToolbar — the row above a collection (gh#1438, gh#1439): an optional `summary`
+ * (result count as a polite live region + a short note), a `start` cluster (filters) and an `end`
+ * cluster (order `Select`, view switch, primary action), optionally over a hairline (`divider`).
+ * With a `summary` it is a listing row: one line whose summary shrinks, the
+ * `--editorial-toolbar-summary-*` spacing, never stacked. Without one it is a wrapping bar whose
+ * clusters stack when a theme sets `--editorial-toolbar-display: block`. Selects in `end` read the
+ * toolbar's control scale (`--editorial-toolbar-control-*`).
+ */
+export type EditorialToolbarProp = {
+    /** The listing summary: `count` ("396 results", announced politely) and a `note` under it. */
+    summary?: {
+        count?: ReactNode;
+        note?: ReactNode;
+    };
+    /** Start cluster — filters. */
+    start?: ReactNode;
+    /** End cluster — the order `Select`, a view switch, the primary action. */
+    end?: ReactNode;
+    /** A hairline under the row (`--editorial-toolbar-divider-padding-block-end` above it). */
+    divider?: boolean;
+    className?: ClassNameProp;
+};
+/** `grid` = tiles; `list` = the same cards as wide rows. */
+export type HoldingViewProp = "grid" | "list";
+/** @see HoldingGrid — the track of HoldingCards in grid or list view. */
+export type HoldingGridProp = {
+    view?: HoldingViewProp;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    children?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see HoldingCard — one owned item: a picture ground (the consumer's link around an image), then
+ * overline, title, meta, tags, the purchase line, a date and actions. Its geometry follows the
+ * enclosing HoldingGrid's view.
+ */
+export type HoldingCardProp = {
+    /** The picture ground: a link (router Link or `<a>`) whose child is the image. */
+    media: ReactNode;
+    /** Small line above the title (kind, badges). */
+    overline?: ReactNode;
+    title: ReactNode;
+    /** Heading level of the title. Default `2`. */
+    level?: 2 | 3;
+    meta?: ReactNode;
+    /** Outlined tags (condition, grade, quantity); the last one is set apart. */
+    tags?: ReactNode[];
+    /** The owner's purchase line: a label and a figure. */
+    purchase?: {
+        label: ReactNode;
+        value: ReactNode;
+    };
+    /** A date line ("Purchased: 2026-10-01"). */
+    date?: ReactNode;
+    /** HoldingCardAction elements. */
+    actions?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see HoldingCardAction — a quiet glyph + label action of a HoldingCard (edit, remove). A
+ * `<button>` by default; `asChild` turns the consumer's link into the action.
+ */
+export type HoldingCardActionProp = {
+    icon?: ReactNode;
+    children?: ReactNode;
+    asChild?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+    className?: ClassNameProp;
+};
+/**
+ * @see SettingsLayout — a settings page: a sticky rail (`aside`) beside the panels. The rail hides
+ * on narrow screens through tokens.
+ */
+export type SettingsLayoutProp = {
+    aside?: ReactNode;
+    children?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see SettingsPanel — one bordered settings section: a number and a title with a description,
+ * then its fields.
+ */
+export type SettingsPanelProp = {
+    /** The section number ("01"), set in the figure face. */
+    number?: ReactNode;
+    title: ReactNode;
+    /** Heading level of the title. Default `2`. */
+    level?: 2 | 3;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** id of the title, so a group inside can be named by it. */
+    titleId?: string;
+    className?: ClassNameProp;
+};
+/** A painted preview of the interface in a ThemePicker choice. */
+export type ThemePickerPreviewProp = "light" | "dark" | "system";
+/** One choice of a ThemePicker. */
+export type ThemePickerOptionProp = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    preview: ThemePickerPreviewProp;
+};
+/**
+ * @see ThemePicker — an illustrated radio group for the colour theme: each choice is a painted
+ * preview of the interface (light / dark / split system) with a glyph and its label.
+ */
+export type ThemePickerProp = {
+    /** Accessible name of the radio group (a visually hidden legend). */
+    legend: string;
+    options: ThemePickerOptionProp[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Name of the radio inputs. */
+    name?: string;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialAuth — a sign-in / sign-up page: a story column (kicker, display title, copy,
+ * decorative art, benefits) beside the form card (`children`).
+ */
+export type EditorialAuthProp = {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The picture on the front card of the decorative card pair (e.g. the brand mark). */
+    art?: ReactNode;
+    /** Short benefit lines, each led by a check glyph. */
+    benefits?: ReactNode[];
+    children?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialAuthCard — the form card of EditorialAuth: badge, title, copy, the form
+ * (`children`) and a ruled footer line ("New here? Create an account").
+ */
+export type EditorialAuthCardProp = {
+    badge?: ReactNode;
+    title: ReactNode;
+    /** Heading level of the title. Default `2`. */
+    level?: 2 | 3;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialTextButton — an underlined text action in the primary tone ("Reset display
+ * preferences", "Your collection →"). A `<button>` by default; `asChild` turns the consumer's link
+ * into it. `icon` trails the label.
+ */
+export type EditorialTextButtonProp = {
+    children?: ReactNode;
+    icon?: ReactNode;
+    asChild?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: ClassNameProp;
+};
+/**
+ * @see EditorialFootnote — a quiet closing line under a collection or a settings form: a note at the
+ * start and an optional action (an EditorialTextButton) at the end. Geometry:
+ * `--editorial-footnote-*`.
+ */
+export type EditorialFootnoteProp = {
+    children?: ReactNode;
+    action?: ReactNode;
+    /** Cross-axis alignment of note and action: `start` (default, a multi-line note) or `center`. */
+    align?: "start" | "center";
+    className?: ClassNameProp;
+};

package/dist/props/components/general.prop.d.ts

@@ -29,8 +29,12 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & Omit<T
      * so in a table cell it cannot wrap and cannot share the cell's line height.
      */
     link?: boolean;
-    /** Size from the type scale — never an arbitrary px. Default `sm` (base). */
-    size?: TextSizeProp;
+    /**
+     * Size from the type scale — never an arbitrary px. Default `sm` (base). `"inherit"` (gh#1434)
+     * takes the parent's size, leading and tracking: an emphasised run INSIDE a `Heading` (a hero's
+     * second line in the brand tone) keeps the heading's step at every breakpoint.
+     */
+    size?: TextSizeProp | "inherit";
     /** Semantic colour intent. Default `default` (foreground). */
     tone?: TextToneProp;
     /** Weight (system 2-weight: 400/500). Default `regular`. */