@hjmds/react 1.27.1 → 1.28.0
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/auth-screen.d.ts +32 -2
- package/dist/auth-screen.d.ts.map +1 -1
- package/dist/auth-screen.js +52 -4
- package/dist/auth-screen.js.map +1 -1
- package/dist/chart.d.ts +1 -1
- package/dist/chart.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/communication.js +1 -1
- package/dist/communication.js.map +1 -1
- package/dist/data-table.d.ts +2 -2
- package/dist/data-table.d.ts.map +1 -1
- package/dist/data-table.js.map +1 -1
- package/dist/display.d.ts.map +1 -1
- package/dist/display.js +9 -3
- package/dist/display.js.map +1 -1
- package/dist/evidence.d.ts +1 -1
- package/dist/evidence.js +2 -2
- package/dist/evidence.js.map +1 -1
- package/dist/feedback.d.ts +10 -0
- package/dist/feedback.d.ts.map +1 -1
- package/dist/feedback.js +6 -1
- package/dist/feedback.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/internal/list-row-scroll-room.d.ts +16 -0
- package/dist/internal/list-row-scroll-room.d.ts.map +1 -0
- package/dist/internal/list-row-scroll-room.js +17 -0
- package/dist/internal/list-row-scroll-room.js.map +1 -0
- 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/notification-bell.d.ts +4 -1
- package/dist/notification-bell.d.ts.map +1 -1
- package/dist/notification-bell.js +5 -2
- package/dist/notification-bell.js.map +1 -1
- package/dist/overlays.js +2 -2
- package/dist/overlays.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 +2 -2
- package/dist/screen-flows.d.ts.map +1 -1
- package/dist/screen-flows.js +14 -13
- package/dist/screen-flows.js.map +1 -1
- package/dist/screens.d.ts +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/selection.d.ts.map +1 -1
- package/dist/selection.js +2 -2
- package/dist/selection.js.map +1 -1
- package/dist/styles.css +271 -125
- package/dist/styles.layered.css +271 -125
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +40 -4
- 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/top.js +1 -1
- package/dist/top.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 +3 -3
package/dist/styles.css
CHANGED
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
.hjm-text[data-variant="title"] { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
|
|
62
62
|
.hjm-text[data-variant="titleLarge"] { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
|
|
63
63
|
.hjm-text[data-variant="heading"] { font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); }
|
|
64
|
-
.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-
|
|
65
|
-
.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-
|
|
66
|
-
.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-
|
|
64
|
+
.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-text-emphasis-regular); }
|
|
65
|
+
.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-text-emphasis-medium); }
|
|
66
|
+
.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-text-emphasis-strong); }
|
|
67
67
|
.hjm-text[data-tone="primary"] { color: var(--hjm-color-text); }
|
|
68
68
|
.hjm-text[data-tone="body"] { color: var(--hjm-color-text-body); }
|
|
69
69
|
.hjm-text[data-tone="muted"] { color: var(--hjm-color-text-muted); }
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
border-radius: var(--hjm-radius-md);
|
|
162
162
|
color: var(--hjm-color-on-primary);
|
|
163
163
|
background: var(--hjm-color-primary);
|
|
164
|
-
font-weight: var(--hjm-
|
|
164
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
165
165
|
text-decoration: none;
|
|
166
166
|
transform: translateY(calc(-100% - (2 * var(--hjm-space-sm))));
|
|
167
167
|
transition: transform var(--hjm-motion-fast);
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
.hjm-icon-button,
|
|
214
214
|
.hjm-link {
|
|
215
215
|
font: inherit;
|
|
216
|
-
font-weight: var(--hjm-
|
|
216
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
217
217
|
transition: background-color var(--hjm-motion-fast), color var(--hjm-motion-fast), opacity var(--hjm-motion-fast), transform var(--hjm-motion-fast);
|
|
218
218
|
}
|
|
219
219
|
.hjm-button,
|
|
@@ -303,6 +303,23 @@
|
|
|
303
303
|
.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; }
|
|
304
304
|
.hjm-icon-button[data-size="small"]::after { content: ""; position: absolute; inset: calc(-1 * var(--hjm-space-xxs)); }
|
|
305
305
|
.hjm-icon-button[data-size="large"] { inline-size: var(--hjm-control-button-large); block-size: var(--hjm-control-button-large); }
|
|
306
|
+
/* Edge alignment (iconButtonRecipe.edge / resolveButtonEdgeOverhang, 2026-10-17 measured audit): a ghost control on a
|
|
307
|
+
container edge keeps its hit area but overhangs that edge, so its glyph slot or label sits on the inset like text.
|
|
308
|
+
Framed tones never get an overhang variable and stay put. Logical margins mirror in RTL. */
|
|
309
|
+
.hjm-icon-button[data-tone="ghost"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-medium); }
|
|
310
|
+
.hjm-icon-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-small); }
|
|
311
|
+
.hjm-icon-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-large); }
|
|
312
|
+
/* + 1px: every Web button keeps a 1px transparent frame border (.hjm-button above) inside which the padding starts;
|
|
313
|
+
Native ghost buttons have no border, so their overhang is the padding alone. */
|
|
314
|
+
.hjm-button[data-tone="ghost"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-medium) + 1px); }
|
|
315
|
+
.hjm-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-small) + 1px); }
|
|
316
|
+
.hjm-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-large) + 1px); }
|
|
317
|
+
:is(.hjm-icon-button, .hjm-button):is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
318
|
+
:is(.hjm-icon-button, .hjm-button):is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
319
|
+
/* NotificationBell wraps a default (ghost, medium) IconButton with a badge anchored to its own end, so the bell root
|
|
320
|
+
takes the same overhang and the badge keeps the icon's corner (2026-10-17 1.27.2 adoption: Spint's top-bar bell). */
|
|
321
|
+
.hjm-notification-bell:is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
322
|
+
.hjm-notification-bell:is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
306
323
|
.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; }
|
|
307
324
|
.hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
|
|
308
325
|
.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; }
|
|
@@ -322,12 +339,15 @@
|
|
|
322
339
|
outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
|
|
323
340
|
outline-offset: var(--hjm-focus-offset);
|
|
324
341
|
}
|
|
342
|
+
/* An edge-aligned control overhangs into the container padding, where an outer ring can be clipped by the container's
|
|
343
|
+
overflow (lists, cards); draw the ring inside its own box instead, as the Toast close does. */
|
|
344
|
+
:is(.hjm-icon-button, .hjm-button)[data-edge]:focus-visible, .hjm-notification-bell[data-edge] > .hjm-icon-button:focus-visible { outline-offset: calc(-1 * var(--hjm-focus-width)); }
|
|
325
345
|
|
|
326
346
|
/* Input interiors use the theme canvas (white in light mode), not tinted
|
|
327
347
|
surfaces. Focus and selection still use blue borders and compact indicators. */
|
|
328
348
|
.hjm-field {
|
|
329
349
|
font-family: var(--hjm-font-family-ui, inherit); display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
|
|
330
|
-
.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-
|
|
350
|
+
.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-text-emphasis-medium); }
|
|
331
351
|
.hjm-field__control {
|
|
332
352
|
display: flex;
|
|
333
353
|
align-items: center;
|
|
@@ -466,7 +486,7 @@
|
|
|
466
486
|
background: var(--hjm-color-bg);
|
|
467
487
|
font-size: var(--hjm-type-title-size);
|
|
468
488
|
line-height: var(--hjm-type-title-line-height);
|
|
469
|
-
font-weight: var(--hjm-
|
|
489
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
470
490
|
}
|
|
471
491
|
.hjm-otp-field__control[data-size="large"] .hjm-otp-field__slot { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
|
|
472
492
|
.hjm-otp-field__slot[data-state="filled"] { border-color: var(--hjm-color-content-brand); }
|
|
@@ -555,8 +575,8 @@
|
|
|
555
575
|
.hjm-bottom-navigation__indicator[data-state="selected"] > :first-child { transform: scale(1.06); }
|
|
556
576
|
/* Icon-only items center the indicator in the density's minimum height instead of leaving an empty label row. */
|
|
557
577
|
.hjm-bottom-navigation[data-labels="hidden"] .hjm-bottom-navigation__item { justify-content: center; }
|
|
558
|
-
.hjm-bottom-navigation__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-
|
|
559
|
-
.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-
|
|
578
|
+
.hjm-bottom-navigation__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
|
|
579
|
+
.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-semibold); }
|
|
560
580
|
.hjm-bottom-navigation__badge {
|
|
561
581
|
position: absolute;
|
|
562
582
|
inset-block-start: calc(-1 * var(--hjm-space-xxs));
|
|
@@ -766,9 +786,9 @@
|
|
|
766
786
|
.hjm-choice[data-state="mixed"] .hjm-choice__indicator::after, .hjm-choice__indicator[data-state="mixed"]::after { content: ""; inline-size: 10px; block-size: 2px; background: var(--hjm-color-on-primary); }
|
|
767
787
|
.hjm-choice__copy { display: grid; gap: var(--hjm-space-xxs); padding-block: 2px; }
|
|
768
788
|
.hjm-choice[data-state="checked"] .hjm-choice__copy > :first-child,
|
|
769
|
-
.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-
|
|
789
|
+
.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-semibold); }
|
|
770
790
|
.hjm-radio-group { min-inline-size: 0; padding: 0; border: 0; }
|
|
771
|
-
.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-
|
|
791
|
+
.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
|
|
772
792
|
.hjm-radio-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
773
793
|
.hjm-radio-group[data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-xxs); }
|
|
774
794
|
.hjm-radio-group[data-presentation="grouped"] .hjm-radio-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
|
|
@@ -776,7 +796,7 @@
|
|
|
776
796
|
.hjm-radio-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-sm); }
|
|
777
797
|
.hjm-radio-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-radio-group__items { gap: 0; }
|
|
778
798
|
.hjm-checkbox-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
779
|
-
.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-
|
|
799
|
+
.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
|
|
780
800
|
.hjm-checkbox-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
781
801
|
.hjm-checkbox-group[data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-xxs); }
|
|
782
802
|
.hjm-checkbox-group[data-presentation="grouped"] .hjm-checkbox-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
|
|
@@ -798,8 +818,9 @@
|
|
|
798
818
|
.hjm-switch__copy { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
|
|
799
819
|
.hjm-switch__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
800
820
|
.hjm-switch[data-presentation="row"] { display: flex; inline-size: 100%; justify-content: space-between; }
|
|
801
|
-
/* switchRecipe.
|
|
802
|
-
|
|
821
|
+
/* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
|
|
822
|
+
Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
|
|
823
|
+
.hjm-switch[data-two-line="true"] { min-block-size: var(--hjm-switch-row-two-line-min-height); padding-block: var(--hjm-switch-row-padding-vertical); }
|
|
803
824
|
.hjm-switch[data-presentation="row"] .hjm-switch__copy { order: -1; flex: 1; }
|
|
804
825
|
/* Inherited layout variables reset at nested providers and keep ./selection independent. */
|
|
805
826
|
.hjm-root { --hjm-switch-row-direction: row; --hjm-switch-row-align: center; --hjm-switch-copy-flex: 1; }
|
|
@@ -820,15 +841,24 @@
|
|
|
820
841
|
/* margin: 0 resets the UA fieldset 2px inline margin (as the other HJM fieldsets do); it offset the track from the parent edges. */
|
|
821
842
|
.hjm-segmented { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
822
843
|
/* segmentedControlRecipe (2026-10-06 follow-up): track padding/gap spacing.xxs 4, radius lg, 1px border; item radius md,
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
844
|
+
padding md (medium) / sm (small). Web had drawn a 2px track with radius md, no small size, and a 1px selected ring;
|
|
845
|
+
Native already read the recipe. */
|
|
846
|
+
/* 2026-10-17 ("높이 맞춰"): the connected control's OUTER height is the Button/Chip height of its size
|
|
847
|
+
(--hjm-segmented-height, segmentedControlRecipe.sizes.height); options get that minus the 4 padding + 1 border on
|
|
848
|
+
each side and reach the 44 target with an invisible vertical ::after. The scroller sits outside the drawn track and
|
|
849
|
+
reaches past a short track by negative margin, so neither the hit area is clipped nor the layout grows. */
|
|
850
|
+
.hjm-segmented { --hjm-segmented-height: var(--hjm-control-button-medium); }
|
|
851
|
+
.hjm-segmented[data-size="small"] { --hjm-segmented-height: var(--hjm-control-button-small); }
|
|
852
|
+
.hjm-segmented__scroller { min-inline-size: 0; overflow-x: auto; }
|
|
853
|
+
.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__scroller { --hjm-segmented-outer-slop: max(0px, (var(--hjm-control-min-touch-target) - var(--hjm-segmented-height)) / 2); padding-block: var(--hjm-segmented-outer-slop); margin-block: calc(-1 * var(--hjm-segmented-outer-slop)); }
|
|
854
|
+
.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__items { inline-size: max-content; min-inline-size: 100%; }
|
|
855
|
+
.hjm-segmented__items { display: flex; min-inline-size: 0; gap: var(--hjm-space-xxs); padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
|
|
856
|
+
.hjm-segmented__item { position: relative; flex: 1 1 0; min-inline-size: max-content; min-block-size: calc(var(--hjm-segmented-height) - 2 * (var(--hjm-space-xxs) + 1px)); display: grid; place-items: center; gap: var(--hjm-space-xxs); padding: 0 var(--hjm-space-md); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
|
|
857
|
+
.hjm-segmented[data-size="small"]:not([data-presentation="pills"]) .hjm-segmented__item { padding-inline: var(--hjm-space-sm); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
|
|
828
858
|
/* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
|
|
829
|
-
.hjm-segmented[data-
|
|
859
|
+
.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; }
|
|
830
860
|
.hjm-segmented__item input { position: absolute; opacity: 0; }
|
|
831
|
-
.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-
|
|
861
|
+
.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); }
|
|
832
862
|
.hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
|
|
833
863
|
|
|
834
864
|
/* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
|
|
@@ -839,17 +869,19 @@
|
|
|
839
869
|
Pills are excluded (segmentedControlRecipe.pills.largeTextLayout "wrap", 1.13.1): they wrap in a block and
|
|
840
870
|
stay one line in a scroll rail. Stacking them turned a filter rail into a tall column (utilverse, 2026-10-06). */
|
|
841
871
|
@media (max-width: 11em) {
|
|
842
|
-
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
|
|
843
|
-
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
|
|
872
|
+
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
|
|
873
|
+
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; min-block-size: var(--hjm-control-min-touch-target); }
|
|
874
|
+
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
|
|
844
875
|
}
|
|
845
|
-
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
|
|
846
|
-
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
|
|
876
|
+
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
|
|
877
|
+
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; min-block-size: var(--hjm-control-min-touch-target); }
|
|
878
|
+
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
|
|
847
879
|
|
|
848
880
|
.hjm-tabs { min-inline-size: 0; }
|
|
849
881
|
.hjm-tabs__list { display: flex; gap: var(--hjm-space-xs); min-inline-size: 0; overflow-x: auto; border-block-end: 1px solid var(--hjm-color-border); }
|
|
850
882
|
.hjm-tabs[data-overflow="clip"] .hjm-tabs__list { overflow: hidden; }
|
|
851
883
|
.hjm-tabs[data-layout="fitted"] .hjm-tabs__tab { flex: 1 1 0; }
|
|
852
|
-
.hjm-tabs__tab { position: relative; min-block-size: 48px; padding: var(--hjm-space-xs) var(--hjm-space-md); border: 0; color: var(--hjm-color-text-muted); background: transparent; font: inherit; font-weight: var(--hjm-
|
|
884
|
+
.hjm-tabs__tab { position: relative; min-block-size: 48px; padding: var(--hjm-space-xs) var(--hjm-space-md); border: 0; color: var(--hjm-color-text-muted); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); white-space: nowrap; cursor: pointer; }
|
|
853
885
|
.hjm-tabs[data-size="small"] .hjm-tabs__tab { min-block-size: 44px; padding-inline: var(--hjm-space-sm); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
|
|
854
886
|
.hjm-tabs__leading { display: inline-flex; flex: 0 0 auto; align-items: center; margin-inline-end: var(--hjm-space-xs); }
|
|
855
887
|
.hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
|
|
@@ -864,7 +896,7 @@
|
|
|
864
896
|
.hjm-tabs[data-orientation="vertical"] .hjm-tabs__tab[data-state="selected"]::after { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: 2px; block-size: auto; }
|
|
865
897
|
|
|
866
898
|
.hjm-badge, .hjm-tag { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; overflow-wrap: anywhere; }
|
|
867
|
-
.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-
|
|
899
|
+
.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
|
|
868
900
|
.hjm-badge[data-size="small"] { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); } /* badgeRecipe.sizes.small.paddingHorizontal xxs 4 (2026-10-06; Web had kept medium's 8) */
|
|
869
901
|
.hjm-badge[data-tone="strong"] { color: var(--hjm-color-bg); background: var(--hjm-color-text); border-color: transparent; } /* neutral/brand plates are canvas-white and need badgeRecipe's border to stay visible (2026-10-17) */
|
|
870
902
|
.hjm-badge[data-tone="brand"] { color: var(--hjm-color-content-brand); }
|
|
@@ -880,7 +912,7 @@
|
|
|
880
912
|
.hjm-badge[data-variant="outline"][data-tone="warning"] { border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
|
|
881
913
|
.hjm-badge[data-variant="outline"][data-tone="attention"] { border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
|
|
882
914
|
.hjm-badge[data-variant="outline"][data-tone="danger"] { border-color: color-mix(in srgb, var(--hjm-color-danger) 30%, transparent); }
|
|
883
|
-
.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-
|
|
915
|
+
.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
|
|
884
916
|
.hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
885
917
|
.hjm-tag[data-tone="info"] { background: var(--hjm-color-bg); }
|
|
886
918
|
.hjm-tag[data-tone="success"] { background: color-mix(in srgb, var(--hjm-accent-success) 10%, transparent); }
|
|
@@ -896,7 +928,7 @@
|
|
|
896
928
|
.hjm-icon[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
897
929
|
.hjm-icon[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
|
|
898
930
|
/* Counts must not flex-shrink below their text and padding in narrow rows. */
|
|
899
|
-
.hjm-counter-badge { flex-shrink: 0; display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-
|
|
931
|
+
.hjm-counter-badge { flex-shrink: 0; display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
|
|
900
932
|
.hjm-counter-badge[data-size="small"] { min-inline-size: 16px; block-size: 16px; padding-inline: var(--hjm-space-xxs); }
|
|
901
933
|
.hjm-counter-badge[data-tone="brand"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
|
|
902
934
|
.hjm-counter-badge[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
|
|
@@ -911,31 +943,53 @@
|
|
|
911
943
|
.hjm-card__header { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); min-inline-size: 0; }
|
|
912
944
|
.hjm-card__leading { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; }
|
|
913
945
|
.hjm-card__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
|
|
914
|
-
.
|
|
946
|
+
/* cardRecipe.title.emphasis "strong": without a weight the h2–h6 element fell back to the UA bold (700). */
|
|
947
|
+
.hjm-card__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-text-emphasis-strong); overflow-wrap: anywhere; }
|
|
915
948
|
.hjm-card__description { margin: 0; overflow-wrap: anywhere; }
|
|
916
949
|
.hjm-card__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-md) var(--hjm-space-md); }
|
|
917
950
|
/* Row rhythm reads the recipe density variables so the stylesheet does not
|
|
918
951
|
carry a second copy of the same numbers. */
|
|
919
|
-
|
|
952
|
+
/* Inline placement (listRowRecipe.surfaceBleed, 2026-10-17 user decision): the row text sits on the container's content
|
|
953
|
+
edge and the row box — hover/pressed/selected fill, focus ring, hit area — bleeds outward by the density's inline
|
|
954
|
+
padding. The padding used to sit inside the container's content box, so row text started at 16 + 8 = 24 while section
|
|
955
|
+
titles and result headers started at 16. Containers need that much inline room (screen gutter, card/sheet padding). */
|
|
956
|
+
.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; }
|
|
920
957
|
button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
921
958
|
.hjm-list-row[data-lines="two"] { min-block-size: var(--hjm-list-row-comfortable-two-line); }
|
|
922
|
-
.hjm-list-row[data-density="compact"] {
|
|
959
|
+
.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); }
|
|
923
960
|
.hjm-list-row[data-density="compact"][data-lines="two"] { min-block-size: var(--hjm-list-row-compact-two-line); }
|
|
924
961
|
/* The two wider steps read the same generated variables; no numbers here. */
|
|
925
|
-
.hjm-list-row[data-density="relaxed"] {
|
|
962
|
+
.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); }
|
|
926
963
|
.hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
|
|
927
|
-
.hjm-list-row[data-density="spacious"] {
|
|
964
|
+
.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); }
|
|
928
965
|
.hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
|
|
929
966
|
.hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
930
967
|
.hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
968
|
+
/* trailingAction: one surface for the row command and its separate action, as Native. The frame takes the bleed; the
|
|
969
|
+
command keeps the start padding and the action the end padding, so the action box ends on the content edge (an
|
|
970
|
+
`edge="end"` IconButton then puts its glyph on that line). */
|
|
971
|
+
.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)); }
|
|
972
|
+
.hjm-list-row-frame[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); }
|
|
973
|
+
.hjm-list-row-frame[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); }
|
|
974
|
+
.hjm-list-row-frame[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); }
|
|
975
|
+
.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
976
|
+
.hjm-list-row-frame[data-state="disabled"] { opacity: 0.5; }
|
|
977
|
+
.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; }
|
|
978
|
+
.hjm-list-row-frame > .hjm-list-row[data-state] { background: transparent; box-shadow: none; opacity: 1; }
|
|
979
|
+
.hjm-list-row-frame > .hjm-list-row[data-state="disabled"] { cursor: not-allowed; }
|
|
980
|
+
.hjm-list-row__action { flex: 0 0 auto; display: flex; align-items: center; padding-inline-end: var(--hjm-list-row-inline); }
|
|
931
981
|
.hjm-list-row__leading, .hjm-list-row__trailing { flex: 0 0 auto; }
|
|
982
|
+
/* Trailing was a blockified span, so an inline svg/switch sat on the text
|
|
983
|
+
baseline 2–2.5px above the row center (2026-10-17 measured audit); a flex
|
|
984
|
+
box centers any trailing node like Native's row-centered View. */
|
|
985
|
+
.hjm-list-row__trailing { display: flex; align-items: center; }
|
|
932
986
|
/* `leadingSize` was declared by the recipe but unbound, so consumers rebuilt
|
|
933
987
|
the avatar box in product styles. */
|
|
934
988
|
.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; }
|
|
935
989
|
.hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
|
|
936
990
|
.hjm-list-row__content { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
937
991
|
/* listRowRecipe title bodyLarge / description body (2026-10-17: Web inherited 14 for both while Native used the recipe). */
|
|
938
|
-
.hjm-list-row__title { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-
|
|
992
|
+
.hjm-list-row__title { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
|
|
939
993
|
.hjm-list-row[data-tone="danger"] .hjm-list-row__title { color: var(--hjm-color-danger); }
|
|
940
994
|
.hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
941
995
|
.hjm-list-row__description { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
|
|
@@ -945,7 +999,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
945
999
|
.hjm-section__copy { display: grid; flex: 1 1 auto; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
946
1000
|
/* sectionRecipe.title is the `title` variant (18/26 bold) and description the `caption` variant (11/16), as Native draws them.
|
|
947
1001
|
Until 2026-10-06 Web inherited body (14) for both, so the same Section header was smaller on Web. */
|
|
948
|
-
.hjm-section__title { margin: 0; color: var(--hjm-color-text-body); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-
|
|
1002
|
+
.hjm-section__title { margin: 0; color: var(--hjm-color-text-body); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
|
|
949
1003
|
.hjm-section__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); overflow-wrap: anywhere; }
|
|
950
1004
|
.hjm-section__action { flex: 0 0 auto; }
|
|
951
1005
|
.hjm-section__content { min-inline-size: 0; }
|
|
@@ -961,7 +1015,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
961
1015
|
recipe-only sizes as custom properties so theme.ts does not pull this opt-in contract into every graph. */
|
|
962
1016
|
/* fit-content: a column Stack stretched the pill to its max width with empty space after the label; Native sizes it
|
|
963
1017
|
to its content (2026-10-17 review F N13). Unlike align-self it keeps vertical centering in a TopBar row. */
|
|
964
|
-
.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); inline-size: fit-content; max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-
|
|
1018
|
+
.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); inline-size: fit-content; max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
|
|
965
1019
|
/* Without media the pill keeps the symmetric label inset; the media hugs the start edge like an avatar chip. */
|
|
966
1020
|
.hjm-activity-chip:not([data-media]) { padding-inline-start: var(--hjm-space-sm); }
|
|
967
1021
|
.hjm-activity-chip[data-emphasis="emphasis"] { border-color: var(--hjm-color-primary); color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
|
|
@@ -970,7 +1024,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
970
1024
|
.hjm-activity-chip__media { flex: none; display: grid; place-items: center; inline-size: var(--hjm-activity-chip-media-size); block-size: var(--hjm-activity-chip-media-size); overflow: hidden; border-radius: 50%; }
|
|
971
1025
|
.hjm-activity-chip__media > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: contain; }
|
|
972
1026
|
.hjm-activity-chip__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
973
|
-
.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-
|
|
1027
|
+
.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; }
|
|
974
1028
|
.hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
|
|
975
1029
|
.hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
|
|
976
1030
|
.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
|
|
@@ -979,14 +1033,21 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
979
1033
|
.hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
|
|
980
1034
|
.hjm-chip__label { overflow-wrap: anywhere; }
|
|
981
1035
|
|
|
982
|
-
|
|
983
|
-
|
|
1036
|
+
/* A plain list does not clip: its rows bleed their surface into the container inset (listRowRecipe.surfaceBleed).
|
|
1037
|
+
A grouped list clips to its rounded surface, so it keeps that bleed as inline padding (listRecipe.grouped). */
|
|
1038
|
+
.hjm-list { min-inline-size: 0; }
|
|
1039
|
+
.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); }
|
|
984
1040
|
.hjm-list__item { min-inline-size: 0; }
|
|
985
|
-
.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item { border-block-start: 1px solid var(--hjm-color-border); }
|
|
986
1041
|
/* Indent only the divider: moving the row shifted every title after the first
|
|
987
|
-
and narrowed its text column in the notification-settings composition.
|
|
988
|
-
|
|
989
|
-
|
|
1042
|
+
and narrowed its text column in the notification-settings composition. Insets are measured from the list content
|
|
1043
|
+
edge (where the row text sits) and come from listRecipe.separators: full spans the row surface; indented follows
|
|
1044
|
+
the text column of the row above (the separator belongs to that row, as Native draws it after the row) — 52 after a
|
|
1045
|
+
row with leading (ListRow root `data-leading`), 0 after one without, ending on the content edge (2026-10-17). */
|
|
1046
|
+
.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item { position: relative; }
|
|
1047
|
+
.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; }
|
|
1048
|
+
.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); }
|
|
1049
|
+
.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); }
|
|
1050
|
+
.hjm-list[data-separator="indented"] > .hjm-list__item:has(> [data-leading]) + .hjm-list__item::before { inset-inline-start: var(--hjm-list-separator-indented-leading-start); }
|
|
990
1051
|
|
|
991
1052
|
/* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
|
|
992
1053
|
group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
|
|
@@ -998,14 +1059,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
998
1059
|
(compact `title`) heavy, affix `body` semibold in content.body, hint and trend `caption` (trend bold). Until 2026-10-06
|
|
999
1060
|
Web drew a body-size medium label, a title-size value at both densities (scaled twice by --hjm-text-scale, which the
|
|
1000
1061
|
--hjm-type-* sizes already include) and muted affixes. */
|
|
1001
|
-
.hjm-statistic__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-
|
|
1062
|
+
.hjm-statistic__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
1002
1063
|
.hjm-statistic[data-density="compact"] .hjm-statistic__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
1003
1064
|
.hjm-statistic__value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
1004
|
-
.hjm-statistic__value { color: var(--hjm-color-text); font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); font-weight: var(--hjm-font-weight-
|
|
1065
|
+
.hjm-statistic__value { color: var(--hjm-color-text); font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); font-weight: var(--hjm-font-weight-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
1005
1066
|
.hjm-statistic[data-density="compact"] .hjm-statistic__value { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
|
|
1006
|
-
.hjm-statistic__affix { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); font-weight: var(--hjm-
|
|
1067
|
+
.hjm-statistic__affix { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1007
1068
|
.hjm-statistic__hint { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
1008
|
-
.hjm-statistic__trend { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-
|
|
1069
|
+
.hjm-statistic__trend { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
1009
1070
|
.hjm-statistic__trend[data-tone="success"] { color: var(--hjm-accent-success); }
|
|
1010
1071
|
.hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-accent-warning); }
|
|
1011
1072
|
.hjm-statistic__trend[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
@@ -1022,20 +1083,30 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1022
1083
|
.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)); }
|
|
1023
1084
|
/* Reserve readable copy; wrap the action instead of crushing its label. */
|
|
1024
1085
|
.hjm-notice__content { flex: 1 1 60%; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
1086
|
+
/* First-line anchor (2026-10-17 measured audit): the inline action (contract: Button size="small") centered 8px
|
|
1087
|
+
below the title's first line and the icon box had no rule at all. Icon, first line and action now share one
|
|
1088
|
+
anchor — the line box (1lh) alone, or the small-button height when an action sits on the row. Extra lines
|
|
1089
|
+
grow downward; Native keeps the action under the copy (docs/usage/components/notice.md). */
|
|
1090
|
+
.hjm-notice { --hjm-notice-anchor: 1lh; }
|
|
1091
|
+
.hjm-notice:has(> .hjm-notice__action) { --hjm-notice-anchor: var(--hjm-control-button-small); }
|
|
1092
|
+
.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); }
|
|
1093
|
+
.hjm-notice__content > :first-child { margin-block-start: calc((var(--hjm-notice-anchor) - 1lh) / 2); }
|
|
1025
1094
|
.hjm-notice__action { flex: 0 0 auto; max-inline-size: 100%; }
|
|
1026
1095
|
.hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
|
|
1096
|
+
/* noticeRecipe/emptyStateRecipe title weight; the <strong> otherwise draws the UA bold (700). */
|
|
1097
|
+
.hjm-notice__title { font-weight: var(--hjm-type-title-weight); }
|
|
1027
1098
|
|
|
1028
1099
|
/* emptyStateRecipe.density.regular paddingVertical xxxl 40 (2026-10-06; Web had xxl 32, Native read the recipe). */
|
|
1029
1100
|
/* Like Native, a regular empty state fills the rest of a flex host and centers in it; compact (cards, sheets) stays content-high. */
|
|
1030
1101
|
.hjm-empty-state { display: grid; flex-grow: 1; align-content: center; justify-items: center; gap: var(--hjm-space-xs); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); color: var(--hjm-color-text-muted); text-align: center; }
|
|
1031
1102
|
.hjm-empty-state[data-density="compact"] { flex-grow: 0; padding-block: var(--hjm-space-xl); }
|
|
1032
|
-
.hjm-empty-state__title { color: var(--hjm-color-text); }
|
|
1103
|
+
.hjm-empty-state__title { color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); }
|
|
1033
1104
|
.hjm-result { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); text-align: center; }
|
|
1034
|
-
.hjm-result__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--hjm-radius-full); font-size: 1.5rem; font-weight: var(--hjm-
|
|
1105
|
+
.hjm-result__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--hjm-radius-full); font-size: 1.5rem; font-weight: var(--hjm-text-emphasis-medium); }
|
|
1035
1106
|
.hjm-result[data-status="success"] .hjm-result__icon { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 12%, transparent); }
|
|
1036
1107
|
.hjm-result[data-status="failure"] .hjm-result__icon { color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 12%, transparent); }
|
|
1037
1108
|
.hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: var(--hjm-color-bg); }
|
|
1038
|
-
.hjm-result__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); overflow-wrap: anywhere; }
|
|
1109
|
+
.hjm-result__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); font-weight: var(--hjm-type-title-large-weight); overflow-wrap: anywhere; }
|
|
1039
1110
|
.hjm-result__description { max-inline-size: 40rem; margin: 0; color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
1040
1111
|
.hjm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-xs); }
|
|
1041
1112
|
.hjm-progress { display: grid; gap: var(--hjm-space-xs); }
|
|
@@ -1101,7 +1172,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1101
1172
|
.hjm-list-row--loading [data-placeholder] {
|
|
1102
1173
|
display: block;
|
|
1103
1174
|
border-radius: var(--hjm-radius-sm);
|
|
1104
|
-
background: var(--hjm-
|
|
1175
|
+
background: var(--hjm-skeleton-background); /* same placeholder fill as Skeleton */
|
|
1105
1176
|
}
|
|
1106
1177
|
.hjm-list-row--loading .hjm-list-row__title[data-placeholder] {
|
|
1107
1178
|
block-size: var(--hjm-type-body-large-line-height);
|
|
@@ -1109,7 +1180,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1109
1180
|
.hjm-list-row--loading .hjm-list-row__description[data-placeholder] {
|
|
1110
1181
|
block-size: var(--hjm-type-body-line-height);
|
|
1111
1182
|
}
|
|
1112
|
-
.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-
|
|
1183
|
+
.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-skeleton-background); }
|
|
1113
1184
|
.hjm-list-row--loading .hjm-list-row__trailing[data-placeholder] { block-size: var(--hjm-type-caption-line-height); }
|
|
1114
1185
|
.hjm-spinner { display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-content-brand); }
|
|
1115
1186
|
.hjm-spinner[data-tone="neutral"] { color: var(--hjm-color-text-muted); }
|
|
@@ -1117,10 +1188,15 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1117
1188
|
.hjm-spinner[data-size="small"] { font-size: 14px; }
|
|
1118
1189
|
.hjm-spinner[data-size="medium"] { font-size: 20px; }
|
|
1119
1190
|
.hjm-spinner[data-size="large"] { font-size: 28px; }
|
|
1120
|
-
|
|
1191
|
+
/* Filled placeholder (recipe background, 2026-10-17): a canvas fill + hairline was invisible on white. */
|
|
1192
|
+
.hjm-skeleton { display: block; inline-size: 100%; min-block-size: var(--hjm-space-xxl); border-radius: var(--hjm-radius-md); background: var(--hjm-skeleton-background); }
|
|
1121
1193
|
.hjm-skeleton[data-shape="text"] { min-block-size: var(--hjm-space-md); border-radius: var(--hjm-radius-sm); }
|
|
1122
|
-
.hjm-skeleton[data-shape="circle"] { inline-size: var(--hjm-skeleton-circle-size); block-size: var(--hjm-skeleton-circle-size); border-radius: var(--hjm-radius-full); }
|
|
1123
|
-
.hjm-skeleton[data-
|
|
1194
|
+
.hjm-skeleton[data-shape="circle"] { flex: none; inline-size: var(--hjm-skeleton-circle-size); block-size: var(--hjm-skeleton-circle-size); border-radius: var(--hjm-radius-full); }
|
|
1195
|
+
.hjm-skeleton[data-shape="media"] { min-block-size: 0; aspect-ratio: var(--hjm-skeleton-media-aspect); }
|
|
1196
|
+
.hjm-skeleton[data-shape="button"] { min-block-size: var(--hjm-skeleton-button-height); }
|
|
1197
|
+
.hjm-skeleton-lines { display: flex; flex-direction: column; gap: var(--hjm-skeleton-lines-gap); inline-size: 100%; }
|
|
1198
|
+
.hjm-skeleton-lines > [data-last] { inline-size: var(--hjm-skeleton-last-line-width); }
|
|
1199
|
+
.hjm-skeleton[data-animated="true"], .hjm-skeleton-lines[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
|
|
1124
1200
|
|
|
1125
1201
|
/* CommandPalette ---------------------------------------------------------- */
|
|
1126
1202
|
/*
|
|
@@ -1185,7 +1261,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1185
1261
|
}
|
|
1186
1262
|
.hjm-data-table[data-density="compact"] .hjm-data-table__table th,
|
|
1187
1263
|
.hjm-data-table[data-density="compact"] .hjm-data-table__table td { padding: var(--hjm-space-xs) var(--hjm-space-sm); }
|
|
1188
|
-
.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-
|
|
1264
|
+
.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1189
1265
|
.hjm-data-table__selector { inline-size: var(--hjm-control-min-touch-target); }
|
|
1190
1266
|
.hjm-data-table__sort {
|
|
1191
1267
|
display: inline-flex;
|
|
@@ -1226,7 +1302,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1226
1302
|
.hjm-data-table__table .hjm-data-table__pinned { position: sticky; z-index: 1; background: var(--hjm-color-bg); }
|
|
1227
1303
|
.hjm-data-table__table .hjm-data-table__pinned-edge { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
|
|
1228
1304
|
.hjm-data-table__table .hjm-data-table__pinned-edge:dir(rtl) { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
|
|
1229
|
-
.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-
|
|
1305
|
+
.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-text-emphasis-medium); }
|
|
1230
1306
|
|
|
1231
1307
|
/* DataTable family (2026-10-14): header bands, row groups, sub-row indent, tone/heat, bounded
|
|
1232
1308
|
height. Colors mirror dataTableFamilyRecipe; heat is a background-image so pinned cells keep
|
|
@@ -1240,7 +1316,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1240
1316
|
background: var(--hjm-color-surface-alt);
|
|
1241
1317
|
color: var(--hjm-color-text-muted);
|
|
1242
1318
|
font-size: var(--hjm-type-label-size);
|
|
1243
|
-
font-weight: var(--hjm-
|
|
1319
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
1244
1320
|
text-align: start;
|
|
1245
1321
|
}
|
|
1246
1322
|
/* The label stays in view while a wide table scrolls sideways. */
|
|
@@ -1257,37 +1333,37 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1257
1333
|
.hjm-table-family { min-inline-size: 0; overflow-x: auto; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
|
|
1258
1334
|
.hjm-line-score__table, .hjm-matrix-table__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
|
|
1259
1335
|
.hjm-line-score__table th, .hjm-line-score__table td { padding: var(--hjm-space-xs) var(--hjm-space-xxs); text-align: center; white-space: nowrap; }
|
|
1260
|
-
.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
1261
|
-
.hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-
|
|
1336
|
+
.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1337
|
+
.hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1262
1338
|
.hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
|
|
1263
|
-
.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-
|
|
1339
|
+
.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
|
|
1264
1340
|
.hjm-line-score { --hjm-line-score-total-width: 30px; scroll-padding-inline-end: calc(var(--hjm-line-score-total-width) * var(--hjm-line-score-total-count, 0)); }
|
|
1265
1341
|
.hjm-line-score__table .hjm-line-score__team, .hjm-line-score__table .hjm-line-score__total { position: sticky; z-index: 1; background: var(--hjm-color-surface); }
|
|
1266
1342
|
.hjm-line-score__table .hjm-line-score__team { inset-inline-start: 0; }
|
|
1267
1343
|
.hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
|
|
1268
|
-
.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1344
|
+
.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1269
1345
|
.hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
|
|
1270
1346
|
.hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
|
|
1271
|
-
.hjm-line-score__total { inline-size: var(--hjm-line-score-total-width); min-inline-size: var(--hjm-line-score-total-width); color: var(--hjm-color-text-muted); font-weight: var(--hjm-
|
|
1347
|
+
.hjm-line-score__total { inline-size: var(--hjm-line-score-total-width); min-inline-size: var(--hjm-line-score-total-width); color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1272
1348
|
/* A collapsed-table border stays with the table, not the pinned cell, so the edge is an inset shadow. */
|
|
1273
1349
|
.hjm-line-score__total-edge { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
|
|
1274
1350
|
.hjm-line-score__total-edge:dir(rtl) { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
|
|
1275
|
-
.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-
|
|
1351
|
+
.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
|
|
1276
1352
|
.hjm-matrix-table__table th, .hjm-matrix-table__table td { padding: var(--hjm-space-xs); text-align: center; white-space: nowrap; border-block-start: 1px solid var(--hjm-color-border); }
|
|
1277
|
-
.hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
1278
|
-
.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1353
|
+
.hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1354
|
+
.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); border-inline-end: 1px solid var(--hjm-color-border); }
|
|
1279
1355
|
.hjm-matrix-table__table td { color: var(--hjm-color-text-muted); }
|
|
1280
1356
|
.hjm-matrix-table__table thead td { border-block-start: 0; }
|
|
1281
1357
|
.hjm-matrix-table__self { background: var(--hjm-color-surface-alt); }
|
|
1282
1358
|
.hjm-matrix-table__table tr[data-highlighted] > * { background-color: var(--hjm-table-family-selected); }
|
|
1283
1359
|
.hjm-comparison-table { padding-block: var(--hjm-space-xs); }
|
|
1284
|
-
.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-
|
|
1360
|
+
.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1285
1361
|
.hjm-comparison-table__rows { margin: 0; padding: 0; list-style: none; }
|
|
1286
1362
|
.hjm-comparison-table__row { display: grid; gap: var(--hjm-space-xs); padding: var(--hjm-space-sm) var(--hjm-space-md); border-block-start: 1px solid var(--hjm-color-border); }
|
|
1287
1363
|
.hjm-comparison-table__rows:first-child > :first-child { border-block-start: 0; }
|
|
1288
1364
|
.hjm-comparison-table__values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--hjm-space-sm); font-variant-numeric: tabular-nums; color: var(--hjm-color-text-sub); }
|
|
1289
1365
|
.hjm-comparison-table__values > :last-child { text-align: end; }
|
|
1290
|
-
.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1366
|
+
.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1291
1367
|
.hjm-comparison-table__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); }
|
|
1292
1368
|
.hjm-comparison-table__bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hjm-space-sm); block-size: 5px; }
|
|
1293
1369
|
.hjm-comparison-table__track { display: flex; justify-content: flex-end; border-radius: 2px; background: var(--hjm-color-surface-alt); overflow: hidden; }
|
|
@@ -1313,8 +1389,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1313
1389
|
.hjm-chart__cursor { stroke: var(--hjm-chart-axis-label); }
|
|
1314
1390
|
.hjm-chart__dot { stroke: var(--hjm-color-bg); }
|
|
1315
1391
|
.hjm-chart__label { fill: var(--hjm-chart-axis-label); font-family: inherit; font-size: var(--hjm-type-caption-size); }
|
|
1316
|
-
.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-
|
|
1317
|
-
.hjm-chart__extreme { font-weight: var(--hjm-
|
|
1392
|
+
.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1393
|
+
.hjm-chart__extreme { font-weight: var(--hjm-text-emphasis-medium); }
|
|
1318
1394
|
.hjm-chart__bubble {
|
|
1319
1395
|
position: absolute;
|
|
1320
1396
|
inset-block-start: 0;
|
|
@@ -1326,7 +1402,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1326
1402
|
color: var(--hjm-chart-tooltip-content);
|
|
1327
1403
|
font-size: var(--hjm-type-caption-size);
|
|
1328
1404
|
line-height: var(--hjm-type-caption-line-height);
|
|
1329
|
-
font-weight: var(--hjm-
|
|
1405
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
1330
1406
|
white-space: nowrap;
|
|
1331
1407
|
pointer-events: none;
|
|
1332
1408
|
}
|
|
@@ -1334,7 +1410,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1334
1410
|
.hjm-chart__pie-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
|
|
1335
1411
|
.hjm-chart__slice[role="button"], .hjm-chart--pie .hjm-chart__slice[data-id] { cursor: pointer; }
|
|
1336
1412
|
.hjm-chart__slice:focus-visible { outline: none; stroke: var(--hjm-color-focus); stroke-width: var(--hjm-focus-width); }
|
|
1337
|
-
.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-
|
|
1413
|
+
.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1338
1414
|
.hjm-chart__axis-titles { display: flex; justify-content: space-between; color: var(--hjm-chart-axis-label); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
1339
1415
|
.hjm-chart-legend {
|
|
1340
1416
|
display: flex;
|
|
@@ -1367,7 +1443,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1367
1443
|
.hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
|
|
1368
1444
|
.hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
|
|
1369
1445
|
.hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
|
|
1370
|
-
.hjm-chart-legend__value { font-weight: var(--hjm-
|
|
1446
|
+
.hjm-chart-legend__value { font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
|
|
1371
1447
|
|
|
1372
1448
|
/* Mentions ---------------------------------------------------------------- */
|
|
1373
1449
|
/*
|
|
@@ -1428,7 +1504,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1428
1504
|
padding-inline: var(--hjm-space-sm);
|
|
1429
1505
|
border-block-end: 1px solid var(--hjm-color-border);
|
|
1430
1506
|
}
|
|
1431
|
-
.hjm-transfer-list__title { font-weight: var(--hjm-
|
|
1507
|
+
.hjm-transfer-list__title { font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
|
|
1432
1508
|
.hjm-transfer-list__select-all { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
|
|
1433
1509
|
/* These rows center the indicator, so drop the 2px top offset Checkbox uses to sit on its first text line. */
|
|
1434
1510
|
.hjm-transfer-list__select-all > .hjm-choice__indicator,
|
|
@@ -1681,6 +1757,42 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1681
1757
|
margin-block-start: var(--hjm-auth-screen-footer-gap);
|
|
1682
1758
|
text-align: center;
|
|
1683
1759
|
}
|
|
1760
|
+
/* 히어로 문구와 정책 링크(AuthScreenHero·AuthScreenFooter). 글자 단계·간격은 계약 값이다. */
|
|
1761
|
+
.hjm-auth-screen__copy { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
|
|
1762
|
+
.hjm-auth-screen__footer-content { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
|
|
1763
|
+
.hjm-auth-screen__links {
|
|
1764
|
+
display: flex;
|
|
1765
|
+
flex-wrap: wrap;
|
|
1766
|
+
justify-content: center;
|
|
1767
|
+
align-items: center;
|
|
1768
|
+
column-gap: var(--hjm-auth-screen-link-gap);
|
|
1769
|
+
}
|
|
1770
|
+
/* 2026-10-17 "간격 줄여": 보이는 간격은 gap + 구분점뿐이다. 44 터치 높이는 배경 없는 min-block-size,
|
|
1771
|
+
가로 터치 폭은 보이지 않는 가상 요소가 구분점 앞까지 넓힌다 — 버튼 안쪽 여백으로 만들면 글자 사이가 다시 벌어진다. */
|
|
1772
|
+
.hjm-auth-screen__link {
|
|
1773
|
+
position: relative;
|
|
1774
|
+
display: inline-flex;
|
|
1775
|
+
align-items: center;
|
|
1776
|
+
min-block-size: var(--hjm-auth-screen-link-target);
|
|
1777
|
+
margin: 0;
|
|
1778
|
+
padding: 0;
|
|
1779
|
+
border: 0;
|
|
1780
|
+
background: none;
|
|
1781
|
+
font-family: var(--hjm-font-family-ui, inherit);
|
|
1782
|
+
text-decoration: underline;
|
|
1783
|
+
text-underline-offset: 0.18em;
|
|
1784
|
+
cursor: pointer;
|
|
1785
|
+
}
|
|
1786
|
+
.hjm-auth-screen__link::after {
|
|
1787
|
+
content: "";
|
|
1788
|
+
position: absolute;
|
|
1789
|
+
inset-block: 0;
|
|
1790
|
+
inset-inline: calc(var(--hjm-auth-screen-link-gap) * -1);
|
|
1791
|
+
}
|
|
1792
|
+
.hjm-auth-screen__link:focus-visible {
|
|
1793
|
+
outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
|
|
1794
|
+
outline-offset: var(--hjm-focus-offset);
|
|
1795
|
+
}
|
|
1684
1796
|
|
|
1685
1797
|
/* Sidebar ----------------------------------------------------------------- */
|
|
1686
1798
|
.hjm-sidebar {
|
|
@@ -1730,7 +1842,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1730
1842
|
.hjm-sidebar__item[aria-current="page"] {
|
|
1731
1843
|
background: var(--hjm-color-bg);
|
|
1732
1844
|
color: var(--hjm-color-content-brand);
|
|
1733
|
-
font-weight: var(--hjm-
|
|
1845
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
1734
1846
|
box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
1735
1847
|
.hjm-sidebar__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
|
|
1736
1848
|
.hjm-sidebar__item:focus-visible,
|
|
@@ -1765,7 +1877,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1765
1877
|
border-color: var(--hjm-color-focus);
|
|
1766
1878
|
background: var(--hjm-color-bg);
|
|
1767
1879
|
color: var(--hjm-color-content-brand);
|
|
1768
|
-
font-weight: var(--hjm-
|
|
1880
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
1769
1881
|
}
|
|
1770
1882
|
.hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
|
|
1771
1883
|
.hjm-toggle-group__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2104,12 +2216,18 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2104
2216
|
title line-height or patched this private selector to achieve this alignment. */
|
|
2105
2217
|
.hjm-sheet__header { align-items: center; }
|
|
2106
2218
|
.hjm-sheet__header > div { min-inline-size: 0; }
|
|
2219
|
+
/* Sheets have no visible title (2026-10-17 user decision); a header holds only the description and/or ×,
|
|
2220
|
+
and the × stays at the inline end even when there is no description. */
|
|
2221
|
+
.hjm-sheet__header > div { flex: 1 1 auto; }
|
|
2222
|
+
.hjm-sheet__header > .hjm-dialog__close { margin-inline-start: auto; }
|
|
2223
|
+
/* Overlay titles render h2: without an explicit weight they fell back to the UA bold (700) instead of
|
|
2224
|
+
the recipe's title weight (2026-10-17 lighter scale). */
|
|
2107
2225
|
.hjm-dialog__title,
|
|
2108
|
-
.hjm-sheet__title,
|
|
2109
2226
|
.hjm-alert-dialog__title {
|
|
2110
2227
|
margin: 0;
|
|
2111
2228
|
font-size: var(--hjm-type-title-size);
|
|
2112
2229
|
line-height: var(--hjm-type-title-line-height);
|
|
2230
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2113
2231
|
overflow-wrap: anywhere;
|
|
2114
2232
|
}
|
|
2115
2233
|
.hjm-dialog__description,
|
|
@@ -2204,7 +2322,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2204
2322
|
}
|
|
2205
2323
|
.hjm-sheet__header,
|
|
2206
2324
|
.hjm-sheet__footer { flex: 0 0 auto; }
|
|
2207
|
-
|
|
2325
|
+
/* The header sits inside the drag zone (.hjm-sheet__drag, 2026-10-16), so a direct-child selector stopped matching and
|
|
2326
|
+
the Dialog's 20px top padding leaked in; scope by the sheet instead. */
|
|
2327
|
+
.hjm-sheet .hjm-sheet__header { min-block-size: var(--hjm-control-min-touch-target); gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-lg); }
|
|
2208
2328
|
.hjm-sheet > .hjm-sheet__footer { padding: var(--hjm-space-sm) var(--hjm-space-lg) 0; }
|
|
2209
2329
|
.hjm-sheet__body {
|
|
2210
2330
|
min-block-size: 0;
|
|
@@ -2297,6 +2417,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2297
2417
|
margin: 0;
|
|
2298
2418
|
font-size: var(--hjm-type-title-size);
|
|
2299
2419
|
line-height: var(--hjm-type-title-line-height);
|
|
2420
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2300
2421
|
overflow-wrap: anywhere;
|
|
2301
2422
|
}
|
|
2302
2423
|
.hjm-side-panel__description {
|
|
@@ -2349,7 +2470,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2349
2470
|
pointer-events: auto;
|
|
2350
2471
|
}
|
|
2351
2472
|
.hjm-tour__counter { margin: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
2352
|
-
.hjm-tour__title { margin: var(--hjm-space-xxs) 0 0; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); overflow-wrap: anywhere; }
|
|
2473
|
+
.hjm-tour__title { margin: var(--hjm-space-xxs) 0 0; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
|
|
2353
2474
|
.hjm-tour__description { margin: var(--hjm-space-xs) 0 0; color: var(--hjm-color-text-body); overflow-wrap: anywhere; }
|
|
2354
2475
|
.hjm-tour__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hjm-space-xs); }
|
|
2355
2476
|
.hjm-tour:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2408,12 +2529,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2408
2529
|
.hjm-menu__item:hover,
|
|
2409
2530
|
.hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
2410
2531
|
.hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
2411
|
-
.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-
|
|
2532
|
+
.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2412
2533
|
.hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
2413
2534
|
.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; }
|
|
2414
|
-
.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-
|
|
2535
|
+
.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); }
|
|
2415
2536
|
.hjm-menu__separator { block-size: 1px; margin: var(--hjm-space-xxs) var(--hjm-space-xs); background: var(--hjm-color-border); }
|
|
2416
|
-
.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-
|
|
2537
|
+
.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2417
2538
|
.hjm-menu__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
2418
2539
|
.hjm-menu__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
2419
2540
|
.hjm-menu__leading,
|
|
@@ -2435,13 +2556,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2435
2556
|
.hjm-select__busy-indicator { flex: 0 0 auto; inline-size: 1em; block-size: 1em; border: 2px solid var(--hjm-color-content-brand); border-inline-end-color: transparent; border-radius: 50%; animation: hjm-spin 800ms linear infinite; }
|
|
2436
2557
|
.hjm-select__native + .hjm-select__indicator { margin-inline-start: calc(-1 * var(--hjm-space-lg)); }
|
|
2437
2558
|
.hjm-select__listbox { position: fixed; z-index: var(--hjm-layer-dropdown); max-inline-size: min(26.25rem, calc(100vw - (2 * var(--hjm-space-md)))); max-block-size: 22.5rem; overflow: auto; padding: var(--hjm-select-popover-padding, var(--hjm-space-xs)); /* selectRecipe.popover.padding 8 (was 4 until 2026-10-06) */ border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: var(--hjm-shadow-floating); }
|
|
2438
|
-
.hjm-select__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-
|
|
2559
|
+
.hjm-select__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); }
|
|
2439
2560
|
.hjm-select__option, .hjm-select__message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: var(--hjm-radius-sm); overflow-wrap: anywhere; }
|
|
2440
2561
|
.hjm-select[data-density="comfortable"] .hjm-select__option,
|
|
2441
2562
|
.hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
|
|
2442
2563
|
.hjm-select__option { cursor: pointer; }
|
|
2443
2564
|
.hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
2444
|
-
.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-
|
|
2565
|
+
.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
|
|
2445
2566
|
.hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
2446
2567
|
.hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
|
|
2447
2568
|
.hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
@@ -2482,7 +2603,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2482
2603
|
.hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
|
|
2483
2604
|
.hjm-combobox__option { cursor: pointer; }
|
|
2484
2605
|
.hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
2485
|
-
.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-
|
|
2606
|
+
.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
|
|
2486
2607
|
.hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
2487
2608
|
.hjm-combobox__message { color: var(--hjm-color-text-muted); }
|
|
2488
2609
|
.hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
@@ -2492,18 +2613,22 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2492
2613
|
.hjm-form__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-sm); }
|
|
2493
2614
|
|
|
2494
2615
|
/* Advanced display ------------------------------------------------------- */
|
|
2495
|
-
|
|
2616
|
+
/* timelineRecipe label/description are `body`; binding it here lets the rail and timestamp derive from the same line box. */
|
|
2617
|
+
.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); }
|
|
2496
2618
|
.hjm-timeline__item { min-inline-size: 0; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--hjm-space-sm); }
|
|
2497
2619
|
.hjm-timeline__rail { position: relative; display: flex; justify-content: center; }
|
|
2498
|
-
|
|
2620
|
+
/* Dot, label first line and timestamp share the label's first line box (2026-10-17 measured audit: centers 396/397/398.5).
|
|
2621
|
+
The rail inherits the label's line height, so 1lh is that line box. */
|
|
2622
|
+
.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); }
|
|
2499
2623
|
.hjm-timeline__item[data-tone="info"] .hjm-timeline__dot { border-color: var(--hjm-accent-info); background: var(--hjm-accent-info); }
|
|
2500
2624
|
.hjm-timeline__item[data-tone="success"] .hjm-timeline__dot { border-color: var(--hjm-accent-success); background: var(--hjm-accent-success); }
|
|
2501
2625
|
.hjm-timeline__item[data-tone="attention"] .hjm-timeline__dot { border-color: var(--hjm-accent-attention); background: var(--hjm-accent-attention); }
|
|
2502
|
-
.hjm-timeline__connector { position: absolute; inset-block: 0.
|
|
2626
|
+
.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); }
|
|
2503
2627
|
.hjm-timeline__content { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block-end: var(--hjm-space-xxs); }
|
|
2504
|
-
.hjm-timeline__heading { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items:
|
|
2505
|
-
.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2506
|
-
|
|
2628
|
+
.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); }
|
|
2629
|
+
.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
2630
|
+
/* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
|
|
2631
|
+
.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); }
|
|
2507
2632
|
.hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
2508
2633
|
.hjm-accordion { border-block-start: 1px solid var(--hjm-color-border); }
|
|
2509
2634
|
.hjm-accordion__item { border-block-end: 1px solid var(--hjm-color-border); }
|
|
@@ -2520,7 +2645,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2520
2645
|
color: var(--hjm-color-text-body);
|
|
2521
2646
|
background: transparent;
|
|
2522
2647
|
font: inherit;
|
|
2523
|
-
font-weight: var(--hjm-
|
|
2648
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2524
2649
|
text-align: start;
|
|
2525
2650
|
cursor: pointer;
|
|
2526
2651
|
}
|
|
@@ -2540,7 +2665,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2540
2665
|
border-radius: 50%;
|
|
2541
2666
|
color: var(--hjm-color-text-muted);
|
|
2542
2667
|
background: var(--hjm-color-bg);
|
|
2543
|
-
font-weight: var(--hjm-
|
|
2668
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
2544
2669
|
}
|
|
2545
2670
|
.hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
|
|
2546
2671
|
.hjm-avatar[data-size="large"] { inline-size: 3rem; block-size: 3rem; }
|
|
@@ -2555,11 +2680,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2555
2680
|
.hjm-divider[data-orientation="horizontal"][data-inset="both"] { margin-inline: var(--hjm-space-md); inline-size: calc(100% - (2 * var(--hjm-space-md))); }
|
|
2556
2681
|
.hjm-description-list { display: grid; grid-template-columns: repeat(var(--hjm-description-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); margin: 0; }
|
|
2557
2682
|
.hjm-description-list__item { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
2558
|
-
.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
2683
|
+
.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2559
2684
|
.hjm-description-list__value { margin: 0; color: var(--hjm-color-text); overflow-wrap: anywhere; }
|
|
2560
2685
|
.hjm-table-scroll { max-inline-size: 100%; overflow: auto; outline-offset: 2px; }
|
|
2561
2686
|
.hjm-table { inline-size: 100%; border-collapse: collapse; color: var(--hjm-color-text-body); }
|
|
2562
|
-
.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2687
|
+
.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); text-align: start; }
|
|
2563
2688
|
.hjm-table__header,
|
|
2564
2689
|
.hjm-table__cell { padding: var(--hjm-space-sm); border-block-end: 1px solid var(--hjm-color-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
|
|
2565
2690
|
.hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-bg); }
|
|
@@ -2574,7 +2699,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2574
2699
|
.hjm-pagination__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xxs); margin: 0; padding: 0; list-style: none; }
|
|
2575
2700
|
.hjm-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
2576
2701
|
.hjm-breadcrumb__link { color: var(--hjm-color-text-muted); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
|
|
2577
|
-
.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2702
|
+
.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
2578
2703
|
.hjm-breadcrumb__separator { color: var(--hjm-color-text-weak); }
|
|
2579
2704
|
[dir="rtl"] .hjm-breadcrumb__separator[data-default="true"],
|
|
2580
2705
|
[dir="rtl"] .hjm-pagination__previous > span,
|
|
@@ -2591,13 +2716,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2591
2716
|
}
|
|
2592
2717
|
.hjm-pagination__item { color: var(--hjm-color-text-body); background: transparent; font: inherit; cursor: pointer; }
|
|
2593
2718
|
.hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-bg); }
|
|
2594
|
-
.hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-
|
|
2719
|
+
.hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2595
2720
|
.hjm-pagination__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
|
|
2596
2721
|
.hjm-pagination__ellipsis { color: var(--hjm-color-text-muted); }
|
|
2597
2722
|
.hjm-load-more { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding-block: var(--hjm-space-lg); text-align: center; }
|
|
2598
2723
|
.hjm-load-more[data-density="compact"] { gap: var(--hjm-space-xs); padding-block: var(--hjm-space-sm); }
|
|
2599
2724
|
.hjm-load-more__sentinel { inline-size: 1px; block-size: 1px; }
|
|
2600
|
-
.hjm-load-more__trigger { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-
|
|
2725
|
+
.hjm-load-more__trigger { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
|
|
2601
2726
|
.hjm-load-more__status, .hjm-load-more__error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--hjm-space-sm); color: var(--hjm-color-text-muted); }
|
|
2602
2727
|
.hjm-load-more__error { color: var(--hjm-color-danger); }
|
|
2603
2728
|
.hjm-load-more__end { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); }
|
|
@@ -2607,23 +2732,23 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2607
2732
|
.hjm-steps { display: grid; grid-template-columns: repeat(var(--hjm-steps-count, auto-fit), minmax(0, 1fr)); gap: var(--hjm-space-xs); margin: 0; padding: 0; list-style: none; }
|
|
2608
2733
|
.hjm-steps__step { min-inline-size: 0; display: grid; align-content: start; gap: var(--hjm-space-xs); }
|
|
2609
2734
|
.hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
|
|
2610
|
-
.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
2735
|
+
.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2611
2736
|
.hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
|
|
2612
2737
|
.hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
|
|
2613
2738
|
.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-bg); }
|
|
2614
2739
|
.hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
|
|
2615
2740
|
.hjm-steps__step[data-status="error"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-danger); color: var(--hjm-color-danger); background: var(--hjm-color-danger-fill); }
|
|
2616
2741
|
.hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
|
|
2617
|
-
.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-
|
|
2742
|
+
.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
2618
2743
|
.hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
|
|
2619
2744
|
.hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
|
|
2620
2745
|
.hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
|
|
2621
2746
|
|
|
2622
2747
|
.hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
|
|
2623
|
-
.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2748
|
+
.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2624
2749
|
.hjm-file-picker__dropzone { min-block-size: 8rem; display: grid; place-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xl); border: 1px dashed var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); text-align: center; }
|
|
2625
2750
|
.hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-bg); }
|
|
2626
|
-
.hjm-file-picker__dropzone button { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-
|
|
2751
|
+
.hjm-file-picker__dropzone button { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
|
|
2627
2752
|
.hjm-file-picker__hint { color: var(--hjm-color-text-muted); }
|
|
2628
2753
|
.hjm-file-picker__error { color: var(--hjm-color-danger); }
|
|
2629
2754
|
|
|
@@ -2642,7 +2767,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2642
2767
|
.hjm-upload-item__action { flex: 0 0 auto; margin-inline-start: auto; }
|
|
2643
2768
|
|
|
2644
2769
|
.hjm-date-picker { display: grid; gap: var(--hjm-space-xs); }
|
|
2645
|
-
.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2770
|
+
.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2646
2771
|
.hjm-date-picker__anchor { position: relative; display: flex; align-items: center; }
|
|
2647
2772
|
.hjm-date-picker__trigger { inline-size: 100%; min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding-inline: var(--hjm-space-md) 3rem; border: 1px solid var(--hjm-color-border-control); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-bg); font: inherit; text-align: start; cursor: pointer; }
|
|
2648
2773
|
/* datePickerRecipe.sizes.large.minHeight is control.buttonHeight.large (52), as Select/NumberField large. Web drew 56 until 2026-10-06. */
|
|
@@ -2667,7 +2792,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2667
2792
|
controlled Toast outside the viewport keeps it too (it stretched to 1200px in the layout story, 2026-10-17 review).
|
|
2668
2793
|
1.10.0 layout: [tone badge][title + description][close] / action pill on its own row, end-aligned.
|
|
2669
2794
|
The 2px tone strip is retired — the tinted badge carries tone (toastRecipe.toneMark width 0). */
|
|
2670
|
-
.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-
|
|
2795
|
+
.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; }
|
|
2671
2796
|
/* Whole-card activation is a sibling surface; explicit controls stay above it. */
|
|
2672
2797
|
.hjm-toast__press { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
|
|
2673
2798
|
.hjm-toast__press:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: -2px; }
|
|
@@ -2679,10 +2804,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2679
2804
|
.hjm-toast[data-tone="success"] .hjm-toast__icon { color: var(--hjm-toast-accent-success); background: var(--hjm-toast-badge-success); }
|
|
2680
2805
|
.hjm-toast[data-tone="warning"] .hjm-toast__icon { color: var(--hjm-toast-accent-warning); background: var(--hjm-toast-badge-warning); }
|
|
2681
2806
|
.hjm-toast[data-tone="danger"] .hjm-toast__icon { color: var(--hjm-toast-accent-danger); background: var(--hjm-toast-badge-danger); }
|
|
2682
|
-
|
|
2683
|
-
|
|
2807
|
+
/* First-line anchor (toastRecipe.anchor, 2026-10-17): the first line (title, else description) is centred on the
|
|
2808
|
+
badge box via its own line height (1lh), so profile and text-scale line heights stay aligned; extra lines grow
|
|
2809
|
+
downward while the lead column and close stay beside the first line. */
|
|
2810
|
+
.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; }
|
|
2811
|
+
.hjm-toast__content > :first-child { margin-block-start: calc((var(--hjm-toast-anchor-size) - 1lh) / 2); }
|
|
2812
|
+
.hjm-toast__title { font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-toast-title-line-height, 1.35); }
|
|
2684
2813
|
.hjm-toast__description { color: var(--hjm-toast-description-color); line-height: var(--hjm-toast-description-line-height, 1.45); }
|
|
2685
|
-
.hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: var(--hjm-
|
|
2814
|
+
.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; }
|
|
2686
2815
|
.hjm-toast__close:hover { color: var(--hjm-color-text); }
|
|
2687
2816
|
/* 2026-10-10 panel toast: product media replaces the tone badge in the leading column (toastRecipe.media),
|
|
2688
2817
|
and a running task shows its steps under the description (toastRecipe.progress). */
|
|
@@ -2692,9 +2821,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2692
2821
|
.hjm-toast__progress-step { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); color: var(--hjm-toast-progress-label); }
|
|
2693
2822
|
.hjm-toast__progress-dot { flex: none; inline-size: var(--hjm-toast-progress-dot); block-size: var(--hjm-toast-progress-dot); border-radius: 50%; background: var(--hjm-toast-progress-upcoming); }
|
|
2694
2823
|
.hjm-toast__progress-step[data-state="done"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); }
|
|
2695
|
-
.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-
|
|
2824
|
+
.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2696
2825
|
.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)); }
|
|
2697
|
-
.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start);
|
|
2826
|
+
.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-text-emphasis-medium); overflow-wrap: anywhere; text-align: center; cursor: pointer; }
|
|
2698
2827
|
.hjm-toast__action:hover { filter: brightness(0.97); }
|
|
2699
2828
|
.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); }
|
|
2700
2829
|
|
|
@@ -2716,6 +2845,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2716
2845
|
outline: 2px solid var(--hjm-color-content-brand);
|
|
2717
2846
|
outline-offset: 2px;
|
|
2718
2847
|
}
|
|
2848
|
+
/* The close target overhangs into the card padding (toastRecipe.close.inlineOverhang), so an outer ring would be
|
|
2849
|
+
clipped by the card's overflow; draw it inside the 44 target instead. */
|
|
2850
|
+
.hjm-toast__close:focus-visible { outline-offset: -2px; }
|
|
2719
2851
|
|
|
2720
2852
|
@keyframes hjm-spin { to { transform: rotate(360deg); } }
|
|
2721
2853
|
@keyframes hjm-pulse { from { opacity: var(--hjm-skeleton-from-opacity); } to { opacity: var(--hjm-skeleton-to-opacity); } }
|
|
@@ -2723,6 +2855,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2723
2855
|
.hjm-root[data-motion="reduced"] .hjm-button__spinner,
|
|
2724
2856
|
.hjm-root[data-motion="reduced"] .hjm-spinner__glyph,
|
|
2725
2857
|
.hjm-root[data-motion="reduced"] .hjm-skeleton,
|
|
2858
|
+
.hjm-root[data-motion="reduced"] .hjm-skeleton-lines,
|
|
2726
2859
|
.hjm-root[data-motion="reduced"] .hjm-combobox__spinner {
|
|
2727
2860
|
animation: none;
|
|
2728
2861
|
}
|
|
@@ -2740,6 +2873,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2740
2873
|
.hjm-button__spinner,
|
|
2741
2874
|
.hjm-spinner__glyph,
|
|
2742
2875
|
.hjm-skeleton,
|
|
2876
|
+
.hjm-skeleton-lines,
|
|
2743
2877
|
.hjm-combobox__spinner {
|
|
2744
2878
|
animation: none;
|
|
2745
2879
|
}
|
|
@@ -2764,7 +2898,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2764
2898
|
.hjm-top-bar__trailing { justify-content: flex-end; }
|
|
2765
2899
|
.hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
|
|
2766
2900
|
.hjm-top-bar__subtitle { display: block; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
2767
|
-
.hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-
|
|
2901
|
+
.hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-type-title-weight); }
|
|
2768
2902
|
.hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
|
|
2769
2903
|
.hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
2770
2904
|
.hjm-top-bar[data-centered="false"] .hjm-top-bar__title { text-align: start; }
|
|
@@ -2775,7 +2909,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2775
2909
|
.hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: var(--hjm-layer-sticky); }
|
|
2776
2910
|
/* Inside ScreenLayout's footer the footer owns border, padding, surface and safe area; BottomCTA keeps only its copy,
|
|
2777
2911
|
actions and an explicit safeAreaBottom (2026-10-17: the doubled bar inset the buttons twice). */
|
|
2778
|
-
|
|
2912
|
+
/* The screen footer already pads max(screen padding, env(safe-area-inset-bottom)); an explicit safeAreaBottom adds only
|
|
2913
|
+
the remainder so the gap is max(footer, inset), not their sum (2026-10-17 "버튼 아래 여백이 많아"). */
|
|
2914
|
+
.hjm-bottom-cta[data-placement="screen-footer"] { position: static; min-block-size: 0; padding: 0 0 max(0px, calc(var(--hjm-bottom-cta-safe-area) - max(var(--hjm-screen-padding), env(safe-area-inset-bottom, 0px)))); border: 0; background: none; box-shadow: none; }
|
|
2779
2915
|
.hjm-bottom-cta__description { margin: 0; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
2780
2916
|
.hjm-bottom-cta__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-bottom-cta-gap); }
|
|
2781
2917
|
/* bottomCtaRecipe.contentMaxWidth: the surface spans the viewport, its copy and actions stop at the reading width. */
|
|
@@ -2813,7 +2949,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2813
2949
|
the grid instead of shrinking dates or wrapping a week onto another row. */
|
|
2814
2950
|
.hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; max-inline-size: var(--hjm-calendar-max-width); }
|
|
2815
2951
|
.hjm-calendar__header { display: grid; grid-template-columns: var(--hjm-control-min-touch-target) minmax(0, 1fr) var(--hjm-control-min-touch-target); align-items: center; gap: var(--hjm-space-xs); }
|
|
2816
|
-
.hjm-calendar__header strong { text-align: center; overflow-wrap: anywhere; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-
|
|
2952
|
+
.hjm-calendar__header strong { text-align: center; overflow-wrap: anywhere; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); }
|
|
2817
2953
|
.hjm-calendar__header button { min-block-size: var(--hjm-control-min-touch-target); border: 0; border-radius: var(--hjm-radius-full); background: transparent; color: var(--hjm-color-text-body); font: inherit; cursor: pointer; }
|
|
2818
2954
|
.hjm-calendar__viewport { overflow-x: auto; padding: var(--hjm-space-xxs); }
|
|
2819
2955
|
.hjm-calendar__grid { min-inline-size: calc(7 * var(--hjm-calendar-cell-size)); }
|
|
@@ -2842,7 +2978,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2842
2978
|
.hjm-anchor__list { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); list-style: none; margin: 0; padding: 0; }
|
|
2843
2979
|
.hjm-anchor__link { display: block; padding: var(--hjm-space-xs); border-inline-start: 2px solid transparent; color: var(--hjm-color-text-muted); text-decoration: none; overflow-wrap: anywhere; }
|
|
2844
2980
|
.hjm-anchor__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
|
|
2845
|
-
.hjm-anchor__link[aria-current="location"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-focus); font-weight: var(--hjm-
|
|
2981
|
+
.hjm-anchor__link[aria-current="location"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-focus); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2846
2982
|
.hjm-anchor__link:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
2847
2983
|
.hjm-anchor[data-orientation="horizontal"] .hjm-anchor__list { flex-direction: row; flex-wrap: wrap; }
|
|
2848
2984
|
.hjm-anchor[data-orientation="horizontal"] .hjm-anchor__link { border-inline-start: 0; border-block-end: 2px solid transparent; }
|
|
@@ -2853,7 +2989,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2853
2989
|
.hjm-popover { box-sizing: border-box; inline-size: var(--hjm-popover-max-width); overflow: auto; overscroll-behavior: contain; padding: var(--hjm-space-sm); border: var(--hjm-stroke-default) solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); color: var(--hjm-color-text-body); pointer-events: auto; animation: hjm-popover-in var(--hjm-popover-duration) var(--hjm-popover-easing); }
|
|
2854
2990
|
.hjm-popover[data-state="closed"] { pointer-events: none; animation-name: hjm-popover-out; }
|
|
2855
2991
|
.hjm-popover__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hjm-space-xs); }
|
|
2856
|
-
.hjm-popover__title { flex: 1 1 50%; min-inline-size: 0; margin: 0; font-size: var(--hjm-type-body-size); font-weight: var(--hjm-
|
|
2992
|
+
.hjm-popover__title { flex: 1 1 50%; min-inline-size: 0; margin: 0; font-size: var(--hjm-type-body-size); font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-type-body-line-height); overflow-wrap: anywhere; }
|
|
2857
2993
|
.hjm-popover__description { margin-block: var(--hjm-space-xs) var(--hjm-space-md); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
2858
2994
|
.hjm-popover__body { min-inline-size: 0; padding-block-start: var(--hjm-space-xs); overflow-wrap: anywhere; }
|
|
2859
2995
|
.hjm-popover:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2916,7 +3052,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2916
3052
|
.hjm-menu-morph__measure { position: absolute; visibility: hidden; pointer-events: none; inset-block-start: 0; inset-inline-start: 0; }
|
|
2917
3053
|
.hjm-menu-morph__surface { color: var(--hjm-color-text); background: var(--hjm-color-bg); border: 1px solid var(--hjm-color-border-control); }
|
|
2918
3054
|
.hjm-menu-morph[data-open="false"] .hjm-menu-morph__surface { box-shadow: none !important; }
|
|
2919
|
-
.hjm-menu-morph__trigger { gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); font-family: var(--hjm-font-family-ui, inherit); font-size: var(--hjm-type-body-size); font-weight: var(--hjm-
|
|
3055
|
+
.hjm-menu-morph__trigger { gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); font-family: var(--hjm-font-family-ui, inherit); font-size: var(--hjm-type-body-size); font-weight: var(--hjm-text-emphasis-medium); line-height: var(--hjm-type-body-line-height); }
|
|
2920
3056
|
.hjm-menu-morph [role="button"]:focus-visible, .hjm-menu-morph__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
|
|
2921
3057
|
.hjm-menu-morph__item { display: flex; width: 100%; align-items: center; gap: var(--hjm-space-sm); min-height: var(--hjm-control-min-touch-target); padding: var(--hjm-space-sm); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
|
|
2922
3058
|
.hjm-menu-morph__item:hover, .hjm-menu-morph__item:focus { background: var(--hjm-color-bg); }
|
|
@@ -3007,7 +3143,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
3007
3143
|
@supports (backdrop-filter: blur(20px)) {
|
|
3008
3144
|
.hjm-navigation-bar { background: color-mix(in srgb, var(--hjm-color-surface) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
|
3009
3145
|
}
|
|
3010
|
-
.
|
|
3146
|
+
/* The brand added spacing.xs on top of the bar's spacing.sm padding, so it started 21px in against 13px for the
|
|
3147
|
+
end controls (2026-10-17 measured audit). Native has no extra brand inset; both edges now use the bar padding. */
|
|
3148
|
+
.hjm-navigation-bar__brand { flex-shrink: 0; }
|
|
3011
3149
|
.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; }
|
|
3012
3150
|
.hjm-navigation-bar__destinations { flex: 1; }
|
|
3013
3151
|
.hjm-navigation-bar__actions > * { max-inline-size: 100%; }
|
|
@@ -3102,7 +3240,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3102
3240
|
.hjm-screen__exit-glyph[data-kind="back"]:dir(rtl) { transform: scaleX(-1); }
|
|
3103
3241
|
|
|
3104
3242
|
.hjm-image-choice { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
3105
|
-
.hjm-image-choice__label { font-weight:
|
|
3243
|
+
.hjm-image-choice__label { font-weight: var(--hjm-text-emphasis-medium); }
|
|
3106
3244
|
.hjm-image-choice__tiles { display: flex; flex-wrap: wrap; gap: var(--hjm-image-choice-gap); }
|
|
3107
3245
|
.hjm-image-choice__tile { position: relative; inline-size: calc(var(--hjm-image-choice-size) + (var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)) * 2); aspect-ratio: 1; padding: var(--hjm-image-choice-offset); border: var(--hjm-image-choice-ring) solid transparent; border-radius: calc(var(--hjm-image-choice-radius) + var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)); background: none; cursor: pointer; }
|
|
3108
3246
|
.hjm-image-choice__tile[data-selected] { border-color: var(--hjm-color-content-brand); }
|
|
@@ -3146,13 +3284,21 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3146
3284
|
.hjm-comment-thread { display: flex; flex-direction: column; }
|
|
3147
3285
|
.hjm-comment-row__avatar { flex: 0 0 auto; display: flex; justify-content: center; }
|
|
3148
3286
|
.hjm-comment-row__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
|
|
3287
|
+
/* The <time> wrapper is a flex box so its caption is the line: as an inline box it added the body line-height strut,
|
|
3288
|
+
making the identity line 19 tall and moving the author 1.5px off the action anchor (2026-10-17 measurement). */
|
|
3289
|
+
.hjm-comment-row__time { display: flex; }
|
|
3149
3290
|
.hjm-comment-row__reactions { display: flex; flex-direction: column; gap: 2px; border-radius: var(--hjm-radius-sm); -webkit-touch-callout: none; }
|
|
3150
3291
|
.hjm-comment-row__reactions:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
|
|
3151
3292
|
.hjm-comment-row__media { align-self: flex-start; overflow: hidden; margin-block-start: 4px; }
|
|
3152
3293
|
.hjm-comment-row__media > img { display: block; inline-size: 100%; block-size: auto; }
|
|
3153
|
-
.
|
|
3294
|
+
/* commentThreadRecipe.actionAnchor (2026-10-17 measured audit): the 44 targets centre on the identity's first line
|
|
3295
|
+
(--hjm-comment-anchor-line, set per row), so like/more glyphs share the author line's centre instead of sitting
|
|
3296
|
+
12px below it. When HJM's own like/more is the last control (data-edge), the whole column takes the IconButton edge
|
|
3297
|
+
overhang: the 44-wide like count under the heart shares the column, so a margin on the button alone was absorbed. */
|
|
3298
|
+
.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); }
|
|
3299
|
+
.hjm-comment-row__like[data-edge="end"] { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
3154
3300
|
.hjm-comment-row__like-count { text-align: center; }
|
|
3155
|
-
.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:
|
|
3301
|
+
.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: var(--hjm-text-emphasis-medium); cursor: pointer; }
|
|
3156
3302
|
.hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
|
|
3157
3303
|
.hjm-comment-row__action:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
|
|
3158
3304
|
.hjm-chat-screen__jump { position: absolute; inset-block-end: calc(100% + var(--hjm-space-xs) + var(--hjm-screen-padding)); inset-inline-end: 0; }
|
|
@@ -3223,7 +3369,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3223
3369
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item { padding-block:var(--hjm-space-xs); position:relative; flex:0 1 auto; min-inline-size:0; min-block-size:var(--hjm-control-min-touch-target); border:0; border-radius:var(--hjm-radius-full); background:transparent; box-shadow:none; padding-inline:var(--hjm-space-md); color:var(--hjm-color-text-muted); }
|
|
3224
3370
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item::before { content:""; position:absolute; inset:var(--hjm-space-xs) 0; border-radius:var(--hjm-radius-full); background:var(--hjm-color-surface-alt); }
|
|
3225
3371
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
|
|
3226
|
-
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-
|
|
3372
|
+
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
|
|
3227
3373
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); }
|
|
3228
3374
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
|
|
3229
3375
|
|
|
@@ -3272,12 +3418,12 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3272
3418
|
|
|
3273
3419
|
/* Text radio navigation shares the selection engine and its focus behavior. */
|
|
3274
3420
|
.hjm-segmented[data-presentation="text"] .hjm-segmented__items { flex-direction:row; gap:var(--hjm-space-md); padding:0; border:0; border-radius:0; background:transparent; }
|
|
3275
|
-
.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:
|
|
3421
|
+
.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:var(--hjm-text-emphasis-medium); }
|
|
3276
3422
|
.hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
|
|
3277
|
-
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:
|
|
3423
|
+
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
|
|
3278
3424
|
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
|
|
3279
|
-
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:
|
|
3280
|
-
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:
|
|
3425
|
+
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:var(--hjm-text-emphasis-regular); }
|
|
3426
|
+
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:var(--hjm-text-emphasis-strong); }
|
|
3281
3427
|
|
|
3282
3428
|
/* Long read-only records need a stable label column across wrapped values. */
|
|
3283
3429
|
.hjm-description-list[data-layout="inline"] { gap: 0; }
|