various improvements in forced-colors mode

src/components/button/button.styles.ts

@@ -300,6 +300,12 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
+  @media (forced-colors: active) {
+    .button.button--outline.button--checked:not(.button--disabled) {
+      outline: solid 2px transparent;
+    }
+  }
+
   /*
    * Text buttons
    */

src/components/dialog/dialog.styles.ts

@@ -37,12 +37,6 @@ export default css`
     box-shadow: var(--sl-shadow-x-large);
   }
 
-  @media (forced-colors: active) {
-    .dialog__panel {
-      border: solid 1px var(--sl-color-neutral-0);
-    }
-  }
-
   .dialog__panel:focus {
     outline: none;
   }
@@ -111,4 +105,10 @@ export default css`
     left: 0;
     background-color: var(--sl-overlay-background-color);
   }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
 `;

src/components/drawer/drawer.styles.ts

@@ -50,12 +50,6 @@ export default css`
     outline: none;
   }
 
-  @media (forced-colors: active) {
-    .drawer__panel {
-      border: solid 1px var(--sl-color-neutral-0);
-    }
-  }
-
   .drawer--top .drawer__panel {
     top: 0;
     inset-inline-end: auto;
@@ -147,4 +141,10 @@ export default css`
   .drawer--contained .drawer__overlay {
     position: absolute;
   }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
 `;

src/components/menu-item/menu-item.styles.ts

@@ -66,14 +66,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .menu-item,
-    :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-
   .menu-item .menu-item__check,
   .menu-item .menu-item__chevron {
     flex: 0 0 auto;
@@ -88,4 +80,12 @@ export default css`
   .menu-item--has-submenu .menu-item__chevron {
     visibility: visible;
   }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
 `;

src/components/progress-bar/progress-bar.styles.ts

@@ -47,6 +47,18 @@ export default css`
     animation-name: indeterminate-rtl;
   }
 
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--sl-color-neutral-0);
+    }
+
+    .progress-bar__indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
   @keyframes indeterminate {
     0% {
       left: -50%;

src/components/range/range.styles.ts

@@ -211,4 +211,23 @@ export default css`
     border-right: var(--sl-tooltip-arrow-size) solid transparent;
     bottom: 100%;
   }
+
+  @media (forced-colors: active) {
+    .range__control,
+    .range__tooltip {
+      border: solid 1px transparent;
+    }
+
+    .range__control::-webkit-slider-thumb {
+      border: solid 1px transparent;
+    }
+
+    .range__control::-moz-range-thumb {
+      border: solid 1px transparent;
+    }
+
+    .range__tooltip:after {
+      display: none;
+    }
+  }
 `;

src/components/rating/rating.styles.ts

@@ -76,4 +76,11 @@ export default css`
   .rating--disabled .rating__symbols {
     cursor: not-allowed;
   }
+
+  /* Forced colors mode */
+  @media (forced-colors: active) {
+    .rating__symbols--indicator {
+      color: SelectedItem;
+    }
+  }
 `;

src/components/skeleton/skeleton.styles.ts

@@ -37,6 +37,13 @@ export default css`
     animation: pulse 2s ease-in-out 0.5s infinite;
   }
 
+  /* Forced colors mode */
+  @media (forced-colors: active) {
+    :host {
+      --color: GrayText;
+    }
+  }
+
   @keyframes sheen {
     0% {
       background-position: 200% 0;

src/components/split-panel/split-panel.styles.ts

@@ -72,4 +72,10 @@ export default css`
     top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
     height: var(--divider-hit-area);
   }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
 `;

src/components/tab-group/tab-group.styles.ts

@@ -14,7 +14,6 @@ export default css`
 
   .tab-group {
     display: flex;
-    border: solid 1px transparent;
     border-radius: 0;
   }
 

src/components/tab-panel/tab-panel.styles.ts

@@ -11,7 +11,6 @@ export default css`
   }
 
   .tab-panel {
-    border: solid 1px transparent;
     padding: var(--padding);
   }
 

src/components/tab/tab.styles.ts

@@ -61,4 +61,11 @@ export default css`
   .tab__close-button::part(base) {
     padding: var(--sl-spacing-3x-small);
   }
+
+  @media (forced-colors: active) {
+    .tab.tab--active:not(.tab--disabled) {
+      outline: solid 1px transparent;
+      outline-offset: -3px;
+    }
+  }
 `;

src/components/tree-item/tree-item.styles.ts

@@ -11,7 +11,7 @@ export default css`
   }
 
   :host(:focus) {
-    outline: 0;
+    outline: none;
   }
 
   slot:not([name])::slotted(sl-icon) {
@@ -138,4 +138,10 @@ export default css`
     left: auto;
     right: 1em;
   }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
 `;