@hjmds/react 1.27.0 → 1.27.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions.d.ts +26 -4
- package/dist/actions.d.ts.map +1 -1
- package/dist/actions.js +4 -4
- package/dist/actions.js.map +1 -1
- package/dist/collection-editing.d.ts.map +1 -1
- package/dist/collection-editing.js +5 -4
- package/dist/collection-editing.js.map +1 -1
- package/dist/display.d.ts.map +1 -1
- package/dist/display.js +5 -2
- package/dist/display.js.map +1 -1
- package/dist/evidence.d.ts +1 -1
- package/dist/evidence.js +1 -1
- package/dist/evidence.js.map +1 -1
- package/dist/internal/screen-exit.d.ts.map +1 -1
- package/dist/internal/screen-exit.js +2 -1
- package/dist/internal/screen-exit.js.map +1 -1
- package/dist/saved-items.js +1 -1
- package/dist/saved-items.js.map +1 -1
- package/dist/screen-flows.d.ts.map +1 -1
- package/dist/screen-flows.js +13 -12
- package/dist/screen-flows.js.map +1 -1
- package/dist/screens.d.ts.map +1 -1
- package/dist/screens.js +2 -2
- package/dist/screens.js.map +1 -1
- package/dist/styles.css +94 -21
- package/dist/styles.layered.css +94 -21
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +27 -2
- package/dist/theme.js.map +1 -1
- package/dist/toast.d.ts.map +1 -1
- package/dist/toast.js +4 -1
- package/dist/toast.js.map +1 -1
- package/dist/upload-item.d.ts.map +1 -1
- package/dist/upload-item.js +1 -1
- package/dist/upload-item.js.map +1 -1
- package/dist/virtual-list.d.ts.map +1 -1
- package/dist/virtual-list.js +5 -1
- package/dist/virtual-list.js.map +1 -1
- package/package.json +2 -2
package/dist/styles.layered.css
CHANGED
|
@@ -304,6 +304,19 @@
|
|
|
304
304
|
.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; }
|
|
305
305
|
.hjm-icon-button[data-size="small"]::after { content: ""; position: absolute; inset: calc(-1 * var(--hjm-space-xxs)); }
|
|
306
306
|
.hjm-icon-button[data-size="large"] { inline-size: var(--hjm-control-button-large); block-size: var(--hjm-control-button-large); }
|
|
307
|
+
/* Edge alignment (iconButtonRecipe.edge / resolveButtonEdgeOverhang, 2026-10-17 measured audit): a ghost control on a
|
|
308
|
+
container edge keeps its hit area but overhangs that edge, so its glyph slot or label sits on the inset like text.
|
|
309
|
+
Framed tones never get an overhang variable and stay put. Logical margins mirror in RTL. */
|
|
310
|
+
.hjm-icon-button[data-tone="ghost"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-medium); }
|
|
311
|
+
.hjm-icon-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-small); }
|
|
312
|
+
.hjm-icon-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-large); }
|
|
313
|
+
/* + 1px: every Web button keeps a 1px transparent frame border (.hjm-button above) inside which the padding starts;
|
|
314
|
+
Native ghost buttons have no border, so their overhang is the padding alone. */
|
|
315
|
+
.hjm-button[data-tone="ghost"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-medium) + 1px); }
|
|
316
|
+
.hjm-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-small) + 1px); }
|
|
317
|
+
.hjm-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-large) + 1px); }
|
|
318
|
+
:is(.hjm-icon-button, .hjm-button):is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
319
|
+
:is(.hjm-icon-button, .hjm-button):is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
307
320
|
.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; }
|
|
308
321
|
.hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
|
|
309
322
|
.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; }
|
|
@@ -323,6 +336,9 @@
|
|
|
323
336
|
outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
|
|
324
337
|
outline-offset: var(--hjm-focus-offset);
|
|
325
338
|
}
|
|
339
|
+
/* An edge-aligned control overhangs into the container padding, where an outer ring can be clipped by the container's
|
|
340
|
+
overflow (lists, cards); draw the ring inside its own box instead, as the Toast close does. */
|
|
341
|
+
:is(.hjm-icon-button, .hjm-button)[data-edge]:focus-visible { outline-offset: calc(-1 * var(--hjm-focus-width)); }
|
|
326
342
|
|
|
327
343
|
/* Input interiors use the theme canvas (white in light mode), not tinted
|
|
328
344
|
surfaces. Focus and selection still use blue borders and compact indicators. */
|
|
@@ -917,19 +933,40 @@
|
|
|
917
933
|
.hjm-card__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-md) var(--hjm-space-md); }
|
|
918
934
|
/* Row rhythm reads the recipe density variables so the stylesheet does not
|
|
919
935
|
carry a second copy of the same numbers. */
|
|
920
|
-
|
|
936
|
+
/* Inline placement (listRowRecipe.surfaceBleed, 2026-10-17 user decision): the row text sits on the container's content
|
|
937
|
+
edge and the row box — hover/pressed/selected fill, focus ring, hit area — bleeds outward by the density's inline
|
|
938
|
+
padding. The padding used to sit inside the container's content box, so row text started at 16 + 8 = 24 while section
|
|
939
|
+
titles and result headers started at 16. Containers need that much inline room (screen gutter, card/sheet padding). */
|
|
940
|
+
.hjm-list-row { --hjm-list-row-inline: var(--hjm-list-row-comfortable-padding-inline); inline-size: calc(100% + 2 * var(--hjm-list-row-inline)); margin-inline: calc(-1 * var(--hjm-list-row-inline)); display: flex; align-items: center; gap: var(--hjm-list-row-gap); min-block-size: var(--hjm-list-row-comfortable-one-line); padding-inline: var(--hjm-list-row-inline); padding-block: var(--hjm-list-row-comfortable-padding-block); border: 0; color: inherit; background: transparent; text-align: start; text-decoration: none; font: inherit; }
|
|
921
941
|
button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
922
942
|
.hjm-list-row[data-lines="two"] { min-block-size: var(--hjm-list-row-comfortable-two-line); }
|
|
923
|
-
.hjm-list-row[data-density="compact"] {
|
|
943
|
+
.hjm-list-row[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); min-block-size: var(--hjm-list-row-compact-one-line); padding-block: var(--hjm-list-row-compact-padding-block); }
|
|
924
944
|
.hjm-list-row[data-density="compact"][data-lines="two"] { min-block-size: var(--hjm-list-row-compact-two-line); }
|
|
925
945
|
/* The two wider steps read the same generated variables; no numbers here. */
|
|
926
|
-
.hjm-list-row[data-density="relaxed"] {
|
|
946
|
+
.hjm-list-row[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); min-block-size: var(--hjm-list-row-relaxed-one-line); padding-block: var(--hjm-list-row-relaxed-padding-block); }
|
|
927
947
|
.hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
|
|
928
|
-
.hjm-list-row[data-density="spacious"] {
|
|
948
|
+
.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); }
|
|
929
949
|
.hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
|
|
930
950
|
.hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
931
951
|
.hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
952
|
+
/* trailingAction: one surface for the row command and its separate action, as Native. The frame takes the bleed; the
|
|
953
|
+
command keeps the start padding and the action the end padding, so the action box ends on the content edge (an
|
|
954
|
+
`edge="end"` IconButton then puts its glyph on that line). */
|
|
955
|
+
.hjm-list-row-frame { --hjm-list-row-inline: var(--hjm-list-row-comfortable-padding-inline); display: flex; align-items: center; gap: var(--hjm-list-row-gap); inline-size: calc(100% + 2 * var(--hjm-list-row-inline)); margin-inline: calc(-1 * var(--hjm-list-row-inline)); }
|
|
956
|
+
.hjm-list-row-frame[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); }
|
|
957
|
+
.hjm-list-row-frame[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); }
|
|
958
|
+
.hjm-list-row-frame[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); }
|
|
959
|
+
.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
960
|
+
.hjm-list-row-frame[data-state="disabled"] { opacity: 0.5; }
|
|
961
|
+
.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; }
|
|
962
|
+
.hjm-list-row-frame > .hjm-list-row[data-state] { background: transparent; box-shadow: none; opacity: 1; }
|
|
963
|
+
.hjm-list-row-frame > .hjm-list-row[data-state="disabled"] { cursor: not-allowed; }
|
|
964
|
+
.hjm-list-row__action { flex: 0 0 auto; display: flex; align-items: center; padding-inline-end: var(--hjm-list-row-inline); }
|
|
932
965
|
.hjm-list-row__leading, .hjm-list-row__trailing { flex: 0 0 auto; }
|
|
966
|
+
/* Trailing was a blockified span, so an inline svg/switch sat on the text
|
|
967
|
+
baseline 2–2.5px above the row center (2026-10-17 measured audit); a flex
|
|
968
|
+
box centers any trailing node like Native's row-centered View. */
|
|
969
|
+
.hjm-list-row__trailing { display: flex; align-items: center; }
|
|
933
970
|
/* `leadingSize` was declared by the recipe but unbound, so consumers rebuilt
|
|
934
971
|
the avatar box in product styles. */
|
|
935
972
|
.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; }
|
|
@@ -980,14 +1017,19 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
980
1017
|
.hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
|
|
981
1018
|
.hjm-chip__label { overflow-wrap: anywhere; }
|
|
982
1019
|
|
|
983
|
-
|
|
984
|
-
|
|
1020
|
+
/* A plain list does not clip: its rows bleed their surface into the container inset (listRowRecipe.surfaceBleed).
|
|
1021
|
+
A grouped list clips to its rounded surface, so it keeps that bleed as inline padding (listRecipe.grouped). */
|
|
1022
|
+
.hjm-list { min-inline-size: 0; }
|
|
1023
|
+
.hjm-list[data-appearance="grouped"] { overflow: hidden; padding-inline: var(--hjm-list-grouped-padding-inline); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
|
|
985
1024
|
.hjm-list__item { min-inline-size: 0; }
|
|
986
|
-
.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item { border-block-start: 1px solid var(--hjm-color-border); }
|
|
987
1025
|
/* Indent only the divider: moving the row shifted every title after the first
|
|
988
|
-
and narrowed its text column in the notification-settings composition.
|
|
989
|
-
|
|
990
|
-
|
|
1026
|
+
and narrowed its text column in the notification-settings composition. Insets are measured from the list content
|
|
1027
|
+
edge (where the row text sits) and come from listRecipe.separators: full spans the row surface, indented starts at
|
|
1028
|
+
the text after leading 40 + gap 12 = 52, as Native. */
|
|
1029
|
+
.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item { position: relative; }
|
|
1030
|
+
.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; }
|
|
1031
|
+
.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item::before { inset-inline: var(--hjm-list-separator-full-start) var(--hjm-list-separator-full-end); }
|
|
1032
|
+
.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { inset-inline: var(--hjm-list-separator-indented-start) var(--hjm-list-separator-indented-end); }
|
|
991
1033
|
|
|
992
1034
|
/* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
|
|
993
1035
|
group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
|
|
@@ -1023,6 +1065,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1023
1065
|
.hjm-notice[data-tone="danger"] { border-color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 10%, var(--hjm-color-bg)); }
|
|
1024
1066
|
/* Reserve readable copy; wrap the action instead of crushing its label. */
|
|
1025
1067
|
.hjm-notice__content { flex: 1 1 60%; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
1068
|
+
/* First-line anchor (2026-10-17 measured audit): the inline action (contract: Button size="small") centered 8px
|
|
1069
|
+
below the title's first line and the icon box had no rule at all. Icon, first line and action now share one
|
|
1070
|
+
anchor — the line box (1lh) alone, or the small-button height when an action sits on the row. Extra lines
|
|
1071
|
+
grow downward; Native keeps the action under the copy (docs/usage/components/notice.md). */
|
|
1072
|
+
.hjm-notice { --hjm-notice-anchor: 1lh; }
|
|
1073
|
+
.hjm-notice:has(> .hjm-notice__action) { --hjm-notice-anchor: var(--hjm-control-button-small); }
|
|
1074
|
+
.hjm-notice__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-inline-size: 1.25rem; block-size: var(--hjm-notice-anchor); }
|
|
1075
|
+
.hjm-notice__content > :first-child { margin-block-start: calc((var(--hjm-notice-anchor) - 1lh) / 2); }
|
|
1026
1076
|
.hjm-notice__action { flex: 0 0 auto; max-inline-size: 100%; }
|
|
1027
1077
|
.hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
|
|
1028
1078
|
|
|
@@ -2493,18 +2543,22 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2493
2543
|
.hjm-form__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-sm); }
|
|
2494
2544
|
|
|
2495
2545
|
/* Advanced display ------------------------------------------------------- */
|
|
2496
|
-
|
|
2546
|
+
/* timelineRecipe label/description are `body`; binding it here lets the rail and timestamp derive from the same line box. */
|
|
2547
|
+
.hjm-timeline { display: grid; gap: var(--hjm-space-md); margin: 0; padding: 0; list-style: none; font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
|
|
2497
2548
|
.hjm-timeline__item { min-inline-size: 0; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--hjm-space-sm); }
|
|
2498
2549
|
.hjm-timeline__rail { position: relative; display: flex; justify-content: center; }
|
|
2499
|
-
|
|
2550
|
+
/* Dot, label first line and timestamp share the label's first line box (2026-10-17 measured audit: centers 396/397/398.5).
|
|
2551
|
+
The rail inherits the label's line height, so 1lh is that line box. */
|
|
2552
|
+
.hjm-timeline__dot { position: relative; z-index: 1; inline-size: 0.625rem; block-size: 0.625rem; margin-block-start: calc((1lh - 0.625rem) / 2); border: 1px solid transparent; border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-muted); }
|
|
2500
2553
|
.hjm-timeline__item[data-tone="info"] .hjm-timeline__dot { border-color: var(--hjm-accent-info); background: var(--hjm-accent-info); }
|
|
2501
2554
|
.hjm-timeline__item[data-tone="success"] .hjm-timeline__dot { border-color: var(--hjm-accent-success); background: var(--hjm-accent-success); }
|
|
2502
2555
|
.hjm-timeline__item[data-tone="attention"] .hjm-timeline__dot { border-color: var(--hjm-accent-attention); background: var(--hjm-accent-attention); }
|
|
2503
|
-
.hjm-timeline__connector { position: absolute; inset-block: 0.
|
|
2556
|
+
.hjm-timeline__connector { position: absolute; inset-block: calc((1lh + 0.625rem) / 2) calc(-1 * var(--hjm-space-md)); inline-size: 1px; background: var(--hjm-color-border); }
|
|
2504
2557
|
.hjm-timeline__content { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block-end: var(--hjm-space-xxs); }
|
|
2505
|
-
.hjm-timeline__heading { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items:
|
|
2558
|
+
.hjm-timeline__heading { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hjm-space-xxs) var(--hjm-space-sm); }
|
|
2506
2559
|
.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
|
|
2507
|
-
|
|
2560
|
+
/* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
|
|
2561
|
+
.hjm-timeline__timestamp { margin-block-start: calc((var(--hjm-type-body-line-height) - var(--hjm-type-caption-line-height)) / 2); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
2508
2562
|
.hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
2509
2563
|
.hjm-accordion { border-block-start: 1px solid var(--hjm-color-border); }
|
|
2510
2564
|
.hjm-accordion__item { border-block-end: 1px solid var(--hjm-color-border); }
|
|
@@ -2668,7 +2722,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2668
2722
|
controlled Toast outside the viewport keeps it too (it stretched to 1200px in the layout story, 2026-10-17 review).
|
|
2669
2723
|
1.10.0 layout: [tone badge][title + description][close] / action pill on its own row, end-aligned.
|
|
2670
2724
|
The 2px tone strip is retired — the tinted badge carries tone (toastRecipe.toneMark width 0). */
|
|
2671
|
-
.hjm-toast { position: relative; min-inline-size: 0; max-inline-size: min(26.25rem, 100%); min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-
|
|
2725
|
+
.hjm-toast { position: relative; min-inline-size: 0; max-inline-size: min(26.25rem, 100%); min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-toast-padding-block) var(--hjm-toast-padding-inline); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
|
|
2672
2726
|
/* Whole-card activation is a sibling surface; explicit controls stay above it. */
|
|
2673
2727
|
.hjm-toast__press { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
|
|
2674
2728
|
.hjm-toast__press:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: -2px; }
|
|
@@ -2680,10 +2734,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2680
2734
|
.hjm-toast[data-tone="success"] .hjm-toast__icon { color: var(--hjm-toast-accent-success); background: var(--hjm-toast-badge-success); }
|
|
2681
2735
|
.hjm-toast[data-tone="warning"] .hjm-toast__icon { color: var(--hjm-toast-accent-warning); background: var(--hjm-toast-badge-warning); }
|
|
2682
2736
|
.hjm-toast[data-tone="danger"] .hjm-toast__icon { color: var(--hjm-toast-accent-danger); background: var(--hjm-toast-badge-danger); }
|
|
2683
|
-
|
|
2737
|
+
/* First-line anchor (toastRecipe.anchor, 2026-10-17): the first line (title, else description) is centred on the
|
|
2738
|
+
badge box via its own line height (1lh), so profile and text-scale line heights stay aligned; extra lines grow
|
|
2739
|
+
downward while the lead column and close stay beside the first line. */
|
|
2740
|
+
.hjm-toast__content { grid-column: 2; grid-row: 1; align-self: start; min-inline-size: 0; min-block-size: var(--hjm-toast-anchor-size); display: grid; align-content: start; gap: var(--hjm-space-xxs); overflow-wrap: anywhere; word-break: keep-all; }
|
|
2741
|
+
.hjm-toast__content > :first-child { margin-block-start: calc((var(--hjm-toast-anchor-size) - 1lh) / 2); }
|
|
2684
2742
|
.hjm-toast__title { font-weight: var(--hjm-font-weight-bold); line-height: var(--hjm-toast-title-line-height, 1.35); }
|
|
2685
2743
|
.hjm-toast__description { color: var(--hjm-toast-description-color); line-height: var(--hjm-toast-description-line-height, 1.45); }
|
|
2686
|
-
.hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: var(--hjm-
|
|
2744
|
+
.hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: var(--hjm-toast-close-size); block-size: var(--hjm-toast-close-size); margin-block: calc(-1 * var(--hjm-toast-close-block-overhang)); margin-inline-end: calc(-1 * var(--hjm-toast-close-inline-overhang)); padding: 0; border: 0; border-radius: 50%; color: var(--hjm-color-text-muted); background: transparent; cursor: pointer; }
|
|
2687
2745
|
.hjm-toast__close:hover { color: var(--hjm-color-text); }
|
|
2688
2746
|
/* 2026-10-10 panel toast: product media replaces the tone badge in the leading column (toastRecipe.media),
|
|
2689
2747
|
and a running task shows its steps under the description (toastRecipe.progress). */
|
|
@@ -2695,7 +2753,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2695
2753
|
.hjm-toast__progress-step[data-state="done"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); }
|
|
2696
2754
|
.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-font-weight-bold); }
|
|
2697
2755
|
.hjm-toast__progress-step[data-state="current"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); transform: scale(var(--hjm-toast-progress-current-scale)); }
|
|
2698
|
-
.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start);
|
|
2756
|
+
.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start); min-block-size: var(--hjm-control-min-touch-target); max-inline-size: 100%; padding-inline: var(--hjm-space-md); border: 0; border-radius: 999px; color: var(--hjm-toast-action-color); background: var(--hjm-toast-action-background); font: inherit; font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; text-align: center; cursor: pointer; }
|
|
2699
2757
|
.hjm-toast__action:hover { filter: brightness(0.97); }
|
|
2700
2758
|
.hjm-toast[data-state="closing"] { opacity: 0; transform: translateY(var(--hjm-space-xs)); transition: opacity var(--hjm-toast-exit-duration) var(--hjm-toast-exit-easing), transform var(--hjm-toast-exit-duration) var(--hjm-toast-exit-easing); }
|
|
2701
2759
|
|
|
@@ -2717,6 +2775,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2717
2775
|
outline: 2px solid var(--hjm-color-content-brand);
|
|
2718
2776
|
outline-offset: 2px;
|
|
2719
2777
|
}
|
|
2778
|
+
/* The close target overhangs into the card padding (toastRecipe.close.inlineOverhang), so an outer ring would be
|
|
2779
|
+
clipped by the card's overflow; draw it inside the 44 target instead. */
|
|
2780
|
+
.hjm-toast__close:focus-visible { outline-offset: -2px; }
|
|
2720
2781
|
|
|
2721
2782
|
@keyframes hjm-spin { to { transform: rotate(360deg); } }
|
|
2722
2783
|
@keyframes hjm-pulse { from { opacity: var(--hjm-skeleton-from-opacity); } to { opacity: var(--hjm-skeleton-to-opacity); } }
|
|
@@ -3008,7 +3069,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
3008
3069
|
@supports (backdrop-filter: blur(20px)) {
|
|
3009
3070
|
.hjm-navigation-bar { background: color-mix(in srgb, var(--hjm-color-surface) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
|
3010
3071
|
}
|
|
3011
|
-
.
|
|
3072
|
+
/* The brand added spacing.xs on top of the bar's spacing.sm padding, so it started 21px in against 13px for the
|
|
3073
|
+
end controls (2026-10-17 measured audit). Native has no extra brand inset; both edges now use the bar padding. */
|
|
3074
|
+
.hjm-navigation-bar__brand { flex-shrink: 0; }
|
|
3012
3075
|
.hjm-navigation-bar__destinations, .hjm-navigation-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xs); min-inline-size: 0; }
|
|
3013
3076
|
.hjm-navigation-bar__destinations { flex: 1; }
|
|
3014
3077
|
.hjm-navigation-bar__actions > * { max-inline-size: 100%; }
|
|
@@ -3030,6 +3093,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
3030
3093
|
/* contentInset="body-edge": header, notice and footer keep the gutter; full-width list rows own their inline inset
|
|
3031
3094
|
(review S5#9: body 16 + row 16 put DM avatars ~32 from the edge). "none" keeps its host-owns-all meaning. */
|
|
3032
3095
|
.hjm-screen[data-content-inset="body-edge"] > .hjm-screen__body { padding-inline: 0; }
|
|
3096
|
+
/* contentInset="none" hands every inset to the host: no footer rule, as on Native (BottomCTA then draws its own bar). */
|
|
3097
|
+
.hjm-screen[data-content-inset="none"] > .hjm-screen__footer { border-block-start: 0; }
|
|
3033
3098
|
.hjm-screen__body[data-scroll="screen"] { overflow-y: auto; }
|
|
3034
3099
|
.hjm-screen__body[data-scroll="content"] { display: flex; flex-direction: column; overflow: hidden; }
|
|
3035
3100
|
.hjm-screen__body[data-content-alignment="center"] { display: flex; flex-direction: column; }
|
|
@@ -3145,11 +3210,19 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3145
3210
|
.hjm-comment-thread { display: flex; flex-direction: column; }
|
|
3146
3211
|
.hjm-comment-row__avatar { flex: 0 0 auto; display: flex; justify-content: center; }
|
|
3147
3212
|
.hjm-comment-row__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
|
|
3213
|
+
/* The <time> wrapper is a flex box so its caption is the line: as an inline box it added the body line-height strut,
|
|
3214
|
+
making the identity line 19 tall and moving the author 1.5px off the action anchor (2026-10-17 measurement). */
|
|
3215
|
+
.hjm-comment-row__time { display: flex; }
|
|
3148
3216
|
.hjm-comment-row__reactions { display: flex; flex-direction: column; gap: 2px; border-radius: var(--hjm-radius-sm); -webkit-touch-callout: none; }
|
|
3149
3217
|
.hjm-comment-row__reactions:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
|
|
3150
3218
|
.hjm-comment-row__media { align-self: flex-start; overflow: hidden; margin-block-start: 4px; }
|
|
3151
3219
|
.hjm-comment-row__media > img { display: block; inline-size: 100%; block-size: auto; }
|
|
3152
|
-
.
|
|
3220
|
+
/* commentThreadRecipe.actionAnchor (2026-10-17 measured audit): the 44 targets centre on the identity's first line
|
|
3221
|
+
(--hjm-comment-anchor-line, set per row), so like/more glyphs share the author line's centre instead of sitting
|
|
3222
|
+
12px below it. When HJM's own like/more is the last control (data-edge), the whole column takes the IconButton edge
|
|
3223
|
+
overhang: the 44-wide like count under the heart shares the column, so a margin on the button alone was absorbed. */
|
|
3224
|
+
.hjm-comment-row__like { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; margin-block-start: calc((var(--hjm-comment-anchor-line) - var(--hjm-control-button-medium)) / 2); }
|
|
3225
|
+
.hjm-comment-row__like[data-edge="end"] { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
3153
3226
|
.hjm-comment-row__like-count { text-align: center; }
|
|
3154
3227
|
.hjm-comment-row__action { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--hjm-color-text-muted); font: inherit; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: 600; cursor: pointer; }
|
|
3155
3228
|
.hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
|
package/dist/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAkBA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,2DAA2D,CAAC;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAkBA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,2DAA2D,CAAC;AAmBnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,aAAa,GACvC,MAAM,CAAC,SAAS,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAmB7C,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,GAC/B,aAAa,CA0Nf"}
|
package/dist/theme.js
CHANGED
|
@@ -3,8 +3,8 @@ import { backdrop, control, easing, fontFamily, resolveFontFamilyStack, fontWeig
|
|
|
3
3
|
import { resolveColorReference } from "@hjmds/design-contracts/color-references";
|
|
4
4
|
import { focusIndicatorContract } from "@hjmds/design-contracts/contracts";
|
|
5
5
|
import { visibleControlHeight, } from "@hjmds/design-contracts/components/design-system-provider";
|
|
6
|
-
import { buttonRecipe, fieldRecipe } from "@hjmds/design-contracts/recipes/base";
|
|
7
|
-
import { bottomNavigationRecipe, comboboxRecipe, dialogRecipe, listRowRecipe, menuRecipe, searchFieldRecipe, selectRecipe, sheetRecipe, skeletonRecipe, tooltipRecipe, switchRecipe, toastRecipe, } from "@hjmds/design-contracts/recipes";
|
|
6
|
+
import { buttonRecipe, fieldRecipe, resolveButtonEdgeOverhang } from "@hjmds/design-contracts/recipes/base";
|
|
7
|
+
import { bottomNavigationRecipe, iconButtonRecipe, resolveIconButtonEdgeOverhang, comboboxRecipe, dialogRecipe, listRecipe, listRowRecipe, menuRecipe, searchFieldRecipe, selectRecipe, sheetRecipe, skeletonRecipe, tooltipRecipe, switchRecipe, toastRecipe, } from "@hjmds/design-contracts/recipes";
|
|
8
8
|
function kebab(value) {
|
|
9
9
|
return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
|
|
10
10
|
}
|
|
@@ -76,6 +76,15 @@ export function createHjmThemeStyle(value) {
|
|
|
76
76
|
// does not carry a second copy of the same numbers.
|
|
77
77
|
style["--hjm-list-row-gap"] = rem(listRowRecipe.gap);
|
|
78
78
|
style["--hjm-list-row-leading-size"] = rem(listRowRecipe.leadingSize);
|
|
79
|
+
// Row text sits on the container content edge; the surface bleeds by this much (2026-10-17 user decision).
|
|
80
|
+
style["--hjm-list-row-surface-bleed"] = rem(listRowRecipe.surfaceBleed);
|
|
81
|
+
style["--hjm-list-grouped-padding-inline"] = rem(listRecipe.grouped.paddingInline);
|
|
82
|
+
for (const [name, value] of Object.entries(listRecipe.separators)) {
|
|
83
|
+
if (value === null)
|
|
84
|
+
continue;
|
|
85
|
+
style[`--hjm-list-separator-${kebab(name)}-start`] = rem(value.insetStart);
|
|
86
|
+
style[`--hjm-list-separator-${kebab(name)}-end`] = rem(value.insetEnd);
|
|
87
|
+
}
|
|
79
88
|
// Native already pins a described switch to the two-line list-row height; Web
|
|
80
89
|
// let content decide (~48), so neighbouring settings rows differed by platform.
|
|
81
90
|
style["--hjm-switch-row-min-height"] = rem(switchRecipe.rowMinHeight);
|
|
@@ -155,6 +164,13 @@ export function createHjmThemeStyle(value) {
|
|
|
155
164
|
style[`--hjm-toast-badge-${tone}`] = resolveColorReference(contract.badge, palette);
|
|
156
165
|
}
|
|
157
166
|
style["--hjm-toast-badge-size"] = `${toastRecipe.icon.badgeDiameter}px`;
|
|
167
|
+
// First-line anchor geometry (2026-10-17): the same padding, anchor and close overhang Native reads.
|
|
168
|
+
style["--hjm-toast-padding-block"] = `${toastRecipe.surface.padding.block}px`;
|
|
169
|
+
style["--hjm-toast-padding-inline"] = `${toastRecipe.surface.padding.inline}px`;
|
|
170
|
+
style["--hjm-toast-anchor-size"] = `${toastRecipe.anchor.blockSize}px`;
|
|
171
|
+
style["--hjm-toast-close-size"] = `${toastRecipe.close.diameter}px`;
|
|
172
|
+
style["--hjm-toast-close-block-overhang"] = `${toastRecipe.close.blockOverhang}px`;
|
|
173
|
+
style["--hjm-toast-close-inline-overhang"] = `${toastRecipe.close.inlineOverhang}px`;
|
|
158
174
|
style["--hjm-toast-action-background"] = resolveColorReference(toastRecipe.action.background, palette);
|
|
159
175
|
style["--hjm-toast-action-color"] = resolveColorReference(toastRecipe.action.color, palette);
|
|
160
176
|
style["--hjm-toast-description-color"] = resolveColorReference(toastRecipe.description.color, palette);
|
|
@@ -203,6 +219,15 @@ export function createHjmThemeStyle(value) {
|
|
|
203
219
|
style[`--hjm-control-button-${kebab(name)}`] =
|
|
204
220
|
`${visibleControlHeight(value, environment.minimumVisualTarget)}px`;
|
|
205
221
|
}
|
|
222
|
+
// Edge alignment (2026-10-17 measured audit): how far a ghost IconButton / Button with `edge` overhangs the
|
|
223
|
+
// container edge, from the same contract helpers Native reads (glyph slot or label on the inset, hit area kept).
|
|
224
|
+
for (const size of Object.keys(iconButtonRecipe.sizes)) {
|
|
225
|
+
const visible = visibleControlHeight(iconButtonRecipe.sizes[size].diameter, environment.minimumVisualTarget);
|
|
226
|
+
style[`--hjm-icon-button-edge-${size}`] = `${resolveIconButtonEdgeOverhang("ghost", size, visible)}px`;
|
|
227
|
+
}
|
|
228
|
+
for (const size of Object.keys(buttonRecipe.sizes)) {
|
|
229
|
+
style[`--hjm-button-edge-${size}`] = `${resolveButtonEdgeOverhang("ghost", size)}px`;
|
|
230
|
+
}
|
|
206
231
|
return style;
|
|
207
232
|
}
|
|
208
233
|
//# sourceMappingURL=theme.js.map
|
package/dist/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolveSurfaceFillOpacity } from \"@hjmds/design-contracts/palette-contrast\";\nimport {\n backdrop,\n control,\n easing,\n fontFamily,\n resolveFontFamilyStack,\n fontWeight,\n motion,\n layer,\n radius,\n shadow,\n spacing,\n stroke,\n typography,\n} from \"@hjmds/design-contracts/foundations\";\nimport { resolveColorReference } from \"@hjmds/design-contracts/color-references\";\nimport { focusIndicatorContract } from \"@hjmds/design-contracts/contracts\";\nimport {\n visibleControlHeight,\n type DesignSystemProviderValue,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { buttonRecipe, fieldRecipe } from \"@hjmds/design-contracts/recipes/base\";\nimport {\n bottomNavigationRecipe,\n comboboxRecipe,\n dialogRecipe,\n listRowRecipe,\n menuRecipe,\n searchFieldRecipe,\n selectRecipe,\n sheetRecipe,\n skeletonRecipe,\n tooltipRecipe,\n switchRecipe,\n toastRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport type { CSSProperties } from \"react\";\n\nexport type HjmThemeStyle = CSSProperties &\n Record<`--hjm-${string}`, string | number>;\n\nfunction kebab(value: string): string {\n return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\ntype ShadowToken = Readonly<{ color: string; opacity: number; radius: number; offsetY: number }>;\n\n// RN shadow token -> CSS; blur = radius, as react-native-web maps it.\nfunction shadowCss(token: ShadowToken, offsetX = 0): string {\n const hex = token.color.replace(\"#\", \"\");\n const [r, g, b] = [0, 2, 4].map((start) => Number.parseInt(hex.slice(start, start + 2), 16));\n return `${offsetX}px ${token.offsetY}px ${token.radius}px rgb(${r} ${g} ${b} / ${Math.round(token.opacity * 100)}%)`;\n}\n\nfunction rem(value: number): string {\n return `${Number((value / 16).toFixed(5))}rem`;\n}\n\nexport function createHjmThemeStyle(\n value: DesignSystemProviderValue,\n): HjmThemeStyle {\n const { environment, palette } = value;\n const profileTokens = value.designProfile?.tokens;\n const style: HjmThemeStyle = {\n \"--hjm-backdrop-modal\": `color-mix(in srgb, ${backdrop.modal.color} ${backdrop.modal.opacity * 100}%, transparent)`,\n \"--hjm-text-scale\": environment.textScale,\n \"--hjm-motion-scale\": environment.reducedMotion ? 0 : 1,\n colorScheme: environment.theme,\n backgroundColor: palette.theme.bg,\n color: palette.theme.text,\n };\n\n for (const [name, color] of Object.entries(palette.theme)) {\n style[`--hjm-color-${kebab(name)}`] = color;\n }\n for (const [name, color] of Object.entries(palette.statusAccents)) {\n style[`--hjm-accent-${kebab(name)}`] = color;\n }\n for (const [name, color] of Object.entries(palette.statusAccentFills)) {\n style[`--hjm-accent-fill-${kebab(name)}`] = color;\n }\n for (const [name, value] of Object.entries(spacing)) {\n style[`--hjm-space-${kebab(name)}`] = `${value}px`;\n }\n for (const [name, value] of Object.entries(profileTokens?.radius ?? radius)) {\n style[`--hjm-radius-${kebab(name)}`] = `${value}px`;\n }\n for (const [name, value] of Object.entries(profileTokens?.typography ?? typography)) {\n style[`--hjm-type-${kebab(name)}-size`] =\n `calc(${rem(value.fontSize)} * var(--hjm-text-scale))`;\n style[`--hjm-type-${kebab(name)}-line-height`] =\n `calc(${rem(value.lineHeight)} * var(--hjm-text-scale))`;\n style[`--hjm-type-${kebab(name)}-weight`] = value.fontWeight;\n }\n for (const [name, value] of Object.entries(fontWeight)) {\n style[`--hjm-font-weight-${kebab(name)}`] = value;\n }\n for (const [name, value] of Object.entries(motion)) {\n style[`--hjm-motion-${kebab(name)}`] = environment.reducedMotion\n ? \"0ms\"\n : `${value}ms`;\n }\n\n style[\"--hjm-font-family-ui\"] = (profileTokens?.fontFamily.ui ?? fontFamily.ui).join(\", \");\n style[\"--hjm-font-family-code\"] = (profileTokens?.fontFamily.code ?? fontFamily.code).join(\", \");\n // Roles resolve from the nearest Provider, including portal/nested reset contexts.\n for (const role of [\"display\", \"reading\"] as const) {\n style[`--hjm-font-family-${role}`] = resolveFontFamilyStack(profileTokens?.fontFamily ?? fontFamily, role).join(\", \");\n }\n for (const [name, value] of Object.entries(stroke)) {\n style[`--hjm-stroke-${kebab(name)}`] = `${value}px`;\n }\n // Unset before 1.4.1, so focus rules were invalid and drew no ring.\n style[\"--hjm-color-focus\"] = resolveColorReference(focusIndicatorContract.color, palette);\n style[\"--hjm-focus-width\"] = `${focusIndicatorContract.width}px`;\n style[\"--hjm-focus-offset\"] = `${focusIndicatorContract.offset}px`;\n style[\"--hjm-bottom-navigation-pressed-background\"] = resolveColorReference(\n bottomNavigationRecipe.states.pressedBackground,\n palette,\n );\n // Row rhythm and the leading frame come from the recipe so the stylesheet\n // does not carry a second copy of the same numbers.\n style[\"--hjm-list-row-gap\"] = rem(listRowRecipe.gap);\n style[\"--hjm-list-row-leading-size\"] = rem(listRowRecipe.leadingSize);\n // Native already pins a described switch to the two-line list-row height; Web\n // let content decide (~48), so neighbouring settings rows differed by platform.\n style[\"--hjm-switch-row-min-height\"] = rem(switchRecipe.rowMinHeight);\n style[\"--hjm-switch-row-two-line-min-height\"] = rem(switchRecipe.rowTwoLineMinHeight);\n for (const [name, value] of Object.entries(switchRecipe.sizes)) {\n style[`--hjm-switch-${kebab(name)}-width`] = rem(value.width);\n style[`--hjm-switch-${kebab(name)}-height`] = rem(value.height);\n style[`--hjm-switch-${kebab(name)}-thumb`] = rem(value.thumb);\n style[`--hjm-switch-${kebab(name)}-inset`] = rem(value.inset);\n style[`--hjm-switch-${kebab(name)}-offset`] = rem(\n value.width - value.thumb - value.inset * 2,\n );\n }\n for (const [name, value] of Object.entries(listRowRecipe.density)) {\n style[`--hjm-list-row-${kebab(name)}-one-line`] = rem(value.oneLineMinHeight);\n style[`--hjm-list-row-${kebab(name)}-two-line`] = rem(value.twoLineMinHeight);\n style[`--hjm-list-row-${kebab(name)}-padding-inline`] = rem(value.paddingHorizontal);\n style[`--hjm-list-row-${kebab(name)}-padding-block`] = rem(value.paddingVertical);\n }\n // The recipe owns these; a second copy in the stylesheet drifts silently\n // because the gates read that file as text only. Block and text heights\n // already resolve through --hjm-space-*, so they are not re-emitted.\n const skeletonCurve = easing[skeletonRecipe.animation.easing];\n style[\"--hjm-skeleton-circle-size\"] =\n `${skeletonRecipe.shapes.circle.defaultHeight}px`;\n style[\"--hjm-skeleton-duration\"] = `${skeletonRecipe.animation.duration}ms`;\n style[\"--hjm-skeleton-easing\"] = `cubic-bezier(${skeletonCurve.join(\", \")})`;\n style[\"--hjm-skeleton-from-opacity\"] = skeletonRecipe.animation.fromOpacity;\n style[\"--hjm-skeleton-to-opacity\"] = skeletonRecipe.animation.toOpacity;\n // Export the shared order instead of keeping a second numeric scale in CSS.\n for (const [name, value] of Object.entries(layer)) {\n style[`--hjm-layer-${kebab(name)}`] = value;\n }\n for (const [name, token] of Object.entries(profileTokens?.shadow ?? shadow)) {\n style[`--hjm-shadow-${kebab(name)}`] = shadowCss(token);\n }\n const surfaceMaterial = value.designProfile?.material.surface;\n // Defaults are emitted on every Provider, so a nested neutral profile clears\n // inherited glass/clay. Unsupported transparency remains an opaque CSS fill.\n style[\"--hjm-surface-blur\"] = surfaceMaterial?.blurStrength ? `blur(${surfaceMaterial.blurStrength * 32}px)` : \"none\";\n style[\"--hjm-surface-fill-opacity\"] = surfaceMaterial?.blurStrength ? resolveSurfaceFillOpacity(surfaceMaterial.fillOpacity, palette.theme) : 1;\n const insetShadow = surfaceMaterial?.insetShadows.length\n ? surfaceMaterial.insetShadows.map(token => `inset ${shadowCss(token, token.offsetX)}`).join(\", \")\n : \"\";\n style[\"--hjm-surface-inset-shadow\"] = insetShadow || \"none\";\n style[\"--hjm-surface-raised-shadow\"] = shadowCss(profileTokens?.shadow.floating ?? shadow.floating) + (insetShadow ? `, ${insetShadow}` : \"\");\n // BottomCTA overlaps content above it (bottomCtaRecipe rationale). Profile\n // strength is shared, but its shadow must cast upward rather than behind the\n // footer; preserve the stylesheet-only legacy path when no profile is supplied.\n style[\"--hjm-bottom-cta-shadow\"] = profileTokens\n ? shadowCss({ ...profileTokens.shadow.floating, offsetY: -Math.abs(profileTokens.shadow.floating.offsetY) })\n : \"none\";\n // Toast body metrics follow a selected profile; emit legacy values when no profile is selected\n // instead of inheriting a parent profile or changing standalone presentation.\n style[\"--hjm-toast-title-line-height\"] = profileTokens ? \"var(--hjm-type-body-line-height)\" : \"1.35\";\n style[\"--hjm-toast-description-line-height\"] = profileTokens ? \"var(--hjm-type-body-line-height)\" : \"1.45\";\n // Overlay chrome and sizes come from the recipes Native reads (1.5.0).\n for (const [name, chrome] of [[\"dialog\", dialogRecipe.content], [\"sheet\", sheetRecipe.content], [\"toast\", toastRecipe.surface]] as const) {\n style[`--hjm-${name}-background`] = resolveColorReference(chrome.background, palette);\n style[`--hjm-${name}-border`] = resolveColorReference(chrome.border, palette);\n style[`--hjm-${name}-border-width`] = `${chrome.borderWidth}px`;\n style[`--hjm-${name}-radius`] = `var(--hjm-radius-${chrome.radius})`;\n // Recipes select the floating role. Resolve its value from the profile so\n // dialogs, sheets and toasts cannot retain neutral shadows after a theme switch.\n style[`--hjm-${name}-shadow`] = shadowCss(profileTokens?.shadow.floating ?? chrome.shadow);\n }\n style[\"--hjm-sheet-max-height\"] = `${sheetRecipe.content.maxHeightRatio * 100}dvh`;\n style[\"--hjm-sheet-max-width\"] = `${sheetRecipe.web.maxWidth}px`;\n style[\"--hjm-sheet-handle-width\"] = `${sheetRecipe.handle.width}px`;\n style[\"--hjm-sheet-handle-height\"] = `${sheetRecipe.handle.height}px`;\n style[\"--hjm-sheet-handle-color\"] = resolveColorReference(sheetRecipe.handle.color, palette);\n for (const [name, ratio] of Object.entries(sheetRecipe.sizes)) {\n if (ratio !== null) style[`--hjm-sheet-size-${name}`] = `${ratio * 100}dvh`;\n }\n // Toast badge/action colours resolve from the recipe so Web and Native share one tone table (1.10.0).\n for (const [tone, contract] of Object.entries(toastRecipe.tones)) {\n style[`--hjm-toast-accent-${tone}`] = resolveColorReference(contract.accent, palette);\n style[`--hjm-toast-badge-${tone}`] = resolveColorReference(contract.badge, palette);\n }\n style[\"--hjm-toast-badge-size\"] = `${toastRecipe.icon.badgeDiameter}px`;\n style[\"--hjm-toast-action-background\"] = resolveColorReference(toastRecipe.action.background, palette);\n style[\"--hjm-toast-action-color\"] = resolveColorReference(toastRecipe.action.color, palette);\n style[\"--hjm-toast-description-color\"] = resolveColorReference(toastRecipe.description.color, palette);\n // Panel toast (2026-10-10): media column, step progress and action alignment come from the same recipe Native reads.\n style[\"--hjm-toast-media-size\"] = `${toastRecipe.media.size}px`;\n style[\"--hjm-toast-action-align\"] = toastRecipe.action.align;\n style[\"--hjm-toast-pressed-opacity\"] = toastRecipe.states.pressedOpacity;\n style[\"--hjm-toast-progress-gap\"] = `${toastRecipe.progress.gap}px`;\n style[\"--hjm-toast-progress-dot\"] = `${toastRecipe.progress.dotSize}px`;\n style[\"--hjm-toast-progress-current-scale\"] = String(toastRecipe.progress.currentScale);\n style[\"--hjm-toast-progress-done\"] = resolveColorReference(toastRecipe.progress.doneColor, palette);\n style[\"--hjm-toast-progress-upcoming\"] = resolveColorReference(toastRecipe.progress.upcomingColor, palette);\n style[\"--hjm-toast-progress-label\"] = resolveColorReference(toastRecipe.progress.labelColor, palette);\n style[\"--hjm-toast-progress-current-label\"] = resolveColorReference(toastRecipe.progress.currentLabelColor, palette);\n const toastExit = toastRecipe.transition.web.exit;\n style[\"--hjm-toast-exit-duration\"] = environment.reducedMotion ? \"0ms\" : `${toastExit.duration}ms`;\n style[\"--hjm-toast-exit-easing\"] = `cubic-bezier(${easing[toastExit.easing].join(\", \")})`;\n // SearchField geometry comes from searchFieldRecipe (2026-10-06 follow-up). Web had drawn TextField's\n // 16px padding for both sizes and a 44px clear button even at `medium`, where the recipe and Native\n // use a 36 circle with a 4px hit slop (44 target, 36 footprint).\n for (const [name, size] of Object.entries(searchFieldRecipe.sizes)) {\n style[`--hjm-search-field-padding-${name}`] = `${size.paddingHorizontal}px`;\n style[`--hjm-search-field-gap-${name}`] = `${size.gap}px`;\n style[`--hjm-search-field-clear-${name}`] = `${size.clearDiameter}px`;\n style[`--hjm-search-field-clear-slop-${name}`] = `${size.clearHitSlop}px`;\n }\n style[\"--hjm-tooltip-max-width\"] = `${tooltipRecipe.content.maxWidth}px`;\n style[\"--hjm-tooltip-padding\"] = `${tooltipRecipe.surface.padding}px`;\n // Floating collection surfaces read their padding from the recipe (2026-10-06): the stylesheet's 4 had drifted from 8.\n style[\"--hjm-menu-padding\"] = `${menuRecipe.surface.padding}px`;\n style[\"--hjm-select-popover-padding\"] = `${selectRecipe.popover.padding}px`;\n style[\"--hjm-combobox-popover-padding\"] = `${comboboxRecipe.popover.padding}px`;\n style[\"--hjm-tooltip-collision-padding\"] = `${tooltipRecipe.positioning.collisionPadding}px`;\n style[\"--hjm-button-pressed-opacity\"] = buttonRecipe.opacity.pressed;\n style[\"--hjm-button-disabled-opacity\"] = buttonRecipe.opacity.disabled;\n style[\"--hjm-field-border-width\"] = `${fieldRecipe.borderWidth}px`;\n style[\"--hjm-field-focus-ring-width\"] = `${fieldRecipe.focusRingWidth}px`;\n style[\"--hjm-field-disabled-opacity\"] = fieldRecipe.disabledOpacity;\n style[\"--hjm-control-min-touch-target\"] = `${control.minTouchTarget}px`;\n style[\"--hjm-control-field-height\"] = `${control.fieldHeight}px`;\n style[\"--hjm-field-multiline-min-height\"] = rem(fieldRecipe.multilineMinHeight);\n style[\"--hjm-field-padding-block\"] = rem(fieldRecipe.paddingVertical);\n for (const [name, value] of Object.entries(control.buttonHeight)) {\n // The axis is applied to the emitted variables rather than to each rule so\n // that every stylesheet consumer of a control height honours it at once.\n style[`--hjm-control-button-${kebab(name)}`] =\n `${visibleControlHeight(value, environment.minimumVisualTarget)}px`;\n }\n\n return style;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolveSurfaceFillOpacity } from \"@hjmds/design-contracts/palette-contrast\";\nimport {\n backdrop,\n control,\n easing,\n fontFamily,\n resolveFontFamilyStack,\n fontWeight,\n motion,\n layer,\n radius,\n shadow,\n spacing,\n stroke,\n typography,\n} from \"@hjmds/design-contracts/foundations\";\nimport { resolveColorReference } from \"@hjmds/design-contracts/color-references\";\nimport { focusIndicatorContract } from \"@hjmds/design-contracts/contracts\";\nimport {\n visibleControlHeight,\n type DesignSystemProviderValue,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { buttonRecipe, fieldRecipe, resolveButtonEdgeOverhang } from \"@hjmds/design-contracts/recipes/base\";\nimport {\n bottomNavigationRecipe,\n iconButtonRecipe,\n resolveIconButtonEdgeOverhang,\n comboboxRecipe,\n dialogRecipe,\n listRecipe,\n listRowRecipe,\n menuRecipe,\n searchFieldRecipe,\n selectRecipe,\n sheetRecipe,\n skeletonRecipe,\n tooltipRecipe,\n switchRecipe,\n toastRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport type { CSSProperties } from \"react\";\n\nexport type HjmThemeStyle = CSSProperties &\n Record<`--hjm-${string}`, string | number>;\n\nfunction kebab(value: string): string {\n return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\ntype ShadowToken = Readonly<{ color: string; opacity: number; radius: number; offsetY: number }>;\n\n// RN shadow token -> CSS; blur = radius, as react-native-web maps it.\nfunction shadowCss(token: ShadowToken, offsetX = 0): string {\n const hex = token.color.replace(\"#\", \"\");\n const [r, g, b] = [0, 2, 4].map((start) => Number.parseInt(hex.slice(start, start + 2), 16));\n return `${offsetX}px ${token.offsetY}px ${token.radius}px rgb(${r} ${g} ${b} / ${Math.round(token.opacity * 100)}%)`;\n}\n\nfunction rem(value: number): string {\n return `${Number((value / 16).toFixed(5))}rem`;\n}\n\nexport function createHjmThemeStyle(\n value: DesignSystemProviderValue,\n): HjmThemeStyle {\n const { environment, palette } = value;\n const profileTokens = value.designProfile?.tokens;\n const style: HjmThemeStyle = {\n \"--hjm-backdrop-modal\": `color-mix(in srgb, ${backdrop.modal.color} ${backdrop.modal.opacity * 100}%, transparent)`,\n \"--hjm-text-scale\": environment.textScale,\n \"--hjm-motion-scale\": environment.reducedMotion ? 0 : 1,\n colorScheme: environment.theme,\n backgroundColor: palette.theme.bg,\n color: palette.theme.text,\n };\n\n for (const [name, color] of Object.entries(palette.theme)) {\n style[`--hjm-color-${kebab(name)}`] = color;\n }\n for (const [name, color] of Object.entries(palette.statusAccents)) {\n style[`--hjm-accent-${kebab(name)}`] = color;\n }\n for (const [name, color] of Object.entries(palette.statusAccentFills)) {\n style[`--hjm-accent-fill-${kebab(name)}`] = color;\n }\n for (const [name, value] of Object.entries(spacing)) {\n style[`--hjm-space-${kebab(name)}`] = `${value}px`;\n }\n for (const [name, value] of Object.entries(profileTokens?.radius ?? radius)) {\n style[`--hjm-radius-${kebab(name)}`] = `${value}px`;\n }\n for (const [name, value] of Object.entries(profileTokens?.typography ?? typography)) {\n style[`--hjm-type-${kebab(name)}-size`] =\n `calc(${rem(value.fontSize)} * var(--hjm-text-scale))`;\n style[`--hjm-type-${kebab(name)}-line-height`] =\n `calc(${rem(value.lineHeight)} * var(--hjm-text-scale))`;\n style[`--hjm-type-${kebab(name)}-weight`] = value.fontWeight;\n }\n for (const [name, value] of Object.entries(fontWeight)) {\n style[`--hjm-font-weight-${kebab(name)}`] = value;\n }\n for (const [name, value] of Object.entries(motion)) {\n style[`--hjm-motion-${kebab(name)}`] = environment.reducedMotion\n ? \"0ms\"\n : `${value}ms`;\n }\n\n style[\"--hjm-font-family-ui\"] = (profileTokens?.fontFamily.ui ?? fontFamily.ui).join(\", \");\n style[\"--hjm-font-family-code\"] = (profileTokens?.fontFamily.code ?? fontFamily.code).join(\", \");\n // Roles resolve from the nearest Provider, including portal/nested reset contexts.\n for (const role of [\"display\", \"reading\"] as const) {\n style[`--hjm-font-family-${role}`] = resolveFontFamilyStack(profileTokens?.fontFamily ?? fontFamily, role).join(\", \");\n }\n for (const [name, value] of Object.entries(stroke)) {\n style[`--hjm-stroke-${kebab(name)}`] = `${value}px`;\n }\n // Unset before 1.4.1, so focus rules were invalid and drew no ring.\n style[\"--hjm-color-focus\"] = resolveColorReference(focusIndicatorContract.color, palette);\n style[\"--hjm-focus-width\"] = `${focusIndicatorContract.width}px`;\n style[\"--hjm-focus-offset\"] = `${focusIndicatorContract.offset}px`;\n style[\"--hjm-bottom-navigation-pressed-background\"] = resolveColorReference(\n bottomNavigationRecipe.states.pressedBackground,\n palette,\n );\n // Row rhythm and the leading frame come from the recipe so the stylesheet\n // does not carry a second copy of the same numbers.\n style[\"--hjm-list-row-gap\"] = rem(listRowRecipe.gap);\n style[\"--hjm-list-row-leading-size\"] = rem(listRowRecipe.leadingSize);\n // Row text sits on the container content edge; the surface bleeds by this much (2026-10-17 user decision).\n style[\"--hjm-list-row-surface-bleed\"] = rem(listRowRecipe.surfaceBleed);\n style[\"--hjm-list-grouped-padding-inline\"] = rem(listRecipe.grouped.paddingInline);\n for (const [name, value] of Object.entries(listRecipe.separators)) {\n if (value === null) continue;\n style[`--hjm-list-separator-${kebab(name)}-start`] = rem(value.insetStart);\n style[`--hjm-list-separator-${kebab(name)}-end`] = rem(value.insetEnd);\n }\n // Native already pins a described switch to the two-line list-row height; Web\n // let content decide (~48), so neighbouring settings rows differed by platform.\n style[\"--hjm-switch-row-min-height\"] = rem(switchRecipe.rowMinHeight);\n style[\"--hjm-switch-row-two-line-min-height\"] = rem(switchRecipe.rowTwoLineMinHeight);\n for (const [name, value] of Object.entries(switchRecipe.sizes)) {\n style[`--hjm-switch-${kebab(name)}-width`] = rem(value.width);\n style[`--hjm-switch-${kebab(name)}-height`] = rem(value.height);\n style[`--hjm-switch-${kebab(name)}-thumb`] = rem(value.thumb);\n style[`--hjm-switch-${kebab(name)}-inset`] = rem(value.inset);\n style[`--hjm-switch-${kebab(name)}-offset`] = rem(\n value.width - value.thumb - value.inset * 2,\n );\n }\n for (const [name, value] of Object.entries(listRowRecipe.density)) {\n style[`--hjm-list-row-${kebab(name)}-one-line`] = rem(value.oneLineMinHeight);\n style[`--hjm-list-row-${kebab(name)}-two-line`] = rem(value.twoLineMinHeight);\n style[`--hjm-list-row-${kebab(name)}-padding-inline`] = rem(value.paddingHorizontal);\n style[`--hjm-list-row-${kebab(name)}-padding-block`] = rem(value.paddingVertical);\n }\n // The recipe owns these; a second copy in the stylesheet drifts silently\n // because the gates read that file as text only. Block and text heights\n // already resolve through --hjm-space-*, so they are not re-emitted.\n const skeletonCurve = easing[skeletonRecipe.animation.easing];\n style[\"--hjm-skeleton-circle-size\"] =\n `${skeletonRecipe.shapes.circle.defaultHeight}px`;\n style[\"--hjm-skeleton-duration\"] = `${skeletonRecipe.animation.duration}ms`;\n style[\"--hjm-skeleton-easing\"] = `cubic-bezier(${skeletonCurve.join(\", \")})`;\n style[\"--hjm-skeleton-from-opacity\"] = skeletonRecipe.animation.fromOpacity;\n style[\"--hjm-skeleton-to-opacity\"] = skeletonRecipe.animation.toOpacity;\n // Export the shared order instead of keeping a second numeric scale in CSS.\n for (const [name, value] of Object.entries(layer)) {\n style[`--hjm-layer-${kebab(name)}`] = value;\n }\n for (const [name, token] of Object.entries(profileTokens?.shadow ?? shadow)) {\n style[`--hjm-shadow-${kebab(name)}`] = shadowCss(token);\n }\n const surfaceMaterial = value.designProfile?.material.surface;\n // Defaults are emitted on every Provider, so a nested neutral profile clears\n // inherited glass/clay. Unsupported transparency remains an opaque CSS fill.\n style[\"--hjm-surface-blur\"] = surfaceMaterial?.blurStrength ? `blur(${surfaceMaterial.blurStrength * 32}px)` : \"none\";\n style[\"--hjm-surface-fill-opacity\"] = surfaceMaterial?.blurStrength ? resolveSurfaceFillOpacity(surfaceMaterial.fillOpacity, palette.theme) : 1;\n const insetShadow = surfaceMaterial?.insetShadows.length\n ? surfaceMaterial.insetShadows.map(token => `inset ${shadowCss(token, token.offsetX)}`).join(\", \")\n : \"\";\n style[\"--hjm-surface-inset-shadow\"] = insetShadow || \"none\";\n style[\"--hjm-surface-raised-shadow\"] = shadowCss(profileTokens?.shadow.floating ?? shadow.floating) + (insetShadow ? `, ${insetShadow}` : \"\");\n // BottomCTA overlaps content above it (bottomCtaRecipe rationale). Profile\n // strength is shared, but its shadow must cast upward rather than behind the\n // footer; preserve the stylesheet-only legacy path when no profile is supplied.\n style[\"--hjm-bottom-cta-shadow\"] = profileTokens\n ? shadowCss({ ...profileTokens.shadow.floating, offsetY: -Math.abs(profileTokens.shadow.floating.offsetY) })\n : \"none\";\n // Toast body metrics follow a selected profile; emit legacy values when no profile is selected\n // instead of inheriting a parent profile or changing standalone presentation.\n style[\"--hjm-toast-title-line-height\"] = profileTokens ? \"var(--hjm-type-body-line-height)\" : \"1.35\";\n style[\"--hjm-toast-description-line-height\"] = profileTokens ? \"var(--hjm-type-body-line-height)\" : \"1.45\";\n // Overlay chrome and sizes come from the recipes Native reads (1.5.0).\n for (const [name, chrome] of [[\"dialog\", dialogRecipe.content], [\"sheet\", sheetRecipe.content], [\"toast\", toastRecipe.surface]] as const) {\n style[`--hjm-${name}-background`] = resolveColorReference(chrome.background, palette);\n style[`--hjm-${name}-border`] = resolveColorReference(chrome.border, palette);\n style[`--hjm-${name}-border-width`] = `${chrome.borderWidth}px`;\n style[`--hjm-${name}-radius`] = `var(--hjm-radius-${chrome.radius})`;\n // Recipes select the floating role. Resolve its value from the profile so\n // dialogs, sheets and toasts cannot retain neutral shadows after a theme switch.\n style[`--hjm-${name}-shadow`] = shadowCss(profileTokens?.shadow.floating ?? chrome.shadow);\n }\n style[\"--hjm-sheet-max-height\"] = `${sheetRecipe.content.maxHeightRatio * 100}dvh`;\n style[\"--hjm-sheet-max-width\"] = `${sheetRecipe.web.maxWidth}px`;\n style[\"--hjm-sheet-handle-width\"] = `${sheetRecipe.handle.width}px`;\n style[\"--hjm-sheet-handle-height\"] = `${sheetRecipe.handle.height}px`;\n style[\"--hjm-sheet-handle-color\"] = resolveColorReference(sheetRecipe.handle.color, palette);\n for (const [name, ratio] of Object.entries(sheetRecipe.sizes)) {\n if (ratio !== null) style[`--hjm-sheet-size-${name}`] = `${ratio * 100}dvh`;\n }\n // Toast badge/action colours resolve from the recipe so Web and Native share one tone table (1.10.0).\n for (const [tone, contract] of Object.entries(toastRecipe.tones)) {\n style[`--hjm-toast-accent-${tone}`] = resolveColorReference(contract.accent, palette);\n style[`--hjm-toast-badge-${tone}`] = resolveColorReference(contract.badge, palette);\n }\n style[\"--hjm-toast-badge-size\"] = `${toastRecipe.icon.badgeDiameter}px`;\n // First-line anchor geometry (2026-10-17): the same padding, anchor and close overhang Native reads.\n style[\"--hjm-toast-padding-block\"] = `${toastRecipe.surface.padding.block}px`;\n style[\"--hjm-toast-padding-inline\"] = `${toastRecipe.surface.padding.inline}px`;\n style[\"--hjm-toast-anchor-size\"] = `${toastRecipe.anchor.blockSize}px`;\n style[\"--hjm-toast-close-size\"] = `${toastRecipe.close.diameter}px`;\n style[\"--hjm-toast-close-block-overhang\"] = `${toastRecipe.close.blockOverhang}px`;\n style[\"--hjm-toast-close-inline-overhang\"] = `${toastRecipe.close.inlineOverhang}px`;\n style[\"--hjm-toast-action-background\"] = resolveColorReference(toastRecipe.action.background, palette);\n style[\"--hjm-toast-action-color\"] = resolveColorReference(toastRecipe.action.color, palette);\n style[\"--hjm-toast-description-color\"] = resolveColorReference(toastRecipe.description.color, palette);\n // Panel toast (2026-10-10): media column, step progress and action alignment come from the same recipe Native reads.\n style[\"--hjm-toast-media-size\"] = `${toastRecipe.media.size}px`;\n style[\"--hjm-toast-action-align\"] = toastRecipe.action.align;\n style[\"--hjm-toast-pressed-opacity\"] = toastRecipe.states.pressedOpacity;\n style[\"--hjm-toast-progress-gap\"] = `${toastRecipe.progress.gap}px`;\n style[\"--hjm-toast-progress-dot\"] = `${toastRecipe.progress.dotSize}px`;\n style[\"--hjm-toast-progress-current-scale\"] = String(toastRecipe.progress.currentScale);\n style[\"--hjm-toast-progress-done\"] = resolveColorReference(toastRecipe.progress.doneColor, palette);\n style[\"--hjm-toast-progress-upcoming\"] = resolveColorReference(toastRecipe.progress.upcomingColor, palette);\n style[\"--hjm-toast-progress-label\"] = resolveColorReference(toastRecipe.progress.labelColor, palette);\n style[\"--hjm-toast-progress-current-label\"] = resolveColorReference(toastRecipe.progress.currentLabelColor, palette);\n const toastExit = toastRecipe.transition.web.exit;\n style[\"--hjm-toast-exit-duration\"] = environment.reducedMotion ? \"0ms\" : `${toastExit.duration}ms`;\n style[\"--hjm-toast-exit-easing\"] = `cubic-bezier(${easing[toastExit.easing].join(\", \")})`;\n // SearchField geometry comes from searchFieldRecipe (2026-10-06 follow-up). Web had drawn TextField's\n // 16px padding for both sizes and a 44px clear button even at `medium`, where the recipe and Native\n // use a 36 circle with a 4px hit slop (44 target, 36 footprint).\n for (const [name, size] of Object.entries(searchFieldRecipe.sizes)) {\n style[`--hjm-search-field-padding-${name}`] = `${size.paddingHorizontal}px`;\n style[`--hjm-search-field-gap-${name}`] = `${size.gap}px`;\n style[`--hjm-search-field-clear-${name}`] = `${size.clearDiameter}px`;\n style[`--hjm-search-field-clear-slop-${name}`] = `${size.clearHitSlop}px`;\n }\n style[\"--hjm-tooltip-max-width\"] = `${tooltipRecipe.content.maxWidth}px`;\n style[\"--hjm-tooltip-padding\"] = `${tooltipRecipe.surface.padding}px`;\n // Floating collection surfaces read their padding from the recipe (2026-10-06): the stylesheet's 4 had drifted from 8.\n style[\"--hjm-menu-padding\"] = `${menuRecipe.surface.padding}px`;\n style[\"--hjm-select-popover-padding\"] = `${selectRecipe.popover.padding}px`;\n style[\"--hjm-combobox-popover-padding\"] = `${comboboxRecipe.popover.padding}px`;\n style[\"--hjm-tooltip-collision-padding\"] = `${tooltipRecipe.positioning.collisionPadding}px`;\n style[\"--hjm-button-pressed-opacity\"] = buttonRecipe.opacity.pressed;\n style[\"--hjm-button-disabled-opacity\"] = buttonRecipe.opacity.disabled;\n style[\"--hjm-field-border-width\"] = `${fieldRecipe.borderWidth}px`;\n style[\"--hjm-field-focus-ring-width\"] = `${fieldRecipe.focusRingWidth}px`;\n style[\"--hjm-field-disabled-opacity\"] = fieldRecipe.disabledOpacity;\n style[\"--hjm-control-min-touch-target\"] = `${control.minTouchTarget}px`;\n style[\"--hjm-control-field-height\"] = `${control.fieldHeight}px`;\n style[\"--hjm-field-multiline-min-height\"] = rem(fieldRecipe.multilineMinHeight);\n style[\"--hjm-field-padding-block\"] = rem(fieldRecipe.paddingVertical);\n for (const [name, value] of Object.entries(control.buttonHeight)) {\n // The axis is applied to the emitted variables rather than to each rule so\n // that every stylesheet consumer of a control height honours it at once.\n style[`--hjm-control-button-${kebab(name)}`] =\n `${visibleControlHeight(value, environment.minimumVisualTarget)}px`;\n }\n // Edge alignment (2026-10-17 measured audit): how far a ghost IconButton / Button with `edge` overhangs the\n // container edge, from the same contract helpers Native reads (glyph slot or label on the inset, hit area kept).\n for (const size of Object.keys(iconButtonRecipe.sizes) as (keyof typeof iconButtonRecipe.sizes)[]) {\n const visible = visibleControlHeight(iconButtonRecipe.sizes[size].diameter, environment.minimumVisualTarget);\n style[`--hjm-icon-button-edge-${size}`] = `${resolveIconButtonEdgeOverhang(\"ghost\", size, visible)}px`;\n }\n for (const size of Object.keys(buttonRecipe.sizes) as (keyof typeof buttonRecipe.sizes)[]) {\n style[`--hjm-button-edge-${size}`] = `${resolveButtonEdgeOverhang(\"ghost\", size)}px`;\n }\n\n return style;\n}\n"]}
|
package/dist/toast.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,KAAK,mBAAmB,EAExB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EACf,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,KAAK,mBAAmB,EAExB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EACf,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAYL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA2Lf,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACjF,QAAQ,CAAC;IACP,UAAU,EAAE,eAAe,CAAC;IAC5B,gBAAgB,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACxD,CAAC,CAAC;AAEL,wFAAwF;AACxF,eAAO,MAAM,KAAK;gBALF,eAAe;sBACT,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;mDA2CxD,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;IAC9B,OAAO,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;IACxF,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B,CAAC,CAAC;AAIH,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAGD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAuDH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAA0C,EAC1C,KAAK,EACL,aAAkB,EAClB,UAAU,EACV,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,MAAM,EACN,YAAgB,EAChB,MAAM,EACN,UAAU,GACX,EAAE,kBAAkB,+BA8NpB"}
|
package/dist/toast.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { isLargeTextScale } from "@hjmds/design-contracts/components/design-system-provider";
|
|
3
3
|
import { createToastStore, createToastSession, resolveToastDescriptor, } from "@hjmds/design-contracts/components/toast";
|
|
4
4
|
import { toastRecipe, } from "@hjmds/design-contracts/recipes";
|
|
5
|
+
import { glyph } from "@hjmds/design-contracts/foundations";
|
|
5
6
|
import { createContext, forwardRef, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, } from "react";
|
|
6
7
|
import { createPortal } from "react-dom";
|
|
7
8
|
import { classNames } from "./internal.js";
|
|
@@ -9,6 +10,8 @@ import { useOptionalHjmTheme } from "./provider.js";
|
|
|
9
10
|
import { createHjmThemeStyle } from "./theme.js";
|
|
10
11
|
// 1.10.0: stroked SVG glyphs inside a tinted badge (toastRecipe.icon). Text glyphs ("●", "i", "!") rendered at
|
|
11
12
|
// font metrics, so neutral read as a stray grey dot and info/danger looked like typos. currentColor = tone accent.
|
|
13
|
+
// The close glyph box is the size toastRecipe.close.inlineOverhang is derived from (2026-10-17 alignment fix).
|
|
14
|
+
const closeGlyphSize = glyph[toastRecipe.close.glyph];
|
|
12
15
|
const toneGlyphPaths = {
|
|
13
16
|
notifications: "M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0",
|
|
14
17
|
info: "M12 16v-4M12 8h.01M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z",
|
|
@@ -46,7 +49,7 @@ const ToastCard = forwardRef(function ToastCard({ descriptor, phase, onAction, o
|
|
|
46
49
|
// A sibling button covers the card without nesting action/close buttons in a button.
|
|
47
50
|
_jsx("button", { type: "button", className: "hjm-toast__press", "aria-label": descriptor.press.accessibilityLabel, "aria-describedby": descriptionId, disabled: phase !== "visible", onClick: onPress })) : null, _jsx("span", { className: "hjm-toast__tone-mark", "aria-hidden": "true" }), descriptor.media === null ? (_jsx("span", { className: "hjm-toast__icon", "aria-hidden": "true", children: _jsx(ToneGlyph, { tone: descriptor.tone }) })) : (
|
|
48
51
|
// Product media (mascot, avatar) takes the badge column; it is decorative, the copy carries meaning.
|
|
49
|
-
_jsx("span", { className: "hjm-toast__media", "aria-hidden": "true", children: descriptor.media })), _jsxs("span", { className: "hjm-toast__content", children: [descriptor.title ? (_jsx("strong", { id: titleId, className: "hjm-toast__title", children: descriptor.title })) : null, _jsx("span", { id: descriptionId, className: "hjm-toast__description", children: descriptor.description }), descriptor.progress ? _jsx(ToastProgress, { progress: descriptor.progress }) : null] }), descriptor.action ? (_jsx("button", { type: "button", className: "hjm-toast__action", "aria-label": descriptor.action.accessibilityLabel, onClick: onAction, children: descriptor.action.label })) : null, _jsx("button", { type: "button", className: "hjm-toast__close", "aria-label": descriptor.closeLabel, onClick: () => onDismiss("close-action"), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width:
|
|
52
|
+
_jsx("span", { className: "hjm-toast__media", "aria-hidden": "true", children: descriptor.media })), _jsxs("span", { className: "hjm-toast__content", children: [descriptor.title ? (_jsx("strong", { id: titleId, className: "hjm-toast__title", children: descriptor.title })) : null, _jsx("span", { id: descriptionId, className: "hjm-toast__description", children: descriptor.description }), descriptor.progress ? _jsx(ToastProgress, { progress: descriptor.progress }) : null] }), descriptor.action ? (_jsx("button", { type: "button", className: "hjm-toast__action", "aria-label": descriptor.action.accessibilityLabel, onClick: onAction, children: descriptor.action.label })) : null, _jsx("button", { type: "button", className: "hjm-toast__close", "aria-label": descriptor.closeLabel, onClick: () => onDismiss("close-action"), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: closeGlyphSize, height: closeGlyphSize, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })] }));
|
|
50
53
|
});
|
|
51
54
|
/** Controlled single-toast renderer; ToastProvider supplies the full FIFO lifecycle. */
|
|
52
55
|
export const Toast = forwardRef(function Toast(
|