diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js index 69242ca4a..bb5d25305 100644 --- a/packages/lit-dev-content/.eleventy.js +++ b/packages/lit-dev-content/.eleventy.js @@ -527,16 +527,10 @@ ${content} return ``; }); - /** - * Inline the Rollup-bundled version of a JavaScript module. Path is relative - * to ./rollupout. - * - * In dev mode, instead directly import the module, which has already been - * symlinked directly to the TypeScript output directory. - */ - eleventyConfig.addShortcode('inlinejs', (path) => { + const inlineJs = (path, type) => { + const typeAttribute = type ? ` type="${type}"` : ''; if (DEV) { - return ``; + return ``; } // Note we must trim before hashing, because our html-minifier will trim // inline script trailing newlines, and otherwise our hash will be wrong. @@ -544,7 +538,25 @@ ${content} const hash = 'sha256-' + crypto.createHash('sha256').update(script).digest('base64'); cspInlineScriptHashes.add(hash); - return ``; + return `${script}`; + }; + + /** + * Inline the Rollup-bundled version of a JavaScript module. Path is relative + * to ./rollupout. + * + * In dev mode, instead directly import the module, which has already been + * symlinked directly to the TypeScript output directory. + */ + eleventyConfig.addShortcode('inlinejs', (path) => { + return inlineJs(path, 'module'); + }); + + /** + * Inline a parser-blocking classic script. + */ + eleventyConfig.addShortcode('inlineclassicjs', (path) => { + return inlineJs(path); }); eleventyConfig.addNunjucksAsyncShortcode('algoliaid', async () => { diff --git a/packages/lit-dev-content/rollup.config.js b/packages/lit-dev-content/rollup.config.js index a5a1f3094..7e1b6131c 100644 --- a/packages/lit-dev-content/rollup.config.js +++ b/packages/lit-dev-content/rollup.config.js @@ -35,6 +35,7 @@ export default [ // lit-hydrate-support MUST be loaded first to make sure lit hydration // helpers are bundled before LitElement attempts to use hydration support 'lib/global/lit-hydrate-support.js', + 'lib/global/theme-worker.js', 'lib/components/copy-button.js', 'lib/components/litdev-banner.js', 'lib/components/litdev-drawer.js', @@ -151,7 +152,8 @@ export default [ // the asynchronously-loaded module bundles above. { input: [ - 'lib/global/apply-saved-theme.js', + 'lib/global/apply-session-theme.js', + 'lib/global/initialize-theme.js', 'lib/global/apply-mods.js', 'lib/global/initialize-typescript-mode.js', 'lib/global/mobile-drawer.js', diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html index 2dd961279..a46d9b1fb 100644 --- a/packages/lit-dev-content/site/_includes/default.html +++ b/packages/lit-dev-content/site/_includes/default.html @@ -15,7 +15,7 @@ - {% inlinejs "global/apply-saved-theme.js" %} + {% inlinejs "global/initialize-theme.js" %} {% inlinecss "colors.css" %} {% inlinecss "global.css" %} @@ -75,6 +75,7 @@ {% include 'header.html' %} + {% inlineclassicjs "global/apply-session-theme.js" %} {% if selectedVersion !== latestVersion %} diff --git a/packages/lit-dev-content/site/_includes/header.html b/packages/lit-dev-content/site/_includes/header.html index da634b79f..4c66276ab 100644 --- a/packages/lit-dev-content/site/_includes/header.html +++ b/packages/lit-dev-content/site/_includes/header.html @@ -17,9 +17,12 @@ - + diff --git a/packages/lit-dev-content/site/playground/index.html b/packages/lit-dev-content/site/playground/index.html index 1566310ef..7f32d3eef 100644 --- a/packages/lit-dev-content/site/playground/index.html +++ b/packages/lit-dev-content/site/playground/index.html @@ -55,21 +55,22 @@

{{ section.name }}

diff --git a/packages/lit-dev-content/src/components/litdev-drawer.ts b/packages/lit-dev-content/src/components/litdev-drawer.ts index 34fcc1554..f98689399 100644 --- a/packages/lit-dev-content/src/components/litdev-drawer.ts +++ b/packages/lit-dev-content/src/components/litdev-drawer.ts @@ -22,6 +22,7 @@ const closeIcon = html`
`; } + + private _handleAnchorClick(event: MouseEvent) { + if (this.disabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + } } diff --git a/packages/lit-dev-content/src/components/litdev-tutorial.ts b/packages/lit-dev-content/src/components/litdev-tutorial.ts index 81ac65a99..9e2a99727 100644 --- a/packages/lit-dev-content/src/components/litdev-tutorial.ts +++ b/packages/lit-dev-content/src/components/litdev-tutorial.ts @@ -363,11 +363,9 @@ export class LitDevTutorial extends LitElement { protected renderHeader() { return html`
- - - ${catalogIcon} - - + + ${catalogIcon} + ${this._manifestTask.render({ complete: (manifest) => html` { - this.menuOpen = !this.menuOpen; - }} - @keydown=${this._handleKeydown} - label="Theme selector" - haspopup="listbox" - .expanded=${this.menuOpen ? 'true' : 'false'} - controls="menu" - button-role="combobox" - .buttonTitle=${modeOptions.title} - id="button" + @click=${this._toggleMode} + label="Dark mode" + .pressed=${this.mode ? this.mode === 'dark' : undefined} + button-title="Toggle dark mode" > - ${modeOptions.icon()} + ${lightModeIcon()} + ${darkModeIcon()} - { - this.shadowRoot - ?.querySelector?.('#button span') - ?.removeAttribute?.('aria-live'); - }} - @opened=${() => { - if (this.defaultFocus !== FocusState.NONE) { - return; - } - - ( - this.shadowRoot?.querySelector?.( - 'md-menu-item[selected]' - ) as HTMLElement - )?.focus?.(); - }} - @closed=${() => { - this.menuOpen = false; - }} - @close-menu=${this._onCloseMenu} - > - ${Object.keys(Modes).map( - (mode) => html` - - ${Modes[mode as ColorMode].label} - ${Modes[mode as ColorMode].icon('start')} - ${mode === this.mode - ? checkIcon('end') - : html``} - - ` - )} - `; } - update(changed: PropertyValues) { - if (changed.get('mode')) { - this.dispatchEvent(new ChangeColorModeEvent(this.mode)); + override connectedCallback() { + super.connectedCallback(); + if (isServer) { + return; } - super.update(changed); - } - - firstUpdated() { + initializeTheme(); this.mode = getCurrentMode(); - this.addEventListener('focusout', this._focusout); + window.addEventListener( + COLOR_MODE_CHANGE_EVENT, + this._handleColorModeChange + ); } - private _onCloseMenu(e: CloseMenuEvent) { - const nextMode = e.detail.itemPath[0]?.dataset?.mode as - | ColorMode - | undefined; - if (!nextMode) { + override disconnectedCallback() { + super.disconnectedCallback(); + if (isServer) { return; } - this.mode = nextMode; + window.removeEventListener( + COLOR_MODE_CHANGE_EVENT, + this._handleColorModeChange + ); } - /** - * Handles opening the select on keydown and typahead selection when the menu - * is closed. Taken from md-select's implementation. - */ - private _handleKeydown(event: KeyboardEvent) { - const menu = this.shadowRoot?.querySelector?.('md-menu'); - - if (this.menuOpen || !menu) { - return; - } - - const typeaheadController = menu.typeaheadController; - const isOpenKey = - event.code === 'Space' || - event.code === 'ArrowDown' || - event.code === 'ArrowUp' || - event.code === 'End' || - event.code === 'Home' || - event.code === 'Enter'; - - // Do not open if currently typing ahead because the user may be typing the - // spacebar to match a word with a space - if (!typeaheadController.isTypingAhead && isOpenKey) { - event.preventDefault(); - this.menuOpen = true; + private readonly _handleColorModeChange = (event: Event) => { + this.mode = (event as CustomEvent).detail; + }; - // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label - switch (event.code) { - case 'Space': - case 'ArrowDown': - case 'Enter': - // We will handle focusing last selected item in this.handleOpening() - this.defaultFocus = FocusState.NONE; - break; - case 'End': - this.defaultFocus = FocusState.LAST_ITEM; - break; - case 'ArrowUp': - case 'Home': - this.defaultFocus = FocusState.FIRST_ITEM; - break; - default: - break; - } - return; - } - - const isPrintableKey = event.key.length === 1; - - // Handles typing ahead when the menu is closed by delegating the event to - // the underlying menu's typeaheadController - if (isPrintableKey) { - typeaheadController.onKeydown(event); - event.preventDefault(); - - const {lastActiveRecord} = typeaheadController; - - if (!lastActiveRecord) { - return; - } - - const labelEl = this.shadowRoot?.querySelector?.('#button span'); - - labelEl?.setAttribute?.('aria-live', 'polite'); - this.mode = lastActiveRecord[1].dataset.mode as ColorMode; - } - } - - /** - * Handles closing the menu when the focus leaves the select's subtree. - * Taken from md-select's implementation. - */ - private _focusout(event: FocusEvent) { - // Don't close the menu if we are switching focus between menu, - // select-option, and field - if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) { - return; - } - - this.menuOpen = false; + private _toggleMode() { + setColorMode(this.mode === 'dark' ? 'light' : 'dark'); } static override styles = css` - :host { - position: relative; - --md-sys-color-primary: var(--sys-color-primary); - --md-sys-color-surface: var(--sys-color-surface); - --md-sys-color-on-surface: var(--sys-color-on-surface); - --md-sys-color-on-surface-variant: var(--sys-color-on-surface-variant); - --md-sys-color-surface-container: var(--sys-color-surface-container); - --md-sys-color-secondary-container: var(--sys-color-primary-container); - --md-sys-color-on-secondary-container: var( - --sys-color-on-primary-container - ); - --md-focus-ring-color: var(--sys-color-secondary); - } - - md-menu-item[selected] { - --md-focus-ring-color: var(--sys-color-secondary-container); - } - - md-menu { - min-width: 0px; + .mode-icon { + display: none; } - #button > span { + :host(:not([mode])) .light-mode, + :host([mode='light']) .light-mode, + :host([mode='dark']) .dark-mode { display: flex; } - [slot='end'], - [slot='start'] { - width: 24px; - height: 24px; - } - - :host([desktop]) { - --md-menu-item-label-text-size: 0.9em; - --md-menu-item-one-line-container-height: 40px; - --md-menu-item-top-space: 8px; - --md-menu-item-bottom-space: 8px; - --md-menu-item-label-text-line-height: 24px; - } - - :host([desktop]) [slot='start'], - :host([desktop]) [slot='end'] { - width: 20px; - height: 20px; - } + @media (prefers-color-scheme: dark) { + :host(:not([mode])) .light-mode { + display: none; + } - [slot='headline'] { - font-family: Manrope, sans-serif; - text-wrap: nowrap; + :host(:not([mode])) .dark-mode { + display: flex; + } } `; } - -if (isServer) { - if (!window) { - window = {} as any; - } - - if (!window.Event) { - (window as any).Event = class {}; - } -} -/** - * Requests the global theme listener change the theme due to a color change. - */ -class ChangeColorModeEvent extends window.Event { - /** - * @param color The new source color to apply. - */ - constructor(public mode: 'light' | 'dark' | 'auto') { - super('change-color-mode', {bubbles: true, composed: true}); - } -} - -declare global { - interface HTMLElementEventMap { - 'change-color-mode': ChangeColorModeEvent; - } -} diff --git a/packages/lit-dev-content/src/global/apply-saved-theme.ts b/packages/lit-dev-content/src/global/apply-saved-theme.ts deleted file mode 100644 index 22929fd83..000000000 --- a/packages/lit-dev-content/src/global/apply-saved-theme.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright The Lit Project - * Copyright 2024 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {updateMetaColor} from './theme.js'; - -// Checks if there has been a theme already set from a prior visit -let lastTheme = localStorage.getItem('color-mode'); - -// Saves the default color mode theme as auto. -if (!lastTheme) { - localStorage.setItem('color-mode', 'auto'); - lastTheme = 'auto'; -} - -// Applies the theme string to the document. -document.body.classList.add(lastTheme); -updateMetaColor(lastTheme as 'light' | 'dark' | 'auto'); diff --git a/packages/lit-dev-content/src/global/apply-session-theme.ts b/packages/lit-dev-content/src/global/apply-session-theme.ts new file mode 100644 index 000000000..2e7b46268 --- /dev/null +++ b/packages/lit-dev-content/src/global/apply-session-theme.ts @@ -0,0 +1,30 @@ +/** + * @license + * Copyright The Lit Project + * SPDX-License-Identifier: Apache-2.0 + */ + +let storedMode: string | null = null; +try { + storedMode = sessionStorage.getItem('color-mode'); +} catch { + // The system color scheme remains the fallback when storage is blocked. +} + +if (storedMode === 'light' || storedMode === 'dark') { + document.body.classList.remove('light', 'dark', 'auto'); + document.body.classList.add(storedMode); + + const meta = document.head.querySelector( + 'meta[name="theme-color"]:not([media])' + ); + meta?.setAttribute('content', storedMode === 'light' ? '#fff' : '#121212'); + + for (const switcher of document.querySelectorAll('theme-switcher')) { + switcher.setAttribute('mode', storedMode); + switcher.shadowRoot + ?.querySelector('litdev-ripple-icon-button') + ?.shadowRoot?.querySelector('button') + ?.setAttribute('aria-pressed', String(storedMode === 'dark')); + } +} diff --git a/packages/lit-dev-content/src/global/initialize-theme.ts b/packages/lit-dev-content/src/global/initialize-theme.ts new file mode 100644 index 000000000..7c54f0921 --- /dev/null +++ b/packages/lit-dev-content/src/global/initialize-theme.ts @@ -0,0 +1,10 @@ +/** + * @license + * Copyright The Lit Project + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {initializeTheme} from './theme.js'; + +initializeTheme(); diff --git a/packages/lit-dev-content/src/global/mobile-drawer.ts b/packages/lit-dev-content/src/global/mobile-drawer.ts index 21595d9b1..6aa209391 100644 --- a/packages/lit-dev-content/src/global/mobile-drawer.ts +++ b/packages/lit-dev-content/src/global/mobile-drawer.ts @@ -5,14 +5,32 @@ * SPDX-License-Identifier: BSD-3-Clause */ +import type {Drawer} from '@material/mwc-drawer'; +import type {LitDevRippleIconButton} from '../components/litdev-ripple-icon-button.js'; + // TODO(aomarks) This is pretty hacky. There is currently a loose coupling // between the mobile menu button and the mobile menu itself (one is defined in // default.html, the other in header.html). They could be one custom element // instead. -document.querySelector('#mobileMenuButton')?.addEventListener('click', () => { - const drawer = document.querySelector('mwc-drawer'); - if (drawer) { +const menuButton = document.querySelector( + '#mobileMenuButton' +) as LitDevRippleIconButton | null; +const drawer = document.querySelector('mwc-drawer') as Drawer | null; + +if (menuButton && drawer) { + const syncExpandedState = () => { + menuButton.expanded = drawer.open ? 'true' : 'false'; + menuButton.buttonTitle = drawer.open + ? 'Close navigation menu' + : 'Open navigation menu'; + }; + + menuButton.addEventListener('click', () => { drawer.open = true; + syncExpandedState(); drawer.dispatchEvent(new Event('opening')); - } -}); + }); + drawer.addEventListener('MDCDrawer:opened', syncExpandedState); + drawer.addEventListener('MDCDrawer:closed', syncExpandedState); + syncExpandedState(); +} diff --git a/packages/lit-dev-content/src/global/theme-worker.ts b/packages/lit-dev-content/src/global/theme-worker.ts new file mode 100644 index 000000000..1246111b6 --- /dev/null +++ b/packages/lit-dev-content/src/global/theme-worker.ts @@ -0,0 +1,81 @@ +/** + * @license + * Copyright The Lit Project + * SPDX-License-Identifier: Apache-2.0 + */ + +type ColorMode = 'light' | 'dark'; + +type ThemeWorkerMessage = + | { + type: 'connect'; + mode: ColorMode; + overridden: boolean; + } + | { + type: 'system-mode' | 'set-mode'; + mode: ColorMode; + }; + +interface SharedWorkerScope { + onconnect: ((event: MessageEvent) => void) | null; +} + +const ports = new Set(); +let mode: ColorMode | undefined; +let overridden = false; + +const isColorMode = (value: unknown): value is ColorMode => + value === 'light' || value === 'dark'; + +const publishMode = () => { + if (!mode) { + return; + } + + for (const port of ports) { + try { + port.postMessage({type: 'mode', mode, overridden}); + } catch { + ports.delete(port); + } + } +}; + +(globalThis as unknown as SharedWorkerScope).onconnect = ({ports: [port]}) => { + if (!port) { + return; + } + + ports.add(port); + port.addEventListener( + 'message', + ({data}: MessageEvent) => { + if (!isColorMode(data?.mode)) { + return; + } + + switch (data.type) { + case 'connect': + if (mode === undefined) { + mode = data.mode; + overridden = data.overridden === true; + } + break; + case 'system-mode': + mode = data.mode; + overridden = false; + break; + case 'set-mode': + mode = data.mode; + overridden = true; + break; + } + + publishMode(); + } + ); + port.start(); +}; + +export {}; diff --git a/packages/lit-dev-content/src/global/theme.ts b/packages/lit-dev-content/src/global/theme.ts index d3392505a..dc36ded06 100644 --- a/packages/lit-dev-content/src/global/theme.ts +++ b/packages/lit-dev-content/src/global/theme.ts @@ -5,37 +5,112 @@ * SPDX-License-Identifier: Apache-2.0 */ -/** Color mode, either overriding light/dark or the user's preference. */ -export type ColorMode = 'light' | 'dark' | 'auto'; +/** The effective color mode rendered by the page. */ +export type ColorMode = 'light' | 'dark'; + +export const COLOR_MODE_CHANGE_EVENT = 'litdev-color-mode-change'; + +interface ThemeState { + mode: ColorMode; + overridden: boolean; + mediaQuery: MediaQueryList; + worker?: SharedWorker; + port?: MessagePort; +} + +interface ThemeWorkerModeMessage { + type: 'mode'; + mode: ColorMode; + overridden: boolean; +} + +const THEME_STATE_KEY = Symbol.for('lit.dev.theme-state'); +const THEME_WORKER_PATH = '/js/global/theme-worker.js'; +const COLOR_MODE_STORAGE_KEY = 'color-mode'; + +const isColorMode = (value: unknown): value is ColorMode => + value === 'light' || value === 'dark'; + +const getThemeState = () => + ( + window as unknown as { + [THEME_STATE_KEY]?: ThemeState; + } + )[THEME_STATE_KEY]; + +const setThemeState = (state: ThemeState) => { + ( + window as unknown as { + [THEME_STATE_KEY]?: ThemeState; + } + )[THEME_STATE_KEY] = state; +}; + +const getStoredColorMode = (): ColorMode | undefined => { + try { + const mode = sessionStorage.getItem(COLOR_MODE_STORAGE_KEY); + return isColorMode(mode) ? mode : undefined; + } catch { + return undefined; + } +}; + +const storeColorMode = (mode: ColorMode | undefined) => { + try { + if (mode) { + sessionStorage.setItem(COLOR_MODE_STORAGE_KEY, mode); + } else { + sessionStorage.removeItem(COLOR_MODE_STORAGE_KEY); + } + } catch { + // Theme switching still works within this document when storage is blocked. + } +}; /** * Sets the theme on the page given a color mode. * * @param mode The source color to generate the theme. - * @param isDark Whether or not the theme should be in dark mode. */ -function applyColorMode(mode: ColorMode) { - saveColorMode(mode); +function applyColorMode( + state: ThemeState, + mode: ColorMode, + overridden: boolean +) { + const modeChanged = state.mode !== mode; + state.mode = mode; + state.overridden = overridden; + storeColorMode(overridden ? mode : undefined); document.body.classList.remove('light', 'dark', 'auto'); document.body.classList.add(mode); + updateMetaColor(mode); + + if (modeChanged) { + window.dispatchEvent( + new CustomEvent(COLOR_MODE_CHANGE_EVENT, {detail: mode}) + ); + } } /** - * Gets the current color mode from localstorage. + * Gets the current effective color mode. * * @return The current color mode. */ export function getCurrentMode(): ColorMode { - return localStorage.getItem('color-mode') as ColorMode; + return typeof window === 'undefined' + ? 'light' + : getThemeState()?.mode ?? getSystemMode(); } /** - * Saves the given color mode to localstorage. - * - * @param mode The color mode to save to localstorage. + * Gets the light or dark mode that the system preference resolves to. */ -function saveColorMode(mode: ColorMode) { - localStorage.setItem('color-mode', mode); +export function getSystemMode(): ColorMode { + return typeof window !== 'undefined' && + window.matchMedia?.('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; } /** @@ -51,16 +126,7 @@ export function updateMetaColor(mode: ColorMode) { return; } - let isLight = mode === 'light'; - - if (mode === 'auto') { - const prefersDark = window.matchMedia( - '(prefers-color-scheme: dark)' - ).matches; - isLight = !prefersDark; - } - - if (isLight) { + if (mode === 'light') { meta?.setAttribute('content', '#fff'); return; } @@ -69,21 +135,84 @@ export function updateMetaColor(mode: ColorMode) { } /** - * Applies theme-based event listeners such as changing color mode. + * Initializes the page theme and connects it to the ephemeral shared state. */ -export function applyColorThemeListeners() { - if (!document?.body?.addEventListener) { +export function initializeTheme() { + if ( + typeof window === 'undefined' || + typeof document === 'undefined' || + !document.body || + getThemeState() + ) { return; } - document.body.addEventListener('change-color-mode', (event) => { - applyColorMode(event.mode); - updateMetaColor(event.mode); + + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const storedMode = getStoredColorMode(); + const state: ThemeState = { + mode: storedMode ?? (mediaQuery.matches ? 'dark' : 'light'), + overridden: storedMode !== undefined, + mediaQuery, + }; + setThemeState(state); + applyColorMode(state, state.mode, state.overridden); + + mediaQuery.addEventListener('change', ({matches}) => { + const mode = matches ? 'dark' : 'light'; + applyColorMode(state, mode, false); + state.port?.postMessage({type: 'system-mode', mode}); }); - window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', (event) => { - if (getCurrentMode() === 'auto') { - updateMetaColor(event.matches ? 'dark' : 'light'); + + if (!('SharedWorker' in window)) { + return; + } + + try { + const worker = new SharedWorker(THEME_WORKER_PATH, { + name: 'lit-dev-theme', + type: 'module', + }); + const {port} = worker; + state.worker = worker; + state.port = port; + + worker.addEventListener('error', () => { + if (state.worker === worker) { + state.worker = undefined; + state.port = undefined; + } + }); + + port.addEventListener('message', ({data}: MessageEvent) => { + const message = data as Partial; + if (message.type !== 'mode' || !isColorMode(message.mode)) { + return; } + + applyColorMode(state, message.mode, message.overridden === true); + }); + port.start(); + port.postMessage({ + type: 'connect', + mode: state.mode, + overridden: state.overridden, }); + } catch { + state.worker = undefined; + state.port = undefined; + } +} + +/** + * Sets an explicit mode for the lifetime of the current group of open tabs. + */ +export function setColorMode(mode: ColorMode) { + initializeTheme(); + const state = getThemeState(); + if (!state) { + return; + } + + applyColorMode(state, mode, true); + state.port?.postMessage({type: 'set-mode', mode}); } diff --git a/packages/lit-dev-content/src/icons/auto-mode-icon.ts b/packages/lit-dev-content/src/icons/auto-mode-icon.ts deleted file mode 100644 index 2bbfbb5df..000000000 --- a/packages/lit-dev-content/src/icons/auto-mode-icon.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright The Lit Project - * Copyright 2024 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ - -import {html, nothing} from 'lit'; - -// Source: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:routine:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=routine -export const autoModeIcon = (slot = '') => html` - -`; diff --git a/packages/lit-dev-content/src/icons/check-icon.ts b/packages/lit-dev-content/src/icons/check-icon.ts deleted file mode 100644 index 6c5054bf2..000000000 --- a/packages/lit-dev-content/src/icons/check-icon.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright The Lit Project - * Copyright 2024 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ - -import {html, nothing} from 'lit'; - -// Source: https://fonts.google.com/icons?selected=Material+Icons+Outlined:check_circle -export const checkIcon = (slot = '') => html` - -`; diff --git a/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-dark-darwin.png b/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-dark-darwin.png index 0032e47eb..f0b7c2020 100644 Binary files a/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-darwin.png b/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-darwin.png index 4ba2f986f..df7ac0b5f 100644 Binary files a/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-darwin.png and b/packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-dark-darwin.png b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-dark-darwin.png index d5e294319..a183f810f 100644 Binary files a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-darwin.png b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-darwin.png index 1702dbf4b..4368ae8dd 100644 Binary files a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-darwin.png and b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-dark-darwin.png b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-dark-darwin.png index 1a96ecc67..efbf97ea6 100644 Binary files a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-darwin.png b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-darwin.png index 5c07d7f3f..e9e4a7467 100644 Binary files a/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-darwin.png and b/packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/home.spec.ts b/packages/lit-dev-tests/src/playwright/home.spec.ts index 9c50efc34..2190e4514 100644 --- a/packages/lit-dev-tests/src/playwright/home.spec.ts +++ b/packages/lit-dev-tests/src/playwright/home.spec.ts @@ -39,6 +39,169 @@ test.describe('Home page', () => { expect(await homePageImg.getAttribute('aria-label')).toBe('Lit'); }); + test('mobile navigation button exposes disclosure state', async ({page}) => { + await preventGDPRBanner(page); + await page.setViewportSize({width: 500, height: 800}); + await page.goto('/'); + + const button = page.locator( + '#mobileMenuButton button[aria-label="Navigation menu"]' + ); + await expect(button).toHaveAttribute('aria-expanded', 'false'); + await expect(button).toHaveAttribute('aria-controls', 'mobileDrawer'); + + await button.click(); + await expect(button).toHaveAttribute('aria-expanded', 'true'); + await expect(page.locator('#mobileDrawer')).toHaveAttribute('open', ''); + await expect( + page.locator('#mobileDrawer aside.mdc-drawer--modal') + ).toHaveClass(/mdc-drawer--open/); + + await page.locator('#mobileDrawer').evaluate((drawer) => { + (drawer as HTMLElement & {open: boolean}).open = false; + drawer.dispatchEvent(new Event('MDCDrawer:closed')); + }); + await expect(button).toHaveAttribute('aria-expanded', 'false'); + }); + + test('server-rendered theme icon follows the system', async ({browser}) => { + const context = await browser.newContext({ + colorScheme: 'dark', + javaScriptEnabled: false, + }); + const page = await context.newPage(); + await page.goto('/'); + + const switcher = page.locator('#desktopNav theme-switcher'); + await expect(switcher.locator('.mode-icon')).toHaveCount(2); + await expect(switcher.locator('.light-mode')).toBeHidden(); + await expect(switcher.locator('.dark-mode')).toBeVisible(); + + await context.close(); + }); + + test('stored theme icon is applied before hydration', async ({page}) => { + await page.emulateMedia({colorScheme: 'light'}); + await page.addInitScript(() => { + sessionStorage.setItem('color-mode', 'dark'); + }); + await page.route('**/js/theme-switcher.js', (route) => route.abort()); + await page.goto('/'); + + const switcher = page.locator('#desktopNav theme-switcher'); + await expect(switcher).toHaveAttribute('mode', 'dark'); + await expect(switcher.locator('.light-mode')).toBeHidden(); + await expect(switcher.locator('.dark-mode')).toBeVisible(); + await expect( + switcher.locator('button[aria-label="Dark mode"]') + ).toHaveAttribute('aria-pressed', 'true'); + }); + + test('theme follows the system and syncs across tabs', async ({ + context, + page, + }) => { + await page.emulateMedia({colorScheme: 'dark'}); + await page.goto('/'); + + const firstBody = page.locator('body'); + const firstToggle = page.locator( + '#desktopNav theme-switcher button[aria-label="Dark mode"]' + ); + + await expect(firstBody).toHaveClass(/\bdark\b/); + await expect(firstToggle).toHaveAttribute('type', 'button'); + await expect(firstToggle).toHaveAttribute('aria-pressed', 'true'); + expect(await firstToggle.getAttribute('aria-expanded')).toBe(null); + expect(await firstToggle.getAttribute('aria-haspopup')).toBe(null); + + await firstToggle.press('Space'); + await expect(firstBody).toHaveClass(/\blight\b/); + await expect(firstToggle).toHaveAttribute('aria-pressed', 'false'); + await expect(firstToggle).toHaveAttribute('aria-label', 'Dark mode'); + expect( + await page.evaluate(() => sessionStorage.getItem('color-mode')) + ).toBe('light'); + + await page.goto('/docs/'); + await expect(firstBody).toHaveClass(/\blight\b/); + await expect(firstToggle).toHaveAttribute('aria-pressed', 'false'); + expect( + await page.evaluate(() => sessionStorage.getItem('color-mode')) + ).toBe('light'); + + const secondPage = await context.newPage(); + await secondPage.emulateMedia({colorScheme: 'dark'}); + await secondPage.goto('/'); + + const secondBody = secondPage.locator('body'); + const secondToggle = secondPage.locator( + '#desktopNav theme-switcher button[aria-label="Dark mode"]' + ); + + await expect(secondBody).toHaveClass(/\blight\b/); + await expect(secondToggle).toHaveAttribute('aria-pressed', 'false'); + + await secondPage.evaluate(() => { + const testWindow = window as typeof window & { + themeMediaChangeCount: number; + themeMediaQuery: MediaQueryList; + }; + testWindow.themeMediaChangeCount = 0; + testWindow.themeMediaQuery = matchMedia('(prefers-color-scheme: dark)'); + testWindow.themeMediaQuery.addEventListener('change', () => { + testWindow.themeMediaChangeCount++; + }); + }); + const waitForMediaChangeCount = async (expected: number) => { + let actual = 0; + for (let attempt = 0; attempt < 50; attempt++) { + actual = await secondPage.evaluate( + () => + ( + window as typeof window & { + themeMediaChangeCount?: number; + } + ).themeMediaChangeCount ?? 0 + ); + if (actual === expected) { + return; + } + await new Promise((resolve) => setTimeout(resolve, 20)); + } + expect(actual).toBe(expected); + }; + await secondPage.emulateMedia({colorScheme: 'light'}); + await waitForMediaChangeCount(1); + await secondPage.emulateMedia({colorScheme: 'dark'}); + await waitForMediaChangeCount(2); + await expect(firstBody).toHaveClass(/\bdark\b/); + await expect(secondBody).toHaveClass(/\bdark\b/); + expect( + await secondPage.evaluate(() => sessionStorage.getItem('color-mode')) + ).toBe(null); + + await secondToggle.click(); + await expect(firstBody).toHaveClass(/\blight\b/); + await expect(secondBody).toHaveClass(/\blight\b/); + + await secondPage.close(); + await page.close(); + + const resetPage = await context.newPage(); + await resetPage.emulateMedia({colorScheme: 'dark'}); + await resetPage.goto('/'); + await expect(resetPage.locator('body')).toHaveClass(/\bdark\b/); + expect( + await resetPage.evaluate(() => sessionStorage.getItem('color-mode')) + ).toBe(null); + await expect( + resetPage.locator( + '#desktopNav theme-switcher button[aria-label="Dark mode"]' + ) + ).toHaveAttribute('aria-pressed', 'true'); + }); + test('search site input basic functionality works', async ({page}) => { await page.goto('/'); const searchButton = page.locator( diff --git a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-dark-darwin.png b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-dark-darwin.png index 92f4d767b..67226e252 100644 Binary files a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png index cb7b524a7..8b120d03f 100644 Binary files a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png and b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-dark-darwin.png index b4b045c53..b03e9e256 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-darwin.png index 6d1a89170..83a6f207f 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-dark-darwin.png index 3b305b73d..ca91da0b0 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-darwin.png index 47ca82980..571d520c6 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-dark-darwin.png index 8e90836d6..b435c2522 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-darwin.png index 4cd660bf4..e8a0a3f9e 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-dark-darwin.png index c2bccb5fa..3681c9b82 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-darwin.png index 2146a843d..60ee5878d 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-dark-darwin.png index f46785ec1..2cca35384 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-darwin.png index 014d082ac..8d10d1281 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-dark-darwin.png index bceaa0116..629d786fa 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-darwin.png index 5f30de4f0..9856ec810 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-dark-darwin.png index a8508fd2d..2434aba27 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-darwin.png index 0beab6cb5..59ba422d7 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-dark-darwin.png index dff8e6faa..eacddc7c3 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-darwin.png index fd85e476c..1b3d228ac 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-dark-darwin.png index 87c486575..255041cf0 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-darwin.png index 17044e350..1f2f94470 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-dark-darwin.png index ebb94d2a4..d69adb4ec 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-darwin.png index 7a9f0996d..0c3c73d2d 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-dark-darwin.png index 77f4e14e2..198a93686 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-darwin.png index a7545800c..089c98079 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-dark-darwin.png index f5b8dae95..95cb3fb50 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-darwin.png index 1e08554b7..5d3b848e8 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-dark-darwin.png index faca37182..13a3c5c94 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-darwin.png index e5917a15a..943dba205 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-dark-darwin.png index 40b50a7eb..cf4a26cfc 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-darwin.png index 091502d44..881941874 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-dark-darwin.png index 237286872..c07e30a93 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-darwin.png index d65c53dfb..cf223dfe6 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-dark-darwin.png index 99e613c34..e2e959fa0 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-darwin.png index 8e1ba0c38..8fa29499d 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-dark-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-dark-darwin.png index 181e2b2d3..4b7c9f3a8 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-darwin.png b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-darwin.png index 29a28ad95..00dba335b 100644 Binary files a/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-darwin.png and b/packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.ts b/packages/lit-dev-tests/src/playwright/playground.spec.ts index 24fe03fc7..57d72cfa3 100644 --- a/packages/lit-dev-tests/src/playwright/playground.spec.ts +++ b/packages/lit-dev-tests/src/playwright/playground.spec.ts @@ -357,6 +357,33 @@ function runScreenshotTests(dark: boolean) { } test.describe('Playground', () => { + test('view and examples drawer controls expose their semantics', async ({ + page, + }) => { + await preventGDPRBanner(page); + await page.goto('/playground/'); + + const viewButton = page.locator('#view-mode-button button'); + await expect(viewButton).toHaveAttribute('aria-label', 'Show preview only'); + expect(await viewButton.getAttribute('aria-pressed')).toBe(null); + + await viewButton.click(); + await expect(viewButton).toHaveAttribute('aria-label', 'Show code only'); + await viewButton.click(); + await expect(viewButton).toHaveAttribute('aria-label', 'Show split view'); + + const drawerButton = page.locator( + 'litdev-drawer #openCloseButton button[aria-label="Examples drawer"]' + ); + await expect(drawerButton).toHaveAttribute('aria-expanded', 'true'); + await expect(drawerButton).toHaveAttribute('aria-controls', 'content'); + + await drawerButton.click(); + await expect(drawerButton).toHaveAttribute('aria-expanded', 'false'); + await drawerButton.click(); + await expect(drawerButton).toHaveAttribute('aria-expanded', 'true'); + }); + test.beforeEach(async ({browser}) => { const browserPage = await browser.newPage(); await browserPage.goto('http://localhost:6417/reset'); diff --git a/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-dark-darwin.png b/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-dark-darwin.png index c340771e4..98167274d 100644 Binary files a/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-dark-darwin.png and b/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-dark-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-darwin.png b/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-darwin.png index 23c45eb5e..181922407 100644 Binary files a/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-darwin.png and b/packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-darwin.png differ diff --git a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts index c8d518580..bb05635ed 100644 --- a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts +++ b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts @@ -12,6 +12,38 @@ import { waitForTheme, } from './util.js'; +test('tutorial navigation uses correctly named native controls', async ({ + page, +}) => { + await preventGDPRBanner(page); + await page.goto('/tutorials/intro-to-lit'); + + const catalogLink = page.locator( + 'litdev-tutorial litdev-ripple-icon-button a[aria-label="Tutorial Catalog"]' + ); + await expect(catalogLink).toHaveAttribute('href', '/tutorials/'); + await expect(page.locator('litdev-tutorial a button')).toHaveCount(0); + + const catalogButton = page.locator( + 'litdev-tutorial litdev-ripple-icon-button:has(a[aria-label="Tutorial Catalog"])' + ); + await catalogButton.evaluate( + (button: HTMLElement & {disabled: boolean}) => (button.disabled = true) + ); + await expect(catalogLink).not.toHaveAttribute('href', /.+/); + await expect(catalogLink).toHaveAttribute('aria-disabled', 'true'); + await expect(catalogLink).toHaveAttribute('tabindex', '-1'); + + await expect( + page.locator( + 'litdev-tutorial #prevButton button[aria-label="Previous step"]' + ) + ).toBeDisabled(); + await expect( + page.locator('litdev-tutorial #nextButton button[aria-label="Next step"]') + ).toBeEnabled(); +}); + function runScreenshotTests(dark: boolean) { test.describe('Tutorial page', () => { test(`intro first step${dark ? ' - dark' : ''}`, async ({browser}) => {