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

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

@@ -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-phone/gux-form-field-phone.css

@@ -7,6 +7,12 @@
   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;
@@ -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

@@ -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-time-picker/gux-form-field-time-picker.css

@@ -8,6 +8,12 @@
   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;
@@ -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

@@ -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

@@ -8,6 +8,12 @@
   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;
@@ -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

@@ -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

@@ -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

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

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.css

@@ -1,36 +1,3 @@
-/**
-  * @prop --gse-ui-alert-padding
-  * @prop --gse-ui-alert-gap
-  * @prop --gse-ui-alert-info-backgroundColor
-  * @prop --gse-ui-alert-info-foregroundColor
-  * @prop --gse-ui-alert-info-iconColor
-  * @prop --gse-ui-alert-info-border-color
-  * @prop --gse-ui-alert-info-border-width
-  * @prop --gse-ui-alert-info-border-style
-  * @prop --gse-ui-alert-success-backgroundColor
-  * @prop --gse-ui-alert-success-foregroundColor
-  * @prop --gse-ui-alert-success-iconColor
-  * @prop --gse-ui-alert-success-border-color
-  * @prop --gse-ui-alert-success-border-width
-  * @prop --gse-ui-alert-success-border-style
-  * @prop --gse-ui-alert-warning-backgroundColor
-  * @prop --gse-ui-alert-warning-foregroundColor
-  * @prop --gse-ui-alert-warning-iconColor
-  * @prop --gse-ui-alert-warning-border-color
-  * @prop --gse-ui-alert-warning-border-width
-  * @prop --gse-ui-alert-warning-border-style
-  * @prop --gse-ui-alert-error-backgroundColor
-  * @prop --gse-ui-alert-error-foregroundColor
-  * @prop --gse-ui-alert-error-iconColor
-  * @prop --gse-ui-alert-error-border-color
-  * @prop --gse-ui-alert-error-border-width
-  * @prop --gse-ui-alert-error-border-style
-  * @prop --gse-ui-alert-text-fontFamily
-  * @prop --gse-ui-alert-text-lineHeight
-  * @prop --gse-ui-alert-text-fontSize
-  * @prop --gse-ui-alert-borderRadius
-  * @prop --gse-ui-alert-text-fontWeight
-  */
 :host {
   display: block;
 }

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.css

@@ -2,12 +2,11 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: 1px;
+  height: var(--gse-ui-menu-divider-height);
   padding: 0;
-  margin: 16px 0;
-  line-height: 32px;
+  margin: var(--gse-ui-menu-divider-margin);
   pointer-events: none;
   cursor: pointer;
   cursor: default;
-  background-color: #c8cfda;
+  background-color: var(--gse-ui-menu-divider-backgroundColor);
 }

package/dist/collection/components/stable/gux-listbox/gux-listbox.css

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: block;
-  max-height: 20rem;
+  max-height: var(--gse-ui-menu-maxHeight);
   padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow: visible auto;
@@ -12,7 +12,7 @@
   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);
 }
 
-:host(:focus-visible:not(:host-context(gux-dropdown))) {
+:host(:focus-visible) {
   outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.css

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: block;
-  max-height: 20rem;
+  max-height: var(--gse-ui-menu-maxHeight);
   padding: var(--gse-ui-menu-padding);
   overflow-y: auto;
   background: var(--gse-ui-menu-backgroundColor);

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -1,40 +1,3 @@
-/**
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-medium-width
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-small-width
-  * @prop --gse-progressAndLoading-large-gap
-  * @prop --gse-progressAndLoading-large-gapText
-  * @prop --gse-progressAndLoading-pageLoading-gap
-  * @prop --gse-progressAndLoading-medium-gap
-  * @prop --gse-progressAndLoading-medium-gapText
-  * @prop --gse-progressAndLoading-small-gap
-  * @prop --gse-progressAndLoading-small-gapText
-  * @prop --gse-ui-progressAndLoading-textColor
-  */
 :host {
   display: flex;
   flex-direction: column;

package/dist/collection/components/stable/gux-popup/gux-popup.js

@@ -8,6 +8,7 @@ export class GuxPopup {
   constructor() {
     this.expanded = false;
     this.disabled = false;
+    this.offset = 2;
     this.exceedTargetWidth = false;
   }
   runUpdatePosition() {
@@ -25,7 +26,7 @@ export class GuxPopup {
         strategy: 'fixed',
         placement: 'bottom-start',
         middleware: [
-          offset(2),
+          offset(this.offset),
           flip(),
           size({
             apply({ rects, elements }) {
@@ -145,6 +146,24 @@ export class GuxPopup {
         "reflect": false,
         "defaultValue": "false"
       },
+      "offset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of pixels the popup is offset from the target."
+        },
+        "attribute": "offset",
+        "reflect": false,
+        "defaultValue": "2"
+      },
       "exceedTargetWidth": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.css

@@ -1,12 +1,3 @@
-/**
-  * @prop --gse-ui-progressAndLoading-largeBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-smallBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-thinBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-base
-  * @prop --gse-ui-progressAndLoading-spinner-foreground
-  * @prop --gse-ui-progressAndLoading-spinner-large //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-small //TODO https://inindca.atlassian.net/browse/COMUI-2226
-*/
 @keyframes largeSpin {
   0% {
     stroke-dasharray: 1 68.115038379;

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.css

@@ -1,14 +1,3 @@
-/**
-  * @prop --gse-ui-progressAndLoading-largeBorder
-  * @prop --gse-ui-progressAndLoading-spinner-base
-  * @prop --gse-ui-progressAndLoading-spinner-foreground
-  * @prop --gse-ui-progressAndLoading-spinner-large : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontFamily
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontSize
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontWeight
-  * @prop --gse-ui-progressAndLoading-spinner-text-lineHeight
-  * @prop --gse-ui-progressAndLoading-textColor
-*/
 :host {
   display: inline-block;
 }

package/dist/collection/components/stable/gux-rating/gux-rating.css

@@ -1,11 +1,3 @@
-/**
- * @prop --gse-ui-rating-default-color
- * @prop --gse-ui-rating-active-color
- * @prop --gse-ui-rating-hover-color
- * @prop --gse-ui-rating-disabled-color
- * @prop --gse-ui-rating-disabled-opacity
- * @prop --gse-ui-rating-size
-*/
 :host {
   display: inline-flex;
   user-select: none;

package/dist/collection/components/stable/gux-tabs/gux-tab/gux-tab.css

@@ -1,27 +1,32 @@
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab {
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab {
+  box-sizing: border-box;
+  border-right: var(--gse-ui-tabs-item-divider-vertical-width) solid var(--gse-ui-tabs-item-divider-dividerColor);
+}
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab {
   display: flex;
   justify-content: flex-end;
   height: var(--gse-ui-tabs-item-vertical-fixedHeight);
   padding: var(--gse-ui-tabs-item-vertical-padding);
-  border-right: var(--gse-ui-tabs-item-divider-vertical-width) solid var(--gse-ui-tabs-item-divider-dividerColor);
+  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid transparent;
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab.gux-active {
-  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid var(--gse-ui-tabs-item-indicator-activeColor);
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab.gux-active {
+  border-right-color: var(--gse-ui-tabs-item-indicator-activeColor);
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
-  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid var(--gse-ui-tabs-item-indicator-hoverColor);
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
+  border-right-color: var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab {
   box-sizing: border-box;
   height: var(--gse-ui-tabs-item-horizontal-fixedHeight);
   padding: var(--gse-ui-tabs-item-horizontal-padding);
+  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid transparent;
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab.gux-active {
-  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-activeColor);
+  border-bottom-color: var(--gse-ui-tabs-item-indicator-activeColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
-  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-hoverColor);
+  border-bottom-color: var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab gux-tooltip-title {
   margin: auto;

package/dist/collection/components/stable/gux-tag/gux-tag.css

@@ -1,37 +1,3 @@
-/**
-  * @prop --gse-ui-tag-default-backgroundColor
-  * @prop --gse-ui-tag-default-foregroundColor
-  * @prop --gse-ui-tag-accent1-backgroundColor
-  * @prop --gse-ui-tag-accent1-foregroundColor
-  * @prop --gse-ui-tag-accent2-backgroundColor
-  * @prop --gse-ui-tag-accent2-foregroundColor
-  * @prop --gse-ui-tag-accent3-backgroundColor
-  * @prop --gse-ui-tag-accent3-foregroundColor
-  * @prop --gse-ui-tag-accent4-backgroundColor
-  * @prop --gse-ui-tag-accent4-foregroundColor
-  * @prop --gse-ui-tag-accent5-backgroundColor
-  * @prop --gse-ui-tag-accent5-foregroundColor
-  * @prop --gse-ui-tag-accent6-backgroundColor
-  * @prop --gse-ui-tag-accent6-foregroundColor
-  * @prop --gse-ui-tag-accent7-backgroundColor
-  * @prop --gse-ui-tag-accent7-foregroundColor
-  * @prop --gse-ui-tag-accent8-backgroundColor
-  * @prop --gse-ui-tag-accent8-foregroundColor
-  * @prop --gse-ui-tag-accent9-backgroundColor
-  * @prop --gse-ui-tag-accent9-foregroundColor
-  * @prop --gse-ui-tag-accent10-backgroundColor
-  * @prop --gse-ui-tag-accent10-foregroundColor
-  * @prop --gse-ui-tag-borderRadius
-  * @prop --gse-ui-tag-button-size
-  * @prop --gse-ui-tag-height
-  * @prop --gse-ui-tag-padding
-  * @prop --gse-ui-tag-removable-gap
-  * @prop --gse-ui-tag-removable-padding
-  * @prop --gse-ui-tag-text-fontFamily
-  * @prop --gse-ui-tag-text-fontSize
-  * @prop --gse-ui-tag-text-fontWeight // missing
-  * @prop --gse-ui-tag-text-lineHeight
-  */
 :host {
   display: inline-block;
   border-radius: var(--gse-ui-tag-borderRadius);

package/dist/collection/components/stable/gux-text-highlight/gux-text-highlight.css

@@ -1,6 +1,3 @@
-span {
-  color: var(--gse-ui-search-match-firstLevel-foregroundColour);
-}
 span mark {
   background-color: var(--gse-ui-search-match-firstLevel-backgroundColor);
 }

package/dist/collection/components/stable/gux-time-picker/gux-time-picker.css

@@ -27,8 +27,8 @@
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-time-picker .gux-input-time:focus-within {
-  border: var(--gse-ui-timePicker-focusTime-border-width) var(--gse-ui-timePicker-focusTime-border-style) var(--gse-ui-timePicker-focusTime-border-color);
-  border-radius: var(--gse-ui-timePicker-focusTime-borderRadius);
+  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-time-picker .gux-input-time:hover:not(:disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
@@ -66,7 +66,7 @@
   outline: none;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
-  border: var(--gse-ui-timePicker-focusAmpm-border-width) var(--gse-ui-timePicker-focusAmpm-border-style) var(--gse-ui-timePicker-focusAmpm-border-color);
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
   border-radius: var(--gse-ui-timePicker-focusAmpm-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
@@ -88,16 +88,14 @@
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   background: transparent;
   border: none;
+  outline: none;
 }
 .gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled) {
   color: var(--gse-ui-timePicker-clockStates-activeColor);
   cursor: pointer;
 }
-.gux-time-picker .gux-input-time .gux-clock-button:focus {
-  outline: none;
-}
 .gux-time-picker .gux-input-time .gux-clock-button:focus-visible {
-  border: var(--gse-ui-timePicker-focusClock-border-width) var(--gse-ui-timePicker-focusClock-border-style) var(--gse-ui-timePicker-focusClock-border-color);
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
   border-radius: var(--gse-ui-timePicker-focusClock-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-clock-button gux-icon {

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.css

@@ -1,38 +1,3 @@
-/**
- * @prop --gse-ui-toggle-track-width
- * @prop --gse-ui-toggle-track-height
- * @prop --gse-ui-toggle-track-enabled-off-backgroundColor
- * @prop --gse-ui-toggle-track-enabled-on-backgroundColor
- * @prop --gse-ui-toggle-track-disabled-off-backgroundColor
- * @prop --gse-ui-toggle-track-disabled-on-backgroundColor
- * @prop --gse-ui-toggle-track-error-off-backgroundColor
- * @prop --gse-ui-toggle-track-error-on-backgroundColor
- * @prop --gse-ui-toggle-track-hover-off-backgroundColor
- * @prop --gse-ui-toggle-track-hover-on-backgroundColor
- * @prop --gse-ui-toggle-track-borderRadius
- * @prop --gse-ui-toggle-handle-width
- * @prop --gse-ui-toggle-handle-height
- * @prop --gse-ui-toggle-handle-hover-border-width
- * @prop --gse-ui-toggle-handle-hover-border-style
- * @prop --gse-ui-toggle-handle-hover-border-color
- * @prop --gse-ui-toggle-handle-enabled-border-width
- * @prop --gse-ui-toggle-handle-enabled-border-color
- * @prop --gse-ui-toggle-handle-enabled-border-style
- * @prop --gse-ui-toggle-handle-disabled-border-width
- * @prop --gse-ui-toggle-handle-disabled-border-color
- * @prop --gse-ui-toggle-handle-disabled-border-style
- * @prop --gse-ui-toggle-handle-error-border-color
- * @prop --gse-ui-toggle-handle-error-border-width
- * @prop --gse-ui-toggle-handle-error-border-style
- * @prop --gse-ui-toggle-handle-backgroundColor
- * @prop --gse-ui-toggle-handle-foregroundColor
- * @prop --gse-ui-toggle-handle-borderRadius
- * @prop --gse-ui-toggle-focus-border-color;
- * @prop --gse-ui-toggle-focus-border-width
- * @prop --gse-ui-toggle-focus-border-style
- * @prop --gse-ui-toggle-focus-borderRadius
- * @prop --gse-ui-toggle-focus-offset
- */
 gux-toggle-slider {
   display: flex;
   align-items: center;

package/dist/collection/components/stable/gux-toggle/gux-toggle.css

@@ -1,10 +1,3 @@
-/**
- * @prop --gse-ui-toggle-label-fontFamily
- * @prop --gse-ui-toggle-label-fontWeight
- * @prop --gse-ui-toggle-label-lineHeight
- * @prop --gse-ui-toggle-label-fontSize
- * @prop --gse-ui-toggle-gap
- */
 :host {
   display: block;
   margin: 2px;
@@ -47,19 +40,20 @@
   position: relative;
   display: inline-block;
   padding: 0 4px;
-  font-family: var(--gse-ui-toggle-label-fontFamily);
-  font-size: var(--gse-ui-toggle-label-fontSize);
-  font-weight: var(--gse-ui-toggle-label-fontWeight);
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text {
   display: grid;
   grid-template-areas: "inner-div";
   place-items: start;
-  font-family: var(--gse-ui-toggle-label-fontWeight);
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner {
   position: relative;
   grid-area: inner-div;
+  font-family: var(--gse-ui-toggle-label-fontFamily);
+  font-size: var(--gse-ui-toggle-label-fontSize);
+  font-weight: var(--gse-ui-toggle-label-fontWeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+  word-wrap: break-word;
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden {
   visibility: hidden;

package/dist/collection/components/stable/gux-tooltip/gux-tooltip.css

@@ -1,31 +1,3 @@
-/**
-  * @prop --gse-ui-tooltip-light-border-color
-  * @prop --gse-ui-tooltip-light-border-width
-  * @prop --gse-ui-tooltip-light-border-style
-  * @prop --gse-ui-tooltip-light-backgroundColor
-  * @prop --gse-ui-tooltip-light-foregroundColor
-  * @prop --gse-ui-tooltip-light-iconColor
-  * @prop --gse-ui-tooltip-dark-border-color
-  * @prop --gse-ui-tooltip-dark-border-width
-  * @prop --gse-ui-tooltip-dark-border-style
-  * @prop --gse-ui-tooltip-dark-backgroundColor
-  * @prop --gse-ui-tooltip-dark-foregroundColor
-  * @prop --gse-ui-tooltip-dark-iconColor
-  * @prop --gse-ui-tooltip-boxShadow-x
-  * @prop --gse-ui-tooltip-boxShadow-y
-  * @prop --gse-ui-tooltip-boxShadow-blur
-  * @prop --gse-ui-tooltip-boxShadow-spread
-  * @prop --gse-ui-tooltip-boxShadow-color
-  * @prop --gse-ui-tooltip-padding
-  * @prop --gse-ui-tooltip-height
-  * @prop --gse-ui-tooltip-gap
-  * @prop --gse-ui-tooltip-borderRadius
-  * @prop --gse-ui-tooltip-text-fontFamily
-  * @prop --gse-ui-tooltip-text-lineHeight
-  * @prop --gse-ui-tooltip-text-fontSize
-  * @prop --gse-ui-tooltip-text-fontWeight
-
-  */
 :host {
   position: fixed;
   z-index: var(--gux-zindex-tooltip, 1);

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.css

@@ -32,6 +32,7 @@ gux-tooltip {
 .gux-tooltip-icon-decorative .gux-title-container gux-icon,
 .gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon) {
   position: absolute;
+  top: 2px;
   left: -20px;
   flex-shrink: 0;
   width: 16px;

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.60",
+  "version": "4.0.0-beta.61",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "92",
-  "buildDate": "2023-11-11T02:39:26.171920Z"
+  "build": "98",
+  "buildDate": "2023-11-14T10:20:17.891031Z"
 }