@webority/theme 0.0.10 → 0.3.0

package/scss/_wui-components.scss

@@ -1,9 +1,9 @@
 // ============================================================================
 // _wui-components.scss
 // ----------------------------------------------------------------------------
-// Extracted portal component layer — verbatim CSS pulled from the Lumex
-// customer portal's `design-system.css`, `components.css`, and
-// `portal-helpers.css` (Lumex.Web.Customer/src/assets/styles/).
+// Extracted portal component layer — the shared, reusable UI-component
+// CSS pulled from the customer portal's `design-system.css`,
+// `components.css`, and `portal-helpers.css`.
 //
 // Only rules whose subject is a genuinely shared, reusable UI-component class
 // were kept (fields, badges, modals, tables, drawers, phone/date/search
@@ -16,7 +16,7 @@
 // ============================================================================
 
 // ── Checkbox & Radio ──
-// Lumex selection controls: a 20px glyph centred in a 36px circular hit area
+// Selection controls: a 20px glyph centred in a 36px circular hit area
 // that shows a soft primary-tinted ripple on hover. Unchecked = muted
 // grey-blue outline; checked = solid primary. Checkbox = squircle box + white
 // tick; radio = ring + filled centre dot. Pure CSS, no JS — drives the native
@@ -69,7 +69,7 @@
         background-color 0.15s ease;
 }
 .lx-check {
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
     corner-shape: squircle;
 }
 .lx-radio {
@@ -190,9 +190,9 @@
 .textarea {
     box-sizing: border-box;
     width: 100%;
-    height: 45px;
+    height: var(--wui-control-height);
     padding: 12px;
-    border-radius: 8px;
+    border-radius: var(--radius);
     border: 1px solid var(--color-border);
     background: var(--color-surface);
     font-size: 14px;
@@ -222,7 +222,7 @@
     outline: none;
     background-color: var(--color-bg-muted);
     color: var(--color-text);
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
 // Textarea renders as .form-control.textarea (react-bootstrap). Match the
@@ -233,7 +233,7 @@ textarea.textarea.form-control:hover:not(:focus):not(:disabled):not([readonly])
 }
 textarea.textarea:focus {
     outline: none;
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
 .input::placeholder,
@@ -269,17 +269,27 @@ textarea.textarea:focus {
 
 // Invalid field state (required-field validation) — soft danger-tinted
 // border on the surface.
+// `[aria-invalid="true"]` is styled alongside `.is-invalid`: React sets the ARIA
+// attribute (it is the accessible source of truth) and does not always add the
+// Bootstrap class, so keying on the class alone left React error states unstyled.
 .input.is-invalid,
 .select.is-invalid,
 .textarea.is-invalid,
 .input.is-invalid:focus,
 .select.is-invalid:focus,
-.textarea.is-invalid:focus {
+.textarea.is-invalid:focus,
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"],
+.input[aria-invalid="true"]:focus,
+.select[aria-invalid="true"]:focus,
+.textarea[aria-invalid="true"]:focus {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
     box-shadow: none;
 }
-.input.is-invalid {
+.input.is-invalid,
+.input[aria-invalid="true"] {
     padding-right: 41px;
 }
 .field-error {
@@ -472,7 +482,7 @@ textarea.textarea:focus {
     border: none;
     background: transparent;
     color: var(--color-text-subtle);
-    border-radius: 8px;
+    border-radius: var(--radius);
     cursor: pointer;
     transition:
         color 0.12s ease,
@@ -546,9 +556,11 @@ textarea.textarea:focus {
 .field > .field-error {
     align-self: stretch;
 }
+// Doubled selectors — see the lg-tier block below: a media query carries no
+// extra specificity, so a consumer's later single-class rule would win.
 @media (max-width: 575.98px) {
-    .field-row,
-    .field-row-3 {
+    .field-row.field-row,
+    .field-row-3.field-row-3 {
         grid-template-columns: 1fr;
     }
 }
@@ -556,7 +568,7 @@ textarea.textarea:focus {
 // red border around a non-input group (e.g. a structure-form card row)
 .group-invalid {
     border: 1px solid var(--color-danger);
-    border-radius: 10px;
+    border-radius: var(--radius);
     padding: 8px;
 }
 
@@ -566,7 +578,7 @@ textarea.textarea:focus {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--color-border);
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
     transition:
@@ -580,7 +592,7 @@ textarea.textarea:focus {
 }
 .input-with-unit:focus-within {
     background: var(--color-bg-muted);
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .input-with-unit:has(.num-input.error) {
     border-color: var(--color-danger);
@@ -657,7 +669,7 @@ textarea.textarea:focus {
     background: currentColor;
 }
 
-// Keystone "soft" status badge — pill, 12/600, muted tone fill.
+// "Soft" status badge — pill, 12/600, muted tone fill.
 .status-label {
     display: inline-flex;
     align-items: center;
@@ -670,24 +682,40 @@ textarea.textarea:focus {
     line-height: 1;
     white-space: nowrap;
 }
+// Tones are SEMANTIC (success/warning/danger/info/neutral) — the same
+// vocabulary .chip and .badge use — and derive from the same semantic ramp.
+// The colour-named `.tone-*` classes are kept as deprecated aliases so older
+// Razor call sites keep working; author new markup with the semantic names.
+.status-label.success,
 .status-label.tone-green {
-    background: rgba(34, 197, 94, 0.16);
+    background: color-mix(in srgb, var(--color-success) 16%, transparent);
     color: var(--color-success-strong);
 }
+.status-label.warning,
 .status-label.tone-amber {
-    background: rgba(255, 171, 0, 0.16);
+    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
     color: var(--color-warning-strong);
 }
+.status-label.danger,
 .status-label.tone-red {
-    background: rgba(255, 86, 48, 0.16);
+    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
     color: var(--color-danger-strong);
 }
+.status-label.info,
 .status-label.tone-blue {
-    background: rgba(0, 184, 217, 0.16);
+    background: color-mix(in srgb, var(--color-info) 16%, transparent);
     color: var(--color-info-strong);
 }
+.status-label.primary {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+// Default/neutral — also the bare `.status-label` look, so an unknown or
+// omitted tone still renders as a proper pill instead of transparent text.
+.status-label,
+.status-label.neutral,
 .status-label.tone-grey {
-    background: rgba(145, 158, 171, 0.16);
+    background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
     color: var(--color-text-subtle);
 }
 
@@ -735,7 +763,7 @@ textarea.textarea:focus {
     gap: 11px;
     padding: 20px;
     border: 1.5px solid var(--color-border);
-    border-radius: 10px;
+    border-radius: var(--radius);
     background: var(--color-surface);
     cursor: pointer;
     transition:
@@ -743,10 +771,10 @@ textarea.textarea:focus {
         background 0.12s ease;
 }
 .struct-card:hover {
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .struct-card.checked {
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: color-mix(in srgb, var(--color-primary) 5%, transparent);
 }
 .struct-card.checked .struct-card-title {
@@ -893,7 +921,7 @@ textarea.textarea:focus {
 }
 .search-select-control.open {
     background: var(--color-bg-muted);
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -919,9 +947,9 @@ textarea.textarea:focus {
     right: 0;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
-    box-shadow: 0 12px 32px rgba(7, 20, 55, 0.12);
+    box-shadow: var(--shadow-overlay);
     padding: 4px;
     overflow: hidden;
 }
@@ -945,7 +973,7 @@ textarea.textarea:focus {
     padding: 0 12px;
     height: 40px;
     border: 1px solid var(--color-border);
-    border-radius: 14px;
+    border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text-subtle);
@@ -1001,7 +1029,7 @@ textarea.textarea:focus {
     padding: 9px 14px;
     line-height: 1.4;
     border: none;
-    border-radius: 12px;
+    border-radius: var(--radius);
     corner-shape: squircle;
     background: transparent;
     font-size: 14px;
@@ -1043,7 +1071,7 @@ textarea.textarea:focus {
 }
 .datepicker.open .datepicker-trigger {
     background-color: var(--color-bg-muted);
-    border-color: rgba(47, 80, 228, 0.3);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
 // Portalled to <body> and fixed-positioned from JS so a modal's
@@ -1057,8 +1085,9 @@ textarea.textarea:focus {
     padding: 18px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: 18px;
+    border-radius: var(--radius-xl);
     corner-shape: squircle;
+    box-shadow: var(--shadow-overlay);
     animation: datepicker-in 0.14s ease;
 }
 .datepicker-pop.drop-up {
@@ -1198,7 +1227,7 @@ textarea.textarea:focus {
     border: none;
     background: transparent;
     padding: 6px 12px;
-    border-radius: 8px;
+    border-radius: var(--radius);
     font-size: 13px;
     font-weight: 600;
     color: var(--color-primary);
@@ -1217,24 +1246,65 @@ textarea.textarea:focus {
 .app-phone-number-input {
     width: 100%;
 }
+// One field, one border: the WRAPPER owns the chrome (same pattern as
+// .input-with-unit) so the dial-code picker and the number light up together.
+// The adornment used to be absolutely positioned over the input, which let the
+// placeholder run underneath it — masked only by the UA button's grey fill.
 .app-phone-number-input .phone-input-wrap {
-    position: relative;
+    display: flex;
+    align-items: center;
     width: 100%;
+    height: var(--wui-control-height);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    transition:
+        border-color 0.12s,
+        background-color 0.12s;
 }
-.app-phone-number-input .phone-input-wrap > .input {
-    width: 100%;
+.app-phone-number-input .phone-input-wrap:hover:not(:focus-within) {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-strong);
 }
-.app-phone-number-input .phone-country-adornment {
-    position: absolute;
-    left: 0;
-    top: 0;
+.app-phone-number-input .phone-input-wrap:focus-within {
+    background: var(--color-bg-muted);
+    border-color: var(--color-primary);
+}
+.app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
+    background: var(--color-bg-muted);
+    cursor: not-allowed;
+}
+.app-phone-number-input .phone-input-wrap:has(.input.error),
+.app-phone-number-input .phone-input-wrap:has(.input.is-invalid) {
+    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+}
+// The inner control drops its own chrome — the shell carries it.
+.app-phone-number-input .phone-input-wrap > .input,
+.app-phone-number-input .phone-input-wrap > .input:hover,
+.app-phone-number-input .phone-input-wrap > .input:focus {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
     height: 100%;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+// `relative` so the menu anchors here (it is NOT positioned by JS — it used to
+// rely on the adornment being absolute, which is why it appeared to float).
+.app-phone-number-input .phone-country-adornment {
+    position: relative;
+    flex: none;
     display: flex;
     align-items: center;
     padding-left: 12px;
     z-index: 5;
 }
-.country-dropdown .country-toggle {
+// NOT scoped under `.country-dropdown` — <wui-phone> renders the toggle inside
+// `.phone-country-adornment`, with no such wrapper. Scoping it there left the
+// button on raw UA styling (2px outset border + grey fill) inside the field.
+.country-toggle {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -1243,29 +1313,43 @@ textarea.textarea:focus {
     background: transparent;
     box-shadow: none;
     color: var(--color-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
 }
-.country-dropdown .country-toggle::after {
+.country-toggle::after {
     display: none;
 }
-.country-dropdown .country-toggle:hover,
-.country-dropdown .country-toggle:focus,
-.country-dropdown .country-toggle:active {
-    background: transparent !important;
-    box-shadow: none !important;
-    color: var(--color-text) !important;
+.country-toggle:hover,
+.country-toggle:focus,
+.country-toggle:active {
+    background: transparent;
+    box-shadow: none;
+    color: var(--color-text);
 }
-.app-phone-number-input .phone-flag {
-    width: 22px;
-    height: 15px;
-    border-radius: 2px;
-    object-fit: cover;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
+.country-toggle:hover .phone-chevron {
+    color: var(--color-text);
 }
+.country-toggle:focus {
+    outline: none;
+}
+.country-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+.country-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+// Flag glyphs come from the generated .wui-flag-* classes (_flags.scss).
 .app-phone-number-input .phone-chevron {
     color: var(--color-text-muted);
     transition: transform 0.2s ease;
 }
-.country-dropdown.show .phone-chevron {
+// Keyed off the element's own ARIA state — <wui-phone> toggles aria-expanded,
+// it never adds react-bootstrap's `.show`.
+.country-toggle[aria-expanded="true"] .phone-chevron {
     transform: rotate(180deg);
 }
 .app-phone-number-input .phone-dial {
@@ -1274,34 +1358,48 @@ textarea.textarea:focus {
     color: var(--color-text);
 }
 
+// Menu, search field and rows all share the .search-select language so the
+// country picker reads as the same component family as every other picker.
+// Fixed, with top/left set from the trigger rect by <wui-phone>, so an
+// overflow-hidden card/modal/table wrapper can't clip the list. Sits above the
+// modal layer, matching .search-select-menu-fixed and .datepicker-pop.
 .country-dropdown-menu {
+    position: fixed;
+    z-index: 1600;
     width: 320px;
-    padding: 8px 0;
+    max-width: calc(100vw - 16px);
+    padding: 4px;
     border: 1px solid var(--color-border);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
+    corner-shape: squircle;
     background: var(--color-surface);
-    box-shadow: 0 10px 24px -4px rgba(15, 42, 81, 0.14);
+    box-shadow: var(--shadow-overlay);
     overflow: hidden;
 }
 .dropdown-search-wrapper {
     position: relative;
-    padding: 4px 12px 8px;
+    margin: 4px;
 }
 .dropdown-search-icon {
     position: absolute;
-    left: 24px;
-    top: calc(50% - 3px);
+    left: 12px;
+    top: 50%;
     transform: translateY(-50%);
     display: flex;
-    color: var(--color-text-muted);
+    color: var(--color-text-subtle);
     pointer-events: none;
+    transition: color 0.12s ease;
+}
+.dropdown-search-wrapper:focus-within .dropdown-search-icon {
+    color: var(--color-primary);
 }
 .dropdown-search-input {
     width: 100%;
-    height: 38px;
+    height: 40px;
     padding: 0 12px 0 36px;
     border: 1px solid var(--color-border);
-    border-radius: 999px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
     font-size: 14px;
     color: var(--color-text);
     background: var(--color-surface);
@@ -1311,47 +1409,58 @@ textarea.textarea:focus {
     background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
+// Border is the focus cue everywhere else in the system — no glow ring here.
 .dropdown-search-input:focus {
     background: var(--color-bg-muted);
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
 }
 .country-list-scroll {
     max-height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     scrollbar-width: thin;
+    scrollbar-gutter: stable;
 }
 .country-list-scroll::-webkit-scrollbar {
     width: 6px;
 }
 .country-list-scroll::-webkit-scrollbar-thumb {
     background: var(--color-border);
-    border-radius: 3px;
+    border-radius: 999px;
 }
+// Rounded, inset rows with a primary-tinted hover — identical to
+// .search-select-option. (!important is required: react-bootstrap's
+// .dropdown-item ships its own colour/padding at equal specificity.)
 .country-dropdown-item {
     display: flex !important;
     align-items: center;
     gap: 10px;
-    padding: 9px 16px !important;
+    padding: 9px 14px !important;
+    border-radius: var(--radius) !important;
+    corner-shape: squircle;
     cursor: pointer;
     color: var(--color-text) !important;
     background: transparent !important;
     border: 0 !important;
+    transition:
+        background 0.12s ease,
+        color 0.12s ease;
 }
 .country-dropdown-item:hover,
 .country-dropdown-item:focus {
-    background: var(--color-bg-subtle) !important;
+    background: var(--color-primary-soft) !important;
+    color: var(--color-primary) !important;
 }
 .country-dropdown-item.selected {
     background: var(--color-primary-soft) !important;
+    color: var(--color-primary) !important;
+    font-weight: 500;
 }
-.country-dropdown-menu .phone-flag-lg {
-    width: 22px;
-    height: 15px;
-    border-radius: 2px;
-    object-fit: cover;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+.country-dropdown-menu .wui-flag {
     flex-shrink: 0;
 }
 .country-name-text {
@@ -1364,6 +1473,15 @@ textarea.textarea:focus {
     font-weight: 400;
     color: var(--color-text-muted);
 }
+// On a tinted row the label must ride the row colour, not stay grey.
+.country-dropdown-item:hover .country-name-text,
+.country-dropdown-item:focus .country-name-text,
+.country-dropdown-item.selected .country-name-text,
+.country-dropdown-item:hover .country-code-text,
+.country-dropdown-item:focus .country-code-text,
+.country-dropdown-item.selected .country-code-text {
+    color: currentColor;
+}
 .selected-check-icon {
     margin-left: auto;
     display: flex;
@@ -1423,7 +1541,7 @@ textarea.textarea:focus {
     gap: 12px;
     padding: 12px 14px;
     border: 1px dashed var(--color-border);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--color-surface);
     cursor: pointer;
     transition:
@@ -1480,7 +1598,7 @@ textarea.textarea:focus {
 .attach-preview {
     width: 100%;
     border: 1px solid var(--color-border);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--color-surface);
     overflow: hidden;
 }
@@ -1566,7 +1684,7 @@ textarea.textarea:focus {
     display: flex;
     align-items: stretch;
     width: 100%;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
     background: var(--color-surface);
@@ -1679,7 +1797,7 @@ textarea.textarea:focus {
     display: block;
     width: 100%;
     height: 350px;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
     overflow: hidden;
@@ -1746,7 +1864,7 @@ textarea.textarea:focus {
     font-size: 14px;
     font-weight: 600;
     border-radius: 999px;
-    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.22);
+    box-shadow: var(--shadow-overlay);
 }
 .file-preview-remove {
     position: absolute;
@@ -2018,7 +2136,7 @@ textarea.textarea:focus {
     place-items: center;
     width: 30px;
     height: 30px;
-    border-radius: 9px;
+    border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
     color: var(--color-primary);
@@ -2035,16 +2153,215 @@ textarea.textarea:focus {
     padding: 14px 16px 20px;
 }
 
+// ── Tabs ──
+// The tab strip both surfaces render. React drives it as a controlled strip and
+// Razor additionally renders Bootstrap panels beneath it, but the strip markup —
+// and therefore the look — is identical.
+.app-tabs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto;
+    scrollbar-width: none;
+    // Declared explicitly because the React AppTabs renders a react-bootstrap
+    // <Nav>, so the element also carries `.nav` — whose `flex-wrap: wrap` would
+    // otherwise apply unopposed (equal specificity, and we declared nothing),
+    // wrapping the tabs onto a second line instead of scrolling.
+    flex-wrap: nowrap;
+}
+.app-tabs::-webkit-scrollbar {
+    display: none;
+}
+.app-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border: 0;
+    // Sits on the strip's own hairline rather than adding a second one.
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    background: transparent;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        color 0.12s ease,
+        border-color 0.12s ease;
+}
+.app-tab:hover:not(:disabled):not(.active) {
+    color: var(--color-text);
+}
+.app-tab.active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+    // The active tab carries weight as well as colour — colour alone is a weak
+    // signal for anyone who reads the strip at a glance or cannot distinguish it.
+    font-weight: 600;
+}
+.app-tab:disabled {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.app-tab:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: var(--radius-sm);
+}
+// A destructive tab reads as destructive whether or not it is the active one.
+.app-tab.danger {
+    color: var(--color-danger);
+}
+.app-tab.danger:hover:not(:disabled):not(.active) {
+    color: var(--color-danger-active);
+}
+.app-tab.danger.active {
+    color: var(--color-danger);
+    border-bottom-color: var(--color-danger);
+}
+.app-tab.danger .app-tab-count {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+}
+// Trailing count pill.
+.app-tab-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    padding: 0 6px;
+    height: 20px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 12px;
+    font-weight: 600;
+}
+.app-tab.active .app-tab-count {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+
+// Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
+// renders server-side. React composes the strip and its panels itself.
+.app-tabs-group > .tab-content {
+    padding-top: 16px;
+}
+
+// Pills variant — a segmented control rather than an underline.
+.app-tabs-pills {
+    gap: 4px;
+    border-bottom: 0;
+}
+.app-tabs-pills .app-tab {
+    border-bottom: 0;
+    margin-bottom: 0;
+    border-radius: var(--radius);
+}
+.app-tabs-pills .app-tab.active {
+    background: var(--color-primary-soft);
+}
+
+// ── Search field ──
+// The search control both surfaces render: a rounded field with a leading
+// magnifier that takes the brand colour on focus, plus a clear button that
+// appears once there's a value.
+.search-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+.search-wrap > .search-icon {
+    position: absolute;
+    left: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+    pointer-events: none;
+    transition: color 0.12s ease;
+}
+.search-wrap:focus-within > .search-icon {
+    color: var(--color-primary);
+}
+.search-field,
+.search-input {
+    width: 100%;
+    padding-left: 40px;
+    padding-right: 36px;
+}
+.search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.12s ease,
+        color 0.12s ease;
+}
+.search-wrap.has-value .search-clear,
+.search-wrap:focus-within .search-clear {
+    opacity: 1;
+    pointer-events: auto;
+}
+.search-clear:hover {
+    color: var(--color-text);
+}
+
 // ── Empty state ──
 .empty-state {
     text-align: center;
     padding: 48px 24px;
     color: var(--color-text-subtle);
 }
+.empty-state-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--color-text);
+}
+.empty-state-message {
+    margin: 6px 0 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+}
+.empty-state-action {
+    margin-top: 16px;
+}
+// Tighter scale for a widget/tile, as opposed to a full card or page.
+.empty-state-sm {
+    padding: 28px 16px;
+}
+.empty-state-sm .empty-state-title {
+    font-size: 14px;
+}
+.empty-state-sm .empty-state-message {
+    font-size: 12px;
+}
 .empty-state-icon {
     width: 48px;
     height: 48px;
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--color-primary-soft);
     color: var(--color-primary);
     display: inline-flex;
@@ -2109,6 +2426,76 @@ textarea.textarea:focus {
     background: transparent;
 }
 
+// ── Table (base) ──
+// The shared data-table look, on the plain `.table` class Bootstrap already
+// gives every table. Without this a product's tables fall back to stock
+// Bootstrap and drift from the design system; `.table-ledger` below is the
+// denser, card-inset variant, not a replacement for having a base.
+.table {
+    --bs-table-bg: transparent;
+    --bs-table-color: var(--color-text);
+    width: 100%;
+    margin-bottom: 0;
+    color: var(--color-text);
+    vertical-align: middle;
+    border-color: var(--color-border);
+    // `separate` is required for a cell to render a border-radius at all —
+    // Bootstrap reboot sets `collapse`, under which .table-ledger's rounded
+    // header corners silently do nothing. border-spacing 0 keeps cells flush.
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+// The cell rules are wrapped in :where() so they carry ZERO class specificity
+// — `:where(.table) > thead > tr > th` is (0,0,3), which any single-class
+// variant selector such as `.table-ledger thead th` (0,1,2) outranks.
+//
+// Without this the base out-ranks its own variant: written plainly,
+// `.table > thead > tr > th` is (0,1,3) and beats `.table-ledger thead th`,
+// so the ledger lost its own border-bottom/line-height/font-family to the
+// base. A base layer must always sit *under* the variants built on it.
+:where(.table) > thead > tr > th {
+    height: 42px;
+    padding: 0 12px;
+    background: var(--color-bg-muted);
+    border-bottom: 1px solid var(--color-border);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+    vertical-align: middle;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
+}
+:where(.table) > tbody > tr > td {
+    padding: 12px;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 14px;
+    color: var(--color-text-muted);
+    vertical-align: middle;
+    transition: background-color 0.12s ease;
+}
+:where(.table) > tbody > tr:last-child > td {
+    border-bottom: 0;
+}
+:where(.table) > tbody > tr:hover > td {
+    background: var(--color-bg-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+    :where(.table) > thead > tr > th,
+    :where(.table) > tbody > tr > td {
+        transition: none;
+    }
+}
+// Numeric / action columns align to the trailing edge.
+.table .cell-end,
+.table thead th.cell-end {
+    text-align: right;
+}
+
 // ── Table + pagination ──
 // DataTable cell helpers
 .table-ledger .lx-cell-end,
@@ -2141,11 +2528,11 @@ textarea.textarea:focus {
 }
 .table-ledger thead th:first-child {
     padding-left: 20px;
-    border-radius: 6px 0 0 6px;
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
 .table-ledger thead th:last-child {
     padding-right: 20px;
-    border-radius: 0 6px 6px 0;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 .table-ledger tbody td {
     height: 54px;
@@ -2191,7 +2578,9 @@ textarea.textarea:focus {
 .table-ledger a.u-name:hover {
     text-decoration: none;
 }
-// Identity-cell subline.
+// Identity-cell subline. `.u-email` is in the group because an identity cell
+// renders the secondary line as either a generic .lx-text-xs or a .u-email.
+.table-ledger .u-meta > .u-email,
 .table-ledger .u-meta > .lx-text-xs {
     font-size: 12px;
     font-weight: 400;
@@ -2247,7 +2636,7 @@ textarea.textarea:focus {
     padding: 0 28px 0 12px;
     font-size: 13px;
     font-weight: 600;
-    border-radius: 16px;
+    border-radius: var(--radius);
     background-position: right 8px center;
     background-size: 14px;
 }
@@ -2321,8 +2710,33 @@ textarea.textarea:focus {
     padding-left: 12px;
     padding-right: 0;
 }
-.table-ledger tbody tr.is-selected {
-    background: var(--color-bg-muted);
+// Selection is a brand-tinted state on the CELLS, not a grey fill on the row:
+// cells carry their own background (hover sets it too), so a background on the
+// <tr> is painted over and never shows. Grey also reads as "disabled" rather
+// than "chosen".
+.table-ledger tbody tr.is-selected > td {
+    background: var(--color-primary-soft);
+}
+.table-ledger tbody tr.is-selected:hover > td {
+    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+}
+
+// Row status affordance — a colour bar on the leading edge, so a row's state is
+// legible without relying on a tint alone.
+.table-ledger tbody tr[data-status] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-border-strong);
+}
+.table-ledger tbody tr[data-status="success"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success);
+}
+.table-ledger tbody tr[data-status="warning"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning);
+}
+.table-ledger tbody tr[data-status="danger"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger);
+}
+.table-ledger tbody tr[data-status="info"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-info);
 }
 
 // Row actions — icon-only buttons replacing a kebab dropdown.
@@ -2384,27 +2798,27 @@ textarea.textarea:focus {
 }
 .u-action.u-action-preview {
     background: var(--color-primary-soft);
-    color: #2f50e4;
+    color: var(--color-primary);
 }
 .u-action.u-action-download {
     background: var(--color-success-soft);
-    color: #04b440;
+    color: var(--color-success-active);
 }
 .u-action.u-action-share {
     background: var(--color-warning-soft);
-    color: #dfa000;
+    color: var(--color-warning-active);
 }
 .u-action.u-action-preview:hover:not(:disabled) {
     background: var(--color-primary-soft);
-    color: #2f50e4;
+    color: var(--color-primary);
 }
 .u-action.u-action-download:hover:not(:disabled) {
     background: var(--color-success-soft);
-    color: #04b440;
+    color: var(--color-success-active);
 }
 .u-action.u-action-share:hover:not(:disabled) {
     background: var(--color-warning-soft);
-    color: #dfa000;
+    color: var(--color-warning-active);
 }
 .u-action.u-action-danger:hover {
     color: var(--color-danger);
@@ -2490,12 +2904,12 @@ textarea.textarea:focus {
     // deep drop shadow.
     box-shadow:
         0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent),
-        0 24px 70px -18px rgba(0, 0, 0, 0.55);
+        var(--shadow-overlay-lg);
     background: var(--color-surface);
 }
 .lx-modal {
     background: var(--color-surface);
-    border-radius: 24px;
+    border-radius: var(--radius-xl);
     corner-shape: squircle;
     border: none;
     width: 100%;
@@ -2614,7 +3028,7 @@ textarea.textarea:focus {
     justify-content: center;
     width: 34px;
     height: 34px;
-    border-radius: 10px;
+    border-radius: var(--radius);
     corner-shape: squircle;
     flex: none;
     background: var(--color-primary-soft);
@@ -2760,9 +3174,9 @@ textarea.textarea:focus {
 }
 .lx-confirm-actions .btn {
     flex: 1;
-    min-height: 45px;
-    height: 45px;
-    border-radius: 16px;
+    min-height: var(--wui-control-height);
+    height: var(--wui-control-height);
+    border-radius: var(--radius);
     corner-shape: squircle;
     padding-left: 16px;
     padding-right: 16px;
@@ -2859,8 +3273,8 @@ textarea.textarea:focus {
     padding: 12px 14px;
     background: var(--color-surface);
     border: none;
-    border-radius: 10px;
-    box-shadow: 0 8px 28px rgba(7, 20, 55, 0.14);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-overlay);
     text-align: left;
     white-space: normal;
     cursor: default;
@@ -2926,6 +3340,37 @@ textarea.textarea:focus {
     align-items: center;
 }
 
+// Tablet and below: the masthead stops being a single row — the title block and
+// its actions stack, and the actions stretch to the full width rather than
+// crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
+//
+// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
+// adds no specificity, so a consumer's own single-class rule — written later in
+// the cascade, as a consuming app's stylesheet always is — silently beats the
+// responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
+// so they hold, while still leaving a consumer free to override deliberately.
+@media (max-width: 991.98px) {
+    .page-header.page-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+    .page-actions.page-actions {
+        flex-wrap: wrap;
+        width: 100%;
+    }
+    // A two-up field row is too tight for a tablet column.
+    .field-row.field-row,
+    .field-row-3.field-row-3 {
+        grid-template-columns: 1fr;
+    }
+    // A fixed 420px drawer leaves too little of the page visible on a tablet.
+    .drawer.drawer {
+        width: 100vw;
+        max-width: 420px;
+    }
+}
+
 // ── Row-action / icon buttons ──
 .btn-icon {
     min-height: 0;
@@ -3002,7 +3447,7 @@ textarea.textarea:focus {
     overflow: hidden;
     display: block;
     background: var(--color-bg-muted);
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
 }
 .skeleton::after {
     content: "";