@hjmds/react 1.39.0 → 1.41.0

package/dist/reaction-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"reaction-picker.js","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { nextReaction, validateReactions, resolveReactionOptions, type ReactionMoreOptions, type ReactionOption } from \"@hjmds/design-contracts/reactions\";\nimport { Button } from \"./actions.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type ReactionPickerProps = Readonly<{ label: string; options: readonly ReactionOption[]; value: string | null; onValueChange: (value: string | null) => void; disabled?: boolean; layout?: \"wrap\" | \"strip\"; layoutStyle?: HjmCompositionStyleProp; more?: ReactionMoreOptions }>;\n/** Controlled single reaction; counts and persistence belong to the product. */\nexport function ReactionPicker({ label, options, value, onValueChange, disabled = false, layout = \"wrap\", more, layoutStyle }: ReactionPickerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const toggle = useRef<HTMLButtonElement>(null);\n  const refocus = useRef(false);\n  const all = resolveReactionOptions(options, more);\n  validateReactions(all, value);\n  const showingAll = expanded && !!more;\n  // The wrap layout sits on the page background, where a ghost Button's selected treatment (content color on the\n  // canvas) cannot show: an emoji ignores text color. It uses the chip frame instead — hairline at rest, brand\n  // border and accent fill when chosen — with toggle-button semantics (aria-pressed), matching Native. The strip\n  // layout keeps ghost Buttons because the message bubble supplies its surface (2026-10-17 review).\n  const chips = layout === \"wrap\";\n  const visible = showingAll ? all : options;\n  const choose = (id: string) => { if (!disabled) { refocus.current = !!root.current?.contains(document.activeElement); onValueChange(nextReaction(all, value, id)); setExpanded(false); } };\n  // A catalog-only button unmounts on collapse: refocus the toggle, not <body>. Inert hosts restore their own trigger.\n  useLayoutEffect(() => { const node = root.current; if (refocus.current && !showingAll && node && !node.closest(\"[inert]\") && !node.contains(document.activeElement)) toggle.current?.focus(); refocus.current = false; });\n  return <div ref={root} role=\"group\" aria-label={label} className=\"hjm-reaction-picker\" data-layout={layout} data-expanded={showingAll || undefined} style={layoutStyle}>\n    <div className=\"hjm-reaction-picker__options\">\n      {visible.map(option => {\n        const glyph = <span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{option.emoji}{option.count === undefined ? null : ` ${option.count}`}</span>;\n        const selected = value === option.id;\n        return chips\n          ? <button key={option.id} type=\"button\" className=\"hjm-chip hjm-reaction-picker__chip\" data-size=\"small\" data-selected={selected || undefined} aria-pressed={selected} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => choose(option.id)}>{glyph}</button>\n          : <Button key={option.id} tone=\"ghost\" shape=\"pill\" selected={selected} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => choose(option.id)}>{glyph}</Button>;\n      })}\n    </div>\n    <div>{more ? chips\n      ? <button ref={toggle} type=\"button\" className=\"hjm-chip hjm-reaction-picker__chip\" data-size=\"small\" aria-label={more.label} aria-expanded={showingAll} disabled={disabled} onClick={() => setExpanded(current => !current)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{showingAll ? \"−\" : \"+\"}</span></button>\n      : <Button ref={toggle} tone=\"ghost\" shape=\"pill\" aria-label={more.label} aria-expanded={showingAll} disabled={disabled} onClick={() => setExpanded(current => !current)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{showingAll ? \"−\" : \"+\"}</span></Button> : null}</div>\n  </div>;\n}\n"]}
+{"version":3,"file":"reaction-picker.js","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { nextReaction, validateReactions, resolveReactionOptions, type ReactionMoreOptions, type ReactionOption } from \"@hjmds/design-contracts/reactions\";\nimport { Button } from \"./actions.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type ReactionPickerProps = Readonly<{ label: string; options: readonly ReactionOption[]; value: string | null; onValueChange: (value: string | null) => void; disabled?: boolean; layout?: \"wrap\" | \"strip\"; layoutStyle?: HjmCompositionStyleProp; more?: ReactionMoreOptions }>;\n/** Controlled single reaction; counts and persistence belong to the product. */\nexport function ReactionPicker({ label, options, value, onValueChange, disabled = false, layout = \"wrap\", more, layoutStyle }: ReactionPickerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const toggle = useRef<HTMLButtonElement>(null);\n  const refocus = useRef(false);\n  const all = resolveReactionOptions(options, more);\n  validateReactions(all, value);\n  const showingAll = expanded && !!more;\n  // Wrap reactions keep Chip's compact frame for counted emoji; strip reactions use ghost Buttons.\n  // Both resolve the same neutral selected surface because emoji cannot communicate a text-color change.\n  const chips = layout === \"wrap\";\n  const visible = showingAll ? all : options;\n  const choose = (id: string) => { if (!disabled) { refocus.current = !!root.current?.contains(document.activeElement); onValueChange(nextReaction(all, value, id)); setExpanded(false); } };\n  // A catalog-only button unmounts on collapse: refocus the toggle, not <body>. Inert hosts restore their own trigger.\n  useLayoutEffect(() => { const node = root.current; if (refocus.current && !showingAll && node && !node.closest(\"[inert]\") && !node.contains(document.activeElement)) toggle.current?.focus(); refocus.current = false; });\n  return <div ref={root} role=\"group\" aria-label={label} className=\"hjm-reaction-picker\" data-layout={layout} data-expanded={showingAll || undefined} style={layoutStyle}>\n    <div className=\"hjm-reaction-picker__options\">\n      {visible.map(option => {\n        const glyph = <span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{option.emoji}{option.count === undefined ? null : ` ${option.count}`}</span>;\n        const selected = value === option.id;\n        return chips\n          ? <button key={option.id} type=\"button\" className=\"hjm-chip hjm-reaction-picker__chip\" data-size=\"small\" data-selected={selected || undefined} aria-pressed={selected} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => choose(option.id)}>{glyph}</button>\n          : <Button key={option.id} tone=\"ghost\" shape=\"pill\" selected={selected} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => choose(option.id)}>{glyph}</Button>;\n      })}\n    </div>\n    <div>{more ? chips\n      ? <button ref={toggle} type=\"button\" className=\"hjm-chip hjm-reaction-picker__chip\" data-size=\"small\" aria-label={more.label} aria-expanded={showingAll} disabled={disabled} onClick={() => setExpanded(current => !current)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{showingAll ? \"−\" : \"+\"}</span></button>\n      : <Button ref={toggle} tone=\"ghost\" shape=\"pill\" aria-label={more.label} aria-expanded={showingAll} disabled={disabled} onClick={() => setExpanded(current => !current)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{showingAll ? \"−\" : \"+\"}</span></Button> : null}</div>\n  </div>;\n}\n"]}

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* Broad neutral and pale-brand surfaces use the theme canvas. Selection stays visible through borders; primary actions and compact state marks retain their semantic fills. */
+/* Persistent selection uses its neutral surface. Focus, primary actions and compact value marks retain their distinct semantic roles; see theme-palette.md. */
 .hjm-root,
 .hjm-root *,
 .hjm-root *::before,
@@ -268,7 +268,7 @@
 /* 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-content-brand); background: var(--hjm-color-bg); border-color: transparent; }
+.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; }
 .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). */
@@ -287,7 +287,7 @@
 .hjm-button[data-tone="primary"] { --hjm-button-face-fill: var(--hjm-color-primary); }
 .hjm-button[data-tone="secondary"] { --hjm-button-face-fill: var(--hjm-color-bg); --hjm-button-face-border: var(--hjm-color-border-control); }
 .hjm-button[data-tone="danger"] { --hjm-button-face-fill: var(--hjm-color-danger-fill); }
-.hjm-button[data-selected="true"] { --hjm-button-face-fill: var(--hjm-color-bg); --hjm-button-face-border: transparent; }
+.hjm-button[data-selected="true"] { --hjm-button-face-fill: var(--hjm-color-surface-selected); --hjm-button-face-border: transparent; }
 .hjm-button[data-raised="true"] { padding: 0 0 var(--hjm-button-depth); border: 0; gap: 0; flex-direction: column; background: color-mix(in srgb, var(--hjm-button-side), #000 var(--hjm-button-side-shade)); }
 .hjm-button__face { position: relative; display: flex; box-sizing: border-box; inline-size: 100%; min-block-size: inherit; flex: 1; align-items: center; justify-content: inherit; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) var(--hjm-button-face-padding); border: 1px solid var(--hjm-button-face-border, transparent); border-radius: inherit; background: var(--hjm-button-face-fill); transition: transform var(--hjm-button-settle) ease-out; }
 .hjm-button[data-raised="true"]:active:not(:disabled):not([aria-disabled="true"]) { opacity: 1; }
@@ -813,7 +813,7 @@
 .hjm-choice[data-presentation="card"][data-state="checked"],
 .hjm-choice[data-presentation="card"][data-state="mixed"],
 .hjm-choice[data-presentation="grouped"][data-state="checked"],
-.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
+.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); }
 .hjm-choice[data-size="small"] { min-block-size: 44px; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) var(--hjm-space-sm); }
 .hjm-choice[data-size="small"][data-presentation="plain"] { padding: 0; }
 .hjm-choice__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
@@ -881,7 +881,7 @@
 .hjm-choice[data-presentation="chips"] .hjm-choice__indicator { display: none; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__leading { color: inherit; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__copy { min-inline-size: 0; overflow-wrap: anywhere; padding-block: 0; }
-.hjm-choice[data-presentation="chips"][data-state="checked"], .hjm-choice[data-presentation="chips"][data-state="mixed"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-content-brand); }
+.hjm-choice[data-presentation="chips"][data-state="checked"], .hjm-choice[data-presentation="chips"][data-state="mixed"] { color: var(--hjm-color-text); border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); }
 .hjm-choice[data-presentation="chips"]:has(.hjm-choice__input:focus-visible) { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 /* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
    Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
@@ -923,7 +923,7 @@
 /* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
 .hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__item::after { content: ""; position: absolute; inset: calc((var(--hjm-segmented-height) - 2 * (var(--hjm-space-xxs) + 1px) - var(--hjm-control-min-touch-target)) / 2) 0; }
 .hjm-segmented__item input { position: absolute; opacity: 0; }
-.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-text); background: var(--hjm-color-surface-selected); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 
 /* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
@@ -1037,7 +1037,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
 .hjm-list-row[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); min-block-size: var(--hjm-list-row-spacious-one-line); padding-block: var(--hjm-list-row-spacious-padding-block); }
 .hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
-.hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-list-row[data-state="selected"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 /* trailingAction: one surface for the row command and its separate action, as Native. The frame takes the bleed; the
    command keeps the start padding and the action the end padding, so the action box ends on the content edge (an
@@ -1046,7 +1046,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row-frame[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); }
 .hjm-list-row-frame[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); }
 .hjm-list-row-frame[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); }
-.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-surface-selected); box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-list-row-frame[data-state="disabled"] { opacity: 0.5; }
 .hjm-list-row-frame > .hjm-list-row { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; margin-inline: 0; padding-inline-end: 0; }
 .hjm-list-row-frame > .hjm-list-row[data-state] { background: transparent; box-shadow: none; opacity: 1; }
@@ -1104,7 +1104,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chip { position: relative; min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-bg); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
 .hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
-.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
+.hjm-chip[data-selected] { border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); }
 .hjm-chip:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-chip:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
@@ -1611,7 +1611,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Panel headings and empty-state copy share the same narrow column as rows. */
 .hjm-transfer-list__title,
 .hjm-transfer-list__empty { min-inline-size: 0; overflow-wrap: anywhere; }
-.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-transfer-list__option[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-transfer-list__option:focus-visible,
 .hjm-transfer-list__empty:focus-visible,
@@ -1973,9 +1973,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 /* The pressed state is announced by aria-pressed; color only reinforces it. */
 .hjm-toggle-group__item[aria-pressed="true"] {
-  border-color: var(--hjm-color-focus);
-  background: var(--hjm-color-bg);
-  color: var(--hjm-color-content-brand);
+  border-color: var(--hjm-color-border-control);
+  background: var(--hjm-color-surface-selected);
+  color: var(--hjm-color-text);
   font-weight: var(--hjm-text-emphasis-strong);
 }
 .hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
@@ -2208,7 +2208,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-text);
   cursor: default;
 }
-.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-tree__node[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-tree__node:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
 .hjm-tree__indent { flex: 0 0 auto; inline-size: calc(var(--hjm-tree-depth) * var(--hjm-tree-indent)); }
@@ -2482,6 +2482,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sheet[data-placement="bottom"] {
   inline-size: min(var(--hjm-sheet-max-width), 100%);
   max-block-size: var(--hjm-sheet-max-height);
+  /* The bottom edge is docked to the viewport, not an exposed card perimeter. */
+  border-block-end-width: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -2672,7 +2674,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-menu__item:hover,
 .hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
-.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
+.hjm-menu__item[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-strong); }
+.hjm-menu__item[data-state="selected"][data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-menu__state-message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-menu__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
@@ -2726,7 +2729,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
 .hjm-select__option { cursor: pointer; }
 .hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-select__option[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
 .hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
@@ -2767,7 +2770,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
 .hjm-combobox__option { cursor: pointer; }
 .hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-combobox__option[aria-selected="true"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-combobox__message { color: var(--hjm-color-text-muted); }
 .hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
@@ -3300,14 +3303,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-tabs:is([data-appearance="gooey"], [data-appearance="slide"]) .hjm-tabs__list { position: relative; }
 .hjm-tabs:is([data-appearance="gooey"], [data-appearance="slide"]) .hjm-tabs__tab[data-state="selected"]::after { display: none; }
 .hjm-tabs__indicator { position: absolute; bottom: 0; height: 2px; border-radius: var(--hjm-radius-full); background: var(--hjm-color-content-brand); pointer-events: none; }
-/* indicator="filled" (tabsRecipe.indicators.filled): a surface-accent pill behind the selected tab, no list divider.
+/* indicator="filled" (tabsRecipe.indicators.filled): a neutral selection pill behind the selected tab, no list divider.
    The moving pill spans the tab height and sits under the labels. */
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__list { border: 0; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab { border-radius: var(--hjm-radius-full); }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-content-brand); }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"]::after { display: none; }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]):not([data-indicator-motion="moving"]) .hjm-tabs__tab[data-state="selected"] { background: var(--hjm-color-surface-accent); }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__indicator { top: 0; bottom: 0; height: auto; border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-accent); z-index: 0; }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]):not([data-indicator-motion="moving"]) .hjm-tabs__tab[data-state="selected"] { background: var(--hjm-color-surface-selected); }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__indicator { top: 0; bottom: 0; height: auto; border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-selected); z-index: 0; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__list { position: relative; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab { z-index: 1; }
 .hjm-tabs__gooey { height: 6px; }
@@ -3330,7 +3333,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-bottom-navigation[data-presentation="capsule"][data-expanded-labels="false"] .hjm-bottom-navigation__item { flex-direction: row; }
 .hjm-bottom-navigation[data-presentation="capsule"][data-expanded-labels="false"] .hjm-bottom-navigation__item:not([data-state="selected"]) .hjm-bottom-navigation__label { display: none; }
-.hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__item[data-state="selected"] { background: var(--hjm-color-surface-accent); }
+.hjm-bottom-navigation[data-presentation="capsule"]:not([data-selection="tile"]) .hjm-bottom-navigation__item[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); }
 .hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__primary-action { position: static; translate: none; flex-shrink: 0; }
 @media (prefers-reduced-motion: reduce) { .hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__item { transition: none; } }
 
@@ -3605,9 +3608,8 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 /* Only the chat strip enlarges glyphs, to the title type step Native's strip uses. The default
    wrap layout keeps the button's own size, as published before the strip existed. */
 .hjm-reaction-picker[data-layout="strip"] .hjm-reaction-picker__glyph { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
-/* Wrap reactions reuse the chip frame (chipRecipe). Emoji ignore the brand content color, so the chosen reaction
-   also takes the accent fill that Native's strip and wrap items use. */
-.hjm-reaction-picker__chip[data-selected] { background: var(--hjm-color-surface-accent); }
+/* Emoji ignore text color; wrap and strip both retain the shared neutral selection fill. */
+.hjm-reaction-picker__chip[data-selected] { background: var(--hjm-color-surface-selected); }
 
 /* The embedded circle uses the small 36px recipe; centre it in the field rather than on the text baseline.
    Reduce only its trailing inset to 8px, preserving the text's 16px leading padding. */
@@ -3635,8 +3637,8 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item::before { content:""; position:absolute; inset:var(--hjm-space-xxs) 0; border-radius:var(--hjm-radius-full); background:var(--hjm-color-bg); border:1px solid var(--hjm-color-border-control); }
 .hjm-segmented[data-presentation="pills"][data-size="small"] .hjm-segmented__item { padding-inline:var(--hjm-space-sm); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); border-color:var(--hjm-color-text-body); }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-surface-selected); border-color:var(--hjm-color-surface-selected); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
 
 /* Reference rating: real radios preserve browser keyboard and form behavior. */
@@ -3649,11 +3651,11 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 /* Selection artwork moves independently; radios, labels and focus stay in place.
    An opt-in avoids changing existing connected/pill consumers before review. */
 .hjm-segmented__items:has(> .hjm-segmented__highlight) { position: relative; isolation: isolate; }
-.hjm-segmented__highlight { position: absolute; pointer-events: none; z-index: 1; border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: inset 0 0 0 2px var(--hjm-color-focus); }
+.hjm-segmented__highlight { position: absolute; pointer-events: none; z-index: 1; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface-selected); box-shadow: inset 0 0 0 2px var(--hjm-color-focus); }
 .hjm-segmented__highlight[data-moving="true"] { transition: left var(--hjm-motion-normal) ease-out, top var(--hjm-motion-normal) ease-out, width var(--hjm-motion-normal) ease-out, height var(--hjm-motion-normal) ease-out; }
 .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"] { background: transparent; box-shadow: none; }
 .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item > span { position: relative; z-index: 2; pointer-events: none; }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__highlight { border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-body); box-shadow: none; }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__highlight { border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-selected); box-shadow: none; }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"]::before { background: transparent; }
 [data-motion="reduced"] .hjm-segmented__highlight { transition: none; }
 @media (prefers-reduced-motion: reduce) { .hjm-segmented__highlight { transition: none; } }
@@ -3803,11 +3805,16 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-time-picker__caption { text-align:center; color:var(--hjm-color-text-muted); margin-block-end:var(--hjm-space-xs); }
 .hjm-time-picker__list { position:relative; block-size:var(--hjm-time-height); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
 .hjm-time-picker__list button { display:block; inline-size:100%; min-block-size:var(--hjm-time-row); border:0; border-radius:var(--hjm-radius-md); background:transparent; color:var(--hjm-color-text); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; }
-.hjm-time-picker__list button[aria-selected=true] { background:var(--hjm-color-surface-accent); color:var(--hjm-color-text); font-weight:500; }
+.hjm-time-picker__list button[aria-selected=true] { background:var(--hjm-color-surface-selected); color:var(--hjm-color-text); font-weight:500; }
 .hjm-time-picker__list button:disabled { opacity:.4; cursor:default; }
 .hjm-time-picker__list button:focus-visible,.hjm-time-picker__trigger:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:-2px; }
 .hjm-time-picker__description { color:var(--hjm-color-text-muted); }
 .hjm-time-picker__error { color:var(--hjm-color-danger); }
+.hjm-time-picker__viewport { position:relative; }
+.hjm-time-picker__center { position:absolute; inset-inline:0; inset-block-start:calc((var(--hjm-time-height) - var(--hjm-time-row)) / 2); block-size:var(--hjm-time-row); border:var(--hjm-stroke-default) solid var(--hjm-color-border-control); border-radius:var(--hjm-radius-md); pointer-events:none; z-index:1; }
+.hjm-time-picker__list[data-wheel] { box-sizing:border-box; padding-block:calc((var(--hjm-time-height) - var(--hjm-time-row)) / 2); scroll-snap-type:y mandatory; overflow-anchor:none; scrollbar-width:none; }
+.hjm-time-picker__list[data-wheel] button { block-size:var(--hjm-time-row); scroll-snap-align:center; }
+.hjm-time-picker__list[data-wheel][aria-disabled=true] { overflow-y:hidden; }
 
 /* IconTile's own target keeps the full artwork width; Button's face padding would squeeze narrow grid cells. */
 .hjm-icon-tile-action { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--hjm-radius-md); background: transparent; color: inherit; font: inherit; cursor: pointer; }
@@ -3834,3 +3841,20 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-selection-tone="brand"] .hjm-segmented__highlight { background: var(--hjm-color-primary); }
 .hjm-segmented[data-selection-tone="brand"] .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"],
 .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. */
+.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; }
+.hjm-image-viewer__stage { flex: 1; min-block-size: 0; overflow: hidden; position: relative; touch-action: none; }
+.hjm-image-viewer__image { inline-size: 100%; block-size: 100%; display: flex; align-items: center; justify-content: center; }
+.hjm-image-viewer__image img { inline-size: 100%; block-size: 100%; object-fit: contain; user-select: none; }
+.hjm-image-viewer__image > [role="status"], .hjm-image-viewer__image > [role="alert"] { position: absolute; background: #000; color: #fff; padding: var(--hjm-space-md); }
+.hjm-image-viewer .hjm-icon-button { color: #fff; background: #222; }
+
+.hjm-image-viewer__actions { margin-inline-start: auto; }
+
+/* Persistent selection uses a neutral surface; active-descendant focus keeps its own treatment. */
+.hjm-surface[data-tone="selected"] { background: var(--hjm-color-surface-selected); }
+.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); }

package/dist/styles.layered.css

@@ -1,5 +1,5 @@
 @layer hjm {
-/* Broad neutral and pale-brand surfaces use the theme canvas. Selection stays visible through borders; primary actions and compact state marks retain their semantic fills. */
+/* Persistent selection uses its neutral surface. Focus, primary actions and compact value marks retain their distinct semantic roles; see theme-palette.md. */
 .hjm-root,
 .hjm-root *,
 .hjm-root *::before,
@@ -269,7 +269,7 @@
 /* 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-content-brand); background: var(--hjm-color-bg); border-color: transparent; }
+.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; }
 .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). */
@@ -288,7 +288,7 @@
 .hjm-button[data-tone="primary"] { --hjm-button-face-fill: var(--hjm-color-primary); }
 .hjm-button[data-tone="secondary"] { --hjm-button-face-fill: var(--hjm-color-bg); --hjm-button-face-border: var(--hjm-color-border-control); }
 .hjm-button[data-tone="danger"] { --hjm-button-face-fill: var(--hjm-color-danger-fill); }
-.hjm-button[data-selected="true"] { --hjm-button-face-fill: var(--hjm-color-bg); --hjm-button-face-border: transparent; }
+.hjm-button[data-selected="true"] { --hjm-button-face-fill: var(--hjm-color-surface-selected); --hjm-button-face-border: transparent; }
 .hjm-button[data-raised="true"] { padding: 0 0 var(--hjm-button-depth); border: 0; gap: 0; flex-direction: column; background: color-mix(in srgb, var(--hjm-button-side), #000 var(--hjm-button-side-shade)); }
 .hjm-button__face { position: relative; display: flex; box-sizing: border-box; inline-size: 100%; min-block-size: inherit; flex: 1; align-items: center; justify-content: inherit; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) var(--hjm-button-face-padding); border: 1px solid var(--hjm-button-face-border, transparent); border-radius: inherit; background: var(--hjm-button-face-fill); transition: transform var(--hjm-button-settle) ease-out; }
 .hjm-button[data-raised="true"]:active:not(:disabled):not([aria-disabled="true"]) { opacity: 1; }
@@ -814,7 +814,7 @@
 .hjm-choice[data-presentation="card"][data-state="checked"],
 .hjm-choice[data-presentation="card"][data-state="mixed"],
 .hjm-choice[data-presentation="grouped"][data-state="checked"],
-.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
+.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); }
 .hjm-choice[data-size="small"] { min-block-size: 44px; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) var(--hjm-space-sm); }
 .hjm-choice[data-size="small"][data-presentation="plain"] { padding: 0; }
 .hjm-choice__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
@@ -882,7 +882,7 @@
 .hjm-choice[data-presentation="chips"] .hjm-choice__indicator { display: none; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__leading { color: inherit; }
 .hjm-choice[data-presentation="chips"] .hjm-choice__copy { min-inline-size: 0; overflow-wrap: anywhere; padding-block: 0; }
-.hjm-choice[data-presentation="chips"][data-state="checked"], .hjm-choice[data-presentation="chips"][data-state="mixed"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-content-brand); }
+.hjm-choice[data-presentation="chips"][data-state="checked"], .hjm-choice[data-presentation="chips"][data-state="mixed"] { color: var(--hjm-color-text); border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); }
 .hjm-choice[data-presentation="chips"]:has(.hjm-choice__input:focus-visible) { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 /* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
    Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
@@ -924,7 +924,7 @@
 /* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
 .hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__item::after { content: ""; position: absolute; inset: calc((var(--hjm-segmented-height) - 2 * (var(--hjm-space-xxs) + 1px) - var(--hjm-control-min-touch-target)) / 2) 0; }
 .hjm-segmented__item input { position: absolute; opacity: 0; }
-.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-text); background: var(--hjm-color-surface-selected); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 
 /* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
@@ -1038,7 +1038,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
 .hjm-list-row[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); min-block-size: var(--hjm-list-row-spacious-one-line); padding-block: var(--hjm-list-row-spacious-padding-block); }
 .hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
-.hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-list-row[data-state="selected"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 /* trailingAction: one surface for the row command and its separate action, as Native. The frame takes the bleed; the
    command keeps the start padding and the action the end padding, so the action box ends on the content edge (an
@@ -1047,7 +1047,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row-frame[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); }
 .hjm-list-row-frame[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); }
 .hjm-list-row-frame[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); }
-.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-surface-selected); box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-list-row-frame[data-state="disabled"] { opacity: 0.5; }
 .hjm-list-row-frame > .hjm-list-row { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; margin-inline: 0; padding-inline-end: 0; }
 .hjm-list-row-frame > .hjm-list-row[data-state] { background: transparent; box-shadow: none; opacity: 1; }
@@ -1105,7 +1105,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chip { position: relative; min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-bg); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
 .hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
-.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
+.hjm-chip[data-selected] { border-color: var(--hjm-color-border-control); background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); }
 .hjm-chip:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-chip:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
@@ -1612,7 +1612,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Panel headings and empty-state copy share the same narrow column as rows. */
 .hjm-transfer-list__title,
 .hjm-transfer-list__empty { min-inline-size: 0; overflow-wrap: anywhere; }
-.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-transfer-list__option[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-transfer-list__option:focus-visible,
 .hjm-transfer-list__empty:focus-visible,
@@ -1974,9 +1974,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 /* The pressed state is announced by aria-pressed; color only reinforces it. */
 .hjm-toggle-group__item[aria-pressed="true"] {
-  border-color: var(--hjm-color-focus);
-  background: var(--hjm-color-bg);
-  color: var(--hjm-color-content-brand);
+  border-color: var(--hjm-color-border-control);
+  background: var(--hjm-color-surface-selected);
+  color: var(--hjm-color-text);
   font-weight: var(--hjm-text-emphasis-strong);
 }
 .hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
@@ -2209,7 +2209,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-text);
   cursor: default;
 }
-.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-surface-selected);  box-shadow: inset 0 0 0 1px var(--hjm-color-border-control); }
 .hjm-tree__node[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-tree__node:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
 .hjm-tree__indent { flex: 0 0 auto; inline-size: calc(var(--hjm-tree-depth) * var(--hjm-tree-indent)); }
@@ -2483,6 +2483,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sheet[data-placement="bottom"] {
   inline-size: min(var(--hjm-sheet-max-width), 100%);
   max-block-size: var(--hjm-sheet-max-height);
+  /* The bottom edge is docked to the viewport, not an exposed card perimeter. */
+  border-block-end-width: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -2673,7 +2675,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-menu__item:hover,
 .hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
-.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
+.hjm-menu__item[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-strong); }
+.hjm-menu__item[data-state="selected"][data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-menu__state-message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-menu__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
@@ -2727,7 +2730,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
 .hjm-select__option { cursor: pointer; }
 .hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-select__option[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
 .hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
@@ -2768,7 +2771,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
 .hjm-combobox__option { cursor: pointer; }
 .hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-combobox__option[aria-selected="true"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-combobox__message { color: var(--hjm-color-text-muted); }
 .hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
@@ -3301,14 +3304,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-tabs:is([data-appearance="gooey"], [data-appearance="slide"]) .hjm-tabs__list { position: relative; }
 .hjm-tabs:is([data-appearance="gooey"], [data-appearance="slide"]) .hjm-tabs__tab[data-state="selected"]::after { display: none; }
 .hjm-tabs__indicator { position: absolute; bottom: 0; height: 2px; border-radius: var(--hjm-radius-full); background: var(--hjm-color-content-brand); pointer-events: none; }
-/* indicator="filled" (tabsRecipe.indicators.filled): a surface-accent pill behind the selected tab, no list divider.
+/* indicator="filled" (tabsRecipe.indicators.filled): a neutral selection pill behind the selected tab, no list divider.
    The moving pill spans the tab height and sits under the labels. */
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__list { border: 0; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab { border-radius: var(--hjm-radius-full); }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-content-brand); }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab[data-state="selected"]::after { display: none; }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]):not([data-indicator-motion="moving"]) .hjm-tabs__tab[data-state="selected"] { background: var(--hjm-color-surface-accent); }
-.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__indicator { top: 0; bottom: 0; height: auto; border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-accent); z-index: 0; }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]):not([data-indicator-motion="moving"]) .hjm-tabs__tab[data-state="selected"] { background: var(--hjm-color-surface-selected); }
+.hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__indicator { top: 0; bottom: 0; height: auto; border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-selected); z-index: 0; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__list { position: relative; }
 .hjm-tabs:is([data-indicator="filled"],[data-indicator="solid"]) .hjm-tabs__tab { z-index: 1; }
 .hjm-tabs__gooey { height: 6px; }
@@ -3331,7 +3334,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-bottom-navigation[data-presentation="capsule"][data-expanded-labels="false"] .hjm-bottom-navigation__item { flex-direction: row; }
 .hjm-bottom-navigation[data-presentation="capsule"][data-expanded-labels="false"] .hjm-bottom-navigation__item:not([data-state="selected"]) .hjm-bottom-navigation__label { display: none; }
-.hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__item[data-state="selected"] { background: var(--hjm-color-surface-accent); }
+.hjm-bottom-navigation[data-presentation="capsule"]:not([data-selection="tile"]) .hjm-bottom-navigation__item[data-state="selected"] { background: var(--hjm-color-surface-selected); color: var(--hjm-color-text); }
 .hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__primary-action { position: static; translate: none; flex-shrink: 0; }
 @media (prefers-reduced-motion: reduce) { .hjm-bottom-navigation[data-presentation="capsule"] .hjm-bottom-navigation__item { transition: none; } }
 
@@ -3606,9 +3609,8 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 /* Only the chat strip enlarges glyphs, to the title type step Native's strip uses. The default
    wrap layout keeps the button's own size, as published before the strip existed. */
 .hjm-reaction-picker[data-layout="strip"] .hjm-reaction-picker__glyph { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
-/* Wrap reactions reuse the chip frame (chipRecipe). Emoji ignore the brand content color, so the chosen reaction
-   also takes the accent fill that Native's strip and wrap items use. */
-.hjm-reaction-picker__chip[data-selected] { background: var(--hjm-color-surface-accent); }
+/* Emoji ignore text color; wrap and strip both retain the shared neutral selection fill. */
+.hjm-reaction-picker__chip[data-selected] { background: var(--hjm-color-surface-selected); }
 
 /* The embedded circle uses the small 36px recipe; centre it in the field rather than on the text baseline.
    Reduce only its trailing inset to 8px, preserving the text's 16px leading padding. */
@@ -3636,8 +3638,8 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item::before { content:""; position:absolute; inset:var(--hjm-space-xxs) 0; border-radius:var(--hjm-radius-full); background:var(--hjm-color-bg); border:1px solid var(--hjm-color-border-control); }
 .hjm-segmented[data-presentation="pills"][data-size="small"] .hjm-segmented__item { padding-inline:var(--hjm-space-sm); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); border-color:var(--hjm-color-text-body); }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-surface-selected); border-color:var(--hjm-color-surface-selected); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
 
 /* Reference rating: real radios preserve browser keyboard and form behavior. */
@@ -3650,11 +3652,11 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 /* Selection artwork moves independently; radios, labels and focus stay in place.
    An opt-in avoids changing existing connected/pill consumers before review. */
 .hjm-segmented__items:has(> .hjm-segmented__highlight) { position: relative; isolation: isolate; }
-.hjm-segmented__highlight { position: absolute; pointer-events: none; z-index: 1; border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: inset 0 0 0 2px var(--hjm-color-focus); }
+.hjm-segmented__highlight { position: absolute; pointer-events: none; z-index: 1; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface-selected); box-shadow: inset 0 0 0 2px var(--hjm-color-focus); }
 .hjm-segmented__highlight[data-moving="true"] { transition: left var(--hjm-motion-normal) ease-out, top var(--hjm-motion-normal) ease-out, width var(--hjm-motion-normal) ease-out, height var(--hjm-motion-normal) ease-out; }
 .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"] { background: transparent; box-shadow: none; }
 .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item > span { position: relative; z-index: 2; pointer-events: none; }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__highlight { border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-body); box-shadow: none; }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__highlight { border-radius: var(--hjm-radius-full); background: var(--hjm-color-surface-selected); box-shadow: none; }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"]::before { background: transparent; }
 [data-motion="reduced"] .hjm-segmented__highlight { transition: none; }
 @media (prefers-reduced-motion: reduce) { .hjm-segmented__highlight { transition: none; } }
@@ -3804,11 +3806,16 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-time-picker__caption { text-align:center; color:var(--hjm-color-text-muted); margin-block-end:var(--hjm-space-xs); }
 .hjm-time-picker__list { position:relative; block-size:var(--hjm-time-height); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
 .hjm-time-picker__list button { display:block; inline-size:100%; min-block-size:var(--hjm-time-row); border:0; border-radius:var(--hjm-radius-md); background:transparent; color:var(--hjm-color-text); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; }
-.hjm-time-picker__list button[aria-selected=true] { background:var(--hjm-color-surface-accent); color:var(--hjm-color-text); font-weight:500; }
+.hjm-time-picker__list button[aria-selected=true] { background:var(--hjm-color-surface-selected); color:var(--hjm-color-text); font-weight:500; }
 .hjm-time-picker__list button:disabled { opacity:.4; cursor:default; }
 .hjm-time-picker__list button:focus-visible,.hjm-time-picker__trigger:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:-2px; }
 .hjm-time-picker__description { color:var(--hjm-color-text-muted); }
 .hjm-time-picker__error { color:var(--hjm-color-danger); }
+.hjm-time-picker__viewport { position:relative; }
+.hjm-time-picker__center { position:absolute; inset-inline:0; inset-block-start:calc((var(--hjm-time-height) - var(--hjm-time-row)) / 2); block-size:var(--hjm-time-row); border:var(--hjm-stroke-default) solid var(--hjm-color-border-control); border-radius:var(--hjm-radius-md); pointer-events:none; z-index:1; }
+.hjm-time-picker__list[data-wheel] { box-sizing:border-box; padding-block:calc((var(--hjm-time-height) - var(--hjm-time-row)) / 2); scroll-snap-type:y mandatory; overflow-anchor:none; scrollbar-width:none; }
+.hjm-time-picker__list[data-wheel] button { block-size:var(--hjm-time-row); scroll-snap-align:center; }
+.hjm-time-picker__list[data-wheel][aria-disabled=true] { overflow-y:hidden; }
 
 /* IconTile's own target keeps the full artwork width; Button's face padding would squeeze narrow grid cells. */
 .hjm-icon-tile-action { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--hjm-radius-md); background: transparent; color: inherit; font: inherit; cursor: pointer; }
@@ -3836,4 +3843,21 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-selection-tone="brand"] .hjm-segmented__items[data-highlight-ready="true"] > .hjm-segmented__item[data-state="checked"],
 .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. */
+.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; }
+.hjm-image-viewer__stage { flex: 1; min-block-size: 0; overflow: hidden; position: relative; touch-action: none; }
+.hjm-image-viewer__image { inline-size: 100%; block-size: 100%; display: flex; align-items: center; justify-content: center; }
+.hjm-image-viewer__image img { inline-size: 100%; block-size: 100%; object-fit: contain; user-select: none; }
+.hjm-image-viewer__image > [role="status"], .hjm-image-viewer__image > [role="alert"] { position: absolute; background: #000; color: #fff; padding: var(--hjm-space-md); }
+.hjm-image-viewer .hjm-icon-button { color: #fff; background: #222; }
+
+.hjm-image-viewer__actions { margin-inline-start: auto; }
+
+/* Persistent selection uses a neutral surface; active-descendant focus keeps its own treatment. */
+.hjm-surface[data-tone="selected"] { background: var(--hjm-color-surface-selected); }
+.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); }
+
 }

package/dist/time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../src/time-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkG,KAAK,iBAAiB,EAAuB,MAAM,gDAAgD,CAAC;AAI7M,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,QAAQ,CAAC;IAAE,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1H,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA4DhD"}
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../src/time-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+H,KAAK,iBAAiB,EAAuB,MAAM,gDAAgD,CAAC;AAI1O,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,QAAQ,CAAC;IAAE,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1H,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAmChD"}