feat(commons): remove need for commons package

Author: castastrophe

.storybook/guides/releasing.mdx

@@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks";
 
 This project versions components independently, meaning each component has its own version number, updated independently of other components. We follow [semantic versioning](https://semver.org/) and as such, each release is versioned according to the following rules:
 
-- **Major**: Breaking changes such as API changes, the removal of features, or changes to custom properties
+- **Major**: Breaking changes such as API changes or the removal of features
 - **Minor**: New features or enhancements
 - **Patch**: Bug fixes or minor improvements
 

README.md

@@ -7,7 +7,7 @@
 <h1 align="center">Spectrum CSS</h1>
 <h3 align="center">A CSS-implementation of the Spectrum design language</h3>
 
-<img src=".storybook/assets/images/spectrum-css_illustration_desktop.png">
+<img src=".storybook/assets/images/spectrum-css_illustration_desktop.png" alt="Spectrum CSS illustration" />
 
 ## Features
 
@@ -16,7 +16,7 @@
 - 🧪 **Rigorously tested**: These individually-versioned components have been vetted to be accessible and inclusive of global audiences.
 - 📱 **Multi-platform support**: We support [evergreen browsers](https://github.com/adobe/spectrum-css?tab=readme-ov-file#browser-support) for scalability and flexibility.
 
-&nbsp;&nbsp;&nbsp;&nbsp; [<img src="https://img.shields.io/badge/Get%20started-F0F0F0?style=for-the-badge&logo=adobe&logoColor=%23FF0000"/>](https://opensource.adobe.com/spectrum-css/get-started.html) &nbsp; [<img src="https://img.shields.io/badge/Storybook-F0F0F0?style=for-the-badge&logo=storybook&logoColor=%23FF4785"/>](https://opensource.adobe.com/spectrum-css/)
+&nbsp;&nbsp;&nbsp;&nbsp; [<img src="https://img.shields.io/badge/Get%20started-F0F0F0?style=for-the-badge&logo=adobe&logoColor=%23FF0000" alt="Get started" />](https://opensource.adobe.com/spectrum-css/get-started.html) &nbsp; [<img src="https://img.shields.io/badge/Storybook-F0F0F0?style=for-the-badge&logo=storybook&logoColor=%23FF4785" alt="Storybook" />](https://opensource.adobe.com/spectrum-css/)
 
 ## Using Spectrum CSS
 
@@ -44,13 +44,13 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
 
 Installed components will be available in the `node_modules/@spectrum-css/` folder of your project.
 
-All components in this library have a peer dependency on [`@spectrum-css/tokens`](tokens), which is a local package that serves up the [Spectrum design tokens](https://github.com/adobe/spectrum-tokens) as CSS custom properties (via [Style dictionary](https://amzn.github.io/style-dictionary/#/)). These custom properties are leveraged in all components to create a cohesive visual language and to allow for easy theming. If you choose not to use the provided `@spectrum-css/tokens` package, you must define your own custom properties or your components will render with a significant number of missing styles. When overriding certain styles is necessary, modifying styles is supported through the use of component-specific `--mod` prefixed properties. [More on this below](https://github.com/adobe/spectrum-css?tab=readme-ov-file#modifying-components).
+All components in this library have a peer dependency on [`@spectrum-css/tokens`](tokens), which is a local package that serves up the [Spectrum design tokens](https://github.com/adobe/spectrum-tokens) as CSS custom properties (via [Style dictionary](https://amzn.github.io/style-dictionary/#/)). These custom properties are leveraged in all components to create a cohesive visual language and to allow for easy theming. If you choose not to use the provided `@spectrum-css/tokens` package, you must define your own custom properties or your components will render with a significant number of missing styles.
 
 ### Using components in your project
 
 Spectrum CSS components have build output that is designed to be used in a variety of ways:
 
-- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
+- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, component-specific custom properties<sup>[1](#token-footnote)</sup> are mapped to variables sourced from the design tokens.
 
 <sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties.
 
@@ -104,10 +104,6 @@ Put together, we would define the context for our application in the following w
 
 Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context.
 
-### Modifying components
-
-You can override variables and modify Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [Action Button for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#custompropertiesapi).
-
 ### Importing UI icons
 
 Some components require certain "UI icons" to render. These icons are released within the [`@spectrum-css/ui-icons`](https://www.npmjs.com/package/@spectrum-css/ui-icons) package and are used by components like `@spectrum-css/icon` and `@spectrum-css/actionbutton`.

components/accordion/dist/metadata.json

@@ -2,47 +2,48 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Accordion",
-    ".spectrum-Accordion--compact",
-    ".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",
-    ".spectrum-Accordion--spacious",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:is(:hover, :active)",
     ".spectrum-Accordion-item",
-    ".spectrum-Accordion-item.is-disabled",
+    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
+    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent:is(:hover, :active, :focus-visible)",
+    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
+    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:is(:hover, :active, :focus-visible)",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemDirectActions",
     ".spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
+    ".spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
     ".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)",
     ".spectrum-Accordion-itemHeader:hover",
     ".spectrum-Accordion-itemHeading",
     ".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)"
+    ".spectrum-Accordion.is-open:dir(rtl) > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion:dir(rtl) .spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemContent",
+    ".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemHeader",
+    ".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemContent",
+    ".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemHeader",
+    ".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemContent",
+    ".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemHeader",
+    ".spectrum-Accordion:where(.spectrum-Accordion--compact)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeL)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeS)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeXL)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--noInlinePadding)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--quiet)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--sizeL)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--sizeS)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--sizeXL)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--spacious)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeL)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeS)",
+    ".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeXL)"
   ],
   "component": [
-    "--spectrum-accordion-animation-duration",
-    "--spectrum-accordion-background-color-default",
-    "--spectrum-accordion-background-color-down",
-    "--spectrum-accordion-background-color-hover",
-    "--spectrum-accordion-background-color-key-focus",
     "--spectrum-accordion-bottom-to-text-compact-extra-large",
     "--spectrum-accordion-bottom-to-text-compact-large",
     "--spectrum-accordion-bottom-to-text-compact-medium",
@@ -69,7 +70,6 @@
     "--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-divider-thickness",
     "--spectrum-accordion-edge-to-content-area",
     "--spectrum-accordion-edge-to-content-area-extra-large",
@@ -78,37 +78,12 @@
     "--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-item-content-area-bottom-to-content",
-    "--spectrum-accordion-item-content-area-top-to-content",
-    "--spectrum-accordion-item-content-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-direct-actions-height",
-    "--spectrum-accordion-item-direct-actions-spacing",
-    "--spectrum-accordion-item-direct-actions-vertical-spacing",
-    "--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-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-to-direct-actions-space",
     "--spectrum-accordion-item-header-top-to-text-space",
-    "--spectrum-accordion-item-min-block-size",
     "--spectrum-accordion-item-minimum-height",
-    "--spectrum-accordion-item-minimum-width",
     "--spectrum-accordion-item-width",
     "--spectrum-accordion-minimum-width",
     "--spectrum-accordion-top-to-disclosure-indicator",
@@ -181,7 +156,6 @@
     "--spectrum-font-size-400",
     "--spectrum-gray-200",
     "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",