@webority/theme 0.81.0 → 0.82.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.81.0",
+  "version": "0.82.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_brand-signal.scss

@@ -135,12 +135,9 @@
     border-color: var(--color-primary);
 }
 
-// Display type: Webority Serif Demi Bold on titles, Webority Sans on everything else.
+// Display type: Webority Serif Demi Bold only at 24px and above (page and result titles); every
+// smaller title stays in Webority Sans.
 .page-title,
-.card-title,
-.wui-modal-title,
-.empty-state-title,
-.tbl-empty-title,
 .result-title {
     font-family: var(--wui-font-display);
     font-weight: 600;
@@ -148,6 +145,11 @@
     letter-spacing: -0.01em;
     color: var(--color-text);
 }
+// The compact page titles (size sm and the page header bar) are 20px, so they keep the sans face.
+.page-header-sm .page-title,
+.page-header.page-header-bar .page-title {
+    font-family: inherit;
+}
 
 @mixin wui-signal-dark {
     --wui-signal-heading: #C4AEFF;
@@ -212,9 +214,6 @@
     :where(&) .compare-table td.is-highlight {
         background: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
     }
-    :where(&) .segmented {
-        --segmented-selected-bg: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
-    }
     :where(&) .table-ledger tbody tr.is-selected:hover {
         --bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent);
     }

package/scss/_components.scss

@@ -6,7 +6,7 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
-// A button is exactly as tall as a field of the same size (the --wui-control-height ladder, 36/44/52px), so a
+// A button is exactly as tall as a field of the same size (the --wui-control-height ladder, 32/36/44px), so a
 // button beside an input lines up in every form row. Heights are min-height with the label flex-centred; sm/lg
 // set theirs in their size blocks below.
 .btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
@@ -270,14 +270,14 @@
 // sizes step font-size, horizontal padding and radius together (vertical size
 // comes from --wui-control-height, so a button lines up with an input). Weight
 // is 600 on every rung — buttons read as a deliberate action, not body text.
-// Medium (default): 14px / 600, about 20px side padding, 18px squircle radius, --wui-control-height tall.
+// Medium (default): 14px / 600, about 12px side padding, 14px squircle radius, --wui-control-height tall.
 // Side padding is always twice the vertical padding. A button is its field's height with the label
 // line centred, so its vertical padding is (height - both borders - one line) / 2 and its side
-// padding the height less both borders and one line: about 7.7/15.4, 10.2/20.3 and 12.6/25.2px at sm,
+// padding the height less both borders and one line: about 5.7/11.4, 6.2/12.3 and 8.6/17.2px at sm,
 // md and lg with the theme's line height.
 .btn {
     --wui-btn-height: var(--wui-control-height);
-    --bs-btn-border-radius: 18px;
+    --bs-btn-border-radius: 14px;
     --bs-btn-font-size: 0.875rem;
     --bs-btn-font-weight: 600;
     --bs-btn-padding-x: calc(var(--wui-btn-height) - 2 * var(--bs-btn-border-width) - var(--bs-btn-font-size) * var(--bs-btn-line-height));
@@ -285,24 +285,24 @@
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 12px, about 15px side padding, 14px squircle radius (proportional to md), as tall as a small field.
+// Small: 12px, about 11px side padding, 12px squircle radius (proportional to md), as tall as a small field.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
     --wui-btn-height: var(--wui-control-height-sm);
     --bs-btn-padding-y: 0;
-    --bs-btn-border-radius: 14px;
+    --bs-btn-border-radius: 12px;
     --bs-btn-font-size: 0.75rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: var(--wui-control-height-sm);
 }
-// Large: 16px, about 25px side padding, 22px squircle radius (proportional to md), as tall as a large field.
+// Large: 16px, about 17px side padding, 18px squircle radius (proportional to md), as tall as a large field.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
     --wui-btn-height: var(--wui-control-height-lg);
     --bs-btn-padding-y: 0;
-    --bs-btn-border-radius: 22px;
+    --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 1rem;
     display: inline-flex;
     align-items: center;
@@ -719,7 +719,7 @@
     background-color: transparent;
     border-color: transparent;
     color: var(--color-primary-ink);
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
 }
 .btn.btn-ghost.btn-ghost.is-loading:disabled,
 .btn.btn-ghost.btn-ghost.is-loading.disabled {
@@ -792,7 +792,7 @@
     background-color: transparent;
     border-color: transparent;
     color: var(--color-primary-ink);
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
 }
 
 // ---- Card hover-lift (name is historical) -----------------------------

package/scss/_tokens.scss

@@ -81,14 +81,12 @@
     --wui-shadow-thumb: 0 2px 6px rgba(0, 0, 0, 0.1);
     --wui-shadow-thumb-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
 
-    // One height for every form control. Buttons, inputs and selects share form
-    // rows, so they must line up — they were 46.8px and 45px, which reads as a
-    // misalignment on every filter bar. 44px is also the WCAG touch-target floor.
-    --wui-control-height: 44px;
-    // Optional size steps (sm/lg) for dense toolbars / marketing-scale fields. md is the
-    // default above; a control opts into a step with .input-sm / .input-lg.
-    --wui-control-height-sm: 36px;
-    --wui-control-height-lg: 52px;
+    // The control height ladder: sm 32, md 36, lg 44. A button, field, select, segmented control, tab
+    // or chip of one size shares its height, so a row of mixed controls lines up. On a phone-width or
+    // touch screen md rises to 44px, the touch-target floor (media rule after this block).
+    --wui-control-height: 36px;
+    --wui-control-height-sm: 32px;
+    --wui-control-height-lg: 44px;
 
     // Scrollbar thumb — one quiet grey-blue at three interaction strengths.
     --wui-scrollbar: rgba(145, 158, 171, 0.45);
@@ -361,6 +359,14 @@
     --wui-first-day: 1;
 }
 
+// A finger needs 44px: on a phone-width or touch screen the default control takes the lg rung. The
+// same query sizes the modal and drawer close buttons (wui/_overlays.scss).
+@media (max-width: 575.98px), (pointer: coarse) {
+    :root {
+        --wui-control-height: 44px;
+    }
+}
+
 // Bootstrap md / xl (not invented px)
 @media (min-width: 768px) {
     :root { --wui-container-pad: 64px; }

package/scss/_variables.scss

@@ -291,7 +291,7 @@ $input-border-color: $border-color;
 // post-CSS focus uses var(--color-primary) so runtime rebrand tracks.
 $input-focus-box-shadow: none; // border IS the focus cue
 $input-focus-color: $body-color;
-$input-padding-y: 0.5rem; // filler inside --wui-control-height (44px)
+$input-padding-y: 0.5rem; // filler inside --wui-control-height (36px at md)
 $input-padding-x: 0.875rem; // 14px
 $input-border-radius: $border-radius;
 // Themed, so it flips in dark mode. The old fixed #99A1B7 was 2.58:1 on white and read as typed text on dark.
@@ -342,7 +342,7 @@ $link-hover-decoration: underline;
 // colour. A runtime var also avoids capturing the library's compile-time $primary.
 // $focus-ring-blur matches BS (0) — not restated.
 $focus-ring-color: var(--color-focus-ring);
-$focus-ring-width: 3px; // BS 0.25rem (4px)
+$focus-ring-width: 2px; // matches --wui-focus-ring-width; Bootstrap builds box-shadow strings from it at compile time
 
 
 // ---- Z-index ----------------------------------------------------------

package/scss/_wui-aliases.scss

@@ -57,6 +57,11 @@
   --color-pressed-overlay: color-mix(in srgb, currentColor 12%, transparent);
   --wui-press-scale: 0.96;
   --wui-press-duration: 80ms;
+  // Disabled: one opacity for every control that dims as a whole (a checkbox, a segmented option, a
+  // chip, a tab, an icon button). A text field does not dim; it takes the deeper disabled fill.
+  --wui-disabled-opacity: 0.5;
+  // The raised thumb that marks the selected option of a segmented control: white in light mode.
+  --color-thumb: var(--wui-bg-light);
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 
@@ -181,6 +186,8 @@
   // light-mode field-bg override lives on --wui-field-bg.
   --color-field-bg: var(--wui-dark-bg-muted);
   --color-surface: var(--wui-dark-bg-surface);
+  // A raised thumb is lighter than the muted track it sits on.
+  --color-thumb: color-mix(in srgb, var(--wui-dark-text) 12%, var(--wui-dark-bg-muted));
 
   --color-border: var(--wui-dark-border);
   --color-border-light: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);

package/scss/wui/_carousel.scss

@@ -87,7 +87,7 @@
     }
     // Disabled by aria so a focused button at the end of the row keeps focus.
     &[aria-disabled="true"] {
-        opacity: 0.4;
+        opacity: var(--wui-disabled-opacity);
         cursor: default;
         background: var(--color-surface);
         color: var(--color-text);

package/scss/wui/_chart.scss

@@ -130,7 +130,7 @@ wui-chart[aria-busy="true"] .wui-chart-surface {
 }
 .wui-chart-tooltip-title {
     margin-bottom: 6px;
-    font-size: 11.5px;
+    font-size: 12px;
     font-weight: 500;
     color: var(--color-text-subtle);
 }
@@ -165,7 +165,7 @@ wui-chart[aria-busy="true"] .wui-chart-surface {
     margin-top: 6px;
     padding-top: 6px;
     border-top: 1px solid var(--color-border);
-    font-size: 11.5px;
+    font-size: 12px;
     color: var(--color-text-subtle);
 }
 

package/scss/wui/_choice.scss

@@ -38,7 +38,7 @@
 
 // A card that cannot change: its input is disabled directly or by a disabled fieldset.
 .struct-card:has(.struct-card-input:disabled) {
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .struct-card:has(.struct-card-input:disabled):hover {
@@ -257,7 +257,7 @@
 }
 .search-select-control:disabled {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
 }
 .search-select-control:hover:not(:disabled):not(.open):not([aria-invalid="true"]):not(:has(.search-select-ac-input:disabled)):not([aria-disabled="true"]) {
     // Not while open — an open control keeps its active (primary) border, not the grey hover one.
@@ -287,8 +287,8 @@
 .search-select-control:focus-visible,
 .search-select-control:has(> .search-select-input:focus-visible),
 .search-select-control:has(.ms-input:focus-visible) {
-    outline: 2px solid var(--color-focus-ring);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -325,16 +325,16 @@
 .search-select-lg .search-select-multi {
     height: auto;
 }
-// AppSelectMini is <wui-select compact> (a 32px picker). Its sizes are compact-scaled —
-// the compound selector outranks both the plain size rule and the compact rule.
+// AppSelectMini is <wui-select compact>: sm sits on the 32px sm rung, lg one rung below the lg
+// field, never under 32px. The compound selector outranks both the plain size rule and the compact rule.
 .search-select-compact.search-select-sm .search-select-control {
-    height: 28px;
-    min-height: 28px;
+    height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-height-sm);
     font-size: 12px;
 }
 .search-select-compact.search-select-lg .search-select-control {
-    height: 38px;
-    min-height: 38px;
+    height: var(--wui-control-height);
+    min-height: var(--wui-control-height);
     font-size: 14px;
 }
 
@@ -398,7 +398,7 @@
 //
 // <wui-select compact> emitted this class and NOTHING styled it, so AppSelectMini rendered
 // byte-identical to a full-size select on both surfaces — the catalogue told people to
-// reach for it when they wanted something compact, and got a 44px control. It was invisible
+// reach for it when they wanted something compact, and got a full-height control. It was invisible
 // to every gate because the class check only ever scanned the Razor tag helpers, never the
 // elements package that actually emits it.
 //
@@ -406,8 +406,8 @@
 // pagination) so a compact wui select and a compact native select read as one control
 // rather than two sizes of the same idea.
 .search-select-compact .search-select-control {
-    height: 32px;
-    min-height: 32px;
+    height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-height-sm);
     min-width: 64px;
     padding: 0 10px;
     font-size: 13px;
@@ -445,6 +445,7 @@
 // Search box matches the search bar: rounded field, leading icon turns
 // primary.
 .search-select-search {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -457,9 +458,6 @@
     background: var(--color-field-bg);
     color: var(--color-text-subtle);
 }
-.search-select-search {
-    position: relative;
-}
 // Hover and focus follow AppInput, as the phone country search does: a stronger border on hover,
 // then a clean surface fill + soft primary border on focus.
 .search-select-search:hover:not(:focus-within) {
@@ -743,7 +741,7 @@ button.datepicker-month:hover {
 }
 .datepicker-weekdays span {
     text-align: center;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -1253,7 +1251,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .country-toggle:disabled {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
 }
 // Flag glyphs come from the generated .wui-flag-* classes (_flags.scss).
 .app-phone-number-input .phone-chevron {
@@ -1633,7 +1631,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .timepicker-option:disabled {
     color: var(--color-text-subtle);
-    opacity: 0.5;
+    opacity: var(--wui-disabled-opacity);
     cursor: not-allowed;
 }
 .timepicker-option:focus-visible {

package/scss/wui/_command-palette.scss

@@ -162,7 +162,7 @@ button.wui-cmd-crumb:focus-visible {
 .wui-cmd-group-label {
     padding: 8px 10px 4px;
     color: var(--color-text-muted);
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
@@ -191,7 +191,7 @@ button.wui-cmd-crumb:focus-visible {
 .wui-cmd-item[aria-disabled="true"] {
     color: var(--color-text-muted);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
 }
 .wui-cmd-item-icon {
     display: inline-grid;
@@ -290,7 +290,7 @@ button.wui-cmd-crumb:focus-visible {
     background: var(--color-bg-muted);
     color: var(--color-text);
     font-family: inherit;
-    font-size: 11px;
+    font-size: 12px;
 }
 
 @media (prefers-reduced-motion: no-preference) {

package/scss/wui/_controls.scss

@@ -272,7 +272,7 @@
 .wui-check:disabled,
 .wui-radio:disabled {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--wui-disabled-opacity);
     box-shadow: none;
 }
 // A disabled box that is ticked keeps its primary fill, only dimmed; the muted fill is for an
@@ -386,7 +386,7 @@
     box-sizing: border-box;
     width: 100%;
     height: var(--wui-control-height);
-    padding: 12px;
+    padding: 6px 12px;
     border-radius: var(--wui-field-radius);
     border: 1px solid var(--color-field-border);
     background: var(--color-field-bg);
@@ -398,20 +398,20 @@
         box-shadow 0.12s;
     font-family: inherit;
 }
-// Size steps — sm/lg opt out of the shared 44px control height. App* emits
+// Size steps: sm/lg step to the 32px and 44px rungs. App* emits
 // .input-sm/.input-lg; Bootstrap's form-control-sm/lg are included so a raw
 // BS field can match without the .input alias.
 .form-control-sm,
 .input-sm {
     height: var(--wui-control-height-sm);
-    padding: 6px 10px;
+    padding: 5px 10px;
     font-size: 13px;
     border-radius: var(--wui-field-radius-sm);
 }
 .form-control-lg,
 .input-lg {
     height: var(--wui-control-height-lg);
-    padding: 14px 16px;
+    padding: 9px 16px;
     font-size: 16px;
     border-radius: var(--wui-field-radius-lg);
 }
@@ -1352,8 +1352,8 @@ wui-select[compact] {
     border-radius: 0;
     background: transparent;
     // The wrapper owns the 1px border, so the input must shed those 2px. The input
-    // is a border-box control-height box (44px at md); nesting it in a 1px-bordered
-    // wrapper stacks the wrapper's 2px on top, so a 44px field renders at 46px with a
+    // is a border-box control-height box (36px at md); nesting it in a 1px-bordered
+    // wrapper stacks the wrapper's 2px on top, so a 36px field renders at 38px with a
     // unit. Subtracting the border here keeps input + wrapper border == the control
     // height at every size.
     height: calc(var(--wui-control-height) - 2px);
@@ -1451,8 +1451,8 @@ wui-select[compact] {
 .num-btn {
     display: grid;
     place-items: center;
-    // A 44px cell that shrinks before the value does in a narrow field.
-    flex: 0 1 44px;
+    // A control-height cell that shrinks before the value does in a narrow field.
+    flex: 0 1 var(--wui-control-height);
     min-width: 0;
     overflow: hidden;
     // Fill the field height and centre the glyph. `height: 100%` resolved to auto
@@ -1483,7 +1483,7 @@ wui-select[compact] {
 .num-btn:disabled {
     color: var(--color-text-subtle);
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--wui-disabled-opacity);
 }
 // Segment dividers: minus divides on its right, plus on its left — so the value
 // cell is bounded on both sides. (DOM order is minus, input, [unit], plus on both
@@ -1497,12 +1497,12 @@ wui-select[compact] {
 
 // ── Size variants ── the inner input carries .input-sm / .input-lg (height +
 // font), the wrapper carries .num-wrap-sm / .num-wrap-lg to scale the button
-// cells to match. Default (md) uses the base 44px cell above.
+// cells to match. Default (md) uses the control-height cell above.
 .num-wrap-sm {
     border-radius: var(--wui-field-radius-sm);
 }
 .num-wrap-sm .num-btn {
-    flex-basis: 36px;
+    flex-basis: var(--wui-control-height-sm);
 }
 .num-wrap-sm .num-input {
     font-size: 13px;
@@ -1511,7 +1511,7 @@ wui-select[compact] {
     border-radius: var(--wui-field-radius-lg);
 }
 .num-wrap-lg .num-btn {
-    flex-basis: 52px;
+    flex-basis: var(--wui-control-height-lg);
 }
 .num-wrap-lg .num-input {
     font-size: 16px;
@@ -1613,17 +1613,19 @@ wui-select[compact] {
 }
 
 // ── Choice chip ──
-// Inline selectable chip — native control hidden, pill adopts the primary
-// accent when checked.
+// Inline selectable chip: the native input is hidden and the pill shows its state. The look reads
+// the input itself, so a server-rendered chip changes when it is clicked, with no script.
 .choice-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 9px 14px;
+    min-height: var(--wui-control-height);
+    padding: 0 14px;
     border: 1px solid var(--color-border);
     border-radius: 999px;
     font-size: 14px;
     font-weight: 500;
+    line-height: 1.2;
     color: var(--color-text);
     background: var(--color-surface);
     cursor: pointer;
@@ -1633,7 +1635,7 @@ wui-select[compact] {
         background 0.12s ease,
         color 0.12s ease;
 }
-.choice-chip:hover {
+.choice-chip:hover:not(:has(input:disabled)) {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .choice-chip:has(input:focus-visible) {
@@ -1645,62 +1647,68 @@ wui-select[compact] {
     opacity: 0;
     pointer-events: none;
 }
-.choice-chip.checked {
-    // Match AppChoiceCard's checked border: a soft primary-30 edge, not the
-    // full-strength primary line (they read as the same selection language).
+// Match AppChoiceCard's checked border: a soft primary-30 edge, not a full-strength line.
+.choice-chip:has(input:checked) {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-primary-soft);
     color: var(--color-primary-ink);
 }
+// A tick before the label, so selection does not rest on the tint alone. Its slot is kept on every
+// chip, so picking one never widens it and a wrapping row never shifts.
+.choice-chip::before {
+    content: "";
+    flex: none;
+    width: 14px;
+    height: 14px;
+    background: transparent;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.choice-chip:has(input:checked)::before {
+    background: currentColor;
+}
+.choice-chip:has(input:disabled) {
+    opacity: var(--wui-disabled-opacity);
+    cursor: not-allowed;
+}
 
-// A count badge inside a selectable chip — "Active 12". Inverts on selection for
-// the same reason the nav badge does: the chip already carries the soft tint, so a
-// tinted badge on top of it would disappear.
+// A count badge inside a selectable chip ("Active 12"). It inverts on selection: the chip already
+// carries the soft tint, so a tinted badge on top of it would disappear.
 .choice-chip .count {
     padding: 1px 6px;
     border-radius: 999px;
     background: var(--color-bg-muted);
-    font-size: 11px;
+    font-size: 12px;
     font-variant-numeric: tabular-nums;
     color: var(--color-text-subtle);
 }
-.choice-chip.checked .count {
+.choice-chip:has(input:checked) .count {
     background: var(--color-surface);
     color: var(--color-primary-ink);
 }
 
-// Size scale (`size`): padding, gap and font step together; md is the base above.
+// Size scale (`size`): height, padding, gap and font step together; md is the base above.
 .choice-chip-sm {
     gap: 6px;
-    padding: 6px 11px;
+    min-height: var(--wui-control-height-sm);
+    padding: 0 11px;
     font-size: 13px;
 }
-.choice-chip-sm .count {
-    font-size: 10px;
-}
 .choice-chip-lg {
     gap: 10px;
-    padding: 11px 18px;
+    min-height: var(--wui-control-height-lg);
+    padding: 0 18px;
     font-size: 15px;
 }
-.choice-chip-lg .count {
-    font-size: 12px;
-}
 
 // A count beside an AppSegmented option's label: a small muted figure with tabular digits, the
 // same treatment as a choice chip's count. Plain colour, no opacity, so it keeps its contrast.
 .wui-segmented-option-count {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 500;
     font-variant-numeric: tabular-nums;
     color: var(--color-text-muted);
 }
-// Keyboard focus on the selected segment: the ring sits inside the pill, over its selected ring,
-// so the focus cue and the selection read as one shape and not as two rings. The selector outranks
-// the unscoped focus rule in _display.scss, which loads after this partial.
-.segmented .segmented-option:has(.segmented-input:checked:focus-visible) {
-    outline-offset: var(--wui-focus-ring-inset);
-}
 
 // Form section heading — a branded accent bar rather than a full-width hairline,
 // so a long form reads as designed sections instead of raw rules.
@@ -1789,7 +1797,7 @@ wui-otp {
     width: 44px;
     min-width: 22px;
     flex: 0 1 auto;
-    height: var(--wui-control-height);
+    height: var(--wui-control-height-lg);
     // Colour model matches AppInput exactly: muted resting fill + soft border, same
     // field radius. State rules below mirror AppInput's hover/focus/invalid/disabled.
     border: 1px solid var(--color-field-border);
@@ -1936,7 +1944,7 @@ wui-otp[aria-invalid="true"] .otp-slot {
 .slider:has([disabled]) .slider-thumb {
     border-color: var(--color-text-subtle);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wui-disabled-opacity);
 }
 .slider:has([disabled]) .slider-fill {
     background-color: var(--color-text-subtle);