From c162983ca287320a4b0d2facef75651ccaaa6296 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 5 Jun 2025 18:03:51 -0400 Subject: [PATCH] add hover queries (#1035) --- .../docs/assets/styles/code-examples.css | 10 ++++--- .../docs/assets/styles/copy-code.css | 6 +++-- .../webawesome/docs/assets/styles/docs.css | 6 +++-- .../docs/docs/resources/changelog.md | 22 +++++++++------- .../animated-image/animated-image.css | 6 +++-- .../breadcrumb-item/breadcrumb-item.css | 6 +++-- .../components/button-group/button-group.css | 8 +++--- .../src/components/button/button.css | 10 ++++--- .../components/copy-button/copy-button.css | 8 +++++- .../webawesome/src/components/input/input.css | 6 +++-- .../src/components/option/option.css | 8 +++--- .../webawesome/src/components/radio/radio.css | 6 +++-- .../src/components/select/select.css | 6 +++-- .../webawesome/src/components/tab/tab.css | 6 +++-- .../webawesome/src/components/tag/tag.css | 6 +++-- packages/webawesome/src/styles/native.css | 12 +++++---- .../src/styles/themes/matter/overrides.css | 24 ++++++++++------- .../src/styles/themes/playful/dimension.css | 26 +++++++++++-------- .../webawesome/src/styles/utilities/text.css | 18 ++++++++----- 19 files changed, 125 insertions(+), 75 deletions(-) diff --git a/packages/webawesome/docs/assets/styles/code-examples.css b/packages/webawesome/docs/assets/styles/code-examples.css index c945ae45c..5fd30af62 100644 --- a/packages/webawesome/docs/assets/styles/code-examples.css +++ b/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 { diff --git a/packages/webawesome/docs/assets/styles/copy-code.css b/packages/webawesome/docs/assets/styles/copy-code.css index f65887b64..a79379669 100644 --- a/packages/webawesome/docs/assets/styles/copy-code.css +++ b/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 { diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 3dbf19a0d..126163490 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/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; + } } } diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index f62d5da9b..77ce2f1f0 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -47,6 +47,7 @@ During the alpha period, things might break! We take breaking changes very serio - Added `--tag-max-size` to `` when using `multiple` - Added support for `data-dialog="open "` to `` - Added support for `data-drawer="open "` to `` +- Added `@media (hover: hover)` to component hover styles to prevent sticky hover states - Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924] - Fixed `` so dividers properly show between buttons - Fixed the tooltip position in `` when using RTL @@ -61,8 +62,8 @@ During the alpha period, things might break! We take breaking changes very serio ## 3.0.0-alpha.13 - 🚨 BREAKING: Renamed `` to `` and improved compatibility for non-image content -- 🚨 BREAKING: Added slot detection to `` and `` 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 `` and `` 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: `` (#1 of 14 per stretch goals) @@ -124,7 +125,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 @@ -149,20 +150,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 -#### `` +#### `` - `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. -#### `` +#### `` - `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) #### `` + - 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 @@ -348,12 +350,12 @@ Here's a list of some of the things that have changed since Shoelace v2. For que - Removed `inline` from `` - Removed `getFormControls()` since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via `formElement.elements`. - Removed `valueAsDate` from ``; 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 ``; 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/) \ No newline at end of file +Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/) diff --git a/packages/webawesome/src/components/animated-image/animated-image.css b/packages/webawesome/src/components/animated-image/animated-image.css index abf70ca93..8e1ab5df2 100644 --- a/packages/webawesome/src/components/animated-image/animated-image.css +++ b/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 { diff --git a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css index 653d19346..4a98b92d2 100644 --- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css +++ b/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 { diff --git a/packages/webawesome/src/components/button-group/button-group.css b/packages/webawesome/src/components/button-group/button-group.css index 794d9902a..185162a89 100644 --- a/packages/webawesome/src/components/button-group/button-group.css +++ b/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 */ diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css index de0c49bf8..a210ef143 100644 --- a/packages/webawesome/src/components/button/button.css +++ b/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 { diff --git a/packages/webawesome/src/components/copy-button/copy-button.css b/packages/webawesome/src/components/copy-button/copy-button.css index 0abbf7e15..e52a72b17 100644 --- a/packages/webawesome/src/components/copy-button/copy-button.css +++ b/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)); diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css index d3993f16c..3dc0f9a0f 100644 --- a/packages/webawesome/src/components/input/input.css +++ b/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 { diff --git a/packages/webawesome/src/components/option/option.css b/packages/webawesome/src/components/option/option.css index 00bdb0ff7..149fb873b 100644 --- a/packages/webawesome/src/components/option/option.css +++ b/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)), diff --git a/packages/webawesome/src/components/radio/radio.css b/packages/webawesome/src/components/radio/radio.css index e025190fe..827c18195 100644 --- a/packages/webawesome/src/components/radio/radio.css +++ b/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) { diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css index a01aace87..2639c38e3 100644 --- a/packages/webawesome/src/components/select/select.css +++ b/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 { diff --git a/packages/webawesome/src/components/tab/tab.css b/packages/webawesome/src/components/tab/tab.css index 65f6078df..c782ca0d3 100644 --- a/packages/webawesome/src/components/tab/tab.css +++ b/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) { diff --git a/packages/webawesome/src/components/tag/tag.css b/packages/webawesome/src/components/tag/tag.css index 7b2f6059f..3fdabab5b 100644 --- a/packages/webawesome/src/components/tag/tag.css +++ b/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) { diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css index c2205fbfe..8a0763bed 100644 --- a/packages/webawesome/src/styles/native.css +++ b/packages/webawesome/src/styles/native.css @@ -1173,12 +1173,14 @@ background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent); } - &:hover { - background-color: var(--wa-color-fill-quiet); + @media (hover: hover) { + &:hover { + background-color: var(--wa-color-fill-quiet); - &, - + tr { - border-top-color: var(--wa-color-border-normal); + &, + + tr { + border-top-color: var(--wa-color-border-normal); + } } } } diff --git a/packages/webawesome/src/styles/themes/matter/overrides.css b/packages/webawesome/src/styles/themes/matter/overrides.css index 208918d13..84dbacb12 100644 --- a/packages/webawesome/src/styles/themes/matter/overrides.css +++ b/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) { diff --git a/packages/webawesome/src/styles/themes/playful/dimension.css b/packages/webawesome/src/styles/themes/playful/dimension.css index 481aceb25..83dc276f1 100644 --- a/packages/webawesome/src/styles/themes/playful/dimension.css +++ b/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% + ); + } } } diff --git a/packages/webawesome/src/styles/utilities/text.css b/packages/webawesome/src/styles/utilities/text.css index edee398c3..059a85269 100644 --- a/packages/webawesome/src/styles/utilities/text.css +++ b/packages/webawesome/src/styles/utilities/text.css @@ -106,10 +106,12 @@ text-decoration: var(--wa-link-decoration-default); -webkit-text-decoration: var(--wa-link-decoration-default); - &:hover { - color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover)); - text-decoration: var(--wa-link-decoration-hover); - -webkit-text-decoration: var(--wa-link-decoration-hover); + @media (hover: hover) { + &:hover { + color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover)); + text-decoration: var(--wa-link-decoration-hover); + -webkit-text-decoration: var(--wa-link-decoration-hover); + } } } @@ -117,9 +119,11 @@ color: var(--wa-color-text-normal); text-decoration: none; - &:hover { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - text-decoration: none; + @media (hover: hover) { + &:hover { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + text-decoration: none; + } } } }