@hjmds/design-contracts 1.26.0 → 1.27.0

package/dist/component-recipes.js

@@ -24,7 +24,23 @@ export const textRecipe = {
         medium: fontWeight.semibold,
         strong: fontWeight.bold,
     },
+    /**
+     * Variants whose omitted `emphasis` renders the variant's typography weight even without a design profile.
+     * Label's 500 has no emphasis step (`medium` is 600), and the shared `regular` default drew form labels at
+     * body weight (2026-10-17 user decision: label 500 on Web and Native). Other variants keep `regular`.
+     */
+    variantWeight: ["label"],
 };
+/**
+ * Weight Text renders when the caller omits `emphasis`; `undefined` means `textRecipe.defaults.emphasis` applies.
+ * Inside a design profile every variant follows the profile's typography weight; outside one only
+ * `textRecipe.variantWeight` variants do. An explicit `emphasis` always wins and never reaches this resolver.
+ */
+export function resolveTextDefaultWeight(variant, typographyTokens, designProfileActive) {
+    return designProfileActive || textRecipe.variantWeight.includes(variant)
+        ? typographyTokens[variant].fontWeight
+        : undefined;
+}
 export const iconRecipe = {
     slots: ["root"],
     defaults: {
@@ -129,11 +145,13 @@ export const badgeRecipe = {
         },
     },
     tones: {
+        // A canvas-colored plate is invisible on the canvas, so neutral and brand badges read as plain text beside a
+        // tinted success badge (2026-10-17 review E3). The plate stays white (canvas) and the neutral border draws it.
         neutral: {
             content: semanticColors.content.secondary,
             outlineContent: semanticColors.content.secondary,
             background: semanticColors.canvas,
-            border: null,
+            border: semanticColors.border.default,
         },
         strong: {
             content: semanticColors.content.inverse,
@@ -151,7 +169,7 @@ export const badgeRecipe = {
             // with one option switched on. The plate goes neutral and the brand
             // stays in the copy.
             background: semanticColors.canvas,
-            border: null,
+            border: semanticColors.border.default,
         },
         info: {
             content: semanticColors.feedback.info.foreground,
@@ -326,7 +344,9 @@ export const listRecipe = {
     separators: {
         none: null,
         full: { insetStart: 0, insetEnd: 0 },
-        indented: { insetStart: 40 + spacing.sm, insetEnd: 0 },
+        // Starts where the row text starts: row padding (xs, every ListRow density) + leading 40 + gap sm. Without the row
+        // padding the line began 8px before the text (2026-10-17 review E5).
+        indented: { insetStart: spacing.xs + 40 + spacing.sm, insetEnd: 0 },
     },
     background: null,
 };
@@ -687,9 +707,10 @@ export const switchRecipe = {
     rowLabelTextVariant: "body",
     slots: ["root", "track", "thumb", "label", "description"],
     defaults: { size: "medium" },
-    // Preserve existing inline Web and full-row Native layouts. Settings can opt in
-    // to one shared row without wrapping a switch in a second interactive target.
-    presentationDefaults: { web: "inline", native: "row" },
+    // One default on both renderers: label/description first, track at the trailing edge
+    // (2026-10-17 web/native comparison: Web defaulted to an inline track-first switch, so the
+    // same settings toggle rendered mirrored). Compact toolbars can still pass `inline`.
+    presentationDefaults: { web: "row", native: "row" },
     // Descriptions beside a fixed track become a narrow column at larger text sizes.
     // Reuse the provider's large-text boundary so Web CSS and Native reflow together.
     stackedTextScale: largeTextThreshold,
@@ -777,6 +798,8 @@ export const selectionControlRecipe = {
         },
     },
     shapes: { checkbox: "sm", radio: "full" },
+    // Web drew 2px and Native 1px; Agreement and TransferList now reuse this indicator, so the width is one value.
+    indicatorBorderWidth: stroke.strong,
     presentations: {
         plain: {
             background: null,
@@ -890,6 +913,7 @@ export const bottomNavigationRecipe = {
             radius: "full",
             shadow: floatingSurfaceContract.shadow,
             maxWidth: 480,
+            contentMaxWidth: null,
             outerPaddingHorizontal: spacing.md,
             outerPaddingTop: spacing.xs,
         },
@@ -901,6 +925,11 @@ export const bottomNavigationRecipe = {
             radius: null,
             shadow: null,
             maxWidth: null,
+            /**
+             * The bar surface and its top edge span the viewport, but the destinations stay in a centered 480 column
+             * (the capsule width): on a 1280 desktop two items otherwise sat at opposite screen edges (2026-10-17 review D8).
+             */
+            contentMaxWidth: 480,
             outerPaddingHorizontal: 0,
             outerPaddingTop: 0,
         },
@@ -912,6 +941,7 @@ export const bottomNavigationRecipe = {
             radius: "xl",
             shadow: floatingSurfaceContract.shadow,
             maxWidth: 384,
+            contentMaxWidth: null,
             outerPaddingHorizontal: spacing.md,
             outerPaddingTop: spacing.xs,
         },
@@ -1189,7 +1219,20 @@ export const avatarRecipe = {
     background: semanticColors.canvas,
     content: semanticColors.content.secondary,
     border: semanticColors.border.default,
+    /** Initials are bold; their size follows the avatar (Web `.hjm-avatar[data-size]` steps). */
+    initialsWeight: "strong",
 };
+/**
+ * Initials text step for an avatar diameter, shared by Web size tokens and Native numeric sizes
+ * (2026-10-17 comparison: Native drew 12pt brand-colored initials at every size).
+ */
+export function resolveAvatarInitialsTextVariant(size) {
+    if (size < avatarRecipe.sizes.medium)
+        return "label";
+    if (size < avatarRecipe.sizes.xlarge)
+        return "body";
+    return "title";
+}
 export const statisticRecipe = {
     slots: [
         "group",
@@ -1268,6 +1311,12 @@ export const statisticRecipe = {
         },
     },
 };
+/**
+ * Gap between adjacent buttons in one action group (2026-10-17 user rule: stacked bottom buttons looked
+ * loose at 12). Stacked (column) groups use 8, inline (row) groups keep 12 so tap targets stay apart.
+ * AlertDialog already used these values; Sheet/Dialog footers and composed screens now share them.
+ */
+export const actionGroupRecipe = { inlineGap: spacing.sm, stackedGap: spacing.xs };
 export const sheetRecipe = {
     slots: ["backdrop", "positioner", "content", "handle", "header", "title", "body", "footer", "close"],
     defaults: { placement: "bottom", size: "auto" },
@@ -1307,7 +1356,8 @@ export const sheetRecipe = {
         height: 4,
         radius: "full",
         color: semanticColors.content.secondary,
-        visibleByDefault: false,
+        // Bottom sheets now always offer drag-to-dismiss, so the handle is visible whenever it is allowed.
+        visibleByDefault: true,
         showWhen: "swipe-dismiss-enabled",
     },
     header: { minHeight: control.minTouchTarget, gap: spacing.sm },
@@ -1325,7 +1375,8 @@ export const sheetRecipe = {
     footer: {
         color: semanticColors.content.body,
         textVariant: "body",
-        gap: spacing.sm,
+        // Native stacks footer actions in a column.
+        gap: actionGroupRecipe.stackedGap,
         paddingTop: spacing.sm,
     },
     transition: { enter: motionPreset.enter, exit: motionPreset.exit },
@@ -1408,8 +1459,8 @@ export const alertDialogRecipe = {
     error: formSupportContract.error,
     // Stacked: confirm on top, cancel below, tighter gap (reported 2026-09-27). Row stays [cancel][confirm].
     actions: {
-        gap: spacing.sm,
-        stackedGap: spacing.xs,
+        gap: actionGroupRecipe.inlineGap,
+        stackedGap: actionGroupRecipe.stackedGap,
         stackedOrder: "confirm-first",
         stackBelow: breakpoint.medium,
         minButtonWidth: 96,
@@ -1627,6 +1678,9 @@ export const bottomCtaRecipe = {
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,
     gap: spacing.sm,
+    // The footer surface spans the viewport, but its copy and actions stop at the reading width (ScreenLayout's body
+    // width): on a 1200px desktop or tablet stage each half-width button had stretched to ~440px (2026-10-17 review).
+    contentMaxWidth: layout.readingMaxWidth,
     // A footer painted in the canvas tone left only a 1pt hairline between it
     // and the content scrolling underneath — a product author found that the
     // line cut a glyph in half at whatever scroll position the reader stopped