@hjmds/react 1.4.0 → 1.5.0

package/dist/styles.css

@@ -62,8 +62,12 @@
 .hjm-text[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-text[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
 
+/* Long unbroken copy (URLs, e-mail, identifiers) must wrap inside layout
+   containers instead of pushing them past the viewport; found by the 1.5.0
+   long-copy scenario proof. overflow-wrap inherits, so text children follow. */
 .hjm-surface {
   min-inline-size: 0;
+  overflow-wrap: anywhere;
   border: 1px solid transparent;
   border-radius: var(--hjm-radius-lg);
   background: var(--hjm-color-surface);
@@ -235,8 +239,8 @@
 /* Toggle treatment: aria-pressed already carried the state, so without a paired
    visual every consumer painted the selected background in product styles. */
 .hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-surface-accent); border-color: var(--hjm-color-content-brand); }
-.hjm-button:active:not(:disabled):not([aria-disabled="true"]), .hjm-icon-button:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.98); }
-.hjm-button:disabled, .hjm-icon-button:disabled { cursor: not-allowed; opacity: 0.5; }
+.hjm-button:active:not(:disabled):not([aria-disabled="true"]), .hjm-icon-button:active:not(:disabled):not([aria-disabled="true"]) { opacity: var(--hjm-button-pressed-opacity); }
+.hjm-button:disabled, .hjm-icon-button:disabled { cursor: not-allowed; opacity: var(--hjm-button-disabled-opacity); }
 /* 라벨은 자르지 않고 두 줄까지 접는다(buttonRecipe.label). 잘린 행동 라벨은 무엇을 하는
    버튼인지 잃고, 무제한 줄바꿈은 하단 CTA 행 같은 남의 레이아웃을 밀어낸다. */
 .hjm-button__label { min-inline-size: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hjm-button-label-lines, 2); overflow: hidden; }
@@ -265,7 +269,7 @@
 .hjm-icon-button[data-size="small"] { inline-size: var(--hjm-control-button-small); block-size: var(--hjm-control-button-small); min-inline-size: 0; min-block-size: 0; }
 .hjm-icon-button[data-size="small"]::after { content: ""; position: absolute; inset: calc(-1 * var(--hjm-space-xxs)); }
 .hjm-icon-button[data-size="large"] { inline-size: var(--hjm-control-button-large); block-size: var(--hjm-control-button-large); }
-.hjm-link { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); color: var(--hjm-color-content-brand); text-underline-offset: 0.18em; }
+.hjm-link { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; color: var(--hjm-color-content-brand); text-underline-offset: 0.18em; }
 .hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
 .hjm-link[data-variant="standalone"] { min-block-size: var(--hjm-control-min-touch-target); min-inline-size: var(--hjm-control-min-touch-target); justify-content: center; text-decoration: none; }
 .hjm-link[aria-disabled="true"] { opacity: 0.5; text-decoration: none; }
@@ -278,8 +282,8 @@
 .hjm-segmented__item:has(input:focus-visible),
 .hjm-tabs__tab:focus-visible,
 .hjm-list-row:focus-visible {
-  outline: 2px solid var(--hjm-color-content-brand);
-  outline-offset: 2px;
+  outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
+  outline-offset: var(--hjm-focus-offset);
 }
 
 .hjm-field { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
@@ -289,7 +293,7 @@
   align-items: center;
   min-block-size: var(--hjm-control-field-height);
   padding-inline: var(--hjm-space-md);
-  border: 1px solid var(--hjm-color-text-muted);
+  border: var(--hjm-field-border-width) solid var(--hjm-color-text-muted);
   border-radius: var(--hjm-radius-md);
   background: var(--hjm-color-surface);
 }
@@ -300,9 +304,9 @@
    unfocused frames differ by 1.06:1 in light and 1.44:1 in dark, so the state change
    reads as hue only. The wider ring makes it a shape change like every other control.
    See issue #19. */
-.hjm-field[data-state="focused"] .hjm-field__control { border-color: var(--hjm-color-content-brand); box-shadow: 0 0 0 2px var(--hjm-color-content-brand); }
+.hjm-field[data-state="focused"] .hjm-field__control { border-color: var(--hjm-color-content-brand); box-shadow: 0 0 0 var(--hjm-field-focus-ring-width) var(--hjm-color-content-brand); }
 .hjm-field[data-state="invalid"] .hjm-field__control { border-color: var(--hjm-color-danger); }
-.hjm-field[data-state="disabled"] { opacity: 0.6; }
+.hjm-field[data-state="disabled"] { opacity: var(--hjm-field-disabled-opacity); }
 .hjm-field__input {
   inline-size: 100%;
   min-inline-size: 0;
@@ -494,7 +498,7 @@
   overflow-wrap: anywhere;
 }
 .hjm-bottom-navigation__item:hover { background: var(--hjm-color-surface-alt); }
-.hjm-bottom-navigation__item:active { background: var(--hjm-color-surface-brand); }
+.hjm-bottom-navigation__item:active { background: var(--hjm-bottom-navigation-pressed-background); }
 .hjm-bottom-navigation__item:focus-visible {
   outline: 2px solid var(--hjm-color-content-brand);
   outline-offset: 2px;
@@ -893,7 +897,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row__title { color: var(--hjm-color-text-body); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
 .hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 
-.hjm-section { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
+.hjm-section { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; overflow-wrap: anywhere; }
 .hjm-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--hjm-space-sm); min-inline-size: 0; }
 .hjm-section__copy { display: grid; flex: 1 1 auto; gap: var(--hjm-space-xxs); min-inline-size: 0; }
 .hjm-section__title { margin: 0; color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
@@ -929,8 +933,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-statistic__value { color: var(--hjm-color-text); font-size: calc(var(--hjm-type-title-size) * var(--hjm-text-scale, 1)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .hjm-statistic__affix, .hjm-statistic__hint { color: var(--hjm-color-text-muted); }
 .hjm-statistic__trend { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); font-weight: var(--hjm-font-weight-medium); overflow-wrap: anywhere; }
-.hjm-statistic__trend[data-tone="success"] { color: var(--hjm-color-success); }
-.hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-color-warning); }
+.hjm-statistic__trend[data-tone="success"] { color: var(--hjm-accent-success); }
+.hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-accent-warning); }
 .hjm-statistic__trend[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-statistic-group { display: grid; grid-template-columns: repeat(var(--hjm-statistic-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); min-inline-size: 0; }
 @media (max-width: 640px) {
@@ -1594,8 +1598,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-heading {
   margin: 0;
   color: var(--hjm-color-text);
-  font-size: var(--hjm-heading-size);
-  line-height: var(--hjm-heading-line-height);
+  font-size: calc(var(--hjm-heading-size) * var(--hjm-text-scale, 1));
+  line-height: calc(var(--hjm-heading-line-height) * var(--hjm-text-scale, 1));
   font-weight: var(--hjm-heading-weight);
   overflow-wrap: anywhere;
 }
@@ -1630,8 +1634,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   min-inline-size: 0;
   flex: 1 1 auto;
   color: var(--hjm-color-text);
-  font-size: var(--hjm-top-title-size);
-  line-height: var(--hjm-top-title-line-height);
+  font-size: calc(var(--hjm-top-title-size) * var(--hjm-text-scale, 1));
+  line-height: calc(var(--hjm-top-title-line-height) * var(--hjm-text-scale, 1));
   font-weight: var(--hjm-top-title-weight);
   overflow-wrap: anywhere;
 }
@@ -1815,11 +1819,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   max-inline-size: calc(100vw - (2 * var(--hjm-space-md)));
   max-block-size: calc(100dvh - (2 * var(--hjm-space-md)));
   overflow: auto;
-  border: 1px solid var(--hjm-color-border);
-  border-radius: var(--hjm-radius-lg);
+  border: var(--hjm-dialog-border-width) solid var(--hjm-dialog-border);
+  border-radius: var(--hjm-dialog-radius);
   color: var(--hjm-color-text);
-  background: var(--hjm-color-surface);
-  box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
+  background: var(--hjm-dialog-background);
+  box-shadow: var(--hjm-dialog-shadow);
 }
 .hjm-dialog { inline-size: min(36rem, 100%); }
 .hjm-dialog[data-size="small"] { inline-size: min(28rem, 100%); }
@@ -1912,6 +1916,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sheet-positioner[data-placement="end"] { justify-content: flex-end; }
 .hjm-sheet {
   inline-size: min(28rem, 100%);
+  border: var(--hjm-sheet-border-width) solid var(--hjm-sheet-border);
+  border-radius: var(--hjm-sheet-radius);
+  background: var(--hjm-sheet-background);
+  box-shadow: var(--hjm-sheet-shadow);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1927,8 +1935,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   overscroll-behavior: contain;
 }
 .hjm-sheet[data-placement="bottom"] {
-  inline-size: min(48rem, 100%);
-  max-block-size: min(88dvh, 48rem);
+  inline-size: min(var(--hjm-sheet-max-width), 100%);
+  max-block-size: var(--hjm-sheet-max-height);
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -1951,10 +1959,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   cursor: pointer;
 }
 .hjm-sheet__handle:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; border-radius: var(--hjm-radius-full); }
-.hjm-sheet__handle-bar { inline-size: 2.25rem; block-size: 0.25rem; border-radius: var(--hjm-radius-full); background: var(--hjm-color-border-control); }
-.hjm-sheet[data-detent="medium"] { block-size: 60dvh; }
-.hjm-sheet[data-detent="large"] { block-size: 85dvh; }
-.hjm-sheet[data-detent="full"] { block-size: 100dvh; }
+.hjm-sheet__handle-bar { inline-size: var(--hjm-sheet-handle-width); block-size: var(--hjm-sheet-handle-height); border-radius: var(--hjm-radius-full); background: var(--hjm-sheet-handle-color); }
+.hjm-sheet[data-detent="medium"] { block-size: var(--hjm-sheet-size-medium); }
+.hjm-sheet[data-detent="large"] { block-size: var(--hjm-sheet-size-large); }
+.hjm-sheet[data-detent="full"] { block-size: var(--hjm-sheet-size-full); }
 .hjm-sheet[data-placement="start"],
 .hjm-sheet[data-placement="end"] {
   block-size: calc(100dvh - (2 * var(--hjm-space-md)));
@@ -2309,7 +2317,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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-surface); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
 .hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
 .hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
-.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-color-success); color: var(--hjm-color-success); background: var(--hjm-color-surface-alt); }
+.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-surface-alt); }
 .hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
 .hjm-steps__step[data-status="error"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-danger); color: var(--hjm-color-danger); background: var(--hjm-color-danger-fill); }
 .hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
@@ -2335,7 +2343,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-upload-item .hjm-progress__copy > span { min-inline-size: 0; unicode-bidi: plaintext; }
 .hjm-upload-item .hjm-progress__copy > span:first-child { flex: 0 0 auto; white-space: nowrap; }
 .hjm-upload-item .hjm-progress__copy > span:last-child:not(:first-child) { flex: 1 1 10rem; overflow-wrap: anywhere; text-align: end; }
-.hjm-upload-item[data-status="success"] .hjm-upload-item__status { color: var(--hjm-color-success); }
+.hjm-upload-item[data-status="success"] .hjm-upload-item__status { color: var(--hjm-accent-success); }
 .hjm-upload-item[data-status="error"] .hjm-upload-item__status { color: var(--hjm-color-danger); }
 .hjm-upload-item__action { flex: 0 0 auto; min-inline-size: var(--hjm-control-min-touch-target); min-block-size: var(--hjm-control-min-touch-target); margin-inline-start: auto; padding-inline: var(--hjm-space-sm); border: 0; color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); white-space: nowrap; word-break: keep-all; cursor: pointer; }
 .hjm-upload-item__action[data-action="cancel"] { color: var(--hjm-color-danger); }
@@ -2359,7 +2367,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast-viewport[data-placement$="-start"] { margin-inline-start: 0; }
 .hjm-toast-viewport[data-placement$="-end"] { margin-inline-end: 0; }
 /* Cards stay narrow on desktop too; keep close/action rows explicit (docs/toast.md). */
-.hjm-toast { position: relative; min-inline-size: 0; min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-md); overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text); background: var(--hjm-color-bg); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); pointer-events: auto; }
+.hjm-toast { position: relative; min-inline-size: 0; min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-md); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
 .hjm-toast__tone-mark { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--hjm-color-text-muted); }
 .hjm-toast[data-tone="info"] .hjm-toast__tone-mark, .hjm-toast[data-tone="info"] .hjm-toast__icon { color: var(--hjm-accent-info); background-color: var(--hjm-accent-info); }
 .hjm-toast[data-tone="success"] .hjm-toast__tone-mark, .hjm-toast[data-tone="success"] .hjm-toast__icon { color: var(--hjm-accent-success); background-color: var(--hjm-accent-success); }
@@ -2370,7 +2378,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast__action, .hjm-toast__close { min-block-size: var(--hjm-control-min-touch-target); border: 0; color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
 .hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; inline-size: var(--hjm-control-min-touch-target); color: var(--hjm-color-text-muted); }
 .hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: start; max-inline-size: 100%; overflow-wrap: anywhere; text-align: start; }
-.hjm-toast[data-state="closing"] { opacity: 0; transform: translateY(var(--hjm-space-xs)); transition: opacity 160ms ease, transform 160ms ease; }
+.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); }
 
 .hjm-dialog__close:focus-visible,
 .hjm-menu__item:focus-visible,