chore: update dependency @spectrum-css/stepper to v7.1.3

.changeset/lazy-walls-jump.md

@@ -0,0 +1,20 @@
+---
+'@spectrum-web-components/number-field': patch
+'@spectrum-web-components/styles': patch
+---
+
+📝 [#​3621](https://github.com/adobe/spectrum-css/pull/​3621) Thanks [@​marissahuysentruyt](https://github.com/​marissahuysentruyt)!
+
+-   Updates `--spectrum-stepper-border-color-focus-hover` from `gray-800` to `gray-900`.
+-   Updates `--spectrum-stepper-buttons-border-color-keyboard-focus` from `gray-900` to `gray-800` to match the rest of the border color on keyboard focus.
+
+📝 [#​3594](https://github.com/adobe/spectrum-css/pull/​3594) Thanks [@​TarunAdobe](https://github.com/TarunAdobe)!
+
+Updates stepper's key-focus border color (`--spectrum-stepper-border-color-keyboard-focus`) to `--spectrum-gray-800`.
+
+📝 [#​3536](https://github.com/adobe/spectrum-css/pull/​3536) Thanks [@​marissahuysentruyt](https://github.com/​marissahuysentruyt)!
+
+-   Adjusts the background-color of the infield button components within stepper to use `gray-100` as opposed to `gray-25`.
+-   This corresponds to the background-color updates picker has for S2.
+-   Corrects the border color for the default picker for S2 foundations, using `gray-500` (instead of `gray-800`) to align with other field/form components.
+-   Refactors the keyboard-focused placeholder selector to include the label to avoid unexpectedly targeting the nested placeholder class.

packages/number-field/package.json

@@ -75,7 +75,7 @@
     },
     "devDependencies": {
         "@formatjs/intl-numberformat": "^8.3.5",
-        "@spectrum-css/stepper": "7.0.0-s2-foundations.19"
+        "@spectrum-css/stepper": "7.1.3"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/number-field/src/number-field-overrides.css

@@ -64,6 +64,9 @@ governing permissions and limitations under the License.
     --spectrum-stepper-border-color-keyboard-focus-invalid: var(
         --system-stepper-border-color-keyboard-focus-invalid
     );
+    --spectrum-stepper-border-color-disabled: var(
+        --system-stepper-border-color-disabled
+    );
     --spectrum-stepper-button-border-width-disabled: var(
         --system-stepper-button-border-width-disabled
     );

packages/number-field/src/spectrum-number-field.css

@@ -138,6 +138,10 @@ governing permissions and limitations under the License.
     --mod-textfield-border-color: var(--spectrum-stepper-border-color);
 }
 
+#textfield:not(.spectrum-Stepper--quiet) {
+    --mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
+}
+
 :host(:not([disabled])[focused]) #textfield,
 :host(:not([disabled])) #textfield:focus {
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
@@ -209,7 +213,7 @@ governing permissions and limitations under the License.
         --mod-stepper-buttons-background-color: transparent;
     }
 
-    :host(:hover) #textfield:not(.is-invalid, .is-disabled) {
+    :host(:hover) #textfield:not(.is-invalid, .is-disabled, .is-focused) {
         --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
     }
 

tools/styles/tokens-v2/system-theme-bridge.css

@@ -1452,16 +1452,16 @@
     --system-stepper-border-color-default: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-800);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
-    --system-stepper-buttons-background-color: var(--spectrum-gray-25);
+    --system-stepper-buttons-background-color: var(--spectrum-gray-100);
     --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-color-keyboard-focus: var(
-        --spectrum-gray-900
+        --spectrum-gray-800
     );
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
     --system-stepper-border-color-invalid: var(
@@ -1476,8 +1476,9 @@
     --system-stepper-border-color-keyboard-focus-invalid: var(
         --spectrum-negative-border-color-key-focus
     );
+    --system-stepper-border-color-disabled: var(--spectrum-gray-300);
     --system-stepper-button-border-width-disabled: var(
-        --spectrum-border-width-100
+        --spectrum-border-width-200
     );
     --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
     --system-stepper-quiet-buttons-border-style: none;

tools/styles/tokens/express/system-theme-bridge.css

@@ -1494,6 +1494,9 @@
     --system-stepper-border-color-focus-invalid: transparent;
     --system-stepper-border-color-focus-hover-invalid: transparent;
     --system-stepper-border-color-keyboard-focus-invalid: transparent;
+    --system-stepper-border-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
     --system-stepper-button-border-width-disabled: 0;
     --system-stepper-buttons-background-color-disabled: var(
         --spectrum-disabled-background-color

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -1470,16 +1470,16 @@
     --system-stepper-border-color-default: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-800);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
     --system-stepper-buttons-background-color: var(--spectrum-gray-50);
     --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-color-keyboard-focus: var(
-        --spectrum-gray-900
+        --spectrum-gray-800
     );
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
     --system-stepper-border-color-invalid: var(
@@ -1494,6 +1494,7 @@
     --system-stepper-border-color-keyboard-focus-invalid: var(
         --spectrum-negative-border-color-key-focus
     );
+    --system-stepper-border-color-disabled: transparent;
     --system-stepper-button-border-width-disabled: var(
         --spectrum-border-width-100
     );

yarn.lock

@@ -7605,19 +7605,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/stepper@npm:7.0.0-s2-foundations.19":
-  version: 7.0.0-s2-foundations.19
-  resolution: "@spectrum-css/stepper@npm:7.0.0-s2-foundations.19"
+"@spectrum-css/stepper@npm:7.1.3":
+  version: 7.1.3
+  resolution: "@spectrum-css/stepper@npm:7.1.3"
   peerDependencies:
-    "@spectrum-css/actionbutton": ">=6"
-    "@spectrum-css/icon": ">=7"
-    "@spectrum-css/infieldbutton": ">=5"
-    "@spectrum-css/textfield": ">=7"
-    "@spectrum-css/tokens": ">=14"
+    "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0"
+    "@spectrum-css/icon": ">=9.0.0 <10.0.0"
+    "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0"
+    "@spectrum-css/textfield": ">=8.0.0 <9.0.0"
+    "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
   peerDependenciesMeta:
+    "@spectrum-css/actionbutton":
+      optional: true
+    "@spectrum-css/icon":
+      optional: true
     "@spectrum-css/infieldbutton":
       optional: true
-  checksum: 10c0/b1c1eabd00cca8121187d68dfdd155a84b52d3fb6305356a06b2ac8234811587366dad6e1a4b4a20301b02b98dc75c1e11dde4cd547d2fd8928fe1b1e5f5e1c2
+    "@spectrum-css/textfield":
+      optional: true
+    "@spectrum-css/tokens":
+      optional: true
+  checksum: 10c0/6a9e53a7d370a6e0bb73b70ffb22873575cc6c14ad799a0f9936e51cdd2bea63bf46b3a2fcc1346eaf235ed6a13778beafc1487e087652b984347aa5bf5e25ee
   languageName: node
   linkType: hard
 
@@ -8541,7 +8549,7 @@ __metadata:
   dependencies:
     "@formatjs/intl-numberformat": "npm:^8.3.5"
     "@internationalized/number": "npm:^3.6.0"
-    "@spectrum-css/stepper": "npm:7.0.0-s2-foundations.19"
+    "@spectrum-css/stepper": "npm:7.1.3"
     "@spectrum-web-components/base": "npm:1.4.0"
     "@spectrum-web-components/icon": "npm:1.4.0"
     "@spectrum-web-components/icons-ui": "npm:1.4.0"