genesys-spark-components 4.92.0 → 4.93.1

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

@@ -3,13 +3,13 @@
 }
 
 ::slotted(gux-icon) {
-  width: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
-  height: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
+  inline-size: var(--gse-ui-icon-medium-size);
+  block-size: var(--gse-ui-icon-medium-size);
   color: var(--gse-ui-selectorCard-ilustrativeIcon-foregroundColor);
 }
 
 ::slotted(label) {
-  width: 100%;
+  inline-size: 100%;
   font-family: var(--gse-ui-selectorCard-simple-label-fontFamily);
   font-size: var(--gse-ui-selectorCard-simple-label-fontSize);
   font-weight: var(--gse-ui-selectorCard-simple-label-fontWeight);
@@ -20,9 +20,9 @@
 ::slotted(input[type=radio]),
 ::slotted(input[type=checkbox]) {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
   margin: 0;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   -webkit-appearance: none;
@@ -38,8 +38,8 @@
   inset-inline-end: var(--gse-ui-selectorCard-descriptive-text-gap);
   display: inline-grid;
   grid-area: 1/1;
-  width: var(--gse-ui-radioButton-icon-width);
-  height: var(--gse-ui-radioButton-icon-height);
+  inline-size: var(--gse-ui-radioButton-icon-width);
+  block-size: var(--gse-ui-radioButton-icon-height);
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;
   vertical-align: middle;
@@ -92,7 +92,7 @@
 }
 
 .gux-selector-card {
-  width: fit-content;
+  inline-size: fit-content;
 }
 .gux-selector-card .gux-content {
   position: relative;
@@ -101,12 +101,12 @@
   flex-direction: column;
   gap: var(--gse-ui-selectorCard-descriptive-text-gap);
   align-items: center;
-  width: var(--gse-ui-selectorCard-simple-minWidth);
-  min-width: var(--gse-ui-selectorCard-simple-minWidth);
-  max-width: var(--gse-ui-selectorCard-simple-maxWidth);
-  height: fit-content;
-  min-height: var(--gse-ui-selectorCard-simple-minHeight);
-  max-height: var(--gse-ui-selectorCard-simple-maxHeight);
+  inline-size: var(--gse-ui-selectorCard-simple-minWidth);
+  min-inline-size: var(--gse-ui-selectorCard-simple-minWidth);
+  max-inline-size: var(--gse-ui-selectorCard-simple-maxWidth);
+  block-size: fit-content;
+  min-block-size: var(--gse-ui-selectorCard-simple-minHeight);
+  max-block-size: var(--gse-ui-selectorCard-simple-maxHeight);
   padding: var(--gse-ui-selectorCard-simple-padding);
   text-align: center;
   background-color: var(--gse-ui-selectorCard-default-backgroundColor);
@@ -122,16 +122,16 @@
   line-height: 0;
 }
 .gux-selector-card .gux-content:focus-within {
-  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-selector-card.gux-descriptive .gux-content {
   align-items: flex-start;
-  width: var(--gse-ui-selectorCard-descriptive-minWidth);
-  min-width: var(--gse-ui-selectorCard-descriptive-minWidth);
-  max-width: var(--gse-ui-selectorCard-descriptive-maxWidth);
-  min-height: var(--gse-ui-selectorCard-descriptive-minHeight);
-  max-height: var(--gse-ui-selectorCard-descriptive-maxHeight);
+  inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
+  min-inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
+  max-inline-size: var(--gse-ui-selectorCard-descriptive-maxWidth);
+  min-block-size: var(--gse-ui-selectorCard-descriptive-minHeight);
+  max-block-size: var(--gse-ui-selectorCard-descriptive-maxHeight);
   padding: var(--gse-ui-selectorCard-descriptive-padding);
   text-align: start;
   white-space: normal;
@@ -144,32 +144,32 @@
   -webkit-line-clamp: 3;
 }
 .gux-selector-card.gux-descriptive .gux-content ::slotted(gux-badge) {
-  margin-top: var(--gse-ui-selectorCard-descriptive-badge-marginTop);
+  margin-block-start: var(--gse-ui-selectorCard-descriptive-badge-marginTop);
 }
 .gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio]),
 .gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=checkbox]) {
-  left: 0;
+  inset-inline-start: 0;
   border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
 }
 .gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio])::before,
 .gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=checkbox])::before {
   inset-block-start: var(--gse-ui-selectorCard-descriptive-gap);
   inset-inline-end: var(--gse-ui-selectorCard-descriptive-padding);
-  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));
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
 }
 .gux-selector-card.gux-descriptive .gux-content ::slotted(label) {
   display: block;
-  margin-bottom: var(--gse-ui-selectorCard-descriptive-text-gap);
+  margin-block-end: var(--gse-ui-selectorCard-descriptive-text-gap);
   font-family: var(--gse-ui-selectorCard-descriptive-label-fontFamily);
   font-size: var(--gse-ui-selectorCard-descriptive-label-fontSize);
   font-weight: var(--gse-ui-selectorCard-descriptive-label-fontWeight);
   line-height: var(--gse-ui-selectorCard-descriptive-label-lineHeight);
 }
 .gux-selector-card.gux-descriptive .gux-content ::slotted(gux-icon) {
-  width: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
-  height: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
-  margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+  inline-size: var(--gse-ui-icon-large-size);
+  block-size: var(--gse-ui-icon-large-size);
+  margin-block-end: var(--gse-ui-selectorCard-descriptive-gap);
 }
 .gux-selector-card.gux-disabled {
   pointer-events: none;

package/dist/collection/components/beta/gux-time-zone-picker/gux-time-zone-picker.css

@@ -1,5 +1,6 @@
 gux-dropdown .zone-header {
-  padding: 8px 12px 4px;
+  padding-block: 8px 4px;
+  padding-inline: 12px;
   color: #6b7585;
   text-transform: uppercase;
 }
@@ -7,7 +8,7 @@ gux-dropdown gux-option {
   padding: var(--gse-ui-menu-option-padding);
 }
 gux-dropdown gux-option.gux-has-defaults {
-  height: auto;
+  block-size: auto;
 }
 gux-dropdown gux-option .gux-option-wrapper {
   display: flex;

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

@@ -2,11 +2,11 @@
   position: fixed;
   z-index: var(--gse-semantic-zIndex-tooltip);
   display: none;
-  width: max-content;
-  max-width: 250px;
+  inline-size: max-content;
+  max-inline-size: 250px;
   pointer-events: none;
   border-radius: var(--gse-ui-tooltip-borderRadius);
-  box-shadow: var(--gse-ui-tooltip-boxShadow-x, var(--gse-ui-tooltip-boxShadow-offsetX)) var(--gse-ui-tooltip-boxShadow-y, var(--gse-ui-tooltip-boxShadow-offsetY)) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
+  box-shadow: var(--gse-ui-tooltip-boxShadow-offsetX) var(--gse-ui-tooltip-boxShadow-offsetY) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
   opacity: 0;
 }
 
@@ -36,12 +36,12 @@
 }
 .gux-container ::slotted(gux-icon) {
   align-self: center;
-  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));
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-tooltip-light-foregroundColor);
 }
 .gux-container ::slotted(*) {
-  width: 100%;
+  inline-size: 100%;
   overflow-wrap: break-word;
   white-space: normal;
 }
@@ -52,8 +52,8 @@
 }
 .gux-container.gux-dark ::slotted(gux-icon) {
   align-self: center;
-  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));
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-tooltip-dark-iconColor);
 }
 

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

@@ -1,5 +1,5 @@
 :host:first-child .gux-header {
-  border-top: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
+  border-block-start: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 
 section.gux-disabled {
@@ -18,18 +18,18 @@ section.gux-disabled > * {
   flex-wrap: nowrap;
   place-content: center flex-start;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
   padding: var(--gse-ui-accordion-header-padding);
   margin: 0;
   cursor: pointer;
-  border-bottom: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
+  border-block-end: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 .gux-header .gux-header-text {
   flex: 1 1 auto;
   align-self: auto;
   font-weight: var(--gse-ui-accordion-header-label-defaultText-fontWeight);
   color: var(--gse-ui-accordion-header-default-foreground-labelColor);
-  text-align: left;
+  text-align: start;
 }
 .gux-header.gux-reverse-headings .gux-header-text {
   display: flex;
@@ -46,7 +46,8 @@ section.gux-disabled > * {
 }
 .gux-header ::slotted([slot=subheader]) {
   padding: 0;
-  margin: var(--gux-spacing-3xs) 0 0;
+  margin-block: var(--gux-spacing-3xs) 0;
+  margin-inline: 0;
   font-family: var(--gse-ui-accordion-contentItem-defaultText-fontFamily) !important;
   font-size: var(--gse-ui-accordion-contentItem-defaultText-fontSize) !important;
   font-weight: var(--gse-ui-accordion-contentItem-defaultText-fontWeight) !important;
@@ -54,14 +55,15 @@ section.gux-disabled > * {
   color: var(--gse-ui-accordion-contentItem-foregroundColor);
 }
 .gux-header ::slotted([slot=subheader]) .gux-reverse-headings {
-  margin: 0 0 var(--gux-spacing-3xs) 0;
+  margin-block: 0 var(--gux-spacing-3xs);
+  margin-inline: 0;
 }
 .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));
-  margin-right: var(--gse-ui-accordion-header-gap);
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
+  margin-inline-end: var(--gse-ui-accordion-header-gap);
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
 }
 .gux-header ::slotted([slot=icon]) .gux-reverse-headings {
@@ -71,19 +73,19 @@ section.gux-disabled > * {
   flex: 0 1 auto;
   align-items: center;
   align-self: auto;
-  margin-left: var(--gse-ui-accordion-header-gap);
+  margin-inline-start: var(--gse-ui-accordion-header-gap);
   line-height: 0;
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
   transition: transform 0.5s ease;
   transform-origin: center;
 }
 .gux-header .gux-header-icon gux-icon {
-  width: var(--gse-ui-accordion-header-chevronIcon);
-  height: var(--gse-ui-accordion-header-chevronIcon);
+  inline-size: var(--gse-ui-accordion-header-chevronIcon);
+  block-size: var(--gse-ui-accordion-header-chevronIcon);
 }
 .gux-header .gux-header-icon.gux-arrow-position-start {
   order: -1;
-  margin-right: var(--gse-ui-accordion-header-gap);
+  margin-inline-end: var(--gse-ui-accordion-header-gap);
 }
 .gux-header .gux-header-icon.gux-expanded {
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-open);
@@ -101,7 +103,7 @@ section.gux-disabled > * {
 .gux-content {
   box-sizing: border-box;
   display: none;
-  border-bottom: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
+  border-block-end: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 .gux-content.gux-expanded {
   display: block;

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);
 }