fix(radio,styles): use latest CSS

Author: castastrophe

.changeset/funny-insects-sin.md

@@ -0,0 +1,7 @@
+---
+'@spectrum-web-components/radio': patch
+'@spectrum-web-components/styles': patch
+'@spectrum-web-components/theme': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

package.json

@@ -149,7 +149,7 @@
         "alex": "^11.0.1",
         "cem-plugin-module-file-extensions": "^0.0.5",
         "chromatic": "^11.20.0",
-        "chromedriver": "^134.0.5",
+        "chromedriver": "134.0.5",
         "colors": "^1.4.0",
         "common-tags": "^1.8.2",
         "custom-elements-manifest": "^2.0.0",

packages/radio/src/radio.css

@@ -22,12 +22,17 @@ governing permissions and limitations under the License.
 }
 
 /**
- * Work around for https://github.com/adobe/spectrum-css/issues/2251
- **/
-:host([dir='rtl']) #button:after {
-    transform: translateX(50%) translateY(-50%);
+ * @todo updated designs call for the radio button to be visible;
+ * however as that can cause layout shifts, hold this update until a breaking release.
+ */
+:host([readonly]) #button {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    position: fixed;
+    inset-block-end: 100%;
+    inset-inline-end: 100%;
 }
 
-/**
- * End workaround
- **/
+:host([readonly]) #label {
+    margin-inline-start: 0;
+}

tools/theme/src/express/theme-core-tokens.css

@@ -40,6 +40,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

tools/theme/src/express/theme.css

@@ -41,6 +41,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

tools/theme/src/theme-core-tokens.css

@@ -35,6 +35,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

tools/theme/src/theme.css

@@ -36,6 +36,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

yarn.lock

@@ -258,7 +258,7 @@ __metadata:
     alex: "npm:^11.0.1"
     cem-plugin-module-file-extensions: "npm:^0.0.5"
     chromatic: "npm:^11.20.0"
-    chromedriver: "npm:^134.0.5"
+    chromedriver: "npm:134.0.5"
     colors: "npm:^1.4.0"
     common-tags: "npm:^1.8.2"
     custom-elements-manifest: "npm:^2.0.0"
@@ -13912,7 +13912,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromedriver@npm:^134.0.5":
+"chromedriver@npm:134.0.5":
   version: 134.0.5
   resolution: "chromedriver@npm:134.0.5"
   dependencies: