@tiba-spark/client-shared-lib 26.3.0-619 → 26.3.0-621

package/src/libraries/theme/_utils.scss

@@ -170,7 +170,7 @@
 }
 
 // Mobile width
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 640px) {
   .cdk-global-overlay-wrapper {
     justify-content: unset !important;
     margin: 0 10px;
@@ -187,7 +187,7 @@
   }
 
   mat-dialog-container.mat-mdc-dialog-container {
-    min-width: 355px !important; // narrowest modal possible in mobile
+    min-width: min(355px, 100%) !important; // narrowest modal possible in mobile, never wider than the screen
     margin: auto;
   }
 }
@@ -203,7 +203,8 @@
 }
 
 .tb-primary-router-width {
-  min-width: variables.$primary-router-min-width;
+  // Never wider than the viewport, so the page reflows at 320 px (WCAG 1.4.10).
+  min-width: min(variables.$primary-router-min-width, 100%);
 }
 
 .tb-sidebar {
@@ -218,6 +219,94 @@
   }
 }
 
+// Narrow layout / high zoom: the side panel goes under the page instead of beside it (WCAG 1.4.10).
+@media only screen and (max-width: variables.$reflow-max-width) {
+  .tb-flex:has(> .tb-sidebar),
+  .tb-flex-row:has(> .tb-sidebar) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  .tb-sidebar {
+    width: 100%;
+
+    tb-parker,
+    tb-parker-search,
+    tb-parker-search-results,
+    tb-global-counters {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+
+  // Filter bars: the groups inside a wrapping row wrap too, instead of one group widening the page,
+  // with 10px between wrapped lines unless the controls bring their own bottom spacing.
+  .tb-flex-wrap > .tb-flex {
+    flex-wrap: wrap;
+
+    &:not([class*='tb-mb-']):not(:has(> [class*='tb-pb-'], > [class*='tb-mb-'])),
+    &.tb-h-30 {
+      row-gap: 10px;
+    }
+
+    &.tb-h-30 {
+      height: auto;
+    }
+  }
+
+  // Section headers (title left, buttons right) wrap their buttons under the title.
+  .tb-flex-center.tb-space-between {
+    flex-wrap: wrap;
+    row-gap: 10px;
+
+    > .tb-flex {
+      flex-wrap: wrap;
+      row-gap: 10px;
+    }
+  }
+
+  // The min-width utilities are !important; the wide ones still give way to a narrow window.
+  @each $i in 280, 290, 315, 320, 460, 470 {
+    .tb-min-w-#{$i}.tb-min-w-#{$i} {
+      min-width: min(#{$i}px, 100%) !important;
+    }
+  }
+
+  // Fixed-width fields and fill areas give way to the window instead of widening the page.
+  main.tb-content [class*='tb-w-'] {
+    max-width: 100%;
+  }
+
+  main.tb-content .tb-flex > .tb-flex-grow {
+    min-width: 0;
+  }
+
+  // Radio options with long hints wrap instead of sizing the group to one line.
+  mat-radio-group.tb-elem-radio {
+    max-width: 100%;
+    flex-wrap: wrap;
+
+    > * {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  // Collapsible filter bars (tbCollapsibleFilters): only the search and the toggle show until it opens.
+  .toggle-filters-button.tb-filters-toggle {
+    display: block;
+  }
+
+  .tb-filters-collapsed .tb-collapsible-filter {
+    display: none !important;
+  }
+
+  // Short zoomed windows: pages scroll instead of squeezing tables; a basis keeps the fit-content minimum.
+  main.tb-content > router-outlet + * {
+    flex: 1 0 480px;
+  }
+}
+
 .side-text .tb-field-label {
   padding-left: 0;
 }
@@ -848,6 +937,10 @@ a.clickable-link {
   overflow: auto;
 }
 
+.tb-filters-toggle {
+  display: none;
+}
+
 .toggle-filters-button tb-icon {
   outline: 1px solid variables.$border-color;
   outline-offset: -1px;
@@ -857,6 +950,11 @@ a.clickable-link {
   &.active {
     background-color: variables.$button-active-background;
   }
+
+  // The grey border is an outline, so focus recolours it instead of drawing a second ring.
+  &:focus-visible {
+    outline-color: variables.$focus-ring-color;
+  }
 }
 
 .active-button-text {
@@ -936,6 +1034,9 @@ a.clickable-link {
 
 .print-container {
   position: absolute;
+  // The hidden frame must not widen the page at 320 px (WCAG 1.4.10).
+  left: 0;
+  max-width: 100%;
   z-index: -1;
   overflow: auto;
   height: 0px;
@@ -973,7 +1074,8 @@ a.clickable-link {
 }
 
 .tb-rate-tables-container {
-  min-width: 1268px;
+  // The table scrolls inside its own box when narrower; headings and buttons stay in view (WCAG 1.4.10).
+  min-width: min(1268px, 100% - 10px);
   padding-right: 10px;
 }
 
@@ -1023,3 +1125,20 @@ a.clickable-link {
   height: calc(550px * (450 / 930)) !important; // ≈ 290px
   aspect-ratio: unset !important;
 }
+
+// Narrow layout / high zoom: the rate image previews shrink to the window, keeping their shape (WCAG 1.4.10).
+@media only screen and (max-width: variables.$reflow-max-width) {
+  .tb-upload-rate-on-display-image-vertical,
+  .tb-upload-rate-on-display-image-horizontal {
+    max-width: 100%;
+    height: auto !important;
+  }
+
+  .tb-upload-rate-on-display-image-vertical {
+    aspect-ratio: 510 / 750 !important;
+  }
+
+  .tb-upload-rate-on-display-image-horizontal {
+    aspect-ratio: 930 / 450 !important;
+  }
+}

package/src/libraries/theme/_variables.scss

@@ -14,8 +14,8 @@ $scrollbar-background-color: #0000004d;
 $big-shadow-color: #00000014;
 $title-color: #2c3e50;
 $text-color: #2c3e50;
-$secondary-text-color: #919eab;
-$error-color: #ff0e4d;
+$secondary-text-color: #5f6b78;
+$error-color: #e2003b;
 $error-light-color: #ffdbe4;
 $error-background-color: #ffdbe4;
 $success-background-color: #def9e1;
@@ -29,11 +29,11 @@ $inactive-color: #ecedf0;
 $white-color: #ffffff;
 $black-color: #000000;
 $grey-color: #9a9a9a;
-$form-field-border: #dee2e6;
-$form-field-border-hover: #919eab;
-$form-field-title: #919eab;
-$form-field-placeholder: #bdc3c7;
-$primary-color: #0985eb;
+$form-field-border: #8a939c;
+$form-field-border-hover: #5f6b78;
+$form-field-title: #5f6b78;
+$form-field-placeholder: #6b7785;
+$primary-color: #0670c7;
 $blue-hover-backgroung-color: #0079dc;
 $secondary-color: #ffffff;
 $secondary-color-hover: #0985eb10;
@@ -70,10 +70,35 @@ $summary-background-color: #daedfc;
 $drop-down-menu-background-color: #f9f9f9;
 $modules-background-color: #f9f9f9;
 $sidenav-input-search-color: #3c4957;
+$sidenav-input-text-color: #d8dbe0;
+$sidenav-input-placeholder-color: #bdc3c7; // the light-theme placeholder is unreadable on the dark side menu
 $sidenav-child-background-color: #ffffff0d;
 $ngx-slider-background-color: #035aa1;
 $light-error-color: #ff0e4d40;
 $focus-border-color: #0985eb;
+$focus-ring-color: #0670c7;
+$focus-ring-color-on-dark: #ffffff;
+
+// Focused dropdown option: blue bar plus a 1px ring.
+$option-focus-shadow: inset 2px 0 0 $focus-ring-color, inset 0 0 0 1px $focus-ring-color;
+// Selected option of a single-choice list: light tint plus a 3px blue bar.
+$option-selected-shadow: inset 3px 0 0 $focus-ring-color;
+// Focused selected option: the bar plus a 1px ring.
+$option-selected-focus-shadow: inset 3px 0 0 $focus-ring-color, inset 0 0 0 1px $focus-ring-color;
+
+// The bar, not the tint (about 1.2:1 on white), marks the selection (WCAG 1.4.1, 1.4.11).
+@mixin single-choice-selected {
+  background: $active-background;
+  color: $text-color;
+  --mdc-list-list-item-label-text-color: #{$text-color};
+  --mdc-list-list-item-hover-label-text-color: #{$text-color};
+  --mdc-list-list-item-focus-label-text-color: #{$text-color};
+  box-shadow: $option-selected-shadow;
+
+  &:focus-visible {
+    box-shadow: $option-selected-focus-shadow;
+  }
+}
 $ngx-slider-full-bar-background: #dee2e6;
 $ngx-slider-selection-background: #0985eb80;
 $ngx-slider-pointer-color: #0985eb;
@@ -119,6 +144,8 @@ $primary-router-min-width: 335px; // Changed to support mobile compatability
 
 $sidebar-container-width: 528px;
 $sidebar-width: 518px;
+// Narrow layout (side panels stack, filters wrap): 400% zoom, and wide screens zoomed to 200-300% (WCAG 1.4.10).
+$reflow-max-width: 999px;
 $sidebar-margin-left: 10px;
 $sidenav-width: 240px;
 
@@ -166,7 +193,7 @@ $progress-bar-yellow: #ffd362;
 
 // special-days
 $special-day-1: #e488ff;
-$special-day-2: #8da0fe;
+$special-day-2: #94a6fe;
 $special-day-3: #ffd362;
 $special-day-4: #09c4eb;
 $special-day-5: #0eff77;

package/src/libraries/theme/components/_carousel.scss

@@ -2,7 +2,7 @@
 @use 'variables';
 
 owl-carousel-o.full, owl-carousel-o.thumbnail, owl-carousel-o.section, owl-carousel-o.modal {
-  min-width: 380px;
+  min-width: min(380px, 100%);
 
   .owl-carousel {
     padding: 10px 0;
@@ -164,7 +164,7 @@ tb-update-plate-id-dialog owl-carousel-o.full {
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
   owl-carousel-o.section .owl-carousel {
     height: 70vw;
   }

package/src/libraries/theme/components/_tb-search.scss

@@ -18,6 +18,12 @@ tb-search {
           &:hover {
             opacity: .9;
           }
+
+          // A blue ring is invisible on the blue button; draw it white, inside.
+          &:focus-visible {
+            outline-color: variables.$focus-ring-color-on-dark;
+            outline-offset: -3px;
+          }
         }
       }
     }
@@ -50,18 +56,18 @@ tb-search.tb-sidenav-search {
       background-color: variables.$sidenav-input-search-color;
 
       &:focus-within {
-        border-color: variables.$input-border-on-focus;
+        border-color: variables.$focus-ring-color-on-dark;
       }
 
       .mat-mdc-form-field-infix {
         input.mat-mdc-input-element {
           font-size: 13px;
-          color: variables.$form-field-title;
-          caret-color: variables.$form-field-title;
+          color: variables.$sidenav-input-text-color;
+          caret-color: variables.$sidenav-input-text-color;
           background-color: transparent;
 
           &::placeholder {
-            color: variables.$form-field-placeholder;
+            color: variables.$sidenav-input-placeholder-color;
             opacity: 1;
           }
         }

package/src/libraries/theme/mat-components/_mat-date-picker.scss

@@ -170,6 +170,10 @@ mat-form-field.mat-mdc-form-field.tb-elem-date-picker {
 mat-form-field.mat-mdc-form-field.tb-elem-date-picker.mat-form-field-invalid {
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
     border-color: variables.$error-color;
+
+    &:focus-within {
+      border-color: variables.$input-border-on-focus;
+    }
   }
 }
 

package/src/libraries/theme/mat-components/_mat-input.scss

@@ -194,6 +194,11 @@ mat-form-field.mat-mdc-form-field.tb-elem-input.mat-form-field-invalid:not(.mat-
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
     border-color: variables.$error-color;
 
+    // Focus stays visible on an invalid field, like tb-mat-select.
+    &:focus-within {
+      border-color: variables.$input-border-on-focus;
+    }
+
     .mat-mdc-form-field-label {
       color: variables.$form-field-placeholder;
     }

package/src/libraries/theme/mat-components/_mat-menu.scss

@@ -86,8 +86,10 @@
           background-color: variables.$hover-background;
         }
 
-        &[aria-selected="true"] {
-          background-color: variables.$active-background;
+        // Inside a menu the current option is a checked radio item (tb-menu-icon useMenuRoles).
+        &[aria-selected="true"],
+        &[aria-checked="true"] {
+          @include variables.single-choice-selected;
         }
 
         .mdc-list-item__content {
@@ -140,6 +142,13 @@
             background-color: variables.$drawer-item-hover-background;
           }
 
+          // The blue ring barely shows on the dark panel; white inside the row, as in the side menu.
+          &:focus-visible {
+            outline: 1px solid variables.$focus-ring-color-on-dark;
+            outline-offset: -3px;
+            background-color: variables.$drawer-item-hover-background;
+          }
+
           .mat-mdc-list-item-unscoped-content {
             span {
               color: variables.$white-color;
@@ -272,7 +281,6 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: calc(100vh - 400px);
-      outline: none;
 
       mat-list-option.mat-mdc-list-option {
         height: 40px;
@@ -551,11 +559,9 @@ mat-selection-list.mat-mdc-selection-list {
   }
 
   .mat-mdc-selection-list {
-    outline: none;
     padding: 0;
 
     .mat-mdc-list-option {
-      outline: none;
       font-size: 13px;
       height: 40px;
 
@@ -594,6 +600,11 @@ mat-selection-list.mat-mdc-selection-list {
 .mat-mdc-menu-item {
   background: transparent;
   opacity: 1 !important;
+
+  // Material drops the outline on focus; mark it like a focused option.
+  &:focus-visible {
+    box-shadow: variables.$option-focus-shadow;
+  }
 }
 
 .tb-menu.tb-header-menu.tb-module-menu {
@@ -615,6 +626,21 @@ mat-selection-list.mat-mdc-selection-list {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
     }
+
+    // The current module is a place, not a chosen value: light tint plus a blue bar, not the strong fill.
+    mat-selection-list.mat-mdc-selection-list .mat-mdc-list-option[aria-selected='true'],
+    mat-selection-list.mat-mdc-selection-list .mat-mdc-list-option[aria-checked='true'] {
+      background: variables.$active-background;
+      color: variables.$text-color;
+      --mdc-list-list-item-label-text-color: #{variables.$text-color};
+      --mdc-list-list-item-hover-label-text-color: #{variables.$text-color};
+      --mdc-list-list-item-focus-label-text-color: #{variables.$text-color};
+      box-shadow: inset 3px 0 0 variables.$focus-ring-color;
+
+      &:focus-visible {
+        box-shadow: variables.$option-focus-shadow;
+      }
+    }
   }
 }
 
@@ -754,32 +780,32 @@ tb-sidenav {
         opacity: 0.5;
       }
 
-      &.parent-node[aria-level='1'] .list-option-item,
-      &.parent-node[aria-level='1'] .mat-mdc-checkbox {
+      &.parent-node:is([aria-level='1'], [data-level='1']) .list-option-item,
+      &.parent-node:is([aria-level='1'], [data-level='1']) .mat-mdc-checkbox {
         font-weight: 600;
       }
 
-      &[aria-level='2'] .mdc-list-item__content {
+      &:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 17px;
       }
 
-      &.expendable-disabled[aria-level='3'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='3'], [data-level='3']) .mdc-list-item__content {
         padding-left: 64px;
       }
 
-      &.expendable-disabled[aria-level='2'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 43px;
       }
 
-      &.expendable-disabled[aria-level='1'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
         padding-left: 26px;
       }
 
-      &[aria-level='1'].tb-pointer-event-none~[aria-level='2'] .mdc-list-item__content {
+      &:is([aria-level='1'], [data-level='1']).tb-pointer-event-none~:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 7px;
       }
 
-      &[aria-level='2'] tb-icon .tb-icon {
+      &:is([aria-level='2'], [data-level='2']) tb-icon .tb-icon {
         margin-left: 18px;
       }
 
@@ -789,7 +815,7 @@ tb-sidenav {
     }
 
     &:not(.has-children) mat-tree-node.mat-tree-node {
-      &[aria-level='1'] .mdc-list-item__content {
+      &:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
         padding-left: 10px;
 
         mat-checkbox {

package/src/libraries/theme/mat-components/_mat-select.scss

@@ -172,6 +172,13 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
     &:focus,
     &.mat-mdc-option-active {
       --mat-option-selected-state-layer-color: #{variables.$hover-background};
+      // The grey tint alone is too faint to show the focused option.
+      box-shadow: inset 2px 0 0 variables.$focus-ring-color;
+    }
+
+    &:focus,
+    &.mat-mdc-option-active {
+      box-shadow: variables.$option-focus-shadow;
     }
 
     &.mdc-list-item--selected {
@@ -182,6 +189,21 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
       }
     }
 
+    // Single choice: light tint plus a blue bar (variables.single-choice-selected).
+    &.mdc-list-item--selected:not(.mat-mdc-option-multiple) {
+      --mat-option-selected-state-layer-color: #{variables.$active-background};
+      box-shadow: variables.$option-selected-shadow;
+
+      .mdc-list-item__primary-text {
+        --mat-option-selected-state-label-text-color: #{variables.$text-color};
+      }
+
+      &:focus,
+      &.mat-mdc-option-active {
+        box-shadow: variables.$option-selected-focus-shadow;
+      }
+    }
+
     &.list-option-item {
       .mdc-list-item__primary-text {
         --mat-option-selected-state-label-text-color: #{variables.$form-field-placeholder};
@@ -218,7 +240,7 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
   }
 
   &.tb-disable-selected-bg {
-    mat-option.mat-mdc-option.mdc-list-item--selected {
+    mat-option.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple) {
       --mat-option-selected-state-layer-color: #{variables.$white-color};
 
       &:hover {

package/src/libraries/theme/mat-components/_mat-selection-list.scss

@@ -17,10 +17,8 @@
 
 mat-selection-list.mat-mdc-selection-list.special-days-list {
   padding: 0;
-  outline: none;
 
   .mat-mdc-list-option {
-    outline: none;
     font-size: 13px;
     height: 40px;
 
@@ -77,7 +75,8 @@ mat-selection-list.mat-mdc-selection-list[aria-multiselectable="false"] {
     background: variables.$hover-background;
   }
   
+  // Single choice: a strong fill, so the selection is not shown by a light tint alone (WCAG 1.4.1).
   .mat-mdc-list-option[aria-selected="true"] {
-    background: variables.$active-background;
+    @include variables.single-choice-selected;
   }
 }

package/src/libraries/theme/mat-components/_mat-step.scss

@@ -138,6 +138,11 @@ mat-horizontal-stepper.mat-stepper-horizontal {
       display: flex;
       flex-direction: column;
       flex: 1;
+      // Material's container clips; a step taller than a short (zoomed) dialog scrolls instead of being cut off.
+      // The scroll box clips too, so it keeps the ring room on its left edge.
+      overflow-y: auto;
+      padding-left: 5px;
+      margin-left: -5px;
 
       &:not(.mat-horizontal-stepper-content-inactive) {
         height: 100%;
@@ -236,3 +241,17 @@ tb-tab-icon {
 .mat-horizontal-content-container {
   padding: unset;
 }
+
+// These boxes clip; padding offset by a negative margin leaves room for the focus ring of a radio or checkbox
+// at the step's left (and top) edge without moving anything. Never on the right or bottom: there the box
+// would stick out of a scrolling parent and add a scrollbar.
+.mat-stepper-horizontal,
+.mat-horizontal-stepper-wrapper {
+  padding-left: 5px;
+  margin-left: -5px;
+}
+
+.mat-horizontal-content-container.mat-horizontal-content-container {
+  padding: 5px 0 0 5px;
+  margin: -5px 0 0 -5px;
+}

package/src/libraries/theme/theme.scss

@@ -11,6 +11,125 @@ body {
   --mat-sidenav-content-text-color: #{ variables.$text-color};
 }
 
+// Text fields show focus with their own border.
+:focus-visible:not(input, textarea) {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: 2px;
+}
+
+// The side menu and tab strip clip outside the element, so draw the ring inside.
+.mat-drawer :focus-visible,
+.mdc-tab:focus-visible {
+  outline-offset: -1px;
+}
+
+// Dropdowns look like text fields on focus: a 1px blue line over their own border.
+.tb-dropdown-menu-trigger:focus-visible {
+  outline-width: 1px;
+  outline-offset: -1px;
+}
+
+// The select's field border already turns blue on focus.
+.mat-mdc-select:focus-visible {
+  outline: none;
+}
+
+// Dialog X and minimize: rounded like their hover background, so the focus ring is rounded too.
+.modal-close-icon,
+.modal-minimize-icon {
+  border-radius: 4px;
+}
+
+// Round ring on icon buttons inside a field (search clear X), inset: the field clips anything outside it.
+.mat-mdc-form-field-icon-suffix [role='button']:focus-visible,
+.mat-mdc-form-field-icon-suffix .mat-mdc-icon-button:focus-visible {
+  border-radius: 50%;
+  margin: auto 0;
+  outline-offset: -2px;
+}
+
+// Focused icon buttons get the 1px ring only, not Material's gray focus fill.
+.mat-mdc-icon-button.cdk-keyboard-focused,
+.mat-mdc-icon-button.cdk-program-focused {
+  .mat-mdc-button-persistent-ripple::before {
+    opacity: 0;
+  }
+}
+
+// Radios and checkboxes hide their native input; ring the visible circle or box, not the input.
+.mdc-radio__native-control:focus-visible,
+.mdc-checkbox__native-control:focus-visible {
+  outline: none;
+}
+
+.mdc-radio__native-control:focus-visible ~ .mdc-radio__background,
+.mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: 2px;
+}
+
+.mdc-radio__native-control:focus-visible ~ .mdc-radio__background {
+  border-radius: 50%;
+  // Clear of the selected radio's own blue circle.
+  outline-offset: 3px;
+}
+
+// The ring is drawn by ::after below.
+.mdc-switch:focus-visible {
+  outline: none;
+}
+
+// The 20px knob overhangs the 15px track; ring it with an even gap around both.
+.mdc-switch:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -6px -3px;
+  border: 1px solid variables.$focus-ring-color;
+  border-radius: 14px;
+  pointer-events: none;
+}
+
+.mat-drawer .mdc-switch:focus-visible::after {
+  border-color: variables.$focus-ring-color-on-dark;
+}
+
+// Adjacent tabs (all z-index 1) and joined fields paint over the ring; lift the focused one.
+.mdc-tab:focus-visible,
+.mat-mdc-form-field:has(:focus-visible) {
+  z-index: 2;
+}
+
+.mat-drawer :focus-visible {
+  outline-color: variables.$focus-ring-color-on-dark;
+}
+
+// Material sets outline: none on expansion headers; the panel clips, so the ring goes inside.
+.mat-expansion-panel .mat-expansion-panel-header:focus-visible {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: -1px;
+}
+
+// Same for list items (Material sets outline: 0); dropdown options show a bar instead.
+.mat-mdc-list-item.mdc-list-item:focus-visible:not(.list-option-item) {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: -1px;
+}
+
+// Side menu: the row's own children paint over an outline on hover, so draw the ring as an overlay.
+.mat-drawer .mat-expansion-panel .mat-expansion-panel-header:focus-visible,
+.mat-drawer .mat-mdc-list-item.mdc-list-item:focus-visible:not(.list-option-item) {
+  outline: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    border: 1px solid variables.$focus-ring-color-on-dark;
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
 /* Override all Material Typography */
 * {
   letter-spacing: 0 !important;