@hjmds/react 1.41.2 → 1.43.0

package/dist/styles.layered.css

@@ -89,6 +89,11 @@
    opts out because clipping cuts off its own shadow. */
 .hjm-surface[data-clips="true"] { overflow: hidden; }
 .hjm-surface[data-tone="raised"] { background: var(--hjm-color-bg); box-shadow: var(--hjm-surface-raised-shadow, var(--hjm-shadow-raised)); }
+/* Surface `elevation` (shadow token steps, 2026-10-23) overrides the tone's shadow; declared after the tone rule. */
+.hjm-surface[data-elevation="none"] { box-shadow: var(--hjm-surface-inset-shadow, none); }
+.hjm-surface[data-elevation="raised"] { box-shadow: var(--hjm-surface-raised-shadow, var(--hjm-shadow-raised)); }
+.hjm-surface[data-elevation="floating"] { box-shadow: var(--hjm-shadow-floating); }
+.hjm-surface[data-elevation="overlay"] { box-shadow: var(--hjm-shadow-overlay); }
 .hjm-surface[data-tone="accent"] { background: var(--hjm-color-bg); }
 .hjm-surface[data-tone="sunken"] { background: var(--hjm-color-bg); }
 .hjm-surface[data-tone="subtle"] { background: var(--hjm-color-bg); }
@@ -269,7 +274,8 @@
 /* Toggle treatment: aria-pressed already carried the state, so without a paired
    visual every consumer painted the selected background in product styles.
    Selection uses content color without an added border (2026-10-10 user request); focus stays separate. */
-.hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"] { color: var(--hjm-color-text); background: var(--hjm-color-surface-selected); border-color: transparent; }
+/* IconButtonLink `current` (aria-current="page") reuses the selected surface: iconButtonRecipe.states.selected. */
+.hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"], .hjm-icon-button[aria-current="page"] { color: var(--hjm-color-text); background: var(--hjm-color-surface-selected); border-color: transparent; }
 .hjm-button:active:not(:disabled):not([aria-disabled="true"]), .hjm-icon-button:active:not(:disabled):not([aria-disabled="true"]) { opacity: var(--hjm-button-pressed-opacity); }
 /* data-state="disabled" also covers focusable boundaries (aria-disabled, e.g. Carousel previous on the first slide),
    which looked enabled while Native dimmed them (2026-10-17 review E9). */
@@ -307,6 +313,8 @@
 }
 .hjm-icon-button {
   position: relative;
+  /* IconButtonLink draws the same frame on an anchor. */
+  text-decoration: none;
   inline-size: var(--hjm-control-button-medium);
   block-size: var(--hjm-control-button-medium);
   min-inline-size: var(--hjm-control-min-touch-target);
@@ -315,6 +323,10 @@
   border-radius: var(--hjm-radius-md);
 }
 .hjm-icon-button[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
+/* IconButton `elevation` (iconButtonRecipe.elevation, 2026-10-23): a floating control's lift from the shadow tokens. */
+.hjm-icon-button[data-elevation="raised"] { box-shadow: var(--hjm-shadow-raised); }
+.hjm-icon-button[data-elevation="floating"] { box-shadow: var(--hjm-shadow-floating); }
+.hjm-icon-button[data-elevation="overlay"] { box-shadow: var(--hjm-shadow-overlay); }
 .hjm-icon-button[data-size="small"] { inline-size: var(--hjm-control-button-small); block-size: var(--hjm-control-button-small); min-inline-size: 0; min-block-size: 0; }
 .hjm-icon-button[data-size="small"]::after { content: ""; position: absolute; inset: calc(-1 * var(--hjm-button-hit-slop, var(--hjm-space-xxs))); }
 .hjm-icon-button[data-size="large"] { inline-size: var(--hjm-control-button-large); block-size: var(--hjm-control-button-large); }
@@ -335,6 +347,9 @@
    takes the same overhang and the badge keeps the icon's corner (2026-10-17 1.27.2 adoption: Spint's top-bar bell). */
 .hjm-notification-bell:is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-icon-button-edge-small)); }
 .hjm-notification-bell:is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-small)); }
+/* Count badge (iconButtonRecipe.badge / resolveIconButtonBadgeOffset, 2026-10-23 web check): on the button's end edge,
+   raised above the glyph slot so only the floating ring overlaps the glyph. The bell is always the small IconButton. */
+.hjm-notification-bell__badge { position: absolute; inset-inline-end: var(--hjm-icon-button-badge-inline-end-small); inset-block-start: var(--hjm-icon-button-badge-block-start-small); display: flex; pointer-events: none; }
 .hjm-link { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; color: var(--hjm-color-content-brand); text-underline-offset: 0.18em; }
 .hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
 .hjm-link[data-variant="standalone"] { min-block-size: var(--hjm-control-min-touch-target); min-inline-size: var(--hjm-control-min-touch-target); justify-content: center; text-decoration: none; }
@@ -390,7 +405,7 @@
    the support text fades, so a custom Field control dims without needing a class. A component
    recipe value (Select, NumberField, OtpField, SearchField, PasswordField) arrives as an
    inline --hjm-field-disabled-opacity on the root. */
-.hjm-field[data-state="disabled"] > :not(.hjm-field__description):not(.hjm-field__error):not([data-hjm-field-error]) { opacity: var(--hjm-field-disabled-opacity); }
+.hjm-field[data-state="disabled"] > :not(.hjm-field__description):not(.hjm-field__count):not(.hjm-field__error):not([data-hjm-field-error]) { opacity: var(--hjm-field-disabled-opacity); }
 /* The editable minimum excludes both resolved borders, keeping the field footprint stable in invalid state. */
 .hjm-field__input {
   inline-size: 100%;
@@ -423,6 +438,14 @@
 .hjm-field__affix { display: inline-flex; align-items: center; color: var(--hjm-color-text-muted); }
 .hjm-field__description, .hjm-choice__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
 .hjm-field__error { color: var(--hjm-color-danger); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
+/* characterCountRecipe (2026-10-23): label type, sentence and counter on one row with spacing.sm between, the counter
+   at the end in tabular numbers. short/over switch the row to danger and the counter to semibold, so the error is
+   not carried by color alone. Support text, so it keeps full contrast in the disabled scope like the description. */
+.hjm-field__count { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
+.hjm-field__count-message { flex: 1 1 auto; min-inline-size: 0; }
+.hjm-field__counter { flex: 0 0 auto; margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: var(--hjm-font-weight-regular); }
+.hjm-field__count[data-invalid] { color: var(--hjm-color-danger); }
+.hjm-field__count[data-invalid] .hjm-field__counter { font-weight: var(--hjm-font-weight-semibold); }
 /* searchFieldRecipe.sizes.* (emitted by theme.ts): medium padding 12 · gap 8 · clear 36 + slop 4, large 52 high ·
    padding 16 · gap 12 · clear 44. Size is applied to the input by TextField; size the control from that public attribute. */
 .hjm-search-field .hjm-field__control { padding-inline: var(--hjm-search-field-padding-medium, var(--hjm-space-sm)); gap: var(--hjm-search-field-gap-medium, var(--hjm-space-xs)); }
@@ -878,6 +901,14 @@
 .hjm-choice[data-presentation="chips"][data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); }
 .hjm-choice[data-presentation="chips"][data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
 .hjm-choice[data-presentation="chips"].hjm-choice--with-action { padding: 0; }
+/* selectionGroupRecipe.overflow (2026-10-23): CheckboxGroup chips on one scrolling line, the same meaning as
+   SegmentedControl overflow="scroll". The scrollport keeps scrollInset (spacing.xxs 4) on every side so the focus ring
+   (2 + offset 2) and the small chip hit slop are not clipped and the last chip ends like the first starts; the
+   negative margin keeps the chips aligned with the column. The items row sits inside the scroller, so the chip row
+   rule above (a direct-child selector) is restated here. */
+.hjm-checkbox-group__scroller { min-inline-size: 0; overflow-x: auto; padding: var(--hjm-space-xxs); margin: calc(-1 * var(--hjm-space-xxs)); }
+.hjm-checkbox-group[data-presentation="chips"][data-overflow="scroll"] .hjm-checkbox-group__items { flex-direction: row; flex-wrap: nowrap; gap: var(--hjm-space-xs); inline-size: max-content; }
+.hjm-checkbox-group[data-presentation="chips"][data-overflow="scroll"] .hjm-choice { flex-shrink: 0; }
 .hjm-choice[data-presentation="chips"] > .hjm-choice__target { padding-block: 0; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__indicator { display: none; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__leading { color: inherit; }
@@ -981,6 +1012,9 @@
 .hjm-badge[data-variant="outline"][data-tone="warning"] { background: transparent; color: var(--hjm-accent-warning); border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
 .hjm-badge[data-tone="attention"] { background: var(--hjm-accent-fill-attention); }
 .hjm-badge[data-variant="outline"][data-tone="attention"] { background: transparent; color: var(--hjm-accent-attention); border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
+/* Product classification color (Badge categoryColor): the renderer resolves fill, ink and stroke per theme and checks AA. */
+.hjm-badge[data-tone="category"] { color: var(--hjm-badge-category-content); background: var(--hjm-badge-category-background); }
+.hjm-badge[data-variant="outline"][data-tone="category"] { background: transparent; border-color: var(--hjm-badge-category-border); }
 .hjm-tag[data-tone="info"] { color: var(--hjm-accent-info); background: color-mix(in srgb, var(--hjm-accent-info) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-info) 30%, transparent); }
 .hjm-tag[data-tone="success"] { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-success) 30%, transparent); }
 .hjm-tag[data-tone="attention"] { color: var(--hjm-accent-attention); background: color-mix(in srgb, var(--hjm-accent-attention) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
@@ -1058,10 +1092,17 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    baseline 2–2.5px above the row center (2026-10-17 measured audit); a flex
    box centers any trailing node like Native's row-centered View. */
 .hjm-list-row__trailing { display: flex; align-items: center; }
+/* Disclosure mark (listRowRecipe.accessories): decorative content.decorative chevron after any trailing value, inside the
+   row command. The row gap applies before it; a preceding trailing value pulls it to the tighter accessory gap. */
+.hjm-list-row__accessory { flex: 0 0 auto; display: flex; align-items: center; color: var(--hjm-color-text-weak); }
+.hjm-list-row__accessory .hjm-icon { color: inherit; }
+.hjm-list-row__trailing + .hjm-list-row__accessory { margin-inline-start: calc(var(--hjm-list-row-accessory-gap) - var(--hjm-list-row-gap)); }
 /* `leadingSize` was declared by the recipe but unbound, so consumers rebuilt
    the avatar box in product styles. */
 .hjm-list-row__leading { display: flex; align-items: center; justify-content: center; inline-size: var(--hjm-list-row-leading-size); block-size: var(--hjm-list-row-leading-size); overflow: hidden; }
 .hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
+/* ChoiceRow sheet item picture: the row leading box (choiceRowRecipe.itemLeading), empty for items without one. */
+.hjm-choice-row__item-leading { display: flex; align-items: center; justify-content: center; inline-size: var(--hjm-choice-row-item-leading-size); block-size: var(--hjm-choice-row-item-leading-size); overflow: hidden; }
 /* Photo source peers share ListRow geometry; only their decorative brand plate is specialized. */
 .hjm-photo-source__icon { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: var(--hjm-radius-md); }
 .hjm-photo-source__icon svg { inline-size: 24px; block-size: 24px; }
@@ -1509,7 +1550,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   font-size: var(--hjm-type-label-size);
   line-height: var(--hjm-type-label-line-height);
 }
-.hjm-chart-legend[data-interactive] { flex-direction: column; flex-wrap: nowrap; }
+/* chartRecipe.legend.layouts: stack = one row per series; inline = entries flow and wrap (base rule above). */
+.hjm-chart-legend[data-layout="stack"] { flex-direction: column; flex-wrap: nowrap; }
 .hjm-chart-legend__item, .hjm-chart-legend__button { display: flex; align-items: center; gap: var(--hjm-space-xs); }
 .hjm-chart-legend__item[data-dimmed] { opacity: 0.5; }
 .hjm-chart-legend__button {
@@ -1528,7 +1570,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chart-legend__button[aria-pressed="true"] { background: var(--hjm-color-surface); }
 .hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
-.hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
+.hjm-chart-legend[data-layout="stack"] .hjm-chart-legend__label { flex: 1; }
+.hjm-chart-legend[data-layout="inline"] .hjm-chart-legend__button { flex: none; }
 .hjm-chart-legend__value { font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
 
 /* Mentions ---------------------------------------------------------------- */
@@ -2120,6 +2163,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   font-weight: var(--hjm-top-title-weight);
   overflow-wrap: anywhere;
 }
+.hjm-top__title[data-line-breaks="preserve"] { white-space: pre-line; }
 .hjm-top__trailing { display: flex; flex: 0 0 auto; align-items: center; gap: var(--hjm-space-xs); }
 .hjm-top__description {
   margin: var(--hjm-space-xs) 0 0;
@@ -2799,6 +2843,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
 .hjm-timeline__timestamp { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
+/* Selectable record (timelineRecipe.item.selected): the neutral persistent-selection surface + ring shared with ListRow.
+   Selection outranks passive emphasis; the focus ring stays the shared focus role. */
+.hjm-timeline[data-selectable] .hjm-timeline__item { cursor: pointer; }
+.hjm-timeline__item[aria-selected="true"] { background: var(--hjm-color-surface-selected); box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
+.hjm-timeline__item[role="option"]:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-accordion { border-block-start: 1px solid var(--hjm-color-border); }
 .hjm-accordion__item { border-block-end: 1px solid var(--hjm-color-border); }
 .hjm-accordion__header { margin: 0; }
@@ -2825,28 +2874,44 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-accordion__indicator { flex: 0 0 auto; color: var(--hjm-color-text-muted); }
 .hjm-accordion__panel { padding: 0 var(--hjm-space-xs) var(--hjm-space-md); color: var(--hjm-color-text-body); overflow-wrap: anywhere; }
 .hjm-avatar {
+  /* Diameter from avatarRecipe.sizes via --hjm-avatar-size (set inline by Avatar). The frame no longer clips
+     the root so a corner accessory can sit on the edge; the image and fallback clip to the shape themselves. */
+  position: relative;
+  box-sizing: border-box;
   display: inline-grid;
+  flex: 0 0 auto;
   place-items: center;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  overflow: hidden;
+  inline-size: var(--hjm-avatar-size, 2.5rem);
+  block-size: var(--hjm-avatar-size, 2.5rem);
   border: 1px solid var(--hjm-color-border);
   border-radius: 50%;
   color: var(--hjm-color-text-muted);
   background: var(--hjm-color-bg);
   font-weight: var(--hjm-text-emphasis-strong);
 }
-.hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
-.hjm-avatar[data-size="large"] { inline-size: 3rem; block-size: 3rem; }
-.hjm-avatar[data-size="xlarge"] { inline-size: 4rem; block-size: 4rem; font-size: var(--hjm-type-title-size); }
+.hjm-avatar[data-size="xxsmall"], .hjm-avatar[data-size="xsmall"], .hjm-avatar[data-size="small"] { font-size: var(--hjm-type-label-size); }
+.hjm-avatar[data-size="xlarge"] { font-size: var(--hjm-type-title-size); }
 .hjm-avatar[data-shape="rounded"] { border-radius: var(--hjm-radius-md); }
-.hjm-avatar__image { inline-size: 100%; block-size: 100%; object-fit: cover; }
-.hjm-avatar__fallback { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
+/* avatarRecipe.frames: surface drops the border, none drops border and background. */
+.hjm-avatar[data-frame="surface"] { border-width: 0; }
+.hjm-avatar[data-frame="none"] { border-width: 0; background: transparent; }
+.hjm-avatar__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
+.hjm-avatar__fallback { display: grid; place-items: center; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: inherit; }
+/* avatarRecipe.accessory.offset (outward overhang, 0): the mark sits on the avatar's box corner so the row layout does not move. */
+.hjm-avatar__accessory { position: absolute; inset-inline-end: var(--hjm-avatar-accessory-inset, 0px); display: inline-flex; line-height: 0; }
+.hjm-avatar__accessory[data-placement="bottom-end"] { inset-block-end: var(--hjm-avatar-accessory-inset, 0px); }
+.hjm-avatar__accessory[data-placement="top-end"] { inset-block-start: var(--hjm-avatar-accessory-inset, 0px); }
 .hjm-divider { flex: 0 0 auto; margin: 0; border: 0; background: var(--hjm-color-border); }
 .hjm-divider[data-orientation="horizontal"] { inline-size: 100%; block-size: 1px; }
 .hjm-divider[data-orientation="vertical"] { align-self: stretch; inline-size: 1px; min-block-size: var(--hjm-control-min-touch-target); }
 .hjm-divider[data-orientation="horizontal"][data-inset="start"] { margin-inline-start: var(--hjm-space-md); inline-size: calc(100% - var(--hjm-space-md)); }
 .hjm-divider[data-orientation="horizontal"][data-inset="both"] { margin-inline: var(--hjm-space-md); inline-size: calc(100% - (2 * var(--hjm-space-md))); }
+/* lineStyle="dashed" (dividerRecipe.lineStyles.dashed): exact dash/gap from the recipe instead of the browser's own
+   dashed border, so Web and Native draw the same 4/4 rhythm starting with a dash at the line's start edge. */
+.hjm-divider[data-line-style="dashed"] { --hjm-divider-pattern: var(--hjm-color-border) 0 var(--hjm-divider-dash), transparent var(--hjm-divider-dash) calc(var(--hjm-divider-dash) + var(--hjm-divider-gap)); }
+.hjm-divider[data-line-style="dashed"][data-orientation="horizontal"] { background: repeating-linear-gradient(to right, var(--hjm-divider-pattern)); }
+.hjm-divider[data-line-style="dashed"][data-orientation="horizontal"]:dir(rtl) { background: repeating-linear-gradient(to left, var(--hjm-divider-pattern)); }
+.hjm-divider[data-line-style="dashed"][data-orientation="vertical"] { background: repeating-linear-gradient(to bottom, var(--hjm-divider-pattern)); }
 .hjm-description-list { display: grid; grid-template-columns: repeat(var(--hjm-description-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); margin: 0; }
 .hjm-description-list__item { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
 .hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
@@ -2900,28 +2965,48 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-load-more__spinner { inline-size: 1em; block-size: 1em; border: 2px solid var(--hjm-color-content-brand); border-inline-end-color: transparent; border-radius: 50%; animation: hjm-spin 800ms linear infinite; }
 
 /* Expansion renderers --------------------------------------------------- */
-.hjm-steps { display: grid; grid-template-columns: repeat(var(--hjm-steps-connector-count), minmax(0, 1fr)) fit-content(calc(100% / var(--hjm-steps-count))); gap: 0; margin: 0; padding: 0 var(--hjm-steps-inset); list-style: none; }
-.hjm-steps__step { min-inline-size: 0; display: grid; align-content: start; gap: var(--hjm-space-xs); }
-.hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
-.hjm-steps__indicator { flex: 0 0 auto; inline-size: var(--hjm-steps-indicator-size); block-size: var(--hjm-steps-indicator-size); display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
-.hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
-.hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
-.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-bg); }
-.hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
-/* The terminal incoming segment continues the previous rail across its copy width. */
-.hjm-steps__connector[data-reached="true"] { background: var(--hjm-color-content-brand); }
-.hjm-steps__step[data-status="error"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-danger); color: var(--hjm-color-danger); background: var(--hjm-color-danger-fill); }
-.hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
-.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
-.hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
-.hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
-/* Keep the terminal marker at the inline edge instead of an empty trailing step cell. */
-.hjm-steps__step:last-child .hjm-steps__rail { justify-content: flex-end; }
-.hjm-steps__step:last-child .hjm-steps__copy { padding-inline-end: 0; text-align: end; }
-.hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
-/* A step before the cursor is one button over marker and label (Steps onStepPress); the cell keeps its static layout. */
-.hjm-steps__press { display: grid; align-content: start; gap: var(--hjm-space-xs); min-inline-size: 0; min-block-size: var(--hjm-steps-press-target); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
-.hjm-steps__press:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
+/* Focus rail is shared by ordinary Steps and the expandable presentations (2026-10-23 user proposal). */
+.hjm-steps { display:grid; grid-template-columns:repeat(var(--hjm-steps-connector-count),minmax(0,1fr)) fit-content(calc(100% / var(--hjm-steps-count))); gap:0; margin:0; padding:0 var(--hjm-steps-inset); list-style:none; }
+.hjm-steps__step { min-inline-size:0; position:relative; }
+.hjm-steps__item,.hjm-steps__press { display:grid; align-content:start; gap:var(--hjm-space-xs); min-inline-size:0; min-block-size:var(--hjm-steps-press-target); }
+.hjm-steps__rail { display:flex; align-items:center; min-inline-size:0; }
+.hjm-steps__indicator { flex:0 0 auto; inline-size:var(--hjm-steps-indicator-size); block-size:var(--hjm-steps-indicator-size); display:grid; place-items:center; border:1px solid var(--hjm-color-border); border-radius:50%; color:var(--hjm-color-text-muted); background:var(--hjm-color-bg); font-size:var(--hjm-type-label-size); font-weight:var(--hjm-text-emphasis-medium); transition:background-color var(--hjm-steps-duration),color var(--hjm-steps-duration),border-color var(--hjm-steps-duration),transform var(--hjm-motion-fast); }
+.hjm-steps__connector { flex:1 1 auto; block-size:1px; background:var(--hjm-color-border); transition:background-color var(--hjm-steps-duration); }
+.hjm-steps__step[data-status="current"] .hjm-steps__indicator { border-color:var(--hjm-color-text); background:var(--hjm-color-text); color:var(--hjm-color-bg); box-shadow:0 0 0 3px var(--hjm-color-bg),0 0 0 4px var(--hjm-color-border); }
+.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color:var(--hjm-color-border-control); color:var(--hjm-color-text); }
+.hjm-steps__step[data-status="complete"] .hjm-steps__connector,.hjm-steps__connector[data-reached="true"] { background:var(--hjm-color-text); }
+.hjm-steps__step[data-status="error"] .hjm-steps__indicator { border:2px solid var(--hjm-color-danger); color:var(--hjm-color-danger); background:color-mix(in srgb,var(--hjm-color-danger) 12%,var(--hjm-color-bg)); }
+.hjm-steps__copy { min-inline-size:0; display:grid; gap:var(--hjm-space-xxs); padding-inline-end:var(--hjm-space-sm); }
+.hjm-steps__label { color:var(--hjm-color-text); font-size:var(--hjm-type-label-size); line-height:var(--hjm-type-label-line-height); overflow-wrap:anywhere; }
+.hjm-steps__step[data-status="current"] .hjm-steps__label { font-weight:var(--hjm-text-emphasis-medium); }
+.hjm-steps__step[data-status="pending"] .hjm-steps__label { color:var(--hjm-color-text-muted); }
+.hjm-steps__step[data-status="error"] .hjm-steps__label { color:var(--hjm-color-danger); }
+.hjm-steps__step:last-child .hjm-steps__rail { justify-content:flex-end; }
+.hjm-steps__step:last-child .hjm-steps__copy { padding-inline-end:0; text-align:end; }
+.hjm-steps__description,.hjm-steps__status { color:var(--hjm-color-text-muted); font-size:var(--hjm-type-caption-size); overflow-wrap:anywhere; }
+.hjm-steps__press { width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:start; cursor:pointer; }
+.hjm-steps__press:focus-visible,.hjm-steps-compact__toggle:focus-visible { outline:var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset:var(--hjm-focus-offset); border-radius:var(--hjm-radius-sm); }
+@media(hover:hover) { .hjm-steps__press:hover .hjm-steps__indicator { transform:translateY(-2px); } }
+.hjm-steps__press:active .hjm-steps__indicator { transform:scale(.96); }
+/* A product illustration keeps its own colors and must not disappear into the current fill. */
+.hjm-steps[data-custom-mark] .hjm-steps__indicator { background:var(--hjm-color-bg); color:var(--hjm-color-text); }
+.hjm-steps[data-presentation="vertical"],.hjm-steps[data-presentation="compact"][data-expanded="true"] { display:flex; flex-direction:column; }
+.hjm-steps:is([data-presentation="vertical"],[data-presentation="compact"][data-expanded="true"]) .hjm-steps__step { padding-block-end:var(--hjm-space-md); }
+.hjm-steps:is([data-presentation="vertical"],[data-presentation="compact"][data-expanded="true"]) .hjm-steps__step:not(:last-child)::before { content:""; position:absolute; inset-inline-start:calc(var(--hjm-steps-indicator-size) / 2); inset-block-start:var(--hjm-steps-indicator-size); inset-block-end:0; inline-size:1px; background:var(--hjm-color-border); }
+.hjm-steps:is([data-presentation="vertical"],[data-presentation="compact"][data-expanded="true"]) :is(.hjm-steps__item,.hjm-steps__press) { grid-template-columns:var(--hjm-steps-indicator-size) minmax(0,1fr); align-items:center; column-gap:var(--hjm-space-md); }
+.hjm-steps:is([data-presentation="vertical"],[data-presentation="compact"][data-expanded="true"]) .hjm-steps__copy { text-align:start; }
+.hjm-steps__body { margin-inline-start:calc(var(--hjm-steps-indicator-size) + var(--hjm-space-md)); padding-block:var(--hjm-space-sm); }
+.hjm-steps-compact { min-inline-size:0; }
+.hjm-steps-compact__header { display:flex; align-items:center; justify-content:space-between; gap:var(--hjm-space-sm); margin-block-end:var(--hjm-space-xs); font-size:var(--hjm-type-label-size); }
+.hjm-steps-compact__toggle { display:flex; align-items:center; gap:var(--hjm-space-xs); flex-shrink:0; min-block-size:44px; padding:0; border:0; background:none; font:inherit; color:var(--hjm-color-text-muted); cursor:pointer; }
+.hjm-steps[data-presentation="compact"][data-expanded="false"] { display:flex; gap:var(--hjm-space-xxs); padding:0; }
+.hjm-steps[data-presentation="compact"][data-expanded="false"] .hjm-steps__step { flex:1; height:var(--hjm-steps-segment-height); background:var(--hjm-color-border); border-radius:var(--hjm-radius-full); }
+.hjm-steps[data-presentation="compact"][data-expanded="false"] .hjm-steps__step:is([data-status="complete"],[data-status="current"]) { background:var(--hjm-color-text); }
+.hjm-steps[data-presentation="compact"][data-expanded="false"] .hjm-steps__step[data-status="error"] { background:var(--hjm-color-danger); }
+.hjm-steps[data-presentation="compact"][data-expanded="false"] .hjm-steps__item { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); min-block-size:0; }
+@media(prefers-reduced-motion:reduce) { .hjm-steps * { transition:none!important; transform:none!important; } }
+.hjm-root[data-motion="reduced"] .hjm-steps * { transition:none!important; transform:none!important; }
+
 
 .hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
 .hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
@@ -3278,7 +3363,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-watermark { position: relative; isolation: isolate; }
 .hjm-watermark__content { position: relative; z-index: 0; overflow-wrap: anywhere; }
 .hjm-watermark__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; overflow: hidden; color: var(--hjm-color-text-sub); font: inherit; }
-.hjm-affix { color: var(--hjm-color-text); background: var(--hjm-color-bg); overflow-wrap: anywhere; }
+/* Stacking and fill come from affixRecipe.defaults (layer sticky = --hjm-layer-sticky 100, fill canvas); the box is always
+   positioned (sticky or relative), so z-index applies in both the pinned and the released state. */
+.hjm-affix { z-index: var(--hjm-layer-sticky); color: var(--hjm-color-text); background: var(--hjm-color-bg); overflow-wrap: anywhere; }
+.hjm-affix[data-layer="base"] { z-index: var(--hjm-layer-base); }
+.hjm-affix[data-fill="none"] { background: transparent; }
 .hjm-affix__marker { display: block; block-size: 0; pointer-events: none; }
 
 /* Sidebar presentation decorates fixed link boxes; no pointer/focus target is transformed. */
@@ -3388,6 +3477,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* contentInset="none" hands every inset to the host: no footer rule, as on Native (BottomCTA then draws its own bar). */
 .hjm-screen[data-content-inset="none"] > .hjm-screen__footer { border-block-start: 0; }
 .hjm-screen__body[data-scroll="screen"] { overflow-y: auto; }
+/* A screen-scrolled body is a Tab stop for keyboard scrolling, so reaching it by keyboard draws the HJM ring, inset
+   because the body fills the screen and an outer ring would be clipped. Focus that ScreenLayout itself parks on the
+   body after the focused node was removed (data-focus-landing) is a landing, not a control, and draws none, like
+   the search results landing (2026-10-23 web check: the browser default ring outlined the whole body). */
+.hjm-screen__body:focus { outline: none; }
+.hjm-screen__body:focus-visible:not([data-focus-landing]) { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: calc(-1 * var(--hjm-focus-width)); }
 .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%; }
@@ -3436,14 +3531,17 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Wrapped bubbles (reaction trigger anchors) must shrink so the time stays beside them. */
 .hjm-chat-message__body > :not(.hjm-chat-message__meta) { flex: 0 1 auto; min-inline-size: 0; }
 .hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__body { flex-direction: row-reverse; }
-.hjm-chat-message__bubble { border-radius: 14px; background: var(--hjm-color-surface); padding: 6px 10px; min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
-.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble { background: var(--hjm-color-surface-accent); }
+/* Incoming bubbles use the alternate surface because the light canvas and surface are both white. */
+.hjm-chat-message__bubble { border-radius: 14px; background: var(--hjm-color-surface-alt); padding: 6px 10px; min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+/* iMessage-style filled authorship contrast; the product primary/onPrimary pair stays authoritative. */
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble { background: var(--hjm-color-primary); color: var(--hjm-color-on-primary); }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble .hjm-text:is([data-tone="primary"], [data-tone="body"], [data-tone="muted"], [data-tone="subtle"], [data-tone="weak"]) { color: var(--hjm-color-on-primary); }
 /* Tighten the first corner to join the overlapping rounded tip. */
 .hjm-chat-message[data-tail] .hjm-chat-message__bubble { position: relative; border-start-start-radius: 4px; }
 /* The reference tip follows the top edge; its curved underside joins the bubble (2026-10-20). */
-.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 11px; height: 10px; border-start-start-radius: 1px; border-end-start-radius: 10px; background: var(--hjm-color-surface); pointer-events: none; }
+.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 11px; height: 10px; border-start-start-radius: 1px; border-end-start-radius: 10px; background: var(--hjm-color-surface-alt); pointer-events: none; }
 .hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; }
-.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -6px; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 1px; border-end-end-radius: 10px; background: var(--hjm-color-surface-accent); }
+.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -6px; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 1px; border-end-end-radius: 10px; background: var(--hjm-color-primary); }
 /* Logical corner radii and insets mirror the curved tail in RTL. */
 
 .hjm-chat-message__meta { display: flex; flex-shrink: 0; align-items: center; gap: var(--hjm-space-xs); }
@@ -3461,8 +3559,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 @media (prefers-reduced-motion: reduce) { .hjm-typing-indicator__dot { animation: none; } }
 @keyframes hjm-typing-pulse { 0%, 100% { opacity: var(--hjm-typing-rest); } 50% { opacity: 1; } }
 /* A quoted reply heads the bubble and is divided from the answer. */
-.hjm-chat-message__reply { border-block-end: 1px solid var(--hjm-color-border); padding-block-end: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
-.hjm-chat-message__quote { inline-size: 100%; border-inline: 0; border-block-start: 0; background: none; padding-inline: 0; padding-block-start: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__reply { border-color: var(--hjm-color-on-primary); }
+.hjm-chat-message__reply { border-inline-start: 3px solid var(--hjm-color-content-brand); padding-inline-start: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
+.hjm-chat-message__quote { inline-size: 100%; border-inline-end: 0; border-block: 0; background: none; padding-inline-end: 0; padding-block-start: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
 .hjm-chat-message__quote:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
 .hjm-chat-message__quote-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hjm-chat-message__media { display: grid; border-radius: 14px; overflow: hidden; max-inline-size: 100%; }
@@ -3739,6 +3838,10 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 }
 
 .hjm-statistic__leading { display: inline-flex; align-items: center; color: var(--hjm-statistic-value-color, var(--hjm-color-text)); }
+/* A leading glyph labels its value: keep them on one line and let the value text wrap beside it.
+   Wrapping the row dropped a long value (e.g. "10월 9일 09:40") under a lone icon (2026-10-23). */
+.hjm-statistic__value-row[data-leading] { flex-wrap: nowrap; }
+.hjm-statistic__value-row[data-leading] > .hjm-statistic__leading { flex-shrink: 0; }
 .hjm-statistic-group[data-arrangement="bar"] { grid-template-columns: repeat(var(--hjm-statistic-columns), minmax(0, 1fr)); gap: 0; }
 .hjm-statistic-group[data-arrangement="bar"] > * { min-inline-size: 0; padding-inline: var(--hjm-space-xs); }
 .hjm-statistic-group[data-arrangement="bar"] > * + * { border-inline-start: 1px solid var(--hjm-color-border); }
@@ -3844,6 +3947,12 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-selection-tone="brand"][data-presentation="pills"] .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"]::before { background: transparent; }
 
 /* Photo chrome is deliberately independent of the product theme: no card frame or crop. */
+/* ImageViewerTrigger: imageViewerTriggerRecipe (radius = imageRecipe.radius md so the ring follows the image frame). */
+.hjm-image-viewer-trigger { display: block; inline-size: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--hjm-radius-md); background: none; color: inherit; font: inherit; text-align: inherit; cursor: var(--hjm-image-viewer-trigger-cursor, zoom-in); }
+.hjm-image-viewer-trigger > * { display: block; }
+.hjm-image-viewer-trigger:active:not(:disabled) { opacity: var(--hjm-image-viewer-trigger-pressed-opacity); }
+.hjm-image-viewer-trigger:disabled { cursor: default; opacity: var(--hjm-image-viewer-trigger-disabled-opacity); }
+.hjm-image-viewer-trigger:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-image-viewer { position: fixed; inset: 0; display: flex; flex-direction: column; min-inline-size: 0; background: #000; color: #fff; padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); }
 .hjm-image-viewer__header, .hjm-image-viewer__footer { display: flex; align-items: center; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) max(var(--hjm-space-md), env(safe-area-inset-left)) var(--hjm-space-xs) max(var(--hjm-space-md), env(safe-area-inset-right)); }
 .hjm-image-viewer__footer > span { flex: 1; text-align: center; }
@@ -3860,4 +3969,19 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-surface[data-tone="selected"][data-bordered="true"] { border-color: var(--hjm-color-border-control); }
 .hjm-data-table__table tr[aria-selected="true"] > :is(td, th) { background-color: var(--hjm-color-surface-selected); }
 
+/* Borrow room-info hierarchy only; canvas and surfaces follow the HJM/product theme. */
+.hjm-chat-room { background:var(--hjm-color-bg); padding:var(--hjm-space-md); }
+.hjm-chat-room__group { background:var(--hjm-color-surface); padding:var(--hjm-space-md); border-radius:var(--hjm-radius-lg); }
+.hjm-chat-room__tools { display:flex; gap:var(--hjm-space-xs); }
+.hjm-chat-room__tool { flex:1; min-width:0; min-height:64px; border:0; border-radius:var(--hjm-radius-md); padding:var(--hjm-space-xs); background:var(--hjm-color-surface); color:var(--hjm-color-content-brand); cursor:pointer; }
+.hjm-chat-room__tool:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:2px; }
+.hjm-chat-room__tool:disabled { cursor:default; opacity:.6; }
+
+/* Telegram quoted replies carry an inset tint as well as the leading rail. */
+.hjm-chat-message__reply { padding:var(--hjm-space-xs); border-radius:var(--hjm-radius-sm); background:color-mix(in srgb,var(--hjm-color-content-brand) 12%,transparent); }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__reply { background:color-mix(in srgb,var(--hjm-color-on-primary) 12%,transparent); }
+
+.hjm-chat-room__photo { display:block; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; color:inherit; }
+.hjm-chat-room__photo:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:2px; }
+
 }

package/dist/supplemental-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-display.d.ts","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"supplemental-display.d.ts","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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"}

package/dist/supplemental-display.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getIconTransform, resolveIconDescriptor, semanticIconPaths, } from "@hjmds/design-contracts/components/icon";
 import { imageRecipe, resolveImageAspectRatio, resolveImageDescriptor, resolveImageFallbackAccessibilityLabel, } from "@hjmds/design-contracts/components/image";

package/dist/supplemental-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-display.js","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  getIconTransform,\n  resolveIconDescriptor,\n  semanticIconPaths,\n  type IconDescriptor,\n  type SemanticIconName,\n} from \"@hjmds/design-contracts/components/icon\";\nimport {\n  imageRecipe,\n  resolveImageAspectRatio,\n  resolveImageDescriptor,\n  resolveImageFallbackAccessibilityLabel,\n  type ImageDescriptor,\n  type ImageLoadStatus,\n} from \"@hjmds/design-contracts/components/image\";\nimport {\n  counterBadgeRecipe,\n  formatCounterBadgeCount,\n  iconRecipe,\n  type CounterBadgeSize,\n  type CounterBadgeTone,\n  type CounterBadgeVariant,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useState,\n  useMemo,\n  useRef,\n  useLayoutEffect,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactElement,\n  type ReactEventHandler,\n  type ReactNode,\n  type Ref,\n  type SVGAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n\nexport type IconProps = Omit<\n  SVGAttributes<SVGSVGElement>,\n  \"children\" | \"color\"\n> & IconDescriptor & Readonly<{\n  /** Optional glyph inside the existing 24-unit SVG frame; HJM owns semantics. */\n  renderGlyph?: (props: Readonly<{ name: SemanticIconName; size: number; color: string; strokeWidth: number }>) => ReactNode;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  {\n    name,\n    size,\n    tone,\n    weight,\n    directionality,\n    decorative,\n    accessibilityLabel,\n    renderGlyph,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveIconDescriptor({\n    name,\n    ...(size === undefined ? {} : { size }),\n    ...(tone === undefined ? {} : { tone }),\n    ...(weight === undefined ? {} : { weight }),\n    ...(directionality === undefined ? {} : { directionality }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as IconDescriptor);\n  const theme = useOptionalHjmTheme();\n  const transform = getIconTransform(\n    descriptor.directionality,\n    theme?.environment.direction ?? \"ltr\",\n  );\n  const dimension = iconRecipe.sizes[descriptor.size];\n  return (\n    <svg\n      {...props}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\"hjm-icon\", className)}\n      data-name={descriptor.name}\n      data-size={descriptor.size}\n      data-tone={descriptor.tone}\n      data-weight={descriptor.weight}\n      data-transform={transform}\n      width={dimension}\n      height={dimension}\n      stroke=\"currentColor\"\n      strokeWidth={iconRecipe.weights[descriptor.weight]}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role={descriptor.decorative ? undefined : \"img\"}\n      aria-hidden={descriptor.decorative || undefined}\n      aria-label={descriptor.decorative ? undefined : descriptor.accessibilityLabel}\n      focusable=\"false\"\n      style={{ ...style, ...layoutStyle }}\n    >\n      {renderGlyph?.({ name: descriptor.name, size: 24, color: \"currentColor\", strokeWidth: iconRecipe.weights[descriptor.weight] }) ?? <path d={semanticIconPaths[descriptor.name]} />}\n    </svg>\n  );\n});\n\ntype ImageElementProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  | \"alt\"\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"children\"\n  | \"className\"\n  | \"height\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n  | \"src\"\n  | \"style\"\n  | \"width\"\n>;\n\n/** Canonical props handed to a framework adapter such as `next/image`. */\nexport type ImageAdapterProps = ImageElementProps &\n  Readonly<{\n    src: string;\n    alt: string;\n    width: number;\n    height: number;\n    className?: string;\n    style: CSSProperties;\n    \"aria-hidden\"?: true;\n    onLoad: ReactEventHandler<HTMLImageElement>;\n    onError: ReactEventHandler<HTMLImageElement>;\n    ref?: Ref<HTMLImageElement>;\n  }>;\n\ntype ImageRootProps = Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"children\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n>;\n\nexport type ImageProps = ImageRootProps &\n  ImageDescriptor &\n  Readonly<{\n    /** Additional native `<img>` props shared with the framework adapter. */\n    imageProps?: ImageElementProps &\n      Readonly<{ className?: string; style?: CSSProperties }>;\n    /**\n     * Receives the complete accessible image contract. The adapter must pass\n     * these props to its underlying image element so HJM can observe failure.\n     */\n    renderImage?: (props: ImageAdapterProps) => ReactElement;\n    /** Visual content only; HJM keeps the fallback's accessible name. */\n    fallback?: ReactNode;\n    imageRef?: Ref<HTMLImageElement>;\n    onLoad?: ReactEventHandler<HTMLImageElement>;\n    onError?: ReactEventHandler<HTMLImageElement>;\n    onLoadStatusChange?: (status: Extract<ImageLoadStatus, \"loaded\" | \"error\">) => void;\n    /** Canonical layout-only placement on the root frame; the aspect ratio stays descriptor-owned. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\ntype ImageState = Readonly<{\n  generation: object;\n  status: Extract<ImageLoadStatus, \"loading\" | \"loaded\" | \"error\">;\n}>;\n\n/** Intrinsic-size image with canonical alt semantics and an accessible fallback. */\nexport const Image = forwardRef<HTMLSpanElement, ImageProps>(function Image(\n  {\n    src,\n    width,\n    height,\n    fit,\n    decorative,\n    accessibilityLabel,\n    imageProps,\n    renderImage,\n    fallback,\n    imageRef,\n    onLoad,\n    onError,\n    onLoadStatusChange,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveImageDescriptor({\n    src,\n    width,\n    height,\n    ...(fit === undefined ? {} : { fit }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as ImageDescriptor);\n  // A→B→A is a new request even when the URL repeats. Retire adapter callbacks\n  // at commit/unmount so old network events cannot update state or product observers.\n  // Responsive source candidates and request policy are part of image identity;\n  // a new srcSet must recover even when its fallback src is unchanged.\n  const generation = useMemo(() => ({}), [descriptor.src, imageProps?.srcSet, imageProps?.sizes, imageProps?.crossOrigin, imageProps?.referrerPolicy]);\n  const activeGeneration = useRef<object | null>(generation);\n  useLayoutEffect(() => {\n    activeGeneration.current = generation;\n    return () => { activeGeneration.current = null; };\n  }, [generation]);\n  const [state, setState] = useState<ImageState>({ generation, status: \"loading\" });\n  const status = state.generation === generation ? state.status : \"loading\";\n  const {\n    className: imageClassName,\n    style: imageStyle,\n    ...restImageProps\n  } = imageProps ?? {};\n\n  const handleLoad: ReactEventHandler<HTMLImageElement> = (event) => {\n    if (activeGeneration.current !== generation) return;\n    setState({ generation, status: \"loaded\" });\n    onLoadStatusChange?.(\"loaded\");\n    onLoad?.(event);\n  };\n  const handleError: ReactEventHandler<HTMLImageElement> = (event) => {\n    if (activeGeneration.current !== generation) return;\n    setState({ generation, status: \"error\" });\n    onLoadStatusChange?.(\"error\");\n    onError?.(event);\n  };\n  const adapterProps: ImageAdapterProps = {\n    ...restImageProps,\n    src: descriptor.src,\n    alt: descriptor.decorative ? \"\" : descriptor.accessibilityLabel,\n    width: descriptor.width,\n    height: descriptor.height,\n    className: classNames(\"hjm-image__asset\", imageClassName) ??\n      \"hjm-image__asset\",\n    style: { ...imageStyle, objectFit: descriptor.fit },\n    ...(descriptor.decorative ? { \"aria-hidden\": true } : {}),\n    onLoad: handleLoad,\n    onError: handleError,\n    ...(imageRef === undefined ? {} : { ref: imageRef }),\n  };\n\n  let visual: ReactNode;\n  if (status === \"error\") {\n    const fallbackLabel = resolveImageFallbackAccessibilityLabel(descriptor);\n    visual = (\n      <span\n        className=\"hjm-image__fallback\"\n        role={descriptor.decorative ? undefined : \"img\"}\n        aria-label={fallbackLabel}\n        aria-hidden={descriptor.decorative || undefined}\n      >\n        <span className=\"hjm-image__fallback-icon\" aria-hidden=\"true\">\n          {fallback ?? (\n            <Icon\n              name={imageRecipe.fallback.icon.name}\n              tone={imageRecipe.fallback.icon.tone}\n              decorative\n            />\n          )}\n        </span>\n      </span>\n    );\n  } else if (renderImage === undefined) {\n    const { ref: assetRef, ...nativeImageProps } = adapterProps;\n    visual = <img {...nativeImageProps} ref={assetRef} />;\n  } else {\n    visual = renderImage(adapterProps);\n  }\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-image\", className)}\n      data-fit={descriptor.fit}\n      data-status={status}\n      style={{\n        inlineSize: descriptor.width,\n        ...style,\n        ...layoutStyle,\n        aspectRatio: resolveImageAspectRatio(\n          descriptor.width,\n          descriptor.height,\n        ),\n      }}\n    >\n      {visual}\n    </span>\n  );\n});\n\nexport type CounterBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    count: number;\n    max?: number;\n    tone?: CounterBadgeTone;\n    size?: CounterBadgeSize;\n    variant?: CounterBadgeVariant;\n    /**\n     * Says \"there is something new\" without a number. Use it where the count is\n     * unknown or not worth reading; inventing a number would be worse than\n     * saying none. The accessible name then carries the whole meaning.\n     */\n    dot?: boolean;\n    accessibilityLabel?: string;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const CounterBadge = forwardRef<HTMLSpanElement, CounterBadgeProps>(\n  function CounterBadge(\n    {\n      count,\n      max = counterBadgeRecipe.defaults.max,\n      tone = counterBadgeRecipe.defaults.tone,\n      size = counterBadgeRecipe.defaults.size,\n      variant = counterBadgeRecipe.defaults.variant,\n      dot = false,\n      accessibilityLabel,\n      className,\n      layoutStyle,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const label = formatCounterBadgeCount(count, max);\n    if (accessibilityLabel !== undefined && accessibilityLabel.trim().length === 0) {\n      throw new TypeError(\"CounterBadge accessibilityLabel must not be empty\");\n    }\n    if (dot && accessibilityLabel === undefined) {\n      // A dot with no name is a decoration that nobody can read.\n      throw new TypeError(\"CounterBadge dot requires an accessibilityLabel\");\n    }\n    if (label === null) return null;\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={classNames(\"hjm-counter-badge\", className)}\n        data-tone={tone}\n        data-size={size}\n        data-variant={variant}\n        data-dot={dot || undefined}\n        style={dot ? { ...style, ...layoutStyle, \"--hjm-counter-dot-size\": `${counterBadgeRecipe.dotSize}px` } as typeof style : { ...style, ...layoutStyle }}\n        aria-hidden={accessibilityLabel === undefined || undefined}\n        // A named count needs a semantic role; generic spans cannot carry aria-label.\n        role={accessibilityLabel === undefined ? undefined : \"img\"}\n        aria-label={accessibilityLabel}\n      >\n        {dot ? null : label}\n      </span>\n    );\n  },\n);\n"]}
+{"version":3,"file":"supplemental-display.js","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport {\n  getIconTransform,\n  resolveIconDescriptor,\n  semanticIconPaths,\n  type IconDescriptor,\n  type SemanticIconName,\n} from \"@hjmds/design-contracts/components/icon\";\nimport {\n  imageRecipe,\n  resolveImageAspectRatio,\n  resolveImageDescriptor,\n  resolveImageFallbackAccessibilityLabel,\n  type ImageDescriptor,\n  type ImageLoadStatus,\n} from \"@hjmds/design-contracts/components/image\";\nimport {\n  counterBadgeRecipe,\n  formatCounterBadgeCount,\n  iconRecipe,\n  type CounterBadgeSize,\n  type CounterBadgeTone,\n  type CounterBadgeVariant,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useState,\n  useMemo,\n  useRef,\n  useLayoutEffect,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactElement,\n  type ReactEventHandler,\n  type ReactNode,\n  type Ref,\n  type SVGAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n\nexport type IconProps = Omit<\n  SVGAttributes<SVGSVGElement>,\n  \"children\" | \"color\"\n> & IconDescriptor & Readonly<{\n  /** Optional glyph inside the existing 24-unit SVG frame; HJM owns semantics. */\n  renderGlyph?: (props: Readonly<{ name: SemanticIconName; size: number; color: string; strokeWidth: number }>) => ReactNode;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  {\n    name,\n    size,\n    tone,\n    weight,\n    directionality,\n    decorative,\n    accessibilityLabel,\n    renderGlyph,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveIconDescriptor({\n    name,\n    ...(size === undefined ? {} : { size }),\n    ...(tone === undefined ? {} : { tone }),\n    ...(weight === undefined ? {} : { weight }),\n    ...(directionality === undefined ? {} : { directionality }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as IconDescriptor);\n  const theme = useOptionalHjmTheme();\n  const transform = getIconTransform(\n    descriptor.directionality,\n    theme?.environment.direction ?? \"ltr\",\n  );\n  const dimension = iconRecipe.sizes[descriptor.size];\n  return (\n    <svg\n      {...props}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\"hjm-icon\", className)}\n      data-name={descriptor.name}\n      data-size={descriptor.size}\n      data-tone={descriptor.tone}\n      data-weight={descriptor.weight}\n      data-transform={transform}\n      width={dimension}\n      height={dimension}\n      stroke=\"currentColor\"\n      strokeWidth={iconRecipe.weights[descriptor.weight]}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role={descriptor.decorative ? undefined : \"img\"}\n      aria-hidden={descriptor.decorative || undefined}\n      aria-label={descriptor.decorative ? undefined : descriptor.accessibilityLabel}\n      focusable=\"false\"\n      style={{ ...style, ...layoutStyle }}\n    >\n      {renderGlyph?.({ name: descriptor.name, size: 24, color: \"currentColor\", strokeWidth: iconRecipe.weights[descriptor.weight] }) ?? <path d={semanticIconPaths[descriptor.name]} />}\n    </svg>\n  );\n});\n\ntype ImageElementProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  | \"alt\"\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"children\"\n  | \"className\"\n  | \"height\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n  | \"src\"\n  | \"style\"\n  | \"width\"\n>;\n\n/** Canonical props handed to a framework adapter such as `next/image`. */\nexport type ImageAdapterProps = ImageElementProps &\n  Readonly<{\n    src: string;\n    alt: string;\n    width: number;\n    height: number;\n    className?: string;\n    style: CSSProperties;\n    \"aria-hidden\"?: true;\n    onLoad: ReactEventHandler<HTMLImageElement>;\n    onError: ReactEventHandler<HTMLImageElement>;\n    ref?: Ref<HTMLImageElement>;\n  }>;\n\ntype ImageRootProps = Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"children\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n>;\n\nexport type ImageProps = ImageRootProps &\n  ImageDescriptor &\n  Readonly<{\n    /** Additional native `<img>` props shared with the framework adapter. */\n    imageProps?: ImageElementProps &\n      Readonly<{ className?: string; style?: CSSProperties }>;\n    /**\n     * Receives the complete accessible image contract. The adapter must pass\n     * these props to its underlying image element so HJM can observe failure.\n     */\n    renderImage?: (props: ImageAdapterProps) => ReactElement;\n    /** Visual content only; HJM keeps the fallback's accessible name. */\n    fallback?: ReactNode;\n    imageRef?: Ref<HTMLImageElement>;\n    onLoad?: ReactEventHandler<HTMLImageElement>;\n    onError?: ReactEventHandler<HTMLImageElement>;\n    onLoadStatusChange?: (status: Extract<ImageLoadStatus, \"loaded\" | \"error\">) => void;\n    /** Canonical layout-only placement on the root frame; the aspect ratio stays descriptor-owned. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\ntype ImageState = Readonly<{\n  generation: object;\n  status: Extract<ImageLoadStatus, \"loading\" | \"loaded\" | \"error\">;\n}>;\n\n/** Intrinsic-size image with canonical alt semantics and an accessible fallback. */\nexport const Image = forwardRef<HTMLSpanElement, ImageProps>(function Image(\n  {\n    src,\n    width,\n    height,\n    fit,\n    decorative,\n    accessibilityLabel,\n    imageProps,\n    renderImage,\n    fallback,\n    imageRef,\n    onLoad,\n    onError,\n    onLoadStatusChange,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveImageDescriptor({\n    src,\n    width,\n    height,\n    ...(fit === undefined ? {} : { fit }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as ImageDescriptor);\n  // A→B→A is a new request even when the URL repeats. Retire adapter callbacks\n  // at commit/unmount so old network events cannot update state or product observers.\n  // Responsive source candidates and request policy are part of image identity;\n  // a new srcSet must recover even when its fallback src is unchanged.\n  const generation = useMemo(() => ({}), [descriptor.src, imageProps?.srcSet, imageProps?.sizes, imageProps?.crossOrigin, imageProps?.referrerPolicy]);\n  const activeGeneration = useRef<object | null>(generation);\n  useLayoutEffect(() => {\n    activeGeneration.current = generation;\n    return () => { activeGeneration.current = null; };\n  }, [generation]);\n  const [state, setState] = useState<ImageState>({ generation, status: \"loading\" });\n  const status = state.generation === generation ? state.status : \"loading\";\n  const {\n    className: imageClassName,\n    style: imageStyle,\n    ...restImageProps\n  } = imageProps ?? {};\n\n  const handleLoad: ReactEventHandler<HTMLImageElement> = (event) => {\n    if (activeGeneration.current !== generation) return;\n    setState({ generation, status: \"loaded\" });\n    onLoadStatusChange?.(\"loaded\");\n    onLoad?.(event);\n  };\n  const handleError: ReactEventHandler<HTMLImageElement> = (event) => {\n    if (activeGeneration.current !== generation) return;\n    setState({ generation, status: \"error\" });\n    onLoadStatusChange?.(\"error\");\n    onError?.(event);\n  };\n  const adapterProps: ImageAdapterProps = {\n    ...restImageProps,\n    src: descriptor.src,\n    alt: descriptor.decorative ? \"\" : descriptor.accessibilityLabel,\n    width: descriptor.width,\n    height: descriptor.height,\n    className: classNames(\"hjm-image__asset\", imageClassName) ??\n      \"hjm-image__asset\",\n    style: { ...imageStyle, objectFit: descriptor.fit },\n    ...(descriptor.decorative ? { \"aria-hidden\": true } : {}),\n    onLoad: handleLoad,\n    onError: handleError,\n    ...(imageRef === undefined ? {} : { ref: imageRef }),\n  };\n\n  let visual: ReactNode;\n  if (status === \"error\") {\n    const fallbackLabel = resolveImageFallbackAccessibilityLabel(descriptor);\n    visual = (\n      <span\n        className=\"hjm-image__fallback\"\n        role={descriptor.decorative ? undefined : \"img\"}\n        aria-label={fallbackLabel}\n        aria-hidden={descriptor.decorative || undefined}\n      >\n        <span className=\"hjm-image__fallback-icon\" aria-hidden=\"true\">\n          {fallback ?? (\n            <Icon\n              name={imageRecipe.fallback.icon.name}\n              tone={imageRecipe.fallback.icon.tone}\n              decorative\n            />\n          )}\n        </span>\n      </span>\n    );\n  } else if (renderImage === undefined) {\n    const { ref: assetRef, ...nativeImageProps } = adapterProps;\n    visual = <img {...nativeImageProps} ref={assetRef} />;\n  } else {\n    visual = renderImage(adapterProps);\n  }\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-image\", className)}\n      data-fit={descriptor.fit}\n      data-status={status}\n      style={{\n        inlineSize: descriptor.width,\n        ...style,\n        ...layoutStyle,\n        aspectRatio: resolveImageAspectRatio(\n          descriptor.width,\n          descriptor.height,\n        ),\n      }}\n    >\n      {visual}\n    </span>\n  );\n});\n\nexport type CounterBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    count: number;\n    max?: number;\n    tone?: CounterBadgeTone;\n    size?: CounterBadgeSize;\n    variant?: CounterBadgeVariant;\n    /**\n     * Says \"there is something new\" without a number. Use it where the count is\n     * unknown or not worth reading; inventing a number would be worse than\n     * saying none. The accessible name then carries the whole meaning.\n     */\n    dot?: boolean;\n    accessibilityLabel?: string;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const CounterBadge = forwardRef<HTMLSpanElement, CounterBadgeProps>(\n  function CounterBadge(\n    {\n      count,\n      max = counterBadgeRecipe.defaults.max,\n      tone = counterBadgeRecipe.defaults.tone,\n      size = counterBadgeRecipe.defaults.size,\n      variant = counterBadgeRecipe.defaults.variant,\n      dot = false,\n      accessibilityLabel,\n      className,\n      layoutStyle,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const label = formatCounterBadgeCount(count, max);\n    if (accessibilityLabel !== undefined && accessibilityLabel.trim().length === 0) {\n      throw new TypeError(\"CounterBadge accessibilityLabel must not be empty\");\n    }\n    if (dot && accessibilityLabel === undefined) {\n      // A dot with no name is a decoration that nobody can read.\n      throw new TypeError(\"CounterBadge dot requires an accessibilityLabel\");\n    }\n    if (label === null) return null;\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={classNames(\"hjm-counter-badge\", className)}\n        data-tone={tone}\n        data-size={size}\n        data-variant={variant}\n        data-dot={dot || undefined}\n        style={dot ? { ...style, ...layoutStyle, \"--hjm-counter-dot-size\": `${counterBadgeRecipe.dotSize}px` } as typeof style : { ...style, ...layoutStyle }}\n        aria-hidden={accessibilityLabel === undefined || undefined}\n        // A named count needs a semantic role; generic spans cannot carry aria-label.\n        role={accessibilityLabel === undefined ? undefined : \"img\"}\n        aria-label={accessibilityLabel}\n      >\n        {dot ? null : label}\n      </span>\n    );\n  },\n);\n"]}

package/dist/supplemental-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-navigation.d.ts","sourceRoot":"","sources":["../src/supplemental-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA8BtE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAC1E,QAAQ,CAAC;IACP,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,UAAU,EAAE,sBAAsB,CAAC;IACnC,gBAAgB,CAAC,EAAE,CACjB,OAAO,EAAE,sBAAsB,EAC/B,MAAM,EAAE,qBAAqB,KAC1B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEL;;;GAGG;AACH,eAAO,MAAM,QAAQ;gBArBL,kBAAkB;IAC9B,gFAAgF;eACrE,OAAO;WACX,YAAY;cACT,eAAe;gBACb,sBAAsB;uBACf,CACjB,OAAO,EAAE,sBAAsB,EAC/B,MAAM,EAAE,qBAAqB,KAC1B,IAAI;qBACQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI;uBACrD,OAAO,GAAG,QAAQ,GAAG,IAAI;iBAC/B,MAAM;IACnB,gGAAgG;kBAClF,uBAAuB;mDA+JxC,CAAC"}
+{"version":3,"file":"supplemental-navigation.d.ts","sourceRoot":"","sources":["../src/supplemental-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA8BtE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAC1E,QAAQ,CAAC;IACP,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,UAAU,EAAE,sBAAsB,CAAC;IACnC,gBAAgB,CAAC,EAAE,CACjB,OAAO,EAAE,sBAAsB,EAC/B,MAAM,EAAE,qBAAqB,KAC1B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEL;;;GAGG;AACH,eAAO,MAAM,QAAQ;gBArBL,kBAAkB;IAC9B,gFAAgF;eACrE,OAAO;WACX,YAAY;cACT,eAAe;gBACb,sBAAsB;uBACf,CACjB,OAAO,EAAE,sBAAsB,EAC/B,MAAM,EAAE,qBAAqB,KAC1B,IAAI;qBACQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI;uBACrD,OAAO,GAAG,QAAQ,GAAG,IAAI;iBAC/B,MAAM;IACnB,gGAAgG;kBAClF,uBAAuB;mDA+JxC,CAAC"}

package/dist/supplemental-navigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLoadMoreController, validateLoadMoreDescriptor, } from "@hjmds/design-contracts/components/load-more";
 import { loadMoreRecipe, } from "@hjmds/design-contracts/recipes";