diff --git a/.changeset/lazy-ants-cough.md b/.changeset/lazy-ants-cough.md new file mode 100644 index 0000000000..d20baa509f --- /dev/null +++ b/.changeset/lazy-ants-cough.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: restore missing hover colors diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css index 907839767f..05da92a7e1 100644 --- a/elements/rh-accordion/rh-accordion-header.css +++ b/elements/rh-accordion/rh-accordion-header.css @@ -3,7 +3,6 @@ --_padding-inline-end: var(--rh-space-xl, 24px); --_padding-block-end: var(--rh-space-lg, 16px); --_padding-inline-start: var(--rh-space-xl, 24px); - --_active-text-color: var(--rh-color-text-primary); --_font-size: var(--rh-font-size-body-text-lg, 1.125rem); --_after-background-color: transparent; --_expanded-background-color: var(--rh-color-accent-brand); @@ -48,12 +47,6 @@ a { border-inline-start-color: var(--rh-color-border-subtle); } -#button, -#button:before, -#button:after { - background-color: var(--rh-color-surface); -} - #icon { width: 16px; height: 16px; @@ -61,6 +54,11 @@ a { transition: rotate 0.2s ease-in 0s; } +span { + overflow: hidden; + text-align: start; +} + #button { width: 100%; padding: @@ -71,36 +69,60 @@ a { font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); font-size: var(--_font-size); color: var(--rh-color-text-primary); -} -#button #icon { - fill: currentcolor; -} + & #icon { + fill: currentcolor; + } -#button:after { - inset-block-start: -1px; - width: var(--rh-border-width-lg, 3px); - background-color: var(--_after-background-color); -} + &:is(:hover,:active,:focus) { + &.light { background-color: var(--rh-color-surface-lighter); } + &.dark { background-color: var(--rh-color-surface-dark-alt); } -span { - overflow: hidden; - text-align: start; -} + & span { + color: var(--rh-color-text-primary); + } + } -[part='container'] { - display: flex; - gap: var(--rh-space-xl, 24px); - container-type: inline-size; + &:focus { + outline: 2px solid var(--rh-color-interactive-primary-default); + } + + &, + &:before, + &:after { + background-color: var(--rh-color-surface); + } + + &:after { + inset-block-start: -1px; + width: var(--rh-border-width-lg, 3px); + background-color: var(--_after-background-color); + } + + &.expanded { + --_after-background-color: var(--rh-color-accent-brand); + + & #icon { + rotate: calc(var(--_isRTL, -1) * 180deg); + } + + &.on.light { + --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); + } + + &.on.dark { + --rh-color-surface: var(--rh-color-surface-darkest, #151515); + } + } } #header-container { display: flex; gap: var(--rh-space-md, 8px); -} -#header-container.bottom { - flex-direction: column; + &.bottom { + flex-direction: column; + } } #header-text { @@ -113,54 +135,26 @@ span { gap: var(--rh-space-md, 8px); } -.expanded #button { - --_after-background-color: var(--rh-color-accent-brand); -} - -.expanded #button #icon { - rotate: calc(var(--_isRTL, -1) * 180deg); -} - -#button:hover, -#button:active, -#button:focus { - background-color: var(--rh-color-surface); -} - -#button:hover span, -#button:focus span, -#button:active span { - color: var(--_active-text-color); -} - -.toggle, -.toggle:before, -.toggle:after { - padding: 0; - margin: 0; -} - .toggle { position: relative; display: flex; align-items: center; justify-content: space-between; border: 0; -} - -.toggle:after { - content: ''; - position: absolute; - inset-block: 0; - inset-inline-start: 0; -} -.expanded.on.light { - --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); -} + &, + &:before, + &:after { + padding: 0; + margin: 0; + } -.expanded.on.dark { - --rh-color-surface: var(--rh-color-surface-darkest, #151515); + &:after { + content: ''; + position: absolute; + inset-block: 0; + inset-inline-start: 0; + } } @container (min-width: 576px) { diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts index 5400ae0398..b41e325297 100644 --- a/elements/rh-accordion/rh-accordion-header.ts +++ b/elements/rh-accordion/rh-accordion-header.ts @@ -81,26 +81,24 @@ export class RhAccordionHeader extends LitElement { } render() { - const { expanded, on = '' } = this; + const { expanded, on = 'light' } = this; const { accents, large = false } = this.ctx ?? {}; const rtl = this.#dir.dir === 'rtl'; return html` -
- -
+ `; } diff --git a/elements/rh-accordion/rh-accordion-panel.ts b/elements/rh-accordion/rh-accordion-panel.ts index 62ed3ba47b..392e4404bd 100644 --- a/elements/rh-accordion/rh-accordion-panel.ts +++ b/elements/rh-accordion/rh-accordion-panel.ts @@ -22,8 +22,6 @@ import { context, type RhAccordionContext } from './context.js'; */ @customElement('rh-accordion-panel') export class RhAccordionPanel extends LitElement { - static readonly version = '{{version}}'; - static readonly styles = [styles]; @property({ type: Boolean, reflect: true }) expanded = false; diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts index cd9533f6ec..bf23421f7f 100644 --- a/elements/rh-accordion/rh-accordion.ts +++ b/elements/rh-accordion/rh-accordion.ts @@ -153,11 +153,15 @@ export class RhAccordion extends LitElement { } override render(): TemplateResult { - const { on = 'light' } = this; + const { on } = this; const expanded = this.#expanded; return html`
+ class="${classMap({ + on: true, + [on ?? 'light']: true, + expanded, + })}"> `; } diff --git a/elements/rh-surface/test/elements.ts b/elements/rh-surface/test/elements.ts index d1a71e4188..ddafcd35ad 100644 --- a/elements/rh-surface/test/elements.ts +++ b/elements/rh-surface/test/elements.ts @@ -6,6 +6,7 @@ import { colorContextConsumer, type ColorTheme, } from '@rhds/elements/lib/context/color/consumer.js'; + import { colorContextProvider, type ColorPalette, @@ -37,4 +38,3 @@ export class ContextProviderConsumer extends ReactiveElement { @property({ reflect: true }) on?: ColorTheme; } - diff --git a/lib/context/color/consumer.ts b/lib/context/color/consumer.ts index a25b188874..3a8d7c5d8b 100644 --- a/lib/context/color/consumer.ts +++ b/lib/context/color/consumer.ts @@ -69,11 +69,18 @@ export class ColorContextConsumer< this.#override = null; } - hostUpdated() { + async hostUpdated() { if (!isServer && !this.host.hasUpdated) { // This is definitely overkill, but it's the only // way we've found so far to work around lit-ssr hydration woes - this.hostConnected(); + const original = this.#propertyValue; + + if (original) { + await this.host.updateComplete; + this.#propertyValue = '__LIT_SSR_WORKAROUND__' as ColorTheme; + await this.host.updateComplete; + this.#propertyValue = original as ColorTheme; + } } } diff --git a/lib/context/color/provider.ts b/lib/context/color/provider.ts index 00847cd263..d62dbec16b 100644 --- a/lib/context/color/provider.ts +++ b/lib/context/color/provider.ts @@ -110,10 +110,10 @@ export class ColorContextProvider< async hostConnected() { this.host.addEventListener('context-request', e => this.#onChildContextRequestEvent(e)); this.#mo.observe(this.host, { attributes: true, attributeFilter: [this.#attribute] }); + await this.host.updateComplete; for (const [host, fired] of contextEvents) { host.dispatchEvent(fired); } - await this.host.updateComplete; this.update(); return true; }