diff --git a/.ai/rules/code-conformance.md b/.ai/rules/code-conformance.md
index 555d57e117f..0f2e58f904f 100644
--- a/.ai/rules/code-conformance.md
+++ b/.ai/rules/code-conformance.md
@@ -70,6 +70,7 @@ Reference: [Linting tools](../../CONTRIBUTOR-DOCS/02_style-guide/03_linting-tool
 - Forced-colors media query is present and correct (if applicable)
 - High-contrast and other media queries are sorted to the bottom of the file
 - No hard-coded values where design tokens are available
+- Every class selector in CSS files (`.swc-*`) has a matching `class="..."` in the component's `render()` method; orphaned selectors mean styles are silently dead. Cross-check both directions: CSS → template and template → CSS. Use `grep -oE '\.[a-z][a-zA-Z-]+'` on the CSS and `grep -oE 'class="[^"]*"'` on the TypeScript to produce lists to compare.
 
 ## Test files
 
diff --git a/.ai/skills/migration-styling/SKILL.md b/.ai/skills/migration-styling/SKILL.md
index 8d2f1ea906d..0ad008cd233 100644
--- a/.ai/skills/migration-styling/SKILL.md
+++ b/.ai/skills/migration-styling/SKILL.md
@@ -66,4 +66,6 @@ Common case: confirming that subcomponent class names follow the single-hyphen s
 
 If a rename is needed, make the template change first, confirm the component still renders correctly in Storybook, then write the CSS.
 
+**Step 3b — Audit `:host` for visual styles.** After aligning class names, scan every declaration you plan to put on `:host` against Rule 1 of the tldr. Ask for each property: is this layout-participation (how the host fits into its parent's flow) or visual (how the component looks)? If a visual style has no internal wrapper to move it to, add one to `render()` before writing CSS.
+
 **Step 4 — Execute the phase.** Follow **[Phase 5: Styling](../../../CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/02_step-by-step/01_washing-machine-workflow.md#phase-5-styling)** in the washing machine workflow doc — it covers what to do, what to check, common problems, and the quality gate for this phase.
diff --git a/.ai/skills/migration-styling/references/tldr-component-css-guidelines.md b/.ai/skills/migration-styling/references/tldr-component-css-guidelines.md
index 2d3f2a33365..e36a5c4ebb8 100644
--- a/.ai/skills/migration-styling/references/tldr-component-css-guidelines.md
+++ b/.ai/skills/migration-styling/references/tldr-component-css-guidelines.md
@@ -72,7 +72,19 @@
 
 ### 1. `:host` vs Component Class
 
-Put only layout-participation styles on `:host`. Put actual visuals on `.swcComponentName` or internal parts.
+Put only layout-participation styles on `:host`. Put actual visuals on `.swc-ComponentName` or internal parts.
+
+Put layout-participation styles on `:host` (`display`, `inline-size`, `min-*`/`max-*`, `position`, custom property definitions). Put visual styles on `.swc-ComponentName` or an internal part.
+
+Two non-obvious cases to flag explicitly:
+
+- **`padding` on `:host`** — feels like layout but is visual spacing; move it to the internal class.
+- **`cursor: pointer`** — do not set it anywhere; the project relies on browser defaults.
+
+Also check that `display: flex` or `display: grid` on `:host` is actually laying out **direct children of `:host`**, not internal children already wrapped inside a container element. Flex/grid properties (`flex: 1 1 auto`, `align-self`) only activate when their **immediate parent** is the flex/grid container — if the element is inside a wrapper div, the flex context must be on that wrapper, not on `:host`.
+
+**`:host:has()` is unreliable across browsers.** Safari and Firefox do not consistently support `:has()` relative to a shadow host boundary. Move all `:has()` selectors to the internal wrapper: `.swc-Component:has(...)` instead of `:host:has(...)`. Custom properties cascade identically either way. See [01_component-css#state-implementation-patterns](../../../../CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md#state-implementation-patterns).
+
 → See [01_component-css](../../../../CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md)
 
 ### 2. Stylesheet Order
@@ -124,4 +136,7 @@ Keep selector specificity at or below `(0,1,0)`. If you need a compounded select
 ### 7. Forced colors
 
 Only add `@media (forced-colors: active)` if browser defaults are not conveying correct semantic intent, and always put it at the end of the component stylesheet.
+
+Semantic HTML elements (`<button>`, `<input>`, `<a>`) get correct forced-colors treatment automatically — `ButtonText`, focus `Highlight`, disabled `GrayText` — without any CSS override. Only non-semantic elements (a decorative `<div>` or a `<span>` using `background-color` as a visual indicator) need explicit overrides. Do not carry over forced-colors rules from 1st-gen Spectrum CSS without first verifying the 2nd-gen component uses non-semantic markup that requires them.
+
 → See [01_component-css#forced-colors-requirements](../../../../CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md#forced-colors-requirements)
diff --git a/1st-gen/tools/base/src/version.ts b/1st-gen/tools/base/src/version.ts
index 7bd6d0e773a..f918df20145 100644
--- a/1st-gen/tools/base/src/version.ts
+++ b/1st-gen/tools/base/src/version.ts
@@ -17,7 +17,7 @@
 /**
  * The version of the 1st-gen Spectrum Web Components library.
  */
-export const version = '1.12.0';
+export const version = '1.12.1';
 
 /**
  * The version of the core base package.
diff --git a/2nd-gen/packages/swc/components/accordion/AccordionItem.ts b/2nd-gen/packages/swc/components/accordion/AccordionItem.ts
index 2979fe29ef6..60e7880d3b0 100644
--- a/2nd-gen/packages/swc/components/accordion/AccordionItem.ts
+++ b/2nd-gen/packages/swc/components/accordion/AccordionItem.ts
@@ -24,7 +24,7 @@ import { Chevron100Icon } from '../icon/elements/Chevron100Icon.js';
 import { Chevron200Icon } from '../icon/elements/Chevron200Icon.js';
 import { Chevron300Icon } from '../icon/elements/Chevron300Icon.js';
 
-import styles from './accordion.css';
+import styles from './accordion-item.css';
 
 /**
  * An accordion item component that wraps a single expandable content section.
@@ -124,15 +124,17 @@ export class AccordionItem extends AccordionItemBase {
     `;
     return html`
       <div class="swc-AccordionItem">
-        ${this.renderHeadingWrapper(button)}
-        ${when(
-          this.slotContentIsPresent,
-          () => html`
-            <div class="swc-AccordionItem-actions">
-              <slot name="actions"></slot>
-            </div>
-          `
-        )}
+        <div class="swc-AccordionItem-row">
+          ${this.renderHeadingWrapper(button)}
+          ${when(
+            this.slotContentIsPresent,
+            () => html`
+              <div class="swc-AccordionItem-actions">
+                <slot name="actions"></slot>
+              </div>
+            `
+          )}
+        </div>
         <div
           id="content"
           class="swc-AccordionItem-content"
diff --git a/2nd-gen/packages/swc/components/accordion/accordion-item.css b/2nd-gen/packages/swc/components/accordion/accordion-item.css
new file mode 100644
index 00000000000..c22564dd6cc
--- /dev/null
+++ b/2nd-gen/packages/swc/components/accordion/accordion-item.css
@@ -0,0 +1,243 @@
+/**
+ * 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.
+ */
+
+:host {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-medium");
+  --_swc-accordion-header-bg: transparent;
+  --_swc-accordion-header-text-color: token("neutral-content-color-default");
+
+  display: block;
+  inline-size: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* ── Item wrapper ───────────────────────────────────────────────────── */
+
+.swc-AccordionItem {
+  inline-size: 100%;
+  border-block-end: token("border-width-100") solid var(--swc-accordion-item-divider-color, var(--_swc-accordion-item-border-color, token("gray-200")));
+}
+
+:host(:first-child) .swc-AccordionItem {
+  border-block-start: token("border-width-100") solid var(--swc-accordion-item-divider-color, var(--_swc-accordion-item-border-color, token("gray-200")));
+}
+
+/* ── Header row (heading + actions) ─────────────────────────────────── */
+
+.swc-AccordionItem-row {
+  display: flex;
+  align-items: center;
+}
+
+/* ── Heading reset (h2–h6 wrapping the button) ──────────────────────── */
+
+:is(h2, h3, h4, h5, h6) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+}
+
+/* ── Header button ──────────────────────────────────────────────────── */
+
+.swc-AccordionItem-header {
+  display: flex;
+  gap: token("accordion-disclosure-indicator-to-text-medium");
+  align-items: center;
+  inline-size: 100%;
+  padding-block: var(--_swc-accordion-pad-top-m, token("accordion-top-to-text-medium")) var(--_swc-accordion-pad-bottom-m, token("accordion-bottom-to-text-medium"));
+  padding-inline: token("accordion-edge-to-content-area-medium") token("accordion-edge-to-text");
+  font-family: inherit;
+  font-size: token("font-size-200");
+  font-weight: token("bold-font-weight");
+  line-height: token("line-height-100");
+  color: var(--_swc-accordion-header-text-color);
+  text-align: start;
+  background-color: var(--_swc-accordion-header-bg);
+  border: 0;
+  border-radius: var(--_swc-accordion-header-corner-radius, 0);
+  appearance: none;
+}
+
+/* The container sets the color tokens so they cascade into .swc-AccordionItem-header; the
+   outline and border-radius stay on the button so the focus ring matches
+   the hover footprint (toggle area only, independent of the actions slot). */
+.swc-AccordionItem:has(.swc-AccordionItem-header:focus-visible) {
+  --_swc-accordion-header-bg: token("transparent-black-100");
+  --_swc-accordion-header-text-color: token("neutral-content-color-key-focus");
+}
+
+.swc-AccordionItem-header:focus-visible {
+  border-radius: var(--_swc-accordion-corner-radius, token("corner-radius-medium-size-medium"));
+  outline: token("focus-indicator-thickness") solid token("focus-indicator-color");
+  outline-offset: calc(token("accordion-focus-indicator-gap") * -1);
+}
+
+@media (hover: hover) {
+  .swc-AccordionItem:has(.swc-AccordionItem-header:hover) {
+    --_swc-accordion-header-bg: token("transparent-black-100");
+    --_swc-accordion-header-text-color: token("neutral-content-color-hover");
+  }
+}
+
+.swc-AccordionItem:has(.swc-AccordionItem-header:active) {
+  --_swc-accordion-header-bg: token("transparent-black-300");
+  --_swc-accordion-header-text-color: token("neutral-content-color-down");
+}
+
+.swc-AccordionItem:has(.swc-AccordionItem-header[aria-disabled="true"]),
+.swc-AccordionItem:has(.swc-AccordionItem-header[aria-disabled="true"]:hover) {
+  --_swc-accordion-header-bg: transparent;
+  --_swc-accordion-header-text-color: token("disabled-content-color");
+}
+
+/* ── Disclosure indicator (chevron) ─────────────────────────────────── */
+
+/* Default size (m): Chevron100 */
+.swc-AccordionItem-indicator {
+  --swc-icon-inline-size: token("chevron-icon-size-100");
+  --swc-icon-block-size: token("chevron-icon-size-100");
+
+  flex-shrink: 0;
+  rotate: 0deg;
+  transition: rotate token("animation-duration-100") token("animation-ease-in-out");
+}
+
+/* Mirror for RTL so the chevron points left */
+:dir(rtl) .swc-AccordionItem-indicator {
+  scale: -1 1;
+}
+
+/* Size: small, Chevron75 */
+:host([size="s"]) .swc-AccordionItem-indicator {
+  --swc-icon-inline-size: token("chevron-icon-size-75");
+  --swc-icon-block-size: token("chevron-icon-size-75");
+}
+
+/* Size: large, Chevron200 */
+:host([size="l"]) .swc-AccordionItem-indicator {
+  --swc-icon-inline-size: token("chevron-icon-size-200");
+  --swc-icon-block-size: token("chevron-icon-size-200");
+}
+
+/* Size: extra-large, Chevron300 */
+:host([size="xl"]) .swc-AccordionItem-indicator {
+  --swc-icon-inline-size: token("chevron-icon-size-300");
+  --swc-icon-block-size: token("chevron-icon-size-300");
+}
+
+:host([open]) .swc-AccordionItem-indicator {
+  rotate: 90deg;
+}
+
+/* RTL + open: rotate the opposite direction */
+:host([open]):dir(rtl) .swc-AccordionItem-indicator {
+  rotate: -90deg;
+}
+
+/* ── Item title (heading slot wrapper) ──────────────────────────────── */
+
+.swc-AccordionItem-label {
+  flex: 1;
+}
+
+/*
+ * Override light-DOM heading styles (browser defaults, host-document resets)
+ * that would otherwise win over the inherited header font. Applies to
+ * phrasing content like <strong> or <code> slotted into the label.
+ * The :not([class]) guard leaves intentionally-classed elements untouched.
+ * !important is required to win over any light-DOM styles targeting the
+ * slotted element (e.g. global h* resets from the host document).
+ */
+::slotted([slot="label"]:not([class])) {
+  margin: 0 !important;
+  font: inherit !important;
+}
+
+/* ── Direct actions (inline with heading, outside the toggle area) ───── */
+
+.swc-AccordionItem-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+.swc-AccordionItem-content {
+  display: none;
+  padding-block: token("accordion-content-area-top-to-content") token("accordion-content-area-bottom-to-content");
+  padding-inline: var(--swc-accordion-content-padding-inline, token("accordion-content-area-edge-to-content-medium"));
+  font-size: token("font-size-100");
+  font-weight: token("regular-font-weight");
+  line-height: token("line-height-100");
+  color: token("neutral-subdued-content-color-default");
+}
+
+:host([open]) .swc-AccordionItem-content {
+  display: block;
+}
+
+/* ── Size: small ────────────────────────────────────────────────────── */
+
+:host([size="s"]) {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-small");
+}
+
+:host([size="s"]) .swc-AccordionItem-header {
+  gap: token("accordion-disclosure-indicator-to-text-small");
+  padding-block: var(--_swc-accordion-pad-top-s, token("accordion-top-to-text-small")) var(--_swc-accordion-pad-bottom-s, token("accordion-bottom-to-text-small"));
+  padding-inline-start: token("accordion-edge-to-content-area-small");
+  font-size: token("font-size-100");
+}
+
+:host([size="s"]) .swc-AccordionItem-content {
+  padding-inline: var(--swc-accordion-content-padding-inline, token("accordion-content-area-edge-to-content-small"));
+}
+
+/* ── Size: large ────────────────────────────────────────────────────── */
+
+:host([size="l"]) {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-large");
+}
+
+:host([size="l"]) .swc-AccordionItem-header {
+  gap: token("accordion-disclosure-indicator-to-text-large");
+  padding-block: var(--_swc-accordion-pad-top-l, token("accordion-top-to-text-large")) var(--_swc-accordion-pad-bottom-l, token("accordion-bottom-to-text-large"));
+  padding-inline-start: token("accordion-edge-to-content-area-large");
+  font-size: token("font-size-300");
+}
+
+:host([size="l"]) .swc-AccordionItem-content {
+  padding-inline: var(--swc-accordion-content-padding-inline, token("accordion-content-area-edge-to-content-large"));
+}
+
+/* ── Size: extra-large ──────────────────────────────────────────────── */
+
+:host([size="xl"]) {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-extra-large");
+}
+
+:host([size="xl"]) .swc-AccordionItem-header {
+  gap: token("accordion-disclosure-indicator-to-text-extra-large");
+  padding-block: var(--_swc-accordion-pad-top-xl, token("accordion-top-to-text-extra-large")) var(--_swc-accordion-pad-bottom-xl, token("accordion-bottom-to-text-extra-large"));
+  padding-inline-start: token("accordion-edge-to-content-area-extra-large");
+  font-size: token("font-size-400");
+}
+
+:host([size="xl"]) .swc-AccordionItem-content {
+  padding-inline: var(--swc-accordion-content-padding-inline, token("accordion-content-area-edge-to-content-extra-large"));
+}
diff --git a/2nd-gen/packages/swc/components/accordion/accordion.css b/2nd-gen/packages/swc/components/accordion/accordion.css
index 40f33594a28..29c990d3c2f 100644
--- a/2nd-gen/packages/swc/components/accordion/accordion.css
+++ b/2nd-gen/packages/swc/components/accordion/accordion.css
@@ -10,4 +10,54 @@
  * governing permissions and limitations under the License.
  */
 
-/* S2 token imports and selector definitions land here in Phase 4. */
+:host {
+  display: block;
+  min-inline-size: var(--swc-accordion-min-inline-size, token("accordion-minimum-width"));
+}
+
+.swc-Accordion {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-medium");
+}
+
+/* Corner radius per size: cascades to child items so quiet mode resolves correctly */
+:host([size="s"]) .swc-Accordion {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-small");
+}
+
+:host([size="l"]) .swc-Accordion {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-large");
+}
+
+:host([size="xl"]) .swc-Accordion {
+  --_swc-accordion-corner-radius: token("corner-radius-medium-size-extra-large");
+}
+
+/* Compact density: overrides cascade to child items */
+:host([density="compact"]) .swc-Accordion {
+  --_swc-accordion-pad-top-s: token("accordion-top-to-text-compact-small");
+  --_swc-accordion-pad-top-m: token("accordion-top-to-text-compact-medium");
+  --_swc-accordion-pad-top-l: token("accordion-top-to-text-compact-large");
+  --_swc-accordion-pad-top-xl: token("accordion-top-to-text-compact-extra-large");
+  --_swc-accordion-pad-bottom-s: token("accordion-bottom-to-text-compact-small");
+  --_swc-accordion-pad-bottom-m: token("accordion-bottom-to-text-compact-medium");
+  --_swc-accordion-pad-bottom-l: token("accordion-bottom-to-text-compact-large");
+  --_swc-accordion-pad-bottom-xl: token("accordion-bottom-to-text-compact-extra-large");
+}
+
+/* Spacious density: overrides cascade to child items */
+:host([density="spacious"]) .swc-Accordion {
+  --_swc-accordion-pad-top-s: token("accordion-top-to-text-spacious-small");
+  --_swc-accordion-pad-top-m: token("accordion-top-to-text-spacious-medium");
+  --_swc-accordion-pad-top-l: token("accordion-top-to-text-spacious-large");
+  --_swc-accordion-pad-top-xl: token("accordion-top-to-text-spacious-extra-large");
+  --_swc-accordion-pad-bottom-s: token("accordion-bottom-to-text-spacious-small");
+  --_swc-accordion-pad-bottom-m: token("accordion-bottom-to-text-spacious-medium");
+  --_swc-accordion-pad-bottom-l: token("accordion-bottom-to-text-spacious-large");
+  --_swc-accordion-pad-bottom-xl: token("accordion-bottom-to-text-spacious-extra-large");
+}
+
+/* Quiet: removes dividers and rounds header corners (visible on hover and focus) */
+:host([quiet]) .swc-Accordion {
+  --_swc-accordion-item-border-color: transparent;
+  --_swc-accordion-header-corner-radius: var(--_swc-accordion-corner-radius);
+}
diff --git a/2nd-gen/packages/swc/components/accordion/stories/accordion.stories.ts b/2nd-gen/packages/swc/components/accordion/stories/accordion.stories.ts
index 4284e11925e..4e5b5ec28cd 100644
--- a/2nd-gen/packages/swc/components/accordion/stories/accordion.stories.ts
+++ b/2nd-gen/packages/swc/components/accordion/stories/accordion.stories.ts
@@ -16,6 +16,7 @@ import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 
 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 {
   ACCORDION_DENSITIES,
@@ -60,25 +61,26 @@ argTypes.level = {
   },
 };
 
+const content = {
+  personal: 'Manage your name, email address, and contact details.',
+  billing:
+    'Your billing address is used to verify your payment method and calculate taxes.',
+  shipping: 'Physical products and documents are sent to this address.',
+  payment: 'Contact your administrator to update payment information.',
+};
+
 const defaultItems = html`
   <swc-accordion-item>
-    <span slot="label">Alchemy</span>
-    Alchemy is an ancient branch of natural philosophy, a philosophical and
-    protoscientific tradition that was historically practiced in China, India,
-    the Muslim world, and Europe.
-  </swc-accordion-item>
-  <swc-accordion-item>
-    <span slot="label">Astrology</span>
-    Astrology is a range of divinatory practices, recognized as pseudoscientific
-    since the 18th century, that propose that information about human affairs
-    and terrestrial events may be discerned by studying the apparent positions
-    of celestial objects.
+    <span slot="label">Personal information</span>
+    ${content.personal}
   </swc-accordion-item>
   <swc-accordion-item open>
-    <span slot="label">Natural magic</span>
-    Natural magic in the context of early modern Europe was a branch of
-    philosophy that treated occult forces as resulting from natural causes, not
-    from divine or demonic intervention.
+    <span slot="label">Billing address</span>
+    ${content.billing}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span slot="label">Shipping address</span>
+    ${content.shipping}
   </swc-accordion-item>
 `;
 
@@ -86,6 +88,10 @@ const defaultItems = html`
  * An accordion groups related content sections, each behind a header that can
  * be expanded or collapsed. Only one section is open at a time by default;
  * set `allow-multiple` to let any number of sections be open simultaneously.
+ *
+ * Items support an **`actions` slot** for placing interactive controls (such
+ * as an edit button) directly in the header row, outside the toggle button so
+ * they remain independently clickable.
  */
 const meta: Meta = {
   title: 'Accordion',
@@ -94,6 +100,7 @@ const meta: Meta = {
   argTypes,
   render: (args) => template(args, defaultItems),
   parameters: {
+    layout: 'padded',
     actions: { handles: [SWC_ACCORDION_ITEM_TOGGLE_EVENT] },
     docs: {
       subtitle: 'Groups related content sections behind expandable headers.',
@@ -125,3 +132,413 @@ export const Overview: Story = {
   },
   tags: ['overview'],
 };
+
+// ──────────────────────────
+//    ANATOMY STORIES
+// ──────────────────────────
+
+const anatomyItems = html`
+  <swc-accordion-item open>
+    <span slot="label">Personal information</span>
+    ${content.personal}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span slot="label">Billing address</span>
+    <swc-button
+      slot="actions"
+      variant="secondary"
+      fill-style="outline"
+      size="s"
+    >
+      Edit
+    </swc-button>
+    ${content.billing}
+  </swc-accordion-item>
+`;
+
+/**
+ * A `<swc-accordion>` item exposes three content surfaces:
+ *
+ * - **`label` slot**: The heading text shown in the collapsed and expanded header
+ * - **`actions` slot**: Optional interactive controls placed outside the toggle
+ *   button so they remain independently clickable (see the second item below)
+ * - **Default slot**: The panel body revealed when the item expands
+ */
+export const Anatomy: Story = {
+  render: (args) => template(args, anatomyItems),
+  tags: ['anatomy'],
+};
+
+// ──────────────────────────
+//    OPTIONS STORIES
+// ──────────────────────────
+
+/**
+ * Accordions come in four sizes to fit different layout contexts.
+ */
+export const Sizes: Story = {
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      ${ACCORDION_VALID_SIZES.map(
+        (size) => html`
+          ${template(
+            { ...args, size },
+            html`
+              <swc-accordion-item>
+                <span slot="label">Personal information (size=${size})</span>
+                ${content.personal}
+              </swc-accordion-item>
+            `
+          )}
+        `
+      )}
+    </div>
+  `,
+  args: { density: 'regular' },
+  tags: ['options'],
+  parameters: { 'section-order': 1 },
+};
+
+/**
+ * Density controls the vertical spacing between items and within each header.
+ *
+ * - **Compact**: Tighter spacing for data-dense interfaces
+ * - **Regular**: The default, suitable for most contexts
+ * - **Spacious**: More breathing room for content-focused layouts
+ */
+export const Density: Story = {
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      ${ACCORDION_DENSITIES.map(
+        (density) => html`
+          ${template(
+            { ...args, density },
+            html`
+              <swc-accordion-item>
+                <span slot="label">
+                  Personal information (density=${density})
+                </span>
+                ${content.personal}
+              </swc-accordion-item>
+            `
+          )}
+        `
+      )}
+    </div>
+  `,
+  args: { density: 'regular' },
+  tags: ['options'],
+  parameters: { 'section-order': 2 },
+};
+
+/**
+ * The `quiet` variant removes the divider borders for a lighter visual style,
+ * and adds rounded corners on hover for a contained feel.
+ */
+export const Quiet: Story = {
+  render: (args) => template({ ...args, quiet: true }, defaultItems),
+  args: { density: 'regular' },
+  tags: ['options'],
+  parameters: { 'section-order': 3 },
+};
+
+/**
+ * The `level` attribute sets the heading level (h2–h6) applied to every item
+ * header. Use it to fit the accordion into the surrounding page heading
+ * hierarchy without changing the visual style.
+ */
+export const HeadingLevel: Story = {
+  render: (args) => template({ ...args, level: 2 }, defaultItems),
+  args: { density: 'regular' },
+  tags: ['options'],
+  parameters: { 'section-order': 4 },
+};
+
+// ──────────────────────────
+//    STATES STORIES
+// ──────────────────────────
+
+const stateItems = html`
+  <swc-accordion-item>
+    <span slot="label">Personal information</span>
+    ${content.personal}
+  </swc-accordion-item>
+  <swc-accordion-item open>
+    <span slot="label">Billing address</span>
+    ${content.billing}
+  </swc-accordion-item>
+  <swc-accordion-item disabled>
+    <span slot="label">Payment method</span>
+    ${content.payment}
+  </swc-accordion-item>
+`;
+
+/**
+ * Items can be in a default (collapsed), open (expanded), or disabled state.
+ * A disabled item remains in the tab order but its toggle is blocked.
+ */
+export const ItemStates: Story = {
+  render: (args) => template({ ...args, 'allow-multiple': true }, stateItems),
+  args: { density: 'regular' },
+  tags: ['states'],
+  parameters: { 'section-order': 1 },
+};
+
+/**
+ * Setting `disabled` on the `<swc-accordion>` parent disables all items at
+ * once without overwriting individual item disabled state. Re-enabling the
+ * accordion restores each item's original state.
+ */
+export const DisabledAccordion: Story = {
+  render: (args) => template({ ...args, disabled: true }, defaultItems),
+  args: { density: 'regular' },
+  tags: ['states'],
+  parameters: { 'section-order': 2 },
+};
+
+/**
+ * When the accordion host is `disabled`, all items become non-interactive
+ * regardless of their individual `disabled` state. Per-item `disabled` is
+ * preserved underneath: toggle the **disabled** control off and the third
+ * item remains disabled while the first two become interactive again.
+ *
+ * This separation means an item that was already disabled before the
+ * host was disabled does not silently become enabled when the host
+ * is re-enabled.
+ */
+export const MixedDisabledStates: Story = {
+  render: (args) =>
+    template(
+      { ...args, disabled: true, 'allow-multiple': true },
+      html`
+        <swc-accordion-item open>
+          <span slot="label">Personal information</span>
+          ${content.personal}
+        </swc-accordion-item>
+        <swc-accordion-item>
+          <span slot="label">Billing address</span>
+          ${content.billing}
+        </swc-accordion-item>
+        <swc-accordion-item disabled>
+          <span slot="label">Payment method</span>
+          ${content.payment}
+        </swc-accordion-item>
+      `
+    ),
+  args: { density: 'regular' },
+  tags: ['states'],
+  parameters: { 'section-order': 3 },
+};
+
+// ──────────────────────────────
+//    BEHAVIORS STORIES
+// ──────────────────────────────
+
+const directActionsItems = html`
+  <swc-accordion-item open>
+    <span id="label-personal" slot="label">Personal information</span>
+    <swc-button
+      slot="actions"
+      variant="secondary"
+      fill-style="outline"
+      size="s"
+      aria-describedby="label-personal"
+    >
+      Edit
+    </swc-button>
+    ${content.personal}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span id="label-billing" slot="label">Billing address</span>
+    <swc-button
+      slot="actions"
+      variant="secondary"
+      fill-style="outline"
+      size="s"
+      aria-describedby="label-billing"
+    >
+      Edit
+    </swc-button>
+    ${content.billing}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span id="label-shipping" slot="label">Shipping address</span>
+    <swc-button
+      slot="actions"
+      variant="secondary"
+      fill-style="outline"
+      size="s"
+      aria-describedby="label-shipping"
+    >
+      Edit
+    </swc-button>
+    ${content.shipping}
+  </swc-accordion-item>
+`;
+
+/**
+ * Place interactive controls in the **`actions` slot** to render them inline
+ * with the heading, outside the toggle button. This keeps them independently
+ * clickable without expanding or collapsing the item.
+ *
+ * The component automatically stops click and keydown propagation from the
+ * actions container so action buttons never accidentally trigger the toggle.
+ */
+export const DirectActions: Story = {
+  render: (args) => template(args, directActionsItems),
+  args: { density: 'regular' },
+  tags: ['behaviors'],
+  parameters: { 'section-order': 1 },
+};
+
+const allowMultipleItems = html`
+  <swc-accordion-item open>
+    <span slot="label">Personal information</span>
+    ${content.personal}
+  </swc-accordion-item>
+  <swc-accordion-item open>
+    <span slot="label">Billing address</span>
+    ${content.billing}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span slot="label">Shipping address</span>
+    ${content.shipping}
+  </swc-accordion-item>
+`;
+
+/**
+ * By default only one item may be open at a time; opening a new item closes
+ * the previously open one. Set `allow-multiple` to allow any number of items
+ * to be open simultaneously.
+ */
+export const AllowMultiple: Story = {
+  render: (args) =>
+    template({ ...args, 'allow-multiple': true }, allowMultipleItems),
+  args: { density: 'regular' },
+  tags: ['behaviors'],
+  parameters: { 'section-order': 2 },
+};
+
+/**
+ * Every expand or collapse dispatches a `swc-accordion-item-toggle` event from
+ * the item. The event bubbles and is composed, so a single listener on the
+ * `<swc-accordion>` can observe all items. It is cancelable; calling
+ * `preventDefault()` reverts the open state.
+ *
+ * Open the **Actions** panel in Storybook to observe events as you interact
+ * with the accordion below.
+ */
+export const ToggleEvent: Story = {
+  render: (args) => template(args, defaultItems),
+  args: { density: 'regular' },
+  tags: ['behaviors'],
+  parameters: { 'section-order': 3 },
+};
+
+/**
+ * Set `--swc-accordion-content-padding-inline` on the accordion to remove the
+ * default inline padding from every panel body. This is useful when panel
+ * content (such as a data table or an image) should extend edge to edge
+ * inside the item.
+ *
+ * Setting the property to `0` removes all inline padding. Any valid CSS length
+ * value is accepted.
+ */
+export const ContentPaddingInline: Story = {
+  render: (args) =>
+    template(
+      { ...args, 'allow-multiple': true },
+      html`
+        <swc-accordion-item open>
+          <span slot="label">Personal information</span>
+          <div
+            style="background: var(--spectrum-gray-100); padding: 12px 16px;"
+          >
+            ${content.personal}
+          </div>
+        </swc-accordion-item>
+        <swc-accordion-item open>
+          <span slot="label">Billing address</span>
+          <div
+            style="background: var(--spectrum-gray-100); padding: 12px 16px;"
+          >
+            ${content.billing}
+          </div>
+        </swc-accordion-item>
+      `
+    ),
+  args: { density: 'regular' },
+  tags: ['behaviors'],
+  parameters: {
+    'section-order': 4,
+    styles: { '--swc-accordion-content-padding-inline': '0' },
+  },
+};
+
+// ────────────────────────────────
+//    ACCESSIBILITY STORIES
+// ────────────────────────────────
+
+const a11yItems = html`
+  <swc-accordion-item open>
+    <span id="a11y-label-personal" slot="label">Personal information</span>
+    <swc-button
+      slot="actions"
+      variant="secondary"
+      fill-style="outline"
+      size="s"
+      aria-describedby="a11y-label-personal"
+    >
+      Edit
+    </swc-button>
+    ${content.personal}
+  </swc-accordion-item>
+  <swc-accordion-item>
+    <span slot="label">Billing address</span>
+    ${content.billing}
+  </swc-accordion-item>
+  <swc-accordion-item disabled>
+    <span slot="label">Payment method</span>
+    ${content.payment}
+  </swc-accordion-item>
+`;
+
+/**
+ * ### Features
+ *
+ * The `<swc-accordion>` and `<swc-accordion-item>` elements implement the
+ * [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/):
+ *
+ * #### Keyboard navigation
+ *
+ * - <kbd>Tab</kbd>: Moves focus into and between item header buttons
+ * - <kbd>Enter</kbd>: Activates the focused header button (browser-native click behavior)
+ * - <kbd>Space</kbd>: Toggles the focused item and prevents page scroll
+ *
+ * #### ARIA implementation
+ *
+ * 1. **Heading wrapper**: Each header button is wrapped in an `h2`–`h6` element matching
+ *    the accordion's `level` attribute
+ * 2. **`aria-expanded`**: Set to `"true"` on open items, `"false"` on closed items
+ * 3. **`aria-controls`**: Points from the header button to the panel (`id="content"`)
+ * 4. **Panel role**: The panel has `role="region"` and `aria-labelledby` pointing to the
+ *    header button, making it a labeled landmark
+ * 5. **`aria-disabled`**: Set on the header button (not the native `disabled` attribute)
+ *    so disabled items remain keyboard-reachable
+ * 6. **`hidden`**: Added to closed panels to remove them from the accessibility tree
+ * 7. **`inert`**: Added to disabled-item panels to block interaction with their contents
+ *
+ * ### Best practices
+ *
+ * - Set a `level` that continues the existing page heading hierarchy without skipping levels
+ * - Provide meaningful, unique label text for each item so screen reader users can
+ *   navigate the heading list
+ * - When using the `actions` slot, include the item subject in the action's accessible
+ *   name (e.g., "Edit personal information" rather than "Edit") so it is unambiguous out of context
+ * - Always set `density` explicitly; use `regular` when unsure
+ */
+export const Accessibility: Story = {
+  render: (args) => template(args, a11yItems),
+  args: { density: 'regular', level: 3 },
+  tags: ['a11y'],
+};
diff --git a/CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md b/CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md
index 02e071e8cff..0fc350c4958 100644
--- a/CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md
+++ b/CONTRIBUTOR-DOCS/02_style-guide/01_css/01_component-css.md
@@ -279,6 +279,22 @@ States reflect user interaction or component condition. Attach them to `:host` w
 
 **Derived states are not on `:host`**: If a state is computed from slot content (e.g. icon-only), it is not a consumer-settable attribute and must not appear in the state table above. Express it as a class modifier on the internal element via `classMap`. See [When to use classes vs attributes](#when-to-use-classes-vs-attributes).
 
+**`:host:has()` cross-browser compatibility**: Avoid `:host:has(.some-internal-selector)`. This selector pattern has inconsistent behavior in shadow DOM across Safari and Firefox — the browser must evaluate `:has()` relative to a shadow host boundary, which is not yet uniformly supported. Move the `:has()` to the internal wrapper instead:
+
+```css
+/* ❌ Avoid — :has() relative to :host is unreliable across browsers */
+:host:has(.swc-Component-header:hover) {
+  --_swc-component-bg: token("transparent-black-100");
+}
+
+/* ✅ Use — :has() on the internal wrapper works consistently */
+.swc-Component:has(.swc-Component-header:hover) {
+  --_swc-component-bg: token("transparent-black-100");
+}
+```
+
+Custom properties set on the internal wrapper still cascade correctly to its descendants, so the behavior is identical.
+
 ## Size variant patterns
 
 Size variants (s, m, l, xl) use `:host([size="..."])` and update custom properties. Do not add size classes to `render()`.
@@ -368,7 +384,7 @@ Forced colors mode (Windows High Contrast, etc.) replaces colors with system val
 
 **Rules**:
 
-1. **Check first**: Do not add forced-colors styles if the browser already makes the component visible.
+1. **Check first**: Do not add forced-colors styles if the browser already makes the component visible. Semantic HTML elements (`<button>`, `<input>`, `<a>`, etc.) receive correct system colors automatically in forced-colors mode — `ButtonText`, `Highlight` on focus, `GrayText` when disabled — without any CSS override. Only non-semantic elements (e.g. a decorative `<div>` or a `<span>` using `background-color` as a visual indicator) need explicit overrides because the browser cannot infer their role.
 2. **Place last**: Put `@media (forced-colors: active)` at the end of the stylesheet so it overrides other styles.
 3. **Use internal selectors**: Target `.swc-ComponentName` or internal elements, not `:host`. This prevents accidental consumer overrides from breaking accessibility.
 4. **Reuse custom properties**: Override component custom properties (e.g. `--swc-status-light-content-color`) so the rest of the stylesheet still works.
diff --git a/CONTRIBUTOR-DOCS/02_style-guide/01_css/05_anti-patterns.md b/CONTRIBUTOR-DOCS/02_style-guide/01_css/05_anti-patterns.md
index a0ca1c44d96..40de1313a9e 100644
--- a/CONTRIBUTOR-DOCS/02_style-guide/01_css/05_anti-patterns.md
+++ b/CONTRIBUTOR-DOCS/02_style-guide/01_css/05_anti-patterns.md
@@ -56,6 +56,11 @@
     - [Specificity escalation → `:where()`](#specificity-escalation--where)
     - [Size classes in render → `:host([size])`](#size-classes-in-render--hostsize)
     - [`--mod-*` chain → single property](#--mod--chain--single-property)
+- [9. Suppressing focus outlines with `:focus { outline: none }`](#9-suppressing-focus-outlines-with-focus--outline-none-)
+    - [❌ Anti-Pattern](#-anti-pattern)
+    - [Why This Happens](#why-this-happens)
+    - [Why This Is a Problem](#why-this-is-a-problem)
+    - [✅ Correct Approach](#-correct-approach)
 - [Final Reminder](#final-reminder)
 
 </details>
@@ -419,6 +424,29 @@ After migration, Badge relies solely on `.swc-Badge` and attributes.
 | ------------------------------------------------------- | -------------------------------------------------------- |
 | `var(--mod-badge-height, var(--spectrum-badge-height))` | `var(--swc-badge-height, token("component-height-100"))` |
 
+## 9. Suppressing focus outlines with `:focus { outline: none }`
+
+### ❌ Anti-Pattern
+
+```css
+.swc-Component-header:focus {
+  outline: none;
+}
+```
+
+### Why This Happens
+
+- Carried over from 1st-gen Spectrum CSS, which managed focus rings through its own system
+
+### Why This Is a Problem
+
+- Removes the focus indicator for keyboard users — an accessibility violation (WCAG 2.4.7)
+- The component already has a `:focus-visible` rule; the `:focus` suppression just interferes with it
+
+### ✅ Correct Approach
+
+- Remove the rule entirely. `:focus-visible` already handles when to show the ring; no explicit suppression is needed.
+
 ## Final Reminder
 
 If you find yourself:
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/accordion/migration-plan.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/accordion/migration-plan.md
index c4e8684501a..c9036deeab2 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/accordion/migration-plan.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/accordion/migration-plan.md
@@ -30,6 +30,9 @@
     - [Selection sync — `RadioController` pattern (consider)](#selection-sync--radiocontroller-pattern-consider)
     - [Analysis inputs](#analysis-inputs)
 - [Architecture: core vs SWC split](#architecture-core-vs-swc-split)
+- [CSS custom property migration reference](#css-custom-property-migration-reference)
+    - [`--mod-*` to `--swc-*` mapping](#--mod--to---swc--mapping)
+    - [Density × size padding matrix](#density--size-padding-matrix)
 - [Migration checklist](#migration-checklist)
     - [Preparation (this ticket)](#preparation-this-ticket)
     - [Setup](#setup)
@@ -294,6 +297,45 @@ Follow the [washing machine — core vs SWC](../../02_workstreams/02_2nd-gen-com
 
 ---
 
+## CSS custom property migration reference
+
+### `--mod-*` to `--swc-*` mapping
+
+2nd-gen exposes a narrower customization surface than 1st-gen. Most visual values are driven by Spectrum 2 design tokens internally and are not overridable via custom properties.
+
+| 1st-gen property | 2nd-gen property | Notes |
+|---|---|---|
+| `--mod-accordion-item-width` | `--swc-accordion-min-inline-size` | Renamed; sets the minimum inline size of the accordion host |
+| `--mod-accordion-divider-color` | `--swc-accordion-item-divider-color` | Renamed; controls the border color of each item's top and bottom dividers |
+| `--mod-accordion-component-edge-to-text` | `--swc-accordion-content-padding-inline` | Renamed; controls the inline padding of the panel body. Set to `0` for edge-to-edge content |
+| `--mod-accordion-background-color-*` | Not exposed | Driven by internal tokens via `:has()` state selectors |
+| `--mod-accordion-corner-radius` | Not exposed | Driven by `--_swc-accordion-corner-radius` (private; size-scaled) |
+| `--mod-accordion-item-header-color-*` | Not exposed | Driven by internal tokens via `:has()` state selectors |
+| `--mod-accordion-focus-indicator-*` | Not exposed | Driven by global focus indicator tokens |
+| `--mod-accordion-item-content-*` (typography) | Not exposed | Driven by global typography tokens |
+| `--mod-accordion-item-header-*` (typography) | Not exposed | Driven by global typography tokens |
+| `--mod-accordion-disclosure-indicator-*` | Not exposed | Controlled internally by `--swc-icon-*` on the chevron element |
+| `--mod-accordion-divider-thickness` | Not exposed | Driven by `token("border-width-100")` |
+| `--mod-accordion-min-block-size` | Not exposed | Minimum height is set by block-padding tokens and content height |
+| `--mod-accordion-edge-to-*-space` | Not exposed | Padding is token-driven per size; use `--swc-accordion-content-padding-inline` for the panel content area only |
+| `--mod-accordion-item-content-area-*-to-content` | Not exposed | Driven by `token("accordion-content-area-top-to-content")` and `token("accordion-content-area-bottom-to-content")` |
+
+### Density × size padding matrix
+
+Header block padding is determined by `density` (on the accordion host) and `size` (set on the host and propagated to items). Density tokens override the default size tokens via CSS custom properties cascaded from the host.
+
+| Density | Size s | Size m (default) | Size l | Size xl |
+|---|---|---|---|---|
+| **regular** | `accordion-top/bottom-to-text-small` | `accordion-top/bottom-to-text-medium` | `accordion-top/bottom-to-text-large` | `accordion-top/bottom-to-text-extra-large` |
+| **compact** | `accordion-top/bottom-to-text-compact-small` | `accordion-top/bottom-to-text-compact-medium` | `accordion-top/bottom-to-text-compact-large` | `accordion-top/bottom-to-text-compact-extra-large` |
+| **spacious** | `accordion-top/bottom-to-text-spacious-small` | `accordion-top/bottom-to-text-spacious-medium` | `accordion-top/bottom-to-text-spacious-large` | `accordion-top/bottom-to-text-spacious-extra-large` |
+
+> `top/bottom` is shorthand; each cell represents two tokens: `accordion-top-to-text-*` and `accordion-bottom-to-text-*`.
+
+Regular density uses the base size tokens directly. Compact and spacious densities override the values by setting `--_swc-accordion-pad-top-{s|m|l|xl}` and `--_swc-accordion-pad-bottom-{s|m|l|xl}` on the `:host` of `swc-accordion`. These are internal private properties and are not part of the public API.
+
+---
+
 ## Migration checklist
 
 Gates align with [01_washing-machine-workflow.md](../../02_workstreams/02_2nd-gen-component-migration/02_step-by-step/01_washing-machine-workflow.md).
@@ -319,8 +361,8 @@ Gates align with [01_washing-machine-workflow.md](../../02_workstreams/02_2nd-ge
 
 ### Styling
 
-- [ ] S2 CSS integrated; stylelint clean
-- [ ] Document token / `--mod-*` → S2 (or `--swc-*`) mapping for consumers; include **`density` × `size`** matrix
+- [x] S2 CSS integrated; stylelint clean
+- [x] Document token / `--mod-*` → S2 (or `--swc-*`) mapping for consumers; include **`density` × `size`** matrix
 
 ### Accessibility
 
@@ -336,9 +378,9 @@ Gates align with [01_washing-machine-workflow.md](../../02_workstreams/02_2nd-ge
 
 ### Documentation
 
-- [ ] JSDoc, usage docs, Storybook stories (include a spacing / **custom properties** story for “no inline padding” style parity; **no** `noInlinePadding`-style attribute)
-- [ ] Add a Storybook story demonstrating inline padding customization via `--swc-accordion-*` custom properties (no `noInlinePadding`-style attribute)
-- [ ] Do not document arrow-key navigation between headers for 2nd-gen (contrast with legacy README)
+- [x] JSDoc, usage docs, Storybook stories (include a spacing / **custom properties** story for “no inline padding” style parity; **no** `noInlinePadding`-style attribute)
+- [x] Add a Storybook story demonstrating inline padding customization via `--swc-accordion-*` custom properties (no `noInlinePadding`-style attribute)
+- [x] Do not document arrow-key navigation between headers for 2nd-gen (contrast with legacy README)
 
 ### Review