@hjmds/react 1.23.0 → 1.25.0

package/dist/styles.css

@@ -2775,6 +2775,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-top-bar__leading, .hjm-top-bar__trailing { display: flex; flex-wrap: wrap; align-items: center; min-inline-size: 0; gap: var(--hjm-top-bar-gap); }
 .hjm-top-bar__trailing { justify-content: flex-end; }
 .hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
+.hjm-top-bar__subtitle { display: block; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-font-weight-bold); }
 .hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
 .hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
@@ -3028,6 +3029,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-screen__body { flex: 1 1 0%; min-block-size: 0; min-inline-size: 0; padding: var(--hjm-screen-padding); overflow-wrap: anywhere; }
 .hjm-screen__body[data-scroll="screen"] { overflow-y: auto; }
 .hjm-screen__body[data-scroll="content"] { display: flex; flex-direction: column; overflow: hidden; }
+.hjm-screen__body[data-content-alignment="center"] { display: flex; flex-direction: column; }
+.hjm-screen__centered-content { margin-block: auto; flex-shrink: 0; inline-size: 100%; }
 .hjm-screen__body[data-replacement="true"] { display: flex; flex-direction: column; }
 .hjm-screen__state { margin-block: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--hjm-screen-state-gap, var(--hjm-space-md)); padding-block: var(--hjm-screen-gap); text-align: center; }
 .hjm-screen__footer { flex: 0 0 auto; padding: var(--hjm-screen-padding); padding-block-end: max(var(--hjm-screen-padding), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--hjm-color-border); }
@@ -3176,3 +3179,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__surface { background: var(--hjm-color-surface-alt); border-color: var(--hjm-color-border-control); border-block-end-width: 4px; box-shadow: none; }
 .hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item { border-block-end: 3px solid transparent; }
 .hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item[data-state="selected"] { border-block-end-color: color-mix(in srgb, var(--hjm-color-text) 45%, transparent); }
+
+/* Text radio navigation shares the selection engine and its focus behavior. */
+.hjm-segmented[data-presentation="text"] .hjm-segmented__items { flex-direction:row; gap:var(--hjm-space-md); padding:0; border:0; border-radius:0; background:transparent; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:500; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:700; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:400; }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:600; }

package/dist/styles.layered.css

@@ -2776,6 +2776,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-top-bar__leading, .hjm-top-bar__trailing { display: flex; flex-wrap: wrap; align-items: center; min-inline-size: 0; gap: var(--hjm-top-bar-gap); }
 .hjm-top-bar__trailing { justify-content: flex-end; }
 .hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
+.hjm-top-bar__subtitle { display: block; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-font-weight-bold); }
 .hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
 .hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
@@ -3029,6 +3030,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-screen__body { flex: 1 1 0%; min-block-size: 0; min-inline-size: 0; padding: var(--hjm-screen-padding); overflow-wrap: anywhere; }
 .hjm-screen__body[data-scroll="screen"] { overflow-y: auto; }
 .hjm-screen__body[data-scroll="content"] { display: flex; flex-direction: column; overflow: hidden; }
+.hjm-screen__body[data-content-alignment="center"] { display: flex; flex-direction: column; }
+.hjm-screen__centered-content { margin-block: auto; flex-shrink: 0; inline-size: 100%; }
 .hjm-screen__body[data-replacement="true"] { display: flex; flex-direction: column; }
 .hjm-screen__state { margin-block: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--hjm-screen-state-gap, var(--hjm-space-md)); padding-block: var(--hjm-screen-gap); text-align: center; }
 .hjm-screen__footer { flex: 0 0 auto; padding: var(--hjm-screen-padding); padding-block-end: max(var(--hjm-screen-padding), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--hjm-color-border); }
@@ -3178,4 +3181,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item { border-block-end: 3px solid transparent; }
 .hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item[data-state="selected"] { border-block-end-color: color-mix(in srgb, var(--hjm-color-text) 45%, transparent); }
 
+/* Text radio navigation shares the selection engine and its focus behavior. */
+.hjm-segmented[data-presentation="text"] .hjm-segmented__items { flex-direction:row; gap:var(--hjm-space-md); padding:0; border:0; border-radius:0; background:transparent; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:500; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:700; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:400; }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:600; }
+
 }

package/dist/top-bar.d.ts

@@ -2,6 +2,10 @@ import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from "rea
 import type { HjmCompositionStyleProp } from "./composition-style.js";
 export type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & Readonly<{
     title?: string;
+    /** Product control in the shared title slot; exclusive with text title affordances. */
+    titleContent?: ReactNode;
+    /** Secondary product context; the shared title slot owns its placement. */
+    subtitle?: string;
     titleLeading?: ReactNode;
     onTitleClick?: MouseEventHandler<HTMLButtonElement>;
     titleAccessibilityLabel?: string;
@@ -17,6 +21,10 @@ export type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "childr
 /** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */
 export declare const TopBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & Readonly<{
     title?: string;
+    /** Product control in the shared title slot; exclusive with text title affordances. */
+    titleContent?: ReactNode;
+    /** Secondary product context; the shared title slot owns its placement. */
+    subtitle?: string;
     titleLeading?: ReactNode;
     onTitleClick?: MouseEventHandler<HTMLButtonElement>;
     titleAccessibilityLabel?: string;

package/dist/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG,QAAQ,CAAC;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEH,wGAAwG;AACxG,eAAO,MAAM,MAAM;YAfT,MAAM;mBACC,SAAS;mBACT,iBAAiB,CAAC,iBAAiB,CAAC;8BACzB,MAAM;mBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;cAC1B,SAAS;eACR,SAAS;cACV,SAAS;eACR,OAAO;kBACJ,MAAM;IACpB,gGAAgG;kBAClF,uBAAuB;mDAmCrC,CAAC"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG,QAAQ,CAAC;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEH,wGAAwG;AACxG,eAAO,MAAM,MAAM;YAnBT,MAAM;IACd,uFAAuF;mBACxE,SAAS;IACxB,2EAA2E;eAChE,MAAM;mBACF,SAAS;mBACT,iBAAiB,CAAC,iBAAiB,CAAC;8BACzB,MAAM;mBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;cAC1B,SAAS;eACR,SAAS;cACV,SAAS;eACR,OAAO;kBACJ,MAAM;IACpB,gGAAgG;kBAClF,uBAAuB;mDAwCrC,CAAC"}

package/dist/top-bar.js

@@ -5,8 +5,13 @@ import { Button } from "./actions.js";
 import { classNames } from "./internal.js";
 import { useOptionalHjmTheme } from "./provider.js";
 /** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */
-export const TopBar = forwardRef(function TopBar({ title, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1, leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0, className, style, layoutStyle, ...props }, ref) {
+export const TopBar = forwardRef(function TopBar({ title, titleContent, subtitle, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1, leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0, className, style, layoutStyle, ...props }, ref) {
     const theme = useOptionalHjmTheme();
+    if (titleContent !== undefined && (title !== undefined || subtitle !== undefined || titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {
+        throw new TypeError("TopBar titleContent is exclusive with title affordances");
+    }
+    if (subtitle !== undefined && !subtitle.trim())
+        throw new TypeError("TopBar subtitle must not be empty");
     if (!Number.isFinite(safeAreaTop) || safeAreaTop < 0)
         throw new RangeError("TopBar safeAreaTop must be non-negative");
     if (title !== undefined && !title.trim())
@@ -15,7 +20,7 @@ export const TopBar = forwardRef(function TopBar({ title, titleLeading, onTitleC
         throw new TypeError("TopBar titleAccessibilityLabel must not be empty");
     if (actions !== undefined && trailing !== undefined)
         throw new TypeError("TopBar accepts either trailing or actions");
-    if (title === undefined && (titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {
+    if (title === undefined && (subtitle !== undefined || titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {
         throw new TypeError("TopBar title affordances require a title");
     }
     const Heading = `h${headingLevel}`;
@@ -24,7 +29,7 @@ export const TopBar = forwardRef(function TopBar({ title, titleLeading, onTitleC
             "--hjm-top-bar-padding": `${topBarRecipe.paddingHorizontal}px`,
             "--hjm-top-bar-gap": `${topBarRecipe.gap}px`,
             "--hjm-top-bar-safe-area": `${safeAreaTop}px`, ...style, ...layoutStyle,
-        }, children: [_jsx("div", { className: "hjm-top-bar__leading", children: leading }), _jsx("div", { className: "hjm-top-bar__title", children: title === undefined ? null : _jsx(Heading, { className: "hjm-top-bar__heading", children: onTitleClick ? _jsx(Button, { tone: "ghost", onClick: onTitleClick, "aria-label": titleAccessibilityLabel, leading: titleLeading, children: title })
-                        : _jsxs("span", { "aria-label": titleAccessibilityLabel, children: [titleLeading, title] }) }) }), _jsx("div", { className: "hjm-top-bar__trailing", children: actions ?? trailing })] });
+        }, children: [_jsx("div", { className: "hjm-top-bar__leading", children: leading }), _jsxs("div", { className: "hjm-top-bar__title", children: [titleContent ?? (title === undefined ? null : _jsx(Heading, { className: "hjm-top-bar__heading", children: onTitleClick ? _jsx(Button, { tone: "ghost", onClick: onTitleClick, "aria-label": titleAccessibilityLabel, leading: titleLeading, children: title })
+                            : _jsxs("span", { "aria-label": titleAccessibilityLabel, children: [titleLeading, title] }) })), subtitle ? _jsx("span", { className: "hjm-top-bar__subtitle", children: subtitle }) : null] }), _jsx("div", { className: "hjm-top-bar__trailing", children: actions ?? trailing })] });
 });
 //# sourceMappingURL=top-bar.js.map

package/dist/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAmF,MAAM,OAAO,CAAC;AACpH,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAkBpD,wGAAwG;AACxG,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA8B,SAAS,MAAM,CAAC,EAC5E,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,YAAY,GAAG,CAAC,EAC5E,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,GAAG,CAAC,EACtF,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EACxC,EAAE,GAAG;IACJ,MAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC;IACpC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,WAAW,GAAG,CAAC;QAAE,MAAM,IAAI,UAAU,CAAC,yCAAyC,CAAC,CAAC;IACtH,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;QAAE,MAAM,IAAI,SAAS,CAAC,gCAAgC,CAAC,CAAC;IAChG,IAAI,uBAAuB,KAAK,SAAS,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE;QAAE,MAAM,IAAI,SAAS,CAAC,kDAAkD,CAAC,CAAC;IACtJ,IAAI,OAAO,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS;QAAE,MAAM,IAAI,SAAS,CAAC,2CAA2C,CAAC,CAAC;IACtH,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,uBAAuB,KAAK,SAAS,CAAC,EAAE,CAAC;QAC/H,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;IAClE,CAAC;IACD,MAAM,OAAO,GAAG,IAAI,YAAY,EAA6C,CAAC;IAC9E,OAAO,kBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,mBAC/D,QAAQ,qBAAmB,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,YAAY,CAAC,kBAAkB,EAChH,KAAK,EAAE;YACL,0BAA0B,EAAE,GAAG,YAAY,CAAC,SAAS,IAAI;YACzD,uBAAuB,EAAE,GAAG,YAAY,CAAC,iBAAiB,IAAI;YAC9D,mBAAmB,EAAE,GAAG,YAAY,CAAC,GAAG,IAAI;YAC5C,yBAAyB,EAAE,GAAG,WAAW,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,WAAW;SACvD,aAClB,cAAK,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAO,EACrD,cAAK,SAAS,EAAC,oBAAoB,YAChC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YACpE,YAAY,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,YAAY,gBAAc,uBAAuB,EAAE,OAAO,EAAE,YAAY,YAAG,KAAK,GAAU;wBACtI,CAAC,CAAC,8BAAkB,uBAAuB,aAAG,YAAY,EAAE,KAAK,IAAQ,GACnE,GACN,EACN,cAAK,SAAS,EAAC,uBAAuB,YAAE,OAAO,IAAI,QAAQ,GAAO,IAC9D,CAAC;AACT,CAAC,CAAC,CAAC","sourcesContent":["import { topBarRecipe } from \"@hjmds/design-contracts/recipes\";\nimport { forwardRef, type CSSProperties, type HTMLAttributes, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button } from \"./actions.js\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> & Readonly<{\n  title?: string;\n  titleLeading?: ReactNode;\n  onTitleClick?: MouseEventHandler<HTMLButtonElement>;\n  titleAccessibilityLabel?: string;\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  leading?: ReactNode;\n  trailing?: ReactNode;\n  actions?: ReactNode;\n  centered?: boolean;\n  safeAreaTop?: number;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\n/** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */\nexport const TopBar = forwardRef<HTMLDivElement, TopBarProps>(function TopBar({\n  title, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1,\n  leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0,\n  className, style, layoutStyle, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  if (!Number.isFinite(safeAreaTop) || safeAreaTop < 0) throw new RangeError(\"TopBar safeAreaTop must be non-negative\");\n  if (title !== undefined && !title.trim()) throw new TypeError(\"TopBar title must not be empty\");\n  if (titleAccessibilityLabel !== undefined && !titleAccessibilityLabel.trim()) throw new TypeError(\"TopBar titleAccessibilityLabel must not be empty\");\n  if (actions !== undefined && trailing !== undefined) throw new TypeError(\"TopBar accepts either trailing or actions\");\n  if (title === undefined && (titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {\n    throw new TypeError(\"TopBar title affordances require a title\");\n  }\n  const Heading = `h${headingLevel}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  return <div {...props} ref={ref} className={classNames(\"hjm-top-bar\", className)}\n    data-centered={centered} data-large-text={(theme?.environment.textScale ?? 1) >= topBarRecipe.largeTextThreshold}\n    style={{\n      \"--hjm-top-bar-min-height\": `${topBarRecipe.minHeight}px`,\n      \"--hjm-top-bar-padding\": `${topBarRecipe.paddingHorizontal}px`,\n      \"--hjm-top-bar-gap\": `${topBarRecipe.gap}px`,\n      \"--hjm-top-bar-safe-area\": `${safeAreaTop}px`, ...style, ...layoutStyle,\n    } as CSSProperties}>\n    <div className=\"hjm-top-bar__leading\">{leading}</div>\n    <div className=\"hjm-top-bar__title\">\n      {title === undefined ? null : <Heading className=\"hjm-top-bar__heading\">\n        {onTitleClick ? <Button tone=\"ghost\" onClick={onTitleClick} aria-label={titleAccessibilityLabel} leading={titleLeading}>{title}</Button>\n          : <span aria-label={titleAccessibilityLabel}>{titleLeading}{title}</span>}\n      </Heading>}\n    </div>\n    <div className=\"hjm-top-bar__trailing\">{actions ?? trailing}</div>\n  </div>;\n});\n"]}
+{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { topBarRecipe } from \"@hjmds/design-contracts/recipes\";\nimport { forwardRef, type CSSProperties, type HTMLAttributes, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button } from \"./actions.js\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> & Readonly<{\n  title?: string;\n  /** Product control in the shared title slot; exclusive with text title affordances. */\n  titleContent?: ReactNode;\n  /** Secondary product context; the shared title slot owns its placement. */\n  subtitle?: string;\n  titleLeading?: ReactNode;\n  onTitleClick?: MouseEventHandler<HTMLButtonElement>;\n  titleAccessibilityLabel?: string;\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  leading?: ReactNode;\n  trailing?: ReactNode;\n  actions?: ReactNode;\n  centered?: boolean;\n  safeAreaTop?: number;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\n/** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */\nexport const TopBar = forwardRef<HTMLDivElement, TopBarProps>(function TopBar({\n  title, titleContent, subtitle, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1,\n  leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0,\n  className, style, layoutStyle, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  if (titleContent !== undefined && (title !== undefined || subtitle !== undefined || titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {\n    throw new TypeError(\"TopBar titleContent is exclusive with title affordances\");\n  }\n  if (subtitle !== undefined && !subtitle.trim()) throw new TypeError(\"TopBar subtitle must not be empty\");\n  if (!Number.isFinite(safeAreaTop) || safeAreaTop < 0) throw new RangeError(\"TopBar safeAreaTop must be non-negative\");\n  if (title !== undefined && !title.trim()) throw new TypeError(\"TopBar title must not be empty\");\n  if (titleAccessibilityLabel !== undefined && !titleAccessibilityLabel.trim()) throw new TypeError(\"TopBar titleAccessibilityLabel must not be empty\");\n  if (actions !== undefined && trailing !== undefined) throw new TypeError(\"TopBar accepts either trailing or actions\");\n  if (title === undefined && (subtitle !== undefined || titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {\n    throw new TypeError(\"TopBar title affordances require a title\");\n  }\n  const Heading = `h${headingLevel}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  return <div {...props} ref={ref} className={classNames(\"hjm-top-bar\", className)}\n    data-centered={centered} data-large-text={(theme?.environment.textScale ?? 1) >= topBarRecipe.largeTextThreshold}\n    style={{\n      \"--hjm-top-bar-min-height\": `${topBarRecipe.minHeight}px`,\n      \"--hjm-top-bar-padding\": `${topBarRecipe.paddingHorizontal}px`,\n      \"--hjm-top-bar-gap\": `${topBarRecipe.gap}px`,\n      \"--hjm-top-bar-safe-area\": `${safeAreaTop}px`, ...style, ...layoutStyle,\n    } as CSSProperties}>\n    <div className=\"hjm-top-bar__leading\">{leading}</div>\n    <div className=\"hjm-top-bar__title\">\n      {titleContent ?? (title === undefined ? null : <Heading className=\"hjm-top-bar__heading\">\n        {onTitleClick ? <Button tone=\"ghost\" onClick={onTitleClick} aria-label={titleAccessibilityLabel} leading={titleLeading}>{title}</Button>\n          : <span aria-label={titleAccessibilityLabel}>{titleLeading}{title}</span>}\n      </Heading>)}\n      {subtitle ? <span className=\"hjm-top-bar__subtitle\">{subtitle}</span> : null}\n    </div>\n    <div className=\"hjm-top-bar__trailing\">{actions ?? trailing}</div>\n  </div>;\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/react",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "Accessible React 19 renderers for HJM design contracts.",
   "license": "MIT",
   "publishConfig": {
@@ -577,6 +577,11 @@
       "types": "./dist/streaming-answer.d.ts",
       "import": "./dist/streaming-answer.js",
       "default": "./dist/streaming-answer.js"
+    },
+    "./conversation-row": {
+      "types": "./dist/conversation-row.d.ts",
+      "import": "./dist/conversation-row.js",
+      "default": "./dist/conversation-row.js"
     }
   },
   "files": [
@@ -586,7 +591,7 @@
     "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "@hjmds/design-contracts": ">=1.23.0 <1.24.0",
+    "@hjmds/design-contracts": "^1.25.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "@number-flow/react": "0.6.2",
@@ -623,7 +628,7 @@
     "blobatar": "2.7.0",
     "@blobatar/react": "2.7.0",
     "lucide-react": "1.49.0",
-    "@hjmds/design-contracts": "1.23.0"
+    "@hjmds/design-contracts": "1.25.0"
   },
   "peerDependenciesMeta": {
     "@number-flow/react": {