@hjmds/react 1.27.2 → 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/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.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 +5 -2
- 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/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/screen-flows.d.ts +2 -2
- package/dist/screen-flows.d.ts.map +1 -1
- package/dist/screen-flows.js +1 -1
- 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.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 +183 -108
- package/dist/styles.layered.css +183 -108
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +14 -3
- package/dist/theme.js.map +1 -1
- package/dist/top.js +1 -1
- package/dist/top.js.map +1 -1
- package/dist/virtual-list.js +4 -4
- package/dist/virtual-list.js.map +1 -1
- package/package.json +3 -3
package/dist/styles.layered.css
CHANGED
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
.hjm-text[data-variant="title"] { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
|
|
63
63
|
.hjm-text[data-variant="titleLarge"] { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
|
|
64
64
|
.hjm-text[data-variant="heading"] { font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); }
|
|
65
|
-
.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-
|
|
66
|
-
.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-
|
|
67
|
-
.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-
|
|
65
|
+
.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-text-emphasis-regular); }
|
|
66
|
+
.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-text-emphasis-medium); }
|
|
67
|
+
.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-text-emphasis-strong); }
|
|
68
68
|
.hjm-text[data-tone="primary"] { color: var(--hjm-color-text); }
|
|
69
69
|
.hjm-text[data-tone="body"] { color: var(--hjm-color-text-body); }
|
|
70
70
|
.hjm-text[data-tone="muted"] { color: var(--hjm-color-text-muted); }
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
border-radius: var(--hjm-radius-md);
|
|
163
163
|
color: var(--hjm-color-on-primary);
|
|
164
164
|
background: var(--hjm-color-primary);
|
|
165
|
-
font-weight: var(--hjm-
|
|
165
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
166
166
|
text-decoration: none;
|
|
167
167
|
transform: translateY(calc(-100% - (2 * var(--hjm-space-sm))));
|
|
168
168
|
transition: transform var(--hjm-motion-fast);
|
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
.hjm-icon-button,
|
|
215
215
|
.hjm-link {
|
|
216
216
|
font: inherit;
|
|
217
|
-
font-weight: var(--hjm-
|
|
217
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
218
218
|
transition: background-color var(--hjm-motion-fast), color var(--hjm-motion-fast), opacity var(--hjm-motion-fast), transform var(--hjm-motion-fast);
|
|
219
219
|
}
|
|
220
220
|
.hjm-button,
|
|
@@ -317,6 +317,10 @@
|
|
|
317
317
|
.hjm-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-large) + 1px); }
|
|
318
318
|
:is(.hjm-icon-button, .hjm-button):is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
319
319
|
:is(.hjm-icon-button, .hjm-button):is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-edge-overhang, 0px)); }
|
|
320
|
+
/* NotificationBell wraps a default (ghost, medium) IconButton with a badge anchored to its own end, so the bell root
|
|
321
|
+
takes the same overhang and the badge keeps the icon's corner (2026-10-17 1.27.2 adoption: Spint's top-bar bell). */
|
|
322
|
+
.hjm-notification-bell:is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
323
|
+
.hjm-notification-bell:is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
320
324
|
.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; }
|
|
321
325
|
.hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
|
|
322
326
|
.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; }
|
|
@@ -338,13 +342,13 @@
|
|
|
338
342
|
}
|
|
339
343
|
/* An edge-aligned control overhangs into the container padding, where an outer ring can be clipped by the container's
|
|
340
344
|
overflow (lists, cards); draw the ring inside its own box instead, as the Toast close does. */
|
|
341
|
-
:is(.hjm-icon-button, .hjm-button)[data-edge]:focus-visible { outline-offset: calc(-1 * var(--hjm-focus-width)); }
|
|
345
|
+
: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)); }
|
|
342
346
|
|
|
343
347
|
/* Input interiors use the theme canvas (white in light mode), not tinted
|
|
344
348
|
surfaces. Focus and selection still use blue borders and compact indicators. */
|
|
345
349
|
.hjm-field {
|
|
346
350
|
font-family: var(--hjm-font-family-ui, inherit); display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
|
|
347
|
-
.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-
|
|
351
|
+
.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-text-emphasis-medium); }
|
|
348
352
|
.hjm-field__control {
|
|
349
353
|
display: flex;
|
|
350
354
|
align-items: center;
|
|
@@ -483,7 +487,7 @@
|
|
|
483
487
|
background: var(--hjm-color-bg);
|
|
484
488
|
font-size: var(--hjm-type-title-size);
|
|
485
489
|
line-height: var(--hjm-type-title-line-height);
|
|
486
|
-
font-weight: var(--hjm-
|
|
490
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
487
491
|
}
|
|
488
492
|
.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); }
|
|
489
493
|
.hjm-otp-field__slot[data-state="filled"] { border-color: var(--hjm-color-content-brand); }
|
|
@@ -572,8 +576,8 @@
|
|
|
572
576
|
.hjm-bottom-navigation__indicator[data-state="selected"] > :first-child { transform: scale(1.06); }
|
|
573
577
|
/* Icon-only items center the indicator in the density's minimum height instead of leaving an empty label row. */
|
|
574
578
|
.hjm-bottom-navigation[data-labels="hidden"] .hjm-bottom-navigation__item { justify-content: center; }
|
|
575
|
-
.hjm-bottom-navigation__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-
|
|
576
|
-
.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-
|
|
579
|
+
.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); }
|
|
580
|
+
.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-semibold); }
|
|
577
581
|
.hjm-bottom-navigation__badge {
|
|
578
582
|
position: absolute;
|
|
579
583
|
inset-block-start: calc(-1 * var(--hjm-space-xxs));
|
|
@@ -783,9 +787,9 @@
|
|
|
783
787
|
.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); }
|
|
784
788
|
.hjm-choice__copy { display: grid; gap: var(--hjm-space-xxs); padding-block: 2px; }
|
|
785
789
|
.hjm-choice[data-state="checked"] .hjm-choice__copy > :first-child,
|
|
786
|
-
.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-
|
|
790
|
+
.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-semibold); }
|
|
787
791
|
.hjm-radio-group { min-inline-size: 0; padding: 0; border: 0; }
|
|
788
|
-
.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-
|
|
792
|
+
.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
|
|
789
793
|
.hjm-radio-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
790
794
|
.hjm-radio-group[data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-xxs); }
|
|
791
795
|
.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); }
|
|
@@ -793,7 +797,7 @@
|
|
|
793
797
|
.hjm-radio-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-sm); }
|
|
794
798
|
.hjm-radio-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-radio-group__items { gap: 0; }
|
|
795
799
|
.hjm-checkbox-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
796
|
-
.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-
|
|
800
|
+
.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
|
|
797
801
|
.hjm-checkbox-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
798
802
|
.hjm-checkbox-group[data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-xxs); }
|
|
799
803
|
.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); }
|
|
@@ -815,8 +819,9 @@
|
|
|
815
819
|
.hjm-switch__copy { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
|
|
816
820
|
.hjm-switch__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
817
821
|
.hjm-switch[data-presentation="row"] { display: flex; inline-size: 100%; justify-content: space-between; }
|
|
818
|
-
/* switchRecipe.
|
|
819
|
-
|
|
822
|
+
/* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
|
|
823
|
+
Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
|
|
824
|
+
.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); }
|
|
820
825
|
.hjm-switch[data-presentation="row"] .hjm-switch__copy { order: -1; flex: 1; }
|
|
821
826
|
/* Inherited layout variables reset at nested providers and keep ./selection independent. */
|
|
822
827
|
.hjm-root { --hjm-switch-row-direction: row; --hjm-switch-row-align: center; --hjm-switch-copy-flex: 1; }
|
|
@@ -837,15 +842,24 @@
|
|
|
837
842
|
/* margin: 0 resets the UA fieldset 2px inline margin (as the other HJM fieldsets do); it offset the track from the parent edges. */
|
|
838
843
|
.hjm-segmented { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
839
844
|
/* segmentedControlRecipe (2026-10-06 follow-up): track padding/gap spacing.xxs 4, radius lg, 1px border; item radius md,
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
+
padding md (medium) / sm (small). Web had drawn a 2px track with radius md, no small size, and a 1px selected ring;
|
|
846
|
+
Native already read the recipe. */
|
|
847
|
+
/* 2026-10-17 ("높이 맞춰"): the connected control's OUTER height is the Button/Chip height of its size
|
|
848
|
+
(--hjm-segmented-height, segmentedControlRecipe.sizes.height); options get that minus the 4 padding + 1 border on
|
|
849
|
+
each side and reach the 44 target with an invisible vertical ::after. The scroller sits outside the drawn track and
|
|
850
|
+
reaches past a short track by negative margin, so neither the hit area is clipped nor the layout grows. */
|
|
851
|
+
.hjm-segmented { --hjm-segmented-height: var(--hjm-control-button-medium); }
|
|
852
|
+
.hjm-segmented[data-size="small"] { --hjm-segmented-height: var(--hjm-control-button-small); }
|
|
853
|
+
.hjm-segmented__scroller { min-inline-size: 0; overflow-x: auto; }
|
|
854
|
+
.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)); }
|
|
855
|
+
.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__items { inline-size: max-content; min-inline-size: 100%; }
|
|
856
|
+
.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); }
|
|
857
|
+
.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; }
|
|
858
|
+
.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); }
|
|
845
859
|
/* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
|
|
846
|
-
.hjm-segmented[data-
|
|
860
|
+
.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; }
|
|
847
861
|
.hjm-segmented__item input { position: absolute; opacity: 0; }
|
|
848
|
-
.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-
|
|
862
|
+
.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); }
|
|
849
863
|
.hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
|
|
850
864
|
|
|
851
865
|
/* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
|
|
@@ -856,17 +870,19 @@
|
|
|
856
870
|
Pills are excluded (segmentedControlRecipe.pills.largeTextLayout "wrap", 1.13.1): they wrap in a block and
|
|
857
871
|
stay one line in a scroll rail. Stacking them turned a filter rail into a tall column (utilverse, 2026-10-06). */
|
|
858
872
|
@media (max-width: 11em) {
|
|
859
|
-
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
|
|
860
|
-
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
|
|
873
|
+
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
|
|
874
|
+
.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); }
|
|
875
|
+
.hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
|
|
861
876
|
}
|
|
862
|
-
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
|
|
863
|
-
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
|
|
877
|
+
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
|
|
878
|
+
[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); }
|
|
879
|
+
[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
|
|
864
880
|
|
|
865
881
|
.hjm-tabs { min-inline-size: 0; }
|
|
866
882
|
.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); }
|
|
867
883
|
.hjm-tabs[data-overflow="clip"] .hjm-tabs__list { overflow: hidden; }
|
|
868
884
|
.hjm-tabs[data-layout="fitted"] .hjm-tabs__tab { flex: 1 1 0; }
|
|
869
|
-
.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-
|
|
885
|
+
.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; }
|
|
870
886
|
.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); }
|
|
871
887
|
.hjm-tabs__leading { display: inline-flex; flex: 0 0 auto; align-items: center; margin-inline-end: var(--hjm-space-xs); }
|
|
872
888
|
.hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
|
|
@@ -881,7 +897,7 @@
|
|
|
881
897
|
.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; }
|
|
882
898
|
|
|
883
899
|
.hjm-badge, .hjm-tag { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; overflow-wrap: anywhere; }
|
|
884
|
-
.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-
|
|
900
|
+
.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); }
|
|
885
901
|
.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) */
|
|
886
902
|
.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) */
|
|
887
903
|
.hjm-badge[data-tone="brand"] { color: var(--hjm-color-content-brand); }
|
|
@@ -897,7 +913,7 @@
|
|
|
897
913
|
.hjm-badge[data-variant="outline"][data-tone="warning"] { border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
|
|
898
914
|
.hjm-badge[data-variant="outline"][data-tone="attention"] { border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
|
|
899
915
|
.hjm-badge[data-variant="outline"][data-tone="danger"] { border-color: color-mix(in srgb, var(--hjm-color-danger) 30%, transparent); }
|
|
900
|
-
.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-
|
|
916
|
+
.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); }
|
|
901
917
|
.hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
902
918
|
.hjm-tag[data-tone="info"] { background: var(--hjm-color-bg); }
|
|
903
919
|
.hjm-tag[data-tone="success"] { background: color-mix(in srgb, var(--hjm-accent-success) 10%, transparent); }
|
|
@@ -913,7 +929,7 @@
|
|
|
913
929
|
.hjm-icon[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
914
930
|
.hjm-icon[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
|
|
915
931
|
/* Counts must not flex-shrink below their text and padding in narrow rows. */
|
|
916
|
-
.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-
|
|
932
|
+
.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; }
|
|
917
933
|
.hjm-counter-badge[data-size="small"] { min-inline-size: 16px; block-size: 16px; padding-inline: var(--hjm-space-xxs); }
|
|
918
934
|
.hjm-counter-badge[data-tone="brand"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
|
|
919
935
|
.hjm-counter-badge[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
|
|
@@ -928,7 +944,8 @@
|
|
|
928
944
|
.hjm-card__header { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); min-inline-size: 0; }
|
|
929
945
|
.hjm-card__leading { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; }
|
|
930
946
|
.hjm-card__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
|
|
931
|
-
.
|
|
947
|
+
/* cardRecipe.title.emphasis "strong": without a weight the h2–h6 element fell back to the UA bold (700). */
|
|
948
|
+
.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; }
|
|
932
949
|
.hjm-card__description { margin: 0; overflow-wrap: anywhere; }
|
|
933
950
|
.hjm-card__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-md) var(--hjm-space-md); }
|
|
934
951
|
/* Row rhythm reads the recipe density variables so the stylesheet does not
|
|
@@ -973,7 +990,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
973
990
|
.hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
|
|
974
991
|
.hjm-list-row__content { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
975
992
|
/* listRowRecipe title bodyLarge / description body (2026-10-17: Web inherited 14 for both while Native used the recipe). */
|
|
976
|
-
.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-
|
|
993
|
+
.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; }
|
|
977
994
|
.hjm-list-row[data-tone="danger"] .hjm-list-row__title { color: var(--hjm-color-danger); }
|
|
978
995
|
.hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
979
996
|
.hjm-list-row__description { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
|
|
@@ -983,7 +1000,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
983
1000
|
.hjm-section__copy { display: grid; flex: 1 1 auto; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
984
1001
|
/* sectionRecipe.title is the `title` variant (18/26 bold) and description the `caption` variant (11/16), as Native draws them.
|
|
985
1002
|
Until 2026-10-06 Web inherited body (14) for both, so the same Section header was smaller on Web. */
|
|
986
|
-
.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-
|
|
1003
|
+
.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; }
|
|
987
1004
|
.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; }
|
|
988
1005
|
.hjm-section__action { flex: 0 0 auto; }
|
|
989
1006
|
.hjm-section__content { min-inline-size: 0; }
|
|
@@ -999,7 +1016,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
999
1016
|
recipe-only sizes as custom properties so theme.ts does not pull this opt-in contract into every graph. */
|
|
1000
1017
|
/* fit-content: a column Stack stretched the pill to its max width with empty space after the label; Native sizes it
|
|
1001
1018
|
to its content (2026-10-17 review F N13). Unlike align-self it keeps vertical centering in a TopBar row. */
|
|
1002
|
-
.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-
|
|
1019
|
+
.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; }
|
|
1003
1020
|
/* Without media the pill keeps the symmetric label inset; the media hugs the start edge like an avatar chip. */
|
|
1004
1021
|
.hjm-activity-chip:not([data-media]) { padding-inline-start: var(--hjm-space-sm); }
|
|
1005
1022
|
.hjm-activity-chip[data-emphasis="emphasis"] { border-color: var(--hjm-color-primary); color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
|
|
@@ -1008,7 +1025,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1008
1025
|
.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%; }
|
|
1009
1026
|
.hjm-activity-chip__media > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: contain; }
|
|
1010
1027
|
.hjm-activity-chip__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1011
|
-
.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-
|
|
1028
|
+
.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; }
|
|
1012
1029
|
.hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
|
|
1013
1030
|
.hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
|
|
1014
1031
|
.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
|
|
@@ -1024,12 +1041,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1024
1041
|
.hjm-list__item { min-inline-size: 0; }
|
|
1025
1042
|
/* Indent only the divider: moving the row shifted every title after the first
|
|
1026
1043
|
and narrowed its text column in the notification-settings composition. Insets are measured from the list content
|
|
1027
|
-
edge (where the row text sits) and come from listRecipe.separators: full spans the row surface
|
|
1028
|
-
the text
|
|
1044
|
+
edge (where the row text sits) and come from listRecipe.separators: full spans the row surface; indented follows
|
|
1045
|
+
the text column of the row above (the separator belongs to that row, as Native draws it after the row) — 52 after a
|
|
1046
|
+
row with leading (ListRow root `data-leading`), 0 after one without, ending on the content edge (2026-10-17). */
|
|
1029
1047
|
.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item { position: relative; }
|
|
1030
1048
|
.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; }
|
|
1031
1049
|
.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item::before { inset-inline: var(--hjm-list-separator-full-start) var(--hjm-list-separator-full-end); }
|
|
1032
1050
|
.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); }
|
|
1051
|
+
.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); }
|
|
1033
1052
|
|
|
1034
1053
|
/* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
|
|
1035
1054
|
group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
|
|
@@ -1041,14 +1060,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1041
1060
|
(compact `title`) heavy, affix `body` semibold in content.body, hint and trend `caption` (trend bold). Until 2026-10-06
|
|
1042
1061
|
Web drew a body-size medium label, a title-size value at both densities (scaled twice by --hjm-text-scale, which the
|
|
1043
1062
|
--hjm-type-* sizes already include) and muted affixes. */
|
|
1044
|
-
.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-
|
|
1063
|
+
.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; }
|
|
1045
1064
|
.hjm-statistic[data-density="compact"] .hjm-statistic__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
1046
1065
|
.hjm-statistic__value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
1047
|
-
.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-
|
|
1066
|
+
.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; }
|
|
1048
1067
|
.hjm-statistic[data-density="compact"] .hjm-statistic__value { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
|
|
1049
|
-
.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-
|
|
1068
|
+
.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); }
|
|
1050
1069
|
.hjm-statistic__hint { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
|
|
1051
|
-
.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-
|
|
1070
|
+
.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; }
|
|
1052
1071
|
.hjm-statistic__trend[data-tone="success"] { color: var(--hjm-accent-success); }
|
|
1053
1072
|
.hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-accent-warning); }
|
|
1054
1073
|
.hjm-statistic__trend[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
@@ -1075,18 +1094,20 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1075
1094
|
.hjm-notice__content > :first-child { margin-block-start: calc((var(--hjm-notice-anchor) - 1lh) / 2); }
|
|
1076
1095
|
.hjm-notice__action { flex: 0 0 auto; max-inline-size: 100%; }
|
|
1077
1096
|
.hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
|
|
1097
|
+
/* noticeRecipe/emptyStateRecipe title weight; the <strong> otherwise draws the UA bold (700). */
|
|
1098
|
+
.hjm-notice__title { font-weight: var(--hjm-type-title-weight); }
|
|
1078
1099
|
|
|
1079
1100
|
/* emptyStateRecipe.density.regular paddingVertical xxxl 40 (2026-10-06; Web had xxl 32, Native read the recipe). */
|
|
1080
1101
|
/* Like Native, a regular empty state fills the rest of a flex host and centers in it; compact (cards, sheets) stays content-high. */
|
|
1081
1102
|
.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; }
|
|
1082
1103
|
.hjm-empty-state[data-density="compact"] { flex-grow: 0; padding-block: var(--hjm-space-xl); }
|
|
1083
|
-
.hjm-empty-state__title { color: var(--hjm-color-text); }
|
|
1104
|
+
.hjm-empty-state__title { color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); }
|
|
1084
1105
|
.hjm-result { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); text-align: center; }
|
|
1085
|
-
.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-
|
|
1106
|
+
.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); }
|
|
1086
1107
|
.hjm-result[data-status="success"] .hjm-result__icon { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 12%, transparent); }
|
|
1087
1108
|
.hjm-result[data-status="failure"] .hjm-result__icon { color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 12%, transparent); }
|
|
1088
1109
|
.hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: var(--hjm-color-bg); }
|
|
1089
|
-
.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; }
|
|
1110
|
+
.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; }
|
|
1090
1111
|
.hjm-result__description { max-inline-size: 40rem; margin: 0; color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
1091
1112
|
.hjm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-xs); }
|
|
1092
1113
|
.hjm-progress { display: grid; gap: var(--hjm-space-xs); }
|
|
@@ -1152,7 +1173,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1152
1173
|
.hjm-list-row--loading [data-placeholder] {
|
|
1153
1174
|
display: block;
|
|
1154
1175
|
border-radius: var(--hjm-radius-sm);
|
|
1155
|
-
background: var(--hjm-
|
|
1176
|
+
background: var(--hjm-skeleton-background); /* same placeholder fill as Skeleton */
|
|
1156
1177
|
}
|
|
1157
1178
|
.hjm-list-row--loading .hjm-list-row__title[data-placeholder] {
|
|
1158
1179
|
block-size: var(--hjm-type-body-large-line-height);
|
|
@@ -1160,7 +1181,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1160
1181
|
.hjm-list-row--loading .hjm-list-row__description[data-placeholder] {
|
|
1161
1182
|
block-size: var(--hjm-type-body-line-height);
|
|
1162
1183
|
}
|
|
1163
|
-
.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-
|
|
1184
|
+
.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-skeleton-background); }
|
|
1164
1185
|
.hjm-list-row--loading .hjm-list-row__trailing[data-placeholder] { block-size: var(--hjm-type-caption-line-height); }
|
|
1165
1186
|
.hjm-spinner { display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-content-brand); }
|
|
1166
1187
|
.hjm-spinner[data-tone="neutral"] { color: var(--hjm-color-text-muted); }
|
|
@@ -1168,10 +1189,15 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1168
1189
|
.hjm-spinner[data-size="small"] { font-size: 14px; }
|
|
1169
1190
|
.hjm-spinner[data-size="medium"] { font-size: 20px; }
|
|
1170
1191
|
.hjm-spinner[data-size="large"] { font-size: 28px; }
|
|
1171
|
-
|
|
1192
|
+
/* Filled placeholder (recipe background, 2026-10-17): a canvas fill + hairline was invisible on white. */
|
|
1193
|
+
.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); }
|
|
1172
1194
|
.hjm-skeleton[data-shape="text"] { min-block-size: var(--hjm-space-md); border-radius: var(--hjm-radius-sm); }
|
|
1173
|
-
.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); }
|
|
1174
|
-
.hjm-skeleton[data-
|
|
1195
|
+
.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); }
|
|
1196
|
+
.hjm-skeleton[data-shape="media"] { min-block-size: 0; aspect-ratio: var(--hjm-skeleton-media-aspect); }
|
|
1197
|
+
.hjm-skeleton[data-shape="button"] { min-block-size: var(--hjm-skeleton-button-height); }
|
|
1198
|
+
.hjm-skeleton-lines { display: flex; flex-direction: column; gap: var(--hjm-skeleton-lines-gap); inline-size: 100%; }
|
|
1199
|
+
.hjm-skeleton-lines > [data-last] { inline-size: var(--hjm-skeleton-last-line-width); }
|
|
1200
|
+
.hjm-skeleton[data-animated="true"], .hjm-skeleton-lines[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
|
|
1175
1201
|
|
|
1176
1202
|
/* CommandPalette ---------------------------------------------------------- */
|
|
1177
1203
|
/*
|
|
@@ -1236,7 +1262,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1236
1262
|
}
|
|
1237
1263
|
.hjm-data-table[data-density="compact"] .hjm-data-table__table th,
|
|
1238
1264
|
.hjm-data-table[data-density="compact"] .hjm-data-table__table td { padding: var(--hjm-space-xs) var(--hjm-space-sm); }
|
|
1239
|
-
.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-
|
|
1265
|
+
.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1240
1266
|
.hjm-data-table__selector { inline-size: var(--hjm-control-min-touch-target); }
|
|
1241
1267
|
.hjm-data-table__sort {
|
|
1242
1268
|
display: inline-flex;
|
|
@@ -1277,7 +1303,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1277
1303
|
.hjm-data-table__table .hjm-data-table__pinned { position: sticky; z-index: 1; background: var(--hjm-color-bg); }
|
|
1278
1304
|
.hjm-data-table__table .hjm-data-table__pinned-edge { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
|
|
1279
1305
|
.hjm-data-table__table .hjm-data-table__pinned-edge:dir(rtl) { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
|
|
1280
|
-
.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-
|
|
1306
|
+
.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); }
|
|
1281
1307
|
|
|
1282
1308
|
/* DataTable family (2026-10-14): header bands, row groups, sub-row indent, tone/heat, bounded
|
|
1283
1309
|
height. Colors mirror dataTableFamilyRecipe; heat is a background-image so pinned cells keep
|
|
@@ -1291,7 +1317,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1291
1317
|
background: var(--hjm-color-surface-alt);
|
|
1292
1318
|
color: var(--hjm-color-text-muted);
|
|
1293
1319
|
font-size: var(--hjm-type-label-size);
|
|
1294
|
-
font-weight: var(--hjm-
|
|
1320
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
1295
1321
|
text-align: start;
|
|
1296
1322
|
}
|
|
1297
1323
|
/* The label stays in view while a wide table scrolls sideways. */
|
|
@@ -1308,37 +1334,37 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1308
1334
|
.hjm-table-family { min-inline-size: 0; overflow-x: auto; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
|
|
1309
1335
|
.hjm-line-score__table, .hjm-matrix-table__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
|
|
1310
1336
|
.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; }
|
|
1311
|
-
.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
1312
|
-
.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-
|
|
1337
|
+
.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); }
|
|
1338
|
+
.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); }
|
|
1313
1339
|
.hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
|
|
1314
|
-
.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-
|
|
1340
|
+
.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
|
|
1315
1341
|
.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)); }
|
|
1316
1342
|
.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); }
|
|
1317
1343
|
.hjm-line-score__table .hjm-line-score__team { inset-inline-start: 0; }
|
|
1318
1344
|
.hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
|
|
1319
|
-
.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1345
|
+
.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1320
1346
|
.hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
|
|
1321
1347
|
.hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
|
|
1322
|
-
.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-
|
|
1348
|
+
.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); }
|
|
1323
1349
|
/* A collapsed-table border stays with the table, not the pinned cell, so the edge is an inset shadow. */
|
|
1324
1350
|
.hjm-line-score__total-edge { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
|
|
1325
1351
|
.hjm-line-score__total-edge:dir(rtl) { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
|
|
1326
|
-
.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-
|
|
1352
|
+
.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
|
|
1327
1353
|
.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); }
|
|
1328
|
-
.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-
|
|
1329
|
-
.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1354
|
+
.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); }
|
|
1355
|
+
.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); }
|
|
1330
1356
|
.hjm-matrix-table__table td { color: var(--hjm-color-text-muted); }
|
|
1331
1357
|
.hjm-matrix-table__table thead td { border-block-start: 0; }
|
|
1332
1358
|
.hjm-matrix-table__self { background: var(--hjm-color-surface-alt); }
|
|
1333
1359
|
.hjm-matrix-table__table tr[data-highlighted] > * { background-color: var(--hjm-table-family-selected); }
|
|
1334
1360
|
.hjm-comparison-table { padding-block: var(--hjm-space-xs); }
|
|
1335
|
-
.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-
|
|
1361
|
+
.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); }
|
|
1336
1362
|
.hjm-comparison-table__rows { margin: 0; padding: 0; list-style: none; }
|
|
1337
1363
|
.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); }
|
|
1338
1364
|
.hjm-comparison-table__rows:first-child > :first-child { border-block-start: 0; }
|
|
1339
1365
|
.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); }
|
|
1340
1366
|
.hjm-comparison-table__values > :last-child { text-align: end; }
|
|
1341
|
-
.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
1367
|
+
.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1342
1368
|
.hjm-comparison-table__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); }
|
|
1343
1369
|
.hjm-comparison-table__bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hjm-space-sm); block-size: 5px; }
|
|
1344
1370
|
.hjm-comparison-table__track { display: flex; justify-content: flex-end; border-radius: 2px; background: var(--hjm-color-surface-alt); overflow: hidden; }
|
|
@@ -1364,8 +1390,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1364
1390
|
.hjm-chart__cursor { stroke: var(--hjm-chart-axis-label); }
|
|
1365
1391
|
.hjm-chart__dot { stroke: var(--hjm-color-bg); }
|
|
1366
1392
|
.hjm-chart__label { fill: var(--hjm-chart-axis-label); font-family: inherit; font-size: var(--hjm-type-caption-size); }
|
|
1367
|
-
.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-
|
|
1368
|
-
.hjm-chart__extreme { font-weight: var(--hjm-
|
|
1393
|
+
.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); }
|
|
1394
|
+
.hjm-chart__extreme { font-weight: var(--hjm-text-emphasis-medium); }
|
|
1369
1395
|
.hjm-chart__bubble {
|
|
1370
1396
|
position: absolute;
|
|
1371
1397
|
inset-block-start: 0;
|
|
@@ -1377,7 +1403,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1377
1403
|
color: var(--hjm-chart-tooltip-content);
|
|
1378
1404
|
font-size: var(--hjm-type-caption-size);
|
|
1379
1405
|
line-height: var(--hjm-type-caption-line-height);
|
|
1380
|
-
font-weight: var(--hjm-
|
|
1406
|
+
font-weight: var(--hjm-text-emphasis-medium);
|
|
1381
1407
|
white-space: nowrap;
|
|
1382
1408
|
pointer-events: none;
|
|
1383
1409
|
}
|
|
@@ -1385,7 +1411,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1385
1411
|
.hjm-chart__pie-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
|
|
1386
1412
|
.hjm-chart__slice[role="button"], .hjm-chart--pie .hjm-chart__slice[data-id] { cursor: pointer; }
|
|
1387
1413
|
.hjm-chart__slice:focus-visible { outline: none; stroke: var(--hjm-color-focus); stroke-width: var(--hjm-focus-width); }
|
|
1388
|
-
.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-
|
|
1414
|
+
.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
1389
1415
|
.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); }
|
|
1390
1416
|
.hjm-chart-legend {
|
|
1391
1417
|
display: flex;
|
|
@@ -1418,7 +1444,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1418
1444
|
.hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
|
|
1419
1445
|
.hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
|
|
1420
1446
|
.hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
|
|
1421
|
-
.hjm-chart-legend__value { font-weight: var(--hjm-
|
|
1447
|
+
.hjm-chart-legend__value { font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
|
|
1422
1448
|
|
|
1423
1449
|
/* Mentions ---------------------------------------------------------------- */
|
|
1424
1450
|
/*
|
|
@@ -1479,7 +1505,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1479
1505
|
padding-inline: var(--hjm-space-sm);
|
|
1480
1506
|
border-block-end: 1px solid var(--hjm-color-border);
|
|
1481
1507
|
}
|
|
1482
|
-
.hjm-transfer-list__title { font-weight: var(--hjm-
|
|
1508
|
+
.hjm-transfer-list__title { font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
|
|
1483
1509
|
.hjm-transfer-list__select-all { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
|
|
1484
1510
|
/* These rows center the indicator, so drop the 2px top offset Checkbox uses to sit on its first text line. */
|
|
1485
1511
|
.hjm-transfer-list__select-all > .hjm-choice__indicator,
|
|
@@ -1732,6 +1758,42 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1732
1758
|
margin-block-start: var(--hjm-auth-screen-footer-gap);
|
|
1733
1759
|
text-align: center;
|
|
1734
1760
|
}
|
|
1761
|
+
/* 히어로 문구와 정책 링크(AuthScreenHero·AuthScreenFooter). 글자 단계·간격은 계약 값이다. */
|
|
1762
|
+
.hjm-auth-screen__copy { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
|
|
1763
|
+
.hjm-auth-screen__footer-content { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
|
|
1764
|
+
.hjm-auth-screen__links {
|
|
1765
|
+
display: flex;
|
|
1766
|
+
flex-wrap: wrap;
|
|
1767
|
+
justify-content: center;
|
|
1768
|
+
align-items: center;
|
|
1769
|
+
column-gap: var(--hjm-auth-screen-link-gap);
|
|
1770
|
+
}
|
|
1771
|
+
/* 2026-10-17 "간격 줄여": 보이는 간격은 gap + 구분점뿐이다. 44 터치 높이는 배경 없는 min-block-size,
|
|
1772
|
+
가로 터치 폭은 보이지 않는 가상 요소가 구분점 앞까지 넓힌다 — 버튼 안쪽 여백으로 만들면 글자 사이가 다시 벌어진다. */
|
|
1773
|
+
.hjm-auth-screen__link {
|
|
1774
|
+
position: relative;
|
|
1775
|
+
display: inline-flex;
|
|
1776
|
+
align-items: center;
|
|
1777
|
+
min-block-size: var(--hjm-auth-screen-link-target);
|
|
1778
|
+
margin: 0;
|
|
1779
|
+
padding: 0;
|
|
1780
|
+
border: 0;
|
|
1781
|
+
background: none;
|
|
1782
|
+
font-family: var(--hjm-font-family-ui, inherit);
|
|
1783
|
+
text-decoration: underline;
|
|
1784
|
+
text-underline-offset: 0.18em;
|
|
1785
|
+
cursor: pointer;
|
|
1786
|
+
}
|
|
1787
|
+
.hjm-auth-screen__link::after {
|
|
1788
|
+
content: "";
|
|
1789
|
+
position: absolute;
|
|
1790
|
+
inset-block: 0;
|
|
1791
|
+
inset-inline: calc(var(--hjm-auth-screen-link-gap) * -1);
|
|
1792
|
+
}
|
|
1793
|
+
.hjm-auth-screen__link:focus-visible {
|
|
1794
|
+
outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
|
|
1795
|
+
outline-offset: var(--hjm-focus-offset);
|
|
1796
|
+
}
|
|
1735
1797
|
|
|
1736
1798
|
/* Sidebar ----------------------------------------------------------------- */
|
|
1737
1799
|
.hjm-sidebar {
|
|
@@ -1781,7 +1843,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1781
1843
|
.hjm-sidebar__item[aria-current="page"] {
|
|
1782
1844
|
background: var(--hjm-color-bg);
|
|
1783
1845
|
color: var(--hjm-color-content-brand);
|
|
1784
|
-
font-weight: var(--hjm-
|
|
1846
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
1785
1847
|
box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
1786
1848
|
.hjm-sidebar__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
|
|
1787
1849
|
.hjm-sidebar__item:focus-visible,
|
|
@@ -1816,7 +1878,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
1816
1878
|
border-color: var(--hjm-color-focus);
|
|
1817
1879
|
background: var(--hjm-color-bg);
|
|
1818
1880
|
color: var(--hjm-color-content-brand);
|
|
1819
|
-
font-weight: var(--hjm-
|
|
1881
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
1820
1882
|
}
|
|
1821
1883
|
.hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
|
|
1822
1884
|
.hjm-toggle-group__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2155,12 +2217,18 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2155
2217
|
title line-height or patched this private selector to achieve this alignment. */
|
|
2156
2218
|
.hjm-sheet__header { align-items: center; }
|
|
2157
2219
|
.hjm-sheet__header > div { min-inline-size: 0; }
|
|
2220
|
+
/* Sheets have no visible title (2026-10-17 user decision); a header holds only the description and/or ×,
|
|
2221
|
+
and the × stays at the inline end even when there is no description. */
|
|
2222
|
+
.hjm-sheet__header > div { flex: 1 1 auto; }
|
|
2223
|
+
.hjm-sheet__header > .hjm-dialog__close { margin-inline-start: auto; }
|
|
2224
|
+
/* Overlay titles render h2: without an explicit weight they fell back to the UA bold (700) instead of
|
|
2225
|
+
the recipe's title weight (2026-10-17 lighter scale). */
|
|
2158
2226
|
.hjm-dialog__title,
|
|
2159
|
-
.hjm-sheet__title,
|
|
2160
2227
|
.hjm-alert-dialog__title {
|
|
2161
2228
|
margin: 0;
|
|
2162
2229
|
font-size: var(--hjm-type-title-size);
|
|
2163
2230
|
line-height: var(--hjm-type-title-line-height);
|
|
2231
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2164
2232
|
overflow-wrap: anywhere;
|
|
2165
2233
|
}
|
|
2166
2234
|
.hjm-dialog__description,
|
|
@@ -2255,7 +2323,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2255
2323
|
}
|
|
2256
2324
|
.hjm-sheet__header,
|
|
2257
2325
|
.hjm-sheet__footer { flex: 0 0 auto; }
|
|
2258
|
-
|
|
2326
|
+
/* The header sits inside the drag zone (.hjm-sheet__drag, 2026-10-16), so a direct-child selector stopped matching and
|
|
2327
|
+
the Dialog's 20px top padding leaked in; scope by the sheet instead. */
|
|
2328
|
+
.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); }
|
|
2259
2329
|
.hjm-sheet > .hjm-sheet__footer { padding: var(--hjm-space-sm) var(--hjm-space-lg) 0; }
|
|
2260
2330
|
.hjm-sheet__body {
|
|
2261
2331
|
min-block-size: 0;
|
|
@@ -2348,6 +2418,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2348
2418
|
margin: 0;
|
|
2349
2419
|
font-size: var(--hjm-type-title-size);
|
|
2350
2420
|
line-height: var(--hjm-type-title-line-height);
|
|
2421
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2351
2422
|
overflow-wrap: anywhere;
|
|
2352
2423
|
}
|
|
2353
2424
|
.hjm-side-panel__description {
|
|
@@ -2400,7 +2471,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2400
2471
|
pointer-events: auto;
|
|
2401
2472
|
}
|
|
2402
2473
|
.hjm-tour__counter { margin: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
2403
|
-
.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; }
|
|
2474
|
+
.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; }
|
|
2404
2475
|
.hjm-tour__description { margin: var(--hjm-space-xs) 0 0; color: var(--hjm-color-text-body); overflow-wrap: anywhere; }
|
|
2405
2476
|
.hjm-tour__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hjm-space-xs); }
|
|
2406
2477
|
.hjm-tour:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2459,12 +2530,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2459
2530
|
.hjm-menu__item:hover,
|
|
2460
2531
|
.hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
|
|
2461
2532
|
.hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
|
|
2462
|
-
.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-
|
|
2533
|
+
.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2463
2534
|
.hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
2464
2535
|
.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; }
|
|
2465
|
-
.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-
|
|
2536
|
+
.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); }
|
|
2466
2537
|
.hjm-menu__separator { block-size: 1px; margin: var(--hjm-space-xxs) var(--hjm-space-xs); background: var(--hjm-color-border); }
|
|
2467
|
-
.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-
|
|
2538
|
+
.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2468
2539
|
.hjm-menu__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
2469
2540
|
.hjm-menu__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
2470
2541
|
.hjm-menu__leading,
|
|
@@ -2486,13 +2557,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2486
2557
|
.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; }
|
|
2487
2558
|
.hjm-select__native + .hjm-select__indicator { margin-inline-start: calc(-1 * var(--hjm-space-lg)); }
|
|
2488
2559
|
.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); }
|
|
2489
|
-
.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-
|
|
2560
|
+
.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); }
|
|
2490
2561
|
.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; }
|
|
2491
2562
|
.hjm-select[data-density="comfortable"] .hjm-select__option,
|
|
2492
2563
|
.hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
|
|
2493
2564
|
.hjm-select__option { cursor: pointer; }
|
|
2494
2565
|
.hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
2495
|
-
.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-
|
|
2566
|
+
.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
|
|
2496
2567
|
.hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
2497
2568
|
.hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
|
|
2498
2569
|
.hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
|
|
@@ -2533,7 +2604,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2533
2604
|
.hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
|
|
2534
2605
|
.hjm-combobox__option { cursor: pointer; }
|
|
2535
2606
|
.hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
|
|
2536
|
-
.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-
|
|
2607
|
+
.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
|
|
2537
2608
|
.hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
|
|
2538
2609
|
.hjm-combobox__message { color: var(--hjm-color-text-muted); }
|
|
2539
2610
|
.hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
|
|
@@ -2556,7 +2627,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2556
2627
|
.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); }
|
|
2557
2628
|
.hjm-timeline__content { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block-end: var(--hjm-space-xxs); }
|
|
2558
2629
|
.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); }
|
|
2559
|
-
.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2630
|
+
.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
2560
2631
|
/* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
|
|
2561
2632
|
.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); }
|
|
2562
2633
|
.hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
@@ -2575,7 +2646,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2575
2646
|
color: var(--hjm-color-text-body);
|
|
2576
2647
|
background: transparent;
|
|
2577
2648
|
font: inherit;
|
|
2578
|
-
font-weight: var(--hjm-
|
|
2649
|
+
font-weight: var(--hjm-type-title-weight);
|
|
2579
2650
|
text-align: start;
|
|
2580
2651
|
cursor: pointer;
|
|
2581
2652
|
}
|
|
@@ -2595,7 +2666,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2595
2666
|
border-radius: 50%;
|
|
2596
2667
|
color: var(--hjm-color-text-muted);
|
|
2597
2668
|
background: var(--hjm-color-bg);
|
|
2598
|
-
font-weight: var(--hjm-
|
|
2669
|
+
font-weight: var(--hjm-text-emphasis-strong);
|
|
2599
2670
|
}
|
|
2600
2671
|
.hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
|
|
2601
2672
|
.hjm-avatar[data-size="large"] { inline-size: 3rem; block-size: 3rem; }
|
|
@@ -2610,11 +2681,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2610
2681
|
.hjm-divider[data-orientation="horizontal"][data-inset="both"] { margin-inline: var(--hjm-space-md); inline-size: calc(100% - (2 * var(--hjm-space-md))); }
|
|
2611
2682
|
.hjm-description-list { display: grid; grid-template-columns: repeat(var(--hjm-description-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); margin: 0; }
|
|
2612
2683
|
.hjm-description-list__item { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
|
|
2613
|
-
.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-
|
|
2684
|
+
.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2614
2685
|
.hjm-description-list__value { margin: 0; color: var(--hjm-color-text); overflow-wrap: anywhere; }
|
|
2615
2686
|
.hjm-table-scroll { max-inline-size: 100%; overflow: auto; outline-offset: 2px; }
|
|
2616
2687
|
.hjm-table { inline-size: 100%; border-collapse: collapse; color: var(--hjm-color-text-body); }
|
|
2617
|
-
.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2688
|
+
.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); text-align: start; }
|
|
2618
2689
|
.hjm-table__header,
|
|
2619
2690
|
.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; }
|
|
2620
2691
|
.hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-bg); }
|
|
@@ -2629,7 +2700,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2629
2700
|
.hjm-pagination__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xxs); margin: 0; padding: 0; list-style: none; }
|
|
2630
2701
|
.hjm-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-inline-size: 0; }
|
|
2631
2702
|
.hjm-breadcrumb__link { color: var(--hjm-color-text-muted); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
|
|
2632
|
-
.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2703
|
+
.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
|
|
2633
2704
|
.hjm-breadcrumb__separator { color: var(--hjm-color-text-weak); }
|
|
2634
2705
|
[dir="rtl"] .hjm-breadcrumb__separator[data-default="true"],
|
|
2635
2706
|
[dir="rtl"] .hjm-pagination__previous > span,
|
|
@@ -2646,13 +2717,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2646
2717
|
}
|
|
2647
2718
|
.hjm-pagination__item { color: var(--hjm-color-text-body); background: transparent; font: inherit; cursor: pointer; }
|
|
2648
2719
|
.hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-bg); }
|
|
2649
|
-
.hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-
|
|
2720
|
+
.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); }
|
|
2650
2721
|
.hjm-pagination__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
|
|
2651
2722
|
.hjm-pagination__ellipsis { color: var(--hjm-color-text-muted); }
|
|
2652
2723
|
.hjm-load-more { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding-block: var(--hjm-space-lg); text-align: center; }
|
|
2653
2724
|
.hjm-load-more[data-density="compact"] { gap: var(--hjm-space-xs); padding-block: var(--hjm-space-sm); }
|
|
2654
2725
|
.hjm-load-more__sentinel { inline-size: 1px; block-size: 1px; }
|
|
2655
|
-
.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-
|
|
2726
|
+
.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; }
|
|
2656
2727
|
.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); }
|
|
2657
2728
|
.hjm-load-more__error { color: var(--hjm-color-danger); }
|
|
2658
2729
|
.hjm-load-more__end { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); }
|
|
@@ -2662,23 +2733,23 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2662
2733
|
.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; }
|
|
2663
2734
|
.hjm-steps__step { min-inline-size: 0; display: grid; align-content: start; gap: var(--hjm-space-xs); }
|
|
2664
2735
|
.hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
|
|
2665
|
-
.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-
|
|
2736
|
+
.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); }
|
|
2666
2737
|
.hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
|
|
2667
2738
|
.hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
|
|
2668
2739
|
.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); }
|
|
2669
2740
|
.hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
|
|
2670
2741
|
.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); }
|
|
2671
2742
|
.hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
|
|
2672
|
-
.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-
|
|
2743
|
+
.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; }
|
|
2673
2744
|
.hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
|
|
2674
2745
|
.hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
|
|
2675
2746
|
.hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
|
|
2676
2747
|
|
|
2677
2748
|
.hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
|
|
2678
|
-
.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2749
|
+
.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2679
2750
|
.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; }
|
|
2680
2751
|
.hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-bg); }
|
|
2681
|
-
.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-
|
|
2752
|
+
.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; }
|
|
2682
2753
|
.hjm-file-picker__hint { color: var(--hjm-color-text-muted); }
|
|
2683
2754
|
.hjm-file-picker__error { color: var(--hjm-color-danger); }
|
|
2684
2755
|
|
|
@@ -2697,7 +2768,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2697
2768
|
.hjm-upload-item__action { flex: 0 0 auto; margin-inline-start: auto; }
|
|
2698
2769
|
|
|
2699
2770
|
.hjm-date-picker { display: grid; gap: var(--hjm-space-xs); }
|
|
2700
|
-
.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-
|
|
2771
|
+
.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
|
|
2701
2772
|
.hjm-date-picker__anchor { position: relative; display: flex; align-items: center; }
|
|
2702
2773
|
.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; }
|
|
2703
2774
|
/* datePickerRecipe.sizes.large.minHeight is control.buttonHeight.large (52), as Select/NumberField large. Web drew 56 until 2026-10-06. */
|
|
@@ -2739,7 +2810,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2739
2810
|
downward while the lead column and close stay beside the first line. */
|
|
2740
2811
|
.hjm-toast__content { grid-column: 2; grid-row: 1; align-self: start; min-inline-size: 0; min-block-size: var(--hjm-toast-anchor-size); display: grid; align-content: start; gap: var(--hjm-space-xxs); overflow-wrap: anywhere; word-break: keep-all; }
|
|
2741
2812
|
.hjm-toast__content > :first-child { margin-block-start: calc((var(--hjm-toast-anchor-size) - 1lh) / 2); }
|
|
2742
|
-
.hjm-toast__title { font-weight: var(--hjm-
|
|
2813
|
+
.hjm-toast__title { font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-toast-title-line-height, 1.35); }
|
|
2743
2814
|
.hjm-toast__description { color: var(--hjm-toast-description-color); line-height: var(--hjm-toast-description-line-height, 1.45); }
|
|
2744
2815
|
.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; }
|
|
2745
2816
|
.hjm-toast__close:hover { color: var(--hjm-color-text); }
|
|
@@ -2751,9 +2822,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2751
2822
|
.hjm-toast__progress-step { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); color: var(--hjm-toast-progress-label); }
|
|
2752
2823
|
.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); }
|
|
2753
2824
|
.hjm-toast__progress-step[data-state="done"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); }
|
|
2754
|
-
.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-
|
|
2825
|
+
.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-text-emphasis-strong); }
|
|
2755
2826
|
.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)); }
|
|
2756
|
-
.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start); min-block-size: var(--hjm-control-min-touch-target); max-inline-size: 100%; padding-inline: var(--hjm-space-md); border: 0; border-radius: 999px; color: var(--hjm-toast-action-color); background: var(--hjm-toast-action-background); font: inherit; font-weight: var(--hjm-
|
|
2827
|
+
.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; }
|
|
2757
2828
|
.hjm-toast__action:hover { filter: brightness(0.97); }
|
|
2758
2829
|
.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); }
|
|
2759
2830
|
|
|
@@ -2785,6 +2856,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2785
2856
|
.hjm-root[data-motion="reduced"] .hjm-button__spinner,
|
|
2786
2857
|
.hjm-root[data-motion="reduced"] .hjm-spinner__glyph,
|
|
2787
2858
|
.hjm-root[data-motion="reduced"] .hjm-skeleton,
|
|
2859
|
+
.hjm-root[data-motion="reduced"] .hjm-skeleton-lines,
|
|
2788
2860
|
.hjm-root[data-motion="reduced"] .hjm-combobox__spinner {
|
|
2789
2861
|
animation: none;
|
|
2790
2862
|
}
|
|
@@ -2802,6 +2874,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2802
2874
|
.hjm-button__spinner,
|
|
2803
2875
|
.hjm-spinner__glyph,
|
|
2804
2876
|
.hjm-skeleton,
|
|
2877
|
+
.hjm-skeleton-lines,
|
|
2805
2878
|
.hjm-combobox__spinner {
|
|
2806
2879
|
animation: none;
|
|
2807
2880
|
}
|
|
@@ -2826,7 +2899,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2826
2899
|
.hjm-top-bar__trailing { justify-content: flex-end; }
|
|
2827
2900
|
.hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
|
|
2828
2901
|
.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); }
|
|
2829
|
-
.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-
|
|
2902
|
+
.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); }
|
|
2830
2903
|
.hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
|
|
2831
2904
|
.hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
2832
2905
|
.hjm-top-bar[data-centered="false"] .hjm-top-bar__title { text-align: start; }
|
|
@@ -2837,7 +2910,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2837
2910
|
.hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: var(--hjm-layer-sticky); }
|
|
2838
2911
|
/* Inside ScreenLayout's footer the footer owns border, padding, surface and safe area; BottomCTA keeps only its copy,
|
|
2839
2912
|
actions and an explicit safeAreaBottom (2026-10-17: the doubled bar inset the buttons twice). */
|
|
2840
|
-
|
|
2913
|
+
/* The screen footer already pads max(screen padding, env(safe-area-inset-bottom)); an explicit safeAreaBottom adds only
|
|
2914
|
+
the remainder so the gap is max(footer, inset), not their sum (2026-10-17 "버튼 아래 여백이 많아"). */
|
|
2915
|
+
.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; }
|
|
2841
2916
|
.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; }
|
|
2842
2917
|
.hjm-bottom-cta__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-bottom-cta-gap); }
|
|
2843
2918
|
/* bottomCtaRecipe.contentMaxWidth: the surface spans the viewport, its copy and actions stop at the reading width. */
|
|
@@ -2875,7 +2950,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2875
2950
|
the grid instead of shrinking dates or wrapping a week onto another row. */
|
|
2876
2951
|
.hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; max-inline-size: var(--hjm-calendar-max-width); }
|
|
2877
2952
|
.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); }
|
|
2878
|
-
.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-
|
|
2953
|
+
.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); }
|
|
2879
2954
|
.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; }
|
|
2880
2955
|
.hjm-calendar__viewport { overflow-x: auto; padding: var(--hjm-space-xxs); }
|
|
2881
2956
|
.hjm-calendar__grid { min-inline-size: calc(7 * var(--hjm-calendar-cell-size)); }
|
|
@@ -2904,7 +2979,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2904
2979
|
.hjm-anchor__list { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); list-style: none; margin: 0; padding: 0; }
|
|
2905
2980
|
.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; }
|
|
2906
2981
|
.hjm-anchor__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
|
|
2907
|
-
.hjm-anchor__link[aria-current="location"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-focus); font-weight: var(--hjm-
|
|
2982
|
+
.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); }
|
|
2908
2983
|
.hjm-anchor__link:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
2909
2984
|
.hjm-anchor[data-orientation="horizontal"] .hjm-anchor__list { flex-direction: row; flex-wrap: wrap; }
|
|
2910
2985
|
.hjm-anchor[data-orientation="horizontal"] .hjm-anchor__link { border-inline-start: 0; border-block-end: 2px solid transparent; }
|
|
@@ -2915,7 +2990,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2915
2990
|
.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); }
|
|
2916
2991
|
.hjm-popover[data-state="closed"] { pointer-events: none; animation-name: hjm-popover-out; }
|
|
2917
2992
|
.hjm-popover__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hjm-space-xs); }
|
|
2918
|
-
.hjm-popover__title { flex: 1 1 50%; min-inline-size: 0; margin: 0; font-size: var(--hjm-type-body-size); font-weight: var(--hjm-
|
|
2993
|
+
.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; }
|
|
2919
2994
|
.hjm-popover__description { margin-block: var(--hjm-space-xs) var(--hjm-space-md); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
|
|
2920
2995
|
.hjm-popover__body { min-inline-size: 0; padding-block-start: var(--hjm-space-xs); overflow-wrap: anywhere; }
|
|
2921
2996
|
.hjm-popover:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
|
|
@@ -2978,7 +3053,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
|
|
|
2978
3053
|
.hjm-menu-morph__measure { position: absolute; visibility: hidden; pointer-events: none; inset-block-start: 0; inset-inline-start: 0; }
|
|
2979
3054
|
.hjm-menu-morph__surface { color: var(--hjm-color-text); background: var(--hjm-color-bg); border: 1px solid var(--hjm-color-border-control); }
|
|
2980
3055
|
.hjm-menu-morph[data-open="false"] .hjm-menu-morph__surface { box-shadow: none !important; }
|
|
2981
|
-
.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-
|
|
3056
|
+
.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); }
|
|
2982
3057
|
.hjm-menu-morph [role="button"]:focus-visible, .hjm-menu-morph__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
|
|
2983
3058
|
.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; }
|
|
2984
3059
|
.hjm-menu-morph__item:hover, .hjm-menu-morph__item:focus { background: var(--hjm-color-bg); }
|
|
@@ -3166,7 +3241,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3166
3241
|
.hjm-screen__exit-glyph[data-kind="back"]:dir(rtl) { transform: scaleX(-1); }
|
|
3167
3242
|
|
|
3168
3243
|
.hjm-image-choice { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
|
|
3169
|
-
.hjm-image-choice__label { font-weight:
|
|
3244
|
+
.hjm-image-choice__label { font-weight: var(--hjm-text-emphasis-medium); }
|
|
3170
3245
|
.hjm-image-choice__tiles { display: flex; flex-wrap: wrap; gap: var(--hjm-image-choice-gap); }
|
|
3171
3246
|
.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; }
|
|
3172
3247
|
.hjm-image-choice__tile[data-selected] { border-color: var(--hjm-color-content-brand); }
|
|
@@ -3224,7 +3299,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3224
3299
|
.hjm-comment-row__like { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; margin-block-start: calc((var(--hjm-comment-anchor-line) - var(--hjm-control-button-medium)) / 2); }
|
|
3225
3300
|
.hjm-comment-row__like[data-edge="end"] { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
|
|
3226
3301
|
.hjm-comment-row__like-count { text-align: center; }
|
|
3227
|
-
.hjm-comment-row__action { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--hjm-color-text-muted); font: inherit; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight:
|
|
3302
|
+
.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; }
|
|
3228
3303
|
.hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
|
|
3229
3304
|
.hjm-comment-row__action:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
|
|
3230
3305
|
.hjm-chat-screen__jump { position: absolute; inset-block-end: calc(100% + var(--hjm-space-xs) + var(--hjm-screen-padding)); inset-inline-end: 0; }
|
|
@@ -3295,7 +3370,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3295
3370
|
.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); }
|
|
3296
3371
|
.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); }
|
|
3297
3372
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
|
|
3298
|
-
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-
|
|
3373
|
+
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
|
|
3299
3374
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); }
|
|
3300
3375
|
.hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
|
|
3301
3376
|
|
|
@@ -3344,12 +3419,12 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
|
|
|
3344
3419
|
|
|
3345
3420
|
/* Text radio navigation shares the selection engine and its focus behavior. */
|
|
3346
3421
|
.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; }
|
|
3347
|
-
.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:
|
|
3422
|
+
.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); }
|
|
3348
3423
|
.hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
|
|
3349
|
-
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:
|
|
3424
|
+
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
|
|
3350
3425
|
.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
|
|
3351
|
-
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:
|
|
3352
|
-
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:
|
|
3426
|
+
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:var(--hjm-text-emphasis-regular); }
|
|
3427
|
+
.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:var(--hjm-text-emphasis-strong); }
|
|
3353
3428
|
|
|
3354
3429
|
/* Long read-only records need a stable label column across wrapped values. */
|
|
3355
3430
|
.hjm-description-list[data-layout="inline"] { gap: 0; }
|