npm - genesys-spark-components - Versions diffs - 4.0.0-beta.60 → 4.0.0-beta.62 - Mend

genesys-spark-components 4.0.0-beta.60 → 4.0.0-beta.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/dist/collection/components/stable/gux-blank-state/gux-blank-state.css CHANGED Viewed

@@ -1,33 +1,3 @@
-/**
-  * @prop --gse-ui-badge-height
-  * @prop --gse-ui-badge-height
-  * @prop --gse-ui-blankState-backgroundColor
-  * @prop --gse-ui-blankState-borderRadius
-  * @prop --gse-ui-blankState-gapContent
-  * @prop --gse-ui-blankState-gapMain
-  * @prop --gse-ui-blankState-gapMessage
-  * @prop --gse-ui-blankState-icon-size-lg
-  * @prop --gse-ui-blankState-icon-size-sm
-  * @prop --gse-ui-blankState-iconColor
-  * @prop --gse-ui-blankState-padding
-  * @prop --gse-ui-blankState-large-minWidth
-  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontFamily
-  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontSize
-  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontWeight
-  * @prop --gse-ui-progressAndLoading-blankState-large-header-lineHeight
-  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontFamily
-  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontSize
-  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontWeight
-  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-lineHeight
-  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontFamily
-  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontSize
-  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontWeight
-  * @prop --gse-ui-progressAndLoading-blankState-small-header-lineHeight
-  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontFamily
-  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontSize
-  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontWeight
-  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-lineHeight
-  */
 :host {
   display: flex;
   flex-direction: column;

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.css CHANGED Viewed

@@ -1,45 +1,3 @@
-/**
-  * @prop --gse-semantic-focusRing-cornerRadius
-  * @prop --gse-semantic-focusRing-default-border-color
-  * @prop --gse-semantic-focusRing-default-border-style
-  * @prop --gse-semantic-focusRing-default-border-width
-  * @prop --gse-semantic-focusRing-offset
-  * @prop --gse-ui-breadcrumbs-primary-height
-  * @prop --gse-ui-breadcrumbs-primary-separator-padding
-  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontFamily
-  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontSize
-  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontWeight
-  * @prop --gse-ui-breadcrumbs-primary-separator-typography-lineHeight
-  * @prop --gse-ui-breadcrumbs-secondary-height
-  * @prop --gse-ui-breadcrumbs-secondary-separator-padding
-  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontFamily
-  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontSize
-  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontWeight
-  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-lineHeight
-  * @prop --gse-ui-breadcrumbs-separator-color
-  * @prop --gse-ui-link-active-foregroundColor
-  * @prop --gse-ui-link-default-foregroundColor
-  * @prop --gse-ui-link-hover-foregroundColor
-  * @prop --gse-ui-link-inLine-medium-text-fontFamily
-  * @prop --gse-ui-link-inLine-medium-text-fontSize
-  * @prop --gse-ui-link-inLine-medium-text-fontWeight
-  * @prop --gse-ui-link-inLine-medium-text-lineHeight
-  * @prop --gse-ui-link-inLine-medium-underlinedText-fontFamily
-  * @prop --gse-ui-link-inLine-medium-underlinedText-fontSize
-  * @prop --gse-ui-link-inLine-medium-underlinedText-fontWeight
-  * @prop --gse-ui-link-inLine-medium-underlinedText-lineHeight
-  * @prop --gse-ui-link-inLine-medium-underlinedText-textDecoration
-  * @prop --gse-ui-link-inLine-small-text-fontFamily
-  * @prop --gse-ui-link-inLine-small-text-fontSize
-  * @prop --gse-ui-link-inLine-small-text-fontWeight
-  * @prop --gse-ui-link-inLine-small-text-lineHeight
-  * @prop --gse-ui-link-inLine-small-underlinedText-fontFamily
-  * @prop --gse-ui-link-inLine-small-underlinedText-fontSize
-  * @prop --gse-ui-link-inLine-small-underlinedText-fontWeight
-  * @prop --gse-ui-link-inLine-small-underlinedText-lineHeight
-  * @prop --gse-ui-link-inLine-small-underlinedText-textDecoration
-  * @prop --gse-ui-link-visited-foregroundColor
-  */
 .gux-breadcrumb-generation {
   display: flex;
   flex-direction: row;

package/dist/collection/components/stable/gux-card/gux-card.css CHANGED Viewed

@@ -1,22 +1,3 @@
-/**
-  * @prop --gse-ui-card-backgroundColor
-  * @prop --gse-ui-card-borderRadius
-  * @prop --gse-ui-card-borderless-border-color
-  * @prop --gse-ui-card-borderless-border-style
-  * @prop --gse-ui-card-borderless-border-width
-  * @prop --gse-ui-card-default-border-color
-  * @prop --gse-ui-card-default-border-style
-  * @prop --gse-ui-card-default-border-width
-  * @prop --gse-ui-card-padding
-  * @prop --gse-ui-card-raised-border-color
-  * @prop --gse-ui-card-raised-border-style
-  * @prop --gse-ui-card-raised-border-width
-  * @prop --gse-ui-card-raised-boxShadow-blur
-  * @prop --gse-ui-card-raised-boxShadow-color
-  * @prop --gse-ui-card-raised-boxShadow-spread
-  * @prop --gse-ui-card-raised-boxShadow-x
-  * @prop --gse-ui-card-raised-boxShadow-y
-*/
 :host {
   display: block;
   width: fit-content;

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css CHANGED Viewed

@@ -1,6 +1,3 @@
-/**
-  * @prop --gse-ui-dataTableItems-editColumn-editColumnItem-gap
-  */
 :host([gs-reorder-indicator=above]) .gux-container {
   border-top-color: #aac9ff;
 }
@@ -33,6 +30,7 @@
 }
 .gux-container .gux-reorder {
   all: unset;
+  display: flex;
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
@@ -65,8 +63,8 @@
 }
 .gux-container .gux-select gux-text-highlight {
   position: absolute;
-  top: 0;
-  left: 31px;
+  top: 1px;
+  left: calc(var(--gse-ui-icon-size-sm) + var(--gse-ui-checkbox-gap));
   color: transparent;
   pointer-events: none;
 }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.css CHANGED Viewed

@@ -1,7 +1,3 @@
-/**
-  * @prop --gse-ui-dataTableItems-editColumn-editColumnContent-gap
-  * @prop --gse-ui-dataTableItems-editColumn-editColumnContent-padding
-  */
 .gux-container {
   width: 320px;
   min-width: 320px;

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js CHANGED Viewed

@@ -107,7 +107,7 @@ export class GuxContextMenu {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (h(Host, null, h("gux-popup", { expanded: this.isOpen, "exceed-target-width": true }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
+    return (h(Host, null, h("gux-popup", { expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
         this.i18n('contextMenuScreenreaderText') })))), h("div", { slot: "popup", class: "gux-list-container" }, h("gux-list", { onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-context-menu"; }

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
-  * @prop --gse-ui-copyToClipboard-contentContainer-gap
-  * @prop --gse-ui-tooltip-targetOffset - not using this token because the target offset is hardcoded to 16 within gux-tooltip
-  * @prop --gse-ui-copyToClipboard-iconContainer-padding
-  * @prop --gse-ui-copyToClipboard-label-active-backgroundColor
-  * @prop --gse-ui-copyToClipboard-label-borderRadius
-  * @prop --gse-ui-copyToClipboard-label-foregroundColor
-  * @prop --gse-ui-copyToClipboard-label-padding
-  * @prop --gse-ui-copyToClipboard-label-text-fontFamily
-  * @prop --gse-ui-copyToClipboard-label-text-fontSize
-  * @prop --gse-ui-copyToClipboard-label-text-fontWeight
-  * @prop --gse-ui-copyToClipboard-label-text-lineHeight
-  * @prop --gse-ui-copyToClipboard-label-text-textDecoration
-  * @prop --gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor
-  * @prop --gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor
-  * @prop --gse-ui-icon-size-sm
-  */
 button {
   all: unset;
 }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.css CHANGED Viewed

@@ -131,7 +131,7 @@
   align-self: auto;
   justify-content: center;
   order: 0;
-  padding: 2;
+  padding: 0;
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   background: transparent;
   border: none;
@@ -142,6 +142,7 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: 2px var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  padding: 2px;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.css CHANGED Viewed

@@ -20,5 +20,5 @@ gux-button-slot .gux-icon-container gux-icon {
   order: 0;
   width: 16px;
   height: 16px;
-  color: var(--gse-ui-toast-closeButtonColor);
+  color: var(--gse-ui-dismissButton-foregroundColor);
 }

package/dist/collection/components/stable/gux-dropdown/gux-dropdown.css CHANGED Viewed

@@ -105,7 +105,11 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within:has(:focus-visible) {
+.gux-target-container-expanded:focus-visible {
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+.gux-target-container-expanded:focus-within:has(:focus-visible) {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
@@ -134,7 +138,11 @@
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
+.gux-target-container-collapsed .gux-field-button:focus-visible {
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+.gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.css CHANGED Viewed

@@ -120,7 +120,11 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within:has(:focus-visible) {
+.gux-target-container-expanded:focus-visible {
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+.gux-target-container-expanded:focus-within:has(:focus-visible) {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
@@ -149,7 +153,11 @@
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
+.gux-target-container-collapsed .gux-field-button:focus-visible {
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+.gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.css CHANGED Viewed

@@ -3,14 +3,6 @@
   color: var(--gse-ui-menu-option-label-foregroundColor);
   cursor: default;
 }
-:host .gux-arrow {
-  position: absolute;
-  width: var(--gse-ui-popover-anchor-width);
-  height: var(--gse-ui-popover-anchor-height);
-  background: var(--gse-ui-popover-backgroundColor);
-  border-top: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
-  border-right: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
-}
 :host(:focus) {
   outline: none;
@@ -24,9 +16,18 @@
 .gux-flyout-menu-content {
   position: fixed;
   display: none;
-  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border: none;
   border-radius: var(--gse-ui-menu-borderRadius);
 }
 .gux-flyout-menu-content.gux-shown {
   display: flex;
+}
+.gux-flyout-menu-content .gux-arrow {
+  position: absolute;
+  z-index: -1;
+  width: var(--gse-ui-popover-anchor-width);
+  height: var(--gse-ui-popover-anchor-height);
+  background: var(--gse-ui-popover-backgroundColor);
+  border: none;
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu.css CHANGED Viewed

@@ -1,8 +1,9 @@
 :host {
   flex-direction: column;
   width: fit-content;
-  padding: var(--gse-ui-flyoutMenu-padding);
+  padding: var(--gse-ui-menu-padding);
   background-color: var(--gse-ui-flyoutMenu-backgroundColor);
+  border: none;
   border-radius: var(--gse-ui-menu-borderRadius);
   box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.css CHANGED Viewed

@@ -50,7 +50,7 @@
   margin: 0;
   visibility: hidden;
   background-color: var(--gse-ui-menu-backgroundColor);
-  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border: none;
   border-radius: var(--gse-ui-menu-borderRadius);
   box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js CHANGED Viewed

@@ -108,7 +108,7 @@ export class GuxSubmenu {
       }).then(({ x, y }) => {
         Object.assign(this.submenuElement.style, {
           left: `${x}px`,
-          top: `${y}px`
+          top: `${y - 8}px` //TODO https://inindca.atlassian.net/browse/COMUI-2480
         });
       });
     }

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

@@ -1,30 +1,10 @@
-/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */ /**
-* @prop --gse-ui-checkbox-icon-default-unselectedForegroundColor
-* @prop --gse-ui-checkbox-icon-default-selectedForegroundColor
-* @prop --gse-ui-checkbox-icon-hover-foregroundColor
-* @prop --gse-ui-checkbox-icon-active-foregroundColor
-* @prop --gse-ui-checkbox-icon-error-foregroundColor
-* @prop --gse-ui-checkbox-icon-height
-* @prop --gse-ui-checkbox-icon-width
-* @prop --gse-ui-checkbox-label-foregroundColor
-* @prop --gse-ui-checkbox-label-text-fontFamily
-* @prop --gse-ui-checkbox-label-text-fontWeight
-* @prop --gse-ui-checkbox-label-text-lineHeight
-* @prop --gse-ui-checkbox-gap
-* @prop --gse-ui-checkbox-disabled-opacity
-* @prop --gse-ui-checkbox-focus-border-color
-* @prop --gse-ui-checkbox-focus-border-width
-* @prop --gse-ui-checkbox-focus-border-style
-* @prop --gse-ui-checkbox-focus-borderRadius
-* @prop --gse-ui-checkbox-focus-offset
-*/
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-error {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -8,13 +8,19 @@
   margin: 0;
   border: none;
 }
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
 .gux-form-field-error {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -39,6 +45,9 @@
   order: 0;
 }
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
 .gux-form-field-legend-label.gux-required::after {
   color: var(--gse-ui-formControl-label-indicator-requiredColor);
   content: " *";

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js CHANGED Viewed

@@ -68,7 +68,8 @@ export class GuxFormFieldDropdown {
     }
   }
   render() {
-    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+    var _a;
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled

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

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -7,13 +7,19 @@
   margin: 0;
   border: none;
 }
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
 .gux-form-field-error {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -38,6 +44,9 @@
   order: 0;
 }
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
 .gux-form-field-legend-label.gux-required::after {
   color: var(--gse-ui-formControl-label-indicator-requiredColor);
   content: " *";

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js CHANGED Viewed

@@ -59,7 +59,8 @@ export class GuxFormFieldPhone {
     this.requiredObserver.disconnect();
   }
   render() {
-    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+    var _a;
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError
       } }, h("div", { class: {

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

@@ -25,7 +25,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.css CHANGED Viewed

@@ -36,7 +36,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.css CHANGED Viewed

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css CHANGED Viewed

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css CHANGED Viewed

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.css CHANGED Viewed

@@ -11,7 +11,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.css CHANGED Viewed

@@ -8,13 +8,19 @@
   margin: 0;
   border: none;
 }
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
 .gux-form-field-error {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -39,6 +45,9 @@
   order: 0;
 }
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
 .gux-form-field-legend-label.gux-required::after {
   color: var(--gse-ui-formControl-label-indicator-requiredColor);
   content: " *";

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js CHANGED Viewed

@@ -60,7 +60,8 @@ export class GuxFormFieldTimePicker {
     }
   }
   render() {
-    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+    var _a;
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError
       } }, h("div", { class: {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.css CHANGED Viewed

@@ -8,13 +8,19 @@
   margin: 0;
   border: none;
 }
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
 .gux-form-field-error {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   place-content: stretch flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -39,6 +45,9 @@
   order: 0;
 }
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
 .gux-form-field-legend-label.gux-required::after {
   color: var(--gse-ui-formControl-label-indicator-requiredColor);
   content: " *";

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js CHANGED Viewed

@@ -60,7 +60,8 @@ export class GuxFormFieldTimeZonePicker {
     }
   }
   render() {
-    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+    var _a;
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError,
         'gux-time-zone-picker-container': true,

package/dist/collection/components/stable/gux-form-field/functional-components/gux-form-field-legend-label/gux-form-field-legend-label.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { h } from "@stencil/core";
-export const GuxFormFieldLegendLabel = ({ position, required }, children) => {
-  return (h("legend", { class: {
-      'gux-form-field-legend-label': true,
-      [`gux-${position}`]: true,
-      'gux-required': required
-    } }, children));
+export const GuxFormFieldLegendLabel = ({ position, required, labelText }, children) => {
+  return [
+    h("legend", { class: "gux-form-field-legend-label gux-screenreader" }, children),
+    h("span", { class: {
+        'gux-form-field-legend-label': true,
+        [`gux-${position}`]: true,
+        'gux-required': required
+      }, role: "presentation", "aria-hidden": "true" }, labelText)
+  ];
 };

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css CHANGED Viewed

@@ -1,4 +1,5 @@
 button {
+  display: flex;
   padding: 0;
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
   background: transparent;