fix: missing scrollbar custom style on Chrome 121

packages/elemental-theme/src/custom-elements/ef-autosuggest.less

@@ -22,7 +22,7 @@
     overflow: auto;
     .touch-action();
     .ie-scrollbars();
-    .mozilla-scrollbars();
+    .standard-scrollbars();
   }
 
   [part='more-results'] {

packages/elemental-theme/src/custom-elements/ef-card.less

@@ -57,6 +57,6 @@
   }
 
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-combo-box.less

@@ -56,7 +56,7 @@
   }
 
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-dialog.less

@@ -29,6 +29,7 @@
       opacity: 0.6;
     }
   }
+
   [part='default-button'] {
     .touch-action();
     margin: @panel-padding;
@@ -37,12 +38,14 @@
       margin-right: 0;
     }
   }
+
   [part='footer'] {
     border-top: @separator-width solid @separator-color;
     background: @scrollbar-track-background-color;
   }
+
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-multi-input.less

@@ -8,6 +8,7 @@
 
   .input-defaults;
   .input-standard(true);
+
   &[focused] {
     .input-focus;
   }
@@ -27,8 +28,9 @@
   [part='search-holder'] {
     align-items: center;
   }
+
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-overlay-menu.less

@@ -20,7 +20,7 @@
   }
 
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-overlay.less

@@ -12,7 +12,7 @@
   }
 
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-select.less

@@ -10,21 +10,27 @@
 :host {
   // #region - Extend from ef-text-field
   &:extend(:host);
+
   &:not([readonly]):hover {
     &:extend(:host:hover);
   }
+
   &:not([readonly]):active {
     &:extend(:host:active);
   }
+
   &:not([readonly])[focused] {
     &:extend(:host[focused]);
   }
+
   &[warning] {
     &:extend(:host[warning] all);
   }
+
   &[error] {
     &:extend(:host[error] all);
   }
+
   &[disabled] {
     &:extend(:host[disabled]);
   }
@@ -33,24 +39,30 @@
   &[readonly] {
     cursor: default;
   }
+
   [part='placeholder'] {
     opacity: 0.5;
   }
+
   [part='label'],
   [part='placeholder'] {
     margin-right: 3px;
   }
+
   [part~='icon'] {
     color: @input-text-color;
     opacity: 0.7;
   }
+
   &:not([readonly]):hover [part~='icon'],
   &:not([readonly])[focused] [part~='icon'] {
     opacity: 1;
   }
+
   &:not([readonly])[focused] [part~='icon'] {
     color: @scheme-color-primary;
   }
+
   &[disabled] [part~='icon'] {
     color: @input-disabled-border-color;
   }
@@ -61,7 +73,7 @@
   }
 
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/elemental-theme/src/custom-elements/ef-sidebar-layout.less

@@ -4,13 +4,14 @@
 :host {
   --sidebar-width: 250px;
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 
   &:not([sidebar-position]) [part='sidebar'],
   &[sidebar-position='left'] [part='sidebar'] {
     border-right: @separator-width solid @separator-color;
     transition: margin-left @global-transition-duration ease;
   }
+
   &[sidebar-position='right'] [part='sidebar'] {
     order: 1;
     border-left: @separator-width solid @separator-color;

packages/elemental-theme/src/native-elements/html.less

@@ -5,7 +5,7 @@ html {
   touch-action: manipulation; // Improve tap speed on mobile browsers
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
   @css-properties();
 }
 

packages/elemental-theme/src/shared-styles/list.less

@@ -9,7 +9,7 @@
 
   .touch-action();
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 
   &:focus {
     outline: none;

packages/elemental-theme/src/shared-styles/scrollbar.less

@@ -201,13 +201,33 @@
   }
 }
 
-.mozilla-scrollbars () {
-  & {
-    scrollbar-color: @scrollbar-thumb-background-color @scrollbar-track-background-color;
-  }
-}
-
+// `.scrollbars()` is deprecated. Use `.standard-scrollbars()`, `.ie-scrollbars()` and `.webkit-scrollbars()` instead.
 .scrollbars() {
   .webkit-scrollbars();
   .ie-scrollbars();
 }
+
+/*
+  While `.standard-scrollbars()` and `.ie-scrollbars()` require a selector to apply CSS properties,
+  `.webkit-scrollbars()` could be used directly as it utilizes CSS pseudo-elements.
+  Here's a usage example with web component:
+```less
+::host {
+  .standard-scrollbars();
+  .ie-scrollbars();
+}
+.webkit-scrollbars();
+```
+*/
+.standard-scrollbars() {
+  @supports not selector(::-webkit-scrollbar) {
+    & {
+      scrollbar-color: @scrollbar-thumb-background-color @scrollbar-track-background-color;
+    }
+  }
+}
+
+// `.mozilla-scrollbars()` is deprecated. Use `.standard-scrollbars()` instead.
+.mozilla-scrollbars() {
+  .standard-scrollbars();
+}

packages/halo-theme/src/custom-elements/ef-select.less

@@ -57,8 +57,9 @@
       display: none;
     }
   }
+
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();

packages/halo-theme/src/native-elements/html.less

@@ -1,6 +1,8 @@
 @import '@refinitiv-ui/elemental-theme/src/native-elements/html';
 @import '../shared-styles/scrollbar';
 
-html {
-  scrollbar-width: auto;
+@supports not selector(::-webkit-scrollbar) {
+  html {
+    scrollbar-width: auto;
+  }
 }

packages/halo-theme/src/shared-styles/scrollbar.less

@@ -254,8 +254,27 @@
   }
 }
 
-.mozilla-scrollbars () {
-  & {
-    scrollbar-width: thin;
+/*
+  While `.standard-scrollbars()` and `.ie-scrollbars()` require a selector to apply CSS properties,
+  `.webkit-scrollbars()` could be used directly as it utilizes CSS pseudo-elements.
+  Here's a usage example with web component:
+```less
+::host {
+  .standard-scrollbars();
+  .ie-scrollbars();
+}
+.webkit-scrollbars();
+```
+*/
+.standard-scrollbars() {
+  @supports not selector(::-webkit-scrollbar) {
+    & {
+      scrollbar-width: thin;
+    }
   }
 }
+
+// `.mozilla-scrollbars()` is deprecated. Use `.standard-scrollbars()` instead.
+.mozilla-scrollbars() {
+  .standard-scrollbars();
+}

packages/solar-theme/src/custom-elements/ef-select.less

@@ -10,13 +10,16 @@
   &:extend(:host);
   // pointer cursor style would be applied internally to trigger element instead
   cursor: unset;
+
   &:not([readonly]):hover {
     &:extend(:host:hover);
   }
+
   &:not([readonly]):active,
   &:not([readonly])[focused] {
     &:extend(:host:active);
   }
+
   &:not([disabled])[focused] {
     &:extend(:host:focus);
     border: 1px dotted @select-focused-border-color !important;
@@ -26,6 +29,7 @@
       box-shadow: inset 0 0 0 1px @select-box-shadow-color;
     }
   }
+
   &[disabled] {
     &:extend(:host[disabled]);
   }
@@ -49,8 +53,9 @@
     border: 1px solid @popup-border-color;
     background-color: @button-background-color;
   }
+
   .ie-scrollbars();
-  .mozilla-scrollbars();
+  .standard-scrollbars();
 }
 
 .webkit-scrollbars();