chore: use latest breaking CSS dependencies

adobe · Sep 12, 2023 · 791d3be · 791d3be
1 parent 9bf1f0e
commit 791d3be
Show file tree

Hide file tree

Showing 35 changed files with 310 additions and 191 deletions.
diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json
@@ -63,7 +63,7 @@
         "@spectrum-web-components/popover": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbar": "^6.0.67"
+        "@spectrum-css/actionbar": "^7.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/action-button/package.json b/packages/action-button/package.json
@@ -64,7 +64,7 @@
         "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^4.0.13"
+        "@spectrum-css/actionbutton": "^5.0.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
@@ -552,6 +552,7 @@ governing permissions and limitations under the License.
         var(--spectrum-actionbutton-font-size)
     );
     overflow: hidden;
+    pointer-events: none;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -620,9 +621,11 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/action-group/package.json b/packages/action-group/package.json
@@ -64,7 +64,7 @@
         "@spectrum-web-components/reactive-controllers": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/actiongroup": "^3.0.61"
+        "@spectrum-css/actiongroup": "^4.0.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css
@@ -43,6 +43,12 @@ governing permissions and limitations under the License.
 ::slotted(*) {
     flex-shrink: 0;
 }
+::slotted(.focus-visible) {
+    z-index: 3;
+}
+::slotted(:focus-visible) {
+    z-index: 3;
+}
 :host(:not([vertical]):not([compact])) ::slotted(*) {
     flex-shrink: 0;
 }

diff --git a/packages/action-group/src/spectrum-config.js b/packages/action-group/src/spectrum-config.js
@@ -90,7 +90,7 @@ const config = {
                 {
                     find: [
                         builder.class('spectrum-ActionGroup-item'),
-                        builder.class('focus-ring'),
+                        builder.pseudoClass('focus-visible'),
                     ],
                     replace: [
                         {

diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json
@@ -69,7 +69,7 @@
         "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionmenu": "^4.0.58"
+        "@spectrum-css/actionmenu": "^5.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/button-group/package.json b/packages/button-group/package.json
@@ -61,7 +61,7 @@
         "@spectrum-web-components/button": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/buttongroup": "6.1.4"
+        "@spectrum-css/buttongroup": "^6.1.6"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -90,7 +90,7 @@
         "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/button": "^10.1.14"
+        "@spectrum-css/button": "^11.0.8"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
@@ -372,9 +372,11 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
@@ -479,8 +479,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([emphasized]).focus-visible #box:before,
-:host([emphasized]).focus-visible #input:checked + #box:before {
+:host([emphasized].focus-visible) #box:before,
+:host([emphasized].focus-visible) #input:checked + #box:before {
     border-color: var(
         --highcontrast-checkbox-color-focus,
         var(
@@ -489,8 +489,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([emphasized]):focus-visible #box:before,
-:host([emphasized]):focus-visible #input:checked + #box:before {
+:host([emphasized]:focus-visible) #box:before,
+:host([emphasized]:focus-visible) #input:checked + #box:before {
     border-color: var(
         --highcontrast-checkbox-color-focus,
         var(

diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css
@@ -166,28 +166,28 @@ governing permissions and limitations under the License.
         var(--spectrum-clear-button-background-color-down)
     );
 }
-:host.focus-visible,
+:host(.focus-visible),
 :host:focus-within {
     color: var(
         --mod-clear-button-icon-color-key-focus,
         var(--spectrum-clear-button-icon-color-key-focus)
     );
 }
-:host:focus-visible,
+:host(:focus-visible),
 :host:focus-within {
     color: var(
         --mod-clear-button-icon-color-key-focus,
         var(--spectrum-clear-button-icon-color-key-focus)
     );
 }
-:host.focus-visible .fill,
+:host(.focus-visible) .fill,
 :host:focus-within .fill {
     background-color: var(
         --mod-clear-button-background-color-key-focus,
         var(--spectrum-clear-button-background-color-key-focus)
     );
 }
-:host:focus-visible .fill,
+:host(:focus-visible) .fill,
 :host:focus-within .fill {
     background-color: var(
         --mod-clear-button-background-color-key-focus,
@@ -206,10 +206,10 @@ governing permissions and limitations under the License.
     inline-size: 100%;
     justify-content: center;
 }
-:host([variant='overBackground']).focus-visible {
+:host([variant='overBackground'].focus-visible) {
     outline: none;
 }
-:host([variant='overBackground']):focus-visible {
+:host([variant='overBackground']:focus-visible) {
     outline: none;
 }
 @media (forced-colors: active) {

diff --git a/packages/close-button/package.json b/packages/close-button/package.json
@@ -45,7 +45,7 @@
         "@spectrum-web-components/base": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/closebutton": "^3.1.14"
+        "@spectrum-css/closebutton": "^4.0.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css
@@ -172,28 +172,11 @@ governing permissions and limitations under the License.
         --highcontrast-closebutton-focus-indicator-color: ButtonText;
     }
     :host(.focus-visible):after {
-        border-radius: 100%;
-        box-shadow: 0 0 0
-            var(
-                --mod-closebutton-focus-indicator-thickness,
-                var(--spectrum-closebutton-focus-indicator-thickness)
-            )
-            var(
-                --highcontrast-closebutton-focus-indicator-color,
-                var(
-                    --mod-closebutton-focus-indicator-color,
-                    var(--spectrum-closebutton-focus-indicator-color)
-                )
-            );
-        content: '';
-        display: block;
         forced-color-adjust: none;
-        inset: 0;
         margin: var(
             --mod-closebutton-focus-indicator-gap,
             var(--spectrum-closebutton-focus-indicator-gap)
         );
-        position: absolute;
         transition: opacity
                 var(
                     --mod-closebutton-animation-duration,
@@ -208,28 +191,11 @@ governing permissions and limitations under the License.
                 ease-out;
     }
     :host(:focus-visible):after {
-        border-radius: 100%;
-        box-shadow: 0 0 0
-            var(
-                --mod-closebutton-focus-indicator-thickness,
-                var(--spectrum-closebutton-focus-indicator-thickness)
-            )
-            var(
-                --highcontrast-closebutton-focus-indicator-color,
-                var(
-                    --mod-closebutton-focus-indicator-color,
-                    var(--spectrum-closebutton-focus-indicator-color)
-                )
-            );
-        content: '';
-        display: block;
         forced-color-adjust: none;
-        inset: 0;
         margin: var(
             --mod-closebutton-focus-indicator-gap,
             var(--spectrum-closebutton-focus-indicator-gap)
         );
-        position: absolute;
         transition: opacity
                 var(
                     --mod-closebutton-animation-duration,
@@ -307,9 +273,11 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
+    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css
@@ -167,8 +167,8 @@ governing permissions and limitations under the License.
     );
     position: absolute;
 }
-:host([focused]),
-:host.focus-visible {
+:host(.focus-visible),
+:host([focused]) {
     block-size: var(
         --mod-colorhandle-focused-size,
         var(--spectrum-colorhandle-focused-size)
@@ -185,8 +185,8 @@ governing permissions and limitations under the License.
     );
     outline: none;
 }
-:host([focused]),
-:host:focus-visible {
+:host(:focus-visible),
+:host([focused]) {
     block-size: var(
         --mod-colorhandle-focused-size,
         var(--spectrum-colorhandle-focused-size)

diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json
@@ -49,7 +49,7 @@
         "@spectrum-web-components/iconset": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/icon": "^3.0.50",
+        "@spectrum-css/icon": "^4.0.1",
         "case": "^1.6.1",
         "cheerio": "^1.0.0-rc.2",
         "fast-glob": "^3.2.12",

diff --git a/packages/picker/package.json b/packages/picker/package.json
@@ -78,7 +78,7 @@
         "@spectrum-web-components/tray": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/picker": "^4.0.22"
+        "@spectrum-css/picker": "^7.0.8"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",