@webority/theme 0.81.0 → 0.82.1

package/scss/wui/_data.scss

@@ -13,9 +13,9 @@
     color: var(--color-text-subtle);
 }
 .empty-state-title {
-    // Matches .tbl-empty-title; brand-signal sets both title faces together. A table's header hides
+    // Matches .tbl-empty-title, both in the sans face under every brand. A table's header hides
     // in any .table-wrap whose empty block is visible.
-    font-size: 18px;
+    font-size: 17px;
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-text);
@@ -74,7 +74,7 @@
     margin-bottom: 16px;
 }
 .tbl-empty-title {
-    font-size: 18px;
+    font-size: 17px;
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-text);
@@ -348,8 +348,10 @@
 .table-ledger tbody tr:last-child td {
     border-bottom: none;
 }
-.table-ledger tbody tr:hover {
-    --bs-table-bg-state: var(--color-bg-subtle);
+// A row tints under the pointer, and while a control inside it holds keyboard focus.
+.table-ledger tbody tr:hover,
+.table-ledger tbody tr:focus-within {
+    --bs-table-bg-state: var(--color-bg-muted);
 }
 .table-ledger .u-meta {
     gap: 2px;
@@ -583,10 +585,6 @@
     white-space: nowrap;
     flex: none;
 }
-// 3px padding and a 1px border on each side, so the strip reaches the small control height beside the other filter controls.
-.wui-filter-bar .segmented-sm {
-    --segmented-option-h: calc(var(--wui-control-height-sm) - 8px);
-}
 // Facets folded behind the Filters button stack in one panel, each at the panel's width. Both surfaces
 // draw it as the same <details>; in the Razor bar it sits inside the form, so the controls still submit.
 .wui-filter-more-panel {
@@ -704,8 +702,8 @@
 .select.tpg-select {
     width: auto;
     min-width: 64px;
-    height: 32px;
-    min-height: 32px;
+    height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-height-sm);
     padding: 0 28px 0 12px;
     font-size: 13px;
     font-weight: 600;
@@ -730,8 +728,8 @@
 .tpg-arrow {
     display: grid;
     place-items: center;
-    width: 32px;
-    height: 32px;
+    width: var(--wui-control-height-sm);
+    height: var(--wui-control-height-sm);
     border: none;
     background: transparent;
     color: var(--color-text-muted);
@@ -760,8 +758,8 @@
 .tpg-page {
     display: grid;
     place-items: center;
-    min-width: 32px;
-    height: 32px;
+    min-width: var(--wui-control-height-sm);
+    height: var(--wui-control-height-sm);
     padding: 0 6px;
     border: none;
     background: transparent;
@@ -793,7 +791,7 @@
     display: grid;
     place-items: center;
     min-width: 24px;
-    height: 32px;
+    height: var(--wui-control-height-sm);
     color: var(--color-text-subtle);
     font-size: 13px;
     user-select: none;
@@ -1371,7 +1369,7 @@
     outline-offset: var(--wui-focus-ring-offset);
 }
 .u-action:disabled {
-    opacity: 0.4;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .u-action.danger {
@@ -1448,7 +1446,7 @@
 }
 .u-you {
     padding: 1px 7px;
-    font-size: 10.5px;
+    font-size: 12px;
 }
 
 // Table extras — a sortable header and numeric cells. These sit AFTER the
@@ -1831,7 +1829,7 @@ wui-data-table {
     background: var(--color-primary-soft);
 }
 [data-wui-drop-target][aria-disabled="true"] {
-    opacity: .6;
+    opacity: var(--wui-disabled-opacity);
 }
 [data-wui-row-drag] tbody tr[draggable="true"] {
     cursor: grab;

package/scss/wui/_display.scss

@@ -457,28 +457,24 @@ a.info-row:hover .info-value {
 }
 
 // ============================================================================
-// Segmented control — 2–4 mutually-exclusive options shown side by side.
-// The theme toggle (light/dark/system) is the canonical use.
-//
-// The selected segment is an OUTLINED pill: a primary ring over a faint primary tint, with the
-// label in primary. The tint is 8% so the label clears AA on it in both themes (light 5.6:1,
-// dark 4.5:1); a stronger tint drops the dark label under 4.5:1.
+// Segmented control: 2 to 4 mutually exclusive options shown side by side.
+// The selected option is a raised thumb (--color-thumb with an edge and a soft shadow) on a muted
+// track, never an outline. Each size takes its option height from the control ladder less the
+// track's 3px padding and 1px border on each side, so the strip is exactly sm 32 / md 36 / lg 44px
+// and lines up with the fields beside it. A note option grows past the height.
 // ============================================================================
-// Each size sets one option height, icon size and note size, so a text, icon or note option in
-// the same control lines up, and the four sizes step evenly: 28 / 32 / 38 / 44px tall overall
-// (the track adds 8px), xl matching the 44px field height. A note option grows past the height.
 .segmented {
-    --segmented-selected-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
-    --segmented-option-h: 24px;
-    --segmented-icon: 13px;
-    --segmented-note: 10px;
+    --segmented-selected-bg: var(--color-thumb);
+    --segmented-option-h: calc(var(--wui-control-height) - 8px);
+    --segmented-icon: 14px;
+    --segmented-note: 12px;
     position: relative;
     display: inline-flex;
     gap: 2px;
     padding: 3px;
     border: 1px solid var(--color-border);
     border-radius: 999px;
-    background: var(--color-surface);
+    background: var(--color-bg-muted);
 }
 .segmented-option {
     position: relative;
@@ -494,11 +490,11 @@ a.info-row:hover .info-value {
     border-radius: 999px;
     background: transparent;
     font-family: inherit;
-    font-size: 11.5px;
+    font-size: 13px;
     font-weight: 600;
     line-height: 1;
     white-space: nowrap;
-    color: var(--color-text);
+    color: var(--color-text-muted);
     cursor: pointer;
     transition:
         background 0.14s ease,
@@ -522,8 +518,9 @@ a.info-row:hover .info-value {
     clip-path: inset(50%);
     white-space: nowrap;
 }
-.segmented-option:hover {
-    color: var(--color-primary-ink);
+.segmented-option:hover:not(:has(.segmented-input:checked, .segmented-input:disabled)) {
+    color: var(--color-text);
+    background: color-mix(in srgb, currentColor 6%, transparent);
 }
 // A per-option sub-label under the main text — optional, so a segment without one keeps the
 // plain single-line layout above untouched.
@@ -543,16 +540,15 @@ a.info-row:hover .info-value {
     font-weight: 400;
     // Inherits the option's current text colour (plain, hover, or primary-on-checked) rather
     // than a fixed token, so it always matches without a separate state per variant. No opacity
-    // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
+    // muting — that dropped the sub-label below AA on an unchecked option; its lighter weight already
     // distinguishes it from the label.
     color: currentColor;
 }
-// Without JS this per-option pill stands in for the sliding thumb below, so it carries the
-// same ring and tint.
+// Without JS this per-option pill stands in for the sliding thumb below, so it carries the same edge and shadow.
 .segmented-option:has(.segmented-input:checked) {
     background: var(--segmented-selected-bg);
-    box-shadow: inset 0 0 0 2px var(--color-primary);
-    color: var(--color-primary-ink);
+    box-shadow: 0 0 0 1px var(--color-border), var(--wui-shadow-thumb);
+    color: var(--color-text);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {
@@ -571,8 +567,8 @@ a.info-row:hover .info-value {
     z-index: 0;
     border-radius: 999px;
     background: var(--segmented-selected-bg);
-    // An inset ring, not a border: a border would add to the width JS measures and sets.
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    // A shadow, not a border: a border would add to the width JS measures and sets.
+    box-shadow: 0 0 0 1px var(--color-border), var(--wui-shadow-thumb);
     opacity: 0;
     pointer-events: none;
 }
@@ -590,7 +586,7 @@ a.info-row:hover .info-value {
     background: transparent;
     box-shadow: none;
 }
-// A two-line note option keeps a little more air inside the ring than a one-line option needs.
+// A two-line note option keeps a little more air inside the pill than a one-line option needs.
 .segmented-option:has(.segmented-option-note) {
     padding-top: 6px;
     padding-bottom: 6px;
@@ -600,8 +596,7 @@ a.info-row:hover .info-value {
     width: var(--segmented-icon);
     height: var(--segmented-icon);
 }
-// Borderless (bordered={false} / bordered="false") — the selected pill keeps its tint and primary
-// label but drops the ring, on both the sliding thumb and the no-JS per-option pill.
+// Borderless (bordered={false} / bordered="false"): the selected thumb drops its edge and shadow and stays a flat pill, on both the sliding thumb and the no-JS per-option pill.
 .wui-segmented-borderless .segmented-thumb,
 .wui-segmented-borderless .segmented-option:has(.segmented-input:checked) {
     box-shadow: none;
@@ -612,38 +607,26 @@ a.info-row:hover .info-value {
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .segmented-sm .segmented-thumb,
-.segmented-lg .segmented-thumb,
-.wui-segmented-xl .segmented-thumb {
+.segmented-lg .segmented-thumb {
     top: 3px;
     bottom: 3px;
 }
 .segmented-sm {
-    --segmented-option-h: 20px;
-    --segmented-icon: 12px;
+    --segmented-option-h: calc(var(--wui-control-height-sm) - 8px);
+    --segmented-icon: 13px;
 }
 .segmented-lg {
-    --segmented-option-h: 30px;
-    --segmented-icon: 15px;
-    --segmented-note: 11px;
-}
-.wui-segmented-xl {
-    --segmented-option-h: 36px;
-    --segmented-icon: 17px;
-    --segmented-note: 12px;
+    --segmented-option-h: calc(var(--wui-control-height-lg) - 8px);
+    --segmented-icon: 16px;
 }
 .segmented-sm .segmented-option {
-    padding: 4px 9px;
-    font-size: 11px;
+    padding: 4px 10px;
+    font-size: 12px;
 }
 .segmented-lg .segmented-option {
     gap: 6px;
     padding: 4px 16px;
-    font-size: 13px;
-}
-.wui-segmented-xl .segmented-option {
-    gap: 7px;
-    padding: 4px 20px;
-    font-size: 15px;
+    font-size: 14px;
 }
 // Full width — segments share the row equally (a toggle spanning a card or toolbar).
 .segmented-full {
@@ -654,13 +637,14 @@ a.info-row:hover .info-value {
     flex: 1;
     justify-content: center;
 }
-// Disabled — the whole control, or a single option that stays visible but unpickable.
+// Disabled: the whole control, or a single option that stays visible but cannot be picked. An option
+// inside a disabled control is not dimmed a second time.
 .segmented.is-disabled {
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
     pointer-events: none;
 }
-.segmented-option:has(.segmented-input:disabled) {
-    opacity: 0.45;
+.segmented:not(.is-disabled) .segmented-option:has(.segmented-input:disabled) {
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1219,7 +1203,7 @@ a.info-row:hover .info-value {
     padding-bottom: 0;
 }
 .wui-timeline--steps.wui-timeline--sm .wui-timeline-eyebrow {
-    font-size: 11px;
+    font-size: 12px;
 }
 .wui-timeline--steps.wui-timeline--lg .wui-timeline-eyebrow {
     font-size: 13px;
@@ -1510,7 +1494,7 @@ a.info-row:hover .info-value {
 .wui-link.is-disabled {
     color: var(--color-text-muted);
     cursor: not-allowed;
-    opacity: 0.65;
+    opacity: var(--wui-disabled-opacity);
     pointer-events: none;
 }
 .wui-link__label {

package/scss/wui/_file-viewer.scss

@@ -244,7 +244,7 @@ wui-file-viewer:fullscreen {
 .wui-file-viewer-thumb-no {
     display: block;
     padding: 3px 0 1px;
-    font-size: 11px;
+    font-size: 12px;
     line-height: 1.2;
     color: var(--color-text-subtle);
     text-align: center;

package/scss/wui/_flow.scss

@@ -822,7 +822,7 @@ button.wui-step-tile-body:hover .step-label {
     --wui-step-size: 22px;
     --wui-step-badge-size: 44px;
     --wui-step-journey-size: 32px;
-    --wui-step-number-font: 11px;
+    --wui-step-number-font: 12px;
     --wui-step-label-font: 12px;
 }
 .wui-step-size-sm .stepper-journey,
@@ -918,7 +918,7 @@ button.wui-step-tile-body:hover .step-label {
     border-radius: 999px;
     background: var(--color-primary);
     color: var(--color-primary-text);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;

package/scss/wui/_interaction.scss

@@ -11,7 +11,7 @@
 // ---- Default ring -----------------------------------------------------------
 // Anything focusable that no partial styles gets the shared ring instead of the browser's.
 // Zero specificity, so every component rule (including a panel's deliberate `outline: none`)
-// still wins. Text fields are left out: their focus cue is their own soft border.
+// still wins. Text fields are not in this list; the Text fields block below rings them.
 :where(
     a[href],
     area[href],
@@ -50,6 +50,13 @@
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
 }
+// Bootstrap paints a focused button in its hover colours, so an outline or unselected button
+// fills solid and reads as selected. Focus keeps the resting look; the ring marks it.
+.btn:focus-visible:not(:hover, :active, .active, .show, [aria-pressed="true"]) {
+    color: var(--bs-btn-color);
+    background-color: var(--bs-btn-bg);
+    border-color: var(--bs-btn-border-color);
+}
 
 // Bootstrap rings the close button on any :focus, a mouse click included.
 .btn-close {
@@ -75,6 +82,32 @@
     outline-offset: var(--wui-focus-ring-inset);
 }
 
+// ---- Text fields --------------------------------------------------------------
+// A text field keeps its soft focus border and also draws the shared ring. Browsers match
+// :focus-visible on a text field after a pointer click too, so the ring shows whenever the caret is
+// in the field. A field drawn inside a shell (phone, unit, stepper, input group, one-time code) rings
+// the shell and the bare input inside it draws nothing; so does the borderless .input-bare, which
+// sits inside another control's chrome.
+:is(.form-control, .form-select, .input, .select, .textarea):not(.input-bare):focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.app-phone-number-input .phone-input-wrap:has(> .input:focus-visible),
+.input-with-unit:has(.num-input:focus-visible),
+.num-wrap:has(.num-input:focus-visible),
+.wui-input-group:has(> :is(.form-control, .input):focus-visible),
+.otp:has(.otp-field:focus-visible) .otp-slot.active {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+// After the ring rule: these tie with it on specificity, so source order decides.
+.app-phone-number-input .phone-input-wrap > .input:focus-visible,
+.input-with-unit .num-input:focus-visible,
+.num-wrap .num-input:focus-visible,
+.wui-input-group > :is(.form-control, .input):focus-visible {
+    outline: none;
+}
+
 // ---- Not obscured (WCAG 2.4.11) ---------------------------------------------
 // A control focused by Tab scrolls clear of the sticky shell topbar (72px) and a sticky form
 // footer (AppFormActions sticky, about 78px), not under them.
@@ -224,6 +257,25 @@ html:has(.form-actions-sticky) {
     }
 }
 
+// Small inline controls answer clicks across at least 24px (the WCAG target-size floor) while the
+// ink stays its size. Touch pointers widen the country toggle further, below.
+.infotip-btn,
+.chip-remove,
+.country-toggle {
+    position: relative;
+}
+.infotip-btn::before,
+.chip-remove::before,
+.country-toggle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max(100%, 24px);
+    height: max(100%, 24px);
+}
+
 // Phone touch targets
 // Below sm the pointer is a finger: every small control the library draws reaches 44px.
 @media (max-width: 575.98px) {
@@ -247,7 +299,8 @@ html:has(.form-actions-sticky) {
 
 // Touch pointers at any width: the same 44px floor for controls the phone block does not reach.
 @media (pointer: coarse) {
-    .app-tab {
+    .app-tab,
+    .app-tabs-sm .app-tab {
         min-height: 44px;
     }
     .app-tabs-scroll-btn {

package/scss/wui/_lightbox.scss

@@ -95,7 +95,7 @@
         outline-offset: var(--wui-focus-ring-offset);
     }
     &:disabled {
-        opacity: 0.4;
+        opacity: var(--wui-disabled-opacity);
     }
 }
 

package/scss/wui/_media.scss

@@ -36,7 +36,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
     color: var(--color-primary-ink);
-    font-size: calc(var(--avatar-size, 32px) * 0.375);
+    // Initials take 37.5% of the disc but never go under the 12px text floor; a disc under 24px
+    // takes half its size instead, the most two letters fit (the 20px preset sets 10px).
+    font-size: max(min(12px, calc(var(--avatar-size, 32px) * 0.5)), calc(var(--avatar-size, 32px) * 0.375));
     font-weight: 600;
     display: inline-flex;
     align-items: center;
@@ -49,12 +51,12 @@
 .avatar-xs {
     width: 20px;
     height: 20px;
-    font-size: 8px;
+    font-size: 10px;
 }
 .avatar-sm {
     width: 24px;
     height: 24px;
-    font-size: 10px;
+    font-size: 12px;
 }
 .avatar-lg {
     width: 48px;
@@ -130,7 +132,7 @@
     // The pairing .wui-bell-count uses (_shell-parts.scss): it clears contrast in light and dark.
     background: var(--color-danger-strong);
     color: var(--color-progress-label);
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 1;
     box-shadow: 0 0 0 2px var(--color-surface);
@@ -883,7 +885,7 @@
 }
 // A disabled drop zone (AppDropZone `disabled`): dimmed, no pointer affordance, and no hover lift.
 .file-input[aria-disabled="true"] {
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .file-input[aria-disabled="true"] > .file-input-zone-label {
@@ -973,14 +975,13 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    // Label + gap scale with the ring so a small (sm, 72px) ring's overlay stays legible and
-    // uncramped instead of wrapping a fixed 11px "Update photo" into a tight disc where it
-    // overlaps the initials. Clamped so md/lg land on the same 11px / 4px gap as before.
+    // The gap scales with the ring so a small (sm, 72px) ring's overlay stays uncramped. The label
+    // stays at the 12px floor; a small ring wraps it to two lines.
     gap: clamp(2px, calc(var(--wui-logo-size) * 0.035), 4px);
     padding: 0 6%;
     background: var(--color-scrim-strong);
     color: var(--color-on-scrim);
-    font-size: clamp(9px, calc(var(--wui-logo-size) * 0.1), 11px);
+    font-size: 12px;
     line-height: 1.15;
     text-align: center;
     font-weight: 600;
@@ -1143,7 +1144,7 @@
 // A plain disabled (not busy) picker: dim it and drop the pointer affordance.
 .set-uploader:disabled:not([aria-busy="true"]) {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
 }
 .set-uploader:disabled:not([aria-busy="true"]) .set-uploader-ring {
     border-style: solid;

package/scss/wui/_navigation.scss

@@ -192,7 +192,8 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 10px 14px;
+    min-height: var(--wui-control-height);
+    padding: 0 14px;
     border: 0;
     // Sits on the strip's own hairline rather than adding a second one.
     border-bottom: 2px solid transparent;
@@ -270,7 +271,7 @@
 .app-tab:disabled,
 .app-tab.disabled,
 .app-tab[aria-disabled="true"] {
-    color: var(--color-text-subtle);
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 // A disabled link tab already has no href; also stop it swallowing clicks (a <button:disabled>
@@ -375,7 +376,8 @@
 
 // ── Sizes ──
 .app-tabs-sm .app-tab {
-    padding: 6px 10px;
+    min-height: var(--wui-control-height-sm);
+    padding: 0 10px;
     gap: 6px;
     font-size: 13px;
 }
@@ -384,7 +386,8 @@
     height: 16px;
 }
 .app-tabs-lg .app-tab {
-    padding: 14px 18px;
+    min-height: var(--wui-control-height-lg);
+    padding: 0 18px;
     font-size: 15px;
 }
 .app-tabs-lg .app-tab-img {
@@ -791,7 +794,7 @@
 }
 .search-input:disabled {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
 }
 
 // Breadcrumbs — Bootstrap's .breadcrumb with brand tokens (AppBreadcrumbs / <app-breadcrumbs>).

package/scss/wui/_notification-center.scss

@@ -26,7 +26,7 @@
     border-radius: 999px;
     background: var(--color-danger-strong);
     color: var(--color-progress-label);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 14px;
     text-align: center;
@@ -110,7 +110,7 @@
     text-decoration: underline;
 }
 .wui-notification-center-markall:disabled {
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
     cursor: default;
     text-decoration: none;
 }

package/scss/wui/_overlays.scss

@@ -165,7 +165,7 @@
 // Break long unbroken names so they wrap within the heading instead of
 // running under the close button.
 .wui-modal-title {
-    font-size: 20px;
+    font-size: 17px;
     font-weight: 600;
     color: var(--color-text);
     overflow-wrap: anywhere;
@@ -179,7 +179,7 @@
 }
 // Eyebrow — a small kicker label above the title (a section / step / category marker).
 .wui-modal-eyebrow {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;

package/scss/wui/_rating.scss

@@ -71,7 +71,7 @@
     width: 100%;
 }
 .wui-rating-input[disabled] {
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
 }
 .wui-rating-input[disabled] .wui-rating-star {
     cursor: not-allowed;

package/scss/wui/_rich-text.scss

@@ -111,7 +111,7 @@ wui-rich-text[readonly] .wui-rich-text-shell {
 }
 .wui-rich-text-button:disabled {
     color: var(--color-text-subtle);
-    opacity: 0.5;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .wui-rich-text-glyph {

package/scss/wui/_score-scale.scss

@@ -42,7 +42,7 @@
     outline-offset: var(--wui-focus-ring-offset);
 }
 .wui-score-scale__item:has(input:disabled) {
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .wui-score-scale__ends {

package/scss/wui/_shell-parts.scss

@@ -90,7 +90,7 @@
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
-        font-size: 0.6875rem;
+        font-size: 0.75rem;
         line-height: 1.15;
         overflow-wrap: anywhere;
         text-overflow: clip;
@@ -109,7 +109,7 @@
     border-radius: 999px;
     background: var(--color-bg-muted);
     color: var(--color-text-muted);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 18px;
     text-align: center;
@@ -254,7 +254,7 @@
     border-radius: 999px;
     background: var(--color-danger-strong);
     color: var(--color-progress-label);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 14px;
     text-align: center;
@@ -296,7 +296,7 @@
     text-decoration: underline;
 }
 .wui-bell-markall:disabled {
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
     cursor: default;
 }
 .wui-bell-list {

package/scss/wui/_shell.scss

@@ -380,7 +380,7 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    // 44px is the touch-target floor, and it is the same control height buttons
+    // It is the same control height buttons
     // and inputs use — the nav reads as part of the same system.
     min-height: var(--wui-control-height);
     padding: 9px 14px;
@@ -434,7 +434,7 @@
     padding: 1px 7px;
     border-radius: 999px;
     background: var(--color-bg-muted);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 500;
     color: var(--color-text-subtle);
 }