feat(accordion): spectrum 2 migration

.changeset/chatty-lands-attack.md

@@ -0,0 +1,44 @@
+---
+"@spectrum-css/accordion": major
+---
+
+### Spectrum 2 migration
+
+Accordion now uses Spectrum 2 tokens and specifications.
+
+New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
+the spacing around the content area.
+
+#### New features
+
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
+- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
+  collapsing the accordion item.
+- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item
+  header does not have padding.
+- Per design spec, accordion items have a min-width and default width. Default width can be
+  overridden with `--mod-accordion-item-width` but should not be smaller than
+  `--spectrum-accordion-item-minimum-width`.
+
+#### Markup changes
+
+The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
+from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra
+element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has
+been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading
+text.
+
+#### Mod changes
+
+The following `--mod` custom properties have been renamed to better reflect how they are used:
+
+- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height`
+- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size`
+- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline`
+
+New mods:
+
+- `--mod-accordion-animation-duration`
+- `--mod-accordion-edge-to-content-area`
+- `--mod-accordion-item-minimum-width`
+- `--mod-accordion-top-to-disclosure-indicator`

components/accordion/dist/metadata.json

@@ -6,6 +6,9 @@
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion--quiet",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover",
     ".spectrum-Accordion--sizeL",
     ".spectrum-Accordion--sizeS",
     ".spectrum-Accordion--sizeXL",
@@ -14,51 +17,40 @@
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
     ".spectrum-Accordion-item",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover",
+    ".spectrum-Accordion-item.is-disabled",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-itemHeader:active",
-    ".spectrum-Accordion-itemHeader:after",
-    ".spectrum-Accordion-itemHeader:focus",
+    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-itemHeader:focus:after",
     ".spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer",
     ".spectrum-Accordion-itemHeading",
-    ".spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-itemIconContainer:dir(rtl)",
+    ".spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-itemTitle",
+    ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",
     ".spectrum-Accordion:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Accordion",
-    "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer"
+    "[dir=\"rtl\"] .spectrum-Accordion"
   ],
   "modifiers": [
+    "--mod-accordion-animation-duration",
     "--mod-accordion-background-color-default",
     "--mod-accordion-background-color-down",
     "--mod-accordion-background-color-hover",
     "--mod-accordion-background-color-key-focus",
-    "--mod-accordion-component-edge-to-text",
+    "--mod-accordion-content-padding-inline",
     "--mod-accordion-corner-radius",
     "--mod-accordion-disclosure-indicator-height",
     "--mod-accordion-disclosure-indicator-to-text-space",
     "--mod-accordion-divider-color",
     "--mod-accordion-divider-thickness",
+    "--mod-accordion-edge-to-content-area",
     "--mod-accordion-edge-to-disclosure-indicator-space",
     "--mod-accordion-edge-to-text-space",
-    "--mod-accordion-focus-indicator-color",
-    "--mod-accordion-focus-indicator-gap",
-    "--mod-accordion-focus-indicator-thickness",
     "--mod-accordion-item-content-area-bottom-to-content",
     "--mod-accordion-item-content-area-top-to-content",
     "--mod-accordion-item-content-color",
@@ -68,6 +60,9 @@
     "--mod-accordion-item-content-font-style",
     "--mod-accordion-item-content-font-weight",
     "--mod-accordion-item-content-line-height",
+    "--mod-accordion-item-focus-indicator-color",
+    "--mod-accordion-item-focus-indicator-gap",
+    "--mod-accordion-item-focus-indicator-thickness",
     "--mod-accordion-item-header-bottom-to-text-space",
     "--mod-accordion-item-header-color-default",
     "--mod-accordion-item-header-color-down",
@@ -80,11 +75,14 @@
     "--mod-accordion-item-header-font-weight",
     "--mod-accordion-item-header-line-height",
     "--mod-accordion-item-header-top-to-text-space",
-    "--mod-accordion-item-height",
+    "--mod-accordion-item-min-block-size",
+    "--mod-accordion-item-minimum-height",
+    "--mod-accordion-item-minimum-width",
     "--mod-accordion-item-width",
-    "--mod-accordion-min-block-size"
+    "--mod-accordion-top-to-disclosure-indicator"
   ],
   "component": [
+    "--spectrum-accordion-animation-duration",
     "--spectrum-accordion-background-color-default",
     "--spectrum-accordion-background-color-down",
     "--spectrum-accordion-background-color-hover",
@@ -93,72 +91,82 @@
     "--spectrum-accordion-bottom-to-text-compact-large",
     "--spectrum-accordion-bottom-to-text-compact-medium",
     "--spectrum-accordion-bottom-to-text-compact-small",
-    "--spectrum-accordion-bottom-to-text-regular-extra-large",
-    "--spectrum-accordion-bottom-to-text-regular-large",
-    "--spectrum-accordion-bottom-to-text-regular-medium",
-    "--spectrum-accordion-bottom-to-text-regular-small",
+    "--spectrum-accordion-bottom-to-text-extra-large",
+    "--spectrum-accordion-bottom-to-text-large",
+    "--spectrum-accordion-bottom-to-text-medium",
+    "--spectrum-accordion-bottom-to-text-small",
     "--spectrum-accordion-bottom-to-text-spacious-extra-large",
     "--spectrum-accordion-bottom-to-text-spacious-large",
     "--spectrum-accordion-bottom-to-text-spacious-medium",
     "--spectrum-accordion-bottom-to-text-spacious-small",
-    "--spectrum-accordion-component-edge-to-text",
     "--spectrum-accordion-content-area-bottom-to-content",
+    "--spectrum-accordion-content-area-edge-to-content-extra-large",
+    "--spectrum-accordion-content-area-edge-to-content-large",
+    "--spectrum-accordion-content-area-edge-to-content-medium",
+    "--spectrum-accordion-content-area-edge-to-content-small",
     "--spectrum-accordion-content-area-top-to-content",
+    "--spectrum-accordion-content-padding-inline",
     "--spectrum-accordion-corner-radius",
     "--spectrum-accordion-disclosure-indicator-height",
-    "--spectrum-accordion-disclosure-indicator-to-text",
+    "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-medium",
+    "--spectrum-accordion-disclosure-indicator-to-text-small",
     "--spectrum-accordion-disclosure-indicator-to-text-space",
     "--spectrum-accordion-divider-color",
-    "--spectrum-accordion-edge-to-disclosure-indicator",
+    "--spectrum-accordion-divider-thickness",
+    "--spectrum-accordion-edge-to-content-area",
+    "--spectrum-accordion-edge-to-content-area-extra-large",
+    "--spectrum-accordion-edge-to-content-area-large",
+    "--spectrum-accordion-edge-to-content-area-medium",
+    "--spectrum-accordion-edge-to-content-area-small",
     "--spectrum-accordion-edge-to-disclosure-indicator-space",
     "--spectrum-accordion-edge-to-text",
     "--spectrum-accordion-edge-to-text-space",
-    "--spectrum-accordion-focus-indicator-color",
-    "--spectrum-accordion-focus-indicator-gap",
-    "--spectrum-accordion-focus-indicator-thickness",
     "--spectrum-accordion-item-content-area-bottom-to-content",
     "--spectrum-accordion-item-content-area-top-to-content",
     "--spectrum-accordion-item-content-color",
-    "--spectrum-accordion-item-content-disabled-color",
     "--spectrum-accordion-item-content-font",
     "--spectrum-accordion-item-content-font-size",
     "--spectrum-accordion-item-content-font-style",
     "--spectrum-accordion-item-content-font-weight",
     "--spectrum-accordion-item-content-line-height",
+    "--spectrum-accordion-item-focus-indicator-color",
+    "--spectrum-accordion-item-focus-indicator-gap",
+    "--spectrum-accordion-item-focus-indicator-thickness",
     "--spectrum-accordion-item-header-bottom-to-text-space",
     "--spectrum-accordion-item-header-color-default",
     "--spectrum-accordion-item-header-color-down",
     "--spectrum-accordion-item-header-color-hover",
     "--spectrum-accordion-item-header-color-key-focus",
-    "--spectrum-accordion-item-header-disabled-color",
+    "--spectrum-accordion-item-header-cursor",
     "--spectrum-accordion-item-header-font",
     "--spectrum-accordion-item-header-font-size",
     "--spectrum-accordion-item-header-font-style",
     "--spectrum-accordion-item-header-font-weight",
     "--spectrum-accordion-item-header-line-height",
     "--spectrum-accordion-item-header-top-to-text-space",
-    "--spectrum-accordion-item-height",
+    "--spectrum-accordion-item-min-block-size",
+    "--spectrum-accordion-item-minimum-height",
+    "--spectrum-accordion-item-minimum-width",
     "--spectrum-accordion-item-width",
-    "--spectrum-accordion-min-block-size",
     "--spectrum-accordion-minimum-width",
-    "--spectrum-accordion-small-top-to-text-spacious",
+    "--spectrum-accordion-top-to-disclosure-indicator",
     "--spectrum-accordion-top-to-text-compact-extra-large",
     "--spectrum-accordion-top-to-text-compact-large",
     "--spectrum-accordion-top-to-text-compact-medium",
     "--spectrum-accordion-top-to-text-compact-small",
-    "--spectrum-accordion-top-to-text-regular-extra-large",
-    "--spectrum-accordion-top-to-text-regular-large",
-    "--spectrum-accordion-top-to-text-regular-medium",
-    "--spectrum-accordion-top-to-text-regular-small",
+    "--spectrum-accordion-top-to-text-extra-large",
+    "--spectrum-accordion-top-to-text-large",
+    "--spectrum-accordion-top-to-text-medium",
+    "--spectrum-accordion-top-to-text-small",
     "--spectrum-accordion-top-to-text-spacious-extra-large",
     "--spectrum-accordion-top-to-text-spacious-large",
-    "--spectrum-accordion-top-to-text-spacious-medium"
+    "--spectrum-accordion-top-to-text-spacious-medium",
+    "--spectrum-accordion-top-to-text-spacious-small"
   ],
   "global": [
-    "--spectrum-background-opacity-default",
-    "--spectrum-background-opacity-down",
-    "--spectrum-background-opacity-hover",
-    "--spectrum-background-opacity-key-focus",
+    "--spectrum-animation-duration-100",
     "--spectrum-body-color",
     "--spectrum-body-sans-serif-font-style",
     "--spectrum-body-sans-serif-font-weight",
@@ -167,36 +175,61 @@
     "--spectrum-body-size-s",
     "--spectrum-body-size-xs",
     "--spectrum-bold-font-weight",
+    "--spectrum-chevron-icon-size-100",
+    "--spectrum-chevron-icon-size-200",
+    "--spectrum-chevron-icon-size-300",
+    "--spectrum-chevron-icon-size-75",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-50",
-    "--spectrum-component-edge-to-text-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-400",
+    "--spectrum-component-height-50",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
     "--spectrum-default-font-style",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-small",
+    "--spectrum-field-default-width-extra-large",
+    "--spectrum-field-default-width-large",
+    "--spectrum-field-default-width-medium",
+    "--spectrum-field-edge-to-disclosure-icon-100",
+    "--spectrum-field-edge-to-disclosure-icon-200",
+    "--spectrum-field-edge-to-disclosure-icon-300",
+    "--spectrum-field-edge-to-disclosure-icon-75",
+    "--spectrum-field-top-to-disclosure-icon-compact-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-compact-large",
+    "--spectrum-field-top-to-disclosure-icon-compact-medium",
+    "--spectrum-field-top-to-disclosure-icon-compact-small",
+    "--spectrum-field-top-to-disclosure-icon-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-large",
+    "--spectrum-field-top-to-disclosure-icon-medium",
+    "--spectrum-field-top-to-disclosure-icon-small",
+    "--spectrum-field-top-to-disclosure-icon-spacious-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-spacious-large",
+    "--spectrum-field-top-to-disclosure-icon-spacious-medium",
+    "--spectrum-field-top-to-disclosure-icon-spacious-small",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
-    "--spectrum-font-size-500",
-    "--spectrum-font-size-700",
+    "--spectrum-font-size-400",
     "--spectrum-gray-200",
-    "--spectrum-gray-900-rgb",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack"
+    "--spectrum-sans-font-family-stack",
+    "--spectrum-transparent-black-100",
+    "--spectrum-transparent-black-25",
+    "--spectrum-transparent-black-300"
   ],
   "passthroughs": [],
   "high-contrast": []