chore(accordion): full fidelity feature update

.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
 

.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.

.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)

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.

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"

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"));
+}

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);
+}