genesys-spark-components 4.91.1 → 4.93.0

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -25,6 +25,7 @@ export class GuxTooltipBase {
         this.offsetX = 0;
         this.offsetY = 0;
         this.accent = 'light';
+        this.visualOnly = false;
         this.isShown = false;
     }
     handleKeyDown(event) {
@@ -85,8 +86,10 @@ export class GuxTooltipBase {
     }
     setForElement() {
         if (this.forElement) {
-            const tooltipId = this.tooltipId ? this.tooltipId : this.id;
-            this.forElement.setAttribute('aria-describedby', tooltipId);
+            if (!this.visualOnly) {
+                const tooltipId = this.tooltipId ? this.tooltipId : this.id;
+                this.forElement.setAttribute('aria-describedby', tooltipId);
+            }
             this.forElementListeners.forEach((handler, type) => this.forElement.addEventListener(type, handler));
         }
     }
@@ -113,10 +116,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '4ab2d8a50269e0fedf663a3bc0cea69806b4a652', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '61467459d3a5c4cec41c88196476e130e23c276e', class: {
+        return (h(Host, { key: 'e40f61c50e52691451ee3d6fb247af2ba22f8089', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'cd5086b6130448049fbf0a0f8e535c8bb1bea656', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '731059ba036aef672fad3569e36bd042d051f352', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'a1509014be12b78121b87aa6d284e6543590fc98', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -252,6 +255,24 @@ export class GuxTooltipBase {
                 "attribute": "accent",
                 "reflect": false,
                 "defaultValue": "'light'"
+            },
+            "visualOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
+                },
+                "attribute": "visual-only",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/beta/gux-tooltip-beta/gux-tooltip.js

@@ -13,6 +13,7 @@ export class GuxTooltip {
         this.for = undefined;
         this.placement = 'bottom-start';
         this.accent = 'light';
+        this.visualOnly = false;
     }
     /*
      * Show tooltip
@@ -71,7 +72,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'd67714689706254bde15a07e63b63ae9fa4c50bc', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '180b9a944c2fd996a5180ae796a0e790b96e44d1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'e8fe6d5c1566e6cd3795c80dd9dc346dd22d6e8a', slot: "content" }, h("slot", { key: 'a2cd637d7324ebd756f831b73c5b8110ef3f88b1', name: "content" }, h("slot", { key: '16746b53ca338be94ead51baaab40ffccc742dbe' }))))));
+        return (h(Host, { key: '26ae5749e09b49a787d5d1c97af98f15f2efe934', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'e99052ad8c57e31bb9682e717430a84a4a171207', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '74b351b377e865e521923148727d7f7cbb05fd40', slot: "content" }, h("slot", { key: '90c84b8abd6256e7db54f17150180cd78b1b8ba1', name: "content" }, h("slot", { key: 'f27a7b844efdcd2efe4e9188e532be48c2063f48' }))))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +142,24 @@ export class GuxTooltip {
                 "attribute": "accent",
                 "reflect": false,
                 "defaultValue": "'light'"
+            },
+            "visualOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
+                },
+                "attribute": "visual-only",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.css

@@ -29,10 +29,10 @@
   align-items: center;
   align-self: auto;
   order: 0;
-  font-family: var(--gse-core-typography-heading-lg-fontFamily, var(--gse-semantic-heading-lg-bold-fontFamily)), var(--gse-core-fontFamily-heading, var(--gse-semantic-theme-fontFamily-headings)), sans-serif;
-  font-size: var(--gse-core-typography-heading-lg-fontSize, var(--gse-semantic-heading-lg-bold-fontSize));
-  line-height: var(--gse-core-typography-heading-lg-lineHeight, var(--gse-semantic-heading-lg-bold-lineHeight));
-  font-weight: var(--gse-core-fontWeight-bold, var(--gse-semantic-heading-lg-bold-fontWeight));
+  font-family: var(--gse-semantic-heading-lg-bold-fontFamily), var(--gse-semantic-theme-fontFamily-headings), sans-serif;
+  font-size: var(--gse-semantic-heading-lg-bold-fontSize);
+  line-height: var(--gse-semantic-heading-lg-bold-lineHeight);
+  font-weight: var(--gse-semantic-heading-lg-bold-fontWeight);
 }
 .gux-header .gux-icon {
   flex: 0 1 auto;
@@ -56,10 +56,10 @@
   align-self: auto;
   order: 0;
   margin: 16px 0;
-  font-family: var(--gse-core-typography-body-sm-fontFamily, var(--gse-semantic-body-sm-regular-fontFamily)), var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)), sans-serif;
-  font-size: var(--gse-core-typography-body-sm-fontSize, var(--gse-semantic-body-sm-regular-fontSize));
-  line-height: var(--gse-core-typography-body-sm-lineHeight, var(--gse-semantic-body-sm-regular-lineHeight));
-  font-weight: var(--gse-core-fontWeight-regular, var(--gse-semantic-body-sm-regular-fontWeight));
+  font-family: var(--gse-semantic-body-sm-regular-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-semantic-body-sm-regular-fontSize);
+  line-height: var(--gse-semantic-body-sm-regular-lineHeight);
+  font-weight: var(--gse-semantic-body-sm-regular-fontWeight);
 }
 .gux-message ::slotted(dl) {
   display: flex;

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -35,8 +35,8 @@ gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder {
   color: #596373;
 }
 gux-popup .gux-select-field a.gux-select-input:focus-visible {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 gux-popup .gux-select-field .gux-icon-wrapper {
   position: absolute;

package/dist/collection/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.css

@@ -25,8 +25,8 @@
   height: 12px;
 }
 .gux-disclosure-button-container .gux-disclosure-button:focus-visible {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-disclosure-button-container .gux-disclosure-panel {
   display: none;

package/dist/collection/components/legacy/gux-modal-legacy/gux-modal-legacy.css

@@ -32,7 +32,7 @@
 @prop $gse-ui-modal-opacity - Skipped (this is incoporated into the gse-ui-modal-shroudColor token and is no longer needed. Thinking about asking design team to remove this token to avoid confusion)
 */
 ::slotted(button:active:enabled) {
-  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
+  color: var(--gse-ui-links-active-foregroundColor);
   text-decoration: underline;
   background: none;
 }
@@ -65,7 +65,7 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   background: var(--gse-ui-modal-backgroundColor);
   border: 1px solid #b4bccb;
   border-radius: var(--gse-ui-modal-borderRadius);
-  box-shadow: var(--gse-ui-modal-boxShadow-x, var(--gse-ui-modal-boxShadow-offsetX)) var(--gse-ui-modal-boxShadow-y, var(--gse-ui-modal-boxShadow-offsetY)) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
+  box-shadow: var(--gse-ui-modal-boxShadow-offsetX) var(--gse-ui-modal-boxShadow-offsetY) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
 }
 :host .gux-modal .gux-modal-container.gux-small {
   width: var(--gse-ui-modal-small-width);
@@ -94,10 +94,10 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   font-weight: var(--gse-ui-modal-heading-fontWeight);
   line-height: var(--gse-ui-modal-heading-fontFamily);
   color: var(--gse-ui-modal-headerColor);
-  font-family: var(--gse-core-typography-heading-xl-fontFamily, var(--gse-semantic-heading-xl-bold-fontFamily)), var(--gse-core-fontFamily-heading, var(--gse-semantic-theme-fontFamily-headings)), sans-serif;
-  font-size: var(--gse-core-typography-heading-xl-fontSize, var(--gse-semantic-heading-xl-bold-fontSize));
-  line-height: var(--gse-core-typography-heading-xl-lineHeight, var(--gse-semantic-heading-xl-bold-lineHeight));
-  font-weight: var(--gse-core-fontWeight-bold, var(--gse-semantic-heading-xl-bold-fontWeight));
+  font-family: var(--gse-semantic-heading-xl-bold-fontFamily), var(--gse-semantic-theme-fontFamily-headings), sans-serif;
+  font-size: var(--gse-semantic-heading-xl-bold-fontSize);
+  line-height: var(--gse-semantic-heading-xl-bold-lineHeight);
+  font-weight: var(--gse-semantic-heading-xl-bold-fontWeight);
 }
 :host .gux-modal .gux-modal-container .gux-modal-content {
   max-height: 432px;

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.css

@@ -64,8 +64,8 @@
   order: 0;
 }
 .gux-content .gux-title {
-  font-family: var(--gse-core-typography-heading-sm-fontFamily, var(--gse-semantic-heading-sm-bold-fontFamily)), var(--gse-core-fontFamily-heading, var(--gse-semantic-theme-fontFamily-headings)), sans-serif;
-  font-size: var(--gse-core-typography-heading-sm-fontSize, var(--gse-semantic-heading-sm-bold-fontSize));
-  line-height: var(--gse-core-typography-heading-sm-lineHeight, var(--gse-semantic-heading-sm-bold-lineHeight));
-  font-weight: var(--gse-core-fontWeight-bold, var(--gse-semantic-heading-sm-bold-fontWeight));
+  font-family: var(--gse-semantic-heading-sm-bold-fontFamily), var(--gse-semantic-theme-fontFamily-headings), sans-serif;
+  font-size: var(--gse-semantic-heading-sm-bold-fontSize);
+  line-height: var(--gse-semantic-heading-sm-bold-lineHeight);
+  font-weight: var(--gse-semantic-heading-sm-bold-fontWeight);
 }

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons-legacy.css

@@ -58,9 +58,9 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   border: none;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius)) - var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset)));
-  outline: var(--gse-semantic-focusRing-width, var(--gse-semantic-focusOutline-md-borderWidth)) solid var(--gse-semantic-color-focus, var(--gse-ui-color-focus));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-ui-color-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
   padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.css

@@ -5,10 +5,10 @@
 /* Body Copy */
 /* Anchor */
 gux-switch-item > .gux-switch-item {
-  font-family: var(--gse-core-typography-body-sm-fontFamily, var(--gse-semantic-body-sm-regular-fontFamily)), var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)), sans-serif;
-  font-size: var(--gse-core-typography-body-sm-fontSize, var(--gse-semantic-body-sm-regular-fontSize));
-  line-height: var(--gse-core-typography-body-sm-lineHeight, var(--gse-semantic-body-sm-regular-lineHeight));
-  font-weight: var(--gse-core-fontWeight-regular, var(--gse-semantic-body-sm-regular-fontWeight));
+  font-family: var(--gse-semantic-body-sm-regular-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-semantic-body-sm-regular-fontSize);
+  line-height: var(--gse-semantic-body-sm-regular-lineHeight);
+  font-weight: var(--gse-semantic-body-sm-regular-fontWeight);
   font: unset;
   color: #2e394c;
   text-align: center;
@@ -24,10 +24,10 @@ gux-switch-item[disabled] {
   opacity: 0.5;
 }
 gux-switch-item.gux-selected {
-  font-family: var(--gse-core-typography-body-sm-fontFamily, var(--gse-semantic-body-sm-regular-fontFamily)), var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)), sans-serif;
-  font-size: var(--gse-core-typography-body-sm-fontSize, var(--gse-semantic-body-sm-regular-fontSize));
-  line-height: var(--gse-core-typography-body-sm-lineHeight, var(--gse-semantic-body-sm-regular-lineHeight));
-  font-weight: var(--gse-core-fontWeight-bold, var(--gse-semantic-body-sm-bold-fontWeight));
+  font-family: var(--gse-semantic-body-sm-regular-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-semantic-body-sm-regular-fontSize);
+  line-height: var(--gse-semantic-body-sm-regular-lineHeight);
+  font-weight: var(--gse-semantic-body-sm-bold-fontWeight);
 }
 
 gux-switch-legacy > gux-switch-item .gux-switch-item {
@@ -42,8 +42,8 @@ gux-switch-legacy > gux-switch-item .gux-switch-item:focus-visible > gux-icon sv
   fill: #2e394c;
 }
 gux-switch-legacy > gux-switch-item .gux-switch-item:focus-visible {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
   border-radius: 2px;
 }
 gux-switch-legacy > gux-switch-item .gux-switch-item > gux-icon {
@@ -58,10 +58,10 @@ gux-switch-legacy > gux-switch-item.gux-selected .gux-switch-item > gux-icon svg
   fill: #2e394c;
 }
 gux-switch-legacy.gux-small > gux-switch-item .gux-switch-item {
-  font-family: var(--gse-core-typography-body-sm-fontFamily, var(--gse-semantic-body-sm-regular-fontFamily)), var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)), sans-serif;
-  font-size: var(--gse-core-typography-body-sm-fontSize, var(--gse-semantic-body-sm-regular-fontSize));
-  line-height: var(--gse-core-typography-body-sm-lineHeight, var(--gse-semantic-body-sm-regular-lineHeight));
-  font-weight: var(--gse-core-fontWeight-regular, var(--gse-semantic-body-sm-regular-fontWeight));
+  font-family: var(--gse-semantic-body-sm-regular-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-semantic-body-sm-regular-fontSize);
+  line-height: var(--gse-semantic-body-sm-regular-lineHeight);
+  font-weight: var(--gse-semantic-body-sm-regular-fontWeight);
   padding: 0 4px;
   border-bottom: 1px solid #e2e6ee;
 }

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.css

@@ -59,8 +59,8 @@ section.gux-disabled > * {
 .gux-header ::slotted([slot=icon]) {
   flex: 0 0 auto;
   align-self: flex-start;
-  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  width: var(--gse-ui-icon-small-size);
+  height: var(--gse-ui-icon-small-size);
   margin-right: var(--gse-ui-accordion-header-gap);
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
 }

package/dist/collection/components/stable/gux-action-button/gux-action-button.css

@@ -44,5 +44,5 @@
   border-style: var(--gse-ui-menu-border-style);
   border-width: var(--gse-ui-menu-border-width);
   border-radius: var(--gse-ui-menu-borderRadius);
-  box-shadow: var(--gse-ui-menu-boxShadow-x, var(--gse-ui-menu-boxShadow-offsetX)) var(--gse-ui-menu-boxShadow-y, var(--gse-ui-menu-boxShadow-offsetY)) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  box-shadow: var(--gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

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

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   height: var(--gse-ui-badge-height);
-  padding: 2px 12px;
+  padding: var(--gse-ui-badge-padding);
   font-family: var(--gse-ui-badge-text-fontFamily);
   font-size: var(--gse-ui-badge-text-fontSize);
   font-weight: var(--gse-ui-badge-text-fontWeight);

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

@@ -13,8 +13,6 @@
   justify-content: center;
   padding: var(--gse-ui-blankState-padding);
   color: var(--gse-ui-blankState-foregroundColor);
-  background-color: var(--gse-ui-blankState-backgroundColor);
-  border-radius: var(--gse-ui-blankState-borderRadius);
 }
 .gux-container .gux-image {
   padding-bottom: var(--gse-ui-blankState-gapMain);

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

@@ -7,39 +7,39 @@
   min-height: var(--gse-ui-breadcrumbs-secondary-height);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content {
-  font-family: var(--gse-ui-link-inLine-small-text-fontFamily, var(--gse-ui-links-inLine-small-text-fontFamily));
-  font-size: var(--gse-ui-link-inLine-small-text-fontSize, var(--gse-ui-links-inLine-small-text-fontSize));
-  font-weight: var(--gse-ui-link-inLine-small-text-fontWeight, var(--gse-ui-links-inLine-small-text-fontWeight));
-  line-height: var(--gse-ui-link-inLine-small-text-lineHeight, var(--gse-ui-links-inLine-small-text-lineHeight));
+  font-family: var(--gse-ui-links-inLine-small-text-fontFamily);
+  font-size: var(--gse-ui-links-inLine-small-text-fontSize);
+  font-weight: var(--gse-ui-links-inLine-small-text-fontWeight);
+  line-height: var(--gse-ui-links-inLine-small-text-lineHeight);
   text-decoration: none;
-  color: var(--gse-ui-link-default-foregroundColor, var(--gse-ui-links-default-foregroundColor));
+  color: var(--gse-ui-links-default-foregroundColor);
   pointer-events: none;
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-active {
-  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
+  color: var(--gse-ui-links-active-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link {
-  color: var(--gse-ui-link-default-foregroundColor, var(--gse-ui-links-default-foregroundColor));
+  color: var(--gse-ui-links-default-foregroundColor);
   pointer-events: initial;
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:visited {
-  color: var(--gse-ui-link-visited-foregroundColor, var(--gse-ui-links-visited-foregroundColor));
+  color: var(--gse-ui-links-visited-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover {
-  font-family: var(--gse-ui-link-inLine-small-underlinedText-fontFamily, var(--gse-ui-links-inLine-small-underlinedText-fontFamily));
-  font-size: var(--gse-ui-link-inLine-small-underlinedText-fontSize, var(--gse-ui-links-inLine-small-underlinedText-fontSize));
-  font-weight: var(--gse-ui-link-inLine-small-underlinedText-fontWeight, var(--gse-ui-links-inLine-small-underlinedText-fontWeight));
-  line-height: var(--gse-ui-link-inLine-small-underlinedText-lineHeight, var(--gse-ui-links-inLine-small-underlinedText-lineHeight));
-  text-decoration: var(--gse-ui-link-inLine-small-underlinedText-textDecoration, var(--gse-ui-links-inLine-small-underlinedText-textDecoration));
-  color: var(--gse-ui-link-hover-foregroundColor, var(--gse-ui-links-hover-foregroundColor));
+  font-family: var(--gse-ui-links-inLine-small-underlinedText-fontFamily);
+  font-size: var(--gse-ui-links-inLine-small-underlinedText-fontSize);
+  font-weight: var(--gse-ui-links-inLine-small-underlinedText-fontWeight);
+  line-height: var(--gse-ui-links-inLine-small-underlinedText-lineHeight);
+  text-decoration: var(--gse-ui-links-inLine-small-underlinedText-textDecoration);
+  color: var(--gse-ui-links-hover-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:active {
-  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
+  color: var(--gse-ui-links-active-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:focus-visible {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
-  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-separator {
   padding: var(--gse-ui-breadcrumbs-secondary-separator-padding);
@@ -53,18 +53,18 @@
   min-height: var(--gse-ui-breadcrumbs-primary-height);
 }
 .gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content {
-  font-family: var(--gse-ui-link-inLine-medium-text-fontFamily, var(--gse-ui-links-inLine-medium-text-fontFamily));
-  font-size: var(--gse-ui-link-inLine-medium-text-fontSize, var(--gse-ui-links-inLine-medium-text-fontSize));
-  font-weight: var(--gse-ui-link-inLine-medium-text-fontWeight, var(--gse-ui-links-inLine-medium-text-fontWeight));
-  line-height: var(--gse-ui-link-inLine-medium-text-lineHeight, var(--gse-ui-links-inLine-medium-text-lineHeight));
+  font-family: var(--gse-ui-links-inLine-medium-text-fontFamily);
+  font-size: var(--gse-ui-links-inLine-medium-text-fontSize);
+  font-weight: var(--gse-ui-links-inLine-medium-text-fontWeight);
+  line-height: var(--gse-ui-links-inLine-medium-text-lineHeight);
   text-decoration: none;
 }
 .gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content.gux-link:hover {
-  font-family: var(--gse-ui-link-inLine-medium-underlinedText-fontFamily, var(--gse-ui-links-inLine-medium-underlinedText-fontFamily));
-  font-size: var(--gse-ui-link-inLine-medium-underlinedText-fontSize, var(--gse-ui-links-inLine-medium-underlinedText-fontSize));
-  font-weight: var(--gse-ui-link-inLine-medium-underlinedText-fontWeight, var(--gse-ui-links-inLine-medium-underlinedText-fontWeight));
-  line-height: var(--gse-ui-link-inLine-medium-underlinedText-lineHeight, var(--gse-ui-links-inLine-medium-underlinedText-lineHeight));
-  text-decoration: var(--gse-ui-link-inLine-medium-underlinedText-textDecoration);
+  font-family: var(--gse-ui-links-inLine-medium-underlinedText-fontFamily);
+  font-size: var(--gse-ui-links-inLine-medium-underlinedText-fontSize);
+  font-weight: var(--gse-ui-links-inLine-medium-underlinedText-fontWeight);
+  line-height: var(--gse-ui-links-inLine-medium-underlinedText-lineHeight);
+  text-decoration: var(--gse-ui-links-inLine-medium-underlinedText-textDecoration);
 }
 .gux-breadcrumb-generation.gux-primary .gux-breadcrumb-separator {
   padding: var(--gse-ui-breadcrumbs-primary-separator-padding);

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

@@ -22,6 +22,11 @@
   vertical-align: middle;
 }
 
+::slotted(gux-tooltip),
+::slotted(gux-tooltip-beta) {
+  padding-inline-start: 0;
+}
+
 ::slotted(*:first-child) {
   padding: 0;
 }
@@ -63,9 +68,9 @@ button:active:enabled {
   background-color: var(--gse-ui-button-secondary-active-backgroundColor);
 }
 button:focus-visible:enabled {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
-  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
 }
 button.gux-primary {
   color: var(--gse-ui-button-primary-default-foregroundColor);
@@ -125,21 +130,21 @@ button.gux-inline {
   min-inline-size: initial;
   block-size: initial;
   padding: 0;
-  color: var(--gse-ui-link-default-foregroundColor, var(--gse-ui-links-default-foregroundColor));
+  color: var(--gse-ui-links-default-foregroundColor);
   background: none;
   border: none;
   border-radius: 0;
 }
 button.gux-inline[disabled] {
-  color: var(--gse-ui-link-disabled-foregroundColor, var(--gse-ui-links-disabled-foregroundColor));
+  color: var(--gse-ui-links-disabled-foregroundColor);
 }
 button.gux-inline:hover:enabled {
-  color: var(--gse-ui-link-hover-foregroundColor, var(--gse-ui-links-hover-foregroundColor));
+  color: var(--gse-ui-links-hover-foregroundColor);
   text-decoration: underline;
   background: none;
 }
 button.gux-inline:active:enabled {
-  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
+  color: var(--gse-ui-links-active-foregroundColor);
   text-decoration: underline;
   background: none;
 }

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

@@ -1,10 +1,12 @@
 import { h } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
 /**
  * @slot - content
  */
 export class GuxButton {
     constructor() {
+        this.buttonId = randomHTMLId('button');
         this.type = 'button';
         this.guxTitle = undefined;
         this.disabled = false;
@@ -18,10 +20,18 @@ export class GuxButton {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("button", { key: '3040bad442f39bc2809fe0cf4d65b321a3d80e56', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
-                [`gux-${this.accent}`]: true,
-                'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '59907df8032ac3ee4fa0021e80511c62d63fc755', onSlotchange: this.slotChanged.bind(this) })));
+        return [
+            h("button", { key: 'cf290aff2724cdfd5183459eb92f71040b14376b', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+                    [`gux-${this.accent}`]: true,
+                    'gux-icon-only': this.iconOnly
+                }, "aria-label": this.guxTitle }, h("slot", { key: '414c446fca7f50db6445a0abacfed52b44cd0b16', onSlotchange: this.slotChanged.bind(this) })),
+            this.renderTooltip()
+        ];
+    }
+    renderTooltip() {
+        return this.guxTitle
+            ? (h("gux-tooltip-beta", { for: this.buttonId, visualOnly: true }, h("div", { slot: "content" }, this.guxTitle)))
+            : '';
     }
     stopEventIfDisabled(event) {
         if (this.disabled) {
@@ -44,6 +54,11 @@ export class GuxButton {
                 return true;
             }
         }
+        else if (children.length === 2 &&
+            children[0].tagName === 'GUX-ICON' &&
+            ['GUX-TOOLTIP', 'GUX-TOOLTIP-BETA'].includes(children[1].tagName)) {
+            return true;
+        }
         return false;
     }
     slotChanged() {

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

@@ -23,5 +23,5 @@
   border-style: var(--gse-ui-menu-border-style);
   border-width: var(--gse-ui-menu-border-width);
   border-radius: var(--gse-ui-menu-borderRadius);
-  box-shadow: var(--gse-ui-menu-boxShadow-x, var(--gse-ui-menu-boxShadow-offsetX)) var(--gse-ui-menu-boxShadow-y, var(--gse-ui-menu-boxShadow-offsetY)) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  box-shadow: var(--gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

package/dist/collection/components/stable/gux-button-slot/gux-button-slot.css

@@ -47,8 +47,8 @@
 ::slotted(input[type=button]:focus-visible:enabled),
 ::slotted(input[type=submit]:focus-visible:enabled),
 ::slotted(button:focus-visible:enabled) {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 
 ::slotted(input[type=button]:hover:enabled),
@@ -152,26 +152,26 @@
 :host([accent=inline]) ::slotted(button) {
   block-size: initial;
   padding: 0;
-  color: var(--gse-ui-link-default-foregroundColor, var(--gse-ui-links-default-foregroundColor));
+  color: var(--gse-ui-links-default-foregroundColor);
   background: none;
   border: none;
 }
 :host([accent=inline]) ::slotted(input[type=button][disabled]),
 :host([accent=inline]) ::slotted(input[type=submit][disabled]),
 :host([accent=inline]) ::slotted(button[disabled]) {
-  color: var(--gse-ui-link-disabled-foregroundColor, var(--gse-ui-links-disabled-foregroundColor));
+  color: var(--gse-ui-links-disabled-foregroundColor);
 }
 :host([accent=inline]) ::slotted(input[type=button]:hover:enabled),
 :host([accent=inline]) ::slotted(input[type=submit]:hover:enabled),
 :host([accent=inline]) ::slotted(button:hover:enabled) {
-  color: var(--gse-ui-link-hover-foregroundColor, var(--gse-ui-links-hover-foregroundColor));
+  color: var(--gse-ui-links-hover-foregroundColor);
   text-decoration: underline;
   background: none;
 }
 :host([accent=inline]) ::slotted(input[type=button]:active:enabled),
 :host([accent=inline]) ::slotted(input[type=submit]:active:enabled),
 :host([accent=inline]) ::slotted(button:active:enabled) {
-  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
+  color: var(--gse-ui-links-active-foregroundColor);
   text-decoration: underline;
   background: none;
 }

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

@@ -48,7 +48,7 @@
 .gux-calendar {
   margin-top: 2px;
   border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
-  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x, var(--gse-ui-calendarMenu-boxShadow-offsetX)) var(--gse-ui-calendarMenu-boxShadow-y, var(--gse-ui-calendarMenu-boxShadow-offsetY)) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-offsetX) var(--gse-ui-calendarMenu-boxShadow-offsetY) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-calendar .gux-header {
   position: relative;
@@ -81,8 +81,8 @@
   right: 18px;
 }
 .gux-calendar .gux-header button gux-icon {
-  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  width: var(--gse-ui-icon-small-size);
+  height: var(--gse-ui-icon-small-size);
   pointer-events: none;
 }
 .gux-calendar .gux-header .gux-month-list {
@@ -202,7 +202,7 @@
 }
 .gux-calendar .gux-content table tr td:focus-visible {
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
-  outline: var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth)) solid var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus));
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
 }
 
 .gux-sr-only {

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

@@ -15,7 +15,7 @@
 }
 .gux-card.gux-raised {
   border: var(--gse-ui-card-raised-border-width) var(--gse-ui-card-raised-border-style) var(--gse-ui-card-raised-border-color);
-  box-shadow: var(--gse-ui-card-raised-boxShadow-x, var(--gse-ui-card-raised-boxShadow-offsetX)) var(--gse-ui-card-raised-boxShadow-y, var(--gse-ui-card-raised-boxShadow-offsetY)) var(--gse-ui-card-raised-boxShadow-blur) var(--gse-ui-card-raised-boxShadow-spread) var(--gse-ui-card-raised-boxShadow-color);
+  box-shadow: var(--gse-ui-card-raised-boxShadow-offsetX) var(--gse-ui-card-raised-boxShadow-offsetY) var(--gse-ui-card-raised-boxShadow-blur) var(--gse-ui-card-raised-boxShadow-spread) var(--gse-ui-card-raised-boxShadow-color);
 }
 .gux-card.gux-borderless {
   border: var(--gse-ui-card-borderless-border-width) var(--gse-ui-card-borderless-border-style) var(--gse-ui-card-borderless-border-color);

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

@@ -39,8 +39,8 @@
   border-radius: 4px;
 }
 .gux-container .gux-reorder gux-icon {
-  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  width: var(--gse-ui-icon-small-size);
+  height: var(--gse-ui-icon-small-size);
 }
 .gux-container .gux-reorder.gux-reordering:focus-visible gux-icon {
   color: #2a60c8;
@@ -50,7 +50,7 @@
   cursor: grabbing !important;
 }
 .gux-container .gux-reorder:hover, .gux-container .gux-reorder:focus-visible {
-  outline: var(--gse-semantic-focusRing-small-border-color, var(--gse-semantic-border-focus)) var(--gse-semantic-focusRing-small-border-style, solid) var(--gse-semantic-focusRing-small-border-width, var(--gse-semantic-focusOutline-sm-borderWidth));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-sm-borderWidth);
 }
 .gux-container .gux-reorder:hover gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
   color: #2a60c8;
@@ -64,7 +64,7 @@
 .gux-container .gux-select gux-text-highlight {
   position: absolute;
   top: 1px;
-  left: calc(var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size)) + var(--gse-ui-checkbox-gap));
+  left: calc(var(--gse-ui-icon-small-size) + var(--gse-ui-checkbox-gap));
   color: transparent;
   pointer-events: none;
 }