test: add dedicated VRT stories for components and patterns

2nd-gen/packages/swc/.storybook/helpers/index.ts

@@ -19,6 +19,7 @@ export type { ForcedPseudoState } from './pseudo-state.js';
 export {
   coveredCustomProperties,
   customPropertyRows,
+  forceManualPopover,
   forcedColorsVrtParameters,
   forcePseudoStates,
   FORCED_STATES,

2nd-gen/packages/swc/.storybook/helpers/vrt.ts

@@ -60,6 +60,52 @@ export const forcePseudoStates =
     });
   };
 
+/**
+ * Forces a group of native `popover="auto"` elements (Tooltip, default-mode
+ * Popover) to render simultaneously open in a single VRT snapshot.
+ *
+ * `popover="auto"` elements share one top-layer dismissal group: opening one
+ * that is not a DOM/anchor descendant of another open auto popover
+ * light-dismisses that other popover, and these components' own `toggle`
+ * listeners sync `open` back to `false` to match. A VRT story that renders
+ * several open instances side by side (every Tooltip placement, every
+ * Popover variant) would therefore only ever show the *last* instance
+ * connected as actually open — every earlier instance silently closes itself
+ * during initial render, well before Chromatic snapshots it.
+ *
+ * `popover="manual"` has no such cross-instance dismissal. This play function
+ * switches each instance to manual mode after render, then re-toggles its
+ * `open` property (through the component's own public API, not the native
+ * Popover API directly) so the component's real open/close lifecycle
+ * — placement, ARIA wiring, `showPopover()` — runs again under the new,
+ * non-dismissing mode. This is a VRT-only workaround: production usage
+ * should keep the default `auto` mode and its native light-dismiss behavior.
+ *
+ * @param selector - selects the host elements whose `open` property should
+ * be re-toggled.
+ * @param resolvePopoverElement - resolves the element that actually carries
+ * the `popover` attribute for a given host. Defaults to the host itself
+ * (e.g. Tooltip, which sets `popover` on its own host). Pass an override for
+ * components whose popover lives on an internal shadow element instead (e.g.
+ * Popover's default-mode `.swc-Popover` shadow child).
+ */
+export const forceManualPopover =
+  (
+    selector: string,
+    resolvePopoverElement: (host: Element) => Element | null = (host) => host
+  ) =>
+  async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    canvasElement
+      .querySelectorAll<HTMLElement & { open?: boolean }>(selector)
+      .forEach((host) => {
+        resolvePopoverElement(host)?.setAttribute('popover', 'manual');
+        if (typeof host.open === 'boolean') {
+          host.open = false;
+          host.open = true;
+        }
+      });
+  };
+
 export const vrtParameters = {
   styles: {
     display: 'flex',

2nd-gen/packages/swc/components/accordion/test/vrt/accordion-custom-properties.vrt.ts

@@ -0,0 +1,141 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { html } from 'lit';
+import type { Meta, StoryObj as Story } from '@storybook/web-components';
+
+import '@adobe/spectrum-wc/components/accordion/swc-accordion.js';
+import '@adobe/spectrum-wc/components/accordion/swc-accordion-item.js';
+
+import type { CustomPropertyCase } from '../../../../.storybook/helpers/index.js';
+import {
+  coveredCustomProperties,
+  customPropertyRows,
+  forcePseudoStates,
+  theme,
+  verifyCustomPropertyCoverage,
+  vrtParameters,
+} from '../../../../.storybook/helpers/index.js';
+import customElementsManifest from '../../../../dist/custom-elements.json';
+
+const meta: Meta = {
+  title: 'Accordion/Accordion VRT',
+  component: 'swc-accordion',
+  tags: ['dev'],
+};
+
+export default meta;
+
+type AccordionItemCustomPropertyCase =
+  CustomPropertyCase<`--swc-accordion-item-${string}`> & {
+    state?: 'focus-visible';
+  };
+
+const ACCORDION_PROPERTY_CASES: readonly CustomPropertyCase<`--swc-accordion-${string}`>[] =
+  [{ property: '--swc-accordion-min-inline-size', value: '520px' }];
+
+const ITEM_PROPERTY_CASES: readonly AccordionItemCustomPropertyCase[] = [
+  {
+    property: '--swc-accordion-item-focus-indicator-corner-radius',
+    value: '0px',
+    state: 'focus-visible',
+  },
+  { property: '--swc-accordion-item-header-corner-radius', value: '0px' },
+  { property: '--swc-accordion-item-padding-top', value: '24px' },
+  { property: '--swc-accordion-item-padding-bottom', value: '24px' },
+  { property: '--swc-accordion-item-disclosure-indicator-gap', value: '32px' },
+  { property: '--swc-accordion-item-edge-to-content-area', value: '32px' },
+  { property: '--swc-accordion-item-header-font-size', value: '24px' },
+  { property: '--swc-accordion-item-content-padding-inline', value: '48px' },
+  { property: '--swc-accordion-item-divider-color', value: 'magenta' },
+];
+
+const forceAccordionItemStates = forcePseudoStates(
+  'swc-accordion-item',
+  'button'
+);
+
+const accordionExample = (style?: string) => html`
+  <swc-accordion style=${style ?? ''}>
+    <swc-accordion-item open>
+      <span slot="label">Personal information</span>
+      <p>Manage contact details.</p>
+    </swc-accordion-item>
+    <swc-accordion-item>
+      <span slot="label">Billing address</span>
+      <p>Used for payment verification.</p>
+    </swc-accordion-item>
+  </swc-accordion>
+`;
+
+const accordionItemExample = (
+  { state }: AccordionItemCustomPropertyCase,
+  style?: string
+) => html`
+  <div style=${style ?? ''}>
+    <swc-accordion>
+      <swc-accordion-item open data-force-state=${state ?? ''}>
+        <span slot="label">Personal information</span>
+        <p>Manage contact details.</p>
+      </swc-accordion-item>
+    </swc-accordion>
+  </div>
+`;
+
+const coveredAccordionProperties = coveredCustomProperties(
+  ACCORDION_PROPERTY_CASES
+);
+const coveredItemProperties = coveredCustomProperties(ITEM_PROPERTY_CASES);
+
+const verifyAccordionCoverage = async () =>
+  verifyCustomPropertyCoverage({
+    customElementsManifest,
+    modulePath: 'components/accordion/Accordion.ts',
+    declarationName: 'Accordion',
+    coveredProperties: coveredAccordionProperties,
+  });
+
+const forceStatesAndVerifyItemCoverage = async (
+  context: Parameters<ReturnType<typeof forcePseudoStates>>[0]
+) => {
+  await forceAccordionItemStates(context);
+  await verifyCustomPropertyCoverage({
+    customElementsManifest,
+    modulePath: 'components/accordion/AccordionItem.ts',
+    declarationName: 'AccordionItem',
+    coveredProperties: coveredItemProperties,
+  });
+};
+
+export const AccordionCustomProperties: Story = {
+  render: () =>
+    theme(
+      customPropertyRows(ACCORDION_PROPERTY_CASES, (_, style) =>
+        accordionExample(style)
+      ),
+      'light',
+      'ltr'
+    ),
+  parameters: vrtParameters,
+  play: verifyAccordionCoverage,
+};
+
+export const AccordionItemCustomProperties: Story = {
+  render: () =>
+    theme(
+      customPropertyRows(ITEM_PROPERTY_CASES, accordionItemExample),
+      'light',
+      'ltr'
+    ),
+  parameters: vrtParameters,
+  play: forceStatesAndVerifyItemCoverage,
+};

2nd-gen/packages/swc/components/accordion/test/vrt/accordion.vrt.ts

@@ -0,0 +1,119 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { html, nothing } from 'lit';
+import type { Meta, StoryObj as Story } from '@storybook/web-components';
+
+import {
+  ACCORDION_DENSITIES,
+  ACCORDION_VALID_SIZES,
+} from '@adobe/spectrum-wc-core/components/accordion';
+
+import '@adobe/spectrum-wc/components/accordion/swc-accordion.js';
+import '@adobe/spectrum-wc/components/accordion/swc-accordion-item.js';
+import '@adobe/spectrum-wc/components/button/swc-button.js';
+
+import {
+  forcedColorsVrtParameters,
+  forcePseudoStates,
+  row,
+  theme,
+  vrtParameters,
+} from '../../../../.storybook/helpers/index.js';
+
+const meta: Meta = {
+  title: 'Accordion/Accordion VRT',
+  component: 'swc-accordion',
+  tags: ['dev'],
+};
+
+export default meta;
+
+const forceAccordionItemStates = forcePseudoStates(
+  'swc-accordion-item',
+  'button'
+);
+
+const accordion = ({
+  size,
+  density = 'regular',
+  quiet = false,
+  disabled = false,
+  cjk = false,
+  state,
+}: {
+  size?: (typeof ACCORDION_VALID_SIZES)[number];
+  density?: (typeof ACCORDION_DENSITIES)[number];
+  quiet?: boolean;
+  disabled?: boolean;
+  cjk?: boolean;
+  state?: string;
+} = {}) => html`
+  <swc-accordion
+    size=${size ?? nothing}
+    density=${density}
+    ?quiet=${quiet}
+    ?disabled=${disabled}
+    allow-multiple
+  >
+    <swc-accordion-item open data-force-state=${state ?? nothing}>
+      <span slot="label">${cjk ? '個人情報' : 'Personal information'}</span>
+      <p>${cjk ? '名前と連絡先を管理します。' : 'Manage contact details.'}</p>
+    </swc-accordion-item>
+    <swc-accordion-item>
+      <span slot="label">${cjk ? '請求先住所' : 'Billing address'}</span>
+      <swc-button slot="actions" size="s" variant="secondary">Edit</swc-button>
+      <p>
+        ${cjk
+          ? '支払い方法の確認に使用します。'
+          : 'Used for payment verification.'}
+      </p>
+    </swc-accordion-item>
+    <swc-accordion-item disabled>
+      <span slot="label">${cjk ? '支払い方法' : 'Payment method'}</span>
+      <p>
+        ${cjk ? '管理者に連絡してください。' : 'Contact your administrator.'}
+      </p>
+    </swc-accordion-item>
+  </swc-accordion>
+`;
+
+const accordionContent = () => html`
+  ${row(
+    ACCORDION_VALID_SIZES.map((size) => accordion({ size })),
+    'Sizes'
+  )}
+  ${row(
+    ACCORDION_DENSITIES.map((density) => accordion({ density })),
+    'Densities'
+  )}
+  ${row([accordion({ quiet: true })], 'Quiet')}
+  ${row([accordion({ disabled: true })], 'Disabled')}
+  ${row([accordion({ state: 'hover' })], 'Hover')}
+  ${row([accordion({ state: 'focus-visible' })], 'Focus visible')}
+  ${row([accordion({ cjk: true })], 'CJK language')}
+`;
+
+export const Permutations: Story = {
+  render: () => html`
+    ${theme(accordionContent(), 'light', 'ltr')}
+    ${theme(accordionContent(), 'dark', 'rtl')}
+  `,
+  parameters: vrtParameters,
+  play: forceAccordionItemStates,
+};
+
+export const ForcedColors: Story = {
+  render: () => theme(accordionContent(), 'light', 'ltr'),
+  parameters: forcedColorsVrtParameters,
+  play: forceAccordionItemStates,
+};