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

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

@@ -0,0 +1,97 @@
+/**
+  * @prop --gse-ui-badge-height
+  * @prop --gse-ui-badge-gap
+  * @prop --gse-ui-badge-borderRadius
+  * @prop --gse-ui-badge-text-fontFamily
+  * @prop --gse-ui-badge-text-fontSize
+  * @prop --gse-ui-badge-text-fontWeight // missing
+  * @prop --gse-ui-badge-text-lineHeight
+  * @prop --gse-ui-badge-error-bold-backgroundColor
+  * @prop --gse-ui-badge-error-bold-foregroundColor
+  * @prop --gse-ui-badge-error-regular-backgroundColor
+  * @prop --gse-ui-badge-error-regular-foregroundColor
+  * @prop --gse-ui-badge-info-bold-backgroundColor
+  * @prop --gse-ui-badge-info-bold-foregroundColor
+  * @prop --gse-ui-badge-info-regular-backgroundColor
+  * @prop --gse-ui-badge-info-regular-foregroundColor
+  * @prop --gse-ui-badge-success-bold-backgroundColor
+  * @prop --gse-ui-badge-success-bold-foregroundColor
+  * @prop --gse-ui-badge-success-regular-backgroundColor
+  * @prop --gse-ui-badge-success-regular-foregroundColor
+  * @prop --gse-ui-badge-warning-bold-backgroundColor
+  * @prop --gse-ui-badge-warning-bold-foregroundColor
+  * @prop --gse-ui-badge-warning-regular-backgroundColor
+  * @prop --gse-ui-badge-warning-regular-foregroundColor
+  */
+:host {
+  display: inline-block;
+  height: fit-content;
+  border-radius: var(--gse-ui-badge-borderRadius);
+}
+
+.gux-badge {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: var(--gse-ui-badge-height);
+  padding: var(--gse-ui-badge-padding);
+  border-radius: var(--gse-ui-badge-borderRadius);
+  gap: var(--gse-ui-badge-gap);
+  font-family: var(--gse-ui-badge-text-fontFamily);
+  font-size: var(--gse-ui-badge-text-fontSize);
+  font-weight: var(--gse-ui-badge-text-fontWeight, 600);
+  line-height: var(--gse-ui-badge-text-lineHeight);
+}
+.gux-badge gux-tooltip-title {
+  white-space: nowrap;
+}
+.gux-badge gux-tooltip-title ::slotted(gux-icon) {
+  height: 16px;
+  font-size: 16px;
+}
+.gux-badge .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;
+}
+.gux-badge.gux-info {
+  color: var(--gse-ui-badge-info-regular-foregroundColor);
+  background-color: var(--gse-ui-badge-info-regular-backgroundColor);
+}
+.gux-badge.gux-info.gux-bold {
+  color: var(--gse-ui-badge-info-bold-foregroundColor);
+  background-color: var(--gse-ui-badge-info-bold-backgroundColor);
+}
+.gux-badge.gux-error {
+  color: var(--gse-ui-badge-error-regular-foregroundColor);
+  background-color: var(--gse-ui-badge-error-regular-backgroundColor);
+}
+.gux-badge.gux-error.gux-bold {
+  color: var(--gse-ui-badge-error-bold-foregroundColor);
+  background-color: var(--gse-ui-badge-error-bold-backgroundColor);
+}
+.gux-badge.gux-warning {
+  color: var(--gse-ui-badge-warning-regular-foregroundColor);
+  background-color: var(--gse-ui-badge-warning-regular-backgroundColor);
+}
+.gux-badge.gux-warning.gux-bold {
+  color: var(--gse-ui-badge-warning-bold-foregroundColor);
+  background-color: var(--gse-ui-badge-warning-bold-backgroundColor);
+}
+.gux-badge.gux-success {
+  color: var(--gse-ui-badge-success-regular-foregroundColor);
+  background-color: var(--gse-ui-badge-success-regular-backgroundColor);
+}
+.gux-badge.gux-success.gux-bold {
+  color: var(--gse-ui-badge-success-bold-foregroundColor);
+  background-color: var(--gse-ui-badge-success-bold-backgroundColor);
+}
+.gux-badge.gux-inherit {
+  color: inherit;
+  background-color: inherit;
+}

package/dist/collection/components/{beta → stable}/gux-badge/gux-badge.js

@@ -7,7 +7,6 @@ import translationResources from './i18n/en.json';
  */
 export class GuxBadge {
   constructor() {
-    this.color = 'neutral';
     this.accent = 'info';
     this.bold = false;
     this.label = undefined;
@@ -27,7 +26,7 @@ export class GuxBadge {
     })));
   }
   getVariant() {
-    return `${this.color}${this.bold ? '-bold' : ''}`;
+    return `${this.accent}${this.bold ? '-bold' : ''}`;
   }
   async componentWillLoad() {
     trackComponent(this.root);
@@ -36,16 +35,15 @@ export class GuxBadge {
   render() {
     return (h("div", { class: {
         'gux-badge': true,
-        [`gux-${this.color}`]: true,
         [`gux-${this.accent}`]: true,
         'gux-bold': this.bold
       } }, this.renderBadgeTitle(), this.renderSrText()));
   }
-  static get is() { return "gux-badge-beta"; }
+  static get is() { return "gux-badge"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-badge.less"]
+      "$": ["gux-badge.scss"]
     };
   }
   static get styleUrls() {
@@ -55,29 +53,6 @@ export class GuxBadge {
   }
   static get properties() {
     return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxBadgeColor",
-          "resolved": "\"green\" | \"inherit\" | \"neutral\" | \"red\" | \"yellow\"",
-          "references": {
-            "GuxBadgeColor": {
-              "location": "import",
-              "path": "./gux-badge.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'neutral'"
-      },
       "accent": {
         "type": "string",
         "mutable": false,

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

@@ -0,0 +1,98 @@
+/**
+  * @prop --gse-ui-badge-height
+  * @prop --gse-ui-badge-height
+  * @prop --gse-ui-blankState-backgroundColor
+  * @prop --gse-ui-blankState-borderRadius
+  * @prop --gse-ui-blankState-gapContent
+  * @prop --gse-ui-blankState-gapMain
+  * @prop --gse-ui-blankState-gapMessage
+  * @prop --gse-ui-blankState-icon-size-lg
+  * @prop --gse-ui-blankState-icon-size-sm
+  * @prop --gse-ui-blankState-iconColor
+  * @prop --gse-ui-blankState-large-width : // TODO https://inindca.atlassian.net/browse/COMUI-2242
+  * @prop --gse-ui-blankState-padding
+  * @prop --gse-ui-blankState-small-width : // TODO https://inindca.atlassian.net/browse/COMUI-2242
+  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontFamily
+  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontSize
+  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontWeight
+  * @prop --gse-ui-progressAndLoading-blankState-large-header-lineHeight
+  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontFamily
+  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontSize
+  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontWeight
+  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-lineHeight
+  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontFamily
+  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontSize
+  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontWeight
+  * @prop --gse-ui-progressAndLoading-blankState-small-header-lineHeight
+  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontFamily
+  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontSize
+  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontWeight
+  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-lineHeight
+  */
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  container-type: inline-size;
+}
+
+.gux-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gse-ui-blankState-padding);
+  border-radius: var(--gse-ui-blankState-borderRadius);
+  color: var(--gse-ui-blankState-foregroundColor);
+  background-color: var(--gse-ui-blankState-backgroundColor);
+}
+.gux-container .gux-image {
+  padding-bottom: var(--gse-ui-blankState-gapMain);
+}
+.gux-container .gux-message {
+  padding-bottom: var(--gse-ui-blankState-gapMessage);
+}
+.gux-container .gux-guidance {
+  padding-bottom: var(--gse-ui-blankState-gapContent);
+}
+.gux-container ::slotted(gux-icon) {
+  width: var(--gse-ui-blankState-icon-size-lg);
+  height: var(--gse-ui-blankState-icon-size-lg);
+  color: var(--gse-ui-blankState-iconColor);
+}
+.gux-container slot[name=primary-message] {
+  color: var(--gse-ui-blankState-foregroundColor);
+  text-align: center;
+  font-family: var(--gse-ui-progressAndLoading-blankState-large-header-fontFamily);
+  font-weight: var(--gse-ui-progressAndLoading-blankState-large-header-fontWeight);
+  line-height: var(--gse-ui-progressAndLoading-blankState-large-header-lineHeight);
+  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);
+}
+.gux-container slot[name=additional-guidance] {
+  color: var(--gse-ui-blankState-foregroundColor);
+  text-align: center;
+  font-family: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontFamily);
+  font-weight: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontWeight);
+  line-height: var(--gse-ui-progressAndLoading-blankState-large-subheader-lineHeight);
+  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);
+}
+
+@container (width <= 250px) {
+  .gux-container ::slotted(gux-icon) {
+    width: var(--gse-ui-blankState-icon-size-sm);
+    height: var(--gse-ui-blankState-icon-size-sm);
+  }
+  .gux-container slot[name=primary-message] {
+    font-family: var(--gse-ui-progressAndLoading-blankState-small-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-blankState-small-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-blankState-small-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);
+  }
+  .gux-container slot[name=additional-guidance] {
+    font-family: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-blankState-small-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);
+  }
+}

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

@@ -0,0 +1,29 @@
+import { h } from '@stencil/core';
+import { trackComponent } from '@utils/tracking/usage';
+/**
+ * @slot primary-message - Required slot for primary-message.
+ * @slot image - Slot for gux-icon element.
+ * @slot additional-guidance - Slot for additional-guidance.
+ * @slot call-to-action - Slot for the message call to action button.
+ */
+export class GuxBlankState {
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  render() {
+    return (h("div", { class: "gux-container" }, h("div", { class: "gux-image" }, h("slot", { name: "image" })), h("div", { class: "gux-message" }, h("slot", { name: "primary-message" })), h("div", { class: "gux-guidance" }, h("slot", { name: "additional-guidance" })), h("gux-button-slot", { accent: "primary" }, h("slot", { name: "call-to-action" }))));
+  }
+  static get is() { return "gux-blank-state"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-blank-state.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-blank-state.css"]
+    };
+  }
+  static get elementRef() { return "root"; }
+}

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

@@ -1,3 +1,42 @@
+.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);
+}
+
 :host {
   display: inline-block;
   pointer-events: none;
@@ -58,9 +97,10 @@ button:active:enabled {
   background-color: var(--gse-ui-button-secondary-active-backgroundColor);
 }
 button:focus-visible:enabled {
-  outline: 3px solid #7b88f7;
-  outline-offset: 1px;
-  border-radius: 3px;
+  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);
 }
 button.gux-primary {
   color: var(--gse-ui-button-primary-default-foregroundColor);

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

@@ -19,7 +19,6 @@ import { getGuxButtonMultiAccent } from './gux-button-multi.types';
  */
 export class GuxButtonMulti {
   constructor() {
-    this.text = undefined;
     this.disabled = false;
     this.accent = 'secondary';
     this.isOpen = false;
@@ -104,7 +103,7 @@ export class GuxButtonMulti {
     trackComponent(this.root, { variant: this.accent });
   }
   render() {
-    return (h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot-beta", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { name: "title" }, this.text), h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null)))));
+    return (h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { name: "title" }), h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null)))));
   }
   static get is() { return "gux-button-multi"; }
   static get encapsulation() { return "shadow"; }
@@ -120,23 +119,6 @@ export class GuxButtonMulti {
   }
   static get properties() {
     return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The component text."
-        },
-        "attribute": "text",
-        "reflect": false
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/{beta → stable}/gux-button-slot/gux-button-slot.css

@@ -1,3 +1,42 @@
+.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);
+}
+
 :host {
   display: inline-block;
   pointer-events: none;
@@ -41,9 +80,10 @@
 ::slotted(input[type=button]:focus-visible:enabled),
 ::slotted(input[type=submit]:focus-visible:enabled),
 ::slotted(button:focus-visible:enabled) {
-  outline: 3px solid #7b88f7;
-  outline-offset: 1px;
-  border-radius: 3px;
+  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);
 }
 
 ::slotted(input[type=button]:hover:enabled),

package/dist/collection/components/{beta → stable}/gux-button-slot/gux-button-slot.js

@@ -33,7 +33,7 @@ export class GuxButtonSlot {
   render() {
     return (h(Host, { accent: this.accent }, h("slot", null)));
   }
-  static get is() { return "gux-button-slot-beta"; }
+  static get is() { return "gux-button-slot"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -56,7 +56,7 @@ export class GuxButtonSlot {
           "references": {
             "GuxButtonAccent": {
               "location": "import",
-              "path": "../../stable/gux-button/gux-button.types"
+              "path": "../gux-button/gux-button.types"
             }
           }
         },

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

@@ -51,7 +51,7 @@
   text-align: center;
   font-size: 12px;
   line-height: 20px;
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 700;
 }
@@ -88,13 +88,13 @@
   padding: 0;
   margin: 0;
   text-align: center;
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
 }
 .gux-calendar .gux-content table tr th {
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 700;
 }

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

@@ -0,0 +1,128 @@
+.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 */
+:host([gs-reorder-indicator=above]) .gux-container {
+  border-top-color: #aac9ff;
+}
+
+:host([gs-reorder-indicator=below]) .gux-container {
+  border-bottom-color: #aac9ff;
+}
+
+.gux-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: -2px;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+.gux-container.gux-drop-above {
+  border-top-color: #aac9ff;
+}
+.gux-container.gux-drop-below {
+  border-bottom-color: #aac9ff;
+}
+.gux-container.gux-dragging {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  opacity: 0.4;
+}
+.gux-container .gux-reorder {
+  all: unset;
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  margin-right: 4px;
+  color: #596373;
+  cursor: grab;
+  border-radius: 4px;
+}
+.gux-container .gux-reorder.gux-reordering:focus-visible gux-icon {
+  color: #2a60c8;
+}
+.gux-container .gux-reorder:active {
+  pointer-events: none;
+  cursor: grabbing !important;
+}
+.gux-container .gux-reorder:hover, .gux-container .gux-reorder: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);
+}
+.gux-container .gux-reorder:hover gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
+  color: #2a60c8;
+}
+.gux-container .gux-select {
+  position: relative;
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 1;
+}
+.gux-container .gux-select gux-text-highlight {
+  position: absolute;
+  top: 2px;
+  left: 24px;
+  pointer-events: none;
+}
+
+.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;
+}

package/dist/collection/components/{beta → stable}/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -136,13 +136,13 @@ export class GuxColumnManagerItem {
       } }, h("button", { class: {
         'gux-reorder': true,
         'gux-reordering': this.isReordering
-      }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { class: "gux-select" }, h("slot", { onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { class: { 'gux-active': this.highlightActive }, highlight: this.highlight, text: this.text, strategy: "contains" })))));
+      }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { class: "gux-select" }, h("slot", { onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
   }
   static get is() { return "gux-column-manager-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-column-manager-item.less"]
+      "$": ["gux-column-manager-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-column-manager/gux-column-manager.css

@@ -5,6 +5,13 @@
 .gux-container .gux-search gux-content-search {
   width: 100%;
 }
+.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-decoration,
+.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-cancel-button,
+.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-results-button,
+.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-results-decoration {
+  display: none;
+  -webkit-appearance: none;
+}
 .gux-container .gux-select {
   padding: 8px 0 8px 16px;
   margin: 4px 0;
@@ -12,6 +19,7 @@
   background-color: #f6f7f9;
   border-radius: 4px;
 }
+
 .gux-sr-only:not(:focus):not(:active) {
   position: absolute;
   width: 1px;
@@ -20,4 +28,4 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
-}
+}