genesys-spark-components 4.97.0 → 4.98.0

package/dist/cjs/gux-truncate.cjs.entry.js

@@ -19,7 +19,7 @@ function getTextContentFromNodes(elements) {
         .join(' ');
 }
 
-const guxTruncateCss = ":host{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}::slotted(*){display:inline}.gux-truncate-multi-line{white-space:normal}.gux-truncate-multi-line .gux-truncate-slot-container{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-truncate-slot-container>*{display:inline}.gux-truncate-slot-container{display:block;text-overflow:ellipsis}.gux-overflow-hidden{overflow:hidden}";
+const guxTruncateCss = ":host{display:block;inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}::slotted(*){display:inline}.gux-truncate-multi-line{white-space:normal}.gux-truncate-multi-line .gux-truncate-slot-container{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}gux-tooltip{font-weight:normal;line-height:normal;text-align:start;overflow-wrap:break-word;white-space:normal}.gux-truncate-slot-container>*{display:inline}.gux-truncate-slot-container{display:block;text-overflow:ellipsis}.gux-overflow-hidden{overflow:hidden}";
 const GuxTruncateStyle0 = guxTruncateCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/{usage-8bf258fe.js → usage-1f47f9ce.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.97.0";
+const version = "4.98.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.css

@@ -25,11 +25,4 @@
   gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
   padding-block: var(--gse-ui-formFooter-sideSheet-desktop-topPadding) var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding);
   padding-inline: var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding);
-}
-
-:host(.gux-form-footer-modal-desktop) ::slotted(footer) {
-  gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
-  justify-content: flex-end;
-  padding-block: var(--gse-ui-formFooter-modal-desktop-topPadding) var(--gse-ui-formFooter-modal-desktop-bottomPadding);
-  padding-inline: var(--gse-ui-formFooter-modal-desktop-horizontalPadding) var(--gse-ui-formFooter-modal-desktop-horizontalPadding);
 }

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.js

@@ -34,7 +34,7 @@ export class GuxFormFooter {
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFooterPlacement",
-                    "resolved": "\"modal-desktop\" | \"page-desktop\" | \"page-mobile\" | \"side-sheet-desktop\"",
+                    "resolved": "\"page-desktop\" | \"page-mobile\" | \"side-sheet-desktop\"",
                     "references": {
                         "GuxFormFooterPlacement": {
                             "location": "import",

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.css

@@ -1,3 +1,7 @@
+:host {
+  display: flex;
+}
+
 ::slotted(*) {
   cursor: pointer;
 }
@@ -92,6 +96,8 @@
 }
 
 .gux-selector-card {
+  display: flex;
+  flex: 1 0 auto;
   inline-size: fit-content;
 }
 .gux-selector-card .gux-content {
@@ -104,7 +110,6 @@
   inline-size: var(--gse-ui-selectorCard-simple-minWidth);
   min-inline-size: var(--gse-ui-selectorCard-simple-minWidth);
   max-inline-size: var(--gse-ui-selectorCard-simple-maxWidth);
-  block-size: fit-content;
   min-block-size: var(--gse-ui-selectorCard-simple-minHeight);
   max-block-size: var(--gse-ui-selectorCard-simple-maxHeight);
   padding: var(--gse-ui-selectorCard-simple-padding);

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -1,7 +1,7 @@
 :host {
   display: inline-block;
-  inline-size: 300px;
-  min-inline-size: 300px;
+  inline-size: var(--gse-ui-search-width);
+  min-inline-size: var(--gse-ui-search-width);
 }
 
 ::slotted(input[disabled]) {
@@ -13,7 +13,6 @@
   flex-shrink: 1;
   flex-basis: 100%;
   inline-size: 100%;
-  min-inline-size: 20px;
   overflow: hidden;
   font-family: var(--gse-ui-search-counter-text-fontFamily);
   font-size: var(--gse-ui-search-counter-text-fontSize);
@@ -144,9 +143,9 @@
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-divider {
   box-sizing: border-box;
   align-self: center;
-  block-size: 16px;
+  block-size: var(--gse-ui-search-counter-divider-height);
   color: var(--gse-ui-search-counter-default-foregroundColor);
-  border: 1px var(--gse-ui-search-counter-divider-border-style) var(--gse-ui-search-counter-divider-border-color);
+  border: var(--gse-ui-search-counter-divider-border-width) var(--gse-ui-search-counter-divider-border-style) var(--gse-ui-search-counter-divider-border-color);
 }
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-buttons {
   display: flex;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.css

@@ -18,8 +18,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -35,7 +35,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -99,8 +99,8 @@
 
 ::slotted(input[type=checkbox]) {
   display: inline-grid;
-  width: var(--gse-ui-checkbox-icon-width);
-  height: var(--gse-ui-checkbox-icon-height);
+  inline-size: var(--gse-ui-checkbox-icon-width);
+  block-size: var(--gse-ui-checkbox-icon-height);
   margin: 0;
   text-align: center;
   vertical-align: middle;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/gux-form-field-checkbox-group.css

@@ -3,7 +3,7 @@
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -34,8 +34,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -51,7 +51,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -85,8 +85,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -102,7 +102,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -126,14 +126,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -157,18 +157,18 @@
 }
 
 ::slotted(gux-form-field-checkbox) {
-  padding-top: var(--gse-ui-formControl-group-gapItems);
+  padding-block-start: var(--gse-ui-formControl-group-gapItems);
 }
 
 ::slotted(gux-form-field-checkbox:first-of-type) {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 :host(.gux-group-checkbox) ::slotted(gux-form-field-checkbox) {
-  padding-left: 24px;
+  padding-inline-start: 24px;
 }
 :host(.gux-group-checkbox) slot[name=group-checkbox]::slotted(gux-form-field-checkbox) {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .gux-form-field-legend-label {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.css

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -100,14 +100,14 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  width: var(--gse-ui-colorPicker-input-swatchSizing);
-  min-width: var(--gse-ui-colorPicker-input-swatchSizing);
-  height: var(--gse-ui-colorPicker-input-swatchSizing);
+  inline-size: var(--gse-ui-colorPicker-input-swatchSizing);
+  min-inline-size: var(--gse-ui-colorPicker-input-swatchSizing);
+  block-size: var(--gse-ui-colorPicker-input-swatchSizing);
   padding: 0;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-align: right;
+  text-align: end;
   text-overflow: ellipsis;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
@@ -138,8 +138,8 @@
   align-items: center;
   align-self: auto;
   order: 0;
-  width: var(--gse-ui-formControl-input-colorPicker-size);
-  height: var(--gse-ui-formControl-input-colorPicker-size);
+  inline-size: var(--gse-ui-formControl-input-colorPicker-size);
+  block-size: var(--gse-ui-formControl-input-colorPicker-size);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -3,7 +3,7 @@
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -34,8 +34,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -51,7 +51,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -75,14 +75,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -111,5 +111,5 @@
 
 .gux-input-and-error-container {
   flex-grow: 1;
-  width: 100%;
+  inline-size: 100%;
 }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/gux-form-field-file.css

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.css

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -100,11 +100,11 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
-  padding-bottom: 0;
+  inline-size: 100%;
+  padding-block-end: 0;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
-  text-align: right;
+  text-align: end;
   text-overflow: ellipsis;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
@@ -124,7 +124,7 @@
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-input-and-error-container .gux-input .gux-input-container {
   box-sizing: border-box;
@@ -137,8 +137,8 @@
   align-items: center;
   align-self: auto;
   order: 0;
-  width: 100%;
-  height: var(--gse-ui-formControl-input-textfield-height);
+  inline-size: 100%;
+  block-size: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
@@ -168,7 +168,7 @@
   flex: 0 1 14px;
   align-self: auto;
   order: 0;
-  margin-left: var(--gse-ui-formControl-spinButton-gap);
+  margin-inline-start: var(--gse-ui-formControl-spinButton-gap);
 }
 .gux-step-buttons-container .gux-step-button {
   display: flex;
@@ -188,6 +188,6 @@
 }
 .gux-step-buttons-container .gux-step-button gux-icon {
   flex: 0 0 auto;
-  width: 14px;
-  height: 14px;
+  inline-size: 14px;
+  block-size: 14px;
 }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.css

@@ -2,7 +2,7 @@
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -50,7 +50,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -74,14 +74,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.css

@@ -39,8 +39,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -56,7 +56,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -73,7 +73,7 @@
 
 :host {
   display: block;
-  padding-top: 4px;
+  padding-block-start: 4px;
 }
 
 :host(.gux-disabled) {
@@ -115,8 +115,8 @@
 
 ::slotted(input[type=radio]) {
   display: inline-grid;
-  width: var(--gse-ui-radioButton-icon-width);
-  height: var(--gse-ui-radioButton-icon-height);
+  inline-size: var(--gse-ui-radioButton-icon-width);
+  block-size: var(--gse-ui-radioButton-icon-height);
   margin: 0;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.css

@@ -2,7 +2,7 @@
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -50,7 +50,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -84,8 +84,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -101,7 +101,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -125,14 +125,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -152,11 +152,11 @@
 }
 
 ::slotted(gux-form-field-radio) {
-  padding-top: var(--gse-ui-formControl-group-gapItems);
+  padding-block-start: var(--gse-ui-formControl-group-gapItems);
 }
 
 ::slotted(gux-form-field-radio:first-of-type) {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 :host([disabled]) ::slotted(label) {