Add hover queries

packages/webawesome/docs/assets/styles/code-examples.css

@@ -116,10 +116,12 @@
     padding: 0.5rem;
     cursor: pointer;
 
-    &:hover {
-      border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
-      background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
-      color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
+    @media (hover: hover) {
+      &:hover {
+        border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
+        background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
+        color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
+      }
     }
 
     &:first-of-type {

packages/webawesome/docs/assets/styles/copy-code.css

@@ -9,8 +9,10 @@ wa-copy-button.copy-button {
   border-radius: var(--wa-border-radius-m);
   padding: 0.25rem;
 
-  &:hover {
-    color: white;
+  @media (hover: hover) {
+    &:hover {
+      color: white;
+    }
   }
 
   &:focus-visible {

packages/webawesome/docs/assets/styles/docs.css

@@ -495,8 +495,10 @@ table.colors {
   tbody {
     tr {
       border: none;
-      &:hover {
-        background: transparent;
+      @media (hover: hover) {
+        &:hover {
+          background: transparent;
+        }
       }
     }
 

packages/webawesome/docs/docs/resources/changelog.md

@@ -46,6 +46,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added `--tag-max-size` to `<wa-select>` when using `multiple`
 - Added support for `data-dialog="open <id>"` to `<wa-dialog>`
 - Added support for `data-drawer="open <id>"` to `<wa-drawer>`
+- Added `@media (hover: hover)` to component hover styles to prevent sticky hover states
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 - Fixed `<wa-button-group>` so dividers properly show between buttons
 - Fixed the tooltip position in `<wa-slider>` when using RTL
@@ -60,8 +61,8 @@ During the alpha period, things might break! We take breaking changes very serio
 ## 3.0.0-alpha.13
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparison>` and improved compatibility for non-image content
-- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
-- 🚨 BREAKING:  Renamed the `image` slot to `media` for a more appropriate naming convention
+- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING: Renamed the `image` slot to `media` for a more appropriate naming convention
 - Added [a theme builder](/docs/themes/edit/) to create your own themes
 - Added a new Blog & News pattern category
 - Added a new free component: `<wa-scroller>` (#1 of 14 per stretch goals)
@@ -123,7 +124,7 @@ During the alpha period, things might break! We take breaking changes very serio
 ### Design Tokens
 
 - Added `--wa-color-[hue]` tokens with the "core" color of each scale, regardless of which tint it lives on.
-You can find them in the first column of each color palette.
+  You can find them in the first column of each color palette.
 
 ### Themes
 
@@ -148,20 +149,21 @@ You can find them in the first column of each color palette.
 - Fixed an incorrect CSS value in the expand icon
 - Fixed a bug that prevented the description from being read by screen readers
 
-####  `<wa-option>`
+#### `<wa-option>`
 
 - `label` attribute to override the generated label (useful for rich content)
 - `defaultLabel` property
 - Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
 - Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
 
-####  `<wa-menu-item>`
+#### `<wa-menu-item>`
 
 - `label` attribute to override the generated label (useful for rich content)
 - `defaultLabel` property
 - Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
 
 #### `<wa-card>`
+
 - Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
 - Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
 - Fixed a bug that prevented slots from showing automatically without `with-` attributes
@@ -347,12 +349,12 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
 - Removed `inline` from `<wa-color-picker>`
 - Removed `getFormControls()` since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via `formElement.elements`.
 - Removed `valueAsDate` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = new Date().toLocaleDateString()`
-    getter: `new Date(waInput.value)`
+  setter: `waInput.value = new Date().toLocaleDateString()`
+  getter: `new Date(waInput.value)`
 - Removed `valueAsNumber` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = 5.toString()`
-    getter: `Number(waInput.value)`
+  setter: `waInput.value = 5.toString()`
+  getter: `Number(waInput.value)`
 
 Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
 
-Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
+Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)

packages/webawesome/src/components/animated-image/animated-image.css

@@ -36,8 +36,10 @@ img[aria-hidden='true'] {
   transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-:host([play]:hover) .control-box {
-  opacity: 1;
+@media (hover: hover) {
+  :host([play]:hover) .control-box {
+    opacity: 1;
+  }
 }
 
 :host([play]:not(:hover)) .control-box {

packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css

@@ -26,8 +26,10 @@
   transition: color var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-:host(:not(:last-of-type)) .label:hover {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+@media (hover: hover) {
+  :host(:not(:last-of-type)) .label:hover {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
 }
 
 :host(:not(:last-of-type)) .label:active {

packages/webawesome/src/components/button-group/button-group.css

@@ -9,9 +9,11 @@
   flex-wrap: wrap;
   gap: 1px;
 
-  > :hover,
-  &::slotted(:hover) {
-    z-index: 1;
+  @media (hover: hover) {
+    > :hover,
+    &::slotted(:hover) {
+      z-index: 1;
+    }
   }
 
   /* Focus and checked are always on top */

packages/webawesome/src/components/button/button.css

@@ -51,10 +51,12 @@
 }
 
 /* Interactive states */
-.button:not(.disabled):not(.loading):hover {
-  background-color: var(--background-color-hover, var(--background-color));
-  border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-  color: var(--text-color-hover, var(--text-color));
+@media (hover: hover) {
+  .button:not(.disabled):not(.loading):hover {
+    background-color: var(--background-color-hover, var(--background-color));
+    border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
+    color: var(--text-color-hover, var(--text-color));
+  }
 }
 
 .button:not(.disabled):not(.loading):active {

packages/webawesome/src/components/copy-button/copy-button.css

@@ -22,7 +22,13 @@
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
 }
 
-.button:hover:not([disabled]),
+@media (hover: hover) {
+  .button:hover:not([disabled]) {
+    background-color: var(--background-color-hover);
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
+}
+
 .button:focus-visible:not([disabled]) {
   background-color: var(--background-color-hover);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));

packages/webawesome/src/components/input/input.css

@@ -166,8 +166,10 @@ textarea {
   transition: var(--wa-transition-normal) color;
   cursor: pointer;
 
-  &:hover {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  @media (hover: hover) {
+    &:hover {
+      color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+    }
   }
 
   &:active {

packages/webawesome/src/components/option/option.css

@@ -23,9 +23,11 @@
   outline: none;
 }
 
-:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
-  background-color: var(--background-color-hover);
-  color: var(--text-color-hover);
+@media (hover: hover) {
+  :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
+    background-color: var(--background-color-hover);
+    color: var(--text-color-hover);
+  }
 }
 
 :host(:state(current)),

packages/webawesome/src/components/radio/radio.css

@@ -141,8 +141,10 @@
   border-start-end-radius: 0;
 }
 
-:host([appearance='button']:hover:not([disabled], :state(checked))) {
-  background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
+@media (hover: hover) {
+  :host([appearance='button']:hover:not([disabled], :state(checked))) {
+    background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
+  }
 }
 
 :host([appearance='button']:focus-visible) {

packages/webawesome/src/components/select/select.css

@@ -198,8 +198,10 @@ label:has(select),
     outline: none;
   }
 
-  &:hover {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  @media (hover: hover) {
+    &:hover {
+      color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+    }
   }
 
   &:active {

packages/webawesome/src/components/tab/tab.css

@@ -25,8 +25,10 @@
   }
 }
 
-:host(:hover:not([disabled])) .tab {
-  color: currentColor;
+@media (hover: hover) {
+  :host(:hover:not([disabled])) .tab {
+    color: currentColor;
+  }
 }
 
 :host(:focus) {

packages/webawesome/src/components/tag/tag.css

@@ -33,8 +33,10 @@
   width: 1em;
 }
 
-:host(:hover) > [part='remove-button']::part(base) {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+@media (hover: hover) {
+  :host(:hover) > [part='remove-button']::part(base) {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
 }
 
 :host(:active) > [part='remove-button']::part(base) {

packages/webawesome/src/styles/native.css

@@ -1174,12 +1174,14 @@
         background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
       }
 
-      &:hover {
-        background-color: var(--wa-color-fill-quiet);
-
-        &,
-        + tr {
-          border-top-color: var(--wa-color-border-normal);
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--wa-color-fill-quiet);
+
+          &,
+          + tr {
+            border-top-color: var(--wa-color-border-normal);
+          }
         }
       }
     }

packages/webawesome/src/styles/themes/matter/overrides.css

@@ -195,17 +195,21 @@
         margin-inline-end: 0.75em;
       }
 
-      &:hover {
-        --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
-        &:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
-          --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
+      @media (hover: hover) {
+        &:hover {
+          --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
+          &:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
+            --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
+          }
         }
       }
     }
 
-    input[type='range']:hover,
-    wa-slider:hover {
-      --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--thumb-color), transparent 85%);
+    @media (hover: hover) {
+      input[type='range']:hover,
+      wa-slider:hover {
+        --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--thumb-color), transparent 85%);
+      }
     }
 
     wa-switch {
@@ -220,8 +224,10 @@
         margin-inline-end: 0.75em;
       }
 
-      &:hover {
-        --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
+      @media (hover: hover) {
+        &:hover {
+          --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
+        }
       }
 
       &:not(:state(checked))::part(thumb) {

packages/webawesome/src/styles/themes/playful/dimension.css

@@ -11,8 +11,10 @@
         /* Doesn't apply transform to buttons in dropdowns or button groups.
        * For dropdowns, this prevents the dropdown panel from shifting. */
         &:not(:where(wa-button-group &, wa-dropdown &, wa-radio-group &)) {
-          &:hover {
-            transform: scale(1.02);
+          @media (hover: hover) {
+            &:hover {
+              transform: scale(1.02);
+            }
           }
 
           &:active {
@@ -58,15 +60,17 @@
         }
 
         &:not([disabled]) {
-          &:hover {
-            &:where(:not(wa-button)),
-            &::part(base) {
-              background: linear-gradient(
-                180deg,
-                var(--gradient-bottom) 0%,
-                var(--gradient-middle) 51.88%,
-                var(--gradient-top) 100%
-              );
+          @media (hover: hover) {
+            &:hover {
+              &:where(:not(wa-button)),
+              &::part(base) {
+                background: linear-gradient(
+                  180deg,
+                  var(--gradient-bottom) 0%,
+                  var(--gradient-middle) 51.88%,
+                  var(--gradient-top) 100%
+                );
+              }
             }
           }