[DO NOT MERGE]: S2 Preview

.stylelintrc.json

@@ -6,7 +6,11 @@
         "length-zero-no-unit": [true, { "ignore": "custom-properties" }],
         "selector-type-no-unknown": [true, { "ignore": ["custom-elements"] }],
         "selector-pseudo-element-colon-notation": ["single", {}],
-        "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
+        "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+        "no-duplicate-selectors": null,
+        "selector-class-pattern": null,
+        "no-descending-specificity": null,
+        "declaration-block-no-redundant-longhand-properties": null
     },
     "overrides": [
         {

package.json

@@ -423,5 +423,6 @@
         "projects/*",
         "tools/*",
         "react/*"
-    ]
+    ],
+    "packageManager": "[email protected]"
 }

packages/accordion/package.json

@@ -34,6 +34,7 @@
             "default": "./src/AccordionItem.js"
         },
         "./src/accordion-item.css.js": "./src/accordion-item.css.js",
+        "./src/accordion-overrides.css.js": "./src/accordion-overrides.css.js",
         "./src/accordion.css.js": "./src/accordion.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
@@ -73,7 +74,7 @@
         "@spectrum-web-components/shared": "^0.47.2"
     },
     "devDependencies": {
-        "@spectrum-css/accordion": "^5.1.2"
+        "@spectrum-css/accordion": "^6.0.0-s2-foundations.14"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/accordion/src/AccordionItem.ts

@@ -22,6 +22,7 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { when } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
+import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
 
 import styles from './accordion-item.css.js';
 
@@ -69,7 +70,7 @@ export class AccordionItem extends SizedMixin(Focusable, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles, chevronIconStyles];
+        return [styles, chevronIconStyles, chevronIconOverrides];
     }
 
     @property({ type: Boolean, reflect: true })

packages/accordion/src/accordion-overrides.css

@@ -0,0 +1,265 @@
+/*
+    Copyright 2023 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.
+    */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    --spectrum-accordion-item-height: var(--system-accordion-item-height);
+    --spectrum-accordion-item-width: var(--system-accordion-item-width);
+    --spectrum-accordion-disclosure-indicator-height: var(
+        --system-accordion-disclosure-indicator-height
+    );
+    --spectrum-accordion-disclosure-indicator-to-text-space: var(
+        --system-accordion-disclosure-indicator-to-text-space
+    );
+    --spectrum-accordion-edge-to-disclosure-indicator-space: var(
+        --system-accordion-edge-to-disclosure-indicator-space
+    );
+    --spectrum-accordion-edge-to-text-space: var(
+        --system-accordion-edge-to-text-space
+    );
+    --spectrum-accordion-item-header-top-to-text-space: var(
+        --system-accordion-item-header-top-to-text-space
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space: var(
+        --system-accordion-item-header-bottom-to-text-space
+    );
+    --spectrum-accordion-focus-indicator-gap: var(
+        --system-accordion-focus-indicator-gap
+    );
+    --spectrum-accordion-focus-indicator-thickness: var(
+        --system-accordion-focus-indicator-thickness
+    );
+    --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius);
+    --spectrum-accordion-item-content-area-top-to-content: var(
+        --system-accordion-item-content-area-top-to-content
+    );
+    --spectrum-accordion-item-content-area-bottom-to-content: var(
+        --system-accordion-item-content-area-bottom-to-content
+    );
+    --spectrum-accordion-component-edge-to-text: var(
+        --system-accordion-component-edge-to-text
+    );
+    --spectrum-accordion-item-header-font: var(
+        --system-accordion-item-header-font
+    );
+    --spectrum-accordion-item-header-font-weight: var(
+        --system-accordion-item-header-font-weight
+    );
+    --spectrum-accordion-item-header-font-style: var(
+        --system-accordion-item-header-font-style
+    );
+    --spectrum-accordion-item-header-font-size: var(
+        --system-accordion-item-header-font-size
+    );
+    --spectrum-accordion-item-header-line-height: var(
+        --system-accordion-item-header-line-height
+    );
+    --spectrum-accordion-item-content-font: var(
+        --system-accordion-item-content-font
+    );
+    --spectrum-accordion-item-content-font-weight: var(
+        --system-accordion-item-content-font-weight
+    );
+    --spectrum-accordion-item-content-font-style: var(
+        --system-accordion-item-content-font-style
+    );
+    --spectrum-accordion-item-content-font-size: var(
+        --system-accordion-item-content-font-size
+    );
+    --spectrum-accordion-item-content-line-height: var(
+        --system-accordion-item-content-line-height
+    );
+    --spectrum-accordion-background-color-default: var(
+        --system-accordion-background-color-default
+    );
+    --spectrum-accordion-background-color-hover: var(
+        --system-accordion-background-color-hover
+    );
+    --spectrum-accordion-background-color-down: var(
+        --system-accordion-background-color-down
+    );
+    --spectrum-accordion-background-color-key-focus: var(
+        --system-accordion-background-color-key-focus
+    );
+    --spectrum-accordion-item-header-color-default: var(
+        --system-accordion-item-header-color-default
+    );
+    --spectrum-accordion-item-header-color-hover: var(
+        --system-accordion-item-header-color-hover
+    );
+    --spectrum-accordion-item-header-color-down: var(
+        --system-accordion-item-header-color-down
+    );
+    --spectrum-accordion-item-header-color-key-focus: var(
+        --system-accordion-item-header-color-key-focus
+    );
+    --spectrum-accordion-item-header-disabled-color: var(
+        --system-accordion-item-header-disabled-color
+    );
+    --spectrum-accordion-item-content-disabled-color: var(
+        --system-accordion-item-content-disabled-color
+    );
+    --spectrum-accordion-item-content-color: var(
+        --system-accordion-item-content-color
+    );
+    --spectrum-accordion-focus-indicator-color: var(
+        --system-accordion-focus-indicator-color
+    );
+    --spectrum-accordion-divider-color: var(--system-accordion-divider-color);
+    --spectrum-accordion-item-header-line-height-cjk: var(
+        --system-accordion-item-header-line-height-cjk
+    );
+    --spectrum-accordion-item-content-line-height-cjk: var(
+        --system-accordion-item-content-line-height-cjk
+    );
+    --spectrum-accordion-item-height-size-s: var(
+        --system-accordion-item-height-size-s
+    );
+    --spectrum-accordion-disclosure-indicator-height-size-s: var(
+        --system-accordion-disclosure-indicator-height-size-s
+    );
+    --spectrum-accordion-component-edge-to-text-size-s: var(
+        --system-accordion-component-edge-to-text-size-s
+    );
+    --spectrum-accordion-item-header-font-size-size-s: var(
+        --system-accordion-item-header-font-size-size-s
+    );
+    --spectrum-accordion-item-content-font-size-size-s: var(
+        --system-accordion-item-content-font-size-size-s
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-s: var(
+        --system-accordion-item-header-top-to-text-space-size-s
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(
+        --system-accordion-item-header-bottom-to-text-space-size-s
+    );
+    --spectrum-accordion-item-height-size-l: var(
+        --system-accordion-item-height-size-l
+    );
+    --spectrum-accordion-disclosure-indicator-height-size-l: var(
+        --system-accordion-disclosure-indicator-height-size-l
+    );
+    --spectrum-accordion-component-edge-to-text-size-l: var(
+        --system-accordion-component-edge-to-text-size-l
+    );
+    --spectrum-accordion-item-header-font-size-size-l: var(
+        --system-accordion-item-header-font-size-size-l
+    );
+    --spectrum-accordion-item-content-font-size-size-l: var(
+        --system-accordion-item-content-font-size-size-l
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-l: var(
+        --system-accordion-item-header-top-to-text-space-size-l
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(
+        --system-accordion-item-header-bottom-to-text-space-size-l
+    );
+    --spectrum-accordion-item-height-size-xl: var(
+        --system-accordion-item-height-size-xl
+    );
+    --spectrum-accordion-disclosure-indicator-height-size-xl: var(
+        --system-accordion-disclosure-indicator-height-size-xl
+    );
+    --spectrum-accordion-component-edge-to-text-size-xl: var(
+        --system-accordion-component-edge-to-text-size-xl
+    );
+    --spectrum-accordion-item-header-font-size-size-xl: var(
+        --system-accordion-item-header-font-size-size-xl
+    );
+    --spectrum-accordion-item-content-font-size-size-xl: var(
+        --system-accordion-item-content-font-size-size-xl
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-xl: var(
+        --system-accordion-item-header-top-to-text-space-size-xl
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(
+        --system-accordion-item-header-bottom-to-text-space-size-xl
+    );
+}
+
+:host([density='compact']) {
+    --spectrum-accordion-item-height: var(
+        --system-accordion-compact-item-height
+    );
+    --spectrum-accordion-item-header-top-to-text-space: var(
+        --system-accordion-compact-item-header-top-to-text-space
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space: var(
+        --system-accordion-compact-item-header-bottom-to-text-space
+    );
+    --spectrum-accordion-item-height-size-s: var(
+        --system-accordion-compact-item-height-size-s
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-s: var(
+        --system-accordion-compact-item-header-top-to-text-space-size-s
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(
+        --system-accordion-compact-item-header-bottom-to-text-space-size-s
+    );
+    --spectrum-accordion-item-height-size-l: var(
+        --system-accordion-compact-item-height-size-l
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-l: var(
+        --system-accordion-compact-item-header-top-to-text-space-size-l
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(
+        --system-accordion-compact-item-header-bottom-to-text-space-size-l
+    );
+    --spectrum-accordion-item-height-size-xl: var(
+        --system-accordion-compact-item-height-size-xl
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-xl: var(
+        --system-accordion-compact-item-header-top-to-text-space-size-xl
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(
+        --system-accordion-compact-item-header-bottom-to-text-space-size-xl
+    );
+}
+
+:host([density='spacious']) {
+    --spectrum-accordion-item-header-line-height: var(
+        --system-accordion-spacious-item-header-line-height
+    );
+    --spectrum-accordion-item-header-top-to-text-space: var(
+        --system-accordion-spacious-item-header-top-to-text-space
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space: var(
+        --system-accordion-spacious-item-header-bottom-to-text-space
+    );
+    --spectrum-accordion-item-header-line-height-size-l: var(
+        --system-accordion-spacious-item-header-line-height-size-l
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-l: var(
+        --system-accordion-spacious-item-header-top-to-text-space-size-l
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(
+        --system-accordion-spacious-item-header-bottom-to-text-space-size-l
+    );
+    --spectrum-accordion-item-header-line-height-size-xl: var(
+        --system-accordion-spacious-item-header-line-height-size-xl
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-xl: var(
+        --system-accordion-spacious-item-header-top-to-text-space-size-xl
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(
+        --system-accordion-spacious-item-header-bottom-to-text-space-size-xl
+    );
+    --spectrum-accordion-item-header-line-height-size-s: var(
+        --system-accordion-spacious-item-header-line-height-size-s
+    );
+    --spectrum-accordion-item-header-top-to-text-space-size-s: var(
+        --system-accordion-spacious-item-header-top-to-text-space-size-s
+    );
+    --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(
+        --system-accordion-spacious-item-header-bottom-to-text-space-size-s
+    );
+}

packages/accordion/src/accordion.css

@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-accordion.css');
+@import url('./accordion-overrides.css');
 
 :host {
     --spectrum-logical-rotation: ;

packages/accordion/src/spectrum-accordion-item.css

@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
     position: relative;
 }
 
-:host(:first-child) {
+:host:first-child {
     border-block-start: 1px solid #0000;
     border-color: var(
         --mod-accordion-divider-color,
@@ -315,17 +315,9 @@ governing permissions and limitations under the License.
     );
 }
 
-@media (forced-colors: active) {
-    #header:after {
-        forced-color-adjust: none;
-        content: '';
-        position: absolute;
-        inset-inline-start: 0;
-    }
-}
-
 :host([open]) > #heading > .iconContainer > .indicator,
 :host([open]) > .iconContainer > .indicator {
+    transform: rotate(90deg);
     transform: var(--spectrum-logical-rotation,) rotate(90deg);
 }
 
@@ -336,3 +328,12 @@ governing permissions and limitations under the License.
 :host([disabled]) #header {
     cursor: default;
 }
+
+@media (forced-colors: active) {
+    #header:after {
+        forced-color-adjust: none;
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+    }
+}