genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.functional.js

@@ -0,0 +1,11 @@
+import { h } from '@stencil/core';
+import { largeSpinner, largeBorder, smallSpinner, smallBorder } from './gux-radial-loading.service';
+export const GuxSpinnerState = ({ context = 'modal', screenreaderText }) => {
+  let size = largeSpinner;
+  let radius = largeSpinner * 0.5 - largeBorder * 0.5;
+  if (context === 'input') {
+    size = smallSpinner;
+    radius = smallSpinner * 0.5 - smallBorder * 0.5;
+  }
+  return (h("div", { class: `gux-${context}`, role: "progressbar", "aria-label": screenreaderText }, h("svg", { class: "gux-svg-container", viewBox: `0 0 ${size} ${size}`, role: "presentation" }, h("circle", { cx: "50%", cy: "50%", r: radius, class: "gux-static-circle" }), h("circle", { cx: "50%", cy: "50%", r: radius, class: "gux-dynamic-circle", "stroke-linecap": "round" }), h("circle", { cx: "50%", cy: "50%", r: radius, class: "gux-dynamic-circle-mask", "stroke-linecap": "round" }))));
+};

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../i18n';
 import { trackComponent } from '@utils/tracking/usage';
+import { GuxSpinnerState } from './gux-radial-loading.functional';
 import modalComponentResources from './i18n/en.json';
 export class GuxRadialLoading {
   constructor() {
@@ -12,7 +13,7 @@ export class GuxRadialLoading {
     this.getI18nValue = await buildI18nForComponent(this.root, modalComponentResources);
   }
   render() {
-    return (h("div", { role: "progressbar", "aria-label": this.screenreaderText || this.getI18nValue('loading'), class: `gux-spinner-container gux-${this.context}` }, h("div", { role: "presentation", class: "gux-spin-circle" })));
+    return (h(GuxSpinnerState, { context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
   }
   static get is() { return "gux-radial-loading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.service.js

@@ -0,0 +1,4 @@
+export const largeSpinner = 48; // Linked to --gse-ui-progressAndLoading-spinner-large
+export const largeBorder = 4; // Linked to --gse-ui-progressAndLoading-largeBorder
+export const smallSpinner = 16; // Linked to --gse-ui-progressAndLoading-spinner-large
+export const smallBorder = 2; // Linked to --gse-ui-progressAndLoading-largeBorder

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

@@ -1,40 +1,43 @@
+/**
+  * @prop --gse-ui-progressAndLoading-largeBorder : //TODO https://inindca.atlassian.net/browse/COMUI-2226
+  * @prop --gse-ui-progressAndLoading-largeBorder-0 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
+  * @prop --gse-ui-progressAndLoading-largeBorder-1 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
+  * @prop --gse-ui-progressAndLoading-largeBorder-2 : //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-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;
 }
-/* stylelint-disable-next-line selector-class-pattern */
-div[role='progressbar'] .gux-svg-container {
+
+div[role=progressbar] .gux-svg-container {
   display: block;
+  height: var(--gse-ui-progressAndLoading-spinner-large);
+  width: var(--gse-ui-progressAndLoading-spinner-large);
 }
-div[role='progressbar'] .gux-svg-container .gux-dynamic-circle {
+div[role=progressbar] .gux-svg-container .gux-dynamic-circle {
   fill: none;
-  stroke: #2a60c8;
-  stroke-width: 5;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-}
-div[role='progressbar'] .gux-svg-container .gux-dynamic-circle-shadow {
-  fill: none;
-  stroke: #75a8ff;
-  stroke-width: 5;
+  stroke: var(--gse-ui-progressAndLoading-spinner-foreground);
+  stroke-width: 4;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
 }
-div[role='progressbar'] .gux-svg-container .gux-static-circle {
+div[role=progressbar] .gux-svg-container .gux-static-circle {
   fill: none;
-  stroke: #deeaff;
+  stroke: var(--gse-ui-progressAndLoading-spinner-base);
   stroke-width: 4;
 }
-div[role='progressbar'] .gux-svg-container .gux-percentage {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+div[role=progressbar] .gux-svg-container .gux-percentage {
+  font-family: var(--gse-ui-progressAndLoading-spinner-text-fontFamily);
+  font-weight: var(--gse-ui-progressAndLoading-spinner-text-fontWeight);
+  line-height: var(--gse-ui-progressAndLoading-spinner-text-lineHeight);
+  font-size: var(--gse-ui-progressAndLoading-spinner-text-fontSize);
+  fill: var(--gse-ui-progressAndLoading-textColor);
   text-anchor: middle;
-  fill: #2e394c;
-}
-div[role='progressbar'] .gux-svg-container .gux-percentage.gux-small {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
-}
+}

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.functional.js

@@ -1,10 +1,7 @@
 import { h } from '@stencil/core';
-import { getPercentageString, RADIUS, STROKE_DASH } from './gux-radial-progress.service';
-export const GuxPercentageState = ({ value, max, scale, dropshadowId, screenreaderText }) => {
-  return (h("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": "0", "aria-valuemax": max, "aria-label": screenreaderText }, h("svg", { class: "gux-svg-container", width: "60px", height: "60px", viewBox: "0 0 60 60", role: "presentation" }, h("filter", { id: dropshadowId }, h("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1.4" }), h("feOffset", { dx: "0", dy: "0", result: "offsetblur" }), h("feMerge", null, h("feMergeNode", null), h("feMergeNode", { in: "SourceGraphic" }))), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-static-circle" }), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle-shadow", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round", filter: 'url(#' + dropshadowId + ')' }), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round" }), h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: {
-      'gux-percentage': true,
-      'gux-small': ![0, 1].includes(scale)
-    } }, getPercentageString(value, max, scale)))));
+import { getPercentageString, STROKE_DASH, RADIUS, OVERALL_SIZE } from './gux-radial-progress.service';
+export const GuxPercentageState = ({ value, max, screenreaderText }) => {
+  return (h("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": "0", "aria-valuemax": max, "aria-label": screenreaderText }, h("svg", { class: "gux-svg-container", viewBox: `0 0 ${OVERALL_SIZE} ${OVERALL_SIZE}`, role: "presentation" }, h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-static-circle" }), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round" }), h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: "gux-percentage" }, getPercentageString(value, max)))));
 };
 export const GuxSpinnerState = ({ screenreaderText }) => {
   return (h("gux-radial-loading", { "screenreader-text": screenreaderText, context: "modal" }));

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

@@ -1,15 +1,12 @@
 import { h } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
 import { logWarn } from '../../../utils/error/log-error';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
 import { GuxPercentageState, GuxSpinnerState } from './gux-radial-progress.functional';
 import { canShowPercentageState } from './gux-radial-progress.service';
 export class GuxRadialProgress {
   constructor() {
-    this.dropshadowId = randomHTMLId('gux-dropshadow');
     this.value = undefined;
     this.max = 100;
-    this.scale = 0;
     this.screenreaderText = '';
   }
   componentWillLoad() {
@@ -23,14 +20,14 @@ export class GuxRadialProgress {
   }
   render() {
     return canShowPercentageState(this.value, this.max)
-      ? (h(GuxPercentageState, { value: this.value, max: this.max, scale: this.scale, dropshadowId: this.dropshadowId, screenreaderText: this.screenreaderText }))
+      ? (h(GuxPercentageState, { value: this.value, max: this.max, screenreaderText: this.screenreaderText }))
       : (h(GuxSpinnerState, { screenreaderText: this.screenreaderText }));
   }
   static get is() { return "gux-radial-progress"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-radial-progress.less"]
+      "$": ["gux-radial-progress.scss"]
     };
   }
   static get styleUrls() {
@@ -75,29 +72,6 @@ export class GuxRadialProgress {
         "reflect": false,
         "defaultValue": "100"
       },
-      "scale": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxRadialProgressScale",
-          "resolved": "0 | 1 | 2",
-          "references": {
-            "GuxRadialProgressScale": {
-              "location": "import",
-              "path": "./gux-radial-progress.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The max number of decimal places that will be displayed"
-        },
-        "attribute": "scale",
-        "reflect": false,
-        "defaultValue": "0"
-      },
       "screenreaderText": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.service.js

@@ -1,11 +1,10 @@
-import clamp from '../../../utils/number/clamp';
-export const RADIUS = 23.5;
+export const OVERALL_SIZE = 48; // Linked to --gse-ui-progressAndLoading-spinner-large
+export const BORDER_SIZE = 4; // Linked to --gse-ui-progressAndLoading-largeBorder
+export const RADIUS = OVERALL_SIZE * 0.5 - BORDER_SIZE * 0.5;
 export const STROKE_DASH = 2 * Math.PI * RADIUS;
 export function canShowPercentageState(value, max) {
   return !(isNaN(value) || isNaN(max) || value > max || value < 0 || max === 0);
 }
-export function getPercentageString(value, max, scale) {
-  const scaleFactor = Math.pow(10, clamp(scale, 0, 2));
-  return `${Math.round(((value + Number.EPSILON) / max) * 100 * scaleFactor) /
-    scaleFactor}%`;
+export function getPercentageString(value, max) {
+  return `${Math.round(((value + Number.EPSILON) / max) * 100)}%`;
 }

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

@@ -1,18 +1,35 @@
+/**
+ * @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;
 }
-:host:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(117, 168, 255, 0.5);
+
+:host(:host:focus-visible) {
+  outline: var(--gse-ui-focus-width) var(--gse-ui-focus-style) var(--gse-ui-focus-color);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px var(--gse-ui-focus-style);
 }
+
 .gux-rating-star-container {
-  color: #2e394c;
+  color: var(--gse-ui-ui--rating-default-color);
 }
 .gux-rating-star-container.gux-disabled {
-  opacity: 0.5;
+  pointer-events: none;
+  color: var(--gse-ui-rating-disabled-color);
+  opacity: var(--gse-ui-rating-disabled-opacity);
 }
 .gux-rating-star-container gux-icon {
-  width: 24px;
-  height: 24px;
+  width: var(--gse-ui-rating-size);
+  height: var(--gse-ui-rating-size);
+  color: var(--gse-ui-rating-default-color);
 }
+.gux-rating-star-container gux-icon:hover:not(.gux-disabled) {
+  color: var(--gse-ui-rating-hover-color);
+}

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

@@ -98,7 +98,7 @@ export class GuxRating {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-rating.less"]
+      "$": ["gux-rating.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.css

@@ -6,6 +6,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 :host(:focus-within) {
   position: inherit;
   top: inherit;
@@ -14,9 +15,10 @@
   height: inherit;
   overflow: inherit;
 }
+
 ::slotted(a) {
   padding: 12px;
   font-size: 2rem;
   background-color: #fdfdfd;
-  box-shadow: 0 8px 24px rgba(32, 41, 55, 0.4), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
-}
+  box-shadow: 0 8px 24px fade(#202937, 40%), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
+}

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.js

@@ -11,7 +11,7 @@ export class GuxSkipNavigationItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-skip-navigation-item.less"]
+      "$": ["gux-skip-navigation-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-list.css

@@ -6,6 +6,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 :host(:focus-within) {
   position: inherit;
   top: inherit;
@@ -16,6 +17,7 @@
   position: absolute;
   inset: 0;
 }
+
 .gux-container nav {
   width: fit-content;
   margin: 40px auto;
@@ -23,4 +25,4 @@
 .gux-container nav ul {
   padding: 0;
   margin: 0;
-}
+}

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-list.js

@@ -13,12 +13,12 @@ export class GuxSkipNavigationList {
   render() {
     return (h("div", { class: "gux-container" }, h("nav", { "aria-label": this.i18n('navigationName') }, h("ul", { role: "list" }, h("slot", null)))));
   }
-  static get is() { return "gux-skip-navigation-list-beta"; }
+  static get is() { return "gux-skip-navigation-list"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-skip-navigation-list.less"]
+      "$": ["gux-skip-navigation-list.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,8 +1,59 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
 gux-switch-item > .gux-switch-item {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-regular);
+  font-size: var(--gse-core-fontSize-xs);
+  line-height: var(--gse-core-lineHeight-xs);
   font: unset;
   color: #2e394c;
   text-align: center;
@@ -18,22 +69,20 @@ gux-switch-item[disabled] {
   opacity: 0.5;
 }
 gux-switch-item.gux-selected {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-bold);
 }
+
 gux-switch > gux-switch-item .gux-switch-item {
   padding: 0 8px 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible,
-gux-switch > gux-switch-item .gux-switch-item:hover {
+gux-switch > gux-switch-item .gux-switch-item:focus-visible, gux-switch > gux-switch-item .gux-switch-item:hover {
   padding: 0 8px 1px;
   border-bottom: 4px solid #2a60c8;
   outline: none;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg,
-gux-switch > gux-switch-item .gux-switch-item:hover > gux-icon svg {
+gux-switch > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg, gux-switch > gux-switch-item .gux-switch-item:hover > gux-icon svg {
   fill: #2e394c;
 }
 gux-switch > gux-switch-item .gux-switch-item > gux-icon {
@@ -48,15 +97,14 @@ gux-switch > gux-switch-item.gux-selected .gux-switch-item > gux-icon svg {
   fill: #2e394c;
 }
 gux-switch.gux-small > gux-switch-item .gux-switch-item {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-regular);
+  font-size: var(--gse-core-fontSize-xs);
+  line-height: var(--gse-core-lineHeight-xs);
   padding: 0 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch.gux-small > gux-switch-item .gux-switch-item:focus-visible,
-gux-switch.gux-small > gux-switch-item .gux-switch-item:hover {
+gux-switch.gux-small > gux-switch-item .gux-switch-item:focus-visible, gux-switch.gux-small > gux-switch-item .gux-switch-item:hover {
   border-bottom-color: #2e394c;
 }
 gux-switch.gux-small > gux-switch-item .gux-switch-item > gux-icon {
@@ -65,4 +113,4 @@ gux-switch.gux-small > gux-switch-item .gux-switch-item > gux-icon {
 }
 gux-switch.gux-small > gux-switch-item.gux-selected .gux-switch-item {
   border-bottom-color: #2e394c;
-}
+}

package/dist/collection/components/stable/gux-switch/gux-switch-item/gux-switch-item.js

@@ -19,7 +19,7 @@ export class GuxSwitchItem {
   static get is() { return "gux-switch-item"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-switch-item.less"]
+      "$": ["gux-switch-item.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,4 +1,4 @@
-gux-switch {
+:host {
   display: flex;
   align-items: flex-end;
-}
+}

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

@@ -37,7 +37,7 @@ export class GuxSwitch {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-switch.less"]
+      "$": ["gux-switch.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-table/gux-all-row-select/gux-all-row-select.css

@@ -1,8 +1,8 @@
-gux-all-row-select .gux-label-text {
+:host .gux-label-text {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/{beta → stable}/gux-table/gux-all-row-select/gux-all-row-select.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import tableResources from '../i18n/en.json';
 export class GuxAllRowSelect {
   constructor() {
@@ -9,9 +9,7 @@ export class GuxAllRowSelect {
   }
   onCheck(event) {
     event.stopPropagation();
-    const input = event.target;
-    this.selected = input.checked;
-    this.internalallrowselectchange.emit();
+    this.internalallrowselectchange.emit(this.inputElement.checked);
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async setIndeterminate(indeterminate = true) {
@@ -24,9 +22,10 @@ export class GuxAllRowSelect {
     return (h("gux-form-field-checkbox", null, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", { class: "gux-label-text" }, this.i18n('selectAllTableRows')))));
   }
   static get is() { return "gux-all-row-select"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-all-row-select.less"]
+      "$": ["gux-all-row-select.scss"]
     };
   }
   static get styleUrls() {
@@ -38,7 +37,7 @@ export class GuxAllRowSelect {
     return {
       "selected": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

package/dist/collection/components/{beta → stable}/gux-table/gux-row-select/gux-row-select.css

@@ -1,8 +1,8 @@
-gux-row-select .gux-label-text {
+:host .gux-label-text {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/{beta → stable}/gux-table/gux-row-select/gux-row-select.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import tableResources from '../i18n/en.json';
 export class GuxRowSelect {
   constructor() {
@@ -10,20 +10,19 @@ export class GuxRowSelect {
   }
   onCheck(event) {
     event.stopPropagation();
-    const input = event.target;
-    this.selected = input.checked;
-    this.internalrowselectchange.emit();
+    this.internalrowselectchange.emit(this.inputElement.checked);
   }
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
   }
   render() {
-    return (h("gux-form-field-checkbox", null, h("input", { slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", { class: "gux-label-text" }, this.i18n('selectTableRow')))));
+    return (h("gux-form-field-checkbox", null, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", { class: "gux-label-text" }, this.i18n('selectTableRow')))));
   }
   static get is() { return "gux-row-select"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-row-select.less"]
+      "$": ["gux-row-select.scss"]
     };
   }
   static get styleUrls() {
@@ -35,7 +34,7 @@ export class GuxRowSelect {
     return {
       "selected": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

package/dist/collection/components/{beta → stable}/gux-table/gux-sort-control/gux-sort-control.css

@@ -7,11 +7,11 @@
   align-content: flex-start;
   align-items: center;
   justify-content: flex-start;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
+  border-top: var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent;
+  border-bottom: var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent;
 }
 .gux-container:focus-within {
-  border-bottom-color: #75a8ff;
+  border-bottom-color: var(--gse-ui-dataTableItems-header-selectedIndicatorColor);
 }
 .gux-container .gux-sort-button {
   all: unset;
@@ -22,29 +22,18 @@
 }
 .gux-container .gux-sort-button .gux-sort-icon {
   float: right;
-  width: 16px;
-  height: 16px;
-  margin: 8px;
-  color: #d7dce5;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-dataTableItems-header-sort-foregroundColor);
+  margin: 0 var(--gse-ui-dataTableItems-header-gap);
 }
 .gux-container .gux-sort-button .gux-sort-icon.gux-left {
   float: left;
-}
-.gux-container .gux-sort-button.gux-active .gux-sort-icon {
-  color: #2e394c;
+  margin-left: calc(2px + var(--gse-ui-dataTableItems-header-gap));
 }
 .gux-container .gux-resize-spacer {
   flex: 0 1 auto;
   align-self: stretch;
   order: 0;
   width: 2px;
-}
-.gux-sr-only:not(:focus):not(:active) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
+}