@hjmds/design-contracts 1.27.2 → 1.28.0

package/dist/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","sourceRoot":"","sources":["../src/steps.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\nimport type { SemanticIconName } from \"./icon.js\";\nimport { fontWeight, glyph, spacing, stroke } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * Ant Design Steps' full surface (navigation/clickable jump, dot type, custom\n * per-item icon, vertical orientation) is intentionally not reproduced. Both\n * known consumers (Yajalal onboarding, BurnTok sign-up) are single-cursor,\n * horizontal, back-button-driven wizards; see docs/steps.md for the per-axis\n * rationale.\n */\nexport type StepStatus = \"pending\" | \"current\" | \"complete\" | \"error\";\n\n/** Only the cursor step can be \"current\" or \"error\"; every other step is derived. */\n// \"complete\" marks a finished flow; see docs/steps.md.\nexport type StepCursorStatus = Extract<StepStatus, \"current\" | \"error\" | \"complete\">;\n\nexport type StepItemDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  description?: string;\n}>;\n\n/**\n * A single stable cursor (`currentStepId`) is the source of truth instead of a\n * per-item status array, so \"two current steps\" or \"a completed step past an\n * unresolved error\" cannot be represented. Clickable jump is out of scope, so\n * the flow is always linear relative to the cursor.\n */\nexport type StepsDescriptor<Id extends string = string> = Readonly<{\n  steps: readonly StepItemDescriptor<Id>[];\n  currentStepId: Id;\n  currentStepStatus?: StepCursorStatus;\n}>;\n\nexport const stepsDefaults = {\n  currentStepStatus: \"current\",\n} as const satisfies Readonly<{ currentStepStatus: StepCursorStatus }>;\n\nexport type StepsStatusLabels = Readonly<{\n  pending: string;\n  current: string;\n  complete: string;\n  error: string;\n}>;\n\nexport type StepsAccessibleNameInfo = Readonly<{\n  position: number;\n  total: number;\n  label: string;\n}>;\n\n/**\n * Products own the exact phrase order and counter-word grammar (Korean\n * \"3단계 중 2단계\" does not translate structurally to English \"step 2 of 3\"),\n * so the resolver invokes this composer instead of assembling copy itself.\n */\nexport type ComposeStepsAccessibleName = (\n  info: StepsAccessibleNameInfo,\n) => string;\n\nexport type ResolvedStepDescriptor<Id extends string = string> =\n  StepItemDescriptor<Id> &\n    Readonly<{\n      status: StepStatus;\n      /** 1-indexed so position and label both preserve reading order for renderers. */\n      position: number;\n      total: number;\n      /** Primary accessible name: order + label. Never says status by itself. */\n      accessibleName: string;\n      /** Supplementary status announcement (Web aria-describedby text / RN accessibilityHint). */\n      statusLabel: string;\n    }>;\n\nexport type ResolveStepsOptions = Readonly<{\n  statusLabels: StepsStatusLabels;\n  composeAccessibleName: ComposeStepsAccessibleName;\n}>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Steps ${field} must not be empty`);\n  }\n}\n\nexport function validateStepItemDescriptor<Id extends string>(\n  step: StepItemDescriptor<Id>,\n): void {\n  assertNonEmpty(step.id, \"item id\");\n  if (step.id !== step.id.trim()) {\n    throw new TypeError(\"Steps item id must not start or end with whitespace\");\n  }\n  assertNonEmpty(step.label, \"item label\");\n  if (step.description !== undefined) {\n    assertNonEmpty(step.description, \"item description\");\n  }\n}\n\nexport function validateStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n): void {\n  if (descriptor.steps.length < 2) {\n    throw new RangeError(\"Steps must contain at least two steps\");\n  }\n  const ids = new Set<Id>();\n  for (const step of descriptor.steps) {\n    validateStepItemDescriptor(step);\n    if (ids.has(step.id)) {\n      throw new TypeError(`Duplicate Steps item id: ${step.id}`);\n    }\n    ids.add(step.id);\n  }\n  if (!ids.has(descriptor.currentStepId)) {\n    throw new RangeError(\n      `Steps currentStepId does not match any step id: ${String(descriptor.currentStepId)}`,\n    );\n  }\n  if (\n    descriptor.currentStepStatus !== undefined &&\n    descriptor.currentStepStatus !== \"current\" &&\n    descriptor.currentStepStatus !== \"error\" &&\n    descriptor.currentStepStatus !== \"complete\"\n  ) {\n    throw new TypeError(\n      `Unsupported Steps currentStepStatus: ${String(descriptor.currentStepStatus)}`,\n    );\n  }\n}\n\nexport function validateStepsStatusLabels(labels: StepsStatusLabels): void {\n  if (labels === null || typeof labels !== \"object\") {\n    throw new TypeError(\"Steps statusLabels must be an object\");\n  }\n  for (const key of [\"pending\", \"current\", \"complete\", \"error\"] as const) {\n    const value = labels[key];\n    if (typeof value !== \"string\" || value.trim().length === 0) {\n      throw new TypeError(`Steps statusLabels.${key} must not be empty`);\n    }\n  }\n}\n\n/** A step is visually and semantically \"reached\" once it is no longer waiting. */\nexport function isStepReached(status: StepStatus): boolean {\n  return status !== \"pending\";\n}\n\n/**\n * Derives every step's status from its position relative to the single\n * cursor, then attaches the order-preserving accessible name and the\n * supplementary status announcement. Throws on a malformed descriptor,\n * labels bag, or composer instead of silently rendering an inconsistent flow.\n */\nexport function resolveStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n  options: ResolveStepsOptions,\n): readonly ResolvedStepDescriptor<Id>[] {\n  validateStepsDescriptor(descriptor);\n  validateStepsStatusLabels(options.statusLabels);\n  if (typeof options.composeAccessibleName !== \"function\") {\n    throw new TypeError(\"Steps composeAccessibleName must be a function\");\n  }\n\n  const currentStepStatus =\n    descriptor.currentStepStatus ?? stepsDefaults.currentStepStatus;\n  const total = descriptor.steps.length;\n  const cursorIndex = descriptor.steps.findIndex(\n    (step) => step.id === descriptor.currentStepId,\n  );\n\n  return descriptor.steps.map((step, index) => {\n    const status: StepStatus =\n      index < cursorIndex\n        ? \"complete\"\n        : index > cursorIndex\n          ? \"pending\"\n          : currentStepStatus;\n    const position = index + 1;\n    const accessibleName = options.composeAccessibleName({\n      position,\n      total,\n      label: step.label,\n    });\n    if (typeof accessibleName !== \"string\" || accessibleName.trim().length === 0) {\n      throw new TypeError(\n        \"Steps composeAccessibleName must return a non-empty string\",\n      );\n    }\n    return {\n      ...step,\n      status,\n      position,\n      total,\n      accessibleName,\n      statusLabel: options.statusLabels[status],\n    };\n  });\n}\n\nexport const stepsRecipe = {\n  slots: [\n    \"root\",\n    \"step\",\n    \"indicator\",\n    \"marker\",\n    \"connector\",\n    \"label\",\n    \"description\",\n  ] as const,\n  gap: spacing.xs,\n  indicator: {\n    size: glyph.md,\n    borderWidth: stroke.default,\n    activeBorderWidth: stroke.strong,\n    /** null means the renderer shows the step's own position number instead of a glyph. */\n    marks: {\n      pending: null,\n      current: null,\n      complete: \"check\",\n      error: \"error\",\n    },\n    border: {\n      pending: semanticColors.border.default,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.border,\n      error: semanticColors.feedback.danger.border,\n    },\n    background: {\n      pending: null,\n      current: null,\n      complete: semanticColors.feedback.success.badgeBackground,\n      error: semanticColors.feedback.danger.badgeBackground,\n    },\n    content: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.foreground,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  connector: {\n    height: stroke.default,\n    tone: {\n      reached: semanticColors.content.brand,\n      unreached: semanticColors.border.default,\n    },\n  },\n  label: {\n    textVariant: \"label\",\n    fontWeight: fontWeight.semibold,\n    color: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.primary,\n      complete: semanticColors.content.primary,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  description: {\n    textVariant: \"caption\",\n    color: semanticColors.content.secondary,\n  },\n} as const satisfies {\n  slots: readonly string[];\n  gap: number;\n  indicator: {\n    size: number;\n    borderWidth: number;\n    activeBorderWidth: number;\n    marks: Record<StepStatus, SemanticIconName | null>;\n    border: Record<StepStatus, ColorReference>;\n    background: Record<StepStatus, ColorReference | null>;\n    content: Record<StepStatus, ColorReference>;\n  };\n  connector: {\n    height: number;\n    tone: Record<\"reached\" | \"unreached\", ColorReference>;\n  };\n  label: {\n    textVariant: TextVariant;\n    fontWeight: FontWeightValue;\n    color: Record<StepStatus, ColorReference>;\n  };\n  description: {\n    textVariant: TextVariant;\n    color: ColorReference;\n  };\n};\n"]}
+{"version":3,"file":"steps.js","sourceRoot":"","sources":["../src/steps.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\nimport type { SemanticIconName } from \"./icon.js\";\nimport { fontWeight, glyph, spacing, stroke } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * Ant Design Steps' full surface (navigation/clickable jump, dot type, custom\n * per-item icon, vertical orientation) is intentionally not reproduced. Both\n * known consumers (Yajalal onboarding, BurnTok sign-up) are single-cursor,\n * horizontal, back-button-driven wizards; see docs/steps.md for the per-axis\n * rationale.\n */\nexport type StepStatus = \"pending\" | \"current\" | \"complete\" | \"error\";\n\n/** Only the cursor step can be \"current\" or \"error\"; every other step is derived. */\n// \"complete\" marks a finished flow; see docs/steps.md.\nexport type StepCursorStatus = Extract<StepStatus, \"current\" | \"error\" | \"complete\">;\n\nexport type StepItemDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  description?: string;\n}>;\n\n/**\n * A single stable cursor (`currentStepId`) is the source of truth instead of a\n * per-item status array, so \"two current steps\" or \"a completed step past an\n * unresolved error\" cannot be represented. Clickable jump is out of scope, so\n * the flow is always linear relative to the cursor.\n */\nexport type StepsDescriptor<Id extends string = string> = Readonly<{\n  steps: readonly StepItemDescriptor<Id>[];\n  currentStepId: Id;\n  currentStepStatus?: StepCursorStatus;\n}>;\n\nexport const stepsDefaults = {\n  currentStepStatus: \"current\",\n} as const satisfies Readonly<{ currentStepStatus: StepCursorStatus }>;\n\nexport type StepsStatusLabels = Readonly<{\n  pending: string;\n  current: string;\n  complete: string;\n  error: string;\n}>;\n\nexport type StepsAccessibleNameInfo = Readonly<{\n  position: number;\n  total: number;\n  label: string;\n}>;\n\n/**\n * Products own the exact phrase order and counter-word grammar (Korean\n * \"3단계 중 2단계\" does not translate structurally to English \"step 2 of 3\"),\n * so the resolver invokes this composer instead of assembling copy itself.\n */\nexport type ComposeStepsAccessibleName = (\n  info: StepsAccessibleNameInfo,\n) => string;\n\nexport type ResolvedStepDescriptor<Id extends string = string> =\n  StepItemDescriptor<Id> &\n    Readonly<{\n      status: StepStatus;\n      /** 1-indexed so position and label both preserve reading order for renderers. */\n      position: number;\n      total: number;\n      /** Primary accessible name: order + label. Never says status by itself. */\n      accessibleName: string;\n      /** Supplementary status announcement (Web aria-describedby text / RN accessibilityHint). */\n      statusLabel: string;\n    }>;\n\nexport type ResolveStepsOptions = Readonly<{\n  statusLabels: StepsStatusLabels;\n  composeAccessibleName: ComposeStepsAccessibleName;\n}>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Steps ${field} must not be empty`);\n  }\n}\n\nexport function validateStepItemDescriptor<Id extends string>(\n  step: StepItemDescriptor<Id>,\n): void {\n  assertNonEmpty(step.id, \"item id\");\n  if (step.id !== step.id.trim()) {\n    throw new TypeError(\"Steps item id must not start or end with whitespace\");\n  }\n  assertNonEmpty(step.label, \"item label\");\n  if (step.description !== undefined) {\n    assertNonEmpty(step.description, \"item description\");\n  }\n}\n\nexport function validateStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n): void {\n  if (descriptor.steps.length < 2) {\n    throw new RangeError(\"Steps must contain at least two steps\");\n  }\n  const ids = new Set<Id>();\n  for (const step of descriptor.steps) {\n    validateStepItemDescriptor(step);\n    if (ids.has(step.id)) {\n      throw new TypeError(`Duplicate Steps item id: ${step.id}`);\n    }\n    ids.add(step.id);\n  }\n  if (!ids.has(descriptor.currentStepId)) {\n    throw new RangeError(\n      `Steps currentStepId does not match any step id: ${String(descriptor.currentStepId)}`,\n    );\n  }\n  if (\n    descriptor.currentStepStatus !== undefined &&\n    descriptor.currentStepStatus !== \"current\" &&\n    descriptor.currentStepStatus !== \"error\" &&\n    descriptor.currentStepStatus !== \"complete\"\n  ) {\n    throw new TypeError(\n      `Unsupported Steps currentStepStatus: ${String(descriptor.currentStepStatus)}`,\n    );\n  }\n}\n\nexport function validateStepsStatusLabels(labels: StepsStatusLabels): void {\n  if (labels === null || typeof labels !== \"object\") {\n    throw new TypeError(\"Steps statusLabels must be an object\");\n  }\n  for (const key of [\"pending\", \"current\", \"complete\", \"error\"] as const) {\n    const value = labels[key];\n    if (typeof value !== \"string\" || value.trim().length === 0) {\n      throw new TypeError(`Steps statusLabels.${key} must not be empty`);\n    }\n  }\n}\n\n/** A step is visually and semantically \"reached\" once it is no longer waiting. */\nexport function isStepReached(status: StepStatus): boolean {\n  return status !== \"pending\";\n}\n\n/**\n * Derives every step's status from its position relative to the single\n * cursor, then attaches the order-preserving accessible name and the\n * supplementary status announcement. Throws on a malformed descriptor,\n * labels bag, or composer instead of silently rendering an inconsistent flow.\n */\nexport function resolveStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n  options: ResolveStepsOptions,\n): readonly ResolvedStepDescriptor<Id>[] {\n  validateStepsDescriptor(descriptor);\n  validateStepsStatusLabels(options.statusLabels);\n  if (typeof options.composeAccessibleName !== \"function\") {\n    throw new TypeError(\"Steps composeAccessibleName must be a function\");\n  }\n\n  const currentStepStatus =\n    descriptor.currentStepStatus ?? stepsDefaults.currentStepStatus;\n  const total = descriptor.steps.length;\n  const cursorIndex = descriptor.steps.findIndex(\n    (step) => step.id === descriptor.currentStepId,\n  );\n\n  return descriptor.steps.map((step, index) => {\n    const status: StepStatus =\n      index < cursorIndex\n        ? \"complete\"\n        : index > cursorIndex\n          ? \"pending\"\n          : currentStepStatus;\n    const position = index + 1;\n    const accessibleName = options.composeAccessibleName({\n      position,\n      total,\n      label: step.label,\n    });\n    if (typeof accessibleName !== \"string\" || accessibleName.trim().length === 0) {\n      throw new TypeError(\n        \"Steps composeAccessibleName must return a non-empty string\",\n      );\n    }\n    return {\n      ...step,\n      status,\n      position,\n      total,\n      accessibleName,\n      statusLabel: options.statusLabels[status],\n    };\n  });\n}\n\nexport const stepsRecipe = {\n  slots: [\n    \"root\",\n    \"step\",\n    \"indicator\",\n    \"marker\",\n    \"connector\",\n    \"label\",\n    \"description\",\n  ] as const,\n  gap: spacing.xs,\n  indicator: {\n    size: glyph.md,\n    borderWidth: stroke.default,\n    activeBorderWidth: stroke.strong,\n    /** null means the renderer shows the step's own position number instead of a glyph. */\n    marks: {\n      pending: null,\n      current: null,\n      complete: \"check\",\n      error: \"error\",\n    },\n    border: {\n      pending: semanticColors.border.default,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.border,\n      error: semanticColors.feedback.danger.border,\n    },\n    background: {\n      pending: null,\n      current: null,\n      complete: semanticColors.feedback.success.badgeBackground,\n      error: semanticColors.feedback.danger.badgeBackground,\n    },\n    content: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.foreground,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  connector: {\n    height: stroke.default,\n    tone: {\n      reached: semanticColors.content.brand,\n      unreached: semanticColors.border.default,\n    },\n  },\n  label: {\n    textVariant: \"label\",\n    fontWeight: fontWeight.medium,\n    color: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.primary,\n      complete: semanticColors.content.primary,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  description: {\n    textVariant: \"caption\",\n    color: semanticColors.content.secondary,\n  },\n} as const satisfies {\n  slots: readonly string[];\n  gap: number;\n  indicator: {\n    size: number;\n    borderWidth: number;\n    activeBorderWidth: number;\n    marks: Record<StepStatus, SemanticIconName | null>;\n    border: Record<StepStatus, ColorReference>;\n    background: Record<StepStatus, ColorReference | null>;\n    content: Record<StepStatus, ColorReference>;\n  };\n  connector: {\n    height: number;\n    tone: Record<\"reached\" | \"unreached\", ColorReference>;\n  };\n  label: {\n    textVariant: TextVariant;\n    fontWeight: FontWeightValue;\n    color: Record<StepStatus, ColorReference>;\n  };\n  description: {\n    textVariant: TextVariant;\n    color: ColorReference;\n  };\n};\n"]}

package/dist/tag.d.ts

@@ -121,7 +121,7 @@ export declare const tagRecipe: {
         readonly paddingHorizontal: 4;
         readonly gap: 4;
         readonly textVariant: "caption";
-        readonly fontWeight: "600";
+        readonly fontWeight: "500";
     };
     readonly radius: "sm";
     readonly borderWidth: 1;

package/dist/tag.js

@@ -75,7 +75,7 @@ export const tagRecipe = {
         paddingHorizontal: spacing.xxs,
         gap: spacing.xxs,
         textVariant: "caption",
-        fontWeight: fontWeight.semibold,
+        fontWeight: fontWeight.medium,
     },
     radius: "sm",
     borderWidth: stroke.default,

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../src/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveColorReference,\n  type ColorReferencePalette,\n} from \"./color-references.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\n\nexport type TagTone = \"neutral\" | \"info\" | \"success\" | \"attention\" | \"brand\";\n\nexport const tagDefaults = {\n  tone: \"neutral\",\n} as const satisfies Readonly<{ tone: TagTone }>;\n\n/**\n * A single piece of static metadata (a position, a grade, a season). Tag has\n * no interaction axis at all — no selected, no pressed, no closable. Removing\n * or toggling a tag is deselection, which belongs to `Chip`.\n */\nexport type TagDescriptor = Readonly<{\n  label: string;\n  tone?: TagTone;\n}>;\n\nexport type ResolvedTagDescriptor = Readonly<{\n  label: string;\n  tone: TagTone;\n}>;\n\nfunction assertCopy(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Tag ${field} must not be empty`);\n  }\n}\n\nconst supportedTones: readonly TagTone[] = [\n  \"neutral\",\n  \"info\",\n  \"success\",\n  \"attention\",\n  \"brand\",\n];\n\nexport function validateTagDescriptor(descriptor: TagDescriptor): void {\n  assertCopy(descriptor.label, \"label\");\n  if (\n    descriptor.tone !== undefined &&\n    !supportedTones.includes(descriptor.tone)\n  ) {\n    throw new TypeError(`Unsupported Tag tone: ${String(descriptor.tone)}`);\n  }\n}\n\nexport function resolveTagDescriptor(\n  descriptor: TagDescriptor,\n): ResolvedTagDescriptor {\n  validateTagDescriptor(descriptor);\n  return {\n    label: descriptor.label,\n    tone: descriptor.tone ?? tagDefaults.tone,\n  };\n}\n\n/**\n * Rectangular, not the pill `radius.full` that `chipRecipe` and `badgeRecipe`\n * use, so a static Tag never reads as a pressable Chip or a status Badge at a\n * glance. No `states` and no `focus` contract: nothing here is ever pressed\n * or focused.\n */\nexport const tagRecipe = {\n  slots: [\"root\", \"label\"] as const,\n  defaults: tagDefaults,\n  tones: {\n    // Same as badgeRecipe: a canvas plate without a border vanished on the canvas (2026-10-17 review E3).\n    neutral: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.secondary,\n      border: semanticColors.border.default,\n    },\n    brand: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.brand,\n      border: semanticColors.border.default,\n    },\n    info: {\n      background: semanticColors.canvas,\n      content: semanticColors.feedback.info.foreground,\n      border: semanticColors.feedback.info.border,\n    },\n    success: {\n      background: semanticColors.feedback.success.badgeBackground,\n      content: semanticColors.feedback.success.foreground,\n      border: semanticColors.feedback.success.border,\n    },\n    attention: {\n      background: semanticColors.feedback.attention.badgeBackground,\n      content: semanticColors.feedback.attention.foreground,\n      border: semanticColors.feedback.attention.border,\n    },\n  },\n  size: {\n    // Static metadata still participates in Dynamic Type. A fixed 20px frame\n    // clips the label at accessibility sizes; minHeight preserves the compact\n    // base shape while allowing the intrinsic line box to grow.\n    minHeight: 20,\n    paddingHorizontal: spacing.xxs,\n    gap: spacing.xxs,\n    textVariant: \"caption\",\n    fontWeight: fontWeight.semibold,\n  },\n  radius: \"sm\",\n  borderWidth: stroke.default,\n} as const;\n\nexport type ResolvedTagPresentation = Readonly<{\n  background: string;\n  content: string;\n  border: string | null;\n}>;\n\n/** Resolve the same Tag recipe for non-CSS renderers. */\nexport function resolveTagPresentation(\n  tone: TagTone,\n  palette: ColorReferencePalette,\n): ResolvedTagPresentation {\n  const contract = tagRecipe.tones[tone];\n  return {\n    background: resolveColorReference(contract.background, palette),\n    content: resolveColorReference(contract.content, palette),\n    border:\n      contract.border === null\n        ? null\n        : resolveColorReference(contract.border, palette),\n  };\n}\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../src/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveColorReference,\n  type ColorReferencePalette,\n} from \"./color-references.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\n\nexport type TagTone = \"neutral\" | \"info\" | \"success\" | \"attention\" | \"brand\";\n\nexport const tagDefaults = {\n  tone: \"neutral\",\n} as const satisfies Readonly<{ tone: TagTone }>;\n\n/**\n * A single piece of static metadata (a position, a grade, a season). Tag has\n * no interaction axis at all — no selected, no pressed, no closable. Removing\n * or toggling a tag is deselection, which belongs to `Chip`.\n */\nexport type TagDescriptor = Readonly<{\n  label: string;\n  tone?: TagTone;\n}>;\n\nexport type ResolvedTagDescriptor = Readonly<{\n  label: string;\n  tone: TagTone;\n}>;\n\nfunction assertCopy(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Tag ${field} must not be empty`);\n  }\n}\n\nconst supportedTones: readonly TagTone[] = [\n  \"neutral\",\n  \"info\",\n  \"success\",\n  \"attention\",\n  \"brand\",\n];\n\nexport function validateTagDescriptor(descriptor: TagDescriptor): void {\n  assertCopy(descriptor.label, \"label\");\n  if (\n    descriptor.tone !== undefined &&\n    !supportedTones.includes(descriptor.tone)\n  ) {\n    throw new TypeError(`Unsupported Tag tone: ${String(descriptor.tone)}`);\n  }\n}\n\nexport function resolveTagDescriptor(\n  descriptor: TagDescriptor,\n): ResolvedTagDescriptor {\n  validateTagDescriptor(descriptor);\n  return {\n    label: descriptor.label,\n    tone: descriptor.tone ?? tagDefaults.tone,\n  };\n}\n\n/**\n * Rectangular, not the pill `radius.full` that `chipRecipe` and `badgeRecipe`\n * use, so a static Tag never reads as a pressable Chip or a status Badge at a\n * glance. No `states` and no `focus` contract: nothing here is ever pressed\n * or focused.\n */\nexport const tagRecipe = {\n  slots: [\"root\", \"label\"] as const,\n  defaults: tagDefaults,\n  tones: {\n    // Same as badgeRecipe: a canvas plate without a border vanished on the canvas (2026-10-17 review E3).\n    neutral: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.secondary,\n      border: semanticColors.border.default,\n    },\n    brand: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.brand,\n      border: semanticColors.border.default,\n    },\n    info: {\n      background: semanticColors.canvas,\n      content: semanticColors.feedback.info.foreground,\n      border: semanticColors.feedback.info.border,\n    },\n    success: {\n      background: semanticColors.feedback.success.badgeBackground,\n      content: semanticColors.feedback.success.foreground,\n      border: semanticColors.feedback.success.border,\n    },\n    attention: {\n      background: semanticColors.feedback.attention.badgeBackground,\n      content: semanticColors.feedback.attention.foreground,\n      border: semanticColors.feedback.attention.border,\n    },\n  },\n  size: {\n    // Static metadata still participates in Dynamic Type. A fixed 20px frame\n    // clips the label at accessibility sizes; minHeight preserves the compact\n    // base shape while allowing the intrinsic line box to grow.\n    minHeight: 20,\n    paddingHorizontal: spacing.xxs,\n    gap: spacing.xxs,\n    textVariant: \"caption\",\n    fontWeight: fontWeight.medium,\n  },\n  radius: \"sm\",\n  borderWidth: stroke.default,\n} as const;\n\nexport type ResolvedTagPresentation = Readonly<{\n  background: string;\n  content: string;\n  border: string | null;\n}>;\n\n/** Resolve the same Tag recipe for non-CSS renderers. */\nexport function resolveTagPresentation(\n  tone: TagTone,\n  palette: ColorReferencePalette,\n): ResolvedTagPresentation {\n  const contract = tagRecipe.tones[tone];\n  return {\n    background: resolveColorReference(contract.background, palette),\n    content: resolveColorReference(contract.content, palette),\n    border:\n      contract.border === null\n        ? null\n        : resolveColorReference(contract.border, palette),\n  };\n}\n"]}

package/dist/timeline.d.ts

@@ -128,7 +128,7 @@ export declare const timelineRecipe: {
     };
     readonly label: {
         readonly textVariant: "body";
-        readonly fontWeight: "600";
+        readonly fontWeight: "500";
         readonly color: Readonly<{
             source: "theme";
             key: "text";

package/dist/timeline.js

@@ -116,7 +116,7 @@ export const timelineRecipe = {
     },
     label: {
         textVariant: "body",
-        fontWeight: fontWeight.semibold,
+        fontWeight: fontWeight.medium,
         color: semanticColors.content.primary,
     },
     description: {

package/dist/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../src/timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * Timeline is a record of what already happened, not a position in a flow —\n * that is Steps' job (see docs/steps.md and the boundary note in\n * docs/timeline.md). Because there is no cursor, Timeline never derives a\n * status from position: every item is simply \"happened\", and the connector\n * between items carries no reached/unreached meaning. Ant Design's\n * alternating left/right layout is intentionally not reproduced — it is a\n * Web-only decoration with no equivalent in a single-direction native list;\n * see docs/timeline.md for the rationale.\n */\nexport type TimelineItemTone = \"neutral\" | \"info\" | \"success\" | \"attention\";\n\nexport type TimelineItemDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  /** Product-formatted \"when\" copy, e.g. \"3회 초\" or \"2024-01-15\". Timeline never formats a clock, inning, or date itself. */\n  timestamp?: string;\n  /** Product-formatted supplementary detail, e.g. \"안타로 1루 진출\". */\n  description?: string;\n  tone?: TimelineItemTone;\n}>;\n\nexport type TimelineDescriptor<Id extends string = string> = Readonly<{\n  items: readonly TimelineItemDescriptor<Id>[];\n}>;\n\nexport const timelineDefaults = {\n  itemTone: \"neutral\",\n} as const satisfies Readonly<{ itemTone: TimelineItemTone }>;\n\nexport type TimelineAccessibleNameInfo = Readonly<{\n  position: number;\n  total: number;\n  label: string;\n}>;\n\n/**\n * Products own the exact phrase order and counter-word grammar, same reason\n * Steps does not assemble its own accessible name (see docs/steps.md).\n */\nexport type ComposeTimelineAccessibleName = (\n  info: TimelineAccessibleNameInfo,\n) => string;\n\nexport type ResolvedTimelineItemDescriptor<Id extends string = string> = Omit<\n  TimelineItemDescriptor<Id>,\n  \"tone\"\n> &\n  Readonly<{\n    tone: TimelineItemTone;\n    /** 1-indexed so position and label both preserve reading order for renderers. */\n    position: number;\n    total: number;\n    /** Order + label, for platforms without built-in list-position semantics. */\n    accessibleName: string;\n  }>;\n\nexport type ResolveTimelineOptions = Readonly<{\n  composeAccessibleName: ComposeTimelineAccessibleName;\n}>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Timeline ${field} must not be empty`);\n  }\n}\n\nexport function validateTimelineItemDescriptor<Id extends string>(\n  item: TimelineItemDescriptor<Id>,\n): void {\n  assertNonEmpty(item.id, \"item id\");\n  if (item.id !== item.id.trim()) {\n    throw new TypeError(\"Timeline item id must not start or end with whitespace\");\n  }\n  assertNonEmpty(item.label, \"item label\");\n  if (item.timestamp !== undefined) {\n    assertNonEmpty(item.timestamp, \"item timestamp\");\n  }\n  if (item.description !== undefined) {\n    assertNonEmpty(item.description, \"item description\");\n  }\n  if (\n    item.tone !== undefined &&\n    item.tone !== \"neutral\" &&\n    item.tone !== \"info\" &&\n    item.tone !== \"success\" &&\n    item.tone !== \"attention\"\n  ) {\n    throw new TypeError(`Unsupported Timeline item tone: ${String(item.tone)}`);\n  }\n}\n\nexport function validateTimelineDescriptor<Id extends string>(\n  descriptor: TimelineDescriptor<Id>,\n): void {\n  if (descriptor.items.length === 0) {\n    throw new RangeError(\"Timeline must contain at least one item\");\n  }\n  const ids = new Set<Id>();\n  for (const item of descriptor.items) {\n    validateTimelineItemDescriptor(item);\n    if (ids.has(item.id)) {\n      throw new TypeError(`Duplicate Timeline item id: ${item.id}`);\n    }\n    ids.add(item.id);\n  }\n}\n\n/**\n * Attaches order-preserving accessible names to an already-ordered item list.\n * Unlike Steps, no status is derived from position — every item already\n * happened, so this only adds order and the resolved tone default.\n */\nexport function resolveTimelineDescriptor<Id extends string>(\n  descriptor: TimelineDescriptor<Id>,\n  options: ResolveTimelineOptions,\n): readonly ResolvedTimelineItemDescriptor<Id>[] {\n  validateTimelineDescriptor(descriptor);\n  if (typeof options.composeAccessibleName !== \"function\") {\n    throw new TypeError(\"Timeline composeAccessibleName must be a function\");\n  }\n\n  const total = descriptor.items.length;\n  return descriptor.items.map((item, index) => {\n    const position = index + 1;\n    const accessibleName = options.composeAccessibleName({\n      position,\n      total,\n      label: item.label,\n    });\n    if (typeof accessibleName !== \"string\" || accessibleName.trim().length === 0) {\n      throw new TypeError(\n        \"Timeline composeAccessibleName must return a non-empty string\",\n      );\n    }\n    return {\n      ...item,\n      tone: item.tone ?? timelineDefaults.itemTone,\n      position,\n      total,\n      accessibleName,\n    };\n  });\n}\n\nexport const timelineRecipe = {\n  slots: [\n    \"root\",\n    \"item\",\n    \"dot\",\n    \"connector\",\n    \"content\",\n    \"timestamp\",\n    \"label\",\n    \"description\",\n  ] as const,\n  gap: spacing.md,\n  dot: {\n    diameter: 10,\n    borderWidth: stroke.default,\n    tones: {\n      neutral: { border: null, fill: semanticColors.content.secondary },\n      info: {\n        border: semanticColors.feedback.info.border,\n        fill: semanticColors.feedback.info.foreground,\n      },\n      success: {\n        border: semanticColors.feedback.success.border,\n        fill: semanticColors.feedback.success.foreground,\n      },\n      attention: {\n        border: semanticColors.feedback.attention.border,\n        fill: semanticColors.feedback.attention.foreground,\n      },\n    },\n  },\n  /**\n   * A single tone, unlike stepsRecipe.connector's reached/unreached pair —\n   * Timeline has no cursor, so no segment is \"not yet reached\".\n   */\n  connector: {\n    width: stroke.default,\n    tone: semanticColors.border.default,\n  },\n  timestamp: {\n    textVariant: \"caption\",\n    color: semanticColors.content.secondary,\n  },\n  label: {\n    textVariant: \"body\",\n    fontWeight: fontWeight.semibold,\n    color: semanticColors.content.primary,\n  },\n  description: {\n    textVariant: \"body\",\n    color: semanticColors.content.body,\n  },\n} as const satisfies {\n  slots: readonly string[];\n  gap: number;\n  dot: {\n    diameter: number;\n    borderWidth: number;\n    tones: Record<\n      TimelineItemTone,\n      { border: ColorReference | null; fill: ColorReference }\n    >;\n  };\n  connector: {\n    width: number;\n    tone: ColorReference;\n  };\n  timestamp: { textVariant: TextVariant; color: ColorReference };\n  label: { textVariant: TextVariant; fontWeight: FontWeightValue; color: ColorReference };\n  description: { textVariant: TextVariant; color: ColorReference };\n};\n"]}
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../src/timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * Timeline is a record of what already happened, not a position in a flow —\n * that is Steps' job (see docs/steps.md and the boundary note in\n * docs/timeline.md). Because there is no cursor, Timeline never derives a\n * status from position: every item is simply \"happened\", and the connector\n * between items carries no reached/unreached meaning. Ant Design's\n * alternating left/right layout is intentionally not reproduced — it is a\n * Web-only decoration with no equivalent in a single-direction native list;\n * see docs/timeline.md for the rationale.\n */\nexport type TimelineItemTone = \"neutral\" | \"info\" | \"success\" | \"attention\";\n\nexport type TimelineItemDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  /** Product-formatted \"when\" copy, e.g. \"3회 초\" or \"2024-01-15\". Timeline never formats a clock, inning, or date itself. */\n  timestamp?: string;\n  /** Product-formatted supplementary detail, e.g. \"안타로 1루 진출\". */\n  description?: string;\n  tone?: TimelineItemTone;\n}>;\n\nexport type TimelineDescriptor<Id extends string = string> = Readonly<{\n  items: readonly TimelineItemDescriptor<Id>[];\n}>;\n\nexport const timelineDefaults = {\n  itemTone: \"neutral\",\n} as const satisfies Readonly<{ itemTone: TimelineItemTone }>;\n\nexport type TimelineAccessibleNameInfo = Readonly<{\n  position: number;\n  total: number;\n  label: string;\n}>;\n\n/**\n * Products own the exact phrase order and counter-word grammar, same reason\n * Steps does not assemble its own accessible name (see docs/steps.md).\n */\nexport type ComposeTimelineAccessibleName = (\n  info: TimelineAccessibleNameInfo,\n) => string;\n\nexport type ResolvedTimelineItemDescriptor<Id extends string = string> = Omit<\n  TimelineItemDescriptor<Id>,\n  \"tone\"\n> &\n  Readonly<{\n    tone: TimelineItemTone;\n    /** 1-indexed so position and label both preserve reading order for renderers. */\n    position: number;\n    total: number;\n    /** Order + label, for platforms without built-in list-position semantics. */\n    accessibleName: string;\n  }>;\n\nexport type ResolveTimelineOptions = Readonly<{\n  composeAccessibleName: ComposeTimelineAccessibleName;\n}>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Timeline ${field} must not be empty`);\n  }\n}\n\nexport function validateTimelineItemDescriptor<Id extends string>(\n  item: TimelineItemDescriptor<Id>,\n): void {\n  assertNonEmpty(item.id, \"item id\");\n  if (item.id !== item.id.trim()) {\n    throw new TypeError(\"Timeline item id must not start or end with whitespace\");\n  }\n  assertNonEmpty(item.label, \"item label\");\n  if (item.timestamp !== undefined) {\n    assertNonEmpty(item.timestamp, \"item timestamp\");\n  }\n  if (item.description !== undefined) {\n    assertNonEmpty(item.description, \"item description\");\n  }\n  if (\n    item.tone !== undefined &&\n    item.tone !== \"neutral\" &&\n    item.tone !== \"info\" &&\n    item.tone !== \"success\" &&\n    item.tone !== \"attention\"\n  ) {\n    throw new TypeError(`Unsupported Timeline item tone: ${String(item.tone)}`);\n  }\n}\n\nexport function validateTimelineDescriptor<Id extends string>(\n  descriptor: TimelineDescriptor<Id>,\n): void {\n  if (descriptor.items.length === 0) {\n    throw new RangeError(\"Timeline must contain at least one item\");\n  }\n  const ids = new Set<Id>();\n  for (const item of descriptor.items) {\n    validateTimelineItemDescriptor(item);\n    if (ids.has(item.id)) {\n      throw new TypeError(`Duplicate Timeline item id: ${item.id}`);\n    }\n    ids.add(item.id);\n  }\n}\n\n/**\n * Attaches order-preserving accessible names to an already-ordered item list.\n * Unlike Steps, no status is derived from position — every item already\n * happened, so this only adds order and the resolved tone default.\n */\nexport function resolveTimelineDescriptor<Id extends string>(\n  descriptor: TimelineDescriptor<Id>,\n  options: ResolveTimelineOptions,\n): readonly ResolvedTimelineItemDescriptor<Id>[] {\n  validateTimelineDescriptor(descriptor);\n  if (typeof options.composeAccessibleName !== \"function\") {\n    throw new TypeError(\"Timeline composeAccessibleName must be a function\");\n  }\n\n  const total = descriptor.items.length;\n  return descriptor.items.map((item, index) => {\n    const position = index + 1;\n    const accessibleName = options.composeAccessibleName({\n      position,\n      total,\n      label: item.label,\n    });\n    if (typeof accessibleName !== \"string\" || accessibleName.trim().length === 0) {\n      throw new TypeError(\n        \"Timeline composeAccessibleName must return a non-empty string\",\n      );\n    }\n    return {\n      ...item,\n      tone: item.tone ?? timelineDefaults.itemTone,\n      position,\n      total,\n      accessibleName,\n    };\n  });\n}\n\nexport const timelineRecipe = {\n  slots: [\n    \"root\",\n    \"item\",\n    \"dot\",\n    \"connector\",\n    \"content\",\n    \"timestamp\",\n    \"label\",\n    \"description\",\n  ] as const,\n  gap: spacing.md,\n  dot: {\n    diameter: 10,\n    borderWidth: stroke.default,\n    tones: {\n      neutral: { border: null, fill: semanticColors.content.secondary },\n      info: {\n        border: semanticColors.feedback.info.border,\n        fill: semanticColors.feedback.info.foreground,\n      },\n      success: {\n        border: semanticColors.feedback.success.border,\n        fill: semanticColors.feedback.success.foreground,\n      },\n      attention: {\n        border: semanticColors.feedback.attention.border,\n        fill: semanticColors.feedback.attention.foreground,\n      },\n    },\n  },\n  /**\n   * A single tone, unlike stepsRecipe.connector's reached/unreached pair —\n   * Timeline has no cursor, so no segment is \"not yet reached\".\n   */\n  connector: {\n    width: stroke.default,\n    tone: semanticColors.border.default,\n  },\n  timestamp: {\n    textVariant: \"caption\",\n    color: semanticColors.content.secondary,\n  },\n  label: {\n    textVariant: \"body\",\n    fontWeight: fontWeight.medium,\n    color: semanticColors.content.primary,\n  },\n  description: {\n    textVariant: \"body\",\n    color: semanticColors.content.body,\n  },\n} as const satisfies {\n  slots: readonly string[];\n  gap: number;\n  dot: {\n    diameter: number;\n    borderWidth: number;\n    tones: Record<\n      TimelineItemTone,\n      { border: ColorReference | null; fill: ColorReference }\n    >;\n  };\n  connector: {\n    width: number;\n    tone: ColorReference;\n  };\n  timestamp: { textVariant: TextVariant; color: ColorReference };\n  label: { textVariant: TextVariant; fontWeight: FontWeightValue; color: ColorReference };\n  description: { textVariant: TextVariant; color: ColorReference };\n};\n"]}

package/dist/top.d.ts

@@ -47,16 +47,16 @@ export declare const topRecipe: {
             readonly title: {
                 readonly fontSize: 20;
                 readonly lineHeight: 28;
-                readonly fontWeight: "600";
+                readonly fontWeight: "500";
             };
             readonly paddingTop: 16;
             readonly paddingBottom: 12;
         };
         readonly large: {
             readonly title: {
-                readonly fontSize: 32;
-                readonly lineHeight: 40;
-                readonly fontWeight: "700";
+                readonly fontSize: 24;
+                readonly lineHeight: 32;
+                readonly fontWeight: "500";
             };
             readonly paddingTop: 24;
             readonly paddingBottom: 16;

package/dist/top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../src/top.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;CAGiD,CAAC;AAQ1E,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAkBrE;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkBpB,uDAAuD;;;;;CAexD,CAAC;AAEF,eAAO,MAAM,WAAW;IACtB,6CAA6C;;;;;;;;;;;;;;;CAaV,CAAC"}
+{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../src/top.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;CAGiD,CAAC;AAQ1E,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAkBrE;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoBpB,uDAAuD;;;;;CAexD,CAAC;AAEF,eAAO,MAAM,WAAW;IACtB,6CAA6C;;;;;;;;;;;;;;;CAaV,CAAC"}

package/dist/top.js

@@ -37,7 +37,9 @@ export const topRecipe = {
     defaults: { size: topDefaults.size },
     sizes: {
         medium: { title: typography.titleLarge, paddingTop: spacing.md, paddingBottom: spacing.sm },
-        large: { title: heading.level2, paddingTop: spacing.xl, paddingBottom: spacing.md },
+        // The screen's first title uses the HJM ceiling, `heading.level3` (24). It was `heading.level2` (32) until the
+        // display tier was removed (2026-10-17 user decision, "글자 너무 커").
+        large: { title: heading.level3, paddingTop: spacing.xl, paddingBottom: spacing.md },
     },
     eyebrow: {
         color: semanticColors.content.brand,

package/dist/top.js.map

@@ -1 +1 @@
-{"version":3,"file":"top.js","sourceRoot":"","sources":["../src/top.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BehaviorContract } from \"./behaviors.js\";\nimport type { ColorReference } from \"./color-references.js\";\nimport { heading, spacing, typography } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * 화면 본문의 **첫 블록**이다. `TopBar`(상단 내비게이션 바)와 다른 자리이고, 그 차이가\n * 이 계약의 존재 이유다.\n *\n * - `TopBar`는 화면에 고정된 크롬이다 — 뒤로가기, 화면 이름, 액션. 스크롤과 무관하게\n *   붙어 있고 safe area를 다룬다.\n * - `Top`은 본문이다 — 스크롤과 함께 올라가고, 사용자가 \"이 화면이 무엇을 묻는지\"\n *   읽는 문장이 여기 있다. 토스 TDS가 \"Top과 ListRow로 화면 대부분을 만든다\"고\n *   말하는 그 Top이고, 지금까지 BurnTok `AppScreenHeader`·Taground `screen-shell`·\n *   Diairy `DetailPanel`이 각자 다시 만들던 블록이다.\n *\n * `Section`과도 다르다. Section은 본문 **중간**의 묶음 제목이라 heading level이 화면\n * 구조에 종속되지만, Top은 화면당 하나뿐인 첫 제목이라 기본이 `h1`이다. 그래서 두\n * 계약을 합치지 않았다 — 합치면 \"이 Section이 화면의 h1인가\"를 매번 물어야 한다.\n */\nexport type TopSize = \"medium\" | \"large\";\n\nexport type TopDescriptor = Readonly<{\n  title: string;\n  /** 제목 위 한 줄. 카테고리·단계처럼 제목을 한정하는 짧은 말. */\n  eyebrow?: string;\n  /** 제목 아래 보조 문장. 길면 줄바꿈되며 잘리지 않는다. */\n  description?: string;\n  size?: TopSize;\n  /**\n   * 문서 구조상의 제목 단계. 화면당 하나인 Top은 `1`이 기본이지만, 한 라우트가\n   * 여러 화면을 담는 경우(시트 안의 화면 등) 제품이 낮출 수 있다.\n   */\n  headingLevel?: 1 | 2 | 3;\n}>;\n\nexport const topDefaults = {\n  size: \"large\",\n  headingLevel: 1,\n} as const satisfies Readonly<{ size: TopSize; headingLevel: 1 | 2 | 3 }>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (typeof value !== \"string\" || value.trim().length === 0) {\n    throw new TypeError(`Top ${field} must not be empty`);\n  }\n}\n\nexport function validateTopDescriptor(descriptor: TopDescriptor): void {\n  if (descriptor === null || typeof descriptor !== \"object\") {\n    throw new TypeError(\"Top descriptor must be an object\");\n  }\n  assertNonEmpty(descriptor.title, \"title\");\n  if (descriptor.eyebrow !== undefined) assertNonEmpty(descriptor.eyebrow, \"eyebrow\");\n  if (descriptor.description !== undefined) {\n    assertNonEmpty(descriptor.description, \"description\");\n  }\n  if (descriptor.size !== undefined && descriptor.size !== \"medium\" && descriptor.size !== \"large\") {\n    throw new TypeError(`Unsupported Top size: ${String(descriptor.size)}`);\n  }\n  if (\n    descriptor.headingLevel !== undefined &&\n    ![1, 2, 3].includes(descriptor.headingLevel)\n  ) {\n    throw new TypeError(`Unsupported Top headingLevel: ${String(descriptor.headingLevel)}`);\n  }\n}\n\n/**\n * `large`는 화면의 첫 제목, `medium`은 시트·모달 안의 첫 제목이다. 두 단계뿐인 이유는\n * 세 번째가 필요해지는 자리가 곧 `Section`이기 때문이다 — 크기를 더 늘리는 대신 다른\n * 컴포넌트를 쓰라는 신호로 둔다.\n */\nexport const topRecipe = {\n  slots: [\"root\", \"eyebrow\", \"title\", \"description\", \"trailing\"] as const,\n  defaults: { size: topDefaults.size },\n  sizes: {\n    medium: { title: typography.titleLarge, paddingTop: spacing.md, paddingBottom: spacing.sm },\n    large: { title: heading.level2, paddingTop: spacing.xl, paddingBottom: spacing.md },\n  },\n  eyebrow: {\n    color: semanticColors.content.brand,\n    textVariant: \"label\" as const,\n    marginBottom: spacing.xxs,\n  },\n  title: { color: semanticColors.content.primary },\n  description: {\n    color: semanticColors.content.body,\n    textVariant: \"body\" as const,\n    marginTop: spacing.xs,\n  },\n  /** 제목 줄 오른쪽 보조 행동. 본문이므로 TopBar처럼 아이콘 전용을 강제하지 않는다. */\n  trailing: { gap: spacing.xs },\n  gap: spacing.xs,\n} as const satisfies {\n  slots: readonly [\"root\", \"eyebrow\", \"title\", \"description\", \"trailing\"];\n  defaults: { size: TopSize };\n  sizes: Readonly<{\n    medium: { title: typeof typography.titleLarge; paddingTop: number; paddingBottom: number };\n    large: { title: typeof heading.level2; paddingTop: number; paddingBottom: number };\n  }>;\n  eyebrow: { color: ColorReference; textVariant: \"label\"; marginBottom: number };\n  title: { color: ColorReference };\n  description: { color: ColorReference; textVariant: \"body\"; marginTop: number };\n  trailing: { gap: number };\n  gap: number;\n};\n\nexport const topBehavior = {\n  /** 상태 축이 없다 — 화면이 제목을 바꾸면 그냥 다른 문자열을 넘긴다. */\n  controlled: [],\n  inputs: [\"title\", \"eyebrow\", \"description\", \"size\", \"headingLevel\"],\n  stateAxes: {},\n  web: { roles: [\"heading\"], keyboard: [], focus: \"none\" },\n  native: { roles: [\"header\"], states: [], actions: [] },\n  scenarios: [\n    \"the-title-is-a-real-heading-element-at-the-declared-level-not-styled-text\",\n    \"top-is-body-content-that-scrolls-away-while-topbar-is-fixed-chrome\",\n    \"description-wraps-instead-of-truncating-so-large-text-never-hides-the-question\",\n    \"a-trailing-action-shares-the-title-row-and-drops-below-it-when-space-runs-out\",\n    \"eyebrow-never-carries-information-the-title-does-not-repeat-in-some-form\",\n  ],\n} as const satisfies BehaviorContract;\n"]}
+{"version":3,"file":"top.js","sourceRoot":"","sources":["../src/top.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BehaviorContract } from \"./behaviors.js\";\nimport type { ColorReference } from \"./color-references.js\";\nimport { heading, spacing, typography } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * 화면 본문의 **첫 블록**이다. `TopBar`(상단 내비게이션 바)와 다른 자리이고, 그 차이가\n * 이 계약의 존재 이유다.\n *\n * - `TopBar`는 화면에 고정된 크롬이다 — 뒤로가기, 화면 이름, 액션. 스크롤과 무관하게\n *   붙어 있고 safe area를 다룬다.\n * - `Top`은 본문이다 — 스크롤과 함께 올라가고, 사용자가 \"이 화면이 무엇을 묻는지\"\n *   읽는 문장이 여기 있다. 토스 TDS가 \"Top과 ListRow로 화면 대부분을 만든다\"고\n *   말하는 그 Top이고, 지금까지 BurnTok `AppScreenHeader`·Taground `screen-shell`·\n *   Diairy `DetailPanel`이 각자 다시 만들던 블록이다.\n *\n * `Section`과도 다르다. Section은 본문 **중간**의 묶음 제목이라 heading level이 화면\n * 구조에 종속되지만, Top은 화면당 하나뿐인 첫 제목이라 기본이 `h1`이다. 그래서 두\n * 계약을 합치지 않았다 — 합치면 \"이 Section이 화면의 h1인가\"를 매번 물어야 한다.\n */\nexport type TopSize = \"medium\" | \"large\";\n\nexport type TopDescriptor = Readonly<{\n  title: string;\n  /** 제목 위 한 줄. 카테고리·단계처럼 제목을 한정하는 짧은 말. */\n  eyebrow?: string;\n  /** 제목 아래 보조 문장. 길면 줄바꿈되며 잘리지 않는다. */\n  description?: string;\n  size?: TopSize;\n  /**\n   * 문서 구조상의 제목 단계. 화면당 하나인 Top은 `1`이 기본이지만, 한 라우트가\n   * 여러 화면을 담는 경우(시트 안의 화면 등) 제품이 낮출 수 있다.\n   */\n  headingLevel?: 1 | 2 | 3;\n}>;\n\nexport const topDefaults = {\n  size: \"large\",\n  headingLevel: 1,\n} as const satisfies Readonly<{ size: TopSize; headingLevel: 1 | 2 | 3 }>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (typeof value !== \"string\" || value.trim().length === 0) {\n    throw new TypeError(`Top ${field} must not be empty`);\n  }\n}\n\nexport function validateTopDescriptor(descriptor: TopDescriptor): void {\n  if (descriptor === null || typeof descriptor !== \"object\") {\n    throw new TypeError(\"Top descriptor must be an object\");\n  }\n  assertNonEmpty(descriptor.title, \"title\");\n  if (descriptor.eyebrow !== undefined) assertNonEmpty(descriptor.eyebrow, \"eyebrow\");\n  if (descriptor.description !== undefined) {\n    assertNonEmpty(descriptor.description, \"description\");\n  }\n  if (descriptor.size !== undefined && descriptor.size !== \"medium\" && descriptor.size !== \"large\") {\n    throw new TypeError(`Unsupported Top size: ${String(descriptor.size)}`);\n  }\n  if (\n    descriptor.headingLevel !== undefined &&\n    ![1, 2, 3].includes(descriptor.headingLevel)\n  ) {\n    throw new TypeError(`Unsupported Top headingLevel: ${String(descriptor.headingLevel)}`);\n  }\n}\n\n/**\n * `large`는 화면의 첫 제목, `medium`은 시트·모달 안의 첫 제목이다. 두 단계뿐인 이유는\n * 세 번째가 필요해지는 자리가 곧 `Section`이기 때문이다 — 크기를 더 늘리는 대신 다른\n * 컴포넌트를 쓰라는 신호로 둔다.\n */\nexport const topRecipe = {\n  slots: [\"root\", \"eyebrow\", \"title\", \"description\", \"trailing\"] as const,\n  defaults: { size: topDefaults.size },\n  sizes: {\n    medium: { title: typography.titleLarge, paddingTop: spacing.md, paddingBottom: spacing.sm },\n    // The screen's first title uses the HJM ceiling, `heading.level3` (24). It was `heading.level2` (32) until the\n    // display tier was removed (2026-10-17 user decision, \"글자 너무 커\").\n    large: { title: heading.level3, paddingTop: spacing.xl, paddingBottom: spacing.md },\n  },\n  eyebrow: {\n    color: semanticColors.content.brand,\n    textVariant: \"label\" as const,\n    marginBottom: spacing.xxs,\n  },\n  title: { color: semanticColors.content.primary },\n  description: {\n    color: semanticColors.content.body,\n    textVariant: \"body\" as const,\n    marginTop: spacing.xs,\n  },\n  /** 제목 줄 오른쪽 보조 행동. 본문이므로 TopBar처럼 아이콘 전용을 강제하지 않는다. */\n  trailing: { gap: spacing.xs },\n  gap: spacing.xs,\n} as const satisfies {\n  slots: readonly [\"root\", \"eyebrow\", \"title\", \"description\", \"trailing\"];\n  defaults: { size: TopSize };\n  sizes: Readonly<{\n    medium: { title: typeof typography.titleLarge; paddingTop: number; paddingBottom: number };\n    large: { title: typeof heading.level3; paddingTop: number; paddingBottom: number };\n  }>;\n  eyebrow: { color: ColorReference; textVariant: \"label\"; marginBottom: number };\n  title: { color: ColorReference };\n  description: { color: ColorReference; textVariant: \"body\"; marginTop: number };\n  trailing: { gap: number };\n  gap: number;\n};\n\nexport const topBehavior = {\n  /** 상태 축이 없다 — 화면이 제목을 바꾸면 그냥 다른 문자열을 넘긴다. */\n  controlled: [],\n  inputs: [\"title\", \"eyebrow\", \"description\", \"size\", \"headingLevel\"],\n  stateAxes: {},\n  web: { roles: [\"heading\"], keyboard: [], focus: \"none\" },\n  native: { roles: [\"header\"], states: [], actions: [] },\n  scenarios: [\n    \"the-title-is-a-real-heading-element-at-the-declared-level-not-styled-text\",\n    \"top-is-body-content-that-scrolls-away-while-topbar-is-fixed-chrome\",\n    \"description-wraps-instead-of-truncating-so-large-text-never-hides-the-question\",\n    \"a-trailing-action-shares-the-title-row-and-drops-below-it-when-space-runs-out\",\n    \"eyebrow-never-carries-information-the-title-does-not-repeat-in-some-form\",\n  ],\n} as const satisfies BehaviorContract;\n"]}

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export declare const designSystemVersion: "1.27.2";
+export declare const designSystemVersion: "1.28.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export const designSystemVersion = "1.27.2";
+export const designSystemVersion = "1.28.0";
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.27.2\" as const;\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.28.0\" as const;\n"]}

package/docs/activity-chip.md

@@ -19,7 +19,7 @@ Chip의 안정성을 상속하거나 독립적인 stable 승격을 뜻하지 않
 - `emphasis`: `default`(surface/text/border) · `emphasis`(brand action fill/content, 결과가 사용자를 기다릴 때).
   두 쌍 모두 light/dark에서 4.5:1을 contract test가 지킨다.
 - `activityChipRecipe`: 최소 높이 44(`control.minTouchTarget`), 최대 폭 180, 모서리 full, 미디어 28, 간격 `spacing.xxs`,
-  시작 inset `spacing.xxs`(미디어가 있을 때)·끝 inset `spacing.sm`, 라벨 `label` variant bold 한 줄.
+  시작 inset `spacing.xxs`(미디어가 있을 때)·끝 inset `spacing.sm`, 라벨 `label` variant medium(500) 한 줄.
 - 작업 상태·문구·미디어·패널 내용은 제품 소유다. HJM은 트리거 모양, 펼침 의미, 패널(Toast) 수명주기를 소유한다.
 
 ## Renderer
@@ -33,3 +33,7 @@ Chip의 안정성을 상속하거나 독립적인 stable 승격을 뜻하지 않
 
 검증: contracts `test/activity-chip.test.ts`, Web `test/activity-chip.browser.test.tsx`, Native `test/activity-chip.test.tsx`.
 기기 시각·VoiceOver/TalkBack 확인은 아직 하지 않았다.
+
+## 근거
+
+2026-10-17 사용자 결정("굵기 좀더 줄여"): 모든 글자 굵기를 한 단계 낮췄다. 큰 숫자·선택 상태 600(큰 제목 단계는 같은 날 폐지), 제목·강조 500, label 500, 본문 400이며 정본은 [타이포그래피](usage/tokens/typography.md)다.

package/docs/auth-screen.md

@@ -75,6 +75,8 @@ hero와 footer는 진행 중에도 유지한다. 버튼별 busy spinner와 함
 | footer 간격 | `xl`(compact `md`) | **최소값**이다. 화면이 길면 그 이상 벌어진다 |
 | 제공자 버튼 높이 | `authProviderButtonRecipe.minHeight` | 여기서 다시 정하지 않는다. 두 계약이 각자 값을 들면 한쪽만 바뀌어 버튼 줄기가 어긋난다 |
 | 정책 링크 터치 | `control.minTouchTarget` | 글자 높이만 누를 수 있으면 44pt에 못 미친다 |
+| 히어로 태그라인 | `typography.heading` 24/32·500(compact `titleLarge` 20/28) | 2026-10-17 "굵기랑 크기 줄여": 화면 첫 제목(display 32/40)을 빌리면 402 폭에서 두 줄이 된다. `AuthScreenHero`가 그린다 |
+| 정책 링크 간격 | `linkGap` 8 + `·` + 8 | 2026-10-17 "간격 줄여": 버튼 안쪽 여백이 더해지면 40~42가 된다. 터치 영역은 보이지 않게 넓힌다. `AuthScreenFooter`가 그린다 |
 
 ## 이 계약에 없는 것
 

package/docs/design-profile.md

@@ -51,8 +51,8 @@ export const productDesign = defineHjmDesignProfile({
 
 | 프리셋 | 팔레트 | 서체·제목 | 깊이·모서리 | 구성 |
 | --- | --- | --- | --- | --- |
-| minimal | 흰 바탕·무채색 잉크, hairline `border` #e6e6e6, 짙은 회색 행동(#3d3d3d) | ui 유지, heading·level1/2 굵기 500, body 행간 26 | raised·floating 그림자 0(오버레이는 테두리와 scrim), 4/8/12/16 | cards(테두리·안쪽 24)/inline·dashboard |
-| editorial | 따뜻한 종이(#fdfbf7)·잉크(#1b1714), 와인 강조(#7a1f3d), 규칙선용 짙은 `border` #cfc5b8 | display·reading 시스템 serif stack, level1/2/3 56/42/30, body 행간 26 | raised 그림자 0, 0/2/2/4 | rows(규칙선)/collapsible·editorial |
+| minimal | 흰 바탕·무채색 잉크, hairline `border` #e6e6e6, 짙은 회색 행동(#3d3d3d) | ui 유지(제목 굵기는 공통 500), body 행간 26 | raised·floating 그림자 0(오버레이는 테두리와 scrim), 4/8/12/16 | cards(테두리·안쪽 24)/inline·dashboard |
+| editorial | 따뜻한 종이(#fdfbf7)·잉크(#1b1714), 와인 강조(#7a1f3d), 규칙선용 짙은 `border` #cfc5b8 | display·reading 시스템 serif stack(제목 크기는 공통 단계), body 행간 26 | raised 그림자 0, 0/2/2/4 | rows(규칙선)/collapsible·editorial |
 | terminal | 밝은 모드 녹회색(#c8d4c4)·짙은 녹색 잉크·호박갈색 강조, 어두운 모드 검정(#050a06)·녹색 형광 글자·호박색 강조 | ui=code이므로 display·reading도 monospace | 그림자 0, 모서리 0 | rows(규칙선)/collapsible·dashboard |
 
 serif stack은 `ui-serif, Iowan Old Style, Georgia, AppleMyungjo, Batang, Noto Serif KR, serif`이며 폰트를 내려받지 않는다.
@@ -101,24 +101,28 @@ SegmentedControl·Tabs, ScreenLayout 및 optional OverviewScreen에 연결한다
 유리의 실제 backdrop blur와 클레이 inset shadow는 아래 Surface 질감 계약으로 연결한다. Native의 선택형 host·OS·architecture 조건과 실제 기기 검증은 별도다.
 
 
-## 큰 제목까지 한 번에 지정하기
+## 제목 단계 지정하기
 
 `tokens.heading`은 `level1`~`level5`의 fontSize/lineHeight/fontWeight를 부분 지정한다.
 현재 Heading은 두 renderer 모두 이 값으로 그리고 문서 `semanticLevel`과 textScale을
-따로 유지한다. 중립은 foundation의 40/32/24/20/18px를 그대로 쓰며, 에디토리얼의
-level1/2/3은 56/42/30px·행간 66/52/40px·굵기 500(2026-10-17 44/34에서 상향), 브루탈리즘은 48/38px·행간 56/46px·굵기
-800이다. 이 두 큰 제목 선택은 원본 치수 복제가 아니라 편집형/강한 강조 프리셋의
-시각 계층을 구분한 HJM 실험값이며 좁은 폭·큰 글자 QA와 함께 판단한다.
+따로 유지한다. 모든 프리셋이 foundation의 24/24/24/20/18px를 쓴다. 브루탈리즘은 굵기만
+800으로 명시한다(두꺼운 테두리·딱딱한 그림자를 버티는 제목 무게, 2026-10-17 사용자 Storybook 비교).
+
+**글자 크기 상한(2026-10-17 사용자 결정, "글자 너무 커", "큰 글자 정책은 없애").** 프로필의
+`typography`와 `heading` 어느 단계도 `typography.heading`의 24px를 넘을 수 없고, 넘으면 `RangeError`다.
+그 전에는 에디토리얼 56/42/30px, 브루탈리즘 48/38/30px 같은 확대 제목이 허용됐지만 Native Storybook
+서비스 소개 화면에서 지나치게 커 보여 큰 글자 단계와 함께 없앴다. 프리셋 정체성은 팔레트·서체 역할·
+그림자·모서리·구성 축으로 구분한다.
 
 ```ts
 const productDesign = defineHjmDesignProfile({
   extends: "paper",
-  tokens: { heading: { level1: { fontSize: 52, lineHeight: 64, fontWeight: "500" } } },
+  tokens: { heading: { level3: { fontWeight: "600" } } },
 });
 ```
 
-미지정 값은 preset을 상속한다. `tokens.typography.heading/titleLarge/title`은 이전과
-같이 Heading level3/4/5의 변경 기본값이며, 같은 필드에 명시한 `tokens.heading`이
+미지정 값은 preset을 상속한다. `tokens.typography.heading`은 Heading level1~3,
+`titleLarge`/`title`은 level4/5의 변경 기본값이며, 같은 필드에 명시한 `tokens.heading`이
 우선한다. 나머지 프로필 축·본문 Text typography와 문서 순서는 바꾸지 않는다.
 지원하지 않는 persisted heading 단계는 조용히 무시하지 않고 거부한다.
 

package/docs/generated/component-maturity.md

@@ -1,6 +1,6 @@
 # Component maturity and evidence manifest
 
-> Generated from `@hjmds/design-contracts` 1.27.2. Do not edit this file directly; run `pnpm contracts:sync`.
+> Generated from `@hjmds/design-contracts` 1.28.0. Do not edit this file directly; run `pnpm contracts:sync`.
 
 This document is the human-readable projection of the same catalog and Showcase manifest consumed by product CI.
 

package/docs/generated/renderer-evidence.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": 1,
-  "designSystemVersion": "1.27.2",
+  "designSystemVersion": "1.28.0",
   "source": "packages/design-contracts/docs/generated/showcase-manifest.json",
   "surfaces": {
     "web": {
       "packageName": "@hjmds/react",
-      "packageVersion": "1.27.2",
+      "packageVersion": "1.28.0",
       "activeComponents": 105,
       "claimedComponents": 103,
       "completeScenarioComponents": 103,
@@ -1044,7 +1044,9 @@
           "claimed": true,
           "subpath": "./auth-screen",
           "exportNames": [
-            "AuthScreenLayout"
+            "AuthScreenLayout",
+            "AuthScreenHero",
+            "AuthScreenFooter"
           ],
           "proofs": [
             {
@@ -5700,7 +5702,7 @@
     },
     "native": {
       "packageName": "@hjmds/react-native",
-      "packageVersion": "1.27.2",
+      "packageVersion": "1.28.0",
       "activeComponents": 87,
       "claimedComponents": 84,
       "completeScenarioComponents": 83,
@@ -6621,7 +6623,9 @@
           "claimed": true,
           "subpath": "./auth-screen",
           "exportNames": [
-            "AuthScreenLayout"
+            "AuthScreenLayout",
+            "AuthScreenHero",
+            "AuthScreenFooter"
           ],
           "proofs": [
             {

package/docs/generated/renderer-evidence.md

@@ -1,6 +1,6 @@
 # Renderer evidence coverage
 
-> Generated for HJM 1.27.2. Do not edit directly; run `pnpm evidence:sync`.
+> Generated for HJM 1.28.0. Do not edit directly; run `pnpm evidence:sync`.
 
 This projection joins the canonical surface maturity manifest with first-party renderer claims. Missing scenarios are explicit beta promotion debt; stable surfaces are blocked by CI until none remain.
 

package/docs/generated/showcase-manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "designSystemVersion": "1.27.2",
+  "designSystemVersion": "1.28.0",
   "packageName": "@hjmds/design-contracts",
   "components": [
     {

package/docs/heading.md

@@ -1,12 +1,16 @@
 # Heading contract
 
-**문제.** 랜딩 히어로, 결과 화면의 큰 숫자, 카드 제목처럼 **문서 제목 단계를 실제로
+**문제.** 랜딩 대표 제목, 결과 화면 제목, 카드 제목처럼 **문서 제목 단계를 실제로
 그려야 하는 자리**.
 
-**이미 있던 것을 꺼냈을 뿐이다.** `foundations`의 `heading`에는 level1 40px부터
-level5 18px까지 다섯 단계가 있었지만 어떤 renderer도 노출하지 않았다 — `Text`는
-`TextVariant`(최대 24px)만 받는다. 그래서 큰 제목이 필요한 화면은 제품 CSS로 폰트
-크기를 직접 썼다. 이 계약은 **새 크기를 만들지 않는다.**
+**이미 있던 것을 꺼냈을 뿐이다.** `foundations`의 `heading` 단계를 renderer로 노출하고
+문서 단계(`h1`~`h6`)를 함께 낸다. 이 계약은 **새 크기를 만들지 않는다.** 크기는 `Text`와 같은
+단계이며 가장 큰 값은 `typography.heading` 24px다.
+
+**큰 글자 단계 폐지(2026-10-17 사용자 결정, "글자 너무 커", "큰 글자 정책은 없애").** 처음에는
+level1 40px·level2 32px의 큰 글자 단계가 있었지만, Native Storybook 서비스 소개 화면의 히어로·구획 제목이
+지나치게 커서 없앴다. `level1`·`level2`는 소비 코드 호환을 위해 이름만 남기고 `level3`과 같은 24/32/500이며
+새 코드는 `level3`~`level5`로 위계를 만든다. 디자인 프로필도 24px를 넘는 제목 크기를 거부한다.
 
 **Top·Section과 겹치지 않는다.**
 
@@ -25,16 +29,17 @@ level5 18px까지 다섯 단계가 있었지만 어떤 renderer도 노출하지
 **Native.** 접근성 role은 `header` 하나뿐이라 문서 단계는 `aria-level`로 함께 싣는다.
 
 
-## 디자인 프로필의 전체 제목 크기(실험·미게시)
+## 디자인 프로필의 제목 크기
 
 2026-10-07 [Heading 갤러리](https://component.gallery/components/heading/)를 비교하며
 현재 renderer가 level3~5만 프로필 typography에 연결하고 level1/2는 고정값으로 남긴
-누락을 확인했다. 앱이 테마를 한 번 넣어 큰 제목까지 재사용하려는 요구 때문에
+누락을 확인했다. 앱이 테마를 한 번 넣어 모든 제목 단계를 재사용하려는 요구 때문에
 [디자인 프로필](design-profile.md)의 `tokens.heading`을 다섯 시각 단계로 둔다.
 본문 크기에서 큰 제목을 임의로 배율 계산하는 대안은 계층과 행간이 달라질 수 있어
 채택하지 않는다. 원본 갤러리의 수치·코드·폰트 자산을 복사한 것이 아니다.
 
-프로필이 없으면 원래 40/32/24/20/18 크기를 유지한다. 기존 level3~5 typography
-alias는 helper에서 병합하고 명시적인 heading override가 마지막에 우선한다.
+프로필이 없으면 24/24/24/20/18 크기를 쓴다(2026-10-17 큰 글자 단계 폐지 전에는 40/32/24/20/18).
+level1~3은 typography heading, level4/5는 titleLarge/title alias를 helper에서 병합하고 명시적인 heading
+override가 마지막에 우선한다. 결과가 24px를 넘으면 프로필 생성이 `RangeError`로 실패한다.
 Web은 CSS 변수, Native는 Text host의 metrics로 반영하고 `semanticLevel`·문구·초점을
 바꾸지 않는다. 테마 전환은 시각 크기만 바꾸며 실제 문서 단계는 기존 계약이 소유한다.

package/docs/sheet.md

@@ -84,3 +84,5 @@ Diairy QA W16 reproduced Chrome default backdrop blur undoing Dialog focus retur
 0pt가 되고 검색 입력만 그려졌다(iPhone 17 Pro · iOS 26.5, 이전 코드로도 재현). 제품은 창 높이 `flexBasis`로 우회했다.
 `auto`는 내용 높이 그대로다(늘 남는 공간이 없다). 바뀌는 모습: 고정 높이 시트의 `footer`가 본문 바로 아래가 아니라 시트 아래에 붙는다(Web과 같다).
 버린 대안: 새 `bodyLayout` prop(기본값을 그대로 두면 Web과 다른 동작이 남고 제품마다 켜야 한다).
+
+2026-10-17 사용자 결정 두 가지. 첫째, 시트는 위쪽에 보이는 제목 줄을 그리지 않는다(예: SearchScreen 필터 시트의 "필터"). 위 1.4·1.7의 제목 정렬·element 제목 설명은 기록으로 남긴다. 지금 `title`은 접근성 이름일 뿐이다. Web은 `aria-labelledby`가 가리키는 시각 숨김 `h2`, Native는 대화상자 `accessibilityLabel`과 배치 밖 1pt 머리글이다. Native element 제목은 그리지 않으므로 `accessibilityTitle`이 이름이 된다. 머리 행은 설명이나 ×가 있을 때만 그리고 ×는 끝 쪽 자리를 지킨다. Native Select·Combobox 선택 시트와 GestureSheet도 같은 규칙을 따르며 `sheetRecipe.title` 시각 값은 삭제했다. 둘째, 가림막을 누르면 모든 위치의 시트가 닫힌다(2026-10-16의 하단 드래그 전용 기본을 대체). 닫기 경로는 손잡이·드래그와 같은 `requestClose("outside")`이므로 `busy`·`dismissPolicy`·제어형 owner의 버리기 확인을 건너뛰지 않는다. 검사: `sheet-layout.browser.test.tsx`(접근성 이름, 머리 없음, 손잡이–본문 간격, 가림막 닫기·busy·owner 유지), `sheet-viewport.test.tsx`(Native 접근성 이름·보이는 제목 없음·× 위치·가림막 닫기·busy·`outsideDismiss: false`).

package/docs/top.md

@@ -18,8 +18,9 @@
 
 **크기는 둘뿐이다.** `large`(화면의 첫 제목)와 `medium`(시트·모달 안의 첫 제목).
 세 번째가 필요해지는 자리는 이미 `Section`이다 — 크기를 늘리는 대신 다른 컴포넌트를
-쓰라는 신호로 둔다. 두 크기 모두 기존 타입 스케일(`heading.level2`, `typography.titleLarge`)을
-그대로 쓰고 새 숫자를 만들지 않는다.
+쓰라는 신호로 둔다. 두 크기 모두 기존 타입 스케일(`heading.level3` 24px, `typography.titleLarge` 20px)을
+그대로 쓰고 새 숫자를 만들지 않는다. 2026-10-17 사용자 결정("글자 너무 커")으로 큰 글자 단계를 폐지하면서
+`large`가 읽던 `heading.level2`(32px)를 HJM 상한인 `heading.level3`(24px)으로 바꿨다.
 
 **잘리지 않는다.** `description`은 줄바꿈하며 말줄임하지 않는다. 큰 글자 설정에서 화면이
 묻는 내용이 사라지면 안 되기 때문이다. `trailing` 보조 행동은 제목 줄을 공유하다가
@@ -33,6 +34,6 @@
 
 ## 프로필 모서리·제목 소비
 
-2026-10-07 소비 감사에서 두 renderer의 제목 크기·행간·굵기가 foundation으로 확정된 recipe를 직접 읽어 프로필을 우회했다. `large`는 가까운 프로필의 `heading.level2`, `medium`은 `typography.titleLarge`를 읽고 프로필이 없으면 기존 recipe를 유지한다. 시각 역할은 `headingLevel`과 독립이며 display 서체·제목 의미·보조 행동·초점은 바꾸지 않는다.
+2026-10-07 소비 감사에서 두 renderer의 제목 크기·행간·굵기가 foundation으로 확정된 recipe를 직접 읽어 프로필을 우회했다. `large`는 가까운 프로필의 `heading.level3`, `medium`은 `typography.titleLarge`를 읽고 프로필이 없으면 기존 recipe를 유지한다. 시각 역할은 `headingLevel`과 독립이며 display 서체·제목 의미·보조 행동·초점은 바꾸지 않는다.
 
 프로필 연결은 1.15.0 이후 미게시 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.

package/docs/usage/README.md

@@ -97,7 +97,7 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [FollowProfileCard](components/follow-profile-card.md) | 구성/정보 표시 | 프로필 카드에서 팔로우·팔로잉 전환과 팔로워 수를 실제 mutation 결과와 함께 보여 줄 때 쓴다. | 1.21.0 | Web · Native | 개별 API 계약 참조 | 배포 |
 | [Form](components/form.md) | 입력 | 여러 Field를 한 화면에 쌓고 한 번에 제출할 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [Grid](components/grid.md) | 레이아웃 | 카드·타일처럼 같은 모양의 자식을 창 크기에 따라 열 수를 바꿔 배치할 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
-| [Heading](components/heading.md) | 글자와 아이콘 | 자리를 모르는 큰 제목 글자 하나가 필요할 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
+| [Heading](components/heading.md) | 글자와 아이콘 | 자리를 모르는 제목 글자 하나가 필요할 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [HistogramExplorer](components/histogram-explorer.md) | 구성/정보 표시 | 실제 관측값 배열의 분포를 동폭 구간 막대로 보여 주고, 사용자가 구간 수를 바꿔 볼 때 쓴다. | 1.21.0 | Web · Native | 개별 API 계약 참조 | 배포 |
 | [Icon](components/icon.md) | 글자와 아이콘 | HJM semantic 이름(`search`, `back`, `chevronEnd`, `notifications` 등 43개)으로 고르는 그림 기호에 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [IconButton](components/icon-button.md) | 동작 | 보이는 글자 없이 아이콘만으로 표시하는 행동에 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |