fix: use latest @spectrum-css/* versions

package.json

@@ -93,7 +93,7 @@
         "@open-wc/demoing-storybook": "^2.4.4",
         "@open-wc/polyfills-loader": "^0.3.3",
         "@open-wc/testing": "^2.5.29",
-        "@spectrum-css/table": "^3.0.0-beta.3",
+        "@spectrum-css/table": "^3.0.0-beta.4",
         "@types/chai": "^4.1.7",
         "@types/command-line-args": "^5.0.0",
         "@types/command-line-usage": "^5.0.1",

packages/accordion/package.json

@@ -50,10 +50,11 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/accordion": "^3.0.0-beta.2"
+        "@spectrum-css/accordion": "^3.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
+        "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
         "@spectrum-web-components/shared": "^0.7.4",
         "tslib": "^2.0.0"

packages/accordion/src/AccordionItem.ts

@@ -19,8 +19,9 @@ import {
     ifDefined,
 } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-
+import '@spectrum-web-components/icon/sp-icon.js';
 import { ChevronRightMediumIcon } from '@spectrum-web-components/icons-ui';
+import chevronRightMediumIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js';
 
 import styles from './accordion-item.css.js';
 
@@ -30,7 +31,7 @@ import styles from './accordion-item.css.js';
  */
 export class AccordionItem extends Focusable {
     public static get styles(): CSSResultArray {
-        return [styles];
+        return [styles, chevronRightMediumIconStyles];
     }
 
     @property({ type: Boolean, reflect: true })
@@ -92,7 +93,7 @@ export class AccordionItem extends Focusable {
                 >
                     ${this.label}
                 </button>
-                <sp-icon id="indicator" size="xs">
+                <sp-icon id="indicator" size="xs" class="chevron-right-medium">
                     ${ChevronRightMediumIcon({ hidden: true })}
                 </sp-icon>
             </h3>

packages/accordion/src/accordion-item.css

@@ -11,3 +11,49 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-accordion-item.css';
+
+:host {
+    --spectrum-accordion-item-header-height: 46px;
+}
+
+/**
+ * What follows are styles working around: https://github.com/adobe/spectrum-css/issues/1033
+ */
+#indicator {
+    /* .spectrum-Accordion-itemIndicator */
+    top: calc(
+        50% -
+            var(
+                --spectrum-accordion-icon-height,
+                var(--spectrum-global-dimension-size-125)
+            ) / 2
+    );
+}
+
+#heading {
+    /* .spectrum-Accordion-itemHeading */
+    height: auto;
+    position: relative;
+}
+
+#header {
+    /* .spectrum-Accordion-itemHeader */
+    min-height: calc(
+        100% -
+            var(
+                --spectrum-accordion-item-border-size,
+                var(--spectrum-alias-border-size-thin)
+            )
+    );
+}
+
+:host([open]) > #header:after {
+    /* .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after */
+    height: calc(
+        100% -
+            var(
+                --spectrum-accordion-item-border-size,
+                var(--spectrum-alias-border-size-thin)
+            )
+    );
+}

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

@@ -12,11 +12,17 @@ governing permissions and limitations under the License.
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host([dir='ltr']) #indicator {
     /* [dir=ltr] .spectrum-Accordion-itemIndicator */
-    left: var(--spectrum-accordion-icon-spacing, 16px);
+    left: var(
+        --spectrum-accordion-item-padding-x,
+        var(--spectrum-global-dimension-size-225)
+    );
 }
 :host([dir='rtl']) #indicator {
     /* [dir=rtl] .spectrum-Accordion-itemIndicator */
-    right: var(--spectrum-accordion-icon-spacing, 16px);
+    right: var(
+        --spectrum-accordion-item-padding-x,
+        var(--spectrum-global-dimension-size-225)
+    );
     transform: matrix(-1, 0, 0, 1, 0, 0);
 }
 #indicator {
@@ -30,7 +36,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
                         --spectrum-accordion-item-border-size,
                         var(--spectrum-alias-border-size-thin)
                     )
-            ) / 2 - 5px
+            ) / 2 -
+            var(
+                --spectrum-accordion-icon-height,
+                var(--spectrum-global-dimension-size-125)
+            ) / 2
     );
     transition: transform ease
         var(--spectrum-global-animation-duration-100, 0.13s); /* .spectrum-Accordion-itemIndicator */
@@ -66,22 +76,58 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 #heading {
     /* .spectrum-Accordion-itemHeading */
     margin: 0;
+    height: var(--spectrum-accordion-item-height, 40px);
+    box-sizing: border-box;
 }
 :host([dir='ltr']) #header {
     /* [dir=ltr] .spectrum-Accordion-itemHeader */
-    padding-left: calc(var(--spectrum-accordion-item-padding, 16px) * 2 + 2px);
+    padding-left: calc(
+        var(
+                --spectrum-accordion-item-padding-x,
+                var(--spectrum-global-dimension-size-225)
+            ) +
+            var(
+                --spectrum-accordion-icon-width,
+                var(--spectrum-global-dimension-size-75)
+            ) +
+            var(
+                --spectrum-accordion-icon-gap,
+                var(--spectrum-global-dimension-size-100)
+            ) +
+            var(
+                --spectrum-accordion-item-border-left-size-key-focus,
+                var(--spectrum-alias-border-size-thick)
+            )
+    ); /* [dir=ltr] .spectrum-Accordion-itemHeader */
     padding-right: var(
-        --spectrum-accordion-item-padding,
-        16px
+        --spectrum-accordion-item-padding-x,
+        var(--spectrum-global-dimension-size-225)
     ); /* [dir=ltr] .spectrum-Accordion-itemHeader */
     text-align: left;
 }
 :host([dir='rtl']) #header {
     /* [dir=rtl] .spectrum-Accordion-itemHeader */
-    padding-right: calc(var(--spectrum-accordion-item-padding, 16px) * 2 + 2px);
+    padding-right: calc(
+        var(
+                --spectrum-accordion-item-padding-x,
+                var(--spectrum-global-dimension-size-225)
+            ) +
+            var(
+                --spectrum-accordion-icon-width,
+                var(--spectrum-global-dimension-size-75)
+            ) +
+            var(
+                --spectrum-accordion-icon-gap,
+                var(--spectrum-global-dimension-size-100)
+            ) +
+            var(
+                --spectrum-accordion-item-border-left-size-key-focus,
+                var(--spectrum-alias-border-size-thick)
+            )
+    ); /* [dir=rtl] .spectrum-Accordion-itemHeader */
     padding-left: var(
-        --spectrum-accordion-item-padding,
-        16px
+        --spectrum-accordion-item-padding-x,
+        var(--spectrum-global-dimension-size-225)
     ); /* [dir=rtl] .spectrum-Accordion-itemHeader */
     text-align: right;
 }
@@ -151,7 +197,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     bottom: calc(
         -1 * var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin))
     );
-    width: var(--spectrum-accordion-item-border-size-key-focus, 2px);
+    width: var(
+        --spectrum-accordion-item-border-left-size-key-focus,
+        var(--spectrum-alias-border-size-thick)
+    );
 }
 #content {
     /* .spectrum-Accordion-itemContent */
@@ -225,7 +274,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 #header:focus-visible:after {
     /* .spectrum-Accordion-itemHeader.focus-ring:after */
     background-color: var(
-        --spectrum-accordion-border-left-color-key-focus,
+        --spectrum-accordion-item-border-left-color-key-focus,
         var(--spectrum-alias-border-color-focus)
     );
 }

packages/action-group/package.json

@@ -48,7 +48,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/actiongroup": "^1.0.0-beta.2",
+        "@spectrum-css/actiongroup": "^1.0.0-beta.3",
         "@spectrum-web-components/button": "^0.9.4",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-workflow": "^0.3.6"

packages/action-group/src/spectrum-action-group.css

@@ -19,17 +19,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-ActionGroup .spectrum-ActionGroup-item */
     flex-shrink: 0;
 }
-:host([dir='ltr']) ::slotted(*:not(:first-of-type)) {
-    /* [dir=ltr] .spectrum-ActionGroup .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
-    margin-left: var(
-        --spectrum-actionbuttongroup-text-button-gap-x,
+:host(:not([vertical]):not([compact])) {
+    /* .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) */
+    margin-top: calc(
+        -1 * var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100))
+    );
+}
+:host(:not([vertical]):not([compact])) ::slotted(*) {
+    /* .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item */
+    flex-shrink: 0;
+    margin-top: var(
+        --spectrum-actiongroup-button-gap-y,
         var(--spectrum-global-dimension-size-100)
     );
 }
-:host([dir='rtl']) ::slotted(*:not(:first-of-type)) {
-    /* [dir=rtl] .spectrum-ActionGroup .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
+:host([dir='ltr']:not([vertical]):not([compact])) ::slotted(:not(:last-child)) {
+    /* [dir=ltr] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) */
     margin-right: var(
-        --spectrum-actionbuttongroup-text-button-gap-x,
+        --spectrum-actiongroup-button-gap-x,
+        var(--spectrum-global-dimension-size-100)
+    );
+}
+:host([dir='rtl']:not([vertical]):not([compact])) ::slotted(:not(:last-child)) {
+    /* [dir=rtl] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) */
+    margin-left: var(
+        --spectrum-actiongroup-button-gap-x,
         var(--spectrum-global-dimension-size-100)
     );
 }
@@ -38,18 +52,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     display: inline-flex;
     flex-direction: column;
 }
-:host([dir='ltr'][vertical]) ::slotted(*:not(:first-of-type)) {
+:host([dir='ltr'][vertical]) ::slotted(:not(:first-child)) {
     /* [dir=ltr] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-left: 0;
 }
-:host([dir='rtl'][vertical]) ::slotted(*:not(:first-of-type)) {
+:host([dir='rtl'][vertical]) ::slotted(:not(:first-child)) {
     /* [dir=rtl] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-right: 0;
 }
-:host([vertical]) ::slotted(*:not(:first-of-type)) {
+:host([vertical]) ::slotted(:not(:first-child)) {
     /* .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-top: var(
-        --spectrum-actionbuttongroup-text-button-gap-y,
+        --spectrum-actiongroup-button-gap-y,
         var(--spectrum-global-dimension-size-100)
     );
 }
@@ -64,31 +78,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host([vertical][vertical]) {
     /* .spectrum-ActionGroup--vertical.spectrum-ActionGroup--vertical */
     margin-top: var(
-        --spectrum-actionbuttongroup-text-button-gap-y,
+        --spectrum-actiongroup-button-gap-y,
         var(--spectrum-global-dimension-size-100)
     );
 }
-:host([dir='ltr'][compact][quiet]) ::slotted(*:not(:first-of-type)) {
+:host([dir='ltr'][compact][quiet]) ::slotted(:not(:first-child)) {
     /* [dir=ltr] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-left: var(--spectrum-global-dimension-size-25);
 }
-:host([dir='rtl'][compact][quiet]) ::slotted(*:not(:first-of-type)) {
+:host([dir='rtl'][compact][quiet]) ::slotted(:not(:first-child)) {
     /* [dir=rtl] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-right: var(--spectrum-global-dimension-size-25);
 }
-:host([compact][quiet]) ::slotted(*:not(:first-of-type)) {
+:host([compact][quiet]) ::slotted(:not(:first-child)) {
     /* .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-top: 0;
 }
-:host([dir='ltr'][compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) {
+:host([dir='ltr'][compact][quiet][vertical]) ::slotted(:not(:first-child)) {
     /* [dir=ltr] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-left: 0;
 }
-:host([dir='rtl'][compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) {
+:host([dir='rtl'][compact][quiet][vertical]) ::slotted(:not(:first-child)) {
     /* [dir=rtl] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-right: 0;
 }
-:host([compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) {
+:host([compact][quiet][vertical]) ::slotted(:not(:first-child)) {
     /* .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-top: var(--spectrum-global-dimension-size-25);
 }
@@ -172,11 +186,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     margin-left: 0;
 }
-:host([compact]:not([quiet])) ::slotted(*):hover {
+:host([compact]:not([quiet])) ::slotted([selected]) {
+    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected */
+    z-index: 1;
+}
+:host([compact]:not([quiet])) ::slotted(:hover) {
     /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover */
     z-index: 2;
 }
-:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) {
+:host([compact]:not([quiet])) ::slotted(:focus-visible) {
+    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.focus-ring */
+    z-index: 3;
+}
+:host([dir='ltr'][compact]:not([quiet])) ::slotted(:not(:first-child)) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-left: calc(
         -1 * var(
@@ -185,8 +207,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             ) / 2
     );
 }
-:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)),
-:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) {
+:host([dir='ltr'][compact]:not([quiet])) ::slotted(:not(:first-child)),
+:host([dir='rtl'][compact]:not([quiet])) ::slotted(:not(:first-child)) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item,
    * [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-right: calc(
@@ -196,7 +218,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             ) / 2
     );
 }
-:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) {
+:host([dir='rtl'][compact]:not([quiet])) ::slotted(:not(:first-child)) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-left: calc(
         -1 * var(
@@ -209,7 +231,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item */
     border-radius: 0;
 }
-:host([compact][vertical]:not([quiet])) ::slotted(*:not(:first-of-type)) {
+:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)) {
     /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */
     margin-top: calc(
         -1 * var(