various improvements in forced-colors mode

docs/assets/plugins/search/search.css

@@ -46,12 +46,6 @@ body.site-search-visible {
   margin: 10rem auto;
 }
 
-@media (forced-colors: active) {
-  .site-search__panel {
-    border: solid 1px var(--sl-color-neutral-0);
-  }
-}
-
 @media screen and (max-width: 900px) {
   .site-search__panel {
     max-width: 100%;
@@ -122,13 +116,6 @@ body.site-search-visible {
   color: var(--sl-color-neutral-1000);
 }
 
-@media (forced-colors: active) {
-  .site-search__results li[aria-selected='true'] a {
-    outline: dashed 1px SelectedItem;
-    outline-offset: -1px;
-  }
-}
-
 .site-search__results h3 {
   font-weight: var(--sl-font-weight-semibold);
   margin: 0;
@@ -191,3 +178,15 @@ body.site-search-visible {
     display: none;
   }
 }
+
+/* Forced colors mode */
+@media (forced-colors: active) {
+  .site-search__panel {
+    border: solid 1px var(--sl-color-neutral-0);
+  }
+
+  .site-search__results li[aria-selected='true'] a {
+    outline: dashed 1px SelectedItem;
+    outline-offset: -1px;
+  }
+}

docs/resources/changelog.md

@@ -37,7 +37,17 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-tree>` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963)
 - Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
-- Improved accessibility of `<sl-color-picker>` so it's usable in forced-colors mode
+- Improved how many components display in forced-colors mode / Windows High Contrast mode
+  - Improved `<sl-color-picker>` so it's usable in forced-colors mode
+  - Improved `<sl-dialog>` and `<sl-drawer>` so the panel is more visible in forced-colors mode
+  - Improved `<sl-menu-item>` so selections are visible in forced-colors mode
+  - Improved `<sl-progress-bar>` so it's visible in forced-colors mode
+  - Improved `<sl-radio-button>` so checked states are visible in forced-colors mode
+  - Improved `<sl-range>` so the thumb, track, and tooltips are visible in forced-colors mode
+  - Improved `<sl-rating>` so icons are visible in forced-colors mode
+  - Improved `<sl-split-panel>` so the divider is visible in forced-colors mode
+  - Improved `<sl-tree-item>` so selected items are visible in forced-colors mode
+  - Improved `<sl-tab-group>` so tabs are cleaner and easier to understand in forced-colors mode
 - Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962)
 - Updated Lit to 2.4.1
 - Updated Bootstrap Icons to 1.10.2

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;
+    }
+  }
 `;