fix(field-group,styles): use latest CSS

Author: castastrophe

.changeset/brave-crews-win.md

@@ -13,6 +13,7 @@
 '@spectrum-web-components/color-slider': patch
 '@spectrum-web-components/color-wheel': patch
 '@spectrum-web-components/divider': patch
+'@spectrum-web-components/field-group': patch
 '@spectrum-web-components/field-label': patch
 '@spectrum-web-components/help-text': patch
 '@spectrum-web-components/illustrated-message': patch

packages/field-group/package.json

@@ -62,7 +62,7 @@
         "@spectrum-web-components/help-text": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/fieldgroup": "6.0.1"
+        "@spectrum-css/fieldgroup": "7.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

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

@@ -11,9 +11,3 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    --spectrum-fieldgroup-margin: var(--system-field-group-margin);
-    --spectrum-fieldgroup-readonly-delimiter: var(
-        --system-field-group-readonly-delimiter
-    );
-}

packages/field-group/src/field-group.css

@@ -11,18 +11,8 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-field-group.css');
-@import url('./field-group-overrides.css');
 
-:host([horizontal][dir='rtl']) slot:not([name])::slotted(*:not(:last-child)),
-:host([dir='rtl']:not([vertical]))
-    slot:not([name])::slotted(*:not(:last-child)) {
+:host(:not([vertical])) .group {
     /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
-    margin: 0 0 0 var(--spectrum-fieldgroup-margin);
-}
-
-:host([horizontal][dir='ltr']) slot:not([name])::slotted(*:not(:last-child)),
-:host([dir='ltr']:not([vertical]))
-    slot:not([name])::slotted(*:not(:last-child)) {
-    /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
-    margin: 0 var(--spectrum-fieldgroup-margin) 0 0;
+    gap: var(--spectrum-spacing-300);
 }

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

@@ -38,7 +38,7 @@ governing permissions and limitations under the License.
 }
 
 :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) {
-    margin-inline-end: var(--spectrum-fieldgroup-margin);
+    margin-inline-end: var(--spectrum-spacing-300);
 }
 
 :host([horizontal]) .group .spectrum-HelpText {

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

@@ -813,8 +813,6 @@
     --system-drop-zone-heading-font-size-cjk: var(
         --spectrum-drop-zone-cjk-title-size
     );
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ',';
     --system-infield-button-border-width: var(--spectrum-border-width-100);
     --system-infield-button-border-color: inherit;
     --system-infield-button-border-radius: var(--spectrum-corner-radius-100);

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

@@ -829,8 +829,6 @@
     --system-drop-zone-heading-font-size-cjk: var(
         --spectrum-drop-zone-cjk-title-size
     );
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ',';
     --system-infield-button-border-width: 0;
     --system-infield-button-border-color: transparent;
     --system-infield-button-border-radius: var(--spectrum-corner-radius-75);

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

@@ -835,8 +835,6 @@
     --system-drop-zone-heading-font-size-cjk: var(
         --spectrum-drop-zone-cjk-title-size
     );
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ',';
     --system-infield-button-border-width: var(--spectrum-border-width-100);
     --system-infield-button-border-color: inherit;
     --system-infield-button-border-radius: var(--spectrum-corner-radius-100);

yarn.lock

@@ -7268,22 +7268,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/fieldgroup@npm:6.0.1":
-  version: 6.0.1
-  resolution: "@spectrum-css/fieldgroup@npm:6.0.1"
+"@spectrum-css/fieldgroup@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@spectrum-css/fieldgroup@npm:7.1.0"
   peerDependencies:
-    "@spectrum-css/checkbox": ">=9"
-    "@spectrum-css/helptext": ">=5"
-    "@spectrum-css/radio": ">=9"
-    "@spectrum-css/tokens": ">=14 || >=15"
+    "@spectrum-css/checkbox": ">=10.0.0 <11.0.0"
+    "@spectrum-css/helptext": ">=7.0.0 <8.0.0"
+    "@spectrum-css/radio": ">=10.0.0 <11.0.0"
+    "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
   peerDependenciesMeta:
     "@spectrum-css/checkbox":
       optional: true
     "@spectrum-css/helptext":
       optional: true
     "@spectrum-css/radio":
       optional: true
-  checksum: 10c0/8cd88744e799383ccbe772956447962ed5d9b44f26d742ca3cb66e6f5311dc4477990f1d5b2475fe696d32c042377d80cd8b4107de74b2a74d7790511c51327c
+    "@spectrum-css/tokens":
+      optional: true
+  checksum: 10c0/bb3b1fef4ddb1fe7dafc101bf72367c61cc1bcf050be98f0e55013f86c3f96b167a0b281d9c55b167616a6c16dc57b3c7fa2bd2df8c0bd5524ca741cf94e2667
   languageName: node
   linkType: hard
 
@@ -8318,7 +8320,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/field-group@workspace:packages/field-group"
   dependencies:
-    "@spectrum-css/fieldgroup": "npm:6.0.1"
+    "@spectrum-css/fieldgroup": "npm:7.1.0"
     "@spectrum-web-components/base": "npm:1.4.0"
     "@spectrum-web-components/help-text": "npm:1.4.0"
   languageName: unknown