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

package/src/libraries/theme/_utils.scss

@@ -170,7 +170,7 @@
 }
 
 // Mobile width
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 600px) {
   .cdk-global-overlay-wrapper {
     justify-content: unset !important;
     margin: 0 10px;
@@ -187,7 +187,7 @@
   }
 
   mat-dialog-container.mat-mdc-dialog-container {
-    min-width: min(355px, 100%) !important; // narrowest modal possible in mobile, never wider than the screen
+    min-width: 355px !important; // narrowest modal possible in mobile
     margin: auto;
   }
 }
@@ -203,8 +203,7 @@
 }
 
 .tb-primary-router-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%);
+  min-width: variables.$primary-router-min-width;
 }
 
 .tb-sidebar {
@@ -219,94 +218,6 @@
   }
 }
 
-// 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;
 }
@@ -937,10 +848,6 @@ a.clickable-link {
   overflow: auto;
 }
 
-.tb-filters-toggle {
-  display: none;
-}
-
 .toggle-filters-button tb-icon {
   outline: 1px solid variables.$border-color;
   outline-offset: -1px;
@@ -950,11 +857,6 @@ 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 {
@@ -1034,9 +936,6 @@ 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;
@@ -1074,8 +973,7 @@ a.clickable-link {
 }
 
 .tb-rate-tables-container {
-  // 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);
+  min-width: 1268px;
   padding-right: 10px;
 }
 
@@ -1125,20 +1023,3 @@ 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: #5f6b78;
-$error-color: #e2003b;
+$secondary-text-color: #919eab;
+$error-color: #ff0e4d;
 $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: #8a939c;
-$form-field-border-hover: #5f6b78;
-$form-field-title: #5f6b78;
-$form-field-placeholder: #6b7785;
-$primary-color: #0670c7;
+$form-field-border: #dee2e6;
+$form-field-border-hover: #919eab;
+$form-field-title: #919eab;
+$form-field-placeholder: #bdc3c7;
+$primary-color: #0985eb;
 $blue-hover-backgroung-color: #0079dc;
 $secondary-color: #ffffff;
 $secondary-color-hover: #0985eb10;
@@ -70,35 +70,10 @@ $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;
@@ -144,8 +119,6 @@ $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;
 
@@ -193,7 +166,7 @@ $progress-bar-yellow: #ffd362;
 
 // special-days
 $special-day-1: #e488ff;
-$special-day-2: #94a6fe;
+$special-day-2: #8da0fe;
 $special-day-3: #ffd362;
 $special-day-4: #09c4eb;
 $special-day-5: #0eff77;

package/src/libraries/theme/assets/icons/tech-tools-module-404.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="51"
+     height="51"
+     viewBox="-4 -1 51 51"
+     role="img"
+     aria-label="Icon">
+  <g fill="#FFFFFF">
+    <path fill="#0985EB" d="M 19.00 13.75 L 19.00 14.25 L 19.06 14.62 L 19.19 14.88 L 19.38 15.00 L 19.62 15.00 L 19.88 15.06 L 20.12 15.19 L 20.38 15.38 L 20.62 15.62 L 20.94 15.81 L 21.31 15.94 L 21.75 16.00 L 22.25 16.00 L 22.69 16.06 L 23.06 16.19 L 23.38 16.38 L 23.62 16.62 L 23.88 16.81 L 24.12 16.94 L 24.38 17.00 L 24.62 17.00 L 24.94 17.12 L 25.31 17.38 L 25.75 17.75 L 26.25 18.25 L 26.62 18.69 L 26.88 19.06 L 27.00 19.38 L 27.00 19.62 L 27.06 19.88 L 27.19 20.12 L 27.38 20.38 L 27.62 20.62 L 27.81 21.00 L 27.94 21.50 L 28.00 22.12 L 28.00 22.88 L 28.06 23.50 L 28.19 24.00 L 28.38 24.38 L 28.62 24.62 L 28.88 24.81 L 29.12 24.94 L 29.38 25.00 L 29.62 25.00 L 29.88 24.94 L 30.12 24.81 L 30.38 24.62 L 30.62 24.38 L 30.81 24.00 L 30.94 23.50 L 31.00 22.88 L 31.00 22.12 L 30.94 21.50 L 30.81 21.00 L 30.62 20.62 L 30.38 20.38 L 30.12 20.00 L 29.88 19.50 L 29.62 18.88 L 29.38 18.12 L 29.00 17.38 L 28.50 16.62 L 27.88 15.88 L 27.12 15.12 L 26.50 14.56 L 26.00 14.19 L 25.62 14.00 L 25.38 14.00 L 25.12 13.94 L 24.88 13.81 L 24.62 13.62 L 24.38 13.38 L 23.88 13.19 L 23.12 13.06 L 22.12 13.00 L 20.88 13.00 L 19.94 13.12 L 19.31 13.38 Z"/><path d="M 10.75 8.50 L 9.25 9.50 L 8.12 10.31 L 7.38 10.94 L 7.00 11.38 L 7.00 11.62 L 6.88 11.94 L 6.62 12.31 L 6.25 12.75 L 5.75 13.25 L 5.38 13.69 L 5.12 14.06 L 5.00 14.38 L 5.00 14.62 L 4.88 15.00 L 4.62 15.50 L 4.25 16.12 L 3.75 16.88 L 3.38 17.62 L 3.12 18.38 L 3.00 19.12 L 3.00 19.88 L 2.94 20.50 L 2.81 21.00 L 2.62 21.38 L 2.38 21.62 L 2.19 22.00 L 2.06 22.50 L 2.00 23.12 L 2.00 23.88 L 2.06 24.50 L 2.19 25.00 L 2.38 25.38 L 2.62 25.62 L 2.81 26.00 L 2.94 26.50 L 3.00 27.12 L 3.00 27.88 L 3.06 28.50 L 3.19 29.00 L 3.38 29.38 L 3.62 29.62 L 3.81 29.94 L 3.94 30.31 L 4.00 30.75 L 4.00 31.25 L 4.25 31.94 L 4.75 32.81 L 5.50 33.88 L 6.50 35.12 L 7.31 36.06 L 7.94 36.69 L 8.38 37.00 L 8.62 37.00 L 8.94 37.12 L 9.31 37.38 L 9.75 37.75 L 10.25 38.25 L 10.69 38.62 L 11.06 38.88 L 11.38 39.00 L 11.62 39.00 L 11.88 39.06 L 12.12 39.19 L 12.38 39.38 L 12.62 39.62 L 12.94 39.81 L 13.31 39.94 L 13.75 40.00 L 14.25 40.00 L 14.69 40.06 L 15.06 40.19 L 15.38 40.38 L 15.62 40.62 L 16.31 40.81 L 17.44 40.94 L 19.00 41.00 L 21.00 41.00 L 22.56 40.94 L 23.69 40.81 L 24.38 40.62 L 24.62 40.38 L 24.94 40.19 L 25.31 40.06 L 25.75 40.00 L 26.25 40.00 L 26.69 39.94 L 27.06 39.81 L 27.38 39.62 L 27.62 39.38 L 27.88 39.19 L 28.12 39.06 L 28.38 39.00 L 28.62 39.00 L 28.94 38.88 L 29.31 38.62 L 29.75 38.25 L 30.25 37.75 L 30.69 37.38 L 31.06 37.12 L 31.38 37.00 L 31.62 37.00 L 31.94 36.88 L 32.31 36.62 L 32.75 36.25 L 33.25 35.75 L 33.62 35.31 L 33.88 34.94 L 34.00 34.62 L 34.00 34.38 L 34.12 34.06 L 34.38 33.69 L 34.75 33.25 L 35.25 32.75 L 35.62 32.25 L 35.88 31.75 L 36.00 31.25 L 36.00 30.75 L 35.94 30.31 L 35.81 29.94 L 35.62 29.62 L 35.38 29.38 L 35.12 29.19 L 34.88 29.06 L 34.62 29.00 L 34.38 29.00 L 34.12 29.06 L 33.88 29.19 L 33.62 29.38 L 33.38 29.62 L 33.19 29.88 L 33.06 30.12 L 33.00 30.38 L 33.00 30.62 L 32.69 31.12 L 32.06 31.88 L 31.12 32.88 L 29.88 34.12 L 28.88 35.06 L 28.12 35.69 L 27.62 36.00 L 27.38 36.00 L 27.00 36.12 L 26.50 36.38 L 25.88 36.75 L 25.12 37.25 L 24.06 37.62 L 22.69 37.88 L 21.00 38.00 L 19.00 38.00 L 17.44 37.94 L 16.31 37.81 L 15.62 37.62 L 15.38 37.38 L 15.12 37.19 L 14.88 37.06 L 14.62 37.00 L 14.38 37.00 L 14.06 36.88 L 13.69 36.62 L 13.25 36.25 L 12.75 35.75 L 12.69 35.06 L 13.06 34.19 L 13.88 33.12 L 15.12 31.88 L 16.38 30.94 L 17.62 30.31 L 18.88 30.00 L 20.12 30.00 L 21.19 29.88 L 22.06 29.62 L 22.75 29.25 L 23.25 28.75 L 23.62 28.31 L 23.88 27.94 L 24.00 27.62 L 24.00 27.38 L 24.06 27.12 L 24.19 26.88 L 24.38 26.62 L 24.62 26.38 L 24.81 26.06 L 24.94 25.69 L 25.00 25.25 L 25.00 24.75 L 24.94 24.38 L 24.81 24.12 L 24.62 24.00 L 24.38 24.00 L 24.00 24.19 L 23.50 24.56 L 22.88 25.12 L 22.12 25.88 L 21.50 26.44 L 21.00 26.81 L 20.62 27.00 L 20.38 27.00 L 20.00 26.81 L 19.50 26.44 L 18.88 25.88 L 18.12 25.12 L 17.56 24.44 L 17.19 23.81 L 17.00 23.25 L 17.00 22.75 L 17.19 22.19 L 17.56 21.56 L 18.12 20.88 L 18.88 20.12 L 19.25 19.56 L 19.25 19.19 L 18.88 19.00 L 18.12 19.00 L 17.50 19.06 L 17.00 19.19 L 16.62 19.38 L 16.38 19.62 L 16.12 19.81 L 15.88 19.94 L 15.62 20.00 L 15.38 20.00 L 15.19 20.06 L 15.06 20.19 L 15.00 20.38 L 15.00 20.62 L 14.88 21.00 L 14.62 21.50 L 14.25 22.12 L 13.75 22.88 L 13.38 23.50 L 13.12 24.00 L 13.00 24.38 L 13.00 24.62 L 13.06 24.88 L 13.19 25.12 L 13.38 25.38 L 13.62 25.62 L 13.44 26.19 L 12.81 27.06 L 11.75 28.25 L 10.25 29.75 L 9.00 30.69 L 8.00 31.06 L 7.25 30.88 L 6.75 30.12 L 6.38 29.44 L 6.12 28.81 L 6.00 28.25 L 6.00 27.75 L 5.94 27.31 L 5.81 26.94 L 5.62 26.62 L 5.38 26.38 L 5.19 25.88 L 5.06 25.12 L 5.00 24.12 L 5.00 22.88 L 5.06 21.88 L 5.19 21.12 L 5.38 20.62 L 5.62 20.38 L 5.81 20.06 L 5.94 19.69 L 6.00 19.25 L 6.00 18.75 L 6.06 18.31 L 6.19 17.94 L 6.38 17.62 L 6.62 17.38 L 6.81 17.12 L 6.94 16.88 L 7.00 16.62 L 7.00 16.38 L 7.31 15.88 L 7.94 15.12 L 8.88 14.12 L 10.12 12.88 L 11.12 11.94 L 11.88 11.31 L 12.38 11.00 L 12.62 11.00 L 12.94 10.88 L 13.31 10.62 L 13.75 10.25 L 14.25 9.75 L 14.62 9.31 L 14.88 8.94 L 15.00 8.62 L 15.00 8.38 L 14.94 8.12 L 14.81 7.88 L 14.62 7.62 L 14.38 7.38 L 14.12 7.19 L 13.88 7.06 L 13.62 7.00 L 13.38 7.00 L 12.81 7.25 L 11.94 7.75 Z"/><path d="M 19.00 6.75 L 19.00 7.25 L 19.06 7.69 L 19.19 8.06 L 19.38 8.38 L 19.62 8.62 L 20.06 8.81 L 20.69 8.94 L 21.50 9.00 L 22.50 9.00 L 23.31 9.06 L 23.94 9.19 L 24.38 9.38 L 24.62 9.62 L 25.00 9.88 L 25.50 10.12 L 26.12 10.38 L 26.88 10.62 L 27.75 11.12 L 28.75 11.88 L 29.88 12.88 L 31.12 14.12 L 32.06 15.12 L 32.69 15.88 L 33.00 16.38 L 33.00 16.62 L 33.06 16.88 L 33.19 17.12 L 33.38 17.38 L 33.62 17.62 L 33.81 17.94 L 33.94 18.31 L 34.00 18.75 L 34.00 19.25 L 34.06 19.69 L 34.19 20.06 L 34.38 20.38 L 34.62 20.62 L 34.81 21.00 L 34.94 21.50 L 35.00 22.12 L 35.00 22.88 L 35.06 23.50 L 35.19 24.00 L 35.38 24.38 L 35.62 24.62 L 35.88 24.81 L 36.12 24.94 L 36.38 25.00 L 36.62 25.00 L 36.88 24.94 L 37.12 24.81 L 37.38 24.62 L 37.62 24.38 L 37.81 24.06 L 37.94 23.69 L 38.00 23.25 L 38.00 22.75 L 37.94 22.31 L 37.81 21.94 L 37.62 21.62 L 37.38 21.38 L 37.19 21.00 L 37.06 20.50 L 37.00 19.88 L 37.00 19.12 L 36.94 18.50 L 36.81 18.00 L 36.62 17.62 L 36.38 17.38 L 36.19 17.06 L 36.06 16.69 L 36.00 16.25 L 36.00 15.75 L 35.88 15.25 L 35.62 14.75 L 35.25 14.25 L 34.75 13.75 L 34.38 13.31 L 34.12 12.94 L 34.00 12.62 L 34.00 12.38 L 33.88 12.06 L 33.62 11.69 L 33.25 11.25 L 32.75 10.75 L 32.31 10.38 L 31.94 10.12 L 31.62 10.00 L 31.38 10.00 L 31.06 9.88 L 30.69 9.62 L 30.25 9.25 L 29.75 8.75 L 29.31 8.38 L 28.94 8.12 L 28.62 8.00 L 28.38 8.00 L 28.12 7.94 L 27.88 7.81 L 27.62 7.62 L 27.38 7.38 L 27.06 7.19 L 26.69 7.06 L 26.25 7.00 L 25.75 7.00 L 25.31 6.94 L 24.94 6.81 L 24.62 6.62 L 24.38 6.38 L 23.88 6.19 L 23.12 6.06 L 22.12 6.00 L 20.88 6.00 L 19.94 6.12 L 19.31 6.38 Z"/>
+  </g>
+</svg>

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: min(380px, 100%);
+  min-width: 380px;
 
   .owl-carousel {
     padding: 10px 0;
@@ -164,7 +164,7 @@ tb-update-plate-id-dialog owl-carousel-o.full {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 600px) {
   owl-carousel-o.section .owl-carousel {
     height: 70vw;
   }

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

@@ -18,12 +18,6 @@ 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;
-          }
         }
       }
     }
@@ -56,18 +50,18 @@ tb-search.tb-sidenav-search {
       background-color: variables.$sidenav-input-search-color;
 
       &:focus-within {
-        border-color: variables.$focus-ring-color-on-dark;
+        border-color: variables.$input-border-on-focus;
       }
 
       .mat-mdc-form-field-infix {
         input.mat-mdc-input-element {
           font-size: 13px;
-          color: variables.$sidenav-input-text-color;
-          caret-color: variables.$sidenav-input-text-color;
+          color: variables.$form-field-title;
+          caret-color: variables.$form-field-title;
           background-color: transparent;
 
           &::placeholder {
-            color: variables.$sidenav-input-placeholder-color;
+            color: variables.$form-field-placeholder;
             opacity: 1;
           }
         }

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

@@ -170,10 +170,6 @@ 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,11 +194,6 @@ 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,10 +86,8 @@
           background-color: variables.$hover-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;
+        &[aria-selected="true"] {
+          background-color: variables.$active-background;
         }
 
         .mdc-list-item__content {
@@ -142,13 +140,6 @@
             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;
@@ -281,6 +272,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: calc(100vh - 400px);
+      outline: none;
 
       mat-list-option.mat-mdc-list-option {
         height: 40px;
@@ -559,9 +551,11 @@ 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;
 
@@ -600,11 +594,6 @@ 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 {
@@ -626,21 +615,6 @@ 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;
-      }
-    }
   }
 }
 
@@ -780,32 +754,32 @@ tb-sidenav {
         opacity: 0.5;
       }
 
-      &.parent-node:is([aria-level='1'], [data-level='1']) .list-option-item,
-      &.parent-node:is([aria-level='1'], [data-level='1']) .mat-mdc-checkbox {
+      &.parent-node[aria-level='1'] .list-option-item,
+      &.parent-node[aria-level='1'] .mat-mdc-checkbox {
         font-weight: 600;
       }
 
-      &:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
+      &[aria-level='2'] .mdc-list-item__content {
         padding-left: 17px;
       }
 
-      &.expendable-disabled:is([aria-level='3'], [data-level='3']) .mdc-list-item__content {
+      &.expendable-disabled[aria-level='3'] .mdc-list-item__content {
         padding-left: 64px;
       }
 
-      &.expendable-disabled:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
+      &.expendable-disabled[aria-level='2'] .mdc-list-item__content {
         padding-left: 43px;
       }
 
-      &.expendable-disabled:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
+      &.expendable-disabled[aria-level='1'] .mdc-list-item__content {
         padding-left: 26px;
       }
 
-      &:is([aria-level='1'], [data-level='1']).tb-pointer-event-none~:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
+      &[aria-level='1'].tb-pointer-event-none~[aria-level='2'] .mdc-list-item__content {
         padding-left: 7px;
       }
 
-      &:is([aria-level='2'], [data-level='2']) tb-icon .tb-icon {
+      &[aria-level='2'] tb-icon .tb-icon {
         margin-left: 18px;
       }
 
@@ -815,7 +789,7 @@ tb-sidenav {
     }
 
     &:not(.has-children) mat-tree-node.mat-tree-node {
-      &:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
+      &[aria-level='1'] .mdc-list-item__content {
         padding-left: 10px;
 
         mat-checkbox {

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

@@ -172,13 +172,6 @@ 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 {
@@ -189,21 +182,6 @@ 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};
@@ -240,7 +218,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:not(.mat-mdc-option-multiple) {
+    mat-option.mat-mdc-option.mdc-list-item--selected {
       --mat-option-selected-state-layer-color: #{variables.$white-color};
 
       &:hover {

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

@@ -17,8 +17,10 @@
 
 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;
 
@@ -75,8 +77,7 @@ 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"] {
-    @include variables.single-choice-selected;
+    background: variables.$active-background;
   }
 }

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

@@ -138,11 +138,6 @@ 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%;
@@ -241,17 +236,3 @@ 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;
-}