@ntmats/hc-ui 0.4.0 → 0.6.0

package/dist/styles.css

@@ -29,6 +29,13 @@
   border-radius: var(--hc-radius-lg);
   box-shadow: var(--hc-shadow-card);
 }
+/* Muted: the card with the `bg-muted-2` fill (HCUI's `surface` mixin over `bg-muted-2`, as the
+   `SheetOptions` card and HCUI's action lists in sheets). */
+[data-hc-ds] .hc-ui-surface[data-tone='muted'] {
+  background: var(--hc-color-bg-muted-2);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-card);
+}
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='md'] { border-radius: var(--hc-radius-md); }
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='lg'] { border-radius: var(--hc-radius-lg); }
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='xl'] { border-radius: var(--hc-radius-xl); }
@@ -53,7 +60,8 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  min-width: 0;
+  /* `optionMinWidth` sets the custom property; without it, 0 as before. */
+  min-width: var(--hc-segmented-option-min-width, 0);
   min-height: 38px;
   margin: 0;
   padding: 0 var(--hc-space-3);
@@ -91,8 +99,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 +190,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; }
@@ -224,12 +232,21 @@
 [data-hc-ds] .hc-ui-button[data-variant='primary'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
 [data-hc-ds] .hc-ui-button[data-variant='outline'] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--hc-color-border-strong); }
 [data-hc-ds] .hc-ui-button[data-variant='danger'] { color: var(--hc-color-text-on-danger); background-color: var(--hc-color-bg-danger); }
+/* Ghost: no fill, only the veil; `tone="danger"` is HCUI's danger in text only (team-save-menu__btn--danger). */
+[data-hc-ds] .hc-ui-button[data-variant='ghost'] { background-color: transparent; }
+[data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[data-tone='danger'] { color: var(--hc-color-danger); }
+/* An open popup trigger: the 1.5px ring in the text color, as Chip (HCUI's Importar, Entrar and Convidar). */
+[data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true'] { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 [data-hc-ds] .hc-ui-button[data-size='sm'] { min-height: var(--hc-control-height-chip); padding: 0 var(--hc-space-4); font-size: var(--hc-font-size-sm); }
 [data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
 [data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
 [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;
@@ -253,9 +270,12 @@
 }
 [data-hc-ds] .hc-ui-icon-button[data-size='sm'] { width: 36px; height: 36px; overflow: visible; }
 [data-hc-ds] .hc-ui-icon-button[data-size='lg'] { width: 44px; height: 44px; }
+[data-hc-ds] .hc-ui-icon-button[data-size='xs'] { width: 28px; height: 28px; overflow: visible; }
 [data-hc-ds] .hc-ui-icon-button[data-tone='secondary'] { color: var(--hc-color-text-secondary); }
-/* 36px keeps a 44px touch target; the veil stays clipped to the circle. */
+[data-hc-ds] .hc-ui-icon-button[data-tone='muted'] { color: var(--hc-color-text-muted); }
+/* 36 and 28px keep a 44px touch target; the veil stays clipped to the circle. */
 [data-hc-ds] .hc-ui-icon-button[data-size='sm']::before { content: ''; position: absolute; inset: -4px; }
+[data-hc-ds] .hc-ui-icon-button[data-size='xs']::before { content: ''; position: absolute; inset: -8px; }
 /* Fills: surface (HCUI's mobile theme button: surface, card ring and shadow) and ghost
    (HCUI's desktop utilities: no fill, muted fill and primary text on hover). */
 [data-hc-ds] .hc-ui-icon-button[data-variant='surface'] { background-color: var(--hc-color-bg-surface); box-shadow: var(--hc-shadow-card); }
@@ -264,6 +284,8 @@
 @media (hover: hover) {
   [data-hc-ds] .hc-ui-icon-button[data-variant='ghost']:hover:not(:disabled, [aria-pressed='true']) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted); }
 }
+/* An open popup trigger keeps the hover look, with a mouse or not (HCUI's ⋯ menus). */
+[data-hc-ds] .hc-ui-icon-button[data-variant='ghost'][aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true']:not([aria-pressed='true']) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted); }
 [data-hc-ds] .hc-ui-icon-button[data-shape='rounded'] { border-radius: var(--hc-radius-sm); }
 [data-hc-ds] .hc-ui-icon-button[aria-pressed='true'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
 /* iconKey: the new icon turns in (HCUI's theme sun and moon). */
@@ -367,7 +389,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. */
@@ -377,6 +399,33 @@
 [data-hc-ds] .hc-ui-chip[data-size='xs']:is([aria-pressed='true'], [aria-checked='true'], [data-selected]):hover { color: var(--hc-color-text-on-contrast); background-color: var(--hc-color-bg-contrast); }
 [data-hc-ds] .hc-ui-chip:is([aria-pressed='true'], [aria-checked='true'], [data-selected]) .hc-ui-chip__count { color: inherit; }
 [data-hc-ds] .hc-ui-chip[data-selected] .hc-ui-chip__clear { color: inherit; }
+/* Muted: gray fill without ring (HCUI's search conditions, .search-page__cond). */
+[data-hc-ds] .hc-ui-chip[data-variant='muted'] { background-color: var(--hc-color-bg-muted); box-shadow: none; }
+/* Removable at md and sm: the whole height is the main button, and the 26px × sits 5px from the
+   end, concentric with the pill's curve ((36 - 26) / 2), in the muted color. */
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) { gap: 0; padding: 0 5px 0 0; }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__main { align-self: stretch; padding: 0 var(--hc-space-1) 0 14px; }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted'][data-size='sm'] .hc-ui-chip__main { padding-left: var(--hc-space-3); }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__clear { width: 26px; height: 26px; color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__clear svg { width: 14px; height: 14px; }
+/* Only an icon: a circle as tall as the chip. */
+[data-hc-ds] .hc-ui-chip[data-icon-only] { width: var(--hc-control-height-chip); padding: 0; }
+[data-hc-ds] .hc-ui-chip[data-icon-only][data-size='xs'] { width: 26px; }
+/* Corner badge: on the top right corner, brand fill, a ring of the page around it (HCUI's .meta-fchip__count). */
+[data-hc-ds] .hc-ui-chip__badge[data-placement='corner'] {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  padding: 0 var(--hc-space-1);
+  color: var(--hc-color-text-inverse);
+  background-color: var(--hc-color-brand);
+  box-shadow: 0 0 0 2px var(--hc-chip-badge-ring, var(--hc-color-bg-page));
+  font-family: var(--hc-font-mono);
+  font-weight: var(--hc-font-weight-semibold);
+  animation: hc-ui-check-in 260ms var(--hc-ease-pop);
+}
+/* Informative: it cannot be pressed (disabled) but keeps its full color. */
+[data-hc-ds] .hc-ui-chip[data-informative]:disabled { opacity: 1; cursor: default; }
 
 /* FilterBar — a row of filters with start, end and footer slots (HCUI's .desktop-filter-bar,
    .desktop-filter-bar--sheet and .quick-filters). Placement stays with the caller. */
@@ -391,7 +440,13 @@
 [data-hc-ds] .hc-ui-filter-bar__line { display: flex; align-items: center; gap: var(--hc-space-2); min-width: 0; }
 [data-hc-ds] :is(.hc-ui-filter-bar__start, .hc-ui-filter-bar__end) { display: flex; flex: 0 0 auto; align-items: center; gap: var(--hc-space-2); }
 [data-hc-ds] .hc-ui-filter-bar__end { margin-inline-start: auto; }
-[data-hc-ds] .hc-ui-filter-bar__row { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--hc-space-2); min-width: 0; }
+/* Bleed: the bar reaches the panel's edges and gives the space back as padding. */
+[data-hc-ds] .hc-ui-filter-bar[data-bleed] {
+  margin-inline: calc(-1 * var(--hc-filter-bar-bleed-start, var(--hc-filter-bar-bleed, 0px))) calc(-1 * var(--hc-filter-bar-bleed-end, var(--hc-filter-bar-bleed, 0px)));
+  padding-inline: var(--hc-filter-bar-bleed-start, var(--hc-filter-bar-bleed, 0px)) var(--hc-filter-bar-bleed-end, var(--hc-filter-bar-bleed, 0px));
+}
+/* The row anchors what the caller places in it with position: absolute (a popup). */
+[data-hc-ds] .hc-ui-filter-bar__row { position: relative; display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--hc-space-2); min-width: 0; }
 [data-hc-ds] .hc-ui-filter-bar[data-density='compact'] .hc-ui-filter-bar__row { gap: var(--hc-space-1); }
 [data-hc-ds] .hc-ui-filter-bar__footer { margin-top: var(--hc-space-2); }
 /* One line that scrolls sideways. 4px of padding above and below, taken back by the margin,
@@ -499,6 +554,7 @@
   [data-hc-ds] :is(.hc-ui-segmented[data-indicator='slide'], .hc-ui-segmented__indicator) { transition: none; }
   [data-hc-ds] .hc-ui-segmented[data-indicator='slide']:has(.hc-ui-segmented__option:active:not(:disabled)) { transform: none; }
   [data-hc-ds] .hc-ui-icon-button__icon[data-swap] { animation: none; }
+  [data-hc-ds] .hc-ui-chip__badge[data-placement='corner'] { animation: none; }
   [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) { transition: none; }
   [data-hc-ds] .hc-ui-field__control { transition: none; }
   [data-hc-ds] .hc-ui-button__spinner { animation: none; }
@@ -531,13 +587,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 +670,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 +689,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 +706,23 @@
   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;
+  /* `backwards`, not `both`: once in, no transform stays on the dialog. A transform would make
+     it the containing block of fixed popups portaled into it, and its overflow would cut them. */
+  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) backwards;
 }
 [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;
@@ -686,25 +756,14 @@
   gap: var(--hc-space-2);
   margin-top: var(--hc-space-3);
 }
-/* HCUI's confirmation buttons are 38px, between Button sm (36) and md (44). */
-[data-hc-ds] .hc-ui-dialog[data-size='sm'] .hc-ui-dialog__actions .hc-ui-button[data-size='sm'] { min-height: 38px; }
 
 [data-hc-ds] .hc-ui-dialog[data-size='md'] {
   width: min(440px, calc(100vw - 2 * var(--hc-space-6)));
   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);
@@ -732,6 +791,8 @@
   box-shadow: 0 -1px 0 var(--hc-color-border);
 }
 [data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__actions > * { flex: 1 1 0; }
+/* Header-less (Sheet header={false}): the content brings its own spacing, heading and close. */
+[data-hc-ds] .hc-ui-dialog[data-size='md'][data-headerless] .hc-ui-dialog__body { gap: 0; padding: 0; }
 
 @keyframes hc-ui-dialog-in {
   from { opacity: 0; transform: translateY(8px) scale(0.97); }
@@ -747,10 +808,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,
@@ -771,7 +830,7 @@
   padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
   border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
   touch-action: pan-y;
-  animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+  animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) backwards;
   transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
 }
 [data-hc-ds] .hc-ui-sheet[data-presentation='bottom']::before {
@@ -806,7 +865,7 @@
     padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
     border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
     touch-action: pan-y;
-    animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+    animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) backwards;
     transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
   }
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto']::before {
@@ -858,7 +917,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 +955,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 +974,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 +1063,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 +1144,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
@@ -1116,8 +1160,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 +1304,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 +1317,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 +1361,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 +1370,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 +1389,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 +1444,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 +1790,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 +1840,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 +1891,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 +1937,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 +1964,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 +2086,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 +2125,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 +2229,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 +2241,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 +2269,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 +2285,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 +2307,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 +2323,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 +2338,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 +2357,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 +2378,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 +2409,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 +2424,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 +2443,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 +2521,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 +2610,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.6.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",