@ntmats/hc-ui 0.4.0 → 0.5.0

package/dist/styles.css

@@ -91,8 +91,8 @@
 }
 
 [data-hc-ds] .hc-ui-segmented__option:focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 
 [data-hc-ds] .hc-ui-segmented__option:disabled { opacity: 0.48; cursor: not-allowed; }
@@ -182,8 +182,8 @@
 [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):active:not(:disabled) { transform: scale(0.97); }
 
 [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 
 [data-hc-ds] :is(.hc-ui-button__icon, .hc-ui-icon-button__icon, .hc-ui-chip__icon) { display: inline-flex; flex: 0 0 auto; }
@@ -230,6 +230,10 @@
 [data-hc-ds] .hc-ui-button:disabled { opacity: 0.4; cursor: default; }
 [data-hc-ds] .hc-ui-button { max-width: 100%; }
 [data-hc-ds] .hc-ui-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* `wrap`: the label breaks onto more lines and the button grows; the 8px block padding
+   keeps a single line at the size's height. */
+[data-hc-ds] .hc-ui-button[data-wrap] { padding-block: var(--hc-space-2); white-space: normal; text-align: center; }
+[data-hc-ds] .hc-ui-button[data-wrap] .hc-ui-button__label { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
 [data-hc-ds] .hc-ui-button[aria-busy='true'] { cursor: progress; }
 [data-hc-ds] .hc-ui-button__spinner {
   flex: 0 0 auto;
@@ -367,7 +371,7 @@
 }
 [data-hc-ds] .hc-ui-chip__clear svg { display: block; }
 [data-hc-ds] .hc-ui-chip__clear:hover:not(:disabled) { color: var(--hc-color-text-primary); background-color: color-mix(in srgb, currentColor 18%, transparent); }
-[data-hc-ds] :is(.hc-ui-chip__main, .hc-ui-chip__clear):focus-visible { outline: 2px solid var(--hc-focus-ring); outline-offset: var(--hc-focus-ring-offset, 2px); }
+[data-hc-ds] :is(.hc-ui-chip__main, .hc-ui-chip__clear):focus-visible { outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring); outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width)); }
 [data-hc-ds] .hc-ui-chip__clear:disabled, [data-hc-ds] button.hc-ui-chip__main:disabled { cursor: default; }
 [data-hc-ds] .hc-ui-chip[data-disabled] { opacity: 0.4; }
 /* Selected with a remove button: the contrast fill at xs (HCUI's active quick filter), the accent otherwise. */
@@ -531,13 +535,16 @@
 [data-hc-ds] .hc-ui-meter[data-track='none'][data-cap='round'] .hc-ui-meter__fill { border-radius: 0 var(--hc-radius-full) var(--hc-radius-full) 0; }
 [data-hc-ds] .hc-ui-meter[data-cap='square'] .hc-ui-meter__fill { border-radius: 0; }
 [data-hc-ds] .hc-ui-meter[data-tone='over'] .hc-ui-meter__fill { background-color: var(--hc-color-danger); }
-/* Drawn only above the limit, over the danger fill: in the text color it shows in both themes. */
+/* Drawn only above the limit, over the danger fill: in the text color, with a 1px edge of
+   the surface on each side, so it stands apart from the red in both themes (dark on light,
+   light on dark) and from the track. */
 [data-hc-ds] .hc-ui-meter__limit {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: var(--hc-color-text-primary);
+  box-shadow: -1px 0 0 var(--hc-color-bg-surface), 1px 0 0 var(--hc-color-bg-surface);
 }
 [data-hc-ds] .hc-ui-meter[data-animated] .hc-ui-meter__fill { transition: width var(--hc-transition-base); }
 
@@ -611,8 +618,8 @@
 }
 [data-hc-ds] .hc-ui-checkbox__input:focus-visible { outline: none; }
 [data-hc-ds] .hc-ui-checkbox__input:focus-visible + .hc-ui-checkbox__box {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 [data-hc-ds] .hc-ui-checkbox__input:disabled + .hc-ui-checkbox__box {
   background-color: var(--hc-color-bg-muted);
@@ -630,7 +637,10 @@
 }
 
 /* Dialog — native <dialog> in the top layer. `sm` is HCUI's desktop confirmation
-   (.desktop-confirm); `md` is HCUI's Sheet in its centered desktop form. */
+   (.desktop-confirm); `md` is HCUI's Sheet in its centered desktop form. Both have the
+   panel's look (decision of 2026-11-07): `shadow-modal`, the entry and exit animation and
+   the backdrop's fade, none under reduced motion. The backdrop is not blurred: the panel
+   is solid (blur only behind translucent surfaces). */
 [data-hc-ds] .hc-ui-dialog {
   box-sizing: border-box;
   width: min(400px, calc(100vw - 32px));
@@ -644,15 +654,21 @@
   background-color: var(--hc-color-bg-elevated);
   border: 0;
   border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-modal);
   font-family: var(--hc-font-body);
   font-size: var(--hc-font-size-md);
   font-variation-settings: 'ROND' var(--hc-rond);
   line-height: var(--hc-line-height-md);
   outline: none;
+  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) both;
 }
 [data-hc-ds] .hc-ui-dialog[open] { display: grid; align-content: start; gap: var(--hc-space-2); }
-[data-hc-ds] .hc-ui-dialog::backdrop { background-color: var(--hc-color-bg-overlay); }
-[data-hc-ds] .hc-ui-dialog[data-closing] { pointer-events: none; }
+[data-hc-ds] .hc-ui-dialog::backdrop {
+  background-color: var(--hc-color-bg-overlay);
+  animation: hc-ui-backdrop-in var(--hc-dur-medium) var(--hc-ease-standard) both;
+}
+[data-hc-ds] .hc-ui-dialog[data-closing] { pointer-events: none; animation: hc-ui-dialog-out var(--hc-dur-short) var(--hc-ease-emphasized-accel) forwards; }
+[data-hc-ds] .hc-ui-dialog[data-closing]::backdrop { animation: hc-ui-backdrop-out var(--hc-dur-short) var(--hc-ease-standard) forwards; }
 [data-hc-ds] .hc-ui-dialog__header {
   display: flex;
   align-items: center;
@@ -694,17 +710,8 @@
   padding: 0;
   overflow: hidden;
   border-radius: var(--hc-radius-sheet);
-  box-shadow: var(--hc-shadow-modal);
-  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) both;
 }
 [data-hc-ds] .hc-ui-dialog[data-size='md'][open] { display: flex; flex-direction: column; gap: 0; }
-[data-hc-ds] .hc-ui-dialog[data-size='md']::backdrop {
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  animation: hc-ui-backdrop-in var(--hc-dur-medium) var(--hc-ease-standard) both;
-}
-[data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing] { animation: hc-ui-dialog-out var(--hc-dur-short) var(--hc-ease-emphasized-accel) forwards; }
-[data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing]::backdrop { animation: hc-ui-backdrop-out var(--hc-dur-short) var(--hc-ease-standard) forwards; }
 [data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__header { flex: 0 0 auto; padding: var(--hc-space-5) var(--hc-space-5) var(--hc-space-3); }
 [data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__title {
   font-size: var(--hc-font-size-xl);
@@ -747,10 +754,8 @@
 @media (prefers-reduced-motion: reduce) {
   [data-hc-ds] .hc-ui-dialog,
   [data-hc-ds] .hc-ui-dialog::backdrop,
-  [data-hc-ds] .hc-ui-dialog[data-size='md'],
-  [data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing],
-  [data-hc-ds] .hc-ui-dialog[data-size='md']::backdrop,
-  [data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing]::backdrop { animation: none; }
+  [data-hc-ds] .hc-ui-dialog[data-closing],
+  [data-hc-ds] .hc-ui-dialog[data-closing]::backdrop { animation: none; }
 }
 
 /* Sheet — a Dialog size="md" that, at the bottom, is HCUI's mobile Sheet (sheet-panel,
@@ -858,7 +863,7 @@
 }
 [data-hc-ds] .hc-ui-sheet-options__row {
   /* The ring goes inside, where the group's overflow does not cut it. */
-  --hc-focus-ring-offset: -2px;
+  --hc-focus-ring-offset: calc(-1 * var(--hc-focus-ring-width));
   appearance: none;
   position: relative;
   display: flex;
@@ -896,8 +901,8 @@
 }
 [data-hc-ds] .hc-ui-sheet-options__row:active:not(:disabled)::after { opacity: 0.07; }
 [data-hc-ds] .hc-ui-sheet-options__row:focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
   border-radius: var(--hc-radius-lg);
 }
 [data-hc-ds] .hc-ui-sheet-options__row:disabled { opacity: 0.4; cursor: default; }
@@ -915,22 +920,6 @@
   animation: hc-ui-check-in 260ms var(--hc-ease-pop);
 }
 
-/* SheetOptions variant="list" — HCUI's mobile sort sheet (.sort-button__option): plain
-   48px rows with a line under each, 560 weight and 720 once chosen, a 20px check in the text color. */
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] { background-color: transparent; border-radius: 0; box-shadow: none; }
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row,
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row + .hc-ui-sheet-options__row {
-  min-height: 48px;
-  padding: 0;
-  font-size: var(--hc-font-size-md);
-  font-weight: 560;
-  line-height: var(--hc-line-height-md);
-  box-shadow: inset 0 -1px 0 var(--hc-color-border);
-}
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row[data-selected] .hc-ui-sheet-options__label { font-weight: 720; }
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row:focus-visible { border-radius: var(--hc-radius-xs); }
-[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__check { color: var(--hc-color-text-primary); animation: none; }
-
 /* SheetChips — wrapping Chips with radio semantics. */
 [data-hc-ds] .hc-ui-sheet-chips { display: flex; flex-wrap: wrap; gap: var(--hc-space-2); }
 
@@ -1020,8 +1009,8 @@
 [data-hc-ds] .hc-ui-menu__item[data-danger]:hover:not(:disabled) { color: var(--hc-color-danger); }
 [data-hc-ds] .hc-ui-menu__item:disabled { color: var(--hc-color-text-muted); cursor: default; }
 [data-hc-ds] .hc-ui-menu__item:focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 3px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 [data-hc-ds] .hc-ui-menu__text { min-width: 0; }
 [data-hc-ds] .hc-ui-menu__hint {
@@ -1101,6 +1090,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
@@ -1116,8 +1106,8 @@
   text-align: start;
 }
 [data-hc-ds] :is(.hc-ui-table__sort, .hc-ui-table__row-button):focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 3px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 
 /* PageHeader — HCUI's desktop page heading (`.desktop-page-heading`): 22px semibold title on a
@@ -1260,6 +1250,7 @@
   padding: var(--hc-space-1) var(--hc-space-2);
   border-radius: var(--hc-radius-xs);
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
 }
 [data-hc-ds] .hc-ui-panel-header__close {
   display: grid;
@@ -1272,8 +1263,8 @@
 }
 [data-hc-ds] :is(.hc-ui-panel-header__step, .hc-ui-panel-header__close):hover { background: var(--hc-color-bg-muted); color: var(--hc-color-text-primary); }
 [data-hc-ds] :is(.hc-ui-panel-header__step, .hc-ui-panel-header__close):focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 3px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 
 /* ListRow — HCUI's `list-row` mixin: a full-width button row with a translucent veil on hover
@@ -1316,8 +1307,8 @@
 [data-hc-ds] .hc-ui-list-row:active:not(:disabled)::after { opacity: 0.07; }
 [data-hc-ds] .hc-ui-list-row:focus-visible {
   border-radius: var(--hc-radius-lg);
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, -2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, calc(-1 * var(--hc-focus-ring-width)));
 }
 @media (prefers-reduced-motion: reduce) {
   [data-hc-ds] .hc-ui-list-row::after { transition: none; }
@@ -1325,7 +1316,7 @@
 
 /* CommandPalette — HCUI's desktop ⌘K (.command-palette): 640px wide, at most 560px tall,
    12vh from the top, a 1px border, `shadow-soft`, no blur and no animation. The backdrop
-   is `bg-overlay` unless `--hc-command-palette-backdrop` says otherwise (HCUI: 28% black). */
+   is the `bg-scrim` token (HCUI's 28% black) unless `--hc-command-palette-backdrop` says otherwise. */
 [data-hc-ds] .hc-ui-command-palette {
   box-sizing: border-box;
   width: min(640px, calc(100vw - 32px));
@@ -1344,7 +1335,7 @@
   line-height: var(--hc-line-height-md);
   outline: none;
 }
-[data-hc-ds] .hc-ui-command-palette::backdrop { background: var(--hc-command-palette-backdrop, var(--hc-color-bg-overlay)); }
+[data-hc-ds] .hc-ui-command-palette::backdrop { background: var(--hc-command-palette-backdrop, var(--hc-color-bg-scrim)); }
 [data-hc-ds] .hc-ui-command-palette__box { display: flex; flex-direction: column; max-height: inherit; }
 [data-hc-ds] .hc-ui-command-palette__field {
   display: flex;
@@ -1399,14 +1390,15 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   text-align: left;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 [data-hc-ds] .hc-ui-command-palette__item[aria-selected='true'] { background: var(--hc-color-bg-muted); }
 [data-hc-ds] .hc-ui-command-palette__item:focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, -2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, calc(-1 * var(--hc-focus-ring-width)));
 }
 [data-hc-ds] .hc-ui-command-palette__icon {
   display: grid;
@@ -1744,6 +1736,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
@@ -1793,13 +1786,14 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
 }
 [data-hc-ds] .hc-ui-combat-dial__cell:focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 [data-hc-ds] .hc-ui-combat-dial__cell[data-round] { border-radius: 50%; }
 [data-hc-ds] .hc-ui-combat-dial__cell[data-kind='legend'] { color: var(--hc-color-text-secondary); }
@@ -1843,9 +1837,25 @@
 /* `max-width` lets the bolts squeeze into the printed card's 28px legend, as in HCUI. */
 [data-hc-ds] .hc-ui-combat-dial__bolt { width: auto; max-width: 100%; height: 16px; object-fit: contain; filter: var(--hc-filter-symbol-muted); }
 
+/* `density="compact"`: HCUI's compact dial of the unit view on phones, for dense lists:
+   34px cells and rows, 6px gaps, 13px numbers, 18px special icons and tighter point chips.
+   The printed presentation keeps its own measures. */
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__header { gap: var(--hc-space-1); }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__points { gap: var(--hc-space-1); padding: var(--hc-space-1) 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__chip { gap: var(--hc-space-2); padding: var(--hc-space-2); border-radius: var(--hc-radius-lg); }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__grid-wrap { padding: var(--hc-space-2) 0 var(--hc-space-1); }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__grid { gap: 6px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__col { grid-template-rows: repeat(5, 34px); gap: 6px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__col[data-start]::before { top: 40px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__cell { width: 34px; height: 34px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__cell[data-tip]::after { inset: -3px; }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) :is(.hc-ui-combat-dial__cell[data-kind='value'], .hc-ui-combat-dial__range) { font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-combat-dial[data-density='compact']:not([data-presentation='printed']) .hc-ui-combat-dial__special-icon { width: 18px; height: 18px; }
+
 /* `presentation="printed"`: the physical card's dial, at HCUnits' measures (20px
    cells, 23px between clicks, 24px between rows); the white legend sits on the
-   card's dark window. Its numbers keep HCUI's `font` shorthand, without ROND. */
+   card's dark window. Its numbers use the `font` shorthand, with ROND right after it
+   (`--hc-rond`, which the card sets to 0). */
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__grid-wrap {
   display: flex;
   flex-direction: column;
@@ -1873,6 +1883,7 @@
 /* Condensed, so two digits fit the 20px cell; no tracking, so they stay centered. */
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='value'] {
   font: 600 17px/1 var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 50%;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;
@@ -1899,7 +1910,7 @@
 }
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-tip]::after { inset: -2px -1.5px; }
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__rangebox { flex-direction: row; gap: 0; align-items: center; }
-[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__range { margin-right: 2px; color: var(--hc-color-dial-legend-printed); font: 300 14px/1 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__range { margin-right: 2px; color: var(--hc-color-dial-legend-printed); font: 300 14px/1 var(--hc-font-body); font-variation-settings: 'ROND' var(--hc-rond); }
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__bolt { height: 14px; margin-right: -1px; filter: var(--hc-filter-symbol-light); }
 /* The legend symbols are 18px tall at their own width, at most 26px, and white. */
 [data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] .hc-ui-stat-glyph {
@@ -2021,6 +2032,7 @@
   background: var(--hc-color-card-print-black);
   color: var(--hc-color-card-print-white);
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
@@ -2059,6 +2071,7 @@
 }
 [data-hc-ds] .hc-ui-physical-card__collection strong {
   font: 800 20px/1 var(--hc-font-display);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 62%;
   min-height: 19px;
   color: var(--hc-color-card-print-white);
@@ -2162,7 +2175,7 @@
 [data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='attack'] { width: 43px; top: 48px; }
 [data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='defense'] { width: 51px; top: 72px; }
 [data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='damage'] { width: 59px; top: 96px; }
-[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] span { position: absolute; right: 58px; top: 4px; font: 300 11px/1.2 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] span { position: absolute; right: 58px; top: 4px; font: 300 11px/1.2 var(--hc-font-body); font-variation-settings: 'ROND' var(--hc-rond); }
 [data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] img.hc-ui-physical-card__bystander-bolt { right: auto; top: 6px; width: 6px; height: 12px; }
 [data-hc-ds] .hc-ui-physical-card__bystander-name {
   position: absolute;
@@ -2174,6 +2187,7 @@
   width: 105px;
   height: 45px;
   font: 500 13px/1 var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 80%;
   text-align: center;
 }
@@ -2201,6 +2215,7 @@
   justify-content: center;
   width: 40px;
   font: 500 14px/1 var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
 }
 [data-hc-ds] .hc-ui-physical-card__bystander-extra img { width: 20px; height: 20px; filter: var(--hc-filter-symbol-light); }
 [data-hc-ds] .hc-ui-physical-card__bystander-extra[data-kind='passengers'] img { width: auto; height: auto; margin-right: 5px; }
@@ -2216,6 +2231,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
@@ -2237,6 +2253,7 @@
   color: var(--hc-color-card-print-black);
   /* The card's dial, in proportion to the 18px cell. */
   font: 600 16px/1 var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 50%;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;
@@ -2252,8 +2269,8 @@
 /* A hit area larger than the 18px square. */
 [data-hc-ds] .hc-ui-physical-card__bystander-value[data-tip]::after { content: ''; position: absolute; inset: -3px; }
 [data-hc-ds] :is(.hc-ui-physical-card__ability, .hc-ui-physical-card__bystander-improved-ability, .hc-ui-physical-card__bystander-value[data-tip], .hc-ui-physical-card__improved, .hc-ui-physical-card__point):focus-visible {
-  outline: 2px solid var(--hc-focus-ring);
-  outline-offset: var(--hc-focus-ring-offset, 2px);
+  outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width));
 }
 
 [data-hc-ds] .hc-ui-physical-card__terrain-art { display: block; max-width: min(360px, 100%); max-height: 335px; margin: 5px auto 0; }
@@ -2267,6 +2284,7 @@
   min-height: 22px;
   margin: 0 0 1px;
   font: 700 16px/1.1 var(--hc-font-display);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 65%;
   text-transform: uppercase;
   color: var(--hc-color-card-ink);
@@ -2285,7 +2303,7 @@
   transition: opacity var(--hc-transition-fast);
 }
 [data-hc-ds] .hc-ui-physical-card__copy:active { opacity: 0.6; }
-[data-hc-ds] .hc-ui-physical-card__keyphrase { min-height: 22px; display: flex; align-items: center; font: 700 16px/1.1 var(--hc-font-display); font-stretch: 75%; color: var(--hc-color-card-ink); }
+[data-hc-ds] .hc-ui-physical-card__keyphrase { min-height: 22px; display: flex; align-items: center; font: 700 16px/1.1 var(--hc-font-display); font-variation-settings: 'ROND' var(--hc-rond); font-stretch: 75%; color: var(--hc-color-card-ink); }
 [data-hc-ds] .hc-ui-physical-card__relic { margin: 0; }
 
 /* Improved abilities right above the dial's window. */
@@ -2306,6 +2324,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
@@ -2336,6 +2355,7 @@
   background: transparent;
   color: inherit;
   font: 600 18px/23px var(--hc-font-display);
+  font-variation-settings: 'ROND' var(--hc-rond);
   font-stretch: 75%;
   font-variant-numeric: tabular-nums;
   text-align: right;
@@ -2350,6 +2370,7 @@
   left: 15px;
   bottom: 10px;
   font: 20px var(--hc-font-mono);
+  font-variation-settings: 'ROND' var(--hc-rond);
   color: var(--hc-color-card-print-white);
   text-shadow: -1px -1px 0 var(--hc-color-card-print-black), 1px -1px 0 var(--hc-color-card-print-black), -1px 1px 0 var(--hc-color-card-print-black), 1px 1px 0 var(--hc-color-card-print-black);
 }
@@ -2368,9 +2389,9 @@
   color: var(--hc-color-card-print-black);
   text-align: center;
 }
-[data-hc-ds] .hc-ui-physical-card__terrain-dial span { align-self: end; font: 700 24px/1 var(--hc-font-display); }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial span { align-self: end; font: 700 24px/1 var(--hc-font-display); font-variation-settings: 'ROND' var(--hc-rond); }
 [data-hc-ds] .hc-ui-physical-card__terrain-dial img { height: 22px; vertical-align: middle; }
-[data-hc-ds] .hc-ui-physical-card__terrain-dial b { font: 700 24px/30px var(--hc-font-display); font-stretch: 75%; letter-spacing: -1px; }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial b { font: 700 24px/30px var(--hc-font-display); font-variation-settings: 'ROND' var(--hc-rond); font-stretch: 75%; letter-spacing: -1px; }
 
 [data-hc-ds] .hc-ui-physical-card__back-bar {
   position: absolute;
@@ -2446,7 +2467,9 @@
 }
 
 /* PhysicalCardFocusView — HCUI `.card-focus`. The blurred background was asked for
-   by HCUI and applies only here. */
+   by HCUI and applies only here: the view has no panel of its own, so the dimmed,
+   translucent backdrop is the surface the card floats on (the exception to "no blur
+   behind solid surfaces"). */
 [data-hc-ds] .hc-ui-card-focus {
   position: fixed;
   inset: 0;
@@ -2533,7 +2556,7 @@
   background-color: var(--hc-color-map-board);
   cursor: crosshair;
 }
-[data-hc-ds] .hc-ui-map-board:focus-visible { outline: 2px solid var(--hc-color-outline); outline-offset: 4px; }
+[data-hc-ds] .hc-ui-map-board:focus-visible { outline: var(--hc-focus-ring-width) solid var(--hc-focus-ring); outline-offset: var(--hc-focus-ring-offset, var(--hc-focus-ring-width)); }
 [data-hc-ds] .hc-ui-map-board canvas {
   display: block;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",